/* =====================================================================
   DELONE TECH — LANDING PAGE (dark, automaze-inspired)
   Prefix: .lp-*
   ===================================================================== */

:root {
    --lp-max: 1200px;
    --lp-gap: clamp(1rem, 2vw, 1.5rem);
    --lp-gap-lg: clamp(1.5rem, 3vw, 2.5rem);
    --lp-section-y: clamp(4rem, 8vw, 7rem);
    --lp-radius: 16px;
    --lp-radius-sm: 10px;
    --lp-font-display: 'Space Grotesk', 'Plus Jakarta Sans', var(--font-heading);
    --lp-font-body: 'Plus Jakarta Sans', var(--font-body);
    --lp-hairline: color-mix(in srgb, var(--border-color) 70%, transparent);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height, 64px) + 16px);
}

main {
    font-family: var(--lp-font-body);
    color: var(--text-primary);
    background: var(--bg-primary);
    /* `clip` evita que se cree un contenedor de scroll que rompa
       `position: sticky` en hijos (caso reseña pinada tras el hero). */
    overflow-x: clip;
}

.lp-container {
    max-width: var(--lp-max);
    margin: 0 auto;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
    position: relative;
}

.lp-accent { color: var(--accent); }

.lp-eyebrow,
.lp-section-eyebrow {
    display: inline-block;
    font-family: var(--lp-font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1rem;
    padding: 0.35rem 0 0.35rem 0;
    position: relative;
}

.lp-section-eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--accent);
    vertical-align: middle;
    margin-right: 0.75rem;
}

.lp-section-title {
    font-family: var(--lp-font-display);
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}

.lp-section-lead {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 60ch;
    margin: 0 0 2.5rem;
}

.lp-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

/* ──────────────── Buttons ──────────────── */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.9rem 1.5rem;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
    position: relative;
    isolation: isolate;
}

.lp-btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 65%, transparent);
}

.lp-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px);
}

.lp-btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.lp-btn-ghost:hover {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--text-primary) 25%, transparent);
}

/* === Botón hero 1 — borde animado rotatorio === */
.lp-btn-rotate {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: none;
    padding: 0.9rem 1.6rem;
    overflow: hidden;
}

.lp-btn-rotate::before {
    content: "";
    position: absolute;
    inset: -80%;
    z-index: -2;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--accent) 90%, white 40%) 40deg,
        var(--accent) 80deg,
        transparent 140deg,
        transparent 360deg
    );
    animation: lp-btn-rotate 3s linear infinite;
}

.lp-btn-rotate::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    background: var(--bg-primary);
    border-radius: inherit;
    z-index: -1;
}

.lp-btn-rotate:hover { transform: translateY(-2px); }
.lp-btn-rotate:hover::before { animation-duration: 1.8s; }

@keyframes lp-btn-rotate {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn-rotate::before { animation: none; }
}

.lp-btn-rotate .lp-btn-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.lp-btn-rotate:hover .lp-btn-arrow {
    transform: translateY(3px);
}

/* === Botón hero 2 — avatares integrados === */
.lp-btn-photo {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--text-primary) 15%, transparent);
    padding: 0.35rem 1.25rem 0.35rem 0.45rem;
    gap: 0.85rem;
}

.lp-btn-photo:hover {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--text-primary) 30%, transparent);
    transform: translateY(-2px);
}

.lp-btn-avatars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.lp-btn-avatars img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-primary);
    background: var(--bg-card);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.lp-btn-avatars img + img {
    margin-left: -12px;
}

.lp-btn-block {
    display: flex;
    width: 100%;
}

.lp-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--lp-font-display);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 0.5rem 0;
    transition: gap 0.18s ease, color 0.18s ease;
}

.lp-link-arrow:hover {
    gap: 0.75rem;
    color: var(--accent-hover);
}

/* =====================================================================
   RESEÑA STAGE — contenedor sticky para la reseña
   ===================================================================== *
   La reseña va OUT of the hero y dentro de `.lp-resena-stage`, un wrapper
   independiente que:
     · Tiene margen negativo para solaparse con el hero (la reseña queda
       visualmente debajo del hero desde scrollY=0).
     · Da espacio de scroll suficiente (altura 300vh) para que la reseña
       sea sticky mientras las letras se iluminan una a una.

   Fases del scroll:
     · 0 → 100vh    : hero sube (flujo normal) cubriendo la reseña.
     · 70vh→180vh   : letras del titular se pintan una a una.
                       Empieza cuando al hero le quedan 30vh por irse.
     · 180vh→220vh  : reseña completa visible con CTA "Habla con los
                       fundadores". PAUSA breve de lectura (~40vh).
     · 220vh→320vh  : Nosotros sube desde abajo cubriendo la reseña,
                       mientras la reseña SUBE lenta (translateY −10vh)
                       y se desvanece en opacidad.
     · 320vh        : Nosotros ya cubre del todo; sticky release. */
.lp-resena-stage {
    position: relative;
    height: 420vh;        /* stage compacto: 40vh pausa + 100vh cover */
    margin-top: -100vh;   /* superpone la etapa sobre el hero */
    z-index: 1;           /* queda detrás del hero (z-index 2) */
    --resena-reveal: 0;
}

/* El .lp-trust dentro de la etapa es sticky. Selector de 2 clases que
   gana en especificidad frente al `.lp-trust { position: relative }`
   de línea ~491. Ya no necesitamos `.lp-has-grid` en la reseña porque
   el grid ahora vive en el wrapper `.lp-page-grid`. */
.lp-resena-stage .lp-trust {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    width: 100%;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .lp-resena-stage {
        height: auto;
        margin-top: 0;
    }
    .lp-resena-stage .lp-trust {
        position: relative;
        top: auto;
        height: auto;
        min-height: 100vh;
    }
}

/* =====================================================================
   1. HERO — fondo invertido respecto al tema general
   (tema oscuro → hero claro; tema claro → hero oscuro)
   ===================================================================== */
.lp-hero {
    /* Tema general oscuro → variables LOCALES del hero en claro.
       Se redefinen --bg-primary / --text-* dentro del hero para que
       títulos, botones, scroll-icon, etc. hereden el esquema invertido
       sin tocar selectores uno a uno. */
    --bg-primary: #f5f5f0;
    --text-primary: #13131f;
    --text-secondary: #4a4a44;
    --text-tertiary: #7a7a72;
    --border-color: #d5d3cc;

    position: relative;           /* necesario para z-index */
    z-index: 2;                   /* encima de .lp-resena-stage (z-index 1) */
    min-height: 100vh;
    height: 100vh;                /* exacto para que la reseña (con margin -100vh) se solape bien */
    padding: calc(var(--nav-height, 64px) + clamp(2rem, 4vw, 3rem)) 0 clamp(4rem, 7vw, 6rem);
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: var(--text-primary);
    background:
        radial-gradient(at 50% 50%, rgba(0, 0, 0, 0.04), transparent 70%),
        linear-gradient(160deg, #f4efe6 0%, #eae4d5 50%, #f4efe6 100%);
}

[data-theme="light"] .lp-hero {
    /* Tema general claro → hero oscuro: restauramos variables de dark. */
    --bg-primary: #13131f;
    --text-primary: #ffffff;
    --text-secondary: #e0e0ea;
    --text-tertiary: #b0b0c0;
    --border-color: #2a2a3c;

    background:
        radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.04), transparent 70%),
        linear-gradient(160deg, #0a0a14 0%, #0d0d1c 50%, #0a0a14 100%);
}

/* Halo de acento estático (sin animación para no penalizar rendimiento) */
.lp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 30% at 25% 25%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%),
        radial-gradient(35% 30% at 75% 70%, color-mix(in srgb, #6b7ae6 7%, transparent) 0%, transparent 55%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}

.lp-hero-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.lp-hero-copy {
    max-width: 1100px;
}

.lp-hero-eyebrow {
    font-family: var(--lp-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--accent));
    margin: 0 0 1.5rem;
    padding-left: 0.8rem;
    border-left: 2px solid var(--accent);
    line-height: 1.2;
}

.lp-hero-title {
    font-family: var(--lp-font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.75rem;
}

.lp-hero-line {
    display: block;
}

.lp-hero-emph {
    color: var(--accent);
}

.lp-hero-emph em {
    font-style: italic;
    color: var(--accent);
    font-weight: 700;
}

/* Rotating words — el span .measure reserva ancho (invisible) para que el
   .lp-rotating se ajuste a la palabra más larga sin truncar */
.lp-rotating {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    height: 1.2em;
    padding-bottom: 0.08em;
    overflow: hidden;
    line-height: inherit;
}

.lp-rotating-measure {
    display: inline-block;
    visibility: hidden;
    white-space: nowrap;
    font-style: italic;
    font-weight: 600;
}

.lp-rotating-word {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    opacity: 0;
    transform: translateY(60%);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.22,.9,.3,1);
    white-space: nowrap;
    color: var(--text-primary);
    font-style: italic;
    font-weight: 600;
}

.lp-rotating-word.is-active {
    opacity: 1;
    transform: translateY(0);
}

.lp-rotating-word.is-leaving {
    opacity: 0;
    transform: translateY(-60%);
}

.lp-hero-sub {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 62ch;
    margin: 0 0 2rem;
}

.lp-hero-sub strong {
    color: var(--text-primary);
    font-weight: 700;
}

.lp-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.lp-hero-team {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.lp-avatars {
    display: flex;
    align-items: center;
}

.lp-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    background: var(--bg-card);
}

.lp-avatar + .lp-avatar {
    margin-left: -14px;
}

.lp-hero-team-text,
.lp-cta-team-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* =====================================================================
   2. RESEÑA — "Absolutamente espectaculares" — sección completa 100vh
   ===================================================================== */
.lp-trust {
    position: relative;
    min-height: 100vh;
    padding: clamp(5rem, 10vw, 9rem) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-primary) 92%, var(--bg-secondary));
    overflow: hidden;
    isolation: isolate;
}

