/**
 * Perksi · Web pública
 *
 * Voz: tinta de tampón sobre papel de estraza. El objeto de referencia es la
 * tarjeta de sellos de cartón que este producto sustituye.
 * Estrategia de color: Committed. Todo en OKLCH, ningún neutro puro.
 */

/* ------------------------------------------------------------------ Fuentes */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113;
}

@font-face {
    font-family: "Karla";
    src: url("../fonts/karla-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: "Karla";
    src: url("../fonts/karla-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113;
}

/* ------------------------------------------------------------------- Reset */

/* Sin esto, todo lo que lleva `width: 100%` y padding se sale de su caja: los
   botones de las tarjetas de precio se desbordaban por los dos lados. */
.lp, .lp *, .lp *::before, .lp *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------- Tokens */

.lp {
    --paper: oklch(0.965 0.012 78);
    --paper-deep: oklch(0.925 0.020 74);
    --paper-edge: oklch(0.885 0.026 72);
    --ink: oklch(0.225 0.022 62);
    --ink-soft: oklch(0.475 0.024 62);
    --ink-faint: oklch(0.635 0.022 66);
    --stamp: oklch(0.535 0.190 32);
    --stamp-deep: oklch(0.455 0.165 30);
    --stamp-wash: oklch(0.935 0.038 42);
    --green: oklch(0.515 0.115 155);

    /* Superficies oscuras: la tinta es oscura en los dos temas, así que estos
       tokens son fijos. Si heredaran de --paper, en modo oscuro el texto
       quedaría oscuro sobre fondo oscuro. */
    --on-dark: oklch(0.955 0.012 78);
    --on-dark-soft: oklch(0.825 0.018 74);
    --on-dark-faint: oklch(0.700 0.020 72);
    --on-dark-accent: oklch(0.720 0.150 40);

    --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --body: "Karla", ui-sans-serif, system-ui, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --stack: clamp(4rem, 9vw, 8rem);

    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
    line-height: 1.6;
}

/* Grano de papel: textura muy sutil, no una imagen. */
.lp::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.32;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.lp > * {
    position: relative;
    z-index: 1;
}

.lp h1, .lp h2, .lp h3, .lp .display {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-wrap: balance;
    margin: 0;
}

.lp p { margin: 0; }

.lp a { color: inherit; }

.lp-wrap {
    max-width: 74rem;
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.lp-narrow { max-width: 62ch; }

/* -------------------------------------------------------------- Tipografía */

.lp-eyebrow {
    font-family: var(--display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stamp);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.lp-eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    background: var(--stamp);
    flex: 0 0 auto;
}

.lp-h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.25rem); }
.lp-h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.35rem); }
.lp-h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); letter-spacing: -0.02em; }

.lp-lead {
    font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
    color: var(--ink-soft);
    max-width: 46ch;
    line-height: 1.55;
}

.lp-mark {
    background: linear-gradient(transparent 62%, var(--stamp-wash) 62%);
    padding-inline: 0.06em;
}

/* ------------------------------------------------------------------ Botones */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    padding: 1.05rem 1.9rem;
    border: 2px solid var(--ink);
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease);
}

.lp-btn--primary {
    background: var(--stamp);
    border-color: var(--stamp);
    color: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
}

.lp-btn--primary:hover {
    background: var(--stamp-deep);
    border-color: var(--stamp-deep);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}

.lp-btn--primary:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

.lp-btn--ghost {
    background: transparent;
    color: var(--ink);
}

.lp-btn--ghost:hover { background: var(--paper-deep); }

.lp-btn:focus-visible {
    outline: 3px solid var(--stamp);
    outline-offset: 3px;
}

.lp-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
}

.lp-reassure {
    font-size: 0.9rem;
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.15rem;
}

.lp-reassure span { display: inline-flex; align-items: center; gap: 0.4rem; }
.lp-reassure span::before { content: "✓"; color: var(--green); font-weight: 700; }

/* ----------------------------------------------------------------- Cabecera */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in oklch, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--paper-edge);
}

