@charset "UTF-8";
/* ==========================================================================
   TOOK JAAY XUUL — Sistema de diseño de producto
   --------------------------------------------------------------------------
   Jerarquía de color (la regla que sostiene todo el sistema):

     AZUL    es el suelo.      Domina en superficie: fondos densos, footer,
                               hero. Es lo que da calma y confianza.
     MORADO  es la atmósfera.  Vive en gradientes, halos y bordes. Casi nunca
                               es un plano sólido; es la bruma entre el azul
                               y la luz.
     NARANJA es la luz.        Escaso a propósito (~5% de la superficie).
                               Solo acciones, precios y lo que el ojo debe
                               encontrar primero. Si el naranja está en todos
                               lados, deja de significar "aquí".

   Las superficies de compra (productos, carrito, checkout) son claras:
   comprar exige legibilidad. Los momentos inmersivos (hero, footer,
   confirmación) son oscuros: ahí sí manda el índigo.
   ========================================================================== */

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

:root {
    /* --- Azul: el suelo --------------------------------------------------- */
    --ink-900: #080D22;
    --ink-800: #0E1430;
    --ink-700: #161E42;
    --ink-600: #202A57;
    --ink-500: #33407A;
    --ink-400: #5462A4;

    /* --- Morado: la atmósfera --------------------------------------------- */
    --violet-700: #4A2FA8;
    --violet-600: #6C4BD8;
    --violet-500: #8A6BF0;
    --violet-300: #B9A3FA;
    --violet-100: #EDE7FE;

    /* --- Naranja: la luz -------------------------------------------------- */
    --amber-700: #C2410C;
    --amber-600: #EA580C;
    --amber-500: #FF7A2F;
    --amber-400: #FF9A5E;
    --amber-100: #FFEDE0;

    /* --- Neutros fríos: dejan que el empaque sea el color ---------------- */
    --bone-50: #FFFFFF;
    --bone-100: #F6F7FB;
    --bone-200: #ECEEF5;
    --bone-300: #D9DDE9;
    --stone-400: #6F778D;
    --stone-500: #4E576F;
    --stone-600: #343D55;

    /* --- Estados ---------------------------------------------------------- */
    --go-600: #0F7A55;
    --go-500: #17A673;
    --go-100: #DFF5EC;
    --warn-600: #A66A12;
    --warn-500: #E8A33D;
    --warn-100: #FDF1DE;
    --stop-600: #B93A33;
    --stop-500: #E0524A;
    --stop-100: #FDE9E7;

    /* --- Semánticos ------------------------------------------------------- */
    --surface: var(--bone-100);
    --surface-raised: #FFFFFF;
    --surface-sunken: var(--bone-200);
    --surface-deep: var(--ink-800);
    --text: var(--ink-800);
    --text-soft: var(--stone-500);
    --text-faint: var(--stone-400);
    --text-on-deep: var(--bone-100);
    --text-on-deep-soft: rgba(246, 247, 251, 0.78);
    --line: var(--bone-300);
    --line-soft: var(--bone-200);
    --focus: var(--violet-600);

    /* --- Tipografía ------------------------------------------------------- */
    --font-display: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
    --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Escala modular 1.25 sobre 16px, fluida donde importa */
    --t-xs: 0.75rem;
    --t-sm: 0.875rem;
    --t-base: 1rem;
    --t-md: 1.125rem;
    --t-lg: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);
    --t-xl: clamp(1.5rem, 1vw + 1.25rem, 2rem);
    --t-2xl: clamp(2rem, 2vw + 1.5rem, 3rem);
    --t-3xl: clamp(2.5rem, 4vw + 1.5rem, 4.5rem);
    --t-4xl: clamp(2.8rem, 5vw + 1rem, 5.8rem);

    /* --- Espacio: escala de 4px ------------------------------------------- */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;

    /* --- Forma ------------------------------------------------------------ */
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-full: 999px;

    /* --- Sombra: tintada de índigo, nunca gris pura ----------------------- */
    --shadow-sm: 0 1px 2px rgba(14, 20, 48, 0.06), 0 2px 6px rgba(14, 20, 48, 0.04);
    --shadow-md: 0 4px 12px rgba(14, 20, 48, 0.08), 0 12px 28px rgba(14, 20, 48, 0.06);
    --shadow-lg: 0 12px 32px rgba(14, 20, 48, 0.12), 0 32px 64px rgba(14, 20, 48, 0.10);
    --shadow-amber: 0 6px 20px rgba(255, 122, 47, 0.32);

    /* --- Movimiento ------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 140ms;
    --dur: 260ms;
    --dur-slow: 520ms;

    /* --- Layout ----------------------------------------------------------- */
    --page: 1180px;
    --page-narrow: 720px;
    --nav-h: 68px;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* La nav fija no debe tapar el destino de un ancla */
    scroll-padding-top: calc(var(--nav-h) + var(--s-5));
}

body {
    font-family: var(--font-body);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }

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

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
}

p { text-wrap: pretty; }

/* Foco visible siempre. No se negocia. */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--amber-500); color: #fff; }

[hidden] { display: none !important; }

/* ==========================================================================
   3. Utilidades
   ========================================================================== */