/* Difuminado inferior que funde la reseña con la siguiente sección */
.lp-trust::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: clamp(6rem, 14vh, 11rem);
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--bg-primary) 92%, var(--bg-secondary)) 100%
    );
    pointer-events: none;
    z-index: 3;
}

.lp-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1.5rem;
    text-align: center;
    position: relative;
    z-index: 2;

    /* --resena-reveal va de 0 a 1 durante la fase de iluminado de letras.
       JS lo actualiza desde initCurtain() según el progreso del scroll.

       Stagger y gain elegidos para animación letra por letra DISTINTA:
         · stagger 0.033 → cada letra arranca al 3.3% del recorrido siguiente.
         · gain 33 → cada letra tarda un 3% en llegar a opacidad plena.
       Con 28 letras en el titular, la última empieza a ~0.89 y termina
       prácticamente al borde del 1.0. Efecto muy nítido, una a una. */
    --resena-reveal: 0;
    --lp-letter-stagger: 0.033;
    --lp-letter-gain: 33;

    /* --resena-exit (0→1) durante la fase de cobertura (scroll 220→320vh).
       JS lo actualiza desde initCurtain(). La reseña SUBE lenta
       (-10vh en todo el recorrido → mucho más despacio que el scroll
       natural de Nosotros) y se desvanece en opacidad simultáneamente.
       Efecto: la reseña parece flotar hacia arriba y apagarse mientras
       Nosotros la va tapando desde abajo. */
    --resena-exit: 0;
    transform: translateY(calc(var(--resena-exit, 0) * -10vh));
    opacity: calc(1 - var(--resena-exit, 0));
    will-change: transform, opacity;
}

.lp-letter {
    display: inline;
    opacity: clamp(
        0.18,
        calc(0.18 + 0.82 * (var(--resena-reveal, 0) - var(--lp-i, 0) * var(--lp-letter-stagger, 0.033)) * var(--lp-letter-gain, 33)),
        1
    );
    color: inherit;
    transition: opacity 0.08s linear;
    will-change: opacity;
}

/* La cita NO va letra a letra: fade-in en bloque cuando el titular ya
   casi ha terminado de pintarse (reveal >= 0.85). */
.lp-trust-quote {
    opacity: clamp(
        0,
        calc((var(--resena-reveal, 0) - 0.85) * 6.67),
        1
    );
    transition: opacity 0.15s linear;
}

.lp-trust-attr {
    opacity: clamp(
        0,
        calc((var(--resena-reveal, 0) - 0.95) * 20),
        1
    );
    transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
    .lp-letter,
    .lp-trust-quote,
    .lp-trust-attr {
        opacity: 1;
    }
}

.lp-stars {
    display: inline-flex;
    gap: 0.35rem;
    color: #f5a623;
    font-size: 1rem;
}

.lp-trust-headline {
    font-family: var(--lp-font-display);
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--text-primary);
    margin: 0.5rem 0 1.5rem;
    max-width: 22ch;
}

.lp-trust-quote-mark {
    color: var(--accent);
    font-weight: 400;
    margin: 0 0.15em;
    font-family: var(--lp-font-display);
}

.lp-trust-quote {
    margin: 0 auto;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.55;
    color: var(--text-primary);
    max-width: 58ch;
    font-weight: 400;
}

.lp-trust-attr {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-family: var(--lp-font-display);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--text-tertiary);
}

.lp-trust-attr strong {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

/* =====================================================================
   GRID DECORATIVO — marco con 4 líneas discontinuas + 2 raíles sólidos
   + 8 cuadrados hatcheados en las intersecciones
   ===================================================================== */
:root {
    --lp-dot-spacing: 22px;                      /* distancia entre puntos de la rejilla */
    /* Posiciones del marco en vw para que el cuadrado (width=gap-x) y la altura
       entre las dos horizontales (bottom=gap-x) coincidan en píxeles. */
    --lp-grid-x-outer: 9vw;
    --lp-grid-x-outer-2: calc(100vw - 9vw);
    --lp-grid-x-inner: 12vw;
    --lp-grid-x-inner-2: calc(100vw - 12vw);
    --lp-grid-gap-x: calc(var(--lp-grid-x-inner) - var(--lp-grid-x-outer));
    /* Color del marco — en modo oscuro usa el beige del header en reposo
       (#f5f5f0); en modo claro, el azul oscuro del header (#13131f). */
    --lp-grid-color: #f5f5f0;
    --lp-grid-line: color-mix(in srgb, var(--lp-grid-color) 32%, transparent);
    --lp-grid-line-solid: color-mix(in srgb, var(--lp-grid-color) 48%, transparent);
    /* Trazos discontinuos más espaciados pero sutiles */
    --lp-grid-dash: 6px;
    --lp-grid-gap: 10px;
    /* Diagonales de los cuadrados del marco usan el mismo color que las
       líneas verticales/horizontales para mantener unidad visual. */
    --lp-grid-hatch-color: var(--lp-grid-line);
}

[data-theme="light"] {
    --lp-grid-color: #13131f;
    --lp-grid-line: color-mix(in srgb, var(--lp-grid-color) 28%, transparent);
    --lp-grid-line-solid: color-mix(in srgb, var(--lp-grid-color) 45%, transparent);
    --lp-grid-hatch-color: var(--lp-grid-line);
}

@media (max-width: 1280px) {
    :root {
        --lp-grid-x-outer: 7vw;
        --lp-grid-x-outer-2: calc(100vw - 7vw);
        --lp-grid-x-inner: 9.5vw;
        --lp-grid-x-inner-2: calc(100vw - 9.5vw);
    }
}

@media (max-width: 960px) {
    :root {
        --lp-grid-x-outer: 5vw;
        --lp-grid-x-outer-2: calc(100vw - 5vw);
        --lp-grid-x-inner: 7.5vw;
        --lp-grid-x-inner-2: calc(100vw - 7.5vw);
    }
}

@media (max-width: 640px) {
    :root {
        --lp-grid-x-outer: 2.5vw;
        --lp-grid-x-outer-2: calc(100vw - 2.5vw);
        --lp-grid-x-inner: 4.5vw;
        --lp-grid-x-inner-2: calc(100vw - 4.5vw);
    }
}

.lp-has-grid {
    position: relative;
}

/* Page grid — wrapper que envuelve todas las secciones después del hero
   y pinta las 4 verticales de forma continua hasta el footer.
   `display: flow-root` crea un nuevo bloque de formato que impide que
   el margin-top negativo del .lp-resena-stage colapse hacia arriba y
   termine tapando al hero. */
.lp-page-grid {
    position: relative;
    display: flow-root;
}

/* Secciones directas del page-grid deben quedar POR ENCIMA
   de las verticales (z-index 1) para que el contenido no quede tapado. */
.lp-page-grid > section {
    position: relative;
    z-index: 2;
}

/* El resena-stage es la excepción: debe quedar DETRÁS del hero (z-index
   2) para que al cargar la página el hero tape a la reseña. Según
   avanza el scroll, el hero sube y la reseña (sticky dentro del stage)
   queda a la vista. */
.lp-page-grid > .lp-resena-stage {
    position: relative;
    z-index: 1;
}

/* Contenido por encima de las líneas. Aplicamos z-index SOLO al
   container (no a cada descendiente, porque eso rompería el
   `position: absolute` de elementos como `.lp-rotating-word`).
   El container crea stacking context y sus hijos se pintan encima
   de los verticales sin necesidad de z-index propio. */
.lp-has-grid .lp-container,
.lp-has-grid .lp-page-container {
    position: relative;
    z-index: 3;
    /* El contenido debe quedar CONTENIDO entre los raíles verticales
       internos (.lp-gl--rail-l/-r). Forzamos padding inline ≥ inner rail
       para que nada se salga por los lados. max-width: 100% evita que
       el .lp-max del base lo haga centrado con padding menor. */
    max-width: 100%;
    padding-left: calc(var(--lp-grid-x-inner) + clamp(0.5rem, 1.5vw, 1.5rem));
    padding-right: calc(var(--lp-grid-x-inner) + clamp(0.5rem, 1.5vw, 1.5rem));
}

/* Líneas del marco. z-index 3 para que las verticales floten por
   encima del fondo opaco de Nosotros (section @ z-index 2) y se
   mantengan visibles a través de TODAS las secciones — incluido el
   momento en que Nosotros sube tapando la reseña. Los raíles viven
   en los bordes del contenido, no se solapan con el texto. */
.lp-gl {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}

/* Horizontales discontinuas a todo el ancho del viewport. */
.lp-gl--top,
.lp-gl--bottom,
.lp-gl--upper {
    left: 0;
    right: 0;
    height: 1px;
    background-image: repeating-linear-gradient(
        to right,
        var(--lp-grid-line) 0,
        var(--lp-grid-line) var(--lp-grid-dash),
        transparent var(--lp-grid-dash),
        transparent calc(var(--lp-grid-dash) + var(--lp-grid-gap))
    );
}
.lp-gl--top    { top: 0; }
.lp-gl--bottom { bottom: 0; }
.lp-gl--upper  { bottom: var(--lp-grid-gap-x); }

/* Verticales exteriores discontinuas */
.lp-gl--left,
.lp-gl--right {
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--lp-grid-line) 0,
        var(--lp-grid-line) var(--lp-grid-dash),
        transparent var(--lp-grid-dash),
        transparent calc(var(--lp-grid-dash) + var(--lp-grid-gap))
    );
}
.lp-gl--left { left: var(--lp-grid-x-outer); }
.lp-gl--right { left: var(--lp-grid-x-outer-2); }

