/*
 * Mylocal Web — hoja de estilos del sitio público.
 * Identidad propia de Mylocal (ver ARCHITECTURE.md y el plan de
 * implementación de la landing). Estética minimalista premium: mucho
 * blanco, luz limpia, animaciones muy sutiles. Sin frameworks de CSS
 * ni librerías de animación — todo nativo.
 *
 * Organización:
 *   1. Tokens (paleta, tipografía, espaciado)
 *   2. @font-face (Poppins, self-hosted)
 *   3. Reset / base
 *   4. Utilidades de layout
 *   5. Componentes, por sección de la landing (con su propio responsive)
 *   6. Animaciones
 */

/* === 1. Tokens ============================================== */

:root {
    /* Paleta de marca */
    --mylocal-blue: #00A8FF;
    --mylocal-blue-dark: #0090DE;
    --deep-navy: #0F172A;
    --metallic-gray: #6B7280;
    --light-blue: #E6F4FF;
    --bg: #F8FAFC;
    --white: #FFFFFF;
    --border-subtle: #E2E8F0;

    /* Texto */
    --text-body: var(--deep-navy);
    --text-muted: var(--metallic-gray);

    /* Tipografía */
    --font-base: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Espaciado / forma */
    --max-width: 1140px;
    --section-padding: 64px;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.06);

    /* Movimiento */
    --transition-base: 220ms ease;
    --transition-slow: 480ms ease;
}

@media (min-width: 1024px) {
    :root {
        --section-padding: 104px;
    }
}

/* === 2. @font-face (Poppins self-hosted) ======================
   Los archivos .woff2 todavía no están cargados en
   assets/fonts/ — ver README de esa carpeta. Mientras no existan,
   el navegador simplemente ignora la fuente y usa el fallback
   (system-ui) definido en --font-base; no hace falta tocar nada
   acá cuando se agreguen los 4 archivos. */

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-v24-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-v24-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-v24-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-v24-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* === 3. Reset / base ========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.5em;
    color: var(--deep-navy);
}

h1 {
    font-size: clamp(2rem, 4vw + 1rem, 3rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
}

p {
    margin: 0 0 1em;
}

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

a {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === 4. Utilidades de layout ================================= */

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: var(--section-padding) 0;
}

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mylocal-blue);
    margin-bottom: 0.75em;
}

.section-intro {
    color: var(--text-muted);
    max-width: 56ch;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.btn-primary {
    background: var(--mylocal-blue);
    color: var(--white);
    box-shadow: 0 10px 24px rgba(0, 168, 255, 0.28);
}

.btn-primary:hover {
    background: var(--mylocal-blue-dark);
    transform: translateY(-1px);
}

/* CTA de enlace suave del hero: sin botón, un indicador elegante que
   invita a bajar de página (decisión aprobada: nada de botón
   comercial tradicional acá). */
.btn-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 500;
    color: var(--deep-navy);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 4px;
    transition: color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.btn-scroll-hint:hover {
    color: var(--mylocal-blue);
    border-color: var(--mylocal-blue);
}

.btn-scroll-hint .scroll-arrow {
    display: inline-block;
    transition: transform var(--transition-base);
}

.btn-scroll-hint:hover .scroll-arrow {
    transform: translateY(3px);
}

/* Halo de luz limpio detrás de un personaje — nunca un degradé
   tecnológico marcado, solo una luminosidad muy suave. */
.character-glow {
    position: relative;
}

.character-glow::before {
    content: "";
    position: absolute;
    inset: 8% 12%;
    background: radial-gradient(circle, var(--light-blue) 0%, rgba(230, 244, 255, 0) 70%);
    z-index: 0;
    border-radius: 50%;
}

.character-glow img {
    position: relative;
    z-index: 1;
}

/* === 5. Componentes por sección =============================== */

/* --- Preloader (ver app/partials/preloader.php) --- */

/* Mientras el preloader está visible, main.js agrega esta clase a
   <html> para bloquear el scroll (además del overlay fixed que ya
   cubre todo el viewport). Se quita sola al ocultarse. */
html.preloader-lock {
    overflow: hidden;
}

.preloader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: var(--bg);
    z-index: 9999;
    transition: opacity var(--transition-slow);
}

