:root {
    /* ── Identidad del observatorio ── */
    --naranja:      #fdc57e;   /* ámbar cálido   — acento principal  */
    --verde:        #a7d4e4;   /* azul claro      — color de marca    */
    --morado:       #71502f;   /* tierra cálida   — acento secundario */

    /* ── Derivados ── */
    --verde-oscuro: #2e1f0f;   /* café muy oscuro                    */
    --verde-claro:  #c5e3ee;   /* azul claro suave                   */

    /* ── Alias para compatibilidad con CSS existente ── */
    --ocre:         #fdc57e;   /* = --naranja  */
    --verde-medio:  #a7d4e4;   /* = --verde    */
    --tierra:       #71502f;   /* = --morado   (texto secundario)    */

    /* ── Neutros ── */
    --crema:        #f8f4ec;
    --crema-oscura: #ede6d8;
    --oscuro:       #1c1b28;
    --blanco:       #fdfaf5;
    --borde:        #b8cfd8;   /* borde con tinte azul suave         */
}

html {
    background-color: var(--crema);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background-color: var(--crema);
    color: var(--oscuro);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

main {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}

a {
    cursor: pointer;
}

/* ============================================================
   NAV
   ============================================================ */

#nav {
    position: sticky;
    top: 0;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 60px;
    z-index: 1000;
    background-color: var(--crema);
    border-bottom: 1px solid var(--borde);
    box-sizing: border-box;
}

#logo-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;
}

#logo-nav:hover {
    background-color: var(--crema-oscura);
}

.logo-marca {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--10pt);
    color: var(--naranja);
    flex-shrink: 0;
}

.logo-texto {
    font-size: 0.68rem;
    color: var(--verde-oscuro);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.35;
}

/* Iconos de navegación — pegados a la derecha */
#nav-iconos {
    display: flex;
    align-items: stretch;
    margin-left: auto;
}

.nav-icono {
    display: flex;
    align-items: stretch;
    width: 60px;
    flex-shrink: 0;
    border-left: 1px solid var(--borde);
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.nav-icono-img {
    width: 100%;
    background-color: var(--crema);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s;
}

.nav-icono:hover .nav-icono-img {
    background-color: var(--crema-oscura);
}

.nav-icono-img span {
    font-size: 9px;
    color: var(--borde);
    z-index: 1;
    position: relative;
    letter-spacing: 0.05em;
}

/* .nav-link se mantiene para sub-páginas */
.nav-link {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    text-decoration: none;
    color: var(--oscuro);
    border-left: 1px solid var(--borde);
    font-size: var(--12pt);
    transition: background-color 0.2s, color 0.2s;
    box-sizing: border-box;
}

.nav-link:hover {
    background-color: var(--verde-oscuro);
    color: var(--crema);
}


/* ============================================================
   BANNER
   ============================================================ */

#banner {
    width: 100%;
}

#banner-imagen {
    width: 100%;
    aspect-ratio: 21 / 7;
    background-color: var(--crema-oscura);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#banner-imagen::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(167, 212, 228, 0.4);
    mix-blend-mode: multiply;
}

#banner-imagen span {
    font-size: var(--10pt);
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

#banner-intro {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    border-bottom: 1px solid var(--borde);
    background-color: var(--crema);
}

#banner-texto {
    grid-column: 4 / 11;
    font-family: 'Floreal', Georgia, serif;
    font-style: italic;
    font-size: var(--18pt);
    line-height: 1.65;
    color: var(--tierra);
    padding: 4% 0;
    text-align: center;
}


/* ============================================================
   SECCIÓN BASE — compartida
   ============================================================ */

section {
    width: 100%;
}

.seccion-cabecera {
    display: grid;
    gap: 6px;
    padding: 6% 0 3.5% 0;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 4%;
}

.seccion-titulo {
    font-family: var(--fuente-titulos-1);
    font-size: var(--40pt);
    line-height: 1;
    align-self: end;
}

.seccion-desc {
    font-size: var(--14pt);
    align-self: start;
}


/* ============================================================
   QUÉ SOMOS + QUIÉNES SOMOS (ambas secciones oscuras)
   ============================================================ */

#que-somos,
#quienes-somos {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    background-color: var(--verde-oscuro);
    padding-bottom: 8%;
}

#que-somos {
    padding-top: 7%;
    padding-bottom: 7%;
}

