/* ============================================================
   GEORGE PRINTS STUDIO — styles.css
   v8 · Neo-brutalismo sticker-world
   Estructura:
     1  Tokens (claro / oscuro)
     2  Reset y base
     3  Accesibilidad (skip link, focus, no-JS)
     4  Cursor personalizado
     5  Barra de progreso
     6  Preloader
     7  Partículas
     8  Navbar + tema
     9  Menú móvil
    10  Secciones y titulares
    11  Hero
    12  Botones
    13  Marquee
    14  Stats
    15  Servicios
    16  Por qué nosotros
    17  Galería
    18  Proceso
    19  Packs
    20  Envíos
    21  Testimonios
    22  FAQ
    23  Calculadora
    24  Contacto y formulario
    25  Footer
    26  Flotantes (WhatsApp / back to top)
    27  Tarjeta de agradecimiento
    28  Promo
    29  Avisos (toast)
    30  Lluvia de stickers
    31  Reveal y reduced-motion
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
    color-scheme: light;

    /* Superficies */
    --bg: #FAF3E3;
    --paper: #FFFFFF;
    --ink: #131313;
    --muted: #585858;
    --line: #131313;                 /* bordes y sombras */
    --dot: rgba(19, 19, 19, .07);    /* trama de fondo */

    /* Bloque invertido (chips, etiquetas) */
    --inv-bg: #131313;
    --inv-fg: #FFD02F;

    /* Panel oscuro permanente (footer, CTA, marquee, totales) */
    --panel-bg: #131313;
    --panel-fg: #FAF3E3;
    --panel-muted: #B9B9B9;

    /* Paleta viva */
    --yellow: #FFD02F;
    --pink: #FF5D8F;
    --cyan: #00B8D4;
    --purple: #7B5CFF;
    --green: #06D6A0;
    --orange: #FF7A00;
    --wa: #25D366;

    /* Texto sobre color vivo: SIEMPRE oscuro (contraste AA) */
    --on-accent: #131313;

    /* Variantes legibles de la paleta para texto */
    --t-pink: #D6215B;
    --t-cyan: #00788C;
    --t-purple: #5B36E0;
    --t-green: #00875F;
    --t-orange: #B85200;

    /* Geometría */
    --border: 3px solid var(--line);
    --shadow-sm: 4px 4px 0 var(--line);
    --shadow: 6px 6px 0 var(--line);
    --shadow-lg: 10px 10px 0 var(--line);
    --r: 16px;
    --nav-h: 96px;

    --font-head: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
    --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Modo oscuro por preferencia del sistema (si el usuario no eligió manualmente) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #14120C;
        --paper: #1F1C13;
        --ink: #F7F1E0;
        --muted: #B5AC95;
        --line: #F7F1E0;
        --dot: rgba(247, 241, 224, .08);
        --inv-bg: #F7F1E0;
        --inv-fg: #131313;
        --panel-bg: #0C0A06;
        --panel-fg: #F7F1E0;
        --panel-muted: #9E977F;
        --t-pink: #FF8DB0;
        --t-cyan: #46DAF2;
        --t-purple: #B3A0FF;
        --t-green: #3BE8B8;
        --t-orange: #FFA451;
    }
}

/* Modo oscuro elegido manualmente */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #14120C;
    --paper: #1F1C13;
    --ink: #F7F1E0;
    --muted: #B5AC95;
    --line: #F7F1E0;
    --dot: rgba(247, 241, 224, .08);
    --inv-bg: #F7F1E0;
    --inv-fg: #131313;
    --panel-bg: #0C0A06;
    --panel-fg: #F7F1E0;
    --panel-muted: #9E977F;
    --t-pink: #FF8DB0;
    --t-cyan: #46DAF2;
    --t-purple: #B3A0FF;
    --t-green: #3BE8B8;
    --t-orange: #FFA451;
}

/* ---------- 2. RESET Y BASE ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    color: var(--ink);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s ease, color .3s ease;
}

body.menu-open,
body.modal-open { overflow: hidden; }

::selection { background: var(--yellow); color: #131313; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); border-left: 2px solid var(--line); }
::-webkit-scrollbar-thumb { background: var(--yellow); border: 3px solid var(--line); border-radius: 8px; }

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

h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }

/* Los anclas no quedan tapadas por la navbar fija */
[id] { scroll-margin-top: var(--nav-h); }

/* ---------- 3. ACCESIBILIDAD ---------- */
.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10001;
    transform: translateY(-160%);
    background: var(--paper);
    color: var(--ink);
    border: var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    padding: 12px 18px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .25s ease;
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
    outline: 3px solid var(--t-purple);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Sin JS: todo se ve. Los estados ocultos solo existen si hay JS. */
.js .reveal {
    opacity: 0;
    transform: translateY(46px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}
.js .reveal[data-reveal="left"] { transform: translateX(-60px); }
.js .reveal[data-reveal="right"] { transform: translateX(60px); }
.js .reveal[data-reveal="zoom"] { transform: scale(.85); }
.js .reveal[data-reveal="rotate"] { transform: rotate(-8deg) scale(.9); }
.reveal.show { opacity: 1; transform: none; }

/* ---------- 4. CURSOR PERSONALIZADO ---------- */
.gp-cursor,
.gp-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    border-radius: 50%;
    opacity: 0;
    will-change: transform;
}
.has-cursor .gp-cursor,
.has-cursor .gp-cursor-ring { opacity: 1; }

.gp-cursor { width: 10px; height: 10px; background: var(--ink); }

.gp-cursor-ring {
    width: 42px;
    height: 42px;
    border: 3px solid var(--ink);
    background: rgba(255, 208, 47, .25);
    transition: width .25s, height .25s, background .25s, margin .25s;
}
.gp-cursor-ring.big {
    width: 70px;
    height: 70px;
    margin: -14px 0 0 -14px;
    background: rgba(255, 93, 143, .3);
}

.has-cursor body,
.has-cursor a,
.has-cursor button,
.has-cursor label,
.has-cursor summary { cursor: none; }
/* Excepción: en campos de texto se mantiene el cursor nativo */
.has-cursor input,
.has-cursor textarea,
.has-cursor select { cursor: auto; }