.preloader.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Contenedor del personaje: define el área sobre la que respiran el
   halo y los anillos, centrados detrás de la imagen. */
.preloader-character-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Halo azul extremadamente sutil, con una pulsación todavía más
   discreta que la respiración del robot. */
.preloader-halo {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--light-blue) 0%, rgba(230, 244, 255, 0) 70%);
    animation: preloader-halo-pulse 3.2s ease-in-out infinite;
}

/* Dos anillos concéntricos que se expanden y desvanecen en bucle,
   desfasados entre sí, para sugerir actividad sin barra de progreso. */
.preloader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 168, 255, 0.28);
    animation: preloader-ring-pulse 2.4s ease-out infinite;
}

.preloader-ring--delay {
    animation-delay: 1.2s;
}

/* El personaje oficial (de frente, relajado): respiración muy leve,
   scale 1 → ~1.02 → 1, repetida durante todo el tiempo que el
   preloader está en pantalla. */
.preloader-character {
    position: relative;
    z-index: 1;
    width: 128px;
    height: auto;
    animation: preloader-breathe 2.4s ease-in-out infinite;
}

.preloader-logo {
    width: 120px;
    height: auto;
}

@keyframes preloader-breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

@keyframes preloader-halo-pulse {
    0%, 100% {
        opacity: 0.45;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.03);
    }
}

@keyframes preloader-ring-pulse {
    0% {
        transform: scale(0.82);
        opacity: 0.45;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

/* --- Header / nav --- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
    background: rgba(248, 250, 252, 0.9);
    backdrop-filter: blur(8px);
    border-bottom-color: var(--border-subtle);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
}

.logo {
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--deep-navy);
}

.logo img {
    display: block;
    width: 120px;
    height: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.site-nav a {
    text-decoration: none;
    color: var(--text-body);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color var(--transition-base);
}

.site-nav a:hover {
    color: var(--mylocal-blue);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--deep-navy);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

@media (max-width: 767px) {
    .nav-toggle {
        display: flex;
    }

    .site-nav {
        position: fixed;
        inset: 64px 0 0 0;
        background: var(--bg);
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 32px 24px;
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        overflow-y: auto;
    }

    .site-nav.is-open {
        transform: translateX(0);
    }

    .site-nav ul {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* --- Hero --- */

.section-hero {
    padding-top: 40px;
}

.hero-grid {
    display: grid;
    gap: 40px;
    align-items: center;
}

.hero-copy .tagline {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 42ch;
}

.hero-character {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 64px;
    }

    .hero-character {
        max-width: 420px;
        margin: 0;
    }
}

/* --- 2. Conocer / entender / ayudar --- */

.intro-grid {
    display: grid;
    gap: 40px;
    align-items: center;
}

.intro-media img {
    max-width: 220px;
    margin: 0 auto;
}

.pillars {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 20px;
}

.pillars li {
    padding-left: 20px;
    border-left: 2px solid var(--light-blue);
}

.pillars strong {
    display: block;
    color: var(--mylocal-blue);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

@media (min-width: 1024px) {
    .intro-grid {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 64px;
    }

    .intro-media img {
        max-width: 320px;
    }
}

/* --- 3. Pregúntele --- */

.section-qa {
    background: var(--white);
    border-radius: var(--radius-lg);
}

.qa-grid {
    display: grid;
    gap: 40px;
    align-items: center;
}

.qa-media img {
    max-width: 240px;
    margin: 0 auto;
}

.qa-examples {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.qa-card {
    background: var(--light-blue);
    border-radius: var(--radius-md);
    padding: 20px 24px;
}

.qa-question {
    font-weight: 600;
    color: var(--deep-navy);
    margin-bottom: 6px;
}

.qa-answer {
    color: var(--text-muted);
    margin: 0;
}

@media (min-width: 1024px) {
    .qa-grid {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 64px;
    }

    .qa-media img {
        max-width: 320px;
    }
}

/* --- 4. También tiene su manera de ser --- */

.traits-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 32px;
}

.trait-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 28px 20px;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.trait-character {
    max-width: 130px;
    margin: 0 auto 16px;
}

.trait-card p {
    margin: 0;
    font-weight: 500;
    color: var(--deep-navy);
}

@media (min-width: 640px) {
    .traits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .traits-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- 5. Mylocal está para ayudarlo --- */

.trust-grid {
    display: grid;
    gap: 40px;
    align-items: center;
}

.trust-media img {
    max-width: 220px;
    margin: 0 auto;
}

.trust-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.trust-list li {
    position: relative;
    padding-left: 26px;
    font-weight: 500;
    color: var(--deep-navy);
}

.trust-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mylocal-blue);
}

@media (min-width: 1024px) {
    .trust-grid {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 64px;
    }

    .trust-media img {
        max-width: 300px;
    }
}

/* --- 6. Siempre a su lado (sección emocional, la más fuerte) --- */

.section-emotional {
    background: var(--light-blue);
    border-radius: var(--radius-lg);
    text-align: center;
}

.emotional-grid {
    display: grid;
    gap: 32px;
    justify-items: center;
}

.emotional-copy h2 {
    max-width: 20ch;
    margin: 0 auto 0.5em;
}

.emotional-copy p {
    max-width: 48ch;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--text-body);
}

