/* =========================================================
   WENZA LABS — dirección "Ledger"
   Papel de libro contable · tinta · verde contable
   ========================================================= */

/* ============ TOKENS ============ */
:root {
    /* superficies */
    --papel:        #EAE7DE;   /* fondo de página */
    --papel-alto:   #F5F3EC;   /* tarjetas, campos, filas */
    --papel-medio:  #E4E1D6;   /* encabezados de tabla, filas alternas */
    --papel-hueso:  #EEEBE1;

    /* tinta */
    --tinta:        #1B1D19;   /* texto principal · 13.6:1 sobre papel */
    --tinta-suave:  #5C5F55;   /* texto secundario · 5.3:1 sobre papel */

    /* acento */
    --verde:        #2F5D3A;   /* acento principal · 6.2:1 sobre papel */
    --verde-vivo:   #3E7A4C;   /* hover, y acento sobre fondos oscuros */
    --verde-claro:  #C9D8CC;   /* texto sobre verde */
    --ambar:        #B8791F;   /* señal (punto de estado) */
    --ambar-texto:  #8F5A12;   /* misma señal, en texto · 4.7:1 */

    /* líneas */
    --linea:        #CFCBBD;   /* divisor visible */
    --linea-tenue:  #E0DCCF;   /* renglón, divisor interno */
    --linea-fuerte: #86806F;   /* borde de campo de formulario · 3.2:1 */

    /* tipografía */
    --f-display: 'Fraunces', Georgia, serif;
    --f-texto:   'Instrument Sans', system-ui, sans-serif;
    --f-mono:    'JetBrains Mono', ui-monospace, monospace;

    --t-hero:  clamp(2.5rem, 5.6vw, 4.25rem);
    --t-h2:    clamp(1.65rem, 3.2vw, 2.4rem);
    --t-h3:    1.1875rem;
    --t-body:  1.0625rem;
    --t-small: .875rem;
    --t-mono:  .75rem;

    /* espaciado */
    --s1: .5rem;  --s2: 1rem;  --s3: 1.5rem;
    --s4: 2.5rem; --s5: 4rem;  --s6: 6.5rem;

    --ancho: 1120px;
    --radio:    12px;
    --radio-sm: 7px;

    /* curvas — las de CSS por defecto son demasiado flojas */
    --ease-out:  cubic-bezier(.23, 1, .32, 1);
    --ease-mov:  cubic-bezier(.77, 0, .175, 1);

    --renglon: 28px;  /* alto del renglón del papel contable */
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--f-texto);
    font-size: var(--t-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }

h1, h2, h3 {
    font-family: var(--f-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.02em;
    font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

h1 { font-size: var(--t-hero); font-weight: 700; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; }

a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

.eyebrow {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--verde);
    margin-bottom: var(--s2);
}

.oculto-visual {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.saltar {
    position: absolute;
    left: -9999px;
    z-index: 100;
    background: var(--tinta);
    color: var(--papel);
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--radio-sm) 0;
    text-decoration: none;
    font-size: var(--t-small);
    font-weight: 600;
}
.saltar:focus { left: 0; top: 0; }

:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============ LAYOUT ============ */
.contenedor {
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.contenedor--angosto { max-width: 680px; }

.seccion { padding-block: var(--s5); }
.seccion--borde { border-top: 1px solid var(--linea); }

/* banda de contraste: separa el caso del resto y hace que las capturas
   claras del sistema despeguen del fondo */
.seccion--banda {
    background: var(--papel-medio);
    border-block: 1px solid var(--linea);
    --cortina: var(--papel-medio);
}

@media (min-width: 768px) {
    .seccion { padding-block: var(--s6); }
}

.seccion__cabeza {
    max-width: 42ch;
    margin-bottom: var(--s4);
}


/* ============ BOTONES ============ */
.boton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    border-radius: var(--radio-sm);
    text-decoration: none;
    font-family: var(--f-texto);
    font-weight: 600;
    font-size: var(--t-small);
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 160ms var(--ease-out),
                background-color 160ms ease,
                border-color 160ms ease,
                color 160ms ease;
}

/* el press siempre responde, también en touch */
.boton:active { transform: scale(.97); }

.boton--primario {
    background: var(--verde);
    color: var(--papel-alto);
}

.boton--wsp {
    background: var(--verde-vivo);
    color: #FFFFFF;
}

.boton--linea {
    background: transparent;
    color: var(--tinta);
    border-color: var(--linea-fuerte);
}

.boton--texto {
    background: none;
    color: var(--tinta);
    padding-inline: 0;
    border-bottom: 1.5px solid var(--verde);
    border-radius: 0;
    padding-bottom: .3rem;
}
.boton--texto i { transition: transform 200ms var(--ease-out); }

.boton[disabled] {
    opacity: .55;
    cursor: progress;
}

@media (hover: hover) and (pointer: fine) {
    .boton--primario:hover { background: var(--verde-vivo); }
    .boton--wsp:hover      { background: #4A8F5A; }
    .boton--linea:hover    { border-color: var(--tinta); background: var(--papel-alto); }
    .boton--texto:hover i  { transform: translateX(4px); }
}

/* ============ HEADER / NAV ============ */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--tinta);
    color: var(--papel);
    box-shadow: 0 0 0 rgba(27, 29, 25, 0);
    transition: box-shadow 240ms ease;
}

