/* ============================================================
   Prodicoop — Identidad visual (Fase 3)

   Diseño formal y sobrio sobre la estructura/contenido previos.
   Base neutra (blanco + casi-negro). Paleta corporativa vívida
   usada como acento jerarquizado (verde > coral > magenta).
   ============================================================ */

/* ─── Design tokens ─── */
:root {
    /* Paleta corporativa (rellenos y decoración) */
    --color-negro: #000000;
    --color-blanco: #ffffff;
    --color-verde: #92b732;
    --color-coral: #ed694b;
    --color-magenta: #b600ab;
    --color-naranja: #ef7d00;
    --color-morado: #7b2cbf;
    --color-rojo: #d72638;

    /* Variantes oscurecidas (texto y enlaces, cumplen WCAG AA sobre blanco) */
    --color-verde-texto: #4d6b1a;
    --color-coral-texto: #b34022;
    --color-magenta-texto: #870080;

    /* Neutros */
    --color-texto: #1a1a1a;
    --color-texto-suave: #555555;
    --color-borde: #e5e5e5;
    --color-fondo: #ffffff;
    --color-fondo-suave: #fafafa;
    --color-fondo-hero:  #f7f5f0;   /* crema cálido (footer) */
    --color-fondo-oscuro: #000000;  /* negro puro: idéntico al fondo del logotipo del hero, así se funden sin rectángulo visible */

    /* Tipografía */
    --fuente-titular: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --fuente-texto:   'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Espaciado */
    --espacio-xs: 0.5rem;
    --espacio-s:  1rem;
    --espacio-m:  2rem;
    --espacio-l:  4rem;
    --espacio-xl: 6rem;

    /* Layout */
    --ancho-max:  1100px;
    --ancho-texto: 720px;
    --radio: 6px;
    --nav-altura: 72px;

    /* Sombras */
    --sombra-nav:     0 2px 12px rgba(0, 0, 0, 0.08);
    --sombra-tarjeta: 0 4px 16px rgba(0, 0, 0, 0.06);

    /* Transiciones */
    --transicion-rapida: 0.2s ease;
    --transicion-media:  0.4s ease;
}

/* ─── Reset y base ─── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fuente-texto);
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-texto);
    background: var(--color-fondo);
    padding-top: var(--nav-altura);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    font-family: var(--fuente-titular);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-texto);
}

p {
    margin-bottom: var(--espacio-s);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-verde-texto);
    text-decoration: none;
    transition: color var(--transicion-rapida);
}

a:hover {
    color: var(--color-coral-texto);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utilidad: oculta visualmente pero accesible para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Layout ─── */
.contenedor {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.seccion {
    padding: var(--espacio-l) 0;
}

/* Patrón disperso de círculos: SVG con anillos colocados a mano dentro
   de un tile grande (320×320) para que la repetición no se note como
   una rejilla. Mismo fondo en Quiénes somos y Entidades. */
#quienes-somos,
#entidades {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='none' stroke='%2392b732' stroke-width='1.2'><circle cx='42' cy='55' r='7' stroke-opacity='0.30'/><circle cx='128' cy='28' r='4' stroke-opacity='0.34'/><circle cx='210' cy='65' r='9' stroke-opacity='0.22'/><circle cx='285' cy='38' r='3' stroke-opacity='0.36'/><circle cx='65' cy='140' r='5' stroke-opacity='0.28'/><circle cx='175' cy='160' r='11' stroke-opacity='0.18'/><circle cx='240' cy='200' r='4' stroke-opacity='0.32'/><circle cx='25' cy='230' r='6' stroke-opacity='0.26'/><circle cx='110' cy='275' r='5' stroke-opacity='0.30'/><circle cx='195' cy='290' r='8' stroke-opacity='0.22'/><circle cx='285' cy='245' r='3' stroke-opacity='0.34'/></g></svg>");
    background-size: 320px 320px;
}

.seccion-alt {
    background-color: var(--color-fondo-suave);
}