.lp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.9rem;
}

.lp-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.lp-brand__mark {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 2px solid var(--stamp);
    color: var(--stamp);
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    transform: rotate(-8deg);
}

.lp-header nav {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.8rem);
    font-size: 0.94rem;
    font-weight: 500;
}

.lp-header nav a { text-decoration: none; }
.lp-header nav a:not(.lp-btn):hover { color: var(--stamp); }

.lp-header .lp-btn { padding: 0.6rem 1.15rem; font-size: 0.92rem; box-shadow: 3px 3px 0 var(--ink); }

/* --------------------------------------------------------------------- Hero */

.lp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem);
}

.lp-hero__copy { display: grid; gap: 1.6rem; align-content: start; }
.lp-hero__copy .lp-h1 { margin-block: 0.4rem; }

/* ------------------------------------------- La tarjeta: el objeto de marca */

.lp-object { display: grid; place-items: center; }

.lp-card {
    width: min(23rem, 100%);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    padding: 1.5rem 1.4rem 1.3rem;
    box-shadow: 10px 12px 0 color-mix(in oklch, var(--ink) 14%, transparent);
    transform: rotate(-1.6deg);
}

.lp-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px dashed var(--paper-edge);
    padding-bottom: 0.85rem;
    margin-bottom: 1.15rem;
}

.lp-card__shop {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.03em;
}

.lp-card__meta {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.lp-stamps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.7rem;
    list-style: none;
    margin: 0 0 1.15rem;
    padding: 0;
}

.lp-stamp {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px dashed var(--paper-edge);
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.lp-stamp--on {
    border-style: solid;
    border-color: var(--stamp);
    background: var(--stamp);
    color: var(--paper);
    font-size: 1.05rem;
    /* Tinta de tampón: nunca queda perfecta. */
    box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--paper) 22%, transparent);
}

.lp-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lp-card__prize { font-size: 0.92rem; font-weight: 500; }
.lp-card__prize strong { font-family: var(--display); }

.lp-card__count {
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stamp);
    white-space: nowrap;
}

.lp-object__caption {
    margin-top: 1.4rem;
    font-size: 0.86rem;
    color: var(--ink-soft);
    text-align: center;
    max-width: 26ch;
}

/* ------------------------------------------------------ Secciones genéricas */

.lp-section { padding-block: var(--stack); }

.lp-section--deep {
    background: var(--paper-deep);
    border-block: 1px solid var(--paper-edge);
}

.lp-section--ink {
    background: var(--ink);
    color: var(--on-dark);
}

.lp-section--ink .lp-lead,
.lp-section--ink .lp-reassure { color: var(--on-dark-soft); }

/* El bermellón de marca es demasiado oscuro sobre tinta: se aclara. */
.lp-section--ink .lp-eyebrow { color: var(--on-dark-accent); }
.lp-section--ink .lp-eyebrow::before { background: var(--on-dark-accent); }

.lp-section__head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 34ch; }
.lp-section__head--wide { max-width: 52ch; }

/* ------------------------------------------------------------- Comparativa */

.lp-versus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.lp-versus__col { display: grid; gap: 1rem; align-content: start; }

.lp-versus__label {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    padding-bottom: 0.7rem;
    border-bottom: 2px solid currentColor;
}

.lp-versus__col--old .lp-versus__label { color: var(--ink-faint); }
.lp-versus__col--new .lp-versus__label { color: var(--stamp); }

.lp-versus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }

.lp-versus li {
    display: grid;
    grid-template-columns: 1.35rem 1fr;
    gap: 0.65rem;
    align-items: start;
    font-size: 0.97rem;
}

.lp-versus li::before { font-weight: 700; line-height: 1.5; }
.lp-versus__col--old li { color: var(--ink-soft); }
.lp-versus__col--old li::before { content: "×"; color: var(--ink-faint); font-size: 1.2rem; }
.lp-versus__col--new li::before { content: "✓"; color: var(--green); }