/* al salir del hero la barra se despega del papel */
.header.desplazado { box-shadow: 0 6px 22px rgba(27, 29, 25, .20); }

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 64px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    flex-shrink: 0;
}

.logo__texto {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -.02em;
    color: var(--papel);
}

.nav__panel {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav__links {
    display: flex;
    gap: 1.75rem;
}

.nav__links a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--papel);
    font-size: var(--t-small);
    font-weight: 500;
    padding-block: .25rem;
}

/* el subrayado sigue a la sección en la que estás */
.nav__links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--verde-vivo);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms var(--ease-out);
}

.nav__links a.activo::after { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
    .nav__links a:hover::after { transform: scaleX(1); }
}

.nav__btn {
    display: none;
    background: none;
    border: none;
    color: var(--papel);
    font-size: 1.6rem;
    line-height: 1;
    padding: .25rem;
    cursor: pointer;
}

@media (max-width: 860px) {
    .nav__btn { display: block; }

    .nav__panel {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--tinta);
        border-top: 1px solid rgba(234, 231, 222, .14);
        padding: 0 1.5rem;

        /* animado con transition (interrumpible), no keyframes */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 260ms var(--ease-out),
                    opacity 180ms ease,
                    visibility 0s linear 260ms;
    }

    .nav__panel.abierto {
        max-height: 320px;
        opacity: 1;
        visibility: visible;
        padding-block: 1rem 1.5rem;
        transition: max-height 300ms var(--ease-out),
                    opacity 200ms ease,
                    visibility 0s;
    }

    .nav__links {
        flex-direction: column;
        gap: 0;
    }

    .nav__links a {
        display: block;
        padding-block: .85rem;
        border-bottom: 1px solid rgba(234, 231, 222, .1);
    }

    .nav__panel .boton--wsp {
        margin-top: 1rem;
        justify-content: center;
    }
}

/* ============ HERO ============ */
.hero {
    /* el renglón del papel contable: la firma de la marca */
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0 calc(var(--renglon) - 1px),
            var(--linea-tenue) calc(var(--renglon) - 1px) var(--renglon)
        );
    background-position: 0 -1px;
    padding-block: var(--s5);
    border-bottom: 1px solid var(--linea);
}

@media (min-width: 768px) { .hero { padding-block: var(--s6); } }

.hero__grid {
    display: grid;
    gap: var(--s4);
    align-items: center;
}

@media (min-width: 900px) {
    .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s5); }
}

.hero__titulo {
    margin-block: var(--s2) var(--s3);
    max-width: 14ch;
}

.hero__bajada {
    color: var(--tinta-suave);
    max-width: 44ch;
    margin-bottom: var(--s4);
}

.hero__cta {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
}

/* ============ PANEL VIVO ============ */
.panel {
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(27, 29, 25, .05),
                0 12px 32px rgba(27, 29, 25, .10);
    font-variant-numeric: tabular-nums;
}