/* Línea fina que separa "Qué es" de "Nuestros valores" */
#valores {
    border-top: 1px solid rgba(146, 183, 50, 0.35); /* verde (--color-verde) tenue */
}

.seccion h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    margin-bottom: var(--espacio-m);
    text-align: center;
    letter-spacing: 0.01em;
}

.seccion h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    background: var(--color-verde);
    margin: var(--espacio-s) auto 0;
    border-radius: 2px;
}

/* Un color de subrayado por sección: verde → coral → magenta → verde.
   Quiénes somos y Contacto usan el verde por defecto. */
#valores h2::after   { background: var(--color-coral);   }
#entidades h2::after { background: var(--color-magenta); }

.seccion-intro {
    text-align: center;
    margin: 0 auto var(--espacio-m);
    max-width: var(--ancho-texto);
    color: var(--color-texto-suave);
    font-size: 1.05rem;
}

/* ─── Botones ─── */
.boton {
    display: inline-block;
    padding: 0.85rem 2rem;
    font-family: var(--fuente-titular);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-blanco);
    background: var(--color-coral);
    border: 0;
    border-radius: var(--radio);
    cursor: pointer;
    transition: background var(--transicion-rapida), transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
    box-shadow: 0 2px 8px rgba(237, 105, 75, 0.25);
}

.boton:hover {
    background: var(--color-coral-texto);
    color: var(--color-blanco);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(237, 105, 75, 0.35);
}

.boton:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(237, 105, 75, 0.25);
}

.boton:focus-visible {
    outline: 3px solid var(--color-verde);
    outline-offset: 3px;
}

/* ─── Navegación ─── */
.nav-fija {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-altura);
    background: var(--color-blanco);
    z-index: 1000;
    /* Borde siempre presente pero transparente: se colorea al bajar, sin saltos */
    border-bottom: 2px solid transparent;
    transition: box-shadow var(--transicion-rapida), border-bottom-color var(--transicion-rapida);
}

.nav-fija.con-sombra {
    box-shadow: var(--sombra-nav);
    /* Línea coral sutil al bajar: separa el blanco del nav del blanco del contenido */
    border-bottom-color: rgba(237, 105, 75, 0.6); /* coral (--color-coral) tenue */
}

.nav-contenedor {
    max-width: none;
    margin: 0;
    padding: 0 clamp(1.5rem, 5vw, 5rem);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.nav-logo img {
    height: 56px;
    width: auto;
    display: block;
}

.nav-logo:hover {
    text-decoration: none;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-menu a {
    position: relative;
    color: var(--color-texto);
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.4rem 0;
}

.nav-menu a:hover {
    text-decoration: none;
}

.nav-menu a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-verde);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicion-rapida);
}

.nav-menu a:hover::after,
.nav-menu a.activo::after {
    transform: scaleX(1);
}

/* Cada enlace del menú con el color de su sección (texto + subrayado a juego).
   El ::after por defecto es verde → sirve para "Qué es" y "Contacto". */
.nav-menu a[href="#quienes-somos"] { color: var(--color-verde-texto);   }
.nav-menu a[href="#valores"]       { color: var(--color-coral-texto);   }
.nav-menu a[href="#entidades"]     { color: var(--color-magenta-texto); }
.nav-menu a[href="#contacto"]      { color: var(--color-verde-texto);   }

.nav-menu a[href="#valores"]::after   { background: var(--color-coral);   }
.nav-menu a[href="#entidades"]::after { background: var(--color-magenta); }

.nav-hamburguesa {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.nav-hamburguesa span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--color-texto);
}

/* ─── Hero ─── */
.hero {
    /* Ocupa exactamente la primera vista (viewport menos la nav fija),
       sin sobrepasarla. */
    min-height: calc(100vh - var(--nav-altura));
    display: flex;
    align-items: center;
    justify-content: center;
    /* Foco cenital: haz de luz cálido que cae desde arriba sobre el logo.
       El logotipo tiene fondo transparente, así que la luz puede llegar
       hasta él sin que aparezca ningún rectángulo. */
    background:
        radial-gradient(ellipse 95% 75% at 50% -5%,
            rgba(255, 250, 240, 0.22) 0%,
            rgba(255, 250, 240, 0.09) 38%,
            transparent 72%),
        var(--color-fondo-oscuro);
    color: var(--color-blanco);
    padding: var(--espacio-m) 0 var(--espacio-l) 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    /* Acento sutil de marca: línea verde fina arriba del hero */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-verde);
}