.wrap {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--s-5);
}
.wrap--narrow { max-width: var(--page-narrow); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 200;
    padding: var(--s-3) var(--s-4);
    background: var(--ink-800);
    color: var(--bone-100);
    border-radius: var(--r-sm);
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* Números tabulares: los precios no deben bailar al cambiar */
.tnum { font-variant-numeric: tabular-nums; }

main { padding-top: calc(var(--nav-h) + 28px); }

/* ==========================================================================
   6. Navegación
   ========================================================================== */

.nav {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 100;
    width: min(calc(100% - 32px), 1180px);
    height: var(--nav-h);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: var(--r-full);
    background: rgba(249, 249, 247, 0.68);
    box-shadow: 0 12px 40px rgba(8, 13, 34, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: saturate(190%) blur(24px);
    -webkit-backdrop-filter: saturate(190%) blur(24px);
    transform: translateX(-50%);
    transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.nav.is-stuck {
    background: rgba(249, 249, 247, 0.88);
    box-shadow: 0 16px 46px rgba(8, 13, 34, 0.18), inset 0 1px 0 #fff;
}

/* Sobre héroes oscuros (home, profundidades) la barra arranca en vidrio
   oscuro: encima del hero el vidrio claro se veía como un bloque blanco
   flotando. Al hacer scroll (.is-stuck) el fondo ya es claro y vuelve al
   vidrio claro de siempre. Solo cambia el FONDO del navbar; el hero no. */
body[data-page="home"] .nav:not(.is-stuck),
body[data-page="profundidades"] .nav:not(.is-stuck) {
    background: rgba(14, 20, 48, 0.34);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 40px rgba(8, 13, 34, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Texto y controles legibles sobre ese vidrio oscuro */
body[data-page="home"] .nav:not(.is-stuck) .nav__brand,
body[data-page="profundidades"] .nav:not(.is-stuck) .nav__brand,
body[data-page="home"] .nav:not(.is-stuck) .nav__link[aria-current="page"],
body[data-page="profundidades"] .nav:not(.is-stuck) .nav__link[aria-current="page"] {
    color: var(--bone-50);
}
body[data-page="home"] .nav:not(.is-stuck) .nav__link,
body[data-page="profundidades"] .nav:not(.is-stuck) .nav__link {
    color: rgba(247, 244, 239, 0.82);
}
body[data-page="home"] .nav:not(.is-stuck) .nav__link:hover,
body[data-page="profundidades"] .nav:not(.is-stuck) .nav__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}
body[data-page="home"] .nav:not(.is-stuck) .nav__burger,
body[data-page="profundidades"] .nav:not(.is-stuck) .nav__burger {
    color: var(--bone-50);
}
/* El carrito (tinta) sobre vidrio oscuro se separa con un aro tenue */
body[data-page="home"] .nav:not(.is-stuck) .nav__cart,
body[data-page="profundidades"] .nav:not(.is-stuck) .nav__cart {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.20);
}
/* La burbuja del contador lleva borde del color del navbar: en oscuro,
   oscuro para no dejar un anillo claro alrededor */
body[data-page="home"] .nav:not(.is-stuck) .nav__count,
body[data-page="profundidades"] .nav:not(.is-stuck) .nav__count {
    border-color: var(--ink-800);
}

.nav__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--s-5);
    padding-inline: var(--s-3);
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-right: auto;
    /* Sin logo, el texto quedaba pegado a la curva izquierda del pill;
       este respiro lo separa del borde redondeado. */
    padding-left: var(--s-2);
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: 0;
}
.nav__brand span { white-space: nowrap; }

.nav__links {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.nav__link {
    position: relative;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-full);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--text-soft);
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--text); background: var(--bone-200); }
.nav__link[aria-current="page"] { color: var(--ink-800); }

/* El subrayado activo es un trazo naranja: la luz marca dónde estás */
.nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--s-4); right: var(--s-4);
    bottom: 2px;
    height: 2px;
    border-radius: var(--r-full);
    background: var(--amber-500);
}

.nav__cart,
.nav__sound {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--r-full);
    background: var(--ink-800);
    color: var(--bone-100);
    flex: none;
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.nav__cart:hover { transform: scale(1.06); background: var(--ink-700); }
.nav__cart:active { transform: scale(0.95); }
.nav__cart svg,
.nav__sound svg { width: 20px; height: 20px; }