.panel__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: .7rem 1rem;
    background: var(--verde);
    color: var(--verde-claro);
    font-family: var(--f-mono);
    font-size: var(--t-mono);
}

.panel__vivo { display: inline-flex; align-items: center; gap: .45rem; }

.panel__vivo i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #7FCE9B;
    animation: latido 2.4s ease-in-out infinite;
}

@keyframes latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.panel__hd,
.panel__fila {
    display: grid;
    grid-template-columns: 1.8fr .8fr 1.1fr;
    align-items: center;
    padding-inline: 1rem;
    gap: .5rem;
}

.panel__hd {
    height: 34px;
    background: var(--papel-medio);
    border-bottom: 1px solid var(--linea);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.panel__fila {
    height: 44px;
    border-bottom: 1px solid var(--linea-tenue);
    font-size: var(--t-small);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 420ms var(--ease-out),
                transform 420ms var(--ease-out),
                background-color 700ms ease;
}

.panel__fila:last-child { border-bottom: none; }
.panel__fila:nth-child(even) { background: var(--papel-hueso); }
.panel__fila.visible { opacity: 1; transform: none; }
.panel__fila.resaltada { background: rgba(184, 121, 31, .14); }

.panel__stock {
    font-family: var(--f-mono);
    font-weight: 500;
}

.panel__estado {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: 13px;
    color: var(--tinta-suave);
}

.panel__estado::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--verde);
    flex-shrink: 0;
}

.panel__estado--bajo { color: var(--ambar-texto); }
.panel__estado--bajo::before { background: var(--ambar); }

/* ============ SERVICIOS ============ */
.servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: var(--s3);
}

.card {
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: var(--s4) var(--s3);
    transition: transform 220ms var(--ease-out),
                border-color 220ms ease,
                box-shadow 220ms ease;
}

.card__icono {
    display: block;
    font-size: 1.5rem;
    color: var(--verde);
    margin-bottom: var(--s3);
}

.card h3 { margin-bottom: .5rem; }
.card p  { color: var(--tinta-suave); font-size: var(--t-small); }

@media (hover: hover) and (pointer: fine) {
    .card:hover {
        transform: translateY(-3px);
        border-color: var(--verde);
        box-shadow: 0 10px 26px rgba(27, 29, 25, .09);
    }
}

/* ============ PROCESO ============ */
.proceso {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--linea-tenue);
}

.proceso__paso {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--s2);
    align-items: baseline;
    padding-block: var(--s3);
}

/* el renglón se dibuja de izquierda a derecha, como si lo trazaran */
.proceso__paso::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--linea-tenue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 640ms var(--ease-out);
    transition-delay: var(--retraso, 0ms);
}

.proceso__paso.visible::after { transform: scaleX(1); }

@media (min-width: 768px) {
    .proceso__paso { grid-template-columns: 6rem 1fr; padding-block: var(--s4); }
}

.proceso__n {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    letter-spacing: .12em;
    color: var(--verde);
    padding-top: .15rem;
}

.proceso__paso h3 { margin-bottom: .3rem; }
.proceso__paso p  { color: var(--tinta-suave); font-size: var(--t-small); max-width: 52ch; }

/* ============ CASO ============ */
/* La captura grande manda; las dos chicas van debajo, en par.
   La frase del medio separa los dos bloques y le da respiro a la sección. */
.caso__principal { margin-bottom: var(--s4); }

.caso__par {
    display: grid;
    gap: var(--s4);
}

@media (min-width: 760px) {
    .caso__par { grid-template-columns: 1fr 1fr; gap: var(--s3); }
}

#trabajo figcaption {
    margin-top: .85rem;
    font-size: var(--t-small);
    color: var(--tinta-suave);
}

#trabajo .ficha { margin-top: var(--s5); }

.marco {
    position: relative;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--papel-alto);
    box-shadow: 0 1px 2px rgba(27, 29, 25, .05),
                0 12px 30px rgba(27, 29, 25, .09);
}