.hero-contenido {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-logotipo {
    width: clamp(400px, 92%, 820px);
    max-height: 45vh; /* en pantallas bajas encoge para que el hero quepa en una vista */
    height: auto;
    object-fit: contain;
    margin: 0 auto var(--espacio-s);
}

.hero-lema {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--espacio-xs);
    font-weight: 400;
}

.hero-subtexto {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    margin-bottom: var(--espacio-m);
}

/* Eyebrow encima del logo del hero */
.hero-eyebrow {
    display: inline-block;
    color: var(--color-verde);
    font-family: var(--fuente-titular);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: var(--espacio-s);
}

/* Botón circular animado al final del hero que invita a bajar */
.hero-scroll {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    color: var(--color-verde);
    font-size: 1.4rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(146, 183, 50, 0.5);
    border-radius: 50%;
    background: transparent;
    text-decoration: none;
    transform: translateX(-50%);
    animation: scrollPulse 2s ease-in-out infinite;
    transition: background var(--transicion-rapida), border-color var(--transicion-rapida);
}

.hero-scroll:hover {
    color: var(--color-verde);
    background: rgba(146, 183, 50, 0.15);
    border-color: var(--color-verde);
    text-decoration: none;
}

@keyframes scrollPulse {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll {
        animation: none;
    }
}

/* ─── Qué es (layout editorial: título + texto a la izquierda, isologo a la derecha) ─── */
#quienes-somos .contenedor {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    column-gap: 4rem;
    align-items: center;
    max-width: var(--ancho-max);
}

.quienes-logo {
    display: flex;
    justify-content: center;
}

.quienes-logo img {
    width: 100%;
    max-width: 260px;
    height: auto;
}

#quienes-somos h2 {
    text-align: left;
    margin-bottom: var(--espacio-s);
}

#quienes-somos h2::after {
    margin-left: 0;
    margin-right: auto;
}

.quienes-texto p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-texto);
}

.quienes-texto p + p {
    margin-top: 1.1rem;
}

.quienes-texto strong {
    font-weight: 700;
    color: var(--color-texto);
}

/* Cita destacada (pull-quote) en Quiénes somos */
.cita-destacada {
    margin: 1.25rem 0;
    padding: 0.1rem 0 0.1rem 1.1rem;
    border-left: 3px solid var(--color-coral);
    font-family: var(--fuente-titular);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--color-texto);
    font-style: italic;
}

/* ─── Sección de contacto (cream + email en coral destacado) ─── */
.cta-contenido {
    text-align: center;
}

.cta-intro {
    color: var(--color-texto-suave);
    font-size: 1.05rem;
    margin-bottom: var(--espacio-m);
}

.cta-email {
    margin-bottom: 0;
}

.cta-email a {
    display: inline-block;
    color: var(--color-coral-texto);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 700;
    border: 2px solid currentColor; /* borde del mismo color que las letras */
    border-radius: var(--radio);
    padding: 0.55rem 1.3rem;
    transition: background-color var(--transicion-rapida), color var(--transicion-rapida), border-color var(--transicion-rapida);
}

.cta-email a:hover {
    text-decoration: none;
}

/* Contacto en negro, como el hero (cierra la página enmarcándola).
   Mismo fondo (foco cenital + negro) y textos claros. */
#contacto {
    background:
        radial-gradient(ellipse 95% 75% at 50% -5%,
            rgba(255, 250, 240, 0.22) 0%,
            rgba(255, 250, 240, 0.09) 38%,
            transparent 72%),
        var(--color-fondo-oscuro);
    color: var(--color-blanco);
}