.nav__sound {
    background: rgba(255, 255, 255, 0.48);
    color: var(--ink-800);
    border: 1px solid rgba(14, 20, 48, 0.08);
}
.nav__sound:hover { background: #fff; }
.nav__sound-on { display: none; }
.nav__sound[aria-pressed="true"] .nav__sound-on { display: block; }
.nav__sound[aria-pressed="true"] .nav__sound-off { display: none; }

.nav__count {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 21px; height: 21px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    background: var(--amber-500);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    border: 2px solid var(--surface);
    transform: scale(0);
    transition: transform var(--dur) var(--ease-out);
}
.nav__count.is-visible { transform: scale(1); }
.nav__count.is-bumped { animation: bump 320ms var(--ease-out); }

@keyframes bump {
    0%, 100% { transform: scale(1); }
    35%      { transform: scale(1.42); }
}

.nav__burger {
    display: none;
    width: 44px; height: 44px;
    place-items: center;
    border-radius: var(--r-full);
    color: var(--text);
    flex: none;
}
.nav__burger:hover { background: var(--bone-200); }
.nav__burger svg { width: 22px; height: 22px; }

/* ==========================================================================
   7. Botones
   ========================================================================== */

.btn {
    --btn-bg: var(--ink-800);
    --btn-fg: var(--bone-100);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-full);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

/* El brillo que barre al pasar el cursor: la luz se mueve sobre el botón */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::before { transform: translateX(120%); }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.is-control-pressed { animation: control-flash 260ms var(--ease-out); }
@keyframes control-flash {
    45% { filter: brightness(1.16); }
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Primario: naranja. La única acción que empuja al cliente hacia adelante. */
.btn--primary {
    --btn-bg: linear-gradient(135deg, var(--amber-500), var(--amber-600));
    --btn-fg: #fff;
    box-shadow: var(--shadow-amber);
}
.btn--primary:hover { box-shadow: 0 10px 28px rgba(255, 122, 47, 0.42); }

/* Secundario: índigo sólido */
.btn--ink { --btn-bg: var(--ink-800); --btn-fg: var(--bone-100); }
.btn--ink:hover { box-shadow: var(--shadow-md); }

/* Terciario: contorno. Para lo reversible. */
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover { --btn-bg: var(--bone-200); box-shadow: inset 0 0 0 1.5px var(--stone-400); }

/* Sobre fondo oscuro */
.btn--on-deep {
    --btn-bg: rgba(247, 244, 239, 0.1);
    --btn-fg: var(--bone-100);
    box-shadow: inset 0 0 0 1.5px rgba(247, 244, 239, 0.26);
    backdrop-filter: blur(8px);
}
.btn--on-deep:hover { --btn-bg: rgba(247, 244, 239, 0.18); }

.btn--lg { min-height: 58px; padding: var(--s-4) var(--s-7); font-size: var(--t-md); }
.btn--sm { min-height: 40px; padding: var(--s-2) var(--s-4); font-size: var(--t-xs); }
.btn--block { display: flex; width: 100%; }

/* Estado ocupado: el botón dice qué pasa, no se queda mudo */
.btn.is-busy { pointer-events: none; color: transparent; }
.btn.is-busy::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    border: 2.5px solid var(--bone-100);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 620ms linear infinite;
}
.btn--primary.is-busy::after { border-color: #fff; border-top-color: transparent; }
.btn--ghost.is-busy::after { border-color: var(--ink-800); border-top-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   8. Secciones
   ========================================================================== */

.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-7); }
.section--deep {
    background: var(--surface-deep);
    color: var(--text-on-deep);
    position: relative;
    overflow: hidden;
}

.section__head { max-width: 42rem; margin-bottom: var(--s-7); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    font-size: var(--t-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--violet-600);
}
.eyebrow::before {
    content: "";
    width: 22px; height: 2px;
    border-radius: var(--r-full);
    background: currentColor;
}
.section--deep .eyebrow { color: var(--violet-300); }

.section__title { font-size: var(--t-2xl); margin-bottom: var(--s-3); }
.section__title em {
    font-style: normal;
    color: var(--amber-600);
}
.section--deep .section__title em { color: var(--amber-400); }

.section__lede {
    font-size: var(--t-md);
    color: var(--text-soft);
    max-width: 38rem;
}
.section--deep .section__lede { color: var(--text-on-deep-soft); }
.section__head--center .section__lede { margin-inline: auto; }

/* ==========================================================================
   9. Hero
   ========================================================================== */

.hero {
    position: relative;
    min-height: min(92dvh, 860px);
    display: flex;
    align-items: center;
    margin-top: calc((var(--nav-h) + 28px) * -1);
    background-color: var(--ink-800);
    background-image: url('../img/hero-pyramid-v2.png');
    background-image: image-set(
        url('../img/hero-pyramid-v2.webp') type('image/webp'),
        url('../img/hero-pyramid-v2.png') type('image/png')
    );
    background-size: cover;
    background-position: center;
    color: var(--text-on-deep);
    overflow: hidden;
    padding-block: clamp(8.5rem, 15vh, 11rem) clamp(4rem, 8vh, 7rem);
}

/* El velo conserva legibilidad sin ocultar la selva ni la arquitectura. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 11, 23, 0.9) 0%, rgba(5, 11, 23, 0.68) 42%, rgba(5, 11, 23, 0.12) 72%, rgba(5, 11, 23, 0.2) 100%);
    pointer-events: none;
}

.hero__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.hero__copy { max-width: 38rem; }

.hero__brandline {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    color: var(--text-on-deep-soft);
    font-size: var(--t-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.hero__brandline img {
    /* Alto fijo (≈lo que daba el contain) y ancho estirado a mano: la marca
       casi cuadrada se veía apretada. object-fit:fill estira solo en
       horizontal — la caja crece con el logo, así "Hecho en México" se
       acomoda al lado sin encimarse. Sube/baja el width para alargarlo. */
    width: 76px;   /* equivale a ~1.45× de ancho */
    height: 48px;
    object-fit: fill;
}

.hero__title {
    max-width: 12ch;
    font-size: clamp(3rem, 5.5vw, 5.6rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: 0;
    margin-bottom: var(--s-5);
}
.hero__title span {
    display: block;
    margin-top: var(--s-3);
    font-family: var(--font-body);
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--amber-500);
}

.hero__lede {
    max-width: 31rem;
    margin-bottom: var(--s-6);
    font-size: var(--t-md);
    color: var(--text-on-deep-soft);
}

.hero__actions {
    display: flex;
    gap: var(--s-3);
    justify-content: flex-start;
    flex-wrap: wrap;
}

.hero__proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(246, 247, 251, 0.16);
}
.hero__proof li {
    display: grid;
    gap: 2px;
}
.hero__proof strong {
    font-family: var(--font-display);
    font-size: var(--t-md);
    color: var(--bone-50);
}
.hero__proof span {
    font-size: var(--t-xs);
    color: var(--text-on-deep-soft);
}

.hero__scene {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    justify-items: end;
    gap: 2px;
    padding: var(--s-4) var(--s-5);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--r-md);
    background: rgba(6, 12, 25, 0.28);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.hero__place { font-family: var(--font-display); font-weight: 700; color: var(--bone-50); }
.hero__coordinates { color: rgba(247, 244, 239, 0.68); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   10. Tarjetas de producto
   ========================================================================== */

.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 286px));
    justify-content: center;
    gap: var(--s-5);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border-radius: var(--r-xl);
    border: 1px solid var(--line-soft);
    box-shadow: 0 18px 44px rgba(14, 20, 48, 0.12);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 52px rgba(14, 20, 48, 0.17);
    border-color: var(--violet-300);
}