.marco img {
    width: 100%;
    height: auto;
    display: block;
}

.marco__barra {
    display: flex;
    gap: 6px;
    padding: .7rem .85rem;
    background: var(--papel-medio);
    border-bottom: 1px solid var(--linea);
}

.marco__barra span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--linea-fuerte);
    opacity: .45;
}

/* frase al medio del caso: afirmación nuestra, no una cita de nadie */
.frase {
    max-width: 22ch;
    margin-inline: auto;
    padding-block: var(--s5);
    text-align: center;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--verde);
}

/* ficha: filas de libro contable, reutilizada en caso y nosotros */
.ficha { border-top: 1px solid var(--linea-tenue); }

.ficha > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: var(--s2);
    padding-block: .8rem;
    border-bottom: 1px solid var(--linea-tenue);
}

.ficha dt {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    padding-top: .2rem;
}

.ficha dd { font-size: var(--t-small); }

.ficha--destacada {
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding-inline: var(--s3);
}

.ficha--destacada > div:last-child { border-bottom: none; }

/* ============ NOSOTROS ============ */
.nosotros {
    display: grid;
    gap: var(--s4);
    align-items: start;
}

@media (min-width: 900px) {
    .nosotros { grid-template-columns: 1.35fr 1fr; gap: var(--s5); }
}

.nosotros__texto h2 { margin-bottom: var(--s3); max-width: 18ch; }

.nosotros__texto p {
    color: var(--tinta-suave);
    max-width: 58ch;
}

.nosotros__texto p + p { margin-top: var(--s2); }

/* ============ CONTACTO ============ */
.contacto h2 { margin-bottom: var(--s2); }

.contacto__intro {
    color: var(--tinta-suave);
    margin-bottom: var(--s4);
    max-width: 48ch;
}

.form {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.campo label {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.campo input,
.campo textarea {
    background: var(--papel-alto);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-sm);
    color: var(--tinta);
    padding: .75rem .9rem;
    font-family: inherit;
    font-size: var(--t-small);
    resize: vertical;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.campo input { height: 46px; }

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(47, 93, 58, .16);
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
    border-color: #9E3B26;
    box-shadow: 0 0 0 3px rgba(158, 59, 38, .12);
}

.consentimiento {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: var(--t-small);
    color: var(--tinta-suave);
    cursor: pointer;
}

.consentimiento input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: .15rem;
    accent-color: var(--verde);
    cursor: pointer;
}

.consentimiento a { color: var(--verde); text-underline-offset: 3px; }

