/* ============================================================
   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;

    /* 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);
    --anillo-img: url("../img/logos/anillo-verde-solo.e7ba139145c4.png");
    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 (solo el arco de color, sin el tramo negro) es el FONDO
   del propio icono, así nunca se recorta. El glifo va centrado encima, en el
   color de acento, sobre el hueco transparente del anillo. */
.valor-icono {
    width: 92px;
    height: 92px;
    background: var(--anillo-img) center / contain no-repeat;
    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;
}

/* Color del icono + anillo del logo a juego: verde → coral → magenta → verde */
.lista-valores .valor:nth-child(2) { --acento: var(--color-coral);   --anillo-img: url("../img/logos/anillo-coral-solo.25c89fd966ae.png");   }
.lista-valores .valor:nth-child(3) { --acento: var(--color-magenta); --anillo-img: url("../img/logos/anillo-magenta-solo.20e45dab4d74.png"); }
.lista-valores .valor:nth-child(4) { --acento: var(--color-verde);   --anillo-img: url("../img/logos/anillo-verde-solo.e7ba139145c4.png");   }

.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 (rejilla de tarjetas a dos filas) ─── */
.entidades-grid {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;       /* centra las filas incompletas (p.ej. la última tarjeta sola) */
    gap: 1.75rem;
    max-width: var(--ancho-max);
    margin: var(--espacio-m) auto 0;
}

/* Todas las tarjetas con el mismo ancho; flex-wrap reparte 3 por fila en
   escritorio y baja a 2 / 1 según el espacio, siempre centradas. */
.entidad-item {
    flex: 1 1 300px;
    max-width: 333px;
    /* Aparición suave al hacer scroll (el JS añade .visible) */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.entidad-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Color de acento de cada tarjeta (rota verde → coral → magenta vía data-acento
   en la plantilla). Se usa para la franja superior. */
.entidad-item[data-acento="verde"]   { --acento: var(--color-verde);   }
.entidad-item[data-acento="coral"]   { --acento: var(--color-coral);   }
.entidad-item[data-acento="magenta"] { --acento: var(--color-magenta); }

.entidad-item .entidad {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    min-height: 300px;     /* cubre el contenido más largo -> todas las tarjetas igual de altas */
    height: 100%;
    transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida),
                border-color var(--transicion-rapida);
}

.entidad-item .entidad:hover {
    transform: translateY(-3px);
    /* Solo el borde toma el color del acento; la sombra se queda neutra */
    border-color: var(--acento, var(--color-verde));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* Contenedor común para todos los logos: misma altura visual,
   independientemente de la proporción real del logo. */
.entidad-logo-wrap {
    height: 110px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.entidad-logo {
    max-width: 100%;
    /* Menor que el alto del contenedor (110px) para que los logos altos no
       lleguen al borde inferior y quede siempre holgura hasta el texto,
       igual que en los logos anchos. */
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: transparent;
}

/* El logo de 4d3 se ve grande de más respecto al resto: se reduce un poco. */
#entidad-4d3 .entidad-logo {
    max-height: 72px;
}

/* Tarjeta clicable (abre el modal). */
.entidad-item .entidad {
    cursor: pointer;
}

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

/* Aviso "Más información" al pie de la tarjeta (no interactivo: la tarjeta
   entera es el botón; el enlace a la web vive ahora en el modal). */
.entidad-mas {
    color: var(--color-verde-texto);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.entidad-item .entidad:hover .entidad-mas {
    color: var(--color-coral-texto);
}

/* ─── Modal de entidad ─── */
.entidad-modal {
    position: fixed;
    inset: 0;
    margin: auto;                      /* centrado en el viewport actual, no en el DOM */
    width: calc(100% - 2rem);
    max-width: 520px;
    height: fit-content;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 2.75rem 2rem 2rem;
    border: none;
    border-top: 5px solid var(--color-verde);
    border-radius: var(--radio);
    background: var(--color-blanco);
    color: var(--color-texto);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.entidad-modal[data-acento="coral"]   { border-top-color: var(--color-coral); }
.entidad-modal[data-acento="magenta"] { border-top-color: var(--color-magenta); }

.entidad-modal::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.entidad-modal[open] {
    animation: entidad-modal-in var(--transicion-rapida) ease;
}

@keyframes entidad-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.entidad-modal-cerrar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    padding: 0.45rem;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-texto-suave);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transicion-rapida), background var(--transicion-rapida);
}

.entidad-modal-cerrar:hover {
    color: var(--color-texto);
    background: var(--color-fondo-suave);
}

.entidad-modal-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 120px;
    margin-bottom: 1.25rem;
}

.entidad-modal-img {
    max-height: 90px;
    max-width: 55%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.entidad-modal-titulo {
    margin: 0 0 0.85rem;
    font-size: 1.5rem;
}

.entidad-modal-detalle {
    margin: 0 0 1.5rem;
    color: var(--color-texto-suave);
    line-height: 1.65;
    text-align: left;
}

/* Ajustes finos: logos muy horizontales que dominarían la tarjeta */
#entidad-prodiversa .entidad-logo,
#entidad-acompanya .entidad-logo {
    max-height: 55px;
    max-width: 280px;
}

#entidad-4d3 .entidad-logo {
    max-height: 110px;     /* igual que el resto de logos cuadrados */
}

/* La descripción ocupa el espacio sobrante para que el enlace
   "Visitar web" quede siempre alineado al fondo de la tarjeta. */
.entidad .entidad-descripcion {
    flex: 1 0 auto;
}

.entidad-descripcion {
    color: var(--color-texto-suave);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.entidad-enlace {
    color: var(--color-verde-texto);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.entidad-enlace i {
    font-size: 0.95rem;
    transition: transform var(--transicion-rapida);
}

.entidad-enlace:hover {
    color: var(--color-coral-texto);
    text-decoration: none;
}

.entidad-enlace:hover i {
    transform: translate(2px, -2px);
}

/* ─── 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;
    }

    .entidad-item {
        opacity: 1;
        transform: none;
    }
}

/* ─── 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: 2 por fila en móvil (antes 1), con la tarjeta compactada para
       que no quede ni apretada ni demasiado alta. */
    .entidades-grid {
        gap: 0.75rem;
    }
    .entidad-item {
        flex: 0 1 calc(50% - 0.375rem);   /* dos columnas exactas (mitad menos medio gap) */
        max-width: none;
    }
    .entidad-item .entidad {
        padding: 1.1rem 0.7rem;
        gap: 0.55rem;
        min-height: 0;                    /* la altura la marca el contenido */
    }
    .entidad-logo-wrap {
        height: 64px;
    }
    /* Todos los logos al mismo límite para que quepan en la tarjeta estrecha.
       Se incluyen los selectores con id (prodiversa/acompanya/4d3) porque sus
       reglas de escritorio (max-width 280px / max-height 110px) ganarían por
       especificidad y desbordarían la tarjeta, rompiendo las 2 columnas. */
    .entidad-logo,
    #entidad-prodiversa .entidad-logo,
    #entidad-acompanya .entidad-logo,
    #entidad-4d3 .entidad-logo {
        max-width: 100%;
        max-height: 56px;
    }
    .entidad-descripcion {
        font-size: 0.85rem;
    }

}