#contacto h2 {
    color: var(--color-blanco);
}

#contacto .cta-intro {
    color: rgba(255, 255, 255, 0.7);
}

#contacto .cta-email a {
    color: var(--color-coral);
}

#contacto .cta-email a:hover {
    background: var(--color-coral);
    border-color: var(--color-coral);
    color: var(--color-blanco);
}

/* ─── Valores (lista numerada, sin tarjetas) ─── */
.lista-valores {
    list-style: none;
    counter-reset: valor;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
    row-gap: 2.5rem;
    max-width: var(--ancho-max);
    margin: 0 auto;
}

.lista-valores .valor {
    --acento: var(--color-verde);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2.25rem;
    align-items: start;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--color-borde);
}

/* El anillo del isologo (la "C": solo el arco, sin el tramo negro) se pinta con
   el color de acento usando el PNG como MÁSCARA —su canal alfa da la forma—, así
   admite cualquier color. Va en el ::before, detrás del glifo, que se centra en
   el hueco transparente del anillo y comparte el mismo color de acento. */
.valor-icono {
    position: relative;
    width: 92px;
    height: 92px;
    color: var(--acento);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;     /* glifo algo menor que el hueco, para que respire y no toque el aro */
    flex-shrink: 0;
}

.valor-icono::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--acento);
    -webkit-mask: url("../img/logos/anillo-verde-solo.e7ba139145c4.png") center / contain no-repeat;
            mask: url("../img/logos/anillo-verde-solo.e7ba139145c4.png") center / contain no-repeat;
}

/* El glifo, por encima del anillo */
.valor-icono > .bi {
    position: relative;
    z-index: 1;
}

/* Color de la "C" + glifo por valor:
   Personas → naranja · Diversidad → morado · Sostenibilidad → verde · Cooperación → rojo */
.lista-valores .valor:nth-child(1) { --acento: var(--color-naranja); }
.lista-valores .valor:nth-child(2) { --acento: var(--color-morado);  }
.lista-valores .valor:nth-child(3) { --acento: var(--color-verde);   }
.lista-valores .valor:nth-child(4) { --acento: var(--color-rojo);    }

.valor-cuerpo {
    padding-top: 0.35rem;
}

.valor-titulo {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    color: var(--color-texto);
}

.valor-descripcion {
    color: var(--color-texto-suave);
    font-size: 0.97rem;
    margin-bottom: 0;
    line-height: 1.65;
}

/* ─── Entidades (constelación cooperativa) ─── */
.constelacion {
    position: relative;
    width: min(620px, 92vw);
    aspect-ratio: 1;
    margin: var(--espacio-m) auto var(--espacio-s);
}

.constelacion-lineas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Líneas centro → entidad (se "dibujan" al entrar en pantalla) */
.constelacion-lineas .linea {
    stroke-width: 0.4;
    stroke-opacity: 0.55;
    stroke-dasharray: 39;
    stroke-dashoffset: 39;
}

.constelacion.animar .linea {
    animation: constelacion-draw 0.7s ease forwards;
}

@keyframes constelacion-draw {
    to { stroke-dashoffset: 0; }
}

.constelacion.listo .linea {
    animation: none;
    stroke-dashoffset: 0;
    transition: opacity var(--transicion-media);
}

.constelacion.colapsando .linea {
    opacity: 0;
}