.consentimiento input[aria-invalid="true"] { outline: 2px solid #9E3B26; outline-offset: 2px; }

.form button { align-self: flex-start; }

.form__estado {
    font-size: var(--t-small);
    min-height: 1.4em;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.form__estado.visible { opacity: 1; transform: none; }
.form__estado--ok    { color: var(--verde); font-weight: 500; }
.form__estado--error { color: #9E3B26; }

.contacto__directo {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--linea-tenue);
    font-size: var(--t-small);
    color: var(--tinta-suave);
}

/* ============ PÁGINA LEGAL ============ */
.contenedor--lectura { max-width: 720px; }

.legal { padding-block: var(--s5) var(--s6); }

.legal__volver {
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--papel);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .legal__volver:hover { border-bottom-color: var(--verde-vivo); }
}

.legal__titulo {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    max-width: 20ch;
    margin-bottom: var(--s2);
}

.legal__fecha {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.legal__indice {
    margin-block: var(--s4);
    padding: var(--s3);
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.legal__indice ol {
    display: grid;
    gap: .55rem;
    font-size: var(--t-small);
}

.legal__indice a { color: var(--tinta); text-decoration-color: var(--linea-fuerte); }

.legal__seccion {
    padding-top: var(--s4);
    margin-top: var(--s4);
    border-top: 1px solid var(--linea);
    scroll-margin-top: 84px;
}

.legal__seccion h2 { margin-bottom: var(--s3); }

.legal__seccion h3 {
    margin-top: var(--s3);
    margin-bottom: .5rem;
    font-size: 1.0625rem;
}

.legal__seccion p,
.legal__seccion li { color: var(--tinta-suave); }

.legal__seccion p + p,
.legal__seccion p + ul,
.legal__seccion p + dl { margin-top: var(--s2); }

.legal__seccion ul {
    display: grid;
    gap: .45rem;
    padding-left: 1.1rem;
    list-style: disc;
}

.legal__seccion .ficha { margin-block: var(--s2); }

.legal__seccion a { color: var(--verde); text-underline-offset: 3px; }

.legal__seccion code {
    font-family: var(--f-mono);
    font-size: .8125rem;
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    border-radius: 4px;
    padding: .1rem .35rem;
}

/* párrafo que conviene que no se pase por alto */
.legal__destacado {
    background: var(--papel-alto);
    border-left: 3px solid var(--verde);
    border-radius: 0;
    padding: var(--s2) var(--s3);
    color: var(--tinta) !important;
}

/* texto de ley, citado literal */
.legal__legal {
    margin-top: var(--s3);
    padding: var(--s3);
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    font-size: var(--t-small);
    color: var(--tinta-suave);
}

.legal__legal p + p { margin-top: var(--s2); }

.legal__nota { font-size: var(--t-small); }

/* hueco que tienen que completar antes de publicar */
.completar {
    background: rgba(184, 121, 31, .16);
    border-bottom: 1.5px dashed var(--ambar-texto);
    color: var(--ambar-texto);
    font-weight: 500;
    padding: .05rem .3rem;
}

/* ============ FOOTER ============ */
.footer {
    background: var(--tinta);
    color: var(--papel);
    padding-block: var(--s4);
}

.footer__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
}

.footer__marca {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -.02em;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    font-size: var(--t-small);
}

.footer__links a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    color: rgba(234, 231, 222, .78);
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .footer__links a:hover {
        color: var(--papel);
        border-bottom-color: var(--verde-vivo);
    }
}

.footer__anio {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    color: rgba(234, 231, 222, .55);
}

/* ============ ENTRADA DEL HERO ============ */
/* secuencia orquestada al cargar: una sola vez, escalonada */
.hero__anim {
    opacity: 0;
    transform: translateY(10px);
    animation: entrar 620ms var(--ease-out) forwards;
}

.hero__anim:nth-child(1) { animation-delay:  60ms; }
.hero__anim:nth-child(2) { animation-delay: 120ms; }
.hero__anim:nth-child(3) { animation-delay: 180ms; }
.hero__anim:nth-child(4) { animation-delay: 240ms; }
.panel.hero__anim        { animation-delay: 300ms; }

@keyframes entrar {
    to { opacity: 1; transform: none; }
}

/* ============ REVEAL AL SCROLLEAR ============ */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 480ms var(--ease-out),
                transform 480ms var(--ease-out);
    transition-delay: var(--retraso, 0ms);
}

.reveal.visible { opacity: 1; transform: none; }

/* Cortina: la captura se descubre de arriba hacia abajo.
   Es una persiana que se retira POR ENCIMA de la imagen, no un recorte de la
   imagen: Chrome no dispara loading="lazy" en imágenes tapadas por clip-path,
   así que recortarlas las dejaba sin cargar para siempre. */
.reveal.reveal--cortina { transform: none; }

.reveal--cortina .marco::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cortina, var(--papel));
    transform-origin: bottom;
    transition: transform 720ms var(--ease-out);
    transition-delay: var(--retraso, 0ms);
}

.reveal--cortina.visible .marco::after { transform: scaleY(0); }

/* ============ MOVIMIENTO REDUCIDO ============ */
/* se conserva el fundido (ayuda a comprender), se quita el desplazamiento */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .reveal,
    .hero__anim,
    .panel__fila { transform: none !important; }

    /* se van la persiana y los trazos; quedan los fundidos */
    .reveal--cortina .marco::after { display: none; }
    .proceso__paso::after,
    .nav__links a.activo::after { transform: none !important; }

    .boton:active { transform: none; }

    .panel__vivo i { animation: none; }

    .card:hover { transform: none; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 120ms !important;
        scroll-behavior: auto !important;
    }
}