/* ----------------------------------------------------------------- Pasos */

.lp-steps { display: grid; gap: clamp(2rem, 4vw, 3.25rem); counter-reset: step; }

.lp-step {
    display: grid;
    grid-template-columns: clamp(3.5rem, 7vw, 6rem) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: baseline;
    padding-bottom: clamp(2rem, 4vw, 3.25rem);
    border-bottom: 1px solid var(--paper-edge);
}

.lp-steps .lp-step:last-child { border-bottom: 0; padding-bottom: 0; }

.lp-step__num {
    counter-increment: step;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.6rem, 5.5vw, 4.5rem);
    line-height: 0.85;
    color: var(--stamp);
    letter-spacing: -0.05em;
}

.lp-step__num::before { content: counter(step, decimal-leading-zero); }

.lp-step__body { display: grid; gap: 0.55rem; max-width: 54ch; }
.lp-step__body p { color: var(--ink-soft); }

/* --------------------------------------------------------------- Objeciones */

.lp-qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1.75rem, 3.5vw, 3rem); }
.lp-qa__item { display: grid; gap: 0.6rem; align-content: start; }
.lp-qa__q { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.lp-qa__a { color: var(--ink-soft); font-size: 0.97rem; max-width: 42ch; }
.lp-section--ink .lp-qa__a { color: var(--on-dark-soft); }

/* -------------------------------------------------------------- Fotografía */

.lp-photo {
    position: relative;
    border: 2px solid var(--ink);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 10px 12px 0 color-mix(in oklch, var(--ink) 12%, transparent);
}

.lp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.lp-photo figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem 1.25rem 1rem;
    background: linear-gradient(transparent, color-mix(in oklch, var(--ink) 88%, transparent));
    color: var(--paper);
    font-size: 0.88rem;
}

.lp-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

/* ----------------------------------------------------------------- Precios */

.lp-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
}