/* Raíles interiores sólidos */
.lp-gl--rail-l,
.lp-gl--rail-r {
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--lp-grid-line-solid);
}
.lp-gl--rail-l { left: var(--lp-grid-x-inner); }
.lp-gl--rail-r { left: var(--lp-grid-x-inner-2); }

/* Cuadrados rellenos con diagonales en las esquinas inferiores.
   width = gap entre vertical discontinua y rail sólido; height = mismo
   (cuadrado perfecto). La cara inferior apoya en la horizontal de abajo. */
.lp-gh {
    position: absolute;
    bottom: 0;
    width: var(--lp-grid-gap-x);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 2;
    background-image: repeating-linear-gradient(
        45deg,
        var(--lp-grid-hatch-color) 0,
        var(--lp-grid-hatch-color) 1px,
        transparent 1px,
        transparent 6px
    );
}

.lp-gh--bl { left: var(--lp-grid-x-outer); }
.lp-gh--br { left: var(--lp-grid-x-inner-2); }

/* =====================================================================
   DOTS ANIMADOS — solo en la sección con .lp-has-dots
   ===================================================================== */
.lp-has-dots { position: relative; }

.lp-dots {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Solo entre los raíles sólidos interiores */
    left: var(--lp-grid-x-inner);
    right: calc(100% - var(--lp-grid-x-inner-2));
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.lp-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-primary) 18%, transparent);
    transform: translate(-50%, -50%);
    transition: background 0.6s ease, transform 0.6s ease;
}

.lp-dot.is-dark {
    background: var(--text-primary);
    transform: translate(-50%, -50%) scale(1.4);
}

[data-theme="light"] .lp-dot {
    background: color-mix(in srgb, var(--text-primary) 22%, transparent);
}
[data-theme="light"] .lp-dot.is-dark {
    background: var(--text-primary);
}

/* =====================================================================
   3. NOSOTROS — grid con texto + collage
   ===================================================================== */
.lp-about {
    /* Sin padding-top: el header "01 / NOSOTROS" arranca justo en el
       borde superior de la sección. La cobertura de los 100vh del
       overlap con el stage la aporta `.lp-about::before`. */
    padding: 0;
    overflow: visible;

    /* Efecto "aplastamiento": Nosotros se solapa sobre el último tramo
       del stage (margin-top: -100vh) y queda por encima (z-index 2 por
       defecto sobre el stage z-index 1). Fondo opaco para tapar los
       dots de la reseña. */
    margin-top: -100vh;
    margin-bottom: clamp(4rem, 8vw, 8rem);
    position: relative;
    background: var(--bg-primary);
}

/* Extensión invisible de bg-primary que cubre los 100vh del overlap
   con el stage de la reseña SIN forzar al box de Nosotros a ser 100vh
   (que creaba un hueco visual bajo el contenido en viewports altos).
   z-index: -1 → queda detrás del contenido; stacking context de la
   sección la posiciona por encima del stage (z-index 1). */
.lp-about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: var(--bg-primary);
    z-index: -1;
    pointer-events: none;
}

.lp-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    position: relative;
}

@media (max-width: 960px) {
    .lp-about-grid {
        grid-template-columns: 1fr;
    }
}

.lp-about-text { max-width: 60ch; }

.lp-about-title {
    font-size: clamp(2.2rem, 4.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
}

.lp-strike {
    position: relative;
    color: color-mix(in srgb, var(--text-primary) 40%, transparent);
    font-weight: 600;
    font-style: normal;
}
.lp-strike::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    top: 68%;
    height: 2px;
    background: currentColor;
    /* --line-progress va de 0 → 1 según scroll (seteado por JS). */
    transform: rotate(-4deg) scaleX(var(--line-progress, 0));
    transform-origin: left center;
    pointer-events: none;
}

/* Fallback si no hay JS o prefers-reduced-motion: línea visible. */
.lp-strike.is-revealed {
    --line-progress: 1;
}

.lp-underline {
    position: relative;
    color: var(--text-primary);
    font-weight: 700;
}
.lp-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    transform: scaleX(var(--line-progress, 0));
    transform-origin: left;
}

.lp-underline.is-revealed {
    --line-progress: 1;
}

.lp-about-lead {
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 2rem;
    max-width: 52ch;
}

.lp-about-body {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.lp-about-body p {
    margin: 0;
    line-height: 1.65;
    color: var(--text-secondary);
    font-size: 1rem;
}

.lp-about-body strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Collage de imágenes (estilo automaze) */
.lp-about-images {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 0 2.5rem;
    padding-top: 1rem;
}

.lp-about-img {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.55);
    aspect-ratio: 1/1;
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.9s ease, transform 1s cubic-bezier(.22,.9,.3,1);
}

.lp-about-img.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.lp-about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.lp-about-img:hover img {
    transform: scale(1.03);
}

.lp-about-img--1 {
    grid-column: 2;
    grid-row: 1;
    margin-top: -2rem;
    transition-delay: 0.15s;
}
.lp-about-img--2 {
    grid-column: 1;
    grid-row: 1;
    margin-top: 2.5rem;
    transition-delay: 0.3s;
}
.lp-about-img--3 {
    grid-column: 1;
    grid-row: 2;
    margin-top: 2.5rem;
    transition-delay: 0.45s;
}
.lp-about-img--4 {
    grid-column: 2;
    grid-row: 2;
    margin-top: -2rem;
    transition-delay: 0.6s;
}

.lp-about-footnote {
    grid-column: 1 / -1;
    margin: 1.5rem 0 0;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    text-align: center;
    font-family: var(--lp-font-display);
    font-style: italic;
}

@media (max-width: 600px) {
    .lp-about-images {
        gap: 0.75rem;
    }
    .lp-about-img--1, .lp-about-img--2, .lp-about-img--3, .lp-about-img--4 {
        margin-top: 0;
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: 3/2;
    }
}

/* --- Team grid legacy (por si hay otras páginas) ---------------------- */
.lp-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--lp-gap-lg);
    margin-top: 2.5rem;
    max-width: 780px;
}

.lp-team-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lp-team-photo {
    position: relative;
    overflow: hidden;
    border-radius: var(--lp-radius);
    background: var(--bg-card);
    aspect-ratio: 4/5;
    box-shadow: var(--shadow-md);
}

.lp-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.lp-team-card:hover .lp-team-photo img {
    transform: scale(1.04);
}

.lp-team-name {
    font-family: var(--lp-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--text-primary);
}