/* Halo que aparece al acercarse: la atmósfera reacciona */
.card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, var(--violet-500), transparent 45%, var(--amber-500));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
    pointer-events: none;
}
.card:hover::before { opacity: 1; }

.card__media {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: var(--bone-200);
    overflow: hidden;
}
.card__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.card__media picture { display: contents; }
.card:hover .card__media img { transform: scale(1.025); }

.card__tag {
    position: absolute;
    top: var(--s-3); left: var(--s-3);
    padding: 5px var(--s-3);
    border-radius: var(--r-full);
    background: rgba(14, 20, 48, 0.82);
    color: var(--bone-100);
    backdrop-filter: blur(6px);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--s-3);
    padding: var(--s-5);
}

.card__name { font-size: var(--t-lg); }

.card__desc {
    font-size: var(--t-sm);
    color: var(--text-soft);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__price {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--ink-800);
    font-variant-numeric: tabular-nums;
}
.card__price small {
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text-faint);
    letter-spacing: 0.06em;
}

.card__stock {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--go-600);
}
.card__stock::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}
.card__stock[data-level="low"] { color: var(--warn-600); }
.card__stock[data-level="out"] { color: var(--stop-600); }

.card__actions { display: flex; align-items: center; gap: var(--s-3); }
.card__actions .btn { flex: 1; }

/* ==========================================================================
   11. Selector de cantidad
   ========================================================================== */

.qty {
    display: inline-flex;
    align-items: center;
    background: var(--bone-200);
    border-radius: var(--r-full);
    padding: 3px;
    flex: none;
}

.qty__btn {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    color: var(--ink-700);
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.qty__btn:hover:not(:disabled) { background: var(--surface-raised); transform: scale(1.1); }
.qty__btn:active:not(:disabled) { transform: scale(0.9); }
.qty__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.qty__btn svg { width: 15px; height: 15px; }

.qty__value {
    min-width: 42px;
    text-align: center;
    font-weight: 800;
    font-size: var(--t-md);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   12. La escalera de precios — elemento firma
   --------------------------------------------------------------------------
   Los cuatro escalones reales del negocio. Numerarlos está justificado:
   1 -> 3 -> 6 -> 10 es una secuencia real y creciente, y el orden ES la
   información. El escalón activo se enciende según lo que hay en el carrito.
   ========================================================================== */

.ladder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    counter-reset: rung;
}

.rung {
    counter-increment: rung;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-4);
    border-radius: var(--r-lg);
    background: var(--surface-raised);
    border: 1.5px solid var(--line-soft);
    text-align: left;
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out);
}
.rung:hover { transform: translateY(-4px); border-color: var(--violet-300); }

/* La barra del escalón: cuánta "luz" alcanza este nivel */
.rung::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--violet-500), var(--amber-500));
    transform: scaleX(var(--fill, 0));
    transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
}
.rung:nth-child(1) { --fill: 0.25; }
.rung:nth-child(2) { --fill: 0.5; }
.rung:nth-child(3) { --fill: 0.75; }
.rung:nth-child(4) { --fill: 1; }

.rung__n {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.rung__n::before { content: "0" counter(rung); }

.rung__qty {
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--ink-800);
}

.rung__total {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--ink-800);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.rung__unit {
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

.rung__save {
    margin-top: auto;
    padding-top: var(--s-2);
    font-size: var(--t-xs);
    font-weight: 800;
    color: var(--go-600);
    font-variant-numeric: tabular-nums;
}

/* Escalón activo: aquí está el cliente ahora mismo */
.rung.is-active {
    border-color: var(--amber-500);
    background: var(--amber-100);
    box-shadow: var(--shadow-amber);
    transform: translateY(-4px);
}
.rung.is-active .rung__n,
.rung.is-active .rung__unit,
.rung.is-active .rung__total,
.rung.is-active .rung__qty { color: var(--amber-700); }

/* Escalón siguiente: el objetivo alcanzable */
.rung.is-next { border-color: var(--violet-500); border-style: dashed; }

/* ==========================================================================
   13. Ahorro y upsell
   ========================================================================== */

.nudge {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--violet-100);
    border: 1px solid var(--violet-300);
    color: var(--violet-700);
    font-size: var(--t-sm);
    font-weight: 600;
}
.nudge svg { width: 18px; height: 18px; flex: none; color: var(--violet-600); }
.nudge--go { background: var(--go-100); border-color: var(--go-500); color: var(--go-600); }
.nudge--go svg { color: var(--go-500); }

/* El ahorro es información, no una promoción. Se muestra como dato. */
.savings {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-full);
    background: var(--go-100);
    color: var(--go-600);
    font-size: var(--t-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Envío gratis: promesa constante, nunca una fila de total */
.free-ship {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--go-600);
}
.free-ship svg { width: 17px; height: 17px; flex: none; }

.bulk-section { border-top: 1px solid var(--line); background: var(--surface-raised); }
.bulk-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr);
    align-items: center;
    gap: var(--s-5) var(--s-8);
}
.bulk-callout .section__title { margin: 0; }
.bulk-callout .section__lede { margin: 0; }
.bulk-callout .free-ship,
.bulk-callout .btn { justify-self: start; }

@media (max-width: 760px) {
    .bulk-callout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14. Carrito lateral
   ========================================================================== */

.drawer-veil {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(8, 13, 34, 0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
.drawer-veil.is-open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed;
    top: 0; right: 0;
    z-index: 151;
    width: min(430px, 100vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    box-shadow: -20px 0 60px rgba(8, 13, 34, 0.28);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
}
.drawer.is-open { transform: translateX(0); }

.drawer__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-5);
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-raised);
}
.drawer__title { font-size: var(--t-lg); margin-right: auto; }

