<style> 
body { font-family: Arial, sans-serif; margin:0; background:#f4f4f4; } 

/* Header y menú */ 

header {
    background: #3695D3;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.header-content 
{ 
display:flex; 
justify-content:space-between; 
align-items:center; 
padding:10px 20px; 
flex-wrap:wrap; 
} 

.logo-title 
{ 
display:flex; 
align-items:center; 
gap:10px; 
text-decoration:none; 
} 

.logo-title img 
{ 
height:50px; 
width:auto; 
margin-right:12px; 
} 

/* Estilo profesional para el título en TODAS las pantallas */ 

.logo-title h1 { 
color: #fff; /* blanco */ 
font-family: "Merriweather", "Georgia", serif; /* tipografía más seria y elegante */ 
text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* sombra sutil */ 
font-weight: 700; 
font-size: 1.4rem; 
margin: 0; 
line-height: 1.2; 
} 

/* Menú */ 

nav.nav { 
display:flex; 
align-items:center; 
} 

.nav-links { 
list-style:none; 
display:flex; 
gap:1rem; 
margin:0; 
padding:0; 
} 

/* Links del menú */
.nav-links li a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  position: relative;
  transition: color 0.3s ease;
}



/* Hover: cambia color + línea aparece */
.nav-links li a:hover {
    color: #92C7C1;
    text-shadow: 0px 0px 6px rgba(255, 215, 0, 0.6);
}
.nav-links li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #92C7C1; /* Color de la línea */
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.nav-links li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Icono hamburguesa */ 
.nav-toggle { 
display:none; 
} 

.nav-icon { 
display:none; 
flex-direction:column; 
cursor:pointer; 
gap:5px; 
} 

.nav-icon span { 
display:block; 
width:25px; 
height:3px; 
background:white; 
border-radius:2px; 
transition:all 0.3s; 
} 

.nav-toggle:checked + .nav-icon span:nth-child(1) { 
transform: rotate(45deg) translate(5px,5px); 
} 

.nav-toggle:checked + .nav-icon span:nth-child(2) { 
opacity:0; 
} 

.nav-toggle:checked + .nav-icon span:nth-child(3) { 
transform: rotate(-45deg) translate(6px,-6px); 
} 

.nav-overlay { 
display:none; 
position:fixed; 
top:0; 
left:0; 
width:100%; 
height:100%; 
backdrop-filter:blur(10px); 
background:rgba(0,0,0,0.3); 
z-index:998; 
opacity:0; 
transition:opacity 0.3s ease; 
} 

/* Secciones botones */ 
#seccionesNav { 
display:flex; 
flex-wrap:wrap; 
justify-content:center; 
gap:10px; 
padding:20px 10px 10px; 
background:#4B5DBA; 
position:fixed; 
top:60px; 
left:0; 
width:100%; 
z-index:900; 
} 

#seccionesNav button { 
padding:8px 15px; 
border:none; 
border-radius:5px; 
background:white; 
color:#4B5DBA; 
cursor:pointer; 
font-weight:bold; 
transition:all 0.3s; 
} 

#seccionesNav button.active { 
background:#9CD2C6; 
color:#000; 
} 

#seccionesNav button:hover 
{ 
transform:scale(1.05); 
} 

/* Main */ 
main { 
padding:20px; 
max-width:1200px; 
margin:0 auto; 
margin-top:140px; 
} 

#noticiasContent { 
display:grid; 
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
gap:20px; 
} 

.noticia { 
background:white; 
border-radius:10px; 
overflow:hidden; 
box-shadow:0 3px 10px rgba(0,0,0,0.1); 
display:flex; flex-direction:column; 
} 

.noticia img { 
width:100%; 
height:260px; 
object-fit:cover; 
} 

.noticia-content { 
padding:12px; 
flex:1; 
display:flex; 
flex-direction:column; 
} 

.noticia-content a { 
text-decoration:none; 
color:#3695D3; 
font-weight:bold; 
margin-top:auto; 
} 

.noticia-content p { 
font-size:0.85rem; 
color:#555; 
margin:5px 0; 
} 

/* Responsive */
 
@media(max-width:1024px){
.nav-links { 
position:fixed; 
top:0; 
left:-260px; 
height:100%; 
width:190px; 
background:#3695D3; 
flex-direction:column; 
gap:2rem; 
padding:3rem 2.2rem; 
box-shadow:2px 0 5px 
rgba(0,0,0,0.3); 
z-index:999; 
transition:transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
} 

.nav-toggle:checked + .nav-icon + .nav-overlay { 
display:block; 
opacity:1; 
} 

.nav-toggle:checked + .nav-icon + .nav-overlay + .nav-links { 
transform:translateX(260px); 
} 

.nav-links li a { 
font-size:1.2rem; 
font-weight:700; 
font-family: 
Arial, sans-serif; 
} 

.nav-icon { 
display:flex; 
margin-left:auto; 
} 

.nav-overlay { 
cursor:pointer; 
} 

#seccionesNav { 
top:70px; 
padding-top:10px; 
} 

#noticiasContent { 
padding-top:70px; 
} 
} 
</style>