/* ── Pilares de navegación (en #que-somos, enlazan a destacados) ── */
#qs-pilares-nav {
    grid-column: 2 / 13;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 0;
}

/* Activos al hacer scroll a un destacado */
body[data-hash="destacado-reposteo"] a[href="#destacado-reposteo"],
body[data-hash="destacado-publicacion"] a[href="#destacado-publicacion"],
body[data-hash="destacado-aporte"] a[href="#destacado-aporte"] {
    background-color: rgba(253, 197, 126, 0.12);
}

body[data-hash="destacado-reposteo"] a[href="#destacado-reposteo"] .pilar-linea,
body[data-hash="destacado-publicacion"] a[href="#destacado-publicacion"] .pilar-linea,
body[data-hash="destacado-aporte"] a[href="#destacado-aporte"] .pilar-linea {
    width: 100%;
}

/* ── Cabecera de "Quiénes Somos" (sección inferior, sin nube) ── */
#qs-somos-intro {
    grid-column: 1 / 14;
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    border-bottom: 1px solid rgba(248, 244, 236, 0.15);
}

#qs-somos-header {
    grid-column: 2 / 9;
    padding: 14% 0 14% 0;
    display: grid;
    align-content: end;
    gap: 6px;
}

#qs-somos-header .seccion-cabecera {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0;
}

#qs-somos-header .seccion-titulo {
    color: var(--crema);
}

#qs-somos-header .seccion-desc {
    color: var(--verde-claro);
}

#qs-intro {
    grid-column: 1 / 14;
    display: grid;
    grid-template-columns: repeat(13, 1fr);
}

#qs-header {
    grid-column: 2 / 6;
    padding: 4% 0 4% 0;
    display: grid;
    align-content: end;
    gap: 6px;
}

#qs-header .seccion-cabecera {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0;
}

#qs-header .seccion-titulo {
    color: var(--crema);
}

#qs-header .seccion-desc {
    color: var(--verde-claro);
}

/* Nube de temas */
#qs-nube {
    grid-column: 6 / 13;
    position: relative;
    min-height: 260px;
    padding: 4% 0 4% 0;
    overflow: hidden;
}

.tema {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-size: var(--10pt);
    color: var(--verde-claro);
    border: 1px solid rgba(167, 212, 228, 0.35);
    padding: 4px 10px;
    white-space: nowrap;
    animation: flotar 4s ease-in-out infinite;
    animation-delay: var(--delay);
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
    cursor: default;
}

.tema:hover {
    color: var(--crema);
    border-color: var(--verde-claro);
    background-color: rgba(167, 212, 228, 0.1);
}

@keyframes flotar {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-7px); }
}

/* Pilares */
#qs-pilares {
    grid-column: 2 / 13;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 0;
}

.pilar {
    display: grid;
    grid-template-rows: auto 1fr 3px;
    gap: 0;
    padding: 6% 5% 5% 5%;
    border: 1px solid rgba(248, 244, 236, 0.15);
    border-right: none;
    border-top: none;
    text-decoration: none;
    color: var(--crema);
    transition: background-color 0.3s;
    overflow: hidden;
}

.pilar:last-child {
    border-right: 1px solid rgba(248, 244, 236, 0.15);
}

.pilar:hover {
    background-color: rgba(248, 244, 236, 0.04);
}

.pilar-titulo {
    font-family: var(--fuente-titulos-1);
    font-size: var(--32pt);
    line-height: 1.1;
    margin-bottom: 14px;
}

.pilar-preview {
    font-size: var(--12pt);
    color: var(--verde-claro);
    line-height: 1.6;
    align-self: start;
    padding-bottom: 24px;
}

.pilar-linea {
    width: 0%;
    height: 3px;
    background-color: var(--ocre);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    align-self: end;
}

.pilar:hover .pilar-linea {
    width: 100%;
}

body[data-hash="mision"] a[href="#mision"],
body[data-hash="equipo"] a[href="#equipo"],
body[data-hash="enfoque"] a[href="#enfoque"] {
    background-color: rgba(253, 197, 126, 0.12);
}

body[data-hash="mision"] a[href="#mision"] .pilar-linea,
body[data-hash="equipo"] a[href="#equipo"] .pilar-linea,
body[data-hash="enfoque"] a[href="#enfoque"] .pilar-linea {
    width: 100%;
}

/* Paneles de quienes somos */
.qs-panel {
    display: none;
    grid-column: 1 / 14;
}