.drawer__close {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    color: var(--text-soft);
    flex: none;
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur) var(--ease-out);
}
.drawer__close:hover { background: var(--bone-200); color: var(--text); transform: rotate(90deg); }
.drawer__close svg { width: 20px; height: 20px; }

.drawer__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.drawer__foot {
    padding: var(--s-5);
    border-top: 1px solid var(--line-soft);
    background: var(--surface-raised);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

/* Línea del carrito */
.line {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    animation: line-in var(--dur) var(--ease-out) backwards;
}
@keyframes line-in {
    from { opacity: 0; transform: translateX(16px); }
}

.line__media {
    width: 68px; height: 68px;
    border-radius: var(--r-sm);
    background: var(--bone-200);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.line__media img {
    width: 100%;
    height: 100%;
    padding: 6px;
    object-fit: contain;
}

.line__info { min-width: 0; }
.line__name {
    font-weight: 700;
    font-size: var(--t-sm);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line__unit {
    font-size: var(--t-xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.line__controls { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }

.line__side { display: grid; justify-items: end; gap: var(--s-2); }
.line__total {
    font-weight: 800;
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
}
.line__drop {
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text-faint);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-sm);
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.line__drop:hover { color: var(--stop-600); background: var(--stop-100); }

/* Totales: total y envío gratis. No hay más filas porque no hay más. */
.totals { display: flex; flex-direction: column; gap: var(--s-2); }
.totals__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--t-sm);
    color: var(--text-soft);
}
.totals__row--grand {
    padding-top: var(--s-3);
    border-top: 1.5px solid var(--line);
    font-size: var(--t-base);
    color: var(--text);
}
.totals__grand {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--ink-800);
    font-variant-numeric: tabular-nums;
}
.totals__grand small {
    font-family: var(--font-body);
    font-size: var(--t-xs);
    color: var(--text-faint);
    font-weight: 700;
}

/* Vacío: una invitación, no un lamento */
.empty {
    flex: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--s-4);
    text-align: center;
    padding: var(--s-7) var(--s-4);
}
.empty__art {
    width: 76px; height: 76px;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    background: var(--violet-100);
    color: var(--violet-600);
}
.empty__art svg { width: 34px; height: 34px; }
.empty__title { font-size: var(--t-lg); }
.empty__text { font-size: var(--t-sm); color: var(--text-soft); max-width: 30ch; }

/* ==========================================================================
   15. Formularios
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field__label {
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--ink-700);
}
.field__label .req { color: var(--amber-600); }

.field__hint { font-size: var(--t-xs); color: var(--text-faint); }

.input {
    width: 100%;
    min-height: 50px;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    border: 1.5px solid var(--line);
    background: var(--surface-raised);
    font-size: var(--t-base);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-faint); }
.input:hover { border-color: var(--stone-400); }
.input:focus {
    outline: none;
    border-color: var(--violet-600);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet-600) 16%, transparent);
}
textarea.input { min-height: 104px; resize: vertical; line-height: 1.5; }

.field.has-error .input { border-color: var(--stop-500); background: var(--stop-100); }
.field.has-error .input:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--stop-500) 16%, transparent);
}
.field__error {
    display: none;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--stop-600);
}
.field.has-error .field__error { display: block; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-4); }

/* Trampa para bots: fuera de la vista, presente en el DOM */
.honey {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0;
    height: 0;
    pointer-events: none;
}

/* ==========================================================================
   16. Checkout
   ========================================================================== */

.checkout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--s-6);
    align-items: start;
}

.panel {
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    padding: var(--s-6);
}
.panel__title {
    font-size: var(--t-lg);
    margin-bottom: var(--s-5);
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.summary { position: sticky; top: calc(var(--nav-h) + var(--s-4)); }

/* Progreso del checkout: tres pasos reales, no decoración */
.steps {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
}
.step {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text-faint);
    white-space: nowrap;
}
.step__dot {
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    background: var(--bone-200);
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 800;
    flex: none;
    transition: background var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}
.step__dot svg { width: 13px; height: 13px; }
.step__bar {
    flex: 1;
    height: 2px;
    min-width: var(--s-3);
    border-radius: var(--r-full);
    background: var(--bone-200);
    overflow: hidden;
}
.step__bar::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--violet-500), var(--amber-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
}
.step.is-done .step__dot { background: var(--go-500); color: #fff; }
.step.is-done + .step__bar::after { transform: scaleX(1); }
.step.is-current { color: var(--ink-800); }
.step.is-current .step__dot {
    background: var(--amber-500);
    color: #fff;
    transform: scale(1.14);
    box-shadow: var(--shadow-amber);
}

/* Zona de PayPal */
.paypal-zone { display: flex; flex-direction: column; gap: var(--s-4); }
.paypal-box {
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--bone-100);
    border: 1px solid var(--line-soft);
    min-height: 56px;
    transition: opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.paypal-box.is-locked { opacity: 0.4; pointer-events: none; filter: grayscale(1); }

.paypal-note {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: var(--t-xs);
    color: var(--text-soft);
    line-height: 1.5;
}
.paypal-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--go-500); }

/* Aviso en línea (error de pago, cancelación) */
.notice {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    font-weight: 600;
    margin-bottom: var(--s-5);
}
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.notice--stop { background: var(--stop-100); color: var(--stop-600); border: 1px solid var(--stop-500); }
.notice--warn { background: var(--warn-100); color: var(--warn-600); border: 1px solid var(--warn-500); }

/* ==========================================================================
   17. Confirmación
   ========================================================================== */