.lp-team-role {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

/* =====================================================================
   4. SERVICES (carousel)
   ===================================================================== */
.lp-services {
    padding: var(--lp-section-y) 0 0;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* La sección servicios necesita un stacking context propio por encima de
   las líneas verticales del page-grid (z-index: 3), para que las cards
   queden visibles por delante de los raíles. El z-index va en la sección
   porque `.lp-page-grid > section` ya la sitúa en z-index: 2 y las cards
   no pueden escapar de ese stacking context por sí solas. Especificidad
   (0,2,0) para ganar a `.lp-page-grid > section` (0,1,1). */
.lp-page-grid > .lp-services {
    z-index: 4;
}

/* Intro de servicios: texto ocupa ~70%, flechas del carrusel a la derecha */
.lp-services-intro {
    flex: 0 1 70%;
    max-width: 70%;
    min-width: 0;
}

.lp-services .lp-section-head {
    align-items: flex-end; /* botones abajo, pegados al carrusel */
}

.lp-carousel-ctrls {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
    margin-left: auto;
    /* Empujar las flechas hacia abajo para que queden más cerca del
       carrusel de cards (sin afectar al layout del título). */
    transform: translateY(22px);
}

.lp-carousel-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.lp-carousel-arrow {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-carousel-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-1px);
}

.lp-carousel-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.lp-carousel {
    display: flex;
    gap: 1.5rem;
    /* overflow hidden en ambos ejes para que NO aparezca ningún scrollbar
       (el mix overflow-x:hidden + overflow-y:visible provocaba un
       overflow-y:auto automático del navegador → barra vertical indeseada).
       El scroll programático (scrollBy) sigue funcionando. Padding vertical
       generoso para que el glow de las cards no se recorte al clipping. */
    overflow: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 3rem 0 3.5rem;
    /* Primera card separada del rail — con aire a su izquierda */
    padding-inline-start: calc(var(--lp-grid-x-inner) + clamp(1.5rem, 3vw, 3rem));
    /* Margen al final para que todas las cards puedan avanzar con clicks sucesivos */
    padding-inline-end: max(6rem, calc(100vw - var(--lp-grid-x-inner) - min(440px, 86vw)));
    scroll-padding-inline-start: calc(var(--lp-grid-x-inner) + clamp(1.5rem, 3vw, 3rem));
    margin: 0;
    max-width: 100%;
    /* Ocultar scrollbar horizontal */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Líneas discontinuas arriba y abajo del área de cards */
    background-image:
        repeating-linear-gradient(
            to right,
            var(--lp-grid-line) 0,
            var(--lp-grid-line) var(--lp-grid-dash),
            transparent var(--lp-grid-dash),
            transparent calc(var(--lp-grid-dash) + var(--lp-grid-gap))
        ),
        repeating-linear-gradient(
            to right,
            var(--lp-grid-line) 0,
            var(--lp-grid-line) var(--lp-grid-dash),
            transparent var(--lp-grid-dash),
            transparent calc(var(--lp-grid-dash) + var(--lp-grid-gap))
        );
    /* Las líneas horizontales justo 1px fuera de los bordes de las cards
       para que no queden pisadas por el redondeo de subpíxeles o el glow.
       Valores alineados al padding vertical (3rem top, 3.5rem bottom). */
    background-position: left calc(3rem - 1px), left calc(100% - 3.5rem + 1px);
    background-size: 100% 1px, 100% 1px;
    background-repeat: no-repeat;
    /* Leve difuminación en ambos bordes */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        black 40px,
        black calc(100% - 40px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        black 40px,
        black calc(100% - 40px),
        transparent 100%
    );
}

.lp-carousel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.lp-service-card {
    position: relative;
    /* flex-basis:auto + width explícito → `width` es fiablemente
       transicionable (flex-basis dentro del shorthand `flex:` no anima
       de forma consistente entre navegadores). */
    flex: 0 0 auto;
    width: min(440px, 86vw);
    scroll-snap-align: start;
    background: var(--bg-card);
    border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--lp-radius);
    padding: 2rem 2rem 1.5rem;
    min-height: 360px;
    /* Flex column → .lp-service-compact (flex:1) rellena la altura para
       que el CTA con margin-top:auto quede pegado al fondo y TODAS las
       cards alineen su botón a la misma altura. */
    display: flex;
    flex-direction: column;
    isolation: isolate;
    cursor: pointer;
    box-shadow:
        0 0 24px -2px color-mix(in srgb, var(--accent) 16%, transparent),
        0 10px 28px -14px color-mix(in srgb, var(--accent) 22%, transparent);
    /* Stretch horizontal: la card ancla su lado izquierdo y se estira
       sólo hacia la derecha. Ease-out cúbico rápido → arranca con
       movimiento visible y se asienta con suavidad. */
    transform-origin: left center;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                min-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.3s ease,
                transform 0.25s ease;
    will-change: width, min-height;
}

.lp-service-card:active:not(.is-expanded) {
    transform: scale(0.985);
}

.lp-service-card.is-expanded {
    cursor: default;
}

/* Líneas discontinuas verticales pegadas exactamente a los bordes de la
   card, sobresaliendo un poco por arriba y por abajo — estilo automaze. */
.lp-service-card::before,
.lp-service-card::after {
    content: "";
    position: absolute;
    top: -1.75rem;
    bottom: -1.75rem;
    width: 1px;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--lp-grid-line) 0,
        var(--lp-grid-line) var(--lp-grid-dash),
        transparent var(--lp-grid-dash),
        transparent calc(var(--lp-grid-dash) + var(--lp-grid-gap))
    );
    pointer-events: none;
}

.lp-service-card::before { left: -1px; }
.lp-service-card::after  { right: -1px; }

.lp-service-card.is-expanded {
    width: min(700px, 92vw);
    min-height: 420px;
    /* Mismo efecto de luz que en la card no clickada — sin cambio de glow
       al expandirse, solo cambia el tamaño. */
    box-shadow:
        0 0 24px -2px color-mix(in srgb, var(--accent) 16%, transparent),
        0 10px 28px -14px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Compact y detail se superponen dentro de la card. El swap de texto es
   instantáneo tanto al abrir como al cerrar — lo que cambia es sólo la
   anchura del card (efecto "se estira"). Sin animaciones ni crossfade. */
.lp-service-compact,
.lp-service-detail {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-height: 0;
}

.lp-service-compact {
    flex: 1;
}

.lp-service-detail {
    /* Overlay absoluto al expandir — respeta el padding del card. */
    position: absolute;
    inset: 2rem 2rem 1.5rem 2rem;
    display: none;
}

.lp-service-card.is-expanded .lp-service-compact {
    display: none;
}

.lp-service-card.is-expanded .lp-service-detail {
    display: flex;
}

@media (prefers-reduced-motion: reduce) {
    .lp-service-card,
    .lp-service-card.is-expanded .lp-service-detail {
        animation: none;
        transition: none;
    }
}

.lp-service-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    z-index: 2;
}

.lp-service-close:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
}

.lp-service-card.is-expanded .lp-service-close { display: inline-flex; }

.lp-service-lead {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    font-style: italic;
}