body[data-hash="mision"]  #mision-contenido,
body[data-hash="equipo"]  #equipo-contenido,
body[data-hash="enfoque"] #enfoque-contenido {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    animation: revelar-panel 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revelar-panel {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0% 0 0);
    }
}

.qs-panel-inner {
    grid-column: 2 / 13;
    padding: 5% 0 6% 0;
    display: grid;
    gap: 20px;
    border-top: 1px solid rgba(248, 244, 236, 0.15);
}

.panel-cerrar {
    font-size: var(--12pt);
    color: var(--verde-claro);
    text-decoration: none;
    justify-self: start;
    padding: 6px 0;
    border-bottom: 1px solid var(--verde-medio);
    transition: color 0.2s, border-color 0.2s;
}

.panel-cerrar:hover {
    color: var(--crema);
    border-color: var(--crema);
}

.qs-texto-grande {
    font-family: var(--fuente-titulos-2);
    font-size: var(--24pt);
    line-height: 1.45;
    color: var(--crema);
    max-width: 820px;
}

.qs-texto {
    font-size: var(--14pt);
    line-height: 1.85;
    color: var(--verde-claro);
    max-width: 680px;
}

/* Equipo */
#equipo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 10px;
}

.miembro {
    display: grid;
    gap: 10px;
}

.miembro-foto {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(248, 244, 236, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--10pt);
    color: var(--verde-medio);
    background-color: rgba(167, 212, 228, 0.08);
    transition: background-color 0.3s;
    box-sizing: border-box;
}

.miembro:hover .miembro-foto {
    background-color: rgba(167, 212, 228, 0.2);
}

.miembro-nombre {
    font-size: var(--14pt);
    color: var(--crema);
    line-height: 1.3;
}

.miembro-rol {
    font-size: var(--10pt);
    color: var(--verde-claro);
    border: 1px solid rgba(167, 212, 228, 0.35);
    padding: 3px 8px;
    justify-self: start;
}

/* Enfoque */
#enfoque-lista {
    display: grid;
    gap: 0;
    margin-top: 10px;
}

.enfoque-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 16px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid rgba(248, 244, 236, 0.1);
}

.enfoque-flecha {
    color: var(--ocre);
    font-size: var(--14pt);
    margin-top: 2px;
}

.enfoque-item p {
    color: var(--crema);
    line-height: 1.6;
    font-size: var(--14pt);
}


/* ============================================================
   BANNER — imagen de portada
   ============================================================ */

#banner-portada {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* ============================================================
   NAV — iconos SVG y logo
   ============================================================ */

.logo-marca img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-icono-img img.nav-icono-svg {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    /* #2e1f0f exacto: saturate(11.5) convierte B a 83, hue-rotate(331deg) da H=31°,
       brightness(0.18) escala a rgb(46,31,15) = #2e1f0f */
    filter: brightness(0) invert(1) sepia(1) saturate(11.5) hue-rotate(331deg) brightness(0.18);
    transition: filter 0.2s;
}

.nav-icono:hover .nav-icono-img img.nav-icono-svg {
    /* #71502f exacto: misma lógica, brightness(0.44) escala a rgb(113,80,47) */
    filter: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(330deg) brightness(0.44);
}


/* ============================================================
   DATOS
   ============================================================ */

#datos {
    width: 100%;
}

/* — Bloque claro — */

#datos-bloque-claro {
    background-color: var(--crema-oscura);
    padding: 0 7% 8%;
    box-sizing: border-box;
}

#datos-bloque-claro .seccion-cabecera {
    padding-left: 0;
    padding-right: 0;
}

/* Contadores */

#datos-contadores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--borde);
    border-right: none;
    margin-bottom: 6%;
}

.contador {
    padding: 7% 5%;
    border-right: 1px solid var(--borde);
    text-align: center;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.contador-num {
    display: block;
    font-family: var(--fuente-titulos-1);
    font-size: var(--56pt);
    line-height: 1;
    color: var(--verde-oscuro);
}

.contador-label {
    font-size: var(--12pt);
    color: var(--tierra);
    line-height: 1.5;
    text-align: center;
}

/* Gráficas */

#datos-graficas {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 6%;
    align-items: start;
}

.datos-grafica-titulo {
    font-size: var(--10pt);
    color: var(--tierra);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--borde);
}

/* Gráfica de línea */

.linea-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.grid-line {
    stroke: var(--borde);
    stroke-width: 1;
}