/* ---------- 5. BARRA DE PROGRESO ---------- */
#progressBar {
    position: fixed;
    inset: 0 auto auto 0;
    height: 6px;
    width: 0;
    z-index: 1200;
    background: repeating-linear-gradient(45deg, var(--line) 0 10px, var(--yellow) 10px 20px);
    border-bottom: 2px solid var(--line);
}

/* ---------- 6. PRELOADER ---------- */
#preloader {
    position: fixed;
    inset: 0;
    background-color: var(--bg);
    background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    padding: 20px;
    transition: transform .7s cubic-bezier(.65, 0, .35, 1), visibility .7s;
}
#preloader.hide { transform: translateY(-100%); visibility: hidden; }
/* Sin JS no hay preloader bloqueando nada */
html:not(.js) #preloader { display: none; }

.pre-logo-box {
    position: relative;
    width: 140px;
    height: 140px;
    display: grid;
    place-items: center;
}
.pre-logo-box img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: var(--border);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    animation: preBounce 1.2s ease infinite;
}
@keyframes preBounce {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

.pre-star { position: absolute; font-size: 1.6rem; animation: preOrbit 2.4s linear infinite; }
.pre-star.s1 { top: -8px; left: 50%; }
.pre-star.s2 { bottom: -8px; left: 10%; animation-delay: -.8s; }
.pre-star.s3 { top: 30%; right: -14px; animation-delay: -1.6s; }
@keyframes preOrbit {
    from { transform: rotate(0) scale(1); }
    50% { transform: rotate(180deg) scale(1.3); }
    to { transform: rotate(360deg) scale(1); }
}

.pre-name {
    font-family: var(--font-head);
    font-size: 1.3rem;
    letter-spacing: 2px;
    background: var(--yellow);
    color: var(--on-accent);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    padding: 6px 18px;
    border-radius: 10px;
    transform: rotate(-2deg);
}
.pre-thanks { font-weight: 700; color: var(--muted); }
#loadPct { font-family: var(--font-head); font-size: 2.2rem; }

/* ---------- 7. PARTÍCULAS ---------- */
#particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .45;
    width: 100%;
    height: 100%;
}

/* ---------- 8. NAVBAR ---------- */
.nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 18px;
    width: min(1120px, calc(100% - 28px));
    background: var(--paper);
    border: var(--border);
    border-radius: 60px;
    padding: 8px 10px 8px 18px;
    box-shadow: var(--shadow-sm);
    transition: top .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.nav.scrolled { top: 10px; box-shadow: var(--shadow); }

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
}
.nav-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    transition: transform .3s;
}
.nav-brand:hover img { transform: rotate(-10deg) scale(1.1); }
.nav-brand b { font-family: var(--font-head); font-size: .95rem; letter-spacing: 1px; }

.desk-links { display: flex; gap: 6px; margin-inline: auto; }
.desk-links a {
    text-decoration: none;
    color: var(--ink);
    font-weight: 700;
    font-size: .88rem;
    padding: 8px 14px;
    border-radius: 30px;
    border: 2px solid transparent;
    transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
    white-space: nowrap;
}
.desk-links a:hover,
.desk-links a.active {
    background: var(--yellow);
    color: var(--on-accent);
    border-color: var(--line);
    box-shadow: 3px 3px 0 var(--line);
    transform: translateY(-2px);
}

.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 901px) { .nav-actions { margin-left: 0; } }

.theme-toggle {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--bg);
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform .25s, background-color .25s;
    flex-shrink: 0;
}
.theme-toggle:hover { transform: rotate(-15deg) scale(1.08); background: var(--yellow); }
.theme-toggle .ico-moon { display: none; }
[data-theme="dark"] .theme-toggle .ico-moon { display: block; }
[data-theme="dark"] .theme-toggle .ico-sun { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .ico-sun { display: none; }
}

.hamburger {
    display: none;
    width: 42px;
    height: 42px;
    background: none;
    border: none;
    position: relative;
    z-index: 1300;
    cursor: pointer;
    flex-shrink: 0;
}
.hamburger span {
    position: absolute;
    left: 9px;
    width: 24px;
    height: 3.5px;
    background: var(--ink);
    border-radius: 4px;
    transition: .4s cubic-bezier(.68, -.55, .27, 1.55);
}
.hamburger span:nth-child(1) { top: 12px; }
.hamburger span:nth-child(2) { top: 20px; }
.hamburger span:nth-child(3) { top: 28px; }