.lp-service-detail-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.lp-service-detail-body p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.lp-service-highlight {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.lp-service-highlight strong {
    color: var(--accent);
    font-weight: 700;
}

.lp-service-book {
    margin-top: auto;
    padding-top: 1.25rem;
    font-family: var(--lp-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    transition: gap 0.25s ease;
}

.lp-service-book:hover {
    gap: 0.6rem;
}

.lp-service-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.lp-service-title {
    font-family: var(--lp-font-display);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0.5rem 0 0;
    color: var(--text-primary);
}

/* La CTA reserva espacio de botón desde el principio (padding y gap
   estáticos) para que el hover sólo cambie colores — sin layout shift
   que empuje el contenido de la card ni desplace letras. Compensamos
   el padding horizontal con margin-left negativo para que el texto
   quede alineado con el resto del contenido en reposo. */
.lp-service-cta {
    margin-top: auto;
    margin-left: -1.2rem;
    font-family: var(--lp-font-display);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.55rem;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: background 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease;
}

/* Al pasar el ratón sobre la card, "Saber más" se convierte en botón */
.lp-service-card:hover:not(.is-expanded) .lp-service-cta,
.lp-service-card:focus-within:not(.is-expanded) .lp-service-cta {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.lp-service-desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.55;
}

.lp-service-list {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lp-service-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.lp-service-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 700;
}

/* =====================================================================
   5. CÓMO TRABAJAMOS — zigzag con cards uniformes y conectores L
   ===================================================================== */
.lp-process {
    padding: 0;
    margin-bottom: clamp(4rem, 8vw, 8rem);
    position: relative;
}

/* Grid 2 columnas × 5 filas. Zigzag L-R-L-R-L tipo Automaze.
   Ancho uniforme + altura fija → todas las cards mismo tamaño. */
.lp-steps-zig {
    --col-gap: clamp(2rem, 5vw, 4rem);
    --row-gap: clamp(2.5rem, 5vw, 4rem);
    --card-h: 10rem;
    --step-line-color: color-mix(in srgb, var(--step-color, #888) 50%, transparent);
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 26rem);
    column-gap: var(--col-gap);
    row-gap: var(--row-gap);
    justify-content: center;
    max-width: 100%;
    overflow: visible;
}

/* Asignación explícita fila+columna → zigzag L-R-L-R-L */
.lp-step:nth-child(1) { grid-row: 1; grid-column: 1; }
.lp-step:nth-child(2) { grid-row: 2; grid-column: 2; }
.lp-step:nth-child(3) { grid-row: 3; grid-column: 1; }
.lp-step:nth-child(4) { grid-row: 4; grid-column: 2; }
.lp-step:nth-child(5) { grid-row: 5; grid-column: 1; }

/* Card con altura fija → todas iguales. Fondo y texto adaptados al tema
   (blanco + texto oscuro en modo claro; oscuro + texto claro en modo oscuro). */
.lp-step {
    --step-color: var(--accent);
    position: relative;
    width: 100%;
    height: var(--card-h);
    padding: clamp(1.25rem, 2vw, 1.6rem);
    background: var(--bg-card);
    border: 2px solid color-mix(in srgb, var(--step-color) 35%, transparent);
    border-radius: 16px;
    overflow: visible;
}

/* Animación al scrollear — cada card se observa individualmente y
   re-anima cada vez que entra/sale del viewport (gestionado por
   initStepsScroll() en index.js). Slide-up + fade + subtle scale. */
.lp-step.animate-on-scroll {
    opacity: 0;
    transform: translateY(42px) scale(0.96);
    transition:
        opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lp-step.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .lp-step.animate-on-scroll,
    .lp-step.animate-on-scroll.animated {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Colores por paso */
.lp-step--pink   { --step-color: #ec7a8a; }
.lp-step--orange { --step-color: #e59454; }
.lp-step--green  { --step-color: #7cc79a; }
.lp-step--blue   { --step-color: #7aa5d4; }

/* Dots: todos centrados en el lateral/borde correspondiente.
   Base: dot size 10px, anclado al lado con -5px y centrado al 50% del otro eje. */
.lp-step-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--step-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--step-color) 22%, transparent);
    z-index: 3;
}

/* OUT dots (salida hacia siguiente card) — en el lateral inner, centrado vertical */
.lp-step--left .lp-step-dot--out {
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}
.lp-step--right .lp-step-dot--out {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

/* IN dots (entrada desde card anterior) — en el borde superior, centrado horizontal */
.lp-step .lp-step-dot--in {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}

/* Excepción: Card 1 (primera) — IN en el lateral izquierdo (desde rail izq) */
.lp-step:first-child .lp-step-dot--in {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

/* =====================================================================
   Conectores L-shape entre cards — ::before de la card receptora.
   Exit: centro lateral (50% de altura) de la card previa.
   Entry: centro superior (50% de ancho) de la card actual.
   · L→R (Cards 2, 4): path RIGHT→DOWN → shape ⌐ (border-top + border-right)
   · R→L (Cards 3, 5): path LEFT→DOWN → shape ┐ (border-top + border-left)
   ===================================================================== */
.lp-step--right:not(:first-child)::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--col-gap));
    top: calc(-1 * var(--row-gap) - var(--card-h) / 2);
    width: calc(var(--col-gap) + 50%);
    height: calc(var(--row-gap) + var(--card-h) / 2);
    border-top: 1px dashed var(--step-line-color);
    border-right: 1px dashed var(--step-line-color);
    border-top-right-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

.lp-step--left:not(:first-child)::before {
    content: "";
    position: absolute;
    right: calc(-1 * var(--col-gap));
    top: calc(-1 * var(--row-gap) - var(--card-h) / 2);
    width: calc(var(--col-gap) + 50%);
    height: calc(var(--row-gap) + var(--card-h) / 2);
    border-top: 1px dashed var(--step-line-color);
    border-left: 1px dashed var(--step-line-color);
    border-top-left-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

/* =====================================================================
   Líneas a los railes externos (izq → Card 1, Card 5 → der).
   · Card 1 ::before = horizontal dashed desde el rail izq al lado izq de Card 1
   · Card 5 ::after  = horizontal dashed desde el lado der de Card 5 al rail der
   ===================================================================== */
/* Card 1 ::before: línea dashed del rail izq (solid inner) al lado izq de Card 1.
   Card 1 left edge ≈ 50vw − col-gap/2 − 26rem. El −8px compensa la mitad
   del scrollbar vertical para que no se pase del rail. */
.lp-step:first-child::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: calc(50vw - var(--lp-grid-x-inner) - 26rem - var(--col-gap) / 2 - 8px);
    height: 0;
    border-top: 1px dashed var(--step-line-color);
    transform: translateY(-0.5px);
    pointer-events: none;
    z-index: 1;
}

/* Card 5 ::after: línea dashed del lado der de Card 5 al rail der (solid inner).
   Card 5 right edge ≈ 50vw − col-gap/2 → width = rail_x − card_5_right.
   El +8px compensa la mitad del scrollbar para asegurar que toque el rail. */
.lp-step:last-child::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: calc(var(--lp-grid-x-inner-2) - 50vw + var(--col-gap) / 2 + 8px);
    height: 0;
    border-top: 1px dashed var(--step-line-color);
    transform: translateY(-0.5px);
    pointer-events: none;
    z-index: 1;
}

/* =====================================================================
   Head y contenido
   ===================================================================== */
.lp-step-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.lp-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--step-color) 18%, transparent);
    color: var(--step-color);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.lp-step-title {
    font-family: var(--lp-font-body);
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.25;
    margin: 0;
    color: var(--text-primary);
}

.lp-step-num {
    color: var(--text-tertiary);
    font-weight: 500;
    margin-right: 0.25rem;
}

.lp-step-desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.55;
}

/* Mobile: una sola columna, sin conectores */
@media (max-width: 820px) {
    .lp-steps-zig {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
    }
    .lp-step:nth-child(1),
    .lp-step:nth-child(2),
    .lp-step:nth-child(3),
    .lp-step:nth-child(4),
    .lp-step:nth-child(5) {
        grid-column: 1;
        grid-row: auto;
    }
    .lp-step {
        height: auto;
        min-height: 0;
    }
    .lp-step::before,
    .lp-step::after,
    .lp-step-dot {
        display: none;
    }
}

/* =====================================================================
   6. TESTIMONIALS
   ===================================================================== */
.lp-testimonials {
    /* Banda sutil — mismo tratamiento que la sección D-Apps de Hall of Fame:
       fondo ligeramente más oscuro que la página + hairlines arriba y abajo.
       Rompe la monotonía sin romper la paleta principal. */
    padding: 0 0 var(--lp-section-y);
    background: color-mix(in srgb, var(--text-primary) 2.5%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}

/* Carrusel estilo automaze: un testimonio visible a la vez, con comillas
   decorativas a la izquierda y navegación con puntos abajo. */
.lp-testimonials-viewer {
    position: relative;
    margin-top: 2rem;
    padding: 3rem clamp(1rem, 4vw, 4rem);
}

.lp-testimonials-track {
    position: relative;
    min-height: 260px;
}

.lp-testimonial-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.lp-testimonial-slide.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    position: relative;
}

.lp-testimonial-marks {
    font-family: var(--lp-font-display);
    font-size: clamp(5rem, 8vw, 8rem);
    line-height: 0.8;
    color: color-mix(in srgb, var(--text-primary) 10%, transparent);
    user-select: none;
    align-self: start;
    letter-spacing: -0.08em;
}

.lp-testimonial-quote {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: clamp(1.15rem, 1.6vw, 1.6rem);
    line-height: 1.5;
    color: var(--text-primary);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.lp-testimonial-caption {
    grid-column: 2;
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.95rem;
}

.lp-testimonial-name {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--lp-font-display);
    font-size: 1.05rem;
}

.lp-testimonial-role {
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.lp-testimonial-role .fa-google {
    margin-right: 0.35rem;
    color: color-mix(in srgb, var(--accent) 65%, var(--text-tertiary));
}

@media (max-width: 640px) {
    .lp-testimonial-slide {
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
    }
    .lp-testimonial-caption {
        grid-column: 1;
    }
}

/* Dots de paginación: circulares en reposo, pill alargado el activo. */
.lp-testimonials-dots {
    margin-top: 2.25rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.lp-testimonial-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 18%, transparent);
    cursor: pointer;
    transition: width 0.35s cubic-bezier(.22,.9,.3,1),
                background 0.25s ease;
}

.lp-testimonial-dot:hover {
    background: color-mix(in srgb, var(--text-primary) 35%, transparent);
}

.lp-testimonial-dot.is-active {
    width: 30px;
    background: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .lp-testimonial-slide,
    .lp-testimonial-dot {
        transition: none;
    }
}

/* =====================================================================
   7. PRICING — estilo Automaze (intro izq + acordeón der)
   ===================================================================== */
.lp-pricing {
    padding: var(--lp-section-y) 0;
}

.lp-pricing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

/* === LEFT: intro con título + qué incluye === */
.lp-pricing-intro {
    position: sticky;
    top: calc(var(--lp-header-h, 5rem) + 1.5rem);
    padding-left: clamp(0.75rem, 2.5vw, 2rem);
}

.lp-pricing-intro .lp-section-title {
    margin: 0 0 1rem;
}

.lp-pricing-lead {
    margin: 0 0 2.5rem;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 40ch;
}

.lp-pricing-included {
    padding-top: 1.5rem;
    border-top: 1px dashed color-mix(in srgb, var(--text-tertiary) 35%, transparent);
}

.lp-pricing-included-title {
    margin: 0 0 1rem;
    font-family: var(--lp-font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.lp-pricing-included-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1.5rem;
}

.lp-pricing-included-list li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.4;
}

.lp-pricing-included-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 700;
}

/* === RIGHT: acordeón de planes === */
.lp-pricing-plans {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Línea vertical que conecta los extremos izquierdos de todos los
   divisores horizontales del acordeón de planes. */
.lp-pricing-plans::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: color-mix(in srgb, var(--text-tertiary) 22%, transparent);
    pointer-events: none;
}

/* Encabezado de grupo (divisor dentro del acordeón) */
.lp-plan-group {
    margin: 1.75rem 0 0.5rem;
    font-family: var(--lp-font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 1rem 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
    border-top: 1px dashed color-mix(in srgb, var(--text-tertiary) 25%, transparent);
}

.lp-plan-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Cada plan (native <details>) */
.lp-plan {
    border-bottom: 1px solid color-mix(in srgb, var(--text-tertiary) 18%, transparent);
}

.lp-plan:last-of-type {
    border-bottom: 1px solid color-mix(in srgb, var(--text-tertiary) 18%, transparent);
}

.lp-plan-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0.25rem 1.1rem clamp(0.75rem, 1.5vw, 1.25rem);
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease;
}

.lp-plan-summary::-webkit-details-marker { display: none; }

.lp-plan-summary:hover .lp-plan-name { color: var(--accent); }

.lp-plan-name {
    flex: 1;
    font-family: var(--lp-font-body);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: color 0.2s ease;
}

.lp-plan-badge {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-family: var(--lp-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
}

.lp-plan-price {
    font-family: var(--lp-font-body);
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.lp-plan-from {
    font-family: var(--lp-font-display);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    text-transform: lowercase;
    margin-right: 0.2rem;
}

.lp-plan-period {
    color: var(--text-tertiary);
    font-size: 0.82rem;
    font-weight: 500;
}

/* Toggle "+" que rota a "×" (45°) cuando está abierto */
.lp-plan-toggle {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: 0.25rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-plan-toggle::before,
.lp-plan-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--text-secondary);
    transition: background 0.2s ease;
}

.lp-plan-toggle::before {
    width: 14px;
    height: 1.5px;
    transform: translate(-50%, -50%);
}

.lp-plan-toggle::after {
    width: 1.5px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.lp-plan.is-open .lp-plan-toggle {
    transform: rotate(45deg);
}

.lp-plan-summary:hover .lp-plan-toggle::before,
.lp-plan-summary:hover .lp-plan-toggle::after {
    background: var(--accent);
}

/* Wrapper grid para animar height:auto de forma fluida (misma técnica
   que el FAQ). `grid-template-rows: 0fr → 1fr` + fade. Sin saltos al cerrar. */
.lp-plan-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.42s cubic-bezier(.22, 1, .3, 1),
                opacity 0.32s ease;
}

.lp-plan.is-open .lp-plan-wrapper {
    grid-template-rows: 1fr;
    opacity: 1;
}

.lp-plan-wrapper > .lp-plan-body {
    min-height: 0;
    overflow: hidden;
}

/* Body expandido */
.lp-plan-body {
    padding: 0 0 1.5rem clamp(0.75rem, 1.5vw, 1.25rem);
}

.lp-plan-body p {
    margin: 0 0 0.85rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 55ch;
}

.lp-plan-body p strong {
    color: var(--text-primary);
    font-weight: 600;
}

.lp-plan-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 1.25rem;
}

.lp-plan-body ul li {
    position: relative;
    padding-left: 1.3rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.lp-plan-body ul li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 700;
}

.lp-plan-meta {
    margin: 0 0 1rem !important;
    font-size: 0.85rem !important;
    color: var(--text-tertiary) !important;
    font-style: italic;
}

.lp-plan-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--accent);
    font-family: var(--lp-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.lp-plan-link:hover {
    gap: 0.55rem;
    transform: translateX(4px);
    opacity: 0.85;
}

/* Mobile: una sola columna, intro deja de ser sticky */
@media (max-width: 860px) {
    .lp-pricing-grid {
        grid-template-columns: 1fr;
    }
    .lp-pricing-intro {
        position: static;
    }
    .lp-pricing-included-list {
        grid-template-columns: 1fr;
    }
    .lp-plan-body ul {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   8. FAQ
   ===================================================================== */
.lp-faq {
    /* Banda sutil — igual que `.lp-testimonials`. Sin padding-top para que
       pegue a la sección previa; mantiene padding-bottom propio para que
       el banner CTA interior tenga aire antes del footer. */
    padding-top: 0;
    padding-bottom: clamp(3rem, 6vw, 5rem);
    background: color-mix(in srgb, var(--text-primary) 2.5%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.lp-faq-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--lp-gap-lg);
    /* align-items por defecto = stretch → la celda del título se estira
       hasta ocupar la altura de la fila (igual a la altura de la lista
       de preguntas). Así el título `position: sticky` tiene recorrido
       real y "acompaña" al scroll hasta la última pregunta. */
}

.lp-faq-head {
    position: sticky;
    top: calc(var(--nav-height, 64px) + 24px);
    align-self: start;
}

.lp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lp-faq-item {
    border: 1px solid var(--border-color);
    border-radius: var(--lp-radius-sm);
    background: var(--bg-card);
    padding: 1rem 1.25rem;
    cursor: pointer;
    box-shadow: 0 0 0 0 transparent;
    transition: border-color 0.28s ease,
                background 0.28s ease,
                box-shadow 0.35s ease,
                transform 0.25s cubic-bezier(.22, 1, .3, 1);
}

.lp-faq-item:hover:not(.is-open) {
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 3%, var(--bg-card));
    transform: translateY(-1px);
}

.lp-faq-item.is-open {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
                0 12px 30px -18px color-mix(in srgb, var(--accent) 45%, transparent);
}

.lp-faq-item > summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-right: 0.5rem;
    transition: color 0.22s ease;
}

.lp-faq-item:hover > summary {
    color: var(--accent);
}

.lp-faq-item > summary::-webkit-details-marker {
    display: none;
}

.lp-faq-item > summary::after {
    content: "+";
    font-size: 1.4rem;
    color: var(--accent);
    font-weight: 400;
    transition: transform 0.32s cubic-bezier(.34, 1.4, .5, 1);
    display: inline-block;
    line-height: 1;
    transform-origin: center;
}

.lp-faq-item.is-open > summary::after {
    transform: rotate(135deg) scale(1.05);
}

/* Wrapper grid para animar height:auto de forma fluida.
   grid-template-rows: 0fr → 1fr es la técnica moderna más consistente
   entre navegadores y evita cualquier "doble cierre". */
.lp-faq-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.42s cubic-bezier(.22, 1, .3, 1),
                opacity 0.32s ease;
}