.success-screen {
    position: relative;
    min-height: calc(100dvh - var(--nav-h) - 28px);
    display: grid;
    align-items: center;
    overflow: hidden;
    padding-block: var(--s-8);
    background: var(--surface);
}
.success-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg, transparent 0 119px, rgba(91, 61, 200, 0.045) 119px 120px);
    pointer-events: none;
}
.success-screen .wrap { position: relative; z-index: 1; }
.success-screen__title { max-width: 13ch; margin-inline: auto; font-size: clamp(2.5rem, 6vw, 5rem); }
.success-screen__message { max-width: 34rem; margin: 0 auto; color: var(--text-soft); font-size: var(--t-md); }
.success-screen__actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

.receipt { max-width: 680px; margin-inline: auto; text-align: center; }

.receipt__seal {
    width: 96px; height: 96px;
    margin: 0 auto var(--s-5);
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    background: var(--go-100);
    color: var(--go-500);
    box-shadow: 0 16px 38px rgba(20, 143, 102, 0.18);
    animation: seal 520ms var(--ease-out) backwards;
}
@keyframes seal {
    from { transform: scale(0) rotate(-45deg); opacity: 0; }
}
.receipt__seal svg { width: 46px; height: 46px; }
.receipt__seal svg path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: draw 520ms var(--ease-out) 300ms forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.receipt__id {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-4) 0;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-md);
    background: var(--ink-800);
    color: var(--bone-100);
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: 0.06em;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    overflow-wrap: anywhere;
}
.receipt__copy {
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-sm);
    color: var(--violet-300);
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-weight: 700;
    transition: background var(--dur-fast) var(--ease-out);
}
.receipt__copy:hover { background: rgba(255, 255, 255, 0.12); }

.receipt__lines {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.receipt__line {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--t-sm);
}
.receipt__line > span:first-child { color: var(--text-soft); }
.receipt__line strong { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   18. Seguimiento
   ========================================================================== */

.track-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--s-3);
    align-items: end;
}

.timeline {
    display: flex;
    flex-direction: column;
    padding-left: var(--s-2);
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 6px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--line);
}

.tl-item {
    position: relative;
    padding: 0 0 var(--s-5) var(--s-5);
}
.tl-item::before {
    content: "";
    position: absolute;
    left: 0; top: 5px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--bone-300);
    border: 3px solid var(--surface-raised);
    z-index: 1;
}
.tl-item:first-child::before {
    background: var(--amber-500);
    box-shadow: 0 0 0 4px var(--amber-100);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item__status { font-weight: 800; font-size: var(--t-sm); }
.tl-item__when { font-size: var(--t-xs); color: var(--text-faint); }
.tl-item__note { font-size: var(--t-sm); color: var(--text-soft); margin-top: 2px; }

/* ==========================================================================
   19. Toast
   ========================================================================== */

.toasts {
    position: fixed;
    bottom: var(--s-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    width: min(400px, calc(100vw - var(--s-6)));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--ink-800);
    color: var(--bone-100);
    font-size: var(--t-sm);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in var(--dur) var(--ease-out) backwards;
}
.toast.is-leaving { animation: toast-out var(--dur) var(--ease-out) forwards; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(18px) scale(0.94); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateY(10px) scale(0.96); }
}
.toast__icon {
    width: 20px; height: 20px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
}
.toast__icon svg { width: 12px; height: 12px; }
.toast--go .toast__icon { background: var(--go-500); color: #fff; }
.toast--stop .toast__icon { background: var(--stop-500); color: #fff; }
.toast--info .toast__icon { background: var(--violet-500); color: #fff; }

/* ==========================================================================
   20. Footer
   ========================================================================== */

.footer {
    background: var(--ink-900);
    color: var(--text-on-deep-soft);
    padding-block: var(--s-8) var(--s-5);
    position: relative;
    overflow: hidden;
}
/* Veta de luz en el borde superior: el remate de la marca */
.footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--amber-500), var(--violet-500), transparent);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--s-6);
    margin-bottom: var(--s-7);
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--bone-100);
}
.footer__brand img { width: 36px; border-radius: var(--r-sm); }
.footer__text { font-size: var(--t-sm); max-width: 34ch; }

.footer__h {
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--violet-300);
    margin-bottom: var(--s-3);
}

.footer__list { display: flex; flex-direction: column; gap: var(--s-2); }
.footer__list a { font-size: var(--t-sm); transition: color var(--dur-fast) var(--ease-out); }
.footer__list a:hover { color: var(--amber-400); }

.footer__base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(247, 244, 239, 0.1);
    font-size: var(--t-xs);
    flex-wrap: wrap;
}

/* ==========================================================================
   21. Páginas de error
   ========================================================================== */

.about-hero {
    padding-block: clamp(4rem, 10vw, 8rem);
    background: var(--ink-800);
    color: var(--text-on-deep);
}
.about-hero__inner { max-width: 900px; }
.about-hero__label { margin-bottom: var(--s-4); color: var(--amber-400); font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.12em; }
.about-hero h1 { max-width: 12ch; font-size: var(--t-3xl); }
.about-hero p:last-child { max-width: 55ch; margin-top: var(--s-5); color: var(--text-on-deep-soft); font-size: var(--t-md); }
.about-story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.about-story__copy p { max-width: 55ch; margin-bottom: var(--s-5); color: var(--text-soft); }
.about-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.about-products img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); }
.about-principles { padding-block: var(--s-8); border-block: 1px solid var(--line); background: var(--surface-raised); }
.about-principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.about-principles article { padding-top: var(--s-4); border-top: 3px solid var(--ink-800); }
.about-principles article > span { color: var(--amber-600); font-size: var(--t-xs); font-weight: 800; }
.about-principles h3 { margin-block: var(--s-3) var(--s-2); font-size: var(--t-lg); }
.about-principles p { color: var(--text-soft); }
.about-commerce { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: start; gap: var(--s-8); }
.about-prices { display: grid; border-top: 1px solid rgba(246, 247, 251, 0.18); }
.about-prices div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid rgba(246, 247, 251, 0.18); }
.about-prices dt { color: var(--text-on-deep-soft); }
.about-prices dd { font-family: var(--font-display); font-weight: 700; color: var(--amber-400); }
.about-contact { display: flex; justify-content: space-between; align-items: center; gap: var(--s-7); }
.about-contact p { max-width: 55ch; color: var(--text-soft); }
.about-contact__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); flex: none; }