.lp-plan {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    padding: 1.75rem 1.5rem;
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.lp-plan--featured {
    box-shadow: 8px 9px 0 var(--stamp);
    position: relative;
}

.lp-plan__flag {
    position: absolute;
    top: -0.85rem;
    left: 1.4rem;
    background: var(--stamp);
    color: var(--paper);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 2px;
}

.lp-plan__name {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.03em;
}

.lp-plan__price {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.4rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.lp-plan__period { font-size: 0.85rem; color: var(--ink-soft); margin-top: -0.6rem; }
.lp-plan__desc { font-size: 0.93rem; color: var(--ink-soft); }

.lp-plan__list { list-style: none; margin: 0.3rem 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.93rem; }
.lp-plan__list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.55rem; align-items: start; }
.lp-plan__list li::before { content: "✓"; color: var(--green); font-weight: 700; }

.lp-plan .lp-btn { width: 100%; margin-top: 0.4rem; }

.lp-tax {
    margin-top: 2rem;
    font-size: 0.88rem;
    color: var(--ink-soft);
    max-width: 60ch;
}

/* --------------------------------------------------------------------- FAQ */

.lp-faq { display: grid; gap: 0; max-width: 52rem; }

.lp-faq details {
    border-bottom: 1px solid var(--paper-edge);
    padding-block: 1.15rem;
}

.lp-faq summary {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

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

.lp-faq summary::after {
    content: "+";
    font-size: 1.4rem;
    color: var(--stamp);
    line-height: 1;
    flex: 0 0 auto;
    transition: transform 0.2s var(--ease);
}

.lp-faq details[open] summary::after { transform: rotate(45deg); }

.lp-faq details > p {
    margin-top: 0.75rem;
    color: var(--ink-soft);
    max-width: 60ch;
    font-size: 0.97rem;
}

/* ---------------------------------------------------------------- Cierre */

.lp-final { display: grid; gap: 1.75rem; justify-items: start; max-width: 40ch; }

/* ------------------------------------------------------------------- Pie */

.lp-footer {
    background: var(--ink);
    color: var(--on-dark-soft);
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
    font-size: 0.92rem;
}

.lp-footer__inner { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; justify-content: space-between; align-items: center; }
.lp-footer a { text-decoration: none; }
.lp-footer a { color: var(--on-dark-soft); }
.lp-footer a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.lp-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --------------------------------------------------------------- Movimiento */

@media (prefers-reduced-motion: no-preference) {
    .lp-rise {
        animation: lp-rise 0.7s var(--ease) backwards;
    }

    .lp-rise:nth-child(1) { animation-delay: 0.05s; }
    .lp-rise:nth-child(2) { animation-delay: 0.13s; }
    .lp-rise:nth-child(3) { animation-delay: 0.21s; }
    .lp-rise:nth-child(4) { animation-delay: 0.29s; }

    .lp-card { animation: lp-drop 0.85s var(--ease) backwards; animation-delay: 0.18s; }

    /* Los sellos caen uno a uno, como si los fueran estampando. */
    .lp-stamp--on { animation: lp-press 0.5s var(--ease) backwards; }
    .lp-stamp--on:nth-child(1) { animation-delay: 0.55s; }
    .lp-stamp--on:nth-child(2) { animation-delay: 0.63s; }
    .lp-stamp--on:nth-child(3) { animation-delay: 0.71s; }
    .lp-stamp--on:nth-child(4) { animation-delay: 0.79s; }
    .lp-stamp--on:nth-child(5) { animation-delay: 0.87s; }
    .lp-stamp--on:nth-child(6) { animation-delay: 0.95s; }
    .lp-stamp--on:nth-child(7) { animation-delay: 1.03s; }
}

@keyframes lp-rise {
    from { opacity: 0; transform: translateY(1.1rem); }
    to { opacity: 1; transform: none; }
}

@keyframes lp-drop {
    from { opacity: 0; transform: rotate(-6deg) translateY(1.75rem) scale(0.97); }
    to { opacity: 1; transform: rotate(-1.6deg); }
}

@keyframes lp-press {
    from { opacity: 0; transform: scale(1.5) rotate(-12deg); }
    60% { opacity: 1; transform: scale(0.94) rotate(2deg); }
    to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Responsive */

/* Una sola columna. El hero deja de ser «texto al lado de objeto» y pasa a ser
   una secuencia: quién eres, qué prometes, la prueba, la explicación, la acción.
   Poner la tarjeta antes del titular deja la promesa fuera de la primera
   pantalla, que en móvil es todo el escaparate que tienes. */

@media (max-width: 62rem) {
    .lp-hero {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        padding-block: 2.5rem 3rem;
    }

    /* Los hijos del bloque de texto suben al grid del hero para poder
       intercalar la tarjeta entre el titular y la explicación. */
    .lp-hero__copy { display: contents; }

    .lp-hero .lp-eyebrow { order: 1; margin-bottom: -0.6rem; }
    .lp-hero .lp-h1 { order: 2; margin-block: 0; }
    .lp-hero .lp-object { order: 3; margin-block: 0.4rem; }
    .lp-hero .lp-lead { order: 4; }
    .lp-hero .lp-cta-row { order: 5; }
    .lp-hero .lp-reassure { order: 6; }

    /* La tarjeta se queda rotada 1,6 grados al terminar su entrada, y eso
       ensancha su caja envolvente. Sin devolverle ese sitio, se sale. */
    .lp-card { width: min(21rem, 100% - 0.9rem); }
}

/* --------------------------------------------------------------------- Móvil
   Tres reglas mandan aquí: que nada se salga por los lados, que todo lo que se
   toca tenga tamaño de dedo, y que las dos acciones se lean como dos caminos
   y no como una principal y otra accidental. */

@media (max-width: 40rem) {

    /* Bordes de 2px y sombras duras desplazadas necesitan aire lateral: con
       20px, el conjunto se lee como recortado por el canto de la pantalla. */
    .lp { --gutter: 1.4rem; }

    /* Red de seguridad contra rotaciones y sombras. `clip` y no `hidden`:
       hidden convertiría el eje vertical en scrollable y rompería el header
       fijo al desplazar. */
    .lp { overflow-x: clip; }

    /* ------------------------------------------------------------ Cabecera */

    .lp-header__inner { gap: 0.7rem; padding-block: 0.65rem; }

    .lp-brand { font-size: 0.95rem; gap: 0.45rem; white-space: nowrap; min-height: 2.75rem; }
    .lp-brand__mark { width: 1.5rem; height: 1.5rem; font-size: 0.78rem; flex: 0 0 auto; }

    /* «Cómo funciona» está a un scroll y «Precios» está en el pie. Lo que no
       cabe en una línea no se aprieta: se quita. */
    .lp-header__link { display: none; }
    .lp-header__link--keep { display: inline-flex; align-items: center; min-height: 2.75rem; }

    .lp-header nav { gap: 0.9rem; font-size: 0.9rem; }

    .lp-header .lp-btn {
        padding: 0.7rem 1rem;
        font-size: 0.88rem;
        white-space: nowrap;
        min-height: 2.75rem;
        box-shadow: 3px 3px 0 var(--ink);
    }

    /* ---------------------------------------------------------------- Hero */

    .lp-hero { padding-block: 1.75rem 2.5rem; }

    .lp-card { padding: 1.3rem 1.2rem 1.15rem; }
    .lp-stamps { gap: 0.55rem; }
    .lp-card__foot { flex-wrap: wrap; gap: 0.4rem 1rem; }
    .lp-object__caption { margin-top: 1.1rem; max-width: 32ch; }

    /* -------------------------------------------------------------- Acción */

    .lp-btn { padding: 0.95rem 1.4rem; }

    .lp-cta-row { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .lp-cta-row .lp-btn { width: 100%; min-height: 3.25rem; }

    /* En fila, las tres garantías se parten en dos y una, y parece un
       descuido. En columna son una lista, que es lo que son. */
    .lp-reassure { flex-direction: column; gap: 0.5rem; }

    /* ------------------------------------------------------------ Contenido */

    .lp-section__head { margin-bottom: 2rem; }

    .lp-versus { gap: 2.25rem; }

    .lp-step { grid-template-columns: 1fr; gap: 0.35rem; padding-bottom: 1.75rem; }
    .lp-step__num { font-size: 2.5rem; }

    /* Las preguntas se abren con el dedo: 25px de alto no es un objetivo. */
    .lp-faq details { padding-block: 0.6rem; }
    .lp-faq summary { font-size: 1rem; gap: 1rem; align-items: center; min-height: 3rem; }

    .lp-final { max-width: none; }
    .lp-final .lp-cta-row { justify-self: stretch; }

    /* -------------------------------------------------------------- Precios */

    /* La sombra desplazada es la firma de la marca. A 8px se come el margen de
       la pantalla, así que se reduce; no se quita. */
    .lp-plan { padding: 1.5rem 1.3rem; }
    .lp-plan--featured { box-shadow: 5px 6px 0 var(--stamp); }
    .lp-plan__price { font-size: 2.6rem; }
    .lp-plan .lp-btn { min-height: 3.25rem; }

    /* ------------------------------------------------------------------ Pie */

    .lp-footer__inner { flex-direction: column; align-items: flex-start; gap: 1.1rem; }

    /* Cinco enlaces en fila caen 4 + 1 y el último queda huérfano. En dos
       columnas se leen como un índice. */
    .lp-footer nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.1rem 1.5rem;
        width: 100%;
    }

    .lp-footer nav a { min-height: 2.5rem; display: inline-flex; align-items: center; }
}

/* Móviles estrechos: ya no cabe «Entrar» junto a la marca y el botón, y el
   titular a 44px empieza a partir palabras en trozos ilegibles. */
@media (max-width: 27rem) {
    .lp-header__link--keep { display: none; }
    .lp-h1 { font-size: clamp(2.25rem, 1.2rem + 4.8vw, 2.8rem); }
    .lp-plan__price { font-size: 2.35rem; }
}

/* A 360px la marca completa y el botón todavía se pisan. La marca cede: el
   botón es la razón de que la cabecera exista. */
@media (max-width: 23.5rem) {
    .lp { --gutter: 1.15rem; }
    .lp-brand { font-size: 0.88rem; }
    .lp-brand__mark { width: 1.35rem; height: 1.35rem; font-size: 0.7rem; }
    .lp-header .lp-btn { padding: 0.7rem 0.8rem; font-size: 0.84rem; }
}

/* Fondo oscuro: el papel se convierte en tinta, pero el tampón se mantiene. */
@media (prefers-color-scheme: dark) {
    .lp {
        --paper: oklch(0.205 0.018 62);
        --paper-deep: oklch(0.255 0.020 62);
        --paper-edge: oklch(0.325 0.022 62);
        --ink: oklch(0.945 0.014 78);
        --ink-soft: oklch(0.775 0.016 72);
        --ink-faint: oklch(0.605 0.018 68);
        --stamp: oklch(0.665 0.165 34);
        --stamp-deep: oklch(0.735 0.155 36);
        --stamp-wash: oklch(0.335 0.075 36);
    }

    .lp::before { opacity: 0.18; }

    /* En tema oscuro estas superficies se hunden un poco más para seguir
       separándose del fondo, pero el texto sigue usando los tokens --on-dark. */
    .lp-section--ink { background: oklch(0.135 0.016 62); }
    .lp-footer { background: oklch(0.135 0.016 62); }
    .lp-btn--primary { color: oklch(0.16 0.015 62); }
}

/* ------------------------------------------------------------------ Avisos */

.lp-notice {
    border: 2px solid var(--ink);
    border-radius: 3px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    background: var(--paper-deep);
}

.lp-notice--success { border-color: var(--green); }
.lp-notice--error { border-color: var(--stamp); background: var(--stamp-wash); }
.lp-notice--warning { border-color: var(--stamp); }

/* ----------------------------------------------- Contenido largo (legales) */

.lp .ll-legal {
    max-width: 68ch;
    margin: 0 auto;
    padding-block: clamp(3rem, 6vw, 5rem);
    padding-inline: var(--gutter);
}

.lp .ll-legal h1 {
    font-family: var(--display);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    letter-spacing: -0.035em;
    margin-bottom: 0.5rem;
}

.lp .ll-legal h2 {
    font-family: var(--display);
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    letter-spacing: -0.025em;
    margin-top: 2.75rem;
    margin-bottom: 0.65rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--paper-edge);
}

.lp .ll-legal h3 {
    font-family: var(--display);
    font-size: 1.08rem;
    margin-top: 1.75rem;
    margin-bottom: 0.4rem;
}

.lp .ll-legal p { margin-bottom: 1rem; color: var(--ink-soft); }
.lp .ll-legal p.ll-muted { color: var(--ink-faint); font-size: 0.9rem; }

.lp .ll-legal ul { margin: 0 0 1.25rem; padding-left: 1.1rem; color: var(--ink-soft); }
.lp .ll-legal li { margin-bottom: 0.5rem; }

.lp .ll-legal a { color: var(--stamp); text-underline-offset: 3px; }

.lp .ll-legal .ll-flash {
    border: 2px solid var(--stamp);
    background: var(--stamp-wash);
    border-radius: 3px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: 0.93rem;
    color: var(--ink);
}

.lp .ll-legal .ll-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    margin-bottom: 1.5rem;
}

.lp .ll-legal .ll-table th,
.lp .ll-legal .ll-table td {
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--paper-edge);
}