/* Núcleo: isologo de Prodicoop (= ODS 17, alianza) */
.constelacion-centro {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 27%;
    height: 27%;
    border-radius: 50%;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    z-index: 3;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    transition: top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.constelacion.animar .constelacion-centro {
    animation: constelacion-centro-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes constelacion-centro-in {
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.constelacion.listo .constelacion-centro {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Al mostrar la ficha, el núcleo sube para dejar sitio al texto */
.constelacion.detalle-activo .constelacion-centro {
    top: 30%;
}

/* Los dos logos se superponen para poder hacer crossfade */
.constelacion-centro-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74%;
    height: 74%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease;
}

.constelacion-centro-entidad {
    opacity: 0;
}

.constelacion-centro.mostrar-entidad .constelacion-centro-prodicoop {
    opacity: 0;
}

.constelacion-centro.mostrar-entidad .constelacion-centro-entidad {
    opacity: 1;
}

/* Anillo que respira suavemente alrededor del núcleo */
.constelacion-centro::before {
    content: "";
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    border: 2px solid rgba(146, 183, 50, 0.45);
}

.constelacion.listo .constelacion-centro::before {
    animation: constelacion-breathe 3.4s ease-in-out infinite;
}

@keyframes constelacion-breathe {
    0%, 100% { transform: scale(1);    opacity: 0.5;  }
    50%      { transform: scale(1.14); opacity: 0.12; }
}

/* Burbujas de cada entidad (orbitan el núcleo) */
.nodo {
    position: absolute;
    z-index: 2;
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
}

.constelacion.animar .nodo {
    animation: constelacion-nodo-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes constelacion-nodo-in {
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.constelacion.listo .nodo {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: left 0.6s cubic-bezier(0.45, 0, 0.2, 1),
                top 0.6s cubic-bezier(0.45, 0, 0.2, 1),
                opacity var(--transicion-media);
}

/* La burbuja pulsada vuela hasta el núcleo y se desvanece al llegar */
.constelacion.listo .nodo.volando {
    z-index: 1;
    opacity: 0;
    transition: left 0.6s cubic-bezier(0.45, 0, 0.2, 1),
                top 0.6s cubic-bezier(0.45, 0, 0.2, 1),
                opacity 0.35s ease 0.28s;
}

.nodo.volando .nodo-etiqueta {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* El resto de burbujas se desvanecen */
.constelacion.colapsando .nodo:not(.volando) {
    opacity: 0;
    pointer-events: none;
}

.nodo-circulo {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--color-blanco);
    border: 4px solid var(--ods, var(--color-verde));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}

.nodo:hover .nodo-circulo,
.nodo:focus-visible .nodo-circulo {
    transform: scale(1.1);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--ods, var(--color-verde)) 22%, transparent),
                0 8px 22px rgba(0, 0, 0, 0.22);
}

.nodo:focus {
    outline: none;
}

.nodo-circulo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nodo-etiqueta {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ods, var(--color-verde));
    text-align: center;
    line-height: 1.2;
}

.nodo-etiqueta small {
    display: block;
    color: var(--color-texto-suave);
    font-weight: 600;
}

/* Ficha de la entidad (aparece tras la animación) */
.constelacion-ficha {
    position: absolute;
    left: 50%;
    top: 51%;
    width: min(86%, 360px);
    transform: translateX(-50%) translateY(14px);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.constelacion.detalle-activo .constelacion-ficha {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.ficha-chip {
    display: inline-block;
    background: var(--ods, var(--color-verde));
    color: var(--color-blanco);
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.32rem 0.75rem;
    border-radius: 20px;
    margin-bottom: 0.6rem;
}

.ficha-nombre {
    font-size: 1.3rem;
    margin-bottom: 0.15rem;
}

.ficha-sector {
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ods, var(--color-verde));
    margin-bottom: 0.8rem;
}

.ficha-detalle {
    color: var(--color-texto-suave);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 1.1rem;
}

.ficha-enlace {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--ods, var(--color-verde));
    color: var(--color-blanco);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.68rem 1.4rem;
    border-radius: var(--radio);
    text-decoration: none;
    transition: transform var(--transicion-rapida), filter var(--transicion-rapida);
}

.ficha-enlace:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: var(--color-blanco);
    text-decoration: none;
}

.ficha-enlace i {
    font-size: 0.95rem;
}

.ficha-volver {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    color: var(--color-texto-suave);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    margin-top: 0.8rem;
}

.ficha-volver:hover {
    color: var(--color-texto);
}

/* ─── Contacto ─── */
.contacto-contenido {
    text-align: center;
    max-width: var(--ancho-texto);
    margin: 0 auto;
}

.contacto-email {
    margin: var(--espacio-s) 0 var(--espacio-m);
    font-size: 1.2rem;
}

.contacto-email a {
    color: var(--color-texto);
    font-weight: 600;
    border-bottom: 2px solid var(--color-verde);
    padding-bottom: 2px;
}

.contacto-email a:hover {
    color: var(--color-coral-texto);
    border-bottom-color: var(--color-coral);
    text-decoration: none;
}

.contacto-feedback {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-verde-texto);
    font-weight: 600;
    min-height: 1.2em;
    opacity: 0;
    transition: opacity var(--transicion-rapida);
}