@media (max-width: 760px) {
    .about-story,
    .about-commerce { grid-template-columns: 1fr; }
    .about-products { min-height: 320px; }
    .about-products img { height: 290px; }
    .about-products img:last-child { height: 190px; }
    .about-principles__grid { grid-template-columns: 1fr; }
    .about-contact { align-items: flex-start; flex-direction: column; }
}

.oops {
    min-height: 72vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--s-7) var(--s-5);
}
.oops__code {
    font-family: var(--font-display);
    font-size: var(--t-4xl);
    font-weight: 700;
    line-height: 1;
    color: var(--violet-600);
}
.oops__title { font-size: var(--t-xl); margin: var(--s-4) 0 var(--s-3); }
.oops__text { color: var(--text-soft); max-width: 42ch; margin: 0 auto var(--s-5); }

/* ==========================================================================
   22. Revelado al hacer scroll
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   23. Responsive — móvil primero de verdad
   ========================================================================== */

@media (max-width: 960px) {
    .hero__layout { grid-template-columns: 1fr; }
    .hero__title { font-size: clamp(2.7rem, 6vw, 4.4rem); }
    .checkout { grid-template-columns: 1fr; }
    .summary { position: static; order: -1; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__brand-col { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    :root { --nav-h: 60px; }

    .nav__links {
        position: absolute;
        top: calc(100% + 8px);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--s-3);
        background: var(--surface-raised);
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: var(--r-lg);
        backdrop-filter: blur(22px) saturate(180%);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        box-shadow: var(--shadow-lg);
        transform: translateY(-140%);
        transition: transform var(--dur) var(--ease-out);
    }
    .nav__links.is-open { transform: translateY(0); }
    .nav__link { padding: var(--s-4); border-radius: var(--r-md); font-size: var(--t-base); }
    .nav__link[aria-current="page"]::after { display: none; }
    .nav__link[aria-current="page"] { background: var(--amber-100); color: var(--amber-700); }
    .nav__burger { display: grid; }
    .nav__brand span { font-size: var(--t-sm); }

    .section { padding-block: var(--s-7); }
    .hero { min-height: 760px; padding-block: 8rem var(--s-7); background-position: 64% center; }
    .hero__layout { grid-template-columns: 1fr; }
    .hero__copy { max-width: 42rem; }
    /* En celular la placa "Juan 3:16" sale del posicionamiento absoluto (que
       la encimaba sobre "$449 / Gratis / PayPal") y fluye como una barra
       delgada al final del hero, pegada abajo de la fila de pruebas. */
    .hero__scene {
        position: static;
        justify-self: start;
        justify-items: start;
        margin-top: var(--s-5);
        padding: 4px 13px;
    }
    .hero__place { font-size: var(--t-sm); }

    /* La escalera pasa a 2x2: cuatro columnas achicarían el precio */
    .ladder { grid-template-columns: 1fr 1fr; }

    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .track-form { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__base { justify-content: center; text-align: center; }

    .drawer { width: 100vw; }
    .panel { padding: var(--s-5) var(--s-4); }

    /* Objetivos táctiles: nada por debajo de 44px */
    .qty__btn { width: 44px; height: 44px; }
    .line__drop { padding: var(--s-2) var(--s-3); }

    .steps { overflow-x: auto; padding-bottom: var(--s-2); }
    .step > span:not(.step__dot) { display: none; }
}

@media (max-width: 600px) {
    .products {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(240px, 78vw);
        justify-content: start;
        overflow-x: auto;
        padding: var(--s-2) var(--s-1) var(--s-5);
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }
    .products .card { scroll-snap-align: center; }
}

@media (max-width: 420px) {
    .wrap { padding-inline: var(--s-4); }
    .line { grid-template-columns: 56px 1fr; }
    .line__media { width: 56px; height: 56px; }
    .line__side {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ladder { grid-template-columns: 1fr; }
    .rung { flex-direction: row; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
    .rung__save { margin: 0; padding: 0; margin-left: auto; }
    .nav { width: calc(100% - 20px); top: 10px; }
    .nav__inner { gap: var(--s-2); }
    .nav__brand span { display: none; }
    .hero__title { font-size: 2.65rem; }
    .hero__actions { display: grid; }
    .hero__actions .btn { width: 100%; }
    .hero__proof { gap: var(--s-2); }
    .hero__proof strong { font-size: var(--t-base); }
    .success-screen__actions { display: grid; }
    .success-screen__actions .btn { width: 100%; }
}

/* ==========================================================================
   24. Preferencias del usuario
   ========================================================================== */

/* Quien pide menos movimiento recibe menos movimiento. Todo sigue usable:
   se apagan animaciones, no funciones. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .nav,
    .nav.is-stuck,
    .nav__links { background: #f9f9f7; backdrop-filter: none; -webkit-backdrop-filter: none; }
    body[data-page="home"] .nav:not(.is-stuck),
    body[data-page="profundidades"] .nav:not(.is-stuck) { background: var(--ink-800); }
    .hero__scene { background: rgba(6, 12, 25, 0.88); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
    :root {
        --text-soft: var(--ink-700);
        --text-faint: var(--stone-600);
        --line: var(--stone-400);
    }
    .card, .panel, .rung { border-width: 2px; }
}

@media print {
    .nav, .footer, .drawer, .drawer-veil, .toasts { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ==========================================================================
   26. Descargar la app (PWA)
   ========================================================================== */

.app-hero { padding-bottom: var(--s-7); }

/* Los cuatro estados los manda [data-state] desde el JS. Se ocultan todos por
   omisión y cada estado enciende el suyo: así el navegador nunca muestra un
   botón de instalar que no va a funcionar. */
.app-install__btn,
.app-install__done,
.app-install__wait,
.app-install__manual { display: none; }

[data-state="listo"] .app-install__btn { display: inline-flex; }
[data-state="instalada"] .app-install__done { display: block; }
[data-state="esperando"] .app-install__wait { display: block; }
[data-state="manual"] .app-install__manual { display: block; }

.app-install { margin-bottom: var(--s-7); }

.app-install__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    text-align: center;
    padding: var(--s-6);
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}
.app-install__icon {
    width: 96px; height: 96px;
    border-radius: var(--r-lg);
    box-shadow: 0 14px 34px rgba(14, 20, 48, 0.22);
}
.app-install__meta { display: grid; gap: 4px; }
.app-install__meta strong { font-family: var(--font-display); font-size: var(--t-lg); }
.app-install__meta span { font-size: var(--t-sm); color: var(--text-faint); }

.app-install__done {
    font-weight: 700;
    color: var(--go-600, #1f8a5f);
}
.app-install__wait { font-size: var(--t-sm); color: var(--text-faint); }
.app-install__manual { font-size: var(--t-sm); color: var(--text-soft); max-width: 42ch; }

.app-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    margin-bottom: var(--s-7);
}
.app-step {
    padding: var(--s-5);
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
}
.app-step h2 { font-size: var(--t-base); margin-bottom: var(--s-2); }
.app-step > p { font-size: var(--t-sm); color: var(--text-soft); margin-bottom: var(--s-3); }
.app-step ol { padding-left: 1.15rem; display: grid; gap: var(--s-2); }
.app-step li { font-size: var(--t-sm); color: var(--text-soft); line-height: 1.5; }
.app-step li strong { color: var(--text); }
.app-step__ico { font-size: 1.05em; }

.app-why {
    padding: var(--s-6);
    background: var(--surface-deep);
    border-radius: var(--r-xl);
    color: var(--text-on-deep);
    text-align: center;
}
.app-why__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-5);
    text-align: left;
}
.app-why__list li {
    display: grid;
    gap: 4px;
    padding: var(--s-4);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-md);
}
.app-why__list strong { font-family: var(--font-display); color: var(--bone-50); }
.app-why__list span { font-size: var(--t-sm); color: var(--text-on-deep-soft); line-height: 1.45; }