.lp .ll-legal .ll-table th {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.lp .ll-code-inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
    background: var(--paper-deep);
    border: 1px solid var(--paper-edge);
    border-radius: 3px;
    padding: 0.1em 0.4em;
}

/* ------------------------------------------------------------- Alta exprés */

.lp-trial-section { padding-block: clamp(2.5rem, 6vw, 5rem); }

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

.lp-trial__copy { display: grid; gap: 1.25rem; align-content: start; padding-top: 1rem; }

.lp-trial__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.lp-trial__points li {
    padding-left: 1.75rem;
    position: relative;
    color: var(--ink-soft);
    font-size: 0.97rem;
}

.lp-trial__points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
}

.lp-trial__note {
    font-size: 0.9rem;
    color: var(--ink-soft);
    border-top: 1px solid var(--paper-edge);
    padding-top: 1.1rem;
}

.lp-trial__form {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: 10px 12px 0 color-mix(in oklch, var(--ink) 13%, transparent);
}

.lp-trial__title {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    margin: 0 0 1.5rem;
}

.lp-field { margin-bottom: 1.35rem; }

.lp-field > label,
.lp-choice-set > legend {
    display: block;
    font-weight: 700;
    font-size: 0.94rem;
    margin-bottom: 0.45rem;
    font-family: var(--display);
    letter-spacing: -0.01em;
}

