:root{
--color-principal:#004d40;
--color-secundario:#ffc107;
--color-fondo:#0d536e;
--color-texto:#352727;
--color-enlace:#162a27;
--color-hover:#70d6a0;
--font-principal:'Arial',sans-serif;
--font-titulo:'Georgia',serif;
--bg:var(--color-fondo);
--surface:#f9fcfb;
--surface-2:#f9fffb;
--text:var(--color-texto);
--muted:#6d5c5c;
--primary:var(--color-principal);
--primary-2:#00352f;
--accent:var(--color-secundario);
--danger:#e35b5b;
--shadow:0 8px 20px rgba(0,0,0,.25);
--logo-size:160px
}
*{
    box-sizing:border-box
}
html,body{
    height:100%
}
body{
    margin:0;
    font-family:var(--font-principal);
    line-height:1.5;color:var(--text);
    background:linear-gradient(180deg,#0c4a60 0%, var(--color-fondo) 100%)
}
img,video{
    max-width:100%;
    display:block;
    border-radius:12px
}
a{
    text-decoration:none;
    color:var(--color-enlace)
}
h1,h2,h3,h4{
    font-family:var(--font-titulo)
}
/* ====================================
   2. Encabezado y Navegación
   ==================================== */
header {
    background-image: url('/Fotos/logoYaguarete.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    min-height: 100px; 
    color: white; /* Color del texto para que contraste con el fondo oscuro */
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 5px solid var();
}

/* Opcional: Mejorar el contraste del texto sobre la imagen */
.logo p {
    /* Ejemplo: Añade un fondo semitransparente al texto para que resalte */
    background-color: rgba(16, 127, 53, 0.534); 
    padding: 5px;
    display: inline-block;
    border-radius: 5px;
}
h1 {
    color: green;
    text-align: center;
}
div.logo p {
    background-color: #0d536e;
    }
/* RECOMENDACIÓN ADICIONAL: Mejorar la visibilidad del texto sobre la imagen */
/* Si tu imagen de fondo es muy 'ruidosa' o clara, es vital que el texto tenga buen contraste. */
.main-menu a, .logo p {
    text-shadow: 1px 1px 3px black; /* Sombra al texto para que destaque */
    background-color: rgba(0, 0, 0, 0.2); /* Fondo sutil para el texto */
    padding: 5px;
}
.logo h1 { 
    font-family: var(--font-titulo); 
    font-size: 2.2rem; 
    line-height: 1; 
}
.logo h1 a { 
    color: rgb(247, 40, 8); 
}
.logo p { 
    font-size: 0.9rem; 
    margin-top: 2px; 
}
.main-menu ul { 
    list-style: none; 
    display: flex; 
    gap: 20px; 
}
.main-menu ul li a { 
    color: white; 
    padding: 5px 10px; 
    transition: background-color 2.8s;
    border-radius: 5px; 
}
.main-menu ul li a:hover { 
    background-color: rgba(8, 152, 15, 0.607); 
    text-decoration: none; 
}
.main-menu {
    margin-top: auto;
    
    justify-content: flex-end;
}
.main-menu{
    display:inline-block;
    align-self:flex-end;
    margin:0 20px 6px;
    background:linear-gradient(180deg,#0d536e,#004d40);
    padding:6px 10px;
    border-radius:12px;
    box-shadow:var(--shadow)
}
.main-menu ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:flex-end
}
.main-menu a{
    display:inline-block;
    padding:10px 16px;
    border-radius:10px;
    background:#083a44;
    color:#fff;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 2px 6px rgba(0,0,0,.2)
}
.main-menu a:hover{
    background:var(--color-hover);
    color:#fff
}

.main-menu1{
    background:linear-gradient(180deg,#0d536e,#004d40);
    padding:10px 14px;
    border-radius:12px;
    box-shadow:var(--shadow)
}
.main-menu1 ul{
    list-style:none;
    margin:0;padding:0;
    display:flex;
    flex-direction:column;
    gap:10px
}
.main-menu1 a{
    display:block;
    padding:10px 16px;
    border-radius:10px;
    background:#083a44;
    color:#fff;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 2px 6px rgba(0,0,0,.2)
}
.main-menu1 a:hover{
    background:var(--color-hover);
    color:#fff
}
.container{
    display:grid;
    grid-template-columns:1fr 4fr 1fr;
    grid-template-areas:"sidebar-left main sidebar-right";
    gap:24px;
    align-items:start;
    padding:24px;
    max-width:1600px;
    margin:0 auto
}
.sidebar-left,
.sidebar-right{
    position:sticky;
    top:86px;
    align-self:start;
    background:var(--surface);
    border-radius:12px;
    padding:12px;
    box-shadow:var(--shadow)
}
.sidebar-left{grid-area:sidebar-left}
.sidebar-right{grid-area:sidebar-right}
.sidebar-ad h3{
    margin:8px 0 12px;
    color:var(--muted);
    font-weight:700
}
.ad-banner{
    background:var(--surface);
    padding:12px;
    border-radius:12px;
    box-shadow:var(--shadow);
    margin-bottom:16px
}
.ad-banner img{
    width:100%;
    height:auto;
}
main{
    display:block;
    grid-area:main;
    background:var(--surface);
    border-radius:12px;
    padding:12px;
    box-shadow:var(--shadow)
}
.main-feature{
    background:transparent;
    border-radius:0;
    box-shadow:none;
    padding:24px 0
}
.main-feature h2{
    margin:0 0 18px;
    font-size:1.6rem
}
.feature-content{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:16px
}
.feature-text p{
    margin:0 0 12px;
    color:var(--muted)
}
.feature-media{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}
.feature-media img{
    height:200px;
    object-fit:cover
}
.video-container{
    grid-column:1/-1;
    background:var(--surface-2);
    padding:12px;
    border-radius:12px
}
.map-container{
    margin-top:16px;
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:2px solid var(--color-fondo)
}
.noticias-section{
    margin-top:24px;
    background:var(--surface);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:20px
}
.noticias-section h2{
    margin:0 0 12px
}
.contenedor-noticias{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.tarjeta-noticia{
    background:var(--surface-2);
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--shadow);
    display:grid;
    grid-template-columns:140px 1fr
}
.tarjeta-noticia img{
    width:100%;
    height:100%;
    object-fit:cover
}
.info-noticia{
    padding:12px
}
.info-noticia h3{
    margin:0 0 6px;
    font-size:1rem
}
.info-noticia p{
    margin:0 0 10px;
    color:var(--muted)
}
.leer-mas{
    display:inline-block;
    padding:8px 12px;
    border-radius:10px;
    background:var(--primary);
    color:#fff;font-weight:700
}
.leer-mas:hover{
    background:var(--color-hover)
}
.portals-section{
    margin-top:20px;
    background:var(--surface);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:16px
}
.quick-links{
    margin-top:20px;
    background:var(--surface);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:20px
}
.quick-links-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px
}
.quick-link{
    display:block;
    padding:14px 16px;
    border-radius:12px;
    background:var(--accent);
    text-align:center;
    color:var(--text);
    font-weight:600;
    box-shadow:var(--shadow)
}
.quick-link:hover{
    background:var(--color-hover)
}
footer{
    margin-top:24px;
    background:var(--color-fondo);
    padding-top:16px
}
.footer-content{
    display:grid;
    grid-template-columns:1fr 1.2fr 1fr;
    gap:20px;
    max-width:1200px;
    margin:0 auto;
    padding:24px;
    align-items:start
}
.social-links h4,
.legal-links h4{
    margin:0 0 8px;
    color:var(--accent)
}
.social-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    margin-right:8px;
    border-radius:50%;
    background:#bfeee4;
    color:var(--color-principal);
    box-shadow:0 2px 6px rgba(0,0,0,.15)
}
.social-links a:hover{
    background:var(--color-hover)
}
.social-links{
    justify-self:start;
    align-self:start
}
.contact-form{
    background:#bfeee4;
    padding:14px;
    border-radius:12px;
    box-shadow:var(--shadow);
    justify-self:center;
    align-self:start;
    width:100%;
    max-width:600px;
    text-align:center;
    margin:0
}
.comment-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}
.comment-form textarea{
    grid-column:1/-1
}
.comment-form input,
.comment-form textarea{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(0,0,0,.08);
    background:#fff;
    color:var(--color-texto)
}
.comment-form button{
    grid-column:1/-1;
    background:var(--accent);
    color:#fff;
    border:none;
    padding:12px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer
}
.comment-form button:hover{
    background:var(--color-hover)
}
.legal-links{
    justify-self:end;
    align-self:start;
    text-align:right;
    display:flex;
    flex-direction:column;
    gap:6px
}
.legal-links a{
    display:block;
    margin:0;
    color:#fff
}
.legal-links a:hover{color:var(--color-hover)}
.copyright{
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    color:var(--color-hover);
    padding:12px
}
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px
}
.lightbox-content{
    position:relative;
    max-width:min(90vw,980px)
}
.lightbox-img{
    max-height:80vh
}
.cerrar,
.siguiente,
.anterior{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    font-size:28px;
    padding:8px 12px;
    background:rgba(0,0,0,.5);
    border-radius:8px;
    cursor:pointer
}
.cerrar{
    top:12px;
    right:12px;
    transform:none
}
.siguiente{
    right:-54px
}
.anterior{
    left:-54px
}
.volver{
    display:block;
    width:max-content;
    margin:16px auto;
    padding:14px 16px;
    background:var(--accent);
    border-radius:12px;
    color:var(--text);
    text-align:center;
    box-shadow:var(--shadow)
}
.volver:hover{
    background:var(--color-hover)
}
@media (max-width:1180px){
    .container{grid-template-columns:220px 1fr 220px
    }
    .feature-media img{
        height:160px
    }
}
@media (max-width:960px){
    .container{
        grid-template-columns:1fr;
        grid-template-areas:
            "main"
            "sidebar-left"
            "sidebar-right";
    }
    .sidebar-left,
    .sidebar-right{
        position:static
    }
    .feature-content{
        grid-template-columns:1fr
    }
    .feature-media{
        grid-template-columns:1fr 1fr
    }
    .contenedor-noticias{
        grid-template-columns:1fr 1fr
    }
    .tarjeta-noticia{
        grid-template-columns:1fr
    }
    .footer-content{
        grid-template-columns:1fr
    }
}
@media (max-width:640px){
    header{flex-direction:column;align-items:flex-end}
    header .logo img{width:44px;height:44px}
    .main-menu{align-self:flex-end}
    .main-menu ul{padding:0 12px 12px;flex-direction:column;align-items:flex-end;gap:8px}
    .container{padding:14px}
    .feature-media{grid-template-columns:1fr}
    .feature-media img{height:200px}
    .quick-links-grid{grid-template-columns:1fr}
    .contenedor-noticias{grid-template-columns:1fr}
    .tarjeta-noticia img{height:200px}
    .social-links a{width:36px;height:36px}
    .siguiente{right:8px}
    .anterior{left:8px}
}