@media (max-width: 760px) {
    .app-steps { grid-template-columns: 1fr; }
    .app-why__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   25. Ayuda / soporte
   ========================================================================== */

.help-hero { padding-bottom: var(--s-6); }

.help-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

/* El acordeón es <details> nativo: sin JS que la CSP tenga que autorizar, y
   con el teclado y el lector de pantalla ya resueltos por el navegador. */
.help-item {
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}
.help-item[open] {
    border-color: var(--violet-300);
    box-shadow: 0 10px 30px rgba(14, 20, 48, 0.08);
}

.help-item__head {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    cursor: pointer;
    list-style: none; /* Firefox */
}
.help-item__head::-webkit-details-marker { display: none; } /* Safari */
.help-item__head:hover { background: var(--surface-sunken); }
.help-item__head:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.help-item__icon { font-size: 1.35rem; flex: none; }

.help-item__text {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.help-item__text strong {
    font-family: var(--font-display);
    font-size: var(--t-base);
    color: var(--text);
}
.help-item__text span {
    font-size: var(--t-sm);
    color: var(--text-soft);
}

.help-item__chevron {
    width: 20px; height: 20px;
    flex: none;
    color: var(--text-faint);
    transition: transform var(--dur) var(--ease-out);
}
.help-item[open] .help-item__chevron { transform: rotate(180deg); }

.help-item__body {
    padding: 0 var(--s-5) var(--s-5);
    border-top: 1px solid var(--line-soft);
    padding-top: var(--s-4);
}
.help-item__body p {
    color: var(--text-soft);
    line-height: 1.65;
    margin-bottom: var(--s-4);
}
.help-item__body .btn { margin-right: var(--s-2); }

.help-item__wa-num {
    margin: var(--s-3) 0 0;
    font-size: var(--t-sm);
    color: var(--text-faint);
}
.help-item__wa-num strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Verde de WhatsApp: el botón se reconoce antes de leerlo. */
.btn--wa {
    background: #25D366;
    color: #0B3B22;
}
.btn--wa:hover { background: #1FBF5A; }
.btn--wa svg { width: 20px; height: 20px; }

.help-cta {
    margin-top: var(--s-7);
    padding: var(--s-6);
    text-align: center;
    background: var(--surface-deep);
    border-radius: var(--r-xl);
    color: var(--text-on-deep);
}
.help-cta h2 {
    font-size: var(--t-xl);
    margin-bottom: var(--s-2);
}
.help-cta p {
    color: var(--text-on-deep-soft);
    margin-bottom: var(--s-5);
}

@media (max-width: 600px) {
    .help-item__head { padding: var(--s-4); gap: var(--s-3); }
    .help-item__body { padding-inline: var(--s-4); }
    .help-item__body .btn { width: 100%; margin: 0 0 var(--s-2); justify-content: center; }
}