.eje-line {
    stroke: var(--borde);
    stroke-width: 1.5;
}

.eje-label {
    font-size: 10px;
    fill: var(--tierra);
    font-family: var(--fuente-principal);
}

.linea-area {
    fill: rgba(167, 212, 228, 0.18);
    stroke: none;
}

.linea-datos {
    fill: none;
    stroke: var(--verde);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
}

#datos-linea.animado .linea-datos {
    stroke-dashoffset: 0;
}

.dato-punto {
    fill: var(--naranja);
    stroke: var(--crema-oscura);
    stroke-width: 2;
    opacity: 0;
    transition: opacity 0.4s ease 1.8s;
}

#datos-linea.animado .dato-punto {
    opacity: 1;
}

/* Gráfica de barras */

.barras-lista {
    display: grid;
    gap: 16px;
}

.barra-item {
    display: grid;
    grid-template-columns: minmax(100px, 1.2fr) 3fr 36px;
    align-items: center;
    gap: 12px;
}

.barra-etiqueta {
    font-size: var(--12pt);
    color: var(--oscuro);
    line-height: 1.3;
}

.barra-track {
    background-color: var(--borde);
    height: 5px;
    overflow: hidden;
}

.barra-fill {
    height: 100%;
    width: 0%;
    background-color: var(--naranja);
    transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#datos-barras.animado .barra-fill {
    width: var(--pct);
}

.barra-valor {
    font-size: var(--10pt);
    color: var(--tierra);
    text-align: right;
    white-space: nowrap;
}

/* — Bloque oscuro: mapa — */

#datos-mapa {
    background-color: var(--verde-oscuro);
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    padding-top: 7%;
    padding-bottom: 8%;
}

#mapa-intro {
    grid-column: 2 / 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding-right: 4%;
    border-right: 1px solid rgba(248, 244, 236, 0.12);
}

.mapa-titulo {
    font-family: var(--fuente-titulos-1);
    font-size: var(--48pt);
    color: var(--crema);
    line-height: 1.0;
}

.mapa-desc {
    font-size: var(--14pt);
    color: var(--verde-claro);
    line-height: 1.65;
    max-width: 280px;
}

.mapa-cta {
    display: inline-block;
    font-size: var(--12pt);
    color: var(--naranja);
    text-decoration: none;
    border-bottom: 1px solid rgba(253, 197, 126, 0.4);
    padding-bottom: 3px;
    align-self: flex-start;
    transition: border-color 0.2s, color 0.2s;
}

.mapa-cta:hover {
    color: var(--crema);
    border-color: var(--crema);
}

#mapa-leyenda {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.leyenda-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--10pt);
    color: var(--verde-claro);
}

.leyenda-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--naranja);
    flex-shrink: 0;
    opacity: 0.7;
}

.leyenda-grande {
    width: 14px;
    height: 14px;
}

#mapa-contenedor {
    grid-column: 6 / 13;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2% 0;
}

#colombia-svg {
    width: 100%;
    max-width: 380px;
    height: auto;
}

#colombia-outline {
    fill: rgba(167, 212, 228, 0.07);
    stroke: rgba(167, 212, 228, 0.35);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.mapa-punto {
    fill: var(--naranja);
    opacity: 0.8;
    transition: opacity 0.2s;
    cursor: default;
}

.mapa-punto-grande {
    opacity: 1;
}

.mapa-punto:hover {
    opacity: 1;
}

.mapa-pulso {
    fill: none;
    stroke: var(--naranja);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center center;
    animation: pulso-mapa 2.8s ease-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes pulso-mapa {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.8);
        opacity: 0;
    }
}


/* ============================================================
   REPOSTEOS
   ============================================================ */

#reposteos {
    background-color: var(--crema);
    padding: 0 7% 8%;
    box-sizing: border-box;
    width: 100%;
}

#reposteos .seccion-desc {
    color: var(--verde-medio);
}

#reposteos .seccion-cabecera {
    text-align: right;
}

#reposteos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.tarjeta-repost {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 12px;
    padding: 6% 5%;
    border: 1px solid var(--borde);
    border-right: none;
    border-top: none;
    text-decoration: none;
    color: var(--oscuro);
    transition: background-color 0.25s;
    box-sizing: border-box;
}

#reposteos-grid .tarjeta-repost:nth-child(-n+3) {
    border-top: 1px solid var(--borde);
}