body.menu-open .hamburger span { background: #131313; }
body.menu-open .hamburger span:nth-child(1) { top: 20px; transform: rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; transform: translateX(-30px); }
body.menu-open .hamburger span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

@media (max-width: 900px) {
    .desk-links { display: none; }
    .hamburger { display: block; }
    .nav { padding: 8px 10px 8px 14px; }
    .nav-brand img { width: 40px; height: 40px; }
}
@media (max-width: 340px) {
    .nav-brand b { display: none; }
}

/* ---------- 9. MENÚ MÓVIL ---------- */
.mobile-menu {
    /* Superficie siempre amarilla: fijamos tokens locales para no depender del tema */
    --ink: #131313;
    --line: #131313;
    --paper: #FFFFFF;
    --muted: #4A4A4A;

    position: fixed;
    inset: 0;
    z-index: 1250;
    background-color: #FFD02F;
    background-image: radial-gradient(rgba(19, 19, 19, .1) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    color: #131313;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 84px 20px calc(40px + env(safe-area-inset-bottom));
    gap: 6px;
    clip-path: circle(0% at calc(100% - 42px) 40px);
    visibility: hidden;
    transition: clip-path .7s cubic-bezier(.65, 0, .35, 1), visibility .7s;
}
body.menu-open .mobile-menu {
    clip-path: circle(150% at calc(100% - 42px) 40px);
    visibility: visible;
}
html:not(.js) .mobile-menu { display: none; }

.gp-menu-logo {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border: var(--border);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow);
    margin-bottom: 10px;
    padding: 6px;
    opacity: 0;
    transform: scale(.5) rotate(-10deg);
    transition: .55s cubic-bezier(.34, 1.56, .64, 1) .08s;
}
body.menu-open .gp-menu-logo { opacity: 1; transform: scale(1) rotate(-2deg); }

.gp-menu-flag {
    background: #131313;
    color: #FFD02F;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: 2px;
    padding: 7px 18px;
    border-radius: 30px;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(14px);
    transition: all .4s .18s;
    box-shadow: var(--shadow-sm);
}
body.menu-open .gp-menu-flag { opacity: 1; transform: translateY(0); }

.gp-menu-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    background: #fff;
    border: var(--border);
    border-radius: 40px;
    padding: 10px 20px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .85rem;
    color: #131313;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: opacity .3s .25s, background-color .2s, transform .2s;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}
body.menu-open .gp-menu-close { opacity: 1; }
.gp-menu-close:hover { background: #FF5D8F; transform: rotate(-3deg) translateY(-2px); }

.gp-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}
.gp-menu-nav a {
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 6vw, 2.2rem);
    color: #131313;
    text-decoration: none;
    padding: 8px 22px;
    border-radius: 14px;
    opacity: 0;
    transform: translateY(30px) rotate(3deg);
    transition: opacity .45s ease, transform .45s ease, background-color .2s, box-shadow .2s;
    text-align: center;
}
body.menu-open .gp-menu-nav a { opacity: 1; transform: translateY(0) rotate(0); }
/* Escalonado correcto: nth-child sobre los enlaces reales, no sobre el logo */
body.menu-open .gp-menu-nav a:nth-child(1) { transition-delay: .10s; }
body.menu-open .gp-menu-nav a:nth-child(2) { transition-delay: .16s; }
body.menu-open .gp-menu-nav a:nth-child(3) { transition-delay: .22s; }
body.menu-open .gp-menu-nav a:nth-child(4) { transition-delay: .28s; }
body.menu-open .gp-menu-nav a:nth-child(5) { transition-delay: .34s; }
body.menu-open .gp-menu-nav a:nth-child(6) { transition-delay: .40s; }
body.menu-open .gp-menu-nav a:nth-child(7) { transition-delay: .46s; }
body.menu-open .gp-menu-nav a:nth-child(8) { transition-delay: .52s; }
.gp-menu-nav a:hover { background: #fff; box-shadow: var(--shadow-sm); transform: rotate(-2deg); }

.mm-wa {
    margin-top: 20px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    background: #131313;
    color: #FFD02F;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 50px;
    box-shadow: 5px 5px 0 rgba(19, 19, 19, .35);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s .58s, transform .4s .58s, box-shadow .3s;
}
body.menu-open .mm-wa { opacity: 1; transform: translateY(0); }
.mm-wa:hover { box-shadow: 7px 7px 0 rgba(19, 19, 19, .35); }

.gp-menu-footer {
    margin-top: 26px;
    display: grid;
    gap: 4px;
    text-align: center;
    color: #131313;
    opacity: 0;
    transition: opacity .5s .68s;
    font-size: .85rem;
    line-height: 1.7;
    padding: 18px 24px;
    background: rgba(255, 255, 255, .55);
    border-radius: 16px;
    border: 2px dashed #131313;
}
body.menu-open .gp-menu-footer { opacity: 1; }
.gp-menu-footer b { font-family: var(--font-head); font-size: .95rem; margin-bottom: 6px; }
.gp-menu-footer a { color: #131313; text-decoration: none; font-weight: 700; }
.gp-menu-footer a:hover { text-decoration: underline; }

/* ---------- 10. SECCIONES Y TITULARES ---------- */
.wrap { position: relative; z-index: 2; }

section.block { padding: clamp(70px, 10vw, 110px) 22px; position: relative; }

.band {
    background: var(--paper);
    border-top: var(--border);
    border-bottom: var(--border);
}

.sec-head { max-width: 1100px; margin: 0 auto clamp(38px, 6vw, 60px); text-align: center; }

.sec-tag {
    display: inline-block;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: var(--inv-bg);
    color: var(--inv-fg);
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 18px;
    transform: rotate(-1.5deg);
}

.sec-head h2 {
    font-family: var(--font-head);
    font-size: clamp(1.9rem, 6vw, 3.4rem);
    text-transform: uppercase;
}
.sec-head > p {
    color: var(--muted);
    max-width: 640px;
    margin: 18px auto 0;
    line-height: 1.7;
    font-size: 1.02rem;
}

/* Resaltador tipo marcador */
.hl {
    background-image: linear-gradient(var(--yellow), var(--yellow));
    background-repeat: no-repeat;
    background-size: 0 88%;
    background-position: 0 62%;
    color: #131313;
    padding: 0 .12em;
    border-radius: 6px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-size .9s cubic-bezier(.16, 1, .3, 1) .35s;
}
.hl-pink { background-image: linear-gradient(var(--pink), var(--pink)); }
.hl-cyan { background-image: linear-gradient(var(--cyan), var(--cyan)); }

.show .hl,
.hero.is-in .hl,
html:not(.js) .hl { background-size: 100% 88%; }

/* ---------- 11. HERO ---------- */
.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nav-h) + 40px) 22px 90px;
    position: relative;
    overflow: hidden;
}

.hero-stickers { position: absolute; inset: 0; pointer-events: none; }
.hero-inner { max-width: 1100px; margin: 0 auto; width: 100%; position: relative; z-index: 3; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--paper);
    border: var(--border);
    border-radius: 50px;
    box-shadow: var(--shadow-sm);
    padding: 8px 18px;
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: 26px;
    transform: rotate(-1deg);
}
.hero-badge .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--line);
    animation: pulse 1.8s ease infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }

.hero h1 {
    font-family: var(--font-head);
    font-size: clamp(2.2rem, 8.5vw, 5.4rem);
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.h-line { display: block; overflow: hidden; padding-bottom: .1em; }
.h-inner { display: inline-block; }
.js .h-inner { transform: translateY(115%); transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.hero.is-in .h-line:nth-child(1) .h-inner { transition-delay: .10s; transform: translateY(0); }
.hero.is-in .h-line:nth-child(2) .h-inner { transition-delay: .24s; transform: translateY(0); }
.hero.is-in .h-line:nth-child(3) .h-inner { transition-delay: .38s; transform: translateY(0); }

.type-line {
    font-size: clamp(.95rem, 3.4vw, 1.45rem);
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: none;
    background: var(--paper);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    border-radius: 14px;
    padding: 10px 18px;
    transform: rotate(-1deg);
    line-height: 1.4;
}
#typewriter {
    color: var(--t-pink);
    font-family: var(--font-head);
    display: inline-block;
    min-width: 9ch;            /* evita que el titular "salte" al escribir */
    text-align: left;
}
.caret { animation: blink .8s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hero-sub {
    max-width: 640px;
    font-size: clamp(1rem, 2.8vw, 1.15rem);
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.js .hero-sub, .js .hero-actions { opacity: 0; transform: translateY(20px); }
.hero.is-in .hero-sub { opacity: 1; transform: none; transition: .8s ease .85s; }
.hero.is-in .hero-actions { opacity: 1; transform: none; transition: .8s ease 1s; }

/* Stickers flotantes */
.float-sticker {
    position: absolute;
    font-size: clamp(2rem, 6vw, 3.6rem);
    z-index: 1;
    filter: drop-shadow(4px 4px 0 rgba(19, 19, 19, .18));
    user-select: none;
    /* El parallax escribe --px/--py; la animación usa translate/rotate separados */
    translate: var(--px, 0) var(--py, 0);
    animation: floaty 6s ease-in-out infinite;
    will-change: translate, transform;
}
@keyframes floaty {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-22px) rotate(6deg); }
}
.fs1 { top: 16%; left: 6%; }
.fs2 { top: 22%; right: 8%; animation-delay: -1.5s; }
.fs3 { bottom: 26%; left: 10%; animation-delay: -3s; }
.fs4 { bottom: 18%; right: 12%; animation-delay: -2s; }
.fs5 { top: 48%; right: 26%; animation-delay: -4s; }
.fs6 { top: 60%; left: 30%; animation-delay: -2.6s; }
@media (max-width: 768px) { .fs5, .fs6 { display: none; } }
@media (max-width: 560px) { .fs3, .fs4 { opacity: .4; } }

.scroll-hint {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
}
.js .scroll-hint { opacity: 0; }
.hero.is-in .scroll-hint { opacity: 1; transition: opacity 1s ease 1.6s; }

.mouse {
    width: 24px;
    height: 38px;
    border: 3px solid var(--line);
    border-radius: 14px;
    position: relative;
    background: var(--paper);
}
.mouse::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--pink);
    border-radius: 4px;
    animation: wheel 1.5s ease infinite;
}
@keyframes wheel { 0% { opacity: 1; top: 6px; } 100% { opacity: 0; top: 20px; } }

/* ---------- 12. BOTONES ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.2;
    text-decoration: none;
    color: var(--ink);
    background: var(--paper);
    border: var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    transition: transform .15s, box-shadow .15s, background-color .2s;
    cursor: pointer;
    text-align: center;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--line); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--line); }

.btn-paper { background: var(--paper); }
.btn-yellow { background: var(--yellow); color: var(--on-accent); }
.btn-pink { background: var(--pink); color: var(--on-accent); }
.btn-wa { background: var(--wa); color: var(--on-accent); }
.btn-ink { background: var(--inv-bg); color: var(--inv-fg); }

/* ---------- 13. MARQUEE ---------- */
.marquee {
    overflow: hidden;
    background: var(--panel-bg);
    border-top: var(--border);
    border-bottom: var(--border);
    padding: 16px 0;
    transform: rotate(-1.2deg) scale(1.03);
    position: relative;
    z-index: 3;
}
.marquee.rev { transform: rotate(1.2deg) scale(1.03); background: var(--pink); }

.marquee-track {
    display: flex;
    gap: 44px;
    width: max-content;
    animation: marquee 26s linear infinite;
    white-space: nowrap;
    font-family: var(--font-head);
    font-size: 1.15rem;
    letter-spacing: 3px;
    color: var(--yellow);
    text-transform: uppercase;
    padding-left: 44px;
}
.marquee.rev .marquee-track { color: var(--on-accent); animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 14. STATS ---------- */
.stats {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(50px, 8vw, 80px) 22px 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 22px;
}
.stat {
    background: var(--paper);
    border: var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    text-align: center;
    padding: 26px 14px;
    transition: transform .3s;
}
.stat:nth-child(odd) { --tilt: -1.5deg; }
.stat:nth-child(even) { --tilt: 1.5deg; }
.stat { rotate: var(--tilt, 0deg); }
.stat:hover { rotate: 0deg; transform: translateY(-6px); }

.stat-num { font-family: var(--font-head); font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--t-pink); line-height: 1.1; }
.stat:nth-child(2) .stat-num { color: var(--t-cyan); }
.stat:nth-child(3) .stat-num { color: var(--t-purple); }
.stat:nth-child(4) .stat-num { color: var(--t-green); }

.stat-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 8px;
    color: var(--muted);
}

/* ---------- 15. SERVICIOS ---------- */
.services {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 26px;
}
.service {
    background: var(--paper);
    border: var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 32px 26px;
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    transform-style: preserve-3d;
}
.service:hover { box-shadow: var(--shadow-lg); }
.service .num {
    position: absolute;
    top: 14px;
    right: 18px;
    font-family: var(--font-head);
    font-size: 2.4rem;
    color: var(--ink);
    opacity: .08;
}
.service-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    font-size: 2rem;
    border: var(--border);
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    transform: rotate(-4deg);
    transition: transform .3s;
}
.service:hover .service-icon { transform: rotate(6deg) scale(1.1); }

.si-yellow { background: var(--yellow); }
.si-pink { background: var(--pink); }
.si-cyan { background: var(--cyan); }
.si-purple { background: var(--purple); }
.si-green { background: var(--green); }
.si-orange { background: var(--orange); }

.service h3 { font-family: var(--font-head); font-size: 1.25rem; margin-bottom: 12px; text-transform: uppercase; }
.service p { color: var(--muted); line-height: 1.65; font-size: .95rem; margin-bottom: 20px; }

.service-link {
    display: inline-block;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--on-accent);
    text-decoration: none;
    background: var(--yellow);
    border: 2px solid var(--line);
    border-radius: 30px;
    padding: 9px 18px;
    box-shadow: 3px 3px 0 var(--line);
    transition: transform .2s, box-shadow .2s, background-color .2s;
}
.service-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--line);
    background: var(--pink);
}