.contacto-feedback.visible {
    opacity: 1;
}

/* ─── Footer (manual: logotipo a la izquierda, info a la derecha) ─── */
.footer {
    background: var(--color-fondo-hero);
    border-top: 4px solid var(--color-verde);
    padding: var(--espacio-m) var(--espacio-s) var(--espacio-l);
}

.footer-contenido {
    max-width: var(--ancho-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo {
    flex-shrink: 0;
    display: inline-block;
}

.footer-logo img {
    display: block;
    height: 96px;
    width: auto;
}

/* Barra inferior: copyright a la izquierda, email a la derecha,
   separada del bloque superior por una línea sutil. */
.footer-base {
    max-width: var(--ancho-max);
    margin: var(--espacio-m) auto 0;
    padding-top: var(--espacio-s);
    border-top: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-xs) var(--espacio-m);
    flex-wrap: wrap;
}

.footer-email {
    margin: 0;
}

.footer-email a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-verde-texto);
    font-weight: 700;
    text-decoration: none;
}

.footer-email a:hover,
.footer-email a:focus {
    text-decoration: underline;
}

.footer-copy {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}

@media (max-width: 640px) {
    .footer-contenido {
        flex-direction: column;
        align-items: center;
        gap: var(--espacio-s);
    }

    .footer-base {
        flex-direction: column;
        text-align: center;
    }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    /* Constelación visible al instante, sin animación de entrada */
    .constelacion .nodo {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    .constelacion-centro {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .constelacion .linea {
        stroke-dashoffset: 0;
    }
}

/* ─── Responsive: tablet ─── */
@media (max-width: 900px) {
    .lista-valores {
        column-gap: 2rem;
    }
}

/* ─── Responsive: móvil ─── */
@media (max-width: 640px) {
    :root {
        --espacio-l: 3rem;
    }

    .nav-hamburguesa {
        display: flex;
        /* Empuja el botón al extremo derecho: el <nav> queda con ancho 0 al
           volverse absoluto el menú, así que sin esto space-between dejaría
           la hamburguesa centrada en lugar de pegada a la esquina. */
        margin-left: auto;
    }

    .nav-menu {
        position: absolute;
        top: var(--nav-altura);
        left: 0;
        right: 0;
        background: var(--color-blanco);
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid var(--color-borde);
        box-shadow: var(--sombra-nav);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transicion-media);
    }

    .nav-menu.abierto {
        max-height: 400px;
    }

    .nav-menu li {
        border-top: 1px solid var(--color-borde);
    }

    .nav-menu a {
        display: block;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .nav-menu a::after {
        display: none;
    }

    .lista-valores {
        grid-template-columns: 1fr;
        row-gap: 1.75rem;
    }

    .hero-logotipo {
        width: 80%;
    }

    #quienes-somos .contenedor {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
    }

    .quienes-logo img {
        max-width: 180px;
    }

    #quienes-somos h2 {
        text-align: center;
    }

    #quienes-somos h2::after {
        margin-left: auto;
        margin-right: auto;
    }

    /* Entidades: la constelación se compacta para no apretar las burbujas */
    .nodo {
        width: 72px;
    }
    .nodo-circulo {
        width: 66px;
        height: 66px;
        padding: 10px;
        border-width: 3px;
    }
    .nodo-etiqueta {
        font-size: 0.58rem;
    }
    .ficha-nombre {
        font-size: 1.15rem;
    }
    .ficha-detalle {
        font-size: 0.85rem;
    }

}