.lp-faq-item.is-open .lp-faq-wrapper {
    grid-template-rows: 1fr;
    opacity: 1;
}

.lp-faq-wrapper > .lp-faq-body {
    min-height: 0;
    overflow: hidden;
}

.lp-faq-body {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--lp-hairline);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =====================================================================
   9. BLOG
   ===================================================================== */
.lp-blog {
    padding: 0 0 4rem;
}

.lp-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--lp-gap-lg);
    margin-top: 1rem;
}

.lp-blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--lp-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.lp-blog-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border-color));
}

.lp-blog-cover {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-secondary);
}

.lp-blog-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.lp-blog-card:hover .lp-blog-cover img {
    transform: scale(1.04);
}

.lp-blog-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.lp-blog-cat {
    font-family: var(--lp-font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
}

.lp-blog-title {
    font-family: var(--lp-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.lp-blog-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.18s ease;
}

.lp-blog-title a:hover {
    color: var(--accent);
}

.lp-blog-excerpt {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.lp-blog-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-family: var(--lp-font-display);
    margin-top: auto;
}

/* =====================================================================
   CTA BANNER — banda grande centrada con pill + avatares
   ===================================================================== */
.lp-cta-banner {
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    text-align: center;
}

.lp-cta-banner-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Variante cuando el banner va dentro de la sección FAQ (sin wrapper
   `.lp-cta-banner-inner`, flex directamente en el banner). Ocupa las
   dos columnas del grid de `.lp-faq-inner` para centrarse bajo la
   lista de preguntas. */
.lp-cta-banner--in-faq {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.lp-cta-banner-title {
    font-family: var(--lp-font-display);
    font-size: clamp(2rem, 5.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    color: var(--text-primary);
    max-width: 20ch;
}

.lp-cta-banner-aside {
    display: block;
    font-size: 0.5em;
    font-weight: 500;
    font-style: italic;
    color: var(--text-tertiary);
    margin-top: 0.35rem;
    letter-spacing: -0.01em;
}

.lp-cta-banner-lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 52ch;
    margin: 0 0 0.75rem;
}

.lp-cta-banner-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.4rem 1.5rem 0.4rem 0.5rem;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-radius: 999px;
    font-family: var(--lp-font-display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.28),
        0 2px 8px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lp-cta-banner-pill:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.35),
        0 3px 10px rgba(0, 0, 0, 0.2);
}

.lp-cta-banner-avatars {
    display: inline-flex;
    align-items: center;
}

.lp-cta-banner-avatars img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--btn-primary-bg);
}

.lp-cta-banner-avatars img + img {
    margin-left: -14px;
}

/* =====================================================================
   10. FINAL CTA + CONTACT FORM
   ===================================================================== */
.lp-cta {
    padding: var(--lp-section-y) 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.lp-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--lp-gap-lg);
    align-items: start;
}

.lp-cta-copy {
    padding-right: 1rem;
}

.lp-cta-title {
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
}

.lp-cta-team {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.lp-contact-form {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--lp-radius);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow-lg);
}

.lp-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.lp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.lp-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lp-field-label {
    font-family: var(--lp-font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.lp-field input,
.lp-field select,
.lp-field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--lp-radius-sm);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    font-family: var(--lp-font-body);
}

.lp-field textarea {
    resize: vertical;
    min-height: 120px;
}

.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.lp-form-footnote {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    text-align: center;
}

.lp-form-footnote a {
    color: var(--accent);
    text-decoration: underline;
}