/* ---------- 16. POR QUÉ NOSOTROS ---------- */
.why-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 22px;
}
.why-item {
    background: var(--paper);
    border: var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 26px 22px;
    text-align: center;
    transition: transform .3s;
}
.why-item:hover { transform: translateY(-8px) rotate(-1deg); }
.why-item .em { font-size: 2.4rem; margin-bottom: 10px; line-height: 1; }
.why-item h3 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 10px; text-transform: uppercase; }
.why-item p { color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* ---------- 17. GALERÍA ---------- */
.gallery {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 34px 26px;
}
.polaroid {
    --rot: -2deg;
    position: relative;
    background: var(--paper);
    border: var(--border);
    padding: 12px 12px 16px;
    box-shadow: var(--shadow);
    rotate: var(--rot);
    transition: rotate .35s, transform .35s, box-shadow .35s;
    text-decoration: none;
    color: var(--ink);
    display: block;
}
.polaroid:nth-child(even) { --rot: 2deg; }
.polaroid:nth-child(3n) { --rot: -1deg; }
.polaroid:hover, .polaroid:focus-visible { rotate: 0deg; transform: scale(1.04); box-shadow: var(--shadow-lg); z-index: 4; }

.tape {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 110px;
    height: 28px;
    background: rgba(255, 208, 47, .9);
    border: 2px solid rgba(19, 19, 19, .25);
    z-index: 5;
}

/* Marco de la foto: si la imagen no existe, queda un placeholder diseñado */
.polaroid .ph {
    display: block;
    position: relative;
    aspect-ratio: 9 / 7;
    overflow: hidden;
    border: 2px solid var(--line);
    background-color: var(--bg);
    background-image: repeating-linear-gradient(45deg,
        rgba(19, 19, 19, .05) 0 10px, transparent 10px 20px);
}
.polaroid .ph::before {
    content: attr(data-emoji);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(3rem, 12vw, 4.5rem);
    opacity: .85;
}
.polaroid img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.polaroid .ph-contain img { object-fit: contain; padding: 22px 12px; }

/* Marco de navegador: para capturas de webs muy panorámicas.
   La barra falsa hace que el recorte se lea como una ventana, no como un error. */
.browser-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    z-index: 3;
    background: var(--bg);
    border-bottom: 2px solid var(--line);
}
.browser-bar::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 13px 0 0 var(--yellow), 26px 0 0 var(--green);
}
.polaroid .ph-browser {
    background-color: #0D0D0F;
    background-image: none;
}
/* contain, no cover: así la captura se ve entera sea cual sea su proporción */
.polaroid .ph-browser img {
    padding-top: 26px;
    object-fit: contain;
    object-position: center;
}
.polaroid .ph-browser::before { color: #FAF3E3; padding-top: 26px; }
.polaroid:hover img { transform: scale(1.1) rotate(1deg); }
.polaroid.img-fail img { display: none; }

.p-cap { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 10px; }
.p-cap b { font-family: var(--font-head); font-size: .95rem; text-transform: uppercase; }
.p-act {
    font-size: .75rem;
    font-weight: 700;
    background: var(--inv-bg);
    color: var(--inv-fg);
    padding: 5px 12px;
    border-radius: 20px;
    opacity: 0;
    transform: translateX(8px);
    transition: .3s;
    white-space: nowrap;
}
.polaroid:hover .p-act, .polaroid:focus-visible .p-act { opacity: 1; transform: translateX(0); }
@media (hover: none) { .p-act { opacity: 1; transform: none; } }

/* ---------- 18. PROCESO ---------- */
.process {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 34px 30px;
    counter-reset: paso;
    list-style: none;
}
.step {
    counter-increment: paso;
    background: var(--paper);
    border: var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 44px 22px 26px;
    position: relative;
    transition: transform .3s;
}
.step:hover { transform: translateY(-8px); }
.step::before {
    content: "0" counter(paso);
    position: absolute;
    top: -24px;
    left: 18px;
    font-family: var(--font-head);
    font-size: 1.6rem;
    background: var(--pink);
    color: var(--on-accent);
    border: var(--border);
    border-radius: 14px;
    padding: 6px 14px;
    box-shadow: var(--shadow-sm);
    transform: rotate(-4deg);
}
.step:nth-child(2)::before { background: var(--cyan); }
.step:nth-child(3)::before { background: var(--yellow); }
.step:nth-child(4)::before { background: var(--green); }
.step h3 { font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 10px; text-transform: uppercase; }
.step p { color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* ---------- 19. PACKS ---------- */
.packs {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 30px;
    align-items: stretch;
}
.pack {
    background: var(--paper);
    border: var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .3s, box-shadow .3s;
}
.pack:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }

.pack.featured {
    /* Tarjeta siempre amarilla: tokens locales para mantener contraste en modo oscuro */
    --ink: #131313;
    --muted: #4A4A4A;
    --line: #131313;
    --paper: #FFFFFF;
    background: var(--yellow);
    color: #131313;
    scale: 1.03;
}
.pack.featured:hover { scale: 1.03; }

.pack-ribbon {
    position: absolute;
    top: -16px;
    right: 18px;
    background: var(--pink);
    color: var(--on-accent);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: var(--border);
    border-radius: 30px;
    padding: 6px 16px;
    box-shadow: var(--shadow-sm);
    transform: rotate(3deg);
}
.pack h3 { font-family: var(--font-head); font-size: 1.3rem; text-transform: uppercase; margin-bottom: 6px; }
.pack .price { font-family: var(--font-head); font-size: 2.2rem; margin: 10px 0 4px; }
.pack .price small { font-size: .9rem; color: var(--muted); font-family: var(--font-body); font-weight: 700; }
.pack ul { list-style: none; margin: 20px 0 26px; display: grid; gap: 12px; flex: 1; }
.pack li { font-size: .93rem; font-weight: 500; padding-left: 28px; position: relative; }
.pack li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: var(--green);
    color: var(--on-accent);
    border: 2px solid var(--line);
    border-radius: 6px;
    font-size: .7rem;
    display: grid;
    place-items: center;
}