.emotional-character {
    max-width: 320px;
}

@media (min-width: 1024px) {
    .emotional-character {
        max-width: 460px;
    }
}

/* --- 7. Usted decide. Mylocal ayuda. --- */

.decision-grid {
    display: grid;
    gap: 32px;
    align-items: center;
}

.section-character--small {
    max-width: 150px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .decision-grid {
        grid-template-columns: 0.5fr 1.5fr;
        gap: 56px;
    }

    .section-character--small {
        max-width: 190px;
        margin: 0;
    }
}

/* --- 8. Cierre --- */

.section-closing {
    text-align: center;
}

.closing-character {
    max-width: 200px;
    margin: 0 auto 24px;
}

.closing-logo {
    max-width: 140px;
    margin: 32px auto 0;
}

/* --- Contacto (bloque separado, ver decisión aprobada) --- */

.section-contact {
    background: var(--deep-navy);
    color: var(--white);
    border-radius: var(--radius-lg);
}

.section-contact h2 {
    color: var(--white);
}

.section-contact .section-intro {
    color: rgba(255, 255, 255, 0.7);
}

.contact-grid {
    display: grid;
    gap: 32px;
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }
}

.contact-form {
    display: grid;
    gap: 12px;
}

.contact-form label {
    font-weight: 500;
    font-size: 0.9rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-sm);
    font: inherit;
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--mylocal-blue);
    outline-offset: 1px;
}

.honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.contact-info {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.contact-info a {
    color: var(--white);
    text-decoration: none;
}

.contact-info a:hover {
    color: var(--mylocal-blue);
}

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.alert-success {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.alert-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* --- Footer --- */

.site-footer {
    padding: 48px 0 24px;
}

.footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-logo-text {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--deep-navy);
}

.footer-tagline {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 4px;
}

.footer-social {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}

.footer-social a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-social a:hover {
    color: var(--mylocal-blue);
}

.footer-copyright {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 24px;
}

/* === 6. Animaciones sutiles ==================================== */

/* Respiración muy lenta y de baja amplitud en los personajes, para
   que se sientan "vivos" sin llamar la atención. */
.character-float {
    animation: character-float 6s ease-in-out infinite;
}

@keyframes character-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Entrada al hacer scroll (el toggle de .is-visible en la sección
   sigue siendo obra de IntersectionObserver en main.js — eso no
   cambió). Cada tipo de contenido entra con su propio timing —título
   primero, después imagen/texto, después CTA/tarjetas o listas en
   cascada— para que ningún .reveal se sienta como un bloque rígido
   único, incluso cuando agrupa varios elementos. Desplazamientos
   amplios (36–46px según el elemento) para que el movimiento desde
   abajo sea claramente perceptible, sin rebote, sin zoom, sin
   movimiento lateral ni rotación, con una curva de easing pensada
   para que cada elemento se sienta llegando a su lugar. La regla
   global de reduced-motion (sección 3) ya lleva estas transiciones a
   ~0; no hace falta repetirlo acá. Con JS deshabilitado estos
   elementos no reciben .is-visible y quedan ocultos (mismo
   comportamiento de antes, a nivel de elemento en vez de sección
   completa). */

.reveal h2,
.reveal [class*="-media"],
.reveal .closing-character,
.reveal .section-intro,
.reveal .emotional-copy p,
.reveal .closing-logo,
.reveal .contact-form-wrap,
.reveal .contact-details .btn,
.reveal .contact-info,
.reveal .pillars li,
.reveal .trust-list li,
.reveal .qa-card,
.reveal .trait-card {
    opacity: 0;
}

.reveal.is-visible h2,
.reveal.is-visible [class*="-media"],
.reveal.is-visible .closing-character,
.reveal.is-visible .section-intro,
.reveal.is-visible .emotional-copy p,
.reveal.is-visible .closing-logo,
.reveal.is-visible .contact-form-wrap,
.reveal.is-visible .contact-details .btn,
.reveal.is-visible .contact-info,
.reveal.is-visible .pillars li,
.reveal.is-visible .trust-list li,
.reveal.is-visible .qa-card,
.reveal.is-visible .trait-card {
    opacity: 1;
}

/* Título: el primero en entrar, con el desplazamiento más largo de
   la secuencia. */
.reveal h2 {
    transform: translateY(46px);
    transition: opacity 780ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible h2 {
    transform: translateY(0);
}

/* Columna de imagen del personaje: acompaña al título, con un
   desfase corto pero ya perceptible. Se anima el contenedor
   ([class*="-media"]), nunca la imagen del personaje en sí, para no
   competir con el transform propio de .character-float. */
.reveal [class*="-media"] {
    transform: translateY(46px);
    transition: opacity 780ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 130ms;
}

.reveal.is-visible [class*="-media"] {
    transform: translateY(0);
}

/* La imagen de cierre no tiene un contenedor "-media" propio (va
   directo en el <section>) y ya tiene su propia animación de flotado
   (character-float, sobre transform); acá solo se anima la opacidad,
   en el mismo tiempo que el resto del grupo "imagen", para no pisar
   ese transform. */
.reveal .closing-character {
    transition: opacity 780ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 130ms;
}

/* Párrafo / subtítulo de apoyo: entra después del título e imagen. */
.reveal .section-intro,
.reveal .emotional-copy p,
.reveal .closing-logo {
    transform: translateY(40px);
    transition: opacity 730ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 730ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 260ms;
}

.reveal.is-visible .section-intro,
.reveal.is-visible .emotional-copy p,
.reveal.is-visible .closing-logo {
    transform: translateY(0);
}

/* Columna del formulario de contacto: bloque paralelo al texto, con
   un desfase similar al del párrafo. */
.reveal .contact-form-wrap {
    transform: translateY(40px);
    transition: opacity 730ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 730ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 300ms;
}

.reveal.is-visible .contact-form-wrap {
    transform: translateY(0);
}

/* CTA de contacto y datos de contacto (WhatsApp/tel/email/dirección):
   antes quedaban visibles de entrada, sin animación, rompiendo la
   cascada de la columna de texto. Entran como último grupo de esa
   columna, después del párrafo. */
.reveal .contact-details .btn,
.reveal .contact-info {
    transform: translateY(36px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 390ms;
}

.reveal.is-visible .contact-details .btn,
.reveal.is-visible .contact-info {
    transform: translateY(0);
}

/* Tarjetas y listas: entran en cascada, una tras otra, con un
   desplazamiento igual de perceptible que el resto de la secuencia. */
.reveal .pillars li,
.reveal .trust-list li,
.reveal .qa-card,
.reveal .trait-card {
    transform: translateY(42px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible .pillars li,
.reveal.is-visible .trust-list li,
.reveal.is-visible .qa-card,
.reveal.is-visible .trait-card {
    transform: translateY(0);
}

.reveal .pillars li:nth-child(1),
.reveal .trust-list li:nth-child(1),
.reveal .qa-card:nth-of-type(1),
.reveal .trait-card:nth-child(1) {
    transition-delay: 390ms;
}

.reveal .pillars li:nth-child(2),
.reveal .trust-list li:nth-child(2),
.reveal .qa-card:nth-of-type(2),
.reveal .trait-card:nth-child(2) {
    transition-delay: 530ms;
}

.reveal .pillars li:nth-child(3),
.reveal .trust-list li:nth-child(3),
.reveal .qa-card:nth-of-type(3),
.reveal .trait-card:nth-child(3) {
    transition-delay: 670ms;
}

.reveal .trait-card:nth-child(4) {
    transition-delay: 810ms;
}

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