.lp-flash {
    padding: 0.75rem 1rem;
    border-radius: var(--lp-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.lp-flash-success {
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.lp-flash-error {
    background: color-mix(in srgb, var(--color-error) 14%, transparent);
    color: var(--color-error);
    border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 960px) {
    .lp-faq-inner { grid-template-columns: 1fr; }
    .lp-faq-head { position: static; }
    .lp-cta-inner { grid-template-columns: 1fr; }
    .lp-cta-copy { padding-right: 0; }
}

@media (max-width: 640px) {
    :root { --lp-section-y: 4rem; }
    .lp-hero-title { font-size: clamp(2.25rem, 10vw, 3.5rem); }
    .lp-rotating { min-width: 7ch; }
    .lp-form-row { grid-template-columns: 1fr; }
    .lp-section-head { flex-direction: column; align-items: flex-start; }
    .lp-services-intro { flex: 0 1 100%; max-width: 100%; }
    .lp-carousel-ctrls { align-self: flex-end; }
    .lp-service-card { width: 85vw; }
    .lp-service-card.is-expanded { width: 92vw; }
    .lp-trust-inner { flex-direction: column; gap: 0.5rem; }
}

/* =====================================================================
   LIGHT THEME OVERRIDES
   ===================================================================== */
[data-theme="light"] .lp-hero::before {
    background:
        radial-gradient(60% 40% at 15% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
        radial-gradient(50% 40% at 85% 20%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 65%);
}

[data-theme="light"] .lp-avatar {
    border-color: var(--bg-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="light"] .lp-btn-primary { color: #ffffff; }

/* =====================================================================
   SECTION META — banda "01 / LABEL" a ancho completo con:
   · Líneas discontinuas horizontales top/bottom (MISMO patrón que los
     verticales — mismo dash/gap — vía repeating-linear-gradient).
   · Hatches diagonales en los extremos izquierdo y derecho de la banda
     (espacio entre la vertical discontinua exterior y el rail sólido
     interior del grid), ajustados exactamente a la altura de la banda.
   · Etiqueta "01 / LABEL" separada del rail interior para que "respire".
   Marca visualmente el inicio de cada nueva sección (estilo automaze).
   ===================================================================== */
.lp-section-meta {
    /* Debe ser hijo directo de la <section> (fuera de .lp-container)
       para ocupar el ancho real de la sección (= ancho del viewport sin
       scrollbar), de modo que los hatches y los verticales del grid
       encajen exactamente. */
    width: 100%;
    margin-top: 0;
    margin-bottom: clamp(3rem, 6vw, 5rem);

    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Padding izquierdo = rail interior + separación extra para que la
       etiqueta quede ligeramente más a la derecha del rail, no pegada. */
    padding: 0.85rem clamp(1.5rem, 5vw, 4.5rem) 0.85rem calc(var(--lp-grid-x-inner) + clamp(0.75rem, 2vw, 2rem));

    /* Horizontales = gradient con el MISMO patrón que los verticales
       (dash 5px / gap 7px por defecto). Dos líneas de 1px posicionadas
       arriba y abajo del box. */
    background-image:
        repeating-linear-gradient(
            to right,
            var(--lp-grid-line) 0,
            var(--lp-grid-line) var(--lp-grid-dash),
            transparent var(--lp-grid-dash),
            transparent calc(var(--lp-grid-dash) + var(--lp-grid-gap))
        ),
        repeating-linear-gradient(
            to right,
            var(--lp-grid-line) 0,
            var(--lp-grid-line) var(--lp-grid-dash),
            transparent var(--lp-grid-dash),
            transparent calc(var(--lp-grid-dash) + var(--lp-grid-gap))
        );
    background-position: left top, left bottom;
    background-size: 100% 1px, 100% 1px;
    background-repeat: no-repeat;

    font-family: var(--lp-font-display);
    z-index: 4;
}

/* Hatches diagonales ajustados al 100% de la altura de la banda —
   cubren el espacio entre la vertical discontinua exterior y el rail
   sólido interior, entre las dos horizontales. */
.lp-section-meta::before,
.lp-section-meta::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--lp-grid-gap-x);
    pointer-events: none;
    background-image: repeating-linear-gradient(
        45deg,
        var(--lp-grid-hatch-color, color-mix(in srgb, var(--text-primary) 28%, transparent)) 0 1px,
        transparent 1px 5px
    );
    z-index: -1;
}

/* Ambos hatches se posicionan con `left` usando vw — la MISMA base que
   usan las verticales. Así no hay desfase por el scrollbar (que reduce
   el ancho del containing block pero NO el valor de vw). */
.lp-section-meta::before {
    left: var(--lp-grid-x-outer);
}

.lp-section-meta::after {
    left: var(--lp-grid-x-inner-2);
}

.lp-section-num {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.lp-section-num::after {
    content: " /";
    margin-left: 0.25rem;
    color: var(--text-tertiary);
}

.lp-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

@media (max-width: 960px) {
    .lp-section-meta {
        padding-left: calc(var(--lp-grid-x-inner) + 0.75rem);
    }
}

/* Italic accent used inside section titles (automaze's italic word) */
.lp-accent-italic {
    color: var(--accent);
    font-style: italic;
    font-weight: 600;
}

/* =====================================================================
   HERO — tweaks for automaze-style
   ===================================================================== */
.lp-hero-meta {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.lp-hero-emph em {
    font-style: italic;
    color: var(--accent);
    font-weight: 600;
}

.lp-hero-scroll {
    position: absolute;
    bottom: clamp(1.2rem, 3vw, 2rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    pointer-events: none;
    color: color-mix(in srgb, var(--text-primary) 45%, transparent);
}

.lp-mouse {
    width: 22px;
    height: 34px;
    display: block;
}

.lp-mouse-wheel {
    transform-origin: center;
    animation: lp-mouse-scroll 1.8s ease-in-out infinite;
}

@keyframes lp-mouse-scroll {
    0%   { transform: translateY(0);  opacity: 1; }
    60%  { transform: translateY(8px); opacity: 0; }
    61%  { transform: translateY(0);  opacity: 0; }
    100% { transform: translateY(0);  opacity: 1; }
}

@media (max-width: 760px) {
    .lp-hero-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-mouse-wheel { animation: none; }
}

/* =====================================================================
   SCROLL REVEAL — automaze-style fade + rise
   ===================================================================== */
.lp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(.22,.9,.3,1), transform 0.85s cubic-bezier(.22,.9,.3,1);
    will-change: opacity, transform;
}

.lp-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Slide-in horizontal desde la derecha (usado por la columna de planes
   en la sección de Precios). */
.lp-reveal-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.85s cubic-bezier(.22,.9,.3,1), transform 0.95s cubic-bezier(.22,.9,.3,1);
    will-change: opacity, transform;
}

.lp-reveal-right.is-revealed {
    opacity: 1;
    transform: translateX(0);
}

.lp-reveal-line {
    position: relative;
}

.lp-reveal-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--lp-hairline);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s cubic-bezier(.7,0,.3,1);
}

.lp-reveal-line.is-revealed::before {
    transform: scaleX(1);
}


/* =====================================================================
   HABLA CON NOSOTROS PAGE
   ===================================================================== */
.lp-habla-main {
    padding-top: calc(var(--nav-height, 64px) + clamp(2rem, 5vw, 4rem));
}

.lp-habla-hero {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.lp-habla-title {
    max-width: 18ch;
    margin-bottom: 2rem;
}

.lp-habla-bullets {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem 2rem;
    max-width: 900px;
}

.lp-habla-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.lp-habla-bullets i {
    color: var(--accent);
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.lp-habla-form {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
}

.lp-habla-form-inner {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

@media (max-width: 900px) {
    .lp-habla-form-inner {
        grid-template-columns: 1fr;
    }
}

.lp-habla-side {
    position: sticky;
    top: calc(var(--nav-height, 64px) + 1.5rem);
}

.lp-habla-team {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1rem 0 2rem;
}

.lp-habla-person {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--lp-hairline);
}

.lp-habla-person:last-child {
    border-bottom: 1px solid var(--lp-hairline);
}

.lp-habla-person img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.lp-habla-person figcaption {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.lp-habla-person strong {
    font-family: var(--lp-font-display);
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.lp-habla-person span {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.lp-habla-facts {
    margin: 0;
    padding: 0;
}

.lp-habla-facts div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--lp-hairline);
    font-size: 0.9rem;
}

.lp-habla-facts div:last-child {
    border-bottom: 1px solid var(--lp-hairline);
}

.lp-habla-facts dt {
    font-family: var(--lp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-weight: 600;
}

.lp-habla-facts dd {
    margin: 0;
    color: var(--text-primary);
    text-align: right;
}

.lp-habla-form-title {
    font-family: var(--lp-font-display);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0.5rem 0 2rem;
    color: var(--text-primary);
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lp-rotating-word,
    .lp-service-card,
    .lp-testimonial,
    .lp-plan,
    .lp-blog-card,
    .lp-team-photo img,
    .lp-blog-cover img,
    .lp-btn,
    .lp-carousel-btn,
    .lp-hero-scroll-line {
        transition: none !important;
        animation: none !important;
    }
    .lp-reveal,
    .lp-reveal-line {
        opacity: 1 !important;
        transform: none !important;
    }
    .lp-reveal-line::before {
        transform: scaleX(1) !important;
    }
}

/* =====================================================================
   STICKY CTA — botón flotante "Llámanos" con avatares.
   Aparece al hacer scroll pasado el hero y permanece visible en el resto
   de la página. Inspirado en el pill "Talk to the founders" de automaze.
   ===================================================================== */
.lp-sticky-cta {
    position: fixed;
    bottom: clamp(1rem, 2.5vw, 2rem);
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 90;

    /* Wrapper blanco con borde indigo-950 que contiene avatares en forma
       de pill + pill oscuro, todos a la misma altura, con gap blanco
       entre ellos. En hover, los avatares se contraen a círculos. */
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: calc(100vw - 1rem);
    padding: 6px;
    background: #fff;
    border: 1px solid #1e1b4b;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--lp-font-display);
    cursor: pointer;
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.22,.9,.3,1);
}

.lp-sticky-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* El botón no se desplaza en hover; solo reacciona el pill oscuro y la flecha */

.lp-sticky-cta-avatars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: -32px; /* Guillermo se mete bajo el pill oscuro */
}

.lp-sticky-cta-avatar {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 48px;
    flex-shrink: 0;
}

.lp-sticky-cta-avatar + .lp-sticky-cta-avatar {
    margin-left: -28px; /* Daniel se mete bajo Guillermo */
}

.lp-sticky-cta-avatar img {
    position: absolute;
    top: 2px;
    left: 0;
    width: 58px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 2px #fff;
    transition:
        opacity 0.2s ease,
        width 0.25s cubic-bezier(.4,.0,.2,1),
        left 0.25s cubic-bezier(.4,.0,.2,1);
}

.lp-sticky-cta-avatar:hover {
    z-index: 5;
}

/* En hover, la foto se contrae a círculo centrándose dentro del wrapper
   fijo (no cambia el layout ni desplaza el botón) */
.lp-sticky-cta-avatar:hover img {
    width: 44px;
    left: 7px; /* (58 - 44) / 2 = centrado */
}

/* Al hacer hover sobre una foto, la otra pierde opacidad */
.lp-sticky-cta-avatars:hover .lp-sticky-cta-avatar:not(:hover) img {
    opacity: 0.35;
}

/* Tooltip con nombre y rol */
.lp-sticky-cta-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 7px 13px;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-family: var(--lp-font-display);
    font-size: 0.82rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.lp-sticky-cta-tooltip strong {
    font-weight: 600;
}

.lp-sticky-cta-tooltip span {
    opacity: 0.8;
    font-weight: 400;
}

.lp-sticky-cta-avatar:hover .lp-sticky-cta-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Pill oscuro con el texto — altura total 48px (44 contenido + 2+2 borde) */
.lp-sticky-cta-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: 48px;
    padding: 0 22px 0 44px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.lp-sticky-cta:hover .lp-sticky-cta-label {
    background: #000;
}

/* Texto fijo + flecha que aparece en hover (sin mover nada más) */
.lp-sticky-cta-text {
    display: inline-block;
}

.lp-sticky-cta-arrow {
    display: inline-block;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lp-sticky-cta:hover .lp-sticky-cta-arrow {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .lp-sticky-cta {
        transition: opacity 0.15s linear;
    }
    .lp-sticky-cta-avatar img,
    .lp-sticky-cta-arrow {
        transition: none;
    }
}

/* Pantallas grandes (desktop > portátil): botón más bajo */
@media (min-width: 1440px) {
    .lp-sticky-cta-avatar {
        height: 42px;
    }
    .lp-sticky-cta-avatar img {
        height: 38px;
        width: 50px;
    }
    .lp-sticky-cta-avatar:hover img {
        width: 38px;
        left: 6px; /* (50 - 38) / 2 */
    }
    .lp-sticky-cta-label {
        height: 42px;
        font-size: 14px;
        padding: 0 20px 0 38px;
    }
    .lp-sticky-cta-avatars {
        margin-right: -28px;
    }
    .lp-sticky-cta-avatar + .lp-sticky-cta-avatar {
        margin-left: -24px;
    }
}

/* =====================================================================
   RESPONSIVE — CONSOLIDATED (tablet / laptop / small mobile)
   ===================================================================== */

/* Tablet horizontal / laptops 13-14": reducir paddings y ajustar hero */
@media (max-width: 1280px) {
    .lp-hero-title {
        font-size: clamp(2rem, 5.2vw, 3.2rem);
    }
    .lp-section-title {
        font-size: clamp(1.75rem, 4vw, 3rem);
    }
}

/* Tablet / portátiles pequeños */
@media (max-width: 1024px) {
    :root {
        --lp-section-y: clamp(3rem, 7vw, 5rem);
    }
    .lp-hero-inner {
        gap: 1.5rem;
    }
    .lp-hero-cta {
        flex-wrap: wrap;
    }
    .lp-btn-block {
        flex-direction: column;
        align-items: stretch;
    }
    .lp-btn-block > * {
        width: 100%;
    }
}

/* Móvil pequeño: ajustes finales */
@media (max-width: 480px) {
    .lp-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .lp-hero-title {
        font-size: clamp(1.75rem, 9vw, 2.5rem);
    }
    .lp-section-title {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }
    .lp-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
    .lp-hero-sub {
        font-size: 0.95rem;
    }
    .lp-hero-team {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .lp-trust-inner {
        /* Forzar centrado pleno en móvil pequeño — el default
           `align-items: flex-start` rompía el centrado de la reseña. */
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* =====================================================================
   MOBILE (≤768px) — ajustes específicos
   ===================================================================== */
@media (max-width: 768px) {
    /* HERO: altura adaptable al contenido para que no se corte */
    .lp-hero {
        height: auto;
        min-height: 100vh;
        padding-top: calc(var(--nav-height, 64px) + 1.25rem);
        padding-bottom: clamp(2rem, 6vw, 4rem);
    }

    /* HERO TEXT: permitir wrap agresivo para que nunca se corte. */
    .lp-hero-title,
    .lp-hero-sub {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .lp-hero-sub {
        max-width: 100%;
    }

    /* HERO ROTATING WORDS: permitir multi-línea cuando la frase rotada
       tenga >4 palabras. Hasta ahora `.lp-rotating` era inline-block con
       height fija y nowrap → se cortaba la frase larga. */
    .lp-rotating {
        display: block;
        height: auto;
        min-height: 1.05em;
        overflow: visible;
    }
    .lp-rotating-measure,
    .lp-rotating-word {
        white-space: normal;
    }

    /* RESEÑA: reforzar centrado pleno en móvil */
    .lp-trust-inner {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* PRECIOS: ocultar el tag "POPULAR" en móvil — ocupa espacio y el
       nombre del plan ya basta en la lista compacta. */
    .lp-plan-badge {
        display: none;
    }

    /* SERVICIOS: apilar cards en vertical (sin carrusel horizontal). Las
       cards encajan entre las verticales de la rejilla igual que el resto
       de secciones — con un pelín más de padding lateral que `.lp-container`
       para que no queden pegadas a los bordes. */
    .lp-carousel-ctrls { display: none; }
    .lp-carousel {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        overflow: visible;
        scroll-snap-type: none;
        padding: 1rem clamp(1.5rem, 6vw, 2.5rem);
    }
    .lp-service-card,
    .lp-service-card.is-expanded {
        width: 100%;
        max-width: 26rem;
        min-height: 0;
        scroll-snap-align: none;
    }
    /* En móvil el detail deja de ser absoluto para que la card crezca
       con el contenido y no se corte el texto expandido. */
    .lp-service-detail {
        position: static;
        inset: unset;
    }

    /* Sticky CTA: tooltip centrado en pantalla, no sobre la foto */
    .lp-sticky-cta-avatar .lp-sticky-cta-tooltip {
        position: fixed;
        left: 50%;
        bottom: clamp(4.5rem, 2.5vw + 4rem, 5.5rem);
        transform: translateX(-50%) translateY(4px);
    }
    .lp-sticky-cta-avatar.is-active .lp-sticky-cta-tooltip {
        transform: translateX(-50%) translateY(0);
    }

    /* Sticky CTA: click en avatares activa animación (solo móvil) */
    .lp-sticky-cta-avatar.is-active { z-index: 5; }
    .lp-sticky-cta-avatar.is-active img { width: 44px; left: 7px; }
    .lp-sticky-cta-avatar.is-active ~ .lp-sticky-cta-avatar:not(.is-active) img,
    .lp-sticky-cta-avatar:not(.is-active):has(~ .lp-sticky-cta-avatar.is-active) img { opacity: 0.35; }
    .lp-sticky-cta-avatar.is-active .lp-sticky-cta-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

}

/* Prevenir overflow horizontal por imágenes o contenedores con width grande.
   OJO: no incluir .lp-service-card aquí — tiene width controlado via
   min(440px, 86vw)/min(700px, 92vw) y max-width:100% bloquearía la
   expansión al clicar. */
.lp-hero-inner > *,
.lp-page-grid img,
.lp-testimonial-slide {
    min-width: 0;
    max-width: 100%;
}