/* ---------- 20. ENVÍOS ---------- */
.ship-box {
    max-width: 900px;
    margin: 0 auto;
    background: var(--paper);
    border: var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: clamp(34px, 6vw, 50px) 24px;
    text-align: center;
}
.ship-box h3 { font-family: var(--font-head); font-size: 1.3rem; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; list-style: none; }
.chip {
    border: var(--border);
    border-radius: 40px;
    padding: 10px 22px;
    font-weight: 700;
    font-size: .92rem;
    background: var(--bg);
    box-shadow: var(--shadow-sm);
    transition: transform .25s, background-color .25s, color .25s;
}
.chip:hover { transform: translateY(-4px) rotate(-2deg); background: var(--cyan); color: var(--on-accent); }
.chip.intl { background: var(--purple); color: #fff; }
.chip.intl:hover { background: var(--purple); }
.ship-note { margin-top: 22px; color: var(--muted); font-size: .9rem; }
.ship-cta { margin-top: 26px; }

/* ---------- 21. TESTIMONIOS ---------- */
.t-wrap { max-width: 760px; margin: 0 auto; }
.t-slider { display: grid; }
.t-slide {
    grid-area: 1 / 1;
    background: var(--paper);
    border: var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    opacity: 0;
    transform: translateY(24px) rotate(2deg) scale(.97);
    transition: opacity .6s ease, transform .6s ease;
    pointer-events: none;
    visibility: hidden;
}
.t-slide.is-active {
    opacity: 1;
    transform: translateY(0) rotate(-1deg) scale(1);
    pointer-events: auto;
    visibility: visible;
}
html:not(.js) .t-slide { opacity: 1; visibility: visible; transform: none; position: static; }

.t-stars { font-size: 1.2rem; letter-spacing: 5px; color: var(--t-orange); }
.t-text { font-size: 1.05rem; line-height: 1.7; font-style: italic; }
.t-author {
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: 1px;
    background: var(--yellow);
    color: var(--on-accent);
    border: 2px solid var(--line);
    border-radius: 20px;
    padding: 5px 14px;
}

.t-dots { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.t-dot {
    width: 16px;
    height: 16px;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    transition: .3s;
    cursor: pointer;
    padding: 0;
}
.t-dot[aria-selected="true"] { background: var(--pink); transform: scale(1.25); }

/* ---------- 22. FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item {
    background: var(--paper);
    border: var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    overflow: hidden;
}
.faq-item h3 { margin: 0; font-size: 1rem; }
.faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.faq-q .ico {
    font-size: 1.4rem;
    font-weight: 900;
    transition: transform .35s, background-color .3s;
    background: var(--yellow);
    color: var(--on-accent);
    border: 2px solid var(--line);
    border-radius: 10px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    line-height: 1;
}
.faq-item.open .ico { transform: rotate(45deg); background: var(--pink); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > p { overflow: hidden; color: var(--muted); line-height: 1.65; font-size: .95rem; padding-inline: 20px; }
.faq-item.open .faq-a > p { padding-bottom: 20px; }
html:not(.js) .faq-a { grid-template-rows: 1fr; }
html:not(.js) .faq-a > p { padding-bottom: 20px; }

/* ---------- 23. CALCULADORA ---------- */
.calc {
    max-width: 860px;
    margin: 0 auto;
    background: var(--paper);
    border: var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    padding: clamp(22px, 4vw, 34px) clamp(16px, 3vw, 26px);
}
.calc-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 6px;
    border-bottom: 2px dashed var(--muted);
    flex-wrap: wrap;
}
.cr-icon {
    width: 54px;
    height: 54px;
    border: var(--border);
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.cr-info { flex: 1; min-width: 130px; }
.cr-info b { font-family: var(--font-head); font-size: .98rem; text-transform: uppercase; display: block; }
.cr-info small { color: var(--muted); font-weight: 700; font-size: .78rem; }

.stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    border: var(--border);
    border-radius: 40px;
    padding: 6px 8px;
    background: var(--bg);
    box-shadow: var(--shadow-sm);
}
.stepper button {
    width: 34px;
    height: 34px;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--yellow);
    color: var(--on-accent);
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;
    transition: .2s;
    line-height: 1;
    flex-shrink: 0;
}
.stepper button:hover { background: var(--pink); transform: scale(1.1); }
.stepper .qty {
    width: 58px;
    text-align: center;
    font-family: var(--font-head);
    font-size: 1.05rem;
    border: none;
    background: transparent;
    color: var(--ink);
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
.stepper .qty::-webkit-outer-spin-button,
.stepper .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cr-sub {
    min-width: 96px;
    text-align: right;
    font-family: var(--font-head);
    font-size: 1.05rem;
    margin-left: auto;
}
.cr-disc {
    display: inline-block;
    margin-left: 8px;
    background: var(--green);
    color: var(--on-accent);
    border: 2px solid var(--line);
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 10px;
    opacity: 0;
    transform: scale(.6);
    transition: .3s;
}
.cr-disc.on { opacity: 1; transform: scale(1); }

.calc-total { padding-top: 24px; }
.ct-line { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: .95rem; color: var(--muted); padding: 6px 4px; }
.ct-line.disc b { color: var(--t-green); }
.ct-line.total {
    align-items: center;
    margin-top: 10px;
    padding: 16px 14px;
    background: var(--panel-bg);
    color: var(--panel-fg);
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--pink);
    font-size: 1rem;
    text-transform: uppercase;
}
.ct-line.total b { font-family: var(--font-head); font-size: clamp(1.3rem, 5vw, 1.7rem); color: var(--yellow); }
.ct-line.total b.pop { animation: pop .35s ease; }
@keyframes pop { 50% { transform: scale(1.18); } }

.calc-note { font-size: .78rem; color: var(--muted); margin: 14px 0 20px; line-height: 1.5; }
#calcWa { width: 100%; }
#calcWa.shake { animation: shake .4s ease; }
@keyframes shake {
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
}
.calc-error { margin-top: 12px; color: var(--t-pink); font-weight: 700; font-size: .88rem; text-align: center; }

@media (max-width: 560px) {
    .calc-row { gap: 10px; }
    .cr-sub { min-width: 100%; text-align: left; padding-left: 68px; margin-left: 0; }
}