.lp-optional {
    font-family: var(--body);
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--ink-faint);
    text-transform: none;
    letter-spacing: 0;
}

.lp-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--paper-edge);
    border-radius: 3px;
    font-family: var(--body);
    font-size: 1rem;
    background: var(--paper);
    color: var(--ink);
}

.lp-input::placeholder { color: var(--ink-faint); }

.lp-input:focus {
    outline: 0;
    border-color: var(--stamp);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--stamp) 22%, transparent);
}

.lp-input.is-error { border-color: var(--stamp); }

.lp-file { padding: 0.7rem; font-size: 0.9rem; }

.lp-field__hint { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.4rem; }
.lp-field__error { font-size: 0.87rem; color: var(--stamp); margin-top: 0.4rem; font-weight: 600; }

.lp-choice-set { border: 0; padding: 0; margin-bottom: 1.35rem; }

.lp-choice2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.lp-choice2__opt { cursor: pointer; }
.lp-choice2__opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.lp-choice2__box {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    text-align: center;
    padding: 1.1rem 0.8rem;
    border: 1.5px solid var(--paper-edge);
    border-radius: 3px;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
    height: 100%;
}

.lp-choice2__opt:hover .lp-choice2__box { border-color: var(--ink-faint); }

.lp-choice2__opt input:checked + .lp-choice2__box {
    border-color: var(--stamp);
    border-width: 2px;
    background: var(--stamp-wash);
}

