/* ==========================================================================
   We Move Love — portada pública
   Sistema de diseño tomado de la plantilla Vectura: tipografía Geist,
   titulares grandes con interletrado negativo, mucho blanco y secciones
   separadas por aire generoso.
   ========================================================================== */

/* ---- Tipografía autoalojada: sin llamadas a servidores externos ---- */
@font-face {
    font-family: 'Geist';
    src: url('/public/landing/fonts/geist-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Chivo Mono';
    src: url('/public/landing/fonts/chivo-mono.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --tinta: #000;
    --tinta-suave: #222;
    --tinta-tenue: #6b6b6b;
    --linea: #e5e5e5;
    --papel: #fff;
    --papel-hueso: #f6f5f3;

    /* Colores de la marca */
    --rosa: #E31C79;
    --azul: #005FA3;

    --ancho: 1424px;
    --radio: 20px;
    --radio-boton: 64px;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
/* Con Lenis activo, el scroll lo controla el guion. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta-suave);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 40px;
}
.seccion { padding: 120px 40px; }
.seccion--amplia { padding: 180px 40px; }
.seccion--hueso { background: var(--papel-hueso); }

@media (max-width: 900px) {
    .contenedor { padding: 0 20px; }
    .seccion, .seccion--amplia { padding: 72px 20px; }
}

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */
.display {
    font-size: clamp(2.6rem, 6.2vw, 5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.05em;
    margin: 0;
}
.titular {
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.05em;
    color: var(--tinta);
    margin: 0;
}
.subtitular {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--tinta);
    margin: 0;
}
.entradilla {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--tinta-tenue);
    max-width: 62ch;
    margin: 0;
}
.antetitulo {
    font-family: 'Chivo Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    margin: 0 0 18px;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border: 1px solid transparent;
    border-radius: var(--radio-boton);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.22,1,.36,1),
                background-color .25s ease, color .25s ease, border-color .25s ease;
}
.boton:active { transform: scale(.97); }

.boton--oscuro { background: var(--tinta); color: #fff; }
.boton--oscuro:hover { background: #2a2a2a; }

.boton--claro { background: #fff; color: var(--tinta); }
.boton--claro:hover { background: #f0f0f0; }

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

.boton--vidrio {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
}
.boton--vidrio:hover { background: rgba(255, 255, 255, .26); }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.cabecera {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    padding: 16px 0;
    transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
/* Al bajar, la barra se vuelve sólida para que se lea sobre cualquier fondo. */
.cabecera.esta-fijada {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--linea);
}

/* --- Arriba del todo, encima del vídeo ---------------------------------
   Aquí la barra es transparente y el fondo es un vídeo que cambia solo:
   con la tinta oscura de siempre los enlaces se perdían. Van en blanco, y
   debajo se pone un velo degradado para que se lean pase lo que pase en
   el fotograma. El velo no intercepta clics. */
.cabecera:not(.esta-fijada)::before {
    content: '';
    position: absolute;
    inset: 0 0 -40px 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
    pointer-events: none;
    z-index: -1;
}
.cabecera:not(.esta-fijada) .marca,
.cabecera:not(.esta-fijada) .menu a { color: #fff; }
.cabecera:not(.esta-fijada) .menu a:hover { color: rgba(255,255,255,.72); }
.cabecera:not(.esta-fijada) .boton-menu span { background: #fff; }

/* El botón de línea también: borde y texto blancos sobre el vídeo. */
.cabecera:not(.esta-fijada) .boton--linea {
    color: #fff;
    border-color: rgba(255,255,255,.5);
    background: transparent;
}
.cabecera:not(.esta-fijada) .boton--linea:hover {
    background: rgba(255,255,255,.14);
    border-color: #fff;
}

/* El menú desplegable de móvil sí es un panel blanco, así que sus enlaces
   se quedan en tinta aunque la barra esté arriba. */
@media (max-width: 900px) {
    .cabecera:not(.esta-fijada) .menu.abierto a { color: var(--tinta); }
    .cabecera:not(.esta-fijada) .menu.abierto a:hover { color: var(--tinta-tenue); }
}
.cabecera-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
/* El logotipo ya lleva el nombre dibujado, así que la marca es solo la
   imagen: no hay texto al lado que pueda descuadrarse. */
.marca { display: flex; align-items: center; }
.marca img { height: 42px; width: auto; display: block; }
@media (max-width: 480px) { .marca img { height: 34px; } }

.menu { display: flex; align-items: center; gap: 30px; }
.menu a { font-size: .9rem; color: var(--tinta-suave); transition: color .2s ease; }
.menu a:hover { color: var(--tinta); }

.acciones { display: flex; align-items: center; gap: 10px; }

.boton-menu {
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 5px;
    background: none; border: 0; cursor: pointer;
}
.boton-menu span {
    display: block; width: 20px; height: 1.5px;
    background: var(--tinta); border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
}
.boton-menu[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
.boton-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.2px) rotate(-45deg); }

@media (max-width: 900px) {
    .menu {
        position: absolute;
        top: calc(100% + 8px); left: 20px; right: 20px;
        flex-direction: column; align-items: stretch; gap: 4px;
        padding: 14px;
        background: #fff;
        border: 1px solid var(--linea);
        border-radius: var(--radio);
        box-shadow: 0 18px 40px rgba(0,0,0,.10);
        display: none;
    }
    .menu.abierto { display: flex; }
    .menu a { padding: 11px 12px; border-radius: 12px; }
    .menu a:hover { background: var(--papel-hueso); }
    .boton-menu { display: flex; }
    .acciones .boton--linea { display: none; }
}

/* --------------------------------------------------------------------------
   Hero con vídeo
   -------------------------------------------------------------------------- */
.hero { padding: 12px; }
.hero-marco {
    position: relative;
    height: min(88vh, 860px);
    border-radius: var(--radio);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
}
.hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* Velo: el titular tiene que leerse pase lo que pase en el vídeo. */
.hero-velo {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.55) 100%);
}
.hero-texto {
    position: relative;
    max-width: 900px;
    padding: 0 24px;
    text-align: center;
    color: #fff;
}
.hero-texto .display { color: #fff; }
.hero-texto .entradilla { color: rgba(255,255,255,.88); margin: 22px auto 0; }
.hero-botones {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center; margin-top: 34px;
}

/* --------------------------------------------------------------------------
   Rejillas
   -------------------------------------------------------------------------- */
.rejilla { display: grid; gap: 20px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
    .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
}

.cabecera-seccion { max-width: 760px; margin-bottom: 56px; }
.cabecera-seccion .entradilla { margin-top: 18px; }
.cabecera-seccion--centro { margin-left: auto; margin-right: auto; text-align: center; }
.cabecera-seccion--centro .entradilla { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */
.tarjeta {
    padding: 32px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fff;
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease;
}
.tarjeta:hover {
    transform: translateY(-4px);
    border-color: #d0d0d0;
    box-shadow: 0 20px 44px -22px rgba(0,0,0,.22);
}
.tarjeta h3 {
    font-size: 1.2rem; font-weight: 500; letter-spacing: -0.03em;
    color: var(--tinta); margin: 0 0 10px;
}
.tarjeta p { font-size: .95rem; line-height: 1.55; color: var(--tinta-tenue); margin: 0; }

.tarjeta-icono {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    border-radius: 13px;
    background: var(--papel-hueso);
}
.tarjeta-icono svg { width: 22px; height: 22px; }

/* Tarjeta oscura, para destacar */
.tarjeta--oscura { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.tarjeta--oscura h3 { color: #fff; }
.tarjeta--oscura p { color: rgba(255,255,255,.72); }
.tarjeta--oscura .tarjeta-icono { background: rgba(255,255,255,.12); }

/* --------------------------------------------------------------------------
   Cifras
   -------------------------------------------------------------------------- */
.cifra {
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}
.cifra-pie {
    margin-top: 12px;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--tinta-tenue);
    max-width: 26ch;
}

/* --------------------------------------------------------------------------
   Paquetes
   -------------------------------------------------------------------------- */
.paquete {
    display: flex; flex-direction: column;
    padding: 32px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fff;
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.paquete:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -22px rgba(0,0,0,.22); }
.paquete--destacado { border-color: var(--tinta); border-width: 2px; }

.paquete-nombre {
    font-family: 'Chivo Mono', monospace;
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--tinta-tenue); margin-bottom: 14px;
}
.paquete-precio {
    font-size: 2.6rem; font-weight: 300; letter-spacing: -0.05em;
    color: var(--tinta); line-height: 1;
}
.paquete-precio small { font-size: .95rem; font-weight: 400; color: var(--tinta-tenue); letter-spacing: 0; }
.paquete-lista { list-style: none; margin: 24px 0; padding: 0; flex: 1; }
.paquete-lista li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .93rem; line-height: 1.5; color: var(--tinta-tenue);
    padding: 7px 0;
}
.paquete-lista svg { flex: none; margin-top: 3px; }
/* El dato del plan: se lee, pero no compite con el precio. */
.paquete-dato {
    font-size: .8rem; line-height: 1.5; color: var(--tinta-tenue);
    padding-top: 16px; margin-bottom: 20px;
    border-top: 1px solid var(--linea);
}
.paquete-dato strong { color: var(--tinta); font-weight: 500; }
.etiqueta-destacado {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: var(--tinta); color: #fff;
    font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--linea); }
.faq-fila { border-bottom: 1px solid var(--linea); }
.faq-boton {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding: 26px 0;
    background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 1.05rem; font-weight: 400;
    letter-spacing: -0.02em; color: var(--tinta); text-align: left;
}
.faq-mas { position: relative; width: 16px; height: 16px; flex: none; }
.faq-mas::before, .faq-mas::after {
    content: ""; position: absolute; inset: 50% 0 auto 0;
    height: 1.5px; background: var(--tinta); transform: translateY(-50%);
    transition: transform .3s ease, opacity .3s ease;
}
.faq-mas::after { transform: translateY(-50%) rotate(90deg); }
.faq-boton[aria-expanded="true"] .faq-mas::after { transform: translateY(-50%); opacity: 0; }

.faq-respuesta { height: 0; overflow: hidden; transition: height .35s cubic-bezier(.22,1,.36,1); }
.faq-respuesta[hidden] { display: block; }
.faq-respuesta-interior { padding-bottom: 26px; }
.faq-respuesta p { font-size: .98rem; line-height: 1.6; color: var(--tinta-tenue); margin: 0 0 10px; max-width: 70ch; }
.faq-respuesta p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Llamada final
   -------------------------------------------------------------------------- */
.cta-caja {
    position: relative;
    padding: clamp(56px, 9vw, 120px) 40px;
    border-radius: var(--radio);
    background: var(--tinta);
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.cta-caja .titular { color: #fff; }
.cta-caja .entradilla { color: rgba(255,255,255,.75); margin: 20px auto 0; }
.cta-botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.cta-brillo {
    position: absolute; width: 60%; aspect-ratio: 1;
    left: 50%; top: 110%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(227,28,121,.34), transparent 62%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.pie { padding: 80px 40px 40px; border-top: 1px solid var(--linea); }
.pie-rejilla {
    display: grid; gap: 40px;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    margin-bottom: 56px;
}
@media (max-width: 900px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie-rejilla { grid-template-columns: 1fr; } }

.pie h4 {
    font-family: 'Chivo Mono', monospace;
    font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tinta-tenue); margin: 0 0 16px; font-weight: 500;
}
.pie-enlaces { display: flex; flex-direction: column; gap: 11px; }
.pie-enlaces a { font-size: .93rem; color: var(--tinta-suave); transition: color .2s ease; }
.pie-enlaces a:hover { color: var(--tinta); }

.pie-legal {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    justify-content: space-between; align-items: center;
    padding-top: 26px; border-top: 1px solid var(--linea);
    font-size: .84rem; color: var(--tinta-tenue);
}

/* Aviso legal destacado: va antes del pie y tiene que verse. */
.aviso-legal {
    padding: 22px 26px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--papel-hueso);
    font-size: .84rem;
    line-height: 1.6;
    color: var(--tinta-tenue);
}
.aviso-legal strong { color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   Aparición al hacer scroll

   Igual que en el resto de nuestros sitios: si el guion fallara, el contenido
   se ve completo. Solo se oculta cuando <html> tiene la clase .js.
   -------------------------------------------------------------------------- */
.js [data-revelar] {
    opacity: 0;
    transform: translateY(26px);
}
.js [data-revelar].visible {
    opacity: 1;
    transform: none;
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}

/* Entrada escalonada de las hijas de una rejilla. */
.js [data-revelar-hijos] > * { opacity: 0; transform: translateY(22px); }
.js [data-revelar-hijos].visible > * {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-revelar],
    .js [data-revelar-hijos] > * { opacity: 1; transform: none; transition: none; }
    .tarjeta:hover, .paquete:hover { transform: none; }
}

/* Accesibilidad */
.salto-contenido {
    position: absolute; left: 20px; top: -60px; z-index: 200;
    padding: 12px 22px; border-radius: var(--radio-boton);
    background: var(--tinta); color: #fff; font-size: .9rem;
    transition: top .2s ease;
}
.salto-contenido:focus { top: 20px; }

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--rosa);
    outline-offset: 3px;
    border-radius: 6px;
}
.visualmente-oculto {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   SEGUNDA PARTE — bloques calcados de la plantilla Vectura

   Aquí viven las secciones que dan el aire de la plantilla original: la banda
   de la cita, la marquesina, los bloques grandes de función con su maqueta,
   las dos secciones negras (una de tarjetas y otra con el panel pegajoso) y
   el pie ancho.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sección negra
   -------------------------------------------------------------------------- */
.seccion--negra {
    background: var(--tinta);
    color: #fff;
}
.seccion--negra .titular,
.seccion--negra .subtitular { color: #fff; }
.seccion--negra .entradilla { color: rgba(255,255,255,.68); }
.seccion--negra .antetitulo { color: rgba(255,255,255,.5); }
/* Las tarjetas de dentro son blancas, así que ahí el texto vuelve a la tinta:
   si no, los rótulos "Paso 01" salían en blanco sobre blanco. */
.seccion--negra .tarjeta .antetitulo,
.seccion--negra .tarjeta--clara .antetitulo { color: var(--tinta-tenue); }

/* --------------------------------------------------------------------------
   Banda de la cita
   Bloque de apertura: una frase grande, quién la dice y tres datos.
   -------------------------------------------------------------------------- */
.cita-grande {
    font-size: clamp(1.5rem, 3.1vw, 2.6rem);
    font-weight: 300;
    line-height: 1.28;
    letter-spacing: -0.04em;
    color: var(--tinta);
    margin: 0;
    max-width: 22ch;
}
.cita-firma { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.cita-firma img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.cita-firma p { margin: 0; font-size: .92rem; color: var(--tinta); }
.cita-firma span { display: block; font-size: .84rem; color: var(--tinta-tenue); }

.banda-datos {
    display: grid;
    gap: 40px;
    align-content: center;
    padding-left: clamp(0px, 4vw, 60px);
}
.banda-datos > div { border-top: 1px solid var(--linea); padding-top: 20px; }
.banda-datos .cifra { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.banda-datos .cifra-pie { max-width: 34ch; }

/* --------------------------------------------------------------------------
   Marquesina
   Cinta que se desliza sola. La lista va duplicada en el HTML para que el
   bucle no tenga costura visible.
   -------------------------------------------------------------------------- */
.marquesina {
    overflow: hidden;
    /* Se difumina en los bordes para que no parezca cortada a cuchillo. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquesina-pista {
    display: flex;
    width: max-content;
    animation: desfilar 38s linear infinite;
}
.marquesina:hover .marquesina-pista { animation-play-state: paused; }
.marquesina-grupo { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.marquesina-grupo span {
    display: inline-flex; align-items: center; gap: 12px;
    white-space: nowrap;
    font-size: clamp(1.05rem, 1.8vw, 1.5rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--tinta-tenue);
}
.marquesina-grupo span::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--rosa); flex: none;
}
@keyframes desfilar { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Bloques grandes de función
   Texto a un lado, maqueta al otro; se alternan en cada bloque.
   -------------------------------------------------------------------------- */
.funcion {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    padding: clamp(40px, 5vw, 72px) 0;
    border-top: 1px solid var(--linea);
}
.funcion:first-of-type { border-top: 0; }
/* En los pares se invierte el orden: así la página no se lee en zigzag plano. */
.funcion--invertida .funcion-texto { order: 2; }
.funcion-etiqueta {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 15px 7px 11px;
    border: 1px solid var(--linea); border-radius: 999px;
    font-size: .78rem; color: var(--tinta-suave);
    margin-bottom: 22px;
}
.funcion-etiqueta svg { width: 15px; height: 15px; }
.funcion-texto h3 {
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 400; letter-spacing: -0.045em; line-height: 1.15;
    color: var(--tinta); margin: 0 0 18px;
}
.funcion-texto p { font-size: 1.02rem; line-height: 1.6; color: var(--tinta-tenue); margin: 0; max-width: 52ch; }
.funcion-lista { list-style: none; margin: 22px 0 0; padding: 0; }
.funcion-lista li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .95rem; line-height: 1.5; color: var(--tinta-tenue); padding: 6px 0;
}
.funcion-lista svg { flex: none; margin-top: 3px; }

/* --- La maqueta: una ventanita de la aplicación, dibujada con CSS --- */
.maqueta {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fff;
    box-shadow: 0 30px 70px -40px rgba(0,0,0,.35);
    overflow: hidden;
}
.maqueta-barra {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 20px; border-bottom: 1px solid var(--linea);
    background: var(--papel-hueso);
    font-size: .82rem; color: var(--tinta-suave);
}
.maqueta-barra strong { font-weight: 500; }
.maqueta-cuerpo { padding: 8px 20px 20px; }
.maqueta-fila {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid var(--linea);
    font-size: .88rem;
}
.maqueta-fila:last-child { border-bottom: 0; }
.maqueta-icono {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    background: var(--papel-hueso);
    display: flex; align-items: center; justify-content: center;
}
.maqueta-icono svg { width: 17px; height: 17px; }
/* Solo el bloque de texto crece. Sin el :not(), esta regla también pillaba
   al icono (que también es un div) y lo estiraba a lo ancho de la fila. */
.maqueta-fila > div:not(.maqueta-icono) { flex: 1; min-width: 0; }
.maqueta-fila p { margin: 0; color: var(--tinta); }
.maqueta-fila small { color: var(--tinta-tenue); font-size: .8rem; }
.maqueta-valor { font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.pastilla {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .72rem; white-space: nowrap;
    background: var(--papel-hueso); color: var(--tinta-tenue);
}
.pastilla--ok { background: #e7f6ec; color: #1a7f3c; }
.pastilla--espera { background: #fdf1dd; color: #8a5a10; }
/* La barra de progreso de la maqueta del panel. */
.barra { height: 6px; border-radius: 999px; background: var(--linea); overflow: hidden; margin-top: 8px; }
.barra i { display: block; height: 100%; border-radius: 999px; background: var(--tinta); }

/* --------------------------------------------------------------------------
   Rejilla de tarjetas con foto (sección negra nº 1)
   Una foto alta a la izquierda y tarjetas claras al lado.
   -------------------------------------------------------------------------- */
.rejilla-foto {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr;
    gap: 20px;
}
.tarjeta-foto {
    position: relative;
    border-radius: var(--radio);
    overflow: hidden;
    min-height: 460px;
    background: #1a1a1a;
    margin: 0;
}
.tarjeta-foto img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.tarjeta-foto:hover img { transform: scale(1.05); }
.tarjeta-foto figcaption {
    position: absolute; inset: auto 0 0 0;
    padding: 28px;
    background: linear-gradient(transparent, rgba(0,0,0,.82));
    color: #fff;
}
.tarjeta-foto h3 { font-size: 1.35rem; font-weight: 400; letter-spacing: -0.03em; margin: 0 0 8px; }
.tarjeta-foto p { font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.8); margin: 0; }

/* Tarjeta clara dentro de la sección negra */
.tarjeta--clara {
    background: #fafafa; border-color: #fafafa;
    display: flex; flex-direction: column;
    min-height: 460px;
}
.tarjeta--clara h3 { font-size: 1.45rem; font-weight: 400; letter-spacing: -0.035em; margin: 0 0 14px; }
.tarjeta--clara p { font-size: .95rem; line-height: 1.6; }
.tarjeta--clara .tarjeta-icono { background: #fff; border: 1px solid var(--linea); }
.tarjeta--clara:hover { border-color: #fafafa; }

/* --------------------------------------------------------------------------
   Panel pegajoso (sección negra nº 2)
   El panel de la izquierda se queda quieto mientras las tarjetas de la
   derecha pasan por delante. Es el efecto de la plantilla original.
   -------------------------------------------------------------------------- */
.pegajoso {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 20px;
    align-items: start;
}
.pegajoso-panel {
    position: sticky;
    top: 92px;                 /* justo debajo de la cabecera fija */
    border-radius: var(--radio);
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: flex-start;
    background: #1a1a1a;
}
.pegajoso-panel img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.pegajoso-panel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.6) 100%);
}
.pegajoso-texto { position: relative; z-index: 1; padding: clamp(28px, 3.4vw, 46px); color: #fff; }
.pegajoso-texto h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 400; letter-spacing: -0.045em; line-height: 1.14;
    margin: 0 0 18px; color: #fff;
}
.pegajoso-texto p { font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0; max-width: 40ch; }
.pegajoso-texto .boton { margin-top: 28px; }

.pegajoso-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pegajoso-tarjetas .tarjeta { min-height: 300px; }

/* --------------------------------------------------------------------------
   Bloque de cifras destacadas (fondo oscuro, dentro de sección clara)
   -------------------------------------------------------------------------- */
.destacado-oscuro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: clamp(32px, 4vw, 56px);
    border-radius: var(--radio);
    background: var(--tinta);
    color: #fff;
}
.destacado-oscuro h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 400; letter-spacing: -0.045em; line-height: 1.16;
    margin: 0 0 18px; color: #fff;
}
.destacado-oscuro p { color: rgba(255,255,255,.72); line-height: 1.6; margin: 0 0 14px; }
.destacado-oscuro .cifra { color: #fff; }
.destacado-oscuro .cifra-pie { color: rgba(255,255,255,.6); }
.destacado-cifras { display: grid; gap: 32px; align-content: center; }
.destacado-cifras > div { border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; }

/* --------------------------------------------------------------------------
   Pie ancho, al estilo de la plantilla
   -------------------------------------------------------------------------- */
.pie-titular {
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 300; letter-spacing: -0.05em; line-height: 1.1;
    color: var(--tinta); margin: 0 0 30px;
}
.pie-contacto { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 64px; }
.pie-contacto a {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .95rem; color: var(--tinta-suave);
}
.pie-contacto a:hover { color: var(--tinta); }
.pie-contacto svg { width: 16px; height: 16px; }

/* La barra de acciones del menú solo existe en móvil. */
.menu-acciones { display: none; }

/* ==========================================================================
   MÓVIL
   La plantilla original en móvil hace tres cosas: el vídeo del hero ocupa
   toda la pantalla sin márgenes, la cabecera se queda solo con el logo y el
   botón de menú, y los botones pasan a ancho completo apilados.
   ========================================================================== */
@media (max-width: 900px) {
    /* --- Cabecera --- */
    .cabecera { padding: 10px 0; }
    /* Con el menú abierto la barra deja de ser transparente: si no, el panel
       blanco flotaría sobre el vídeo con el logo en blanco encima. */
    .cabecera.esta-fijada,
    .cabecera.menu-abierto {
        background: rgba(255,255,255,.95);
        backdrop-filter: blur(14px);
        box-shadow: 0 1px 0 var(--linea);
    }
    .cabecera.menu-abierto:not(.esta-fijada)::before { opacity: 0; }
    .cabecera.menu-abierto .boton-menu span { background: var(--tinta); }

    /* Arriba solo van el logo y la hamburguesa, como en la plantilla. La
       llamada a la acción vive dentro del menú desplegable. */
    .acciones .boton--oscuro { display: none; }

    .menu {
        top: calc(100% + 6px); left: 12px; right: 12px;
        padding: 12px;
        border-radius: 18px;
    }
    .menu a { padding: 14px 12px; font-size: 1rem; }
    .menu-acciones {
        display: flex; flex-direction: column; gap: 8px;
        margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--linea);
    }
    .menu-acciones .boton { justify-content: center; width: 100%; }

    /* Estos dos botones viven DENTRO del panel blanco del menú, así que las
       reglas de "cabecera arriba del todo" (texto y borde en blanco, pensadas
       para leerse sobre el vídeo) los dejarían invisibles. Aquí vuelven a su
       aspecto normal. */
    .cabecera:not(.esta-fijada) .menu.abierto .menu-acciones .boton--linea {
        color: var(--tinta);
        border-color: var(--linea);
    }
    .cabecera:not(.esta-fijada) .menu.abierto .menu-acciones .boton--oscuro {
        color: #fff;
    }

    /* --- Hero a sangre --- */
    .hero { padding: 0; }
    .hero-marco {
        height: 100svh;
        min-height: 560px;
        border-radius: 0;
    }
    .hero-texto { padding: 0 22px; }
    .hero-texto .display { font-size: clamp(2.4rem, 12vw, 3.4rem); }
    .hero-texto .entradilla { font-size: 1rem; }
    .hero-botones {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 30px;
    }
    .hero-botones .boton { justify-content: center; padding: 16px 24px; font-size: .95rem; }

    /* --- Resto de bloques --- */
    .funcion { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
    .funcion--invertida .funcion-texto { order: 0; }

    .rejilla-foto { grid-template-columns: 1fr; }
    .tarjeta-foto, .tarjeta--clara { min-height: 340px; }

    /* En móvil no hay dos columnas que valgan: el efecto pegajoso se apaga y
       todo se apila, que es lo que hace la plantilla original. */
    .pegajoso { grid-template-columns: 1fr; }
    /* Relativo, NO estático: la foto de dentro va en posición absoluta y con
       el panel estático se escaparía al bloque contenedor inicial, es decir,
       se estiraría sobre toda la página. */
    .pegajoso-panel { position: relative; min-height: 420px; }
    .pegajoso-tarjetas { grid-template-columns: 1fr; }
    .pegajoso-tarjetas .tarjeta { min-height: 0; }

    .destacado-oscuro { grid-template-columns: 1fr; }

    .banda-datos { padding-left: 0; grid-template-columns: 1fr 1fr; gap: 26px; }
    .cita-grande { max-width: none; }

    .cta-botones { flex-direction: column; align-items: stretch; }
    .cta-botones .boton { justify-content: center; }
}

@media (max-width: 560px) {
    .banda-datos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TERCERA PARTE — bloques calcados uno a uno de la plantilla
   ========================================================================== */

/* --------------------------------------------------------------------------
   Panel de la cita (el primer bloque tras el hero)

   Caja de fondo hueso con esquinas redondeadas: antetítulo arriba, la frase
   enorme ocupando dos tercios, la firma alineada abajo a la derecha y, más
   abajo, tres tarjetas blancas con el rótulo arriba y el número gigante
   pegado al fondo.
   -------------------------------------------------------------------------- */
.cita-panel {
    background: var(--papel-hueso);
    border-radius: var(--radio);
    padding: clamp(32px, 4.5vw, 76px);
}
.cita-panel > .antetitulo { margin-bottom: clamp(36px, 4vw, 64px); }

.cita-cuerpo {
    display: grid;
    grid-template-columns: 1.75fr 1fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: end;
}
.cita-grande {
    font-size: clamp(1.9rem, 4.3vw, 3.5rem);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -0.045em;
    color: var(--tinta);
    margin: 0;
    max-width: 20ch;
}
/* La firma, en monoespaciada y en mayúsculas, igual que la plantilla. */
.cita-autor {
    font-family: 'Chivo Mono', ui-monospace, monospace;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    line-height: 1.9;
    margin: 0 0 18px;
}
.cita-autor strong { display: block; color: var(--tinta); font-weight: 500; }
.cita-autor img { height: 26px; width: auto; margin-top: 14px; }

.cita-tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: clamp(44px, 6vw, 96px);
}
.cita-tarjeta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    min-height: 260px;
    padding: 26px 28px;
    border-radius: var(--radio);
    background: #fff;
}
.cita-tarjeta > p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--tinta-tenue);
    max-width: 26ch;
}
.cita-tarjeta .cifra { font-size: clamp(2.6rem, 4.6vw, 4rem); }

/* --------------------------------------------------------------------------
   Aparición suave del fondo negro

   El velo blanco que tapa la sección se desvanece cuando el bloque entra en
   pantalla, así que el negro «llega» en vez de aparecer de golpe. Va detrás
   del contenido gracias al contexto de apilado propio (isolation).
   -------------------------------------------------------------------------- */
.seccion--negra { position: relative; isolation: isolate; }
.js .seccion--negra[data-fondo]::before {
    content: "";
    position: absolute; inset: 0;
    z-index: -1;
    background: var(--papel);
    transition: opacity 1s cubic-bezier(.22,1,.36,1);
}
.js .seccion--negra[data-fondo].visible::before { opacity: 0; }

/* --------------------------------------------------------------------------
   Panel con foto y tarjeta oscura encima ("Nuestra razón de ser")
   -------------------------------------------------------------------------- */
.panel-foto {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 660px;
    padding: clamp(18px, 2.2vw, 32px);
    border-radius: var(--radio);
    overflow: hidden;
    background: #1a1a1a;
}
.panel-foto > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.panel-tarjeta {
    position: relative;
    width: min(440px, 100%);
    padding: clamp(26px, 2.8vw, 40px);
    border-radius: var(--radio);
    background: var(--tinta);
    color: #fff;
}
.panel-tarjeta h2 {
    font-size: clamp(1.5rem, 2.3vw, 2.05rem);
    font-weight: 400; letter-spacing: -0.04em; line-height: 1.16;
    margin: 0 0 16px; color: #fff;
}
.panel-tarjeta > p {
    font-size: .97rem; line-height: 1.6;
    color: rgba(255,255,255,.72); margin: 0;
}
.panel-lista { margin: 28px 0 0; }
.panel-lista > div {
    display: flex; gap: 13px;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.16);
}
.panel-lista svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.panel-lista h3 { font-size: .95rem; font-weight: 500; margin: 0 0 4px; color: #fff; }
.panel-lista p { font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.66); margin: 0; }
.panel-tarjeta .boton { width: 100%; justify-content: center; margin-top: 26px; }

/* --------------------------------------------------------------------------
   Ilustraciones animadas

   Una por cada bloque de "Qué recibes". Van dibujadas a mano en SVG y
   animadas con CSS: nada de librerías ni de GIF. Si el sistema pide menos
   movimiento, se quedan quietas (ver el bloque de prefers-reduced-motion).
   -------------------------------------------------------------------------- */
.ilustracion {
    display: block;
    width: 100%;
    height: 148px;
    background: linear-gradient(180deg, var(--papel-hueso), #fff);
    border-bottom: 1px solid var(--linea);
}
.ilustracion svg { width: 100%; height: 100%; display: block; }

/* El vapor del café: tres hilos que suben y se desvanecen. */
.vapor { animation: subir-vapor 3.2s ease-in-out infinite; transform-origin: center bottom; }
.vapor:nth-of-type(2) { animation-delay: .5s; }
.vapor:nth-of-type(3) { animation-delay: 1s; }
@keyframes subir-vapor {
    0%   { opacity: 0; transform: translateY(6px)  scaleY(.85); }
    35%  { opacity: .85; }
    100% { opacity: 0; transform: translateY(-16px) scaleY(1.15); }
}

/* Los granos que caen dentro de la taza. */
.grano { animation: caer-grano 2.8s ease-in infinite; }
.grano:nth-of-type(2) { animation-delay: .9s; }
.grano:nth-of-type(3) { animation-delay: 1.7s; }
@keyframes caer-grano {
    0%   { opacity: 0; transform: translateY(-22px); }
    20%  { opacity: 1; }
    70%  { opacity: 1; transform: translateY(14px); }
    100% { opacity: 0; transform: translateY(18px); }
}

/* Trazo que se dibuja solo (la red de la academia). */
.trazo {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: dibujar 3s cubic-bezier(.65,0,.35,1) infinite;
}
.trazo:nth-of-type(2) { animation-delay: .35s; }
.trazo:nth-of-type(3) { animation-delay: .7s; }
@keyframes dibujar {
    0%   { stroke-dashoffset: 220; }
    45%  { stroke-dashoffset: 0; }
    85%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Nodos que laten. */
.nodo { animation: latir 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nodo:nth-of-type(2) { animation-delay: .3s; }
.nodo:nth-of-type(3) { animation-delay: .6s; }
.nodo:nth-of-type(4) { animation-delay: .9s; }
@keyframes latir {
    0%, 100% { transform: scale(1);   opacity: .85; }
    50%      { transform: scale(1.35); opacity: 1; }
}

/* Barras que crecen (el panel de actividad). */
.barra-anim { transform-box: fill-box; transform-origin: center bottom; animation: crecer 2.6s cubic-bezier(.22,1,.36,1) infinite; }
.barra-anim:nth-of-type(2) { animation-delay: .18s; }
.barra-anim:nth-of-type(3) { animation-delay: .36s; }
.barra-anim:nth-of-type(4) { animation-delay: .54s; }
.barra-anim:nth-of-type(5) { animation-delay: .72s; }
@keyframes crecer {
    0%      { transform: scaleY(.15); }
    45%     { transform: scaleY(1); }
    85%     { transform: scaleY(1); }
    100%    { transform: scaleY(.15); }
}

/* La moneda que gira sobre sí misma. */
.moneda { transform-box: fill-box; transform-origin: center; animation: girar 4s ease-in-out infinite; }
@keyframes girar {
    0%, 100% { transform: scaleX(1); }
    50%      { transform: scaleX(.12); }
}

/* --------------------------------------------------------------------------
   Móvil de los bloques nuevos
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .cita-cuerpo { grid-template-columns: 1fr; align-items: start; }
    .cita-tarjetas { grid-template-columns: 1fr; }
    .cita-tarjeta { min-height: 0; gap: 26px; }

    .panel-foto {
        min-height: 0;
        padding: 0;
        display: block;
        background: none;
        overflow: visible;
    }
    /* En vertical la foto va arriba y la tarjeta debajo: encajar una tarjeta
       de 440 px sobre la foto en un móvil no deja ver ni la foto ni el texto. */
    .panel-foto > img {
        position: relative;
        height: 300px;
        border-radius: var(--radio);
    }
    .panel-tarjeta { width: 100%; margin-top: -40px; }

    .ilustracion { height: 118px; }
}

@media (prefers-reduced-motion: reduce) {
    .vapor, .grano, .trazo, .nodo, .barra-anim, .moneda,
    .marquesina-pista { animation: none; }
    .trazo { stroke-dashoffset: 0; }
    .js .seccion--negra[data-fondo]::before { display: none; }
}