/* ---------- 24. CONTACTO Y FORMULARIO ---------- */
.cta-box {
    max-width: 900px;
    margin: 0 auto;
    background: var(--panel-bg);
    color: var(--panel-fg);
    border: var(--border);
    border-radius: var(--r);
    box-shadow: 10px 10px 0 var(--pink);
    padding: clamp(38px, 7vw, 60px) 24px;
    text-align: center;
}
.cta-box h2 { font-family: var(--font-head); font-size: clamp(1.8rem, 6vw, 3rem); text-transform: uppercase; color: var(--yellow); margin-bottom: 16px; }
.cta-box > p { max-width: 520px; margin: 0 auto 30px; color: var(--panel-muted); line-height: 1.7; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.form-wrap {
    max-width: 620px;
    margin: 44px auto 0;
    background: var(--paper);
    border: var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: clamp(26px, 5vw, 40px) clamp(18px, 4vw, 30px);
}
.form-wrap h3 { font-family: var(--font-head); text-align: center; margin-bottom: 24px; text-transform: uppercase; }

.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 14px 16px;
    border: var(--border);
    border-radius: 12px;
    background: var(--bg);
    font-family: var(--font-body);
    font-size: 1rem;         /* 16px evita el zoom automático en iOS */
    color: var(--ink);
    transition: box-shadow .2s, transform .2s, background-color .2s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    box-shadow: var(--shadow-sm);
    transform: translate(-2px, -2px);
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row .invalid { border-color: var(--t-pink); }

.form-error { color: var(--t-pink); font-weight: 700; font-size: .88rem; margin-bottom: 14px; }
.form-send { width: 100%; }
.form-note { font-size: .76rem; color: var(--muted); text-align: center; margin-top: 12px; }

/* ---------- 25. FOOTER ---------- */
footer {
    background: var(--panel-bg);
    color: var(--panel-fg);
    border-top: var(--border);
    padding: 70px 22px calc(130px + env(safe-area-inset-bottom));
    text-align: center;
    position: relative;
    z-index: 2;
}
footer .f-logo {
    width: 84px;
    height: 84px;
    object-fit: contain;
    margin: 0 auto 18px;
    border: 3px solid var(--yellow);
    border-radius: 20px;
    background: #fff;
    box-shadow: 6px 6px 0 var(--pink);
    transition: transform .4s;
}
footer .f-logo:hover { transform: rotate(-6deg) scale(1.08); }
footer .brand { font-family: var(--font-head); font-size: 1.6rem; color: var(--yellow); text-transform: uppercase; margin-bottom: 12px; }
footer .f-desc { color: var(--panel-muted); max-width: 460px; margin: 0 auto; line-height: 1.7; font-size: .95rem; }

.footer-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 26px 0; }
.footer-links a {
    color: var(--panel-fg);
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;
    border: 2px solid var(--panel-fg);
    border-radius: 30px;
    padding: 8px 18px;
    transition: .25s;
}
.footer-links a:hover { background: var(--yellow); color: #131313; border-color: var(--yellow); transform: translateY(-3px); }
.footer-copy { color: var(--panel-muted); font-size: .82rem; margin-top: 18px; }

/* ---------- 26. FLOTANTES ---------- */
.wa-float {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    right: 20px;
    width: 62px;
    height: 62px;
    background: var(--wa);
    border: var(--border);
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 950;
    box-shadow: var(--shadow);
    text-decoration: none;
    opacity: 0;
    transform: scale(.4) rotate(-90deg);
    transition: opacity .5s cubic-bezier(.34, 1.56, .64, 1), transform .5s cubic-bezier(.34, 1.56, .64, 1);
    visibility: hidden;
}
.wa-float.show { opacity: 1; transform: scale(1) rotate(0); visibility: visible; }
.wa-float:hover { transform: scale(1.1) rotate(6deg); }
.wa-float svg { width: 32px; height: 32px; fill: #0B3D22; }
.wa-float::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid var(--wa);
    animation: waPing 1.8s ease infinite;
    pointer-events: none;
}
@keyframes waPing {
    0% { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.6); opacity: 0; }
}

#backTop {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    left: 20px;
    width: 52px;
    height: 52px;
    border: var(--border);
    border-radius: 14px;
    background: var(--yellow);
    color: var(--on-accent);
    box-shadow: var(--shadow-sm);
    font-size: 1.3rem;
    font-weight: 900;
    z-index: 950;
    opacity: 0;
    transform: translateY(20px);
    transition: .4s;
    cursor: pointer;
    visibility: hidden;
}
#backTop.show { opacity: 1; transform: translateY(0); visibility: visible; }
#backTop:hover { background: var(--pink); }

/* ---------- 27. TARJETA DE AGRADECIMIENTO ---------- */
.w-dialog {
    border: none;
    background: transparent;
    padding: 20px;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    overflow: auto;
}
/* Ojo: el display SOLO se define en [open]. Si se pone en la regla base,
   se anula el "display:none" que el navegador aplica a <dialog> cerrado
   y la tarjeta queda tapando la web para siempre. */