.lp-choice2__opt input:focus-visible + .lp-choice2__box {
    outline: 3px solid var(--stamp);
    outline-offset: 2px;
}

.lp-choice2__demo { display: flex; gap: 3px; margin-bottom: 0.35rem; }

.lp-choice2__demo span {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 1.5px dashed var(--ink-faint);
    display: grid;
    place-items: center;
    font-size: 0.6rem;
    color: var(--ink-faint);
}

.lp-choice2__demo span.on {
    background: var(--stamp);
    border-color: var(--stamp);
    border-style: solid;
    color: var(--paper);
}

.lp-choice2__points {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--stamp);
    margin-bottom: 0.3rem;
    letter-spacing: -0.03em;
}

.lp-choice2__name { font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.lp-choice2__desc { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.35; }

.lp-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 1.35rem;
    color: var(--ink-soft);
}

.lp-check input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; flex: 0 0 auto; accent-color: var(--stamp); }
.lp-check a { color: var(--stamp); }

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

.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-trial__login {
    text-align: center;
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin-top: 1.1rem;
}

.lp-trial__login a { color: var(--stamp); font-weight: 600; }

/* ------------------------------------------------ Resultado del alta exprés */

.lp-done-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.lp-done { display: grid; gap: clamp(2rem, 4vw, 3rem); }

.lp-done__head { display: grid; gap: 0.9rem; max-width: 46ch; }

/* Guía de tres pasos: la demostración, no una confirmación. */

.lp-guide { display: grid; gap: 0; counter-reset: guide; }