#reposteos-grid .tarjeta-repost:nth-child(3n) {
    border-right: 1px solid var(--borde);
}

.tarjeta-repost:hover {
    background-color: var(--crema);
}

.repost-num {
    font-size: var(--10pt);
    color: var(--borde);
    font-family: var(--fuente-titulos-2);
}

.repost-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.repost-titulo {
    font-size: var(--16pt);
    line-height: 1.45;
    color: var(--oscuro);
}

.repost-fuente {
    font-size: var(--10pt);
    color: var(--verde-medio);
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}



/* ============================================================
   ELEMENTOS DESTACADOS
   ============================================================ */

#elementos-destacados {
    background-color: var(--crema-oscura);
    padding: 0 7% 8%;
    box-sizing: border-box;
}

#elementos-destacados .seccion-cabecera {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#destacados-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.destacado {
    padding: 6% 5%;
    border: 1px solid var(--borde);
    border-right: none;
    border-top: none;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 16px;
    text-decoration: none;
    color: var(--oscuro);
    transition: background-color 0.25s;
    box-sizing: border-box;
}

#destacados-grid .destacado:nth-child(-n+3) {
    border-top: 1px solid var(--borde);
}

#destacados-grid .destacado:nth-child(3n) {
    border-right: 1px solid var(--borde);
}

.destacado:hover {
    background-color: var(--crema);
}

.destacado .item-imagen {
    margin-bottom: 0;
}

.destacado:hover .item-imagen::after {
    opacity: 0;
}

.destacado:hover .item-imagen img {
    filter: none;
}

.destacado-categoria {
    font-size: var(--10pt);
    color: var(--tierra);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--fuente-titulos-2);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--borde);
}

.destacado-titulo {
    font-family: var(--fuente-titulos-1);
    font-size: var(--18pt);
    line-height: 1.35;
    color: var(--oscuro);
    margin-bottom: 6px;
    transition: color 0.2s;
}

.destacado:hover .destacado-titulo {
    color: var(--verde-oscuro);
}

.destacado-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.destacado-desc {
    font-size: var(--12pt);
    color: var(--tierra);
    line-height: 1.7;
}

.destacado-fuente {
    font-size: var(--10pt);
    color: var(--verde-medio);
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}

.destacado:hover .etiqueta {
    background-color: var(--morado);
    color: var(--blanco);
}


/* ============================================================
   APORTES (POSTS PARCIALES)
   ============================================================ */

#aportes {
    background-color: var(--crema);
}

#aportes .seccion-cabecera {
    padding-left: 7%;
    padding-right: 7%;
    box-sizing: border-box;
    text-align: right;
}

#aportes .seccion-desc {
    color: var(--tierra);
}

#aportes .masonry {
    columns: 2;
    padding-top: 3%;
}


/* ============================================================
   PUBLICACIONES (POSTS FINALES)
   ============================================================ */

#publicaciones {
    background-color: var(--crema-oscura);
    border-top: 1px solid var(--borde);
}

#publicaciones .seccion-cabecera {
    padding-left: 7%;
    padding-right: 7%;
    box-sizing: border-box;
}

#publicaciones .seccion-desc {
    color: var(--tierra);
}

#publicaciones .masonry {
    columns: 2;
    padding-top: 3%;
    background-color: var(--crema-oscura);
}



/* ============================================================
   FOOTER
   ============================================================ */

#pie {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: var(--verde-oscuro);
    padding: 4% 7%;
    box-sizing: border-box;
    gap: 40px;
    border-top: 3px solid var(--ocre);
}

.pie-col {
    display: grid;
    align-content: center;
}

.pie-nombre {
    font-family: var(--fuente-titulos-1);
    font-size: var(--20pt);
    color: var(--crema);
    margin-bottom: 10px;
    line-height: 1.2;
}

.pie-texto {
    font-size: var(--12pt);
    color: var(--verde-claro);
    line-height: 1.9;
}

.pie-logos-col {
    border-left: 1px solid rgba(248, 244, 236, 0.18);
    padding-left: 40px;
    display: flex;
    align-items: center;
}

.pie-logos {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
}

.pie-logo {
    height: 52px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.75;
}


/* ============================================================
   APORTES / PUBLICACIONES — imágenes circulares en portada
   ============================================================ */

#aportes .item-imagen,
#publicaciones .item-imagen {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    width: 52%;
    margin: 0 auto 16px;
}

#aportes .item-desc,
#publicaciones .item-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}