.w-dialog[open] { display: grid; place-items: center; }
.w-dialog::backdrop {
    background: radial-gradient(ellipse at center, rgba(24, 19, 9, .9), rgba(8, 6, 3, .97));
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.w-dialog[open] .w-card { animation: wIn 1s cubic-bezier(.16, 1, .3, 1) both; }
.w-dialog.closing { opacity: 0; transition: opacity .45s ease; }

.w-card {
    position: relative;
    max-width: 530px;
    width: 100%;
    background: #FBF7EE;
    border: 1px solid #C9A227;
    outline: 3px double #C9A227;
    outline-offset: 7px;
    border-radius: 4px;
    padding: clamp(34px, 7vw, 50px) clamp(22px, 5vw, 34px) 40px;
    text-align: center;
    color: #5a5140;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
    overflow: hidden;
}
@keyframes wIn {
    from { opacity: 0; transform: translateY(46px) scale(.92); }
    to { opacity: 1; transform: none; }
}

.w-spark { position: absolute; color: #C9A227; font-size: .9rem; animation: wTwinkle 2.6s ease infinite; }
.w-spark.p1 { top: 14px; left: 18px; }
.w-spark.p2 { top: 14px; right: 18px; animation-delay: -.8s; }
.w-spark.p3 { bottom: 14px; left: 18px; animation-delay: -1.6s; }
.w-spark.p4 { bottom: 14px; right: 18px; animation-delay: -2.2s; }
@keyframes wTwinkle {
    0%, 100% { opacity: .25; transform: scale(.8) rotate(0); }
    50% { opacity: 1; transform: scale(1.25) rotate(20deg); }
}

.w-orn { color: #C9A227; letter-spacing: 10px; font-size: 1rem; margin-bottom: 16px; animation: wFade 1s .3s both; }
.w-logo {
    width: 78px;
    height: 78px;
    object-fit: contain;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 2px solid #C9A227;
    padding: 9px;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(201, 162, 39, .15);
    animation: wFade 1s .45s both;
}
.w-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    color: #2b2416;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: wFade 1s .6s both;
}
.w-line {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C9A227, transparent);
    margin: 18px auto;
    animation: wLine 1.2s .85s forwards;
}
@keyframes wLine { to { width: 72%; } }

.w-text { font-family: 'Playfair Display', Georgia, serif; font-size: 1.02rem; line-height: 1.85; animation: wFade 1s 1s both; }
.w-text b { color: #2b2416; }
.w-text2 { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.05rem; color: #9a7a15; margin-top: 14px; animation: wFade 1s 1.15s both; }
.w-sign { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: .9rem; color: #7a6d4c; margin-top: 8px; animation: wFade 1s 1.3s both; }

.w-btn {
    margin-top: 26px;
    font-family: var(--font-body);
    background: #2b2416;
    color: #F3D98B;
    border: 1px solid #C9A227;
    padding: 15px 38px;
    border-radius: 50px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
    animation: wFade 1s 1.45s both;
}
.w-btn:hover { background: #C9A227; color: #2b2416; box-shadow: 0 0 35px rgba(201, 162, 39, .55); transform: translateY(-2px); }
.w-skip-hint { margin-top: 14px; font-size: .7rem; color: #8a7d5c; letter-spacing: 1px; font-family: var(--font-body); animation: wFade 1s 1.6s both; }
@keyframes wFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 28. PROMO ---------- */
.gp-promo {
    border: none;
    background: transparent;
    padding: 20px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}
.gp-promo[open] { display: grid; place-items: center; }
.gp-promo::backdrop { background: rgba(10, 8, 4, .75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.gp-promo-card {
    position: relative;
    max-width: 440px;
    width: 100%;
    background: var(--paper);
    color: var(--ink);
    border: var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-lg), 0 30px 80px rgba(0, 0, 0, .5);
    padding: 52px 24px 32px;
    text-align: center;
}
.gp-promo[open] .gp-promo-card { animation: promoIn .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes promoIn {
    from { transform: scale(.6) rotate(-6deg); opacity: 0; }
    to { transform: scale(1) rotate(-1deg); opacity: 1; }
}

.gp-promo-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    background: var(--pink);
    color: var(--on-accent);
    border: var(--border);
    border-radius: 30px;
    padding: 9px 22px;
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: var(--shadow-sm);
    font-size: .85rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.gp-promo-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    transition: .2s;
}
.gp-promo-x:hover { background: var(--pink); color: var(--on-accent); transform: rotate(90deg); }

.gp-promo-card h2 { font-family: var(--font-head); font-size: 1.55rem; margin: 14px 0 12px; text-transform: uppercase; }
.gp-promo-desc { color: var(--muted); line-height: 1.65; font-size: .97rem; }
.gp-promo-timer {
    margin: 18px auto;
    display: inline-block;
    background: var(--panel-bg);
    color: var(--panel-fg);
    font-weight: 700;
    border-radius: 12px;
    padding: 11px 20px;
    box-shadow: 4px 4px 0 var(--pink);
    font-size: .9rem;
}
.gp-promo-timer b { font-family: var(--font-head); font-size: 1.1rem; color: var(--yellow); }
.gp-promo-card .btn { display: flex; }
.gp-promo-note { display: block; margin-top: 14px; color: var(--muted); font-size: .75rem; line-height: 1.5; }

.gp-promo-tab {
    position: fixed;
    top: 110px;
    right: 0;
    z-index: 940;
    background: var(--pink);
    color: var(--on-accent);
    border: var(--border);
    border-right: none;
    border-radius: 14px 0 0 14px;
    padding: 11px 16px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .8rem;
    box-shadow: -4px 4px 0 var(--line);
    transform: translateX(110%);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    visibility: hidden;
}
.gp-promo-tab.show { transform: translateX(0); visibility: visible; animation: gpTabPulse 2.4s ease infinite 1s; }
.gp-promo-tab.show:hover { transform: translateX(-4px) scale(1.04); animation: none; }
@keyframes gpTabPulse { 50% { transform: translateX(-3px) scale(1.04); } }

/* ---------- 29. AVISOS (toast) ---------- */
.gp-toast {
    position: fixed;
    left: 16px;
    bottom: 100px;
    z-index: 940;
    background: var(--paper);
    color: var(--ink);
    border: var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 12px 18px;
    font-size: .82rem;
    font-weight: 700;
    max-width: 280px;
    opacity: 0;
    transform: translate(-20px, 20px);
    transition: opacity .5s cubic-bezier(.34, 1.56, .64, 1), transform .5s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
    line-height: 1.45;
    visibility: hidden;
}
.gp-toast.on { opacity: 1; transform: none; visibility: visible; }

@media (max-width: 620px) {
    .gp-toast {
        left: 50%;
        right: auto;
        bottom: 100px;
        transform: translate(-50%, 20px);
        max-width: calc(100vw - 40px);
    }
    .gp-toast.on { transform: translate(-50%, 0); }
}

/* ---------- 30. LLUVIA DE STICKERS ---------- */
.rain {
    position: fixed;
    top: -60px;
    z-index: 8000;
    font-size: 2rem;
    pointer-events: none;
    animation: rainFall linear forwards;
}
@keyframes rainFall {
    to { transform: translateY(110vh) rotate(720deg); opacity: .9; }
}

/* ---------- 31. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .js .reveal, .js .h-inner, .js .hero-sub, .js .hero-actions, .js .scroll-hint {
        opacity: 1 !important;
        transform: none !important;
    }
    .hl { background-size: 100% 88% !important; }
    .float-sticker, .marquee-track, .pre-star, .wa-float::after { animation: none !important; }
}

/* ---------- 32. IMPRESIÓN ---------- */
@media print {
    .nav, .mobile-menu, .wa-float, #backTop, .gp-promo-tab, .gp-toast,
    #particles, #preloader, #progressBar, .gp-cursor, .gp-cursor-ring,
    .marquee, .scroll-hint { display: none !important; }
    body { background: #fff; color: #000; }
    .reveal { opacity: 1 !important; transform: none !important; }
}