.lp-guide__step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
    border-top: 1px solid var(--paper-edge);
    position: relative;
}

.lp-guide__step:first-child { border-top: 0; padding-top: 0; }

/* Línea que une los pasos, como una lista de tareas. */
.lp-guide__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 4rem;
    bottom: 0;
    width: 2px;
    background: var(--paper-edge);
}

.lp-guide__step:first-child::after { top: 3rem; }

.lp-guide__num {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid var(--paper-edge);
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ink-faint);
    background: var(--paper);
    position: relative;
    z-index: 1;
}

.lp-guide__step.is-active .lp-guide__num,
.lp-guide__step--wow .lp-guide__num {
    border-color: var(--stamp);
    background: var(--stamp);
    color: var(--paper);
}

.lp-guide__body { display: grid; gap: 0.7rem; align-content: start; padding-top: 0.35rem; }

.lp-guide__title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
    letter-spacing: -0.025em;
    margin: 0;
}

.lp-guide__text { color: var(--ink-soft); max-width: 54ch; }

.lp-guide__qr {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    padding: 1.1rem;
    width: fit-content;
    text-align: center;
    box-shadow: 8px 9px 0 color-mix(in oklch, var(--ink) 12%, transparent);
    margin-top: 0.4rem;
}

.lp-guide__qr img { display: block; width: 100%; max-width: 14rem; height: auto; }

.lp-guide__serial {
    margin-top: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.16em;
    font-weight: 700;
    font-size: 0.88rem;
}

.lp-guide__alt { font-size: 0.9rem; color: var(--ink-soft); }
.lp-guide__alt a { color: var(--stamp); font-weight: 600; }

.lp-guide__howto { display: grid; gap: 0.5rem; margin-top: 0.3rem; max-width: 34rem; }

.lp-guide__howto details {
    border: 1px solid var(--paper-edge);
    border-radius: 3px;
    padding: 0.7rem 0.9rem;
    background: var(--paper);
}

.lp-guide__howto summary {
    cursor: pointer;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.94rem;
    list-style: none;
}

.lp-guide__howto summary::-webkit-details-marker { display: none; }
.lp-guide__howto summary::after { content: " +"; color: var(--stamp); }
.lp-guide__howto details[open] summary::after { content: " −"; }
.lp-guide__howto p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink-soft); }

.lp-guide__step--wow .lp-guide__body { padding-bottom: 0.3rem; }
.lp-guide__step--wow .lp-btn { justify-self: start; margin-top: 0.3rem; }
.lp-guide__note { font-size: 0.85rem; color: var(--ink-soft); }

/* Conversión, después de la demostración */

.lp-done__next {
    background: var(--ink);
    color: var(--on-dark);
    border-radius: 4px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.lp-done__next-tag {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-dark-accent);
}

.lp-done__next h2 { margin: 0; }
.lp-done__next p { color: var(--on-dark-soft); max-width: 56ch; }
.lp-done__next .lp-btn--ghost { color: var(--on-dark); border-color: var(--on-dark-soft); }
.lp-done__next .lp-btn--ghost:hover { background: color-mix(in oklch, var(--on-dark) 12%, transparent); }

.lp-done__small { font-size: 0.85rem; color: var(--on-dark-faint); }
.lp-done__small a { color: var(--on-dark-accent); }

@media (max-width: 62rem) {
    .lp-trial { grid-template-columns: 1fr; }
    .lp-trial__copy { order: 2; padding-top: 0; }
}

@media (max-width: 34rem) {
    .lp-guide__step { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.9rem; }
    .lp-guide__num { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
    .lp-guide__step:not(:last-child)::after { left: 1.2rem; top: 3.2rem; }
}

@media (max-width: 26rem) {
    .lp-choice2 { grid-template-columns: 1fr; }
}

/* Selector de idioma del pie público. */
.lp-langs {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.lp-langs a { opacity: .7; text-decoration: none; }
.lp-langs a:hover { opacity: 1; text-decoration: underline; }
.lp-langs__current { font-weight: 700; }