/* ==========================================================================
   INSTANTIA — style.css
   Paleta "aurora": fondo tinta violeta casi negro, degradado rosa → violeta
   → cian como firma de marca, durazno cálido para cifras y etiquetas.
   Tipografía: Bricolage Grotesque (títulos de landing/asistente), Fraunces
   (página del regalo, tono romántico) y Manrope (texto de interfaz).
   ========================================================================== */

:root{
  --bg-0:#07040d;
  --bg-1:#0b0614;
  --bg-2:#150a24;
  --red:#ff4f8b;                       /* acento principal (rosa vibrante) */
  --red-deep:#e11d74;
  --red-soft: rgba(255,79,139,.32);
  --gold:#ffc978;                      /* detalles cálidos: etiquetas, cifras */
  --violet:#9d6bff;
  --violet-soft: rgba(157,107,255,.3);
  --cyan:#5ee7df;                      /* contrapunto frío del degradado */
  --cyan-soft: rgba(94,231,223,.22);
  --text:#f6f1ff;
  --muted:#b6abcc;
  --glass: rgba(255,255,255,.06);
  --glass-strong: rgba(255,255,255,.09);
  --glass-border: rgba(255,255,255,.14);
  --grad: linear-gradient(120deg, #ff4f8b 0%, #9d6bff 55%, #5ee7df 100%);
  --cta: linear-gradient(120deg, #e11d74 0%, #7c3aed 100%);   /* texto blanco ≥ 4.5:1 */
  --radius: 20px;
  --font-display:'Fraunces', serif;                      /* romántico: página del regalo */
  --font-head:'Bricolage Grotesque', 'Manrope', sans-serif;  /* moderno: landing y asistente */
  --font-body:'Manrope', sans-serif;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ background:var(--bg-0); }

/* Todos los <button> del sitio pierden el "chrome" nativo del sistema
   operativo (en Windows/Chrome puede pintar un rectángulo oscuro detrás
   de un botón con esquinas redondeadas si no se desactiva `appearance`).
   Sin esto, los botones "Avanzar" quedan con un recuadro negro alrededor
   aunque el CSS propio (degradado, radio, sombra) esté bien. */
button{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-color:transparent; margin:0; color:inherit;
}

body{
  margin:0; min-height:100dvh;
  background:
    radial-gradient(55% 38% at 12% 0%, var(--violet-soft), transparent 60%),
    radial-gradient(50% 35% at 100% 15%, var(--red-soft), transparent 55%),
    radial-gradient(45% 30% at 50% 100%, var(--cyan-soft), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 40%, var(--bg-2) 100%);
  line-height:1.5;
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
::selection{ background:var(--red); color:#fff; }

#particles{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.view{ position:relative; z-index:1; }

/* Lluvia de corazones y flores — fondo de la página final del regalo
   (mismo efecto ambiental que la demo; el contenido de .app va por encima). */
.gift-heart-rain{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.eyebrow{ font-size:13px; letter-spacing:.14em; color:var(--gold); margin:0 0 14px; font-weight:600; }
.section-title{ font-family:var(--font-display); font-weight:500; font-style:italic; font-size:clamp(26px,7vw,38px); margin:0 0 22px; }

.btn{
  border:none; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:16px;
  border-radius:999px; padding:15px 28px; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; touch-action:manipulation;
  transition:transform .18s var(--ease-out), box-shadow .25s ease, background-color .2s ease;
}
.ico{ width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn:disabled{ opacity:.65; cursor:wait; }
.btn-primary{ color:#fff; background:var(--cta); box-shadow:0 10px 30px rgba(225,29,116,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(225,29,116,.45), inset 0 1px 0 rgba(255,255,255,.2); }
  .btn-ghost:hover{ background:rgba(255,255,255,.13); }
}
.btn-lg{ padding:18px 40px; font-size:17px; }
.btn-ghost{ color:var(--text); background:var(--glass); border:1px solid var(--glass-border); }
.btn-block{ width:100%; max-width:380px; display:flex; }

/* ============================== WIZARD ============================== */
.wiz-back{ background:var(--glass); border:1px solid var(--glass-border); color:var(--text); width:38px; height:38px; border-radius:50%; font-size:18px; cursor:pointer; flex:none; }
.progress{ flex:1; height:6px; background:var(--glass); border-radius:999px; overflow:hidden; }
.progress-fill{ height:100%; width:12.5%; background:var(--grad); transition:width .45s var(--ease-out); }
.wiz-step-count{ font-size:12px; color:var(--muted); flex:none; }

.steps-container{ flex:1; display:flex; }
.step{ width:100%; animation:stepIn .35s ease; }
@keyframes stepIn{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:translateX(0); } }

.step-title{ font-family:var(--font-head); font-weight:700; letter-spacing:-.02em; font-size:clamp(28px,7.5vw,36px); line-height:1.1; margin:0 0 8px; }
.step-sub{ color:var(--muted); font-size:14px; margin:0 0 26px; }

.field-label{ font-size:13px; color:var(--gold); margin:0 0 8px; font-weight:600; }
.field-optional{ color:var(--muted); font-weight:400; text-transform:none; }
.field{ margin-bottom:18px; }
.input, .textarea{
  width:100%; background:rgba(255,255,255,.04); border:1.5px solid var(--glass-border);
  border-radius:14px; padding:14px 16px; color:var(--text); font-family:var(--font-body);
  font-size:16px; outline:none; transition:border-color .2s ease;
}
.input:focus, .textarea:focus{ border-color:var(--red); }
.textarea{ min-height:120px; resize:vertical; }
.field-error{ color:var(--red); font-size:12px; margin-top:6px; display:none; }
.field.invalid .input, .field.invalid .textarea{ border-color:var(--red); }
.field.invalid .field-error{ display:block; }


.date-row{ display:flex; gap:8px; margin-bottom:18px; }
.select-wrap{ flex:1; display:flex; flex-direction:column; gap:6px; }
.select-wrap > span{ font-size:12px; color:var(--gold); font-weight:600; padding-left:2px; }
.select{
  width:100%; font-size:16px; font-family:var(--font-body); color:var(--text);
  background-color:#1a1029;                     /* opaco: evita que se vea "en blanco" sobre el fondo */
  border:1.5px solid var(--glass-border); border-radius:12px;
  padding:13px 34px 13px 14px; cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23ffc978' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
  transition:border-color .18s ease;
}
.select:focus{ outline:none; border-color:var(--red); }
.select option{ background:#1a1029; color:var(--text); }   /* fuerza contraste del desplegable */

.phone-row{ display:flex; gap:8px; align-items:center; }
.phone-country{
  flex:0 0 92px; padding:14px 26px 14px 12px; border-radius:14px;
  text-align:center; text-align-last:center; background-position:right 8px center;
}
.phone-number{ flex:1; margin:0; }

/* ---------- checkbox legal (Términos de Uso / Política de Privacidad) ---------- */
.legal-check{ display:flex; align-items:flex-start; gap:12px; margin:4px 0 6px; }
.legal-checkbox{ opacity:0; width:0; height:0; position:absolute; }
.legal-box{
  position:relative; flex:none; width:22px; height:22px; margin-top:2px;
  border-radius:7px; background:var(--glass); border:1.5px solid var(--glass-border);
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.legal-box::after{
  content:''; position:absolute; left:7px; top:3px; width:6px; height:11px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  opacity:0; transition:opacity .12s ease;
}
.legal-checkbox:checked + .legal-box{ background:var(--red); border-color:var(--red); }
.legal-checkbox:checked + .legal-box::after{ opacity:1; }
.legal-checkbox:focus-visible + .legal-box{ box-shadow:0 0 0 3px var(--red-soft); }
.legal-check.invalid .legal-box{ border-color:var(--red); box-shadow:0 0 0 2px rgba(255,79,139,.35); }
.legal-text{ margin:0; font-size:13px; line-height:1.55; color:var(--muted); }
.legal-link{
  background:none; border:none; padding:0; margin:0; color:var(--gold); font:inherit;
  font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.legal-link:hover{ color:var(--red); }
.legal-error{ color:var(--red); font-size:12px; margin:0 0 18px 34px; }

/* ---------- modal: Términos de Uso / Política de Privacidad ---------- */
.legal-modal{
  position:fixed; inset:0; z-index:40; background:rgba(3,1,7,.92); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .25s ease;
}
.legal-modal-panel{
  position:relative; width:100%; max-width:640px; max-height:min(84vh, 720px);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--bg-0);
  border:1px solid var(--glass-border); border-radius:22px; padding:26px 20px 20px;
  display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.legal-modal-panel .modal-close{ position:absolute; top:14px; right:14px; }
.legal-modal-tabs{ display:flex; gap:8px; margin:8px 0 16px; padding-right:44px; }
.legal-tab{
  flex:1; padding:10px 10px; border-radius:12px; background:var(--glass); border:1px solid transparent;
  color:var(--muted); font-family:var(--font-body); font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.legal-tab.is-active{ background:rgba(255,201,120,.14); color:var(--gold); border-color:var(--gold); }
.legal-modal-body{ overflow-y:auto; padding-right:8px; }
.legal-article h3{
  font-family:var(--font-display); font-style:italic; font-weight:500; color:var(--text);
  font-size:19px; margin:22px 0 8px;
}
.legal-article h3:first-child{ margin-top:0; }
.legal-article p, .legal-article li{ font-size:13.5px; line-height:1.65; color:var(--muted); margin:0 0 10px; }
.legal-article strong{ color:var(--text); }
.legal-article a{ color:var(--gold); }
.legal-article ul{ margin:0 0 14px; padding-left:18px; }

.media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.media-thumb{ position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; border:1px solid var(--glass-border); }
.media-thumb img, .media-thumb video{ width:100%; height:100%; object-fit:cover; }
.media-thumb .rm{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:none; font-size:12px; cursor:pointer; }
.media-add-row{ display:flex; gap:8px; }
.media-add-row .input{ flex:1; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 18px; }
.chip{ font-size:13px; padding:8px 14px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-border); color:var(--muted); cursor:pointer; }
.chip:active{ transform:scale(.96); }

.color-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px; }
.color-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px;
  border-radius:14px; background:var(--glass); border:1.5px solid var(--glass-border); cursor:pointer;
  color:var(--text); font-family:var(--font-body); font-size:13px;   /* es un <button>: sin esto el texto sale negro por defecto */
}
.color-card.selected{ border-color:var(--gold); background:rgba(255,201,120,.14); box-shadow:inset 0 0 0 1px var(--gold); }
.color-dot{ width:26px; height:26px; border-radius:50%; }

.switch-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 4px; border-bottom:1px solid var(--glass-border); }
.switch-row:last-of-type{ border-bottom:none; }
.switch-row b{ display:block; font-size:14px; }
.switch-row span{ font-size:12px; color:var(--muted); }
.switch{ position:relative; width:46px; height:26px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch-track{ position:absolute; inset:0; background:var(--glass-border); border-radius:999px; transition:.2s; cursor:pointer; }
.switch-track::before{ content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .switch-track{ background:var(--red); }
.switch input:checked + .switch-track::before{ transform:translateX(20px); }

.price-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.price-card{
  position:relative; border:1.5px solid var(--glass-border); border-radius:16px; padding:16px 18px;
  cursor:pointer; background:var(--glass);
  color:var(--text); font-family:var(--font-body); text-align:left;   /* es un <button>: sin esto el nombre del plan sale negro */
}
.price-card.selected{ border-color:var(--gold); background:rgba(255,201,120,.08); }
.price-badge{ position:absolute; top:-11px; left:14px; background:var(--gold); color:#1a0508; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; }
.price-top{ display:flex; justify-content:space-between; align-items:baseline; }
.price-name{ font-weight:700; font-size:15px; color:var(--text); }
.price-amount{ font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--gold); }
.price-was{ text-decoration:line-through; color:rgba(247,240,250,.55); font-size:13px; margin-right:6px; }

/* CTA del paso: siempre visible y fijo al borde inferior, pero SIN caja:
   flota transparente sobre el fondo de partículas, solo con el degradado
   y el glow propios del botón (.btn-primary). */
.wiz-cta{
  margin-top:auto; position:sticky; bottom:0; z-index:5;
  padding:16px 0 calc(8px + var(--safe-b));
}
.wiz-cta .btn-block{ margin:0 auto; display:block; }

/* ============================== RESULTADO / QR ============================== */

/* ---------- Pantalla de estado (resolviendo un link corto, o no encontrado) ---------- */
#view-status{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.status-screen{ max-width:340px; text-align:center; animation:popIn .45s ease; }
.status-emoji{ font-size:40px; margin:0 0 10px; animation:floatY 2.6s ease-in-out infinite; }
.status-title{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(22px,6vw,28px); margin:0 0 8px; }
.status-sub{ color:var(--muted); font-size:14px; margin:0 0 20px; }
.status-screen .btn{ text-decoration:none; display:inline-block; }
.result-sub{ color:var(--muted); margin:0 0 26px; }
.qr-box{ background:var(--glass); border:1px solid var(--glass-border); border-radius:20px; padding:22px; margin-bottom:16px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.qr-canvas{ display:flex; justify-content:center; background:#fff; padding:10px; border-radius:14px; }
.qr-canvas img, .qr-canvas canvas{ display:block; border-radius:6px; }
.qr-fallback{ max-width:196px; margin:0; padding:30px 10px; color:#6b5a62; font-size:13px; text-align:center; }
.qr-hint{ font-size:12px; color:var(--muted); margin:0; }
.link-row{ display:flex; gap:8px; margin-bottom:10px; }
.link-input{ flex:1; min-width:0; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:12px; padding:12px 14px; color:var(--text); font-size:13px; text-overflow:ellipsis; }
.result-id{ font-size:11px; letter-spacing:.05em; color:var(--muted); margin:0 0 18px; text-transform:uppercase; word-break:break-all; }
.share-row, .share-grid{ display:flex; gap:8px; margin-bottom:18px; }
.share-grid{ flex-direction:column; }
.share-btn{ flex:1; text-align:center; text-decoration:none; color:var(--text); background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:13px 10px; font-size:13px; font-weight:700; cursor:pointer; transition:border-color .15s ease, background-color .15s ease; }
@media (hover:hover) and (pointer:fine){ .share-btn:hover{ border-color:var(--gold); background:rgba(255,201,120,.1); } }

/* ---------- Loader romántico de "compilación" ---------- */
.gen-loader{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px; animation:fadeIn .3s ease; }
.gen-loader-orbit{ position:relative; width:118px; height:118px; display:flex; align-items:center; justify-content:center; }
.gen-loader-orbit .gen-heart{ font-size:38px; color:var(--red); animation:heartbeat 1.5s ease-in-out infinite; filter:drop-shadow(0 0 16px var(--red-soft)); }
.gen-loader-orbit i{ position:absolute; inset:0; border-radius:50%; border:2px solid transparent; border-top-color:var(--gold); animation:genSpin 1.4s linear infinite; }
.gen-loader-orbit i:nth-child(3){ inset:13px; border-top-color:var(--red); animation-duration:1.9s; animation-direction:reverse; }
.gen-loader-orbit i:nth-child(4){ inset:26px; border-top-color:var(--violet); animation-duration:2.5s; }
@keyframes genSpin{ to{ transform:rotate(360deg); } }
.gen-loader-title{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(22px,6vw,28px); margin:0; }
.gen-loader-step{ color:var(--muted); font-size:14px; margin:0; min-height:1.3em; }

/* ============================== PÁGINA DEL REGALO ============================== */
/* La vista del regalo pinta su PROPIO fondo (mismo degradado que <body>, pero
   resuelto con las variables de abajo): así cada ocasión tiñe toda la página
   —fondo, acentos, texto— sin tocar :root y sin afectar landing/asistente. */
#view-gift{
  background:
    radial-gradient(55% 38% at 12% 0%, var(--violet-soft), transparent 60%),
    radial-gradient(50% 35% at 100% 15%, var(--red-soft), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 40%, var(--bg-2) 100%);
  color:var(--text);
}

/* ---------- Temas por ocasión ----------
   Cada uno redefine la misma paleta de variables (--bg-*, --red*, --gold,
   --violet*, --text, --muted) que ya usa todo el sistema de componentes
   (botones, contador, abanico, reproductor…), así que basta con aplicar la
   clase para que absolutamente todo se retiña sin tocar ninguna otra regla. */
#view-gift.theme-mi-amor{                           /* fucsias, rojos y violetas intensos */
  --bg-0:#070308; --bg-1:#120712; --bg-2:#22091c;
  --red:#ff2f6e; --red-deep:#c81457; --red-soft:rgba(255,47,110,.35);
  --gold:#ffd166;
  --violet:#8b3ef6; --violet-soft:rgba(139,62,246,.32);
  --text:#fff0f6; --muted:#d79cc2;
}
#view-gift.theme-amigo{                             /* cálidos, dorados y vibrantes */
  --bg-0:#080502; --bg-1:#150d05; --bg-2:#26170a;
  --red:#ff8a2b; --red-deep:#d9630f; --red-soft:rgba(255,138,43,.35);
  --gold:#ffe066;
  --violet:#ff5d8f; --violet-soft:rgba(255,93,143,.3);
  --text:#fff6e6; --muted:#d8bd92;
}
#view-gift.theme-mama{                              /* rosados suaves, blancos, elegante */
  --bg-0:#0a0608; --bg-1:#180e13; --bg-2:#241219;
  --red:#ff7fb0; --red-deep:#e0568c; --red-soft:rgba(255,127,176,.3);
  --gold:#ffe7d1;
  --violet:#d7a8e0; --violet-soft:rgba(215,168,224,.28);
  --text:#fff7fa; --muted:#dcb9c8;
}
#view-gift.theme-papa{                              /* azules profundos, sobrio */
  --bg-0:#030509; --bg-1:#060c18; --bg-2:#0a1529;
  --red:#5b8dff; --red-deep:#2d57c2; --red-soft:rgba(91,141,255,.3);
  --gold:#dcc48a;
  --violet:#546a9e; --violet-soft:rgba(84,106,158,.28);
  --text:#eef2fb; --muted:#8fa0c7;
}
#view-gift.theme-cumpleanos{                        /* festivo: dorado + destellos multicolores */
  --bg-0:#07040a; --bg-1:#140a1e; --bg-2:#1f0f30;
  --red:#ff3b5c; --red-deep:#c81e4c; --red-soft:rgba(255,79,139,.35);
  --gold:#ffd166;
  --violet:#8b5cf6; --violet-soft:rgba(139,92,246,.3);
  --text:#fff8ec; --muted:#c9b8d8;
}

.app{ position:relative; z-index:1; }
.section{ min-height:100dvh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:calc(64px + var(--safe-t)) 24px calc(64px + var(--safe-b)); }

.loader{ position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:radial-gradient(60% 50% at 50% 30%, var(--red-soft), transparent 60%), var(--bg-0); padding:24px; text-align:center; }
.loader-glow{ position:absolute; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, var(--violet-soft), transparent 70%); filter:blur(10px); animation:pulseGlow 3.2s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.18); opacity:1; } }
.loader-emoji{ font-size:56px; margin:0; position:relative; animation:floatY 2.6s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.loader-title{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(26px,7vw,34px); margin:6px 0 0; position:relative; }
.loader-sub{ color:var(--muted); margin:0 0 10px; font-size:15px; position:relative; }
.tap-btn{ position:relative; border:none; cursor:pointer; padding:16px 42px; border-radius:999px; font-weight:700; font-size:16px; color:#1a0508; background:linear-gradient(135deg, var(--gold), var(--red)); box-shadow:0 8px 30px var(--red-soft); }

.display-title{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(42px,13vw,72px); line-height:1.05; margin:0 0 18px; background:linear-gradient(120deg,#fff 0%, var(--gold) 38%, var(--red) 78%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 18px var(--red-soft)) drop-shadow(0 0 2px var(--red-soft)); }
.hero-sub{ color:var(--muted); font-size:clamp(15px,4vw,18px); max-width:340px; margin:0; }
.scroll-cue{ position:absolute; bottom:calc(28px + var(--safe-b)); left:50%; transform:translateX(-50%); width:22px; height:36px; border:2px solid var(--glass-border); border-radius:14px; }
.scroll-cue span{ display:block; width:4px; height:8px; margin:6px auto 0; border-radius:2px; background:var(--gold); animation:scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(12px); opacity:0; } 100%{ opacity:0; } }

.counter-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:380px; }
.counter-tile{ background:var(--glass); border:1px solid var(--glass-border); border-radius:18px; padding:16px 6px 12px; backdrop-filter:blur(6px); }
.counter-num{ font-family:var(--font-display); font-weight:600; font-size:clamp(26px,7vw,34px); color:var(--gold); display:block; font-variant-numeric:tabular-nums; }
.counter-label{ font-size:11px; letter-spacing:.08em; color:var(--muted); }
.counter-total{ margin-top:22px; color:var(--muted); font-size:14px; max-width:320px; }
.counter-total b{ color:var(--text); }

.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:100%; max-width:420px; }
.gallery-item{ position:relative; aspect-ratio:3/4; border-radius:16px; overflow:hidden; border:1px solid var(--glass-border); cursor:pointer; }
.gallery-item img, .gallery-item video{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; background:rgba(0,0,0,.25); }

/* ---------- Abanico de fotos en bucle infinito ---------- */
.gift-fan{
  position:relative; width:100%; max-width:520px;
  height:min(56vh, 400px); margin:4px auto 0;
  overflow:hidden; cursor:grab; outline:none;
  touch-action:pan-y;                      /* el swipe horizontal lo maneja el JS */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.gift-fan:active{ cursor:grabbing; }
.gift-fan.is-single{ cursor:default; }
.gift-fan-stage{ position:absolute; inset:0; }
.gift-fan-stage.is-animating .gift-fan-card{
  transition:transform .46s cubic-bezier(.22,.8,.26,1), opacity .46s ease, filter .46s ease;
}
.gift-fan-card{
  position:absolute; left:50%; top:50%;
  width:clamp(160px, 54vw, 232px); aspect-ratio:3/4;
  border-radius:20px; overflow:hidden;
  background:var(--glass); border:1px solid var(--glass-border);
  box-shadow:0 24px 54px rgba(0,0,0,.55);
  transform:translate(-50%,-50%);
  will-change:transform, filter, opacity;
}
.gift-fan-card.is-center{ box-shadow:0 30px 70px var(--red-soft), 0 0 0 1px rgba(255,255,255,.16); cursor:pointer; }
.gift-fan-card img, .gift-fan-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; user-select:none; }
.gift-fan-play{
  position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:18px; color:#1a0508;
  background:linear-gradient(135deg, var(--gold), var(--red)); box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.gift-fan-cap{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-size:11px; font-weight:700; color:#1a0508;
  background:rgba(255,255,255,.85); padding:4px 9px; border-radius:999px;
  max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gift-fan-hint{ font-size:12px; color:var(--muted); margin:16px 0 0; }
@media (prefers-reduced-motion: reduce){ .gift-fan-stage.is-animating .gift-fan-card{ transition:none; } }

.letter-text{ max-width:340px; font-size:clamp(17px,4.4vw,20px); line-height:1.65; font-family:var(--font-display); font-style:italic; min-height:140px; white-space:pre-wrap; }
.letter-text .cursor{ display:inline-block; width:2px; height:1em; background:var(--red); margin-left:2px; vertical-align:-2px; animation:blink 1s step-start infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.song-embed{ width:100%; max-width:360px; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid var(--glass-border); }
.song-embed iframe{ width:100%; height:100%; border:0; }

/* ---------- Reproductor de YouTube en la página final del regalo ---------- */
.gift-yt{ width:100%; max-width:420px; display:flex; flex-direction:column; gap:10px; }
.gift-yt-frame{
  width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  border:1px solid var(--glass-border); background:#000;
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 40px var(--red-soft);
}
.gift-yt-frame iframe{ width:100%; height:100%; border:0; display:block; }
.gift-yt-caption{ margin:0; font-size:13px; color:var(--muted); text-align:center; }

.gift-music-toggle{
  position:fixed; right:16px; bottom:calc(16px + var(--safe-b)); z-index:25;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:1px solid var(--glass-border); background:rgba(20,10,20,.82);
  backdrop-filter:blur(8px); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.gift-music-toggle:active{ transform:scale(.92); }
@media (hover:hover) and (pointer:fine){ .gift-music-toggle:hover{ border-color:var(--gold); } }

.question-title{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(30px,8vw,44px); max-width:340px; margin:0 0 34px; }
.question-actions{ position:relative; display:flex; gap:16px; align-items:center; justify-content:center; min-height:180px; width:100%; max-width:440px; margin:0 auto; }
.btn-yes{ color:#1a0508; background:linear-gradient(135deg, var(--gold), var(--red)); box-shadow:0 8px 26px var(--red-soft); }
.btn-no{ color:var(--text); background:var(--glass); border:1px solid var(--glass-border); position:relative; }
#giftBtnNo{ transition:box-shadow .25s ease, background-color .2s ease; }   /* sin deslizar: salta (ver dodge) */
.question-actions.is-custom{ flex-direction:column; gap:12px; min-height:0; max-width:420px; margin:0 auto; }
.btn-answer{ width:100%; color:var(--text); background:var(--glass); border:1px solid var(--glass-border); }
.btn-answer:hover{ border-color:var(--red); }
.btn-answer.is-chosen{ color:#1a0508; background:linear-gradient(135deg, var(--gold), var(--red)); border-color:transparent; box-shadow:0 8px 26px var(--red-soft); }
.question-actions.is-answered .btn-answer:not(.is-chosen){ opacity:.35; }
.question-actions.is-confirming{ pointer-events:none; }
.question-actions.is-confirming .btn-answer:not(.is-chosen){ opacity:.35; }
.answer-confirm{ margin:22px auto 0; max-width:420px; padding:18px 18px 16px; border-radius:20px; background:var(--glass); border:1px solid var(--glass-border); animation:popIn .3s ease; }
.answer-confirm p{ margin:0 0 14px; font-size:15px; line-height:1.5; color:var(--text); }
.answer-confirm-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.answer-reveal{ margin-top:26px; animation:popIn .5s ease; }
@keyframes popIn{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } }
.answer-reveal p{ font-family:var(--font-display); font-style:italic; font-size:22px; color:var(--gold); }

.outro-heart{ font-size:38px; color:var(--red); margin:0 0 10px; animation:heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat{ 0%,100%{ transform:scale(1); } 25%{ transform:scale(1.18); } 40%{ transform:scale(1); } }
/* Botones del final: una columna ordenada, mismo ancho y aire entre ellos. */
.outro-actions{ display:flex; flex-direction:column; align-items:stretch; gap:14px; width:100%; max-width:300px; margin:30px auto 0; }
#gsec-outro .outro-actions .btn{ margin:0; width:100%; justify-content:center; text-decoration:none; }
.outro-actions-sep{ height:1px; margin:6px 12px; background:linear-gradient(90deg, transparent, var(--glass-border), transparent); }
.outro-actions .btn-create{ font-size:14px; opacity:.85; }

/* ============================== MODAL / CONFETI / TOAST ============================== */
.photo-modal{ position:fixed; inset:0; z-index:30; background:rgba(3,1,7,.92); backdrop-filter:blur(10px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modal-media-wrap{ max-width:100%; max-height:70dvh; }
.modal-media-wrap img, .modal-media-wrap video{ max-width:100%; max-height:70dvh; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.modal-caption{ margin-top:16px; color:var(--muted); max-width:320px; text-align:center; }
.modal-close{ position:absolute; top:calc(20px + var(--safe-t)); right:20px; width:38px; height:38px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass); color:var(--text); font-size:16px; cursor:pointer; }
.modal-nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass); color:var(--text); font-size:22px; cursor:pointer; }
.modal-prev{ left:12px; } .modal-next{ right:12px; }

.confetti-canvas{ position:fixed; inset:0; z-index:40; pointer-events:none; }

.toast{ position:fixed; left:50%; bottom:calc(24px + var(--safe-b)); transform:translateX(-50%); background:rgba(20,10,20,.95); border:1px solid var(--glass-border); color:var(--text); padding:12px 20px; border-radius:999px; font-size:13px; z-index:50; }

button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
@media (min-width:560px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); max-width:560px; } .counter-grid{ max-width:440px; } }

/* ==========================================================================
   REFINAMIENTOS DE INTERACCIÓN DEL ASISTENTE
   - Hover fluido y estable en las tarjetas de opción (sin parpadeo: la
     selección ya no re-renderiza el paso, solo togglea la clase).
   - Buscador de música interno.
   ========================================================================== */

/* Sin destello azul/gris al tocar en móvil */
button, .option-card, .color-card, .price-card, label.btn, .chip, .song-opt{
  -webkit-tap-highlight-color:transparent;
}

/* Transición continua y estable en TODAS las tarjetas seleccionables */
.option-card, .color-card, .price-card{
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.option-card:active, .color-card:active, .price-card:active{ transform:scale(.985); }

/* Hover solo en dispositivos con puntero real (no "sticky hover" en táctil) */
@media (hover:hover) and (pointer:fine){
  .option-card:hover, .price-card:hover{
    border-color:var(--red);
    background:rgba(255,79,139,.09);
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,.25);
  }
  .color-card:hover{
    border-color:var(--gold);
    background:rgba(255,201,120,.1);
    transform:translateY(-2px);
  }
  .chip:hover{ color:var(--text); border-color:var(--gold); }
}
.option-card:focus-visible, .color-card:focus-visible, .price-card:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

/* Contador de fotos añadidas */
.media-count{ font-size:12px; color:var(--muted); margin:0 0 12px; }

/* ---------- Buscador de música interno con previsualización (paso 6) ---------- */
.song-results{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.song-opt{
  display:flex; flex-direction:row; align-items:center; gap:12px;
  width:100%; text-align:left;
  background:var(--glass); border:1px solid transparent; border-radius:12px;
  padding:10px 12px; color:var(--text); font-family:var(--font-body);
  transition:border-color .15s ease, background-color .15s ease;
}
@media (hover:hover) and (pointer:fine){
  .song-opt:hover{ border-color:var(--red); background:rgba(255,79,139,.08); }
}
.song-opt-txt{ flex:1; display:flex; flex-direction:column; gap:2px; cursor:pointer; min-width:0; }
.song-opt-txt b{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-opt-txt span{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-empty{ font-size:13px; color:var(--muted); padding:8px 4px; margin:0; }

/* Miniatura + mini-reproductor de YouTube dentro del resultado del buscador */
.song-opt{ flex-wrap:wrap; }
.song-opt-thumb{ width:46px; height:34px; flex:none; border-radius:8px; object-fit:cover; background:rgba(255,255,255,.06); }
.song-opt-player{ flex-basis:100%; margin-top:10px; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:#000; }
.song-opt-player iframe{ width:100%; height:100%; border:0; display:block; }
.song-picked-thumb{ width:46px; height:46px; flex:none; border-radius:10px; object-fit:cover; }
.song-picked-disc{ display:flex; align-items:center; justify-content:center; font-size:20px; color:#1a0508; background:linear-gradient(135deg,var(--gold),var(--red)); }

/* Botón play/pause del fragmento */
.song-play{
  flex:none; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1;
  color:#1a0508; background:linear-gradient(135deg, var(--gold), var(--red));
  transition:transform .15s ease;
}
.song-play:active{ transform:scale(.9); }
.song-play:disabled{ opacity:.3; cursor:not-allowed; filter:grayscale(1); }
.song-play.is-playing{ animation:songPulse 1s ease-in-out infinite; }
@keyframes songPulse{ 0%,100%{ box-shadow:0 0 0 0 var(--red-soft); } 50%{ box-shadow:0 0 0 6px rgba(255,79,139,0); } }
.song-pick{ flex:none; }

.song-picked{
  display:flex; align-items:center; gap:12px;
  margin-top:14px; padding:12px 14px; border-radius:14px;
  background:rgba(255,201,120,.1); border:1px solid var(--gold);
}
.song-picked-txt{ flex:1; font-size:13px; line-height:1.4; min-width:0; }
.song-picked-txt b{ color:var(--text); }
.song-picked-txt span{ color:var(--muted); font-size:12px; }
.song-picked .chip{ flex:none; }

/* ---------- Tarjeta de canción en la página del regalo ---------- */
.song-card{
  display:flex; align-items:center; gap:14px;
  width:100%; max-width:360px; padding:16px 18px;
  border-radius:18px; background:var(--glass); border:1px solid transparent;
  backdrop-filter:blur(6px);
}
.song-disc, .song-art{ width:52px; height:52px; flex:none; border-radius:14px; }
.song-disc{
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#1a0508;
  background:linear-gradient(135deg, var(--gold), var(--red));
  animation:spinDisc 4s linear infinite;
}
.song-art{ object-fit:cover; }
@keyframes spinDisc{ to{ transform:rotate(360deg); } }
.song-meta{ flex:1; display:flex; flex-direction:column; gap:3px; text-align:left; min-width:0; }
.song-name{ margin:0; font-weight:700; font-size:16px; }
.song-artist{ margin:0; font-size:13px; color:var(--muted); }

/* ==========================================================================
   LANDING — nav, hero, maqueta, cómo funciona, funciones (bento),
   calculadora, precios, valoraciones, ideas, FAQ, CTA final y footer
   ========================================================================== */
#view-landing{ min-height:100dvh; overflow-x:clip; }

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--text); color:var(--bg-0); padding:10px 16px; border-radius:10px;
  font-weight:700; text-decoration:none; transition:top .2s ease;
}
.skip-link:focus{ top:12px; }
.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; }

/* ---------- Fondo aurora: tres manchas difuminadas que derivan lento ---------- */
.aurora{ position:absolute; inset:0 0 auto 0; height:120vh; z-index:0; pointer-events:none; overflow:hidden; }
.aurora span{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.55;
  will-change:transform; animation:auroraDrift 22s ease-in-out infinite alternate;
}
.aurora span:nth-child(1){ width:46vw; height:46vw; min-width:320px; min-height:320px; left:-12vw; top:-10vw; background:#ff4f8b; }
.aurora span:nth-child(2){ width:40vw; height:40vw; min-width:300px; min-height:300px; right:-10vw; top:8vh; background:#7c3aed; animation-duration:26s; animation-delay:-6s; }
.aurora span:nth-child(3){ width:34vw; height:34vw; min-width:260px; min-height:260px; left:30vw; top:55vh; background:#22b8b0; opacity:.35; animation-duration:30s; animation-delay:-12s; }
@keyframes auroraDrift{
  0%  { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(6vw,4vh,0) scale(1.12); }
  100%{ transform:translate3d(-4vw,8vh,0) scale(.95); }
}

#view-landing > *:not(.aurora):not(.skip-link){ position:relative; z-index:1; }

/* ---------- Aparición al hacer scroll (solo si hay JS y se permite movimiento) ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .reveal.is-in{ opacity:1; transform:none; }
  .steps-grid .reveal:nth-child(2), .bento .reveal:nth-child(3n+2), .lp-tips-track .reveal:nth-child(2){ transition-delay:.08s; }
  .steps-grid .reveal:nth-child(3), .bento .reveal:nth-child(3n), .lp-tips-track .reveal:nth-child(3){ transition-delay:.16s; }
}

/* ---------- Marca ---------- */
.brand{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-family:var(--font-head); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(20px,3.2vw,23px); line-height:1;
}
.brand-mark{ width:32px; height:32px; flex:none; filter:drop-shadow(0 6px 16px rgba(157,107,255,.45)); }
.brand-sm{ font-size:20px; }

/* ---------- Barra de navegación fija con vidrio ---------- */
.lp-nav{
  position:sticky !important; top:0; z-index:30 !important;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1180px; margin:0 auto; padding:calc(12px + var(--safe-t)) 20px 12px;
  transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.lp-nav.is-scrolled{
  max-width:none;
  background:rgba(11,6,20,.72); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(0,0,0,.25);
}
.lp-links{ display:none; gap:4px; }
.lp-links a{
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:600;
  padding:10px 14px; border-radius:999px; transition:color .15s ease, background-color .15s ease;
}
.lp-links a:hover{ color:var(--text); background:var(--glass); }
.lp-links a:focus-visible, .brand:focus-visible, .lp-foot-col a:focus-visible, .faq summary:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn-sm{ padding:10px 18px; font-size:14px; min-height:44px; }

/* ---------- Hero ---------- */
.lp-hero{
  max-width:1180px; margin:0 auto; padding:28px 20px 56px;
  display:flex; flex-direction:column; align-items:center; gap:48px;
}
.landing-hero{ text-align:center; max-width:600px; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--glass); border:1px solid var(--glass-border); padding:8px 14px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--text); margin:0 0 22px;
}
.badge-dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px var(--cyan-soft); animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse{ 50%{ box-shadow:0 0 0 7px rgba(94,231,223,0); } }
.landing-title{
  font-family:var(--font-head); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(40px,10.5vw,76px); line-height:1.02; margin:0 0 20px; text-wrap:balance;
}
.landing-title .hl{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rotator{ display:inline-grid; justify-items:center; align-items:baseline; }
/* Todas las frases ocupan la misma celda: el bloque mide lo que la más larga
   y el título no cambia de alto al rotar (sin saltos en el teléfono). */
.rotator > *{ grid-area:1 / 1; }
.rotator .rotator-sizer{ visibility:hidden; pointer-events:none; }
.rotator em, .rotator .rotator-sizer{
  display:inline-block; font-family:var(--font-display); font-style:italic; font-weight:500; letter-spacing:-.01em;
  color:var(--gold); transition:opacity .3s ease, transform .3s var(--ease-out);
}
.rotator em.is-out{ opacity:0; transform:translateY(12px); }
.landing-sub{ color:var(--muted); font-size:clamp(16px,2.2vw,18px); line-height:1.65; margin:0 auto 30px; max-width:520px; }
.landing-sub b{ color:var(--text); }
.landing-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.btn-lg{ padding:17px 30px; font-size:17px; min-height:56px; }
.hero-proof{ list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center; }
.hero-proof li{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.hero-proof .ico{ color:var(--cyan); }

/* ---------- Maqueta de teléfono + chips flotantes ---------- */
.landing-demo{ position:relative; display:flex; justify-content:center; padding:10px 40px; }
.phone{
  position:relative; width:250px; height:516px; border-radius:46px; flex:none;
  background:linear-gradient(160deg,#2a1d3d,#0c0716);
  padding:12px;
  box-shadow:0 50px 110px rgba(0,0,0,.6), 0 0 80px rgba(157,107,255,.25), inset 0 0 0 2px rgba(255,255,255,.08);
  transform:rotate(-3deg);
}
.phone-notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:96px; height:20px; border-radius:0 0 14px 14px; background:#0c0716; z-index:3; }
.phone-screen{
  position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden;
  background:radial-gradient(80% 45% at 50% 0%, rgba(255,79,139,.42), transparent 70%), radial-gradient(70% 40% at 50% 100%, rgba(94,231,223,.18), transparent 70%), linear-gradient(180deg,#150c22,#07040d);
}
.float-chip{
  position:absolute; z-index:4; display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:16px; font-size:13px; color:var(--text); white-space:nowrap;
  background:rgba(22,12,36,.78); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
  animation:chipFloat 6s ease-in-out infinite;
}
.float-chip b{ font-variant-numeric:tabular-nums; }
.float-chip .ico{ color:var(--red); }
.chip-a{ top:18%; left:-4px; }
.chip-b{ top:66%; right:-18px; animation-delay:-2s; }
.chip-b .ico{ color:var(--cyan); }
.chip-c{ bottom:12%; left:6px; animation-delay:-4s; }
.chip-c .ico{ color:var(--gold); }
@keyframes chipFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* Cada "pantalla" del regalo se cruza en fundido (previsualización en bucle) */
.demo-page{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:40px 20px 22px; opacity:0;
  animation:demoCycle 15s ease-in-out infinite;
}
.demo-page:nth-child(1){ animation-delay:0s; }
.demo-page:nth-child(2){ animation-delay:5s; }
.demo-page:nth-child(3){ animation-delay:10s; }
@keyframes demoCycle{
  0%, 3%   { opacity:0; transform:translateY(10px) scale(.97); }
  7%, 27%  { opacity:1; transform:translateY(0) scale(1); }
  33%, 100%{ opacity:0; transform:translateY(-10px) scale(.97); }
}
.demo-page .demo-kicker{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 10px; }
.demo-names{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:26px; margin:0; line-height:1.15; }
.demo-names span{ color:var(--red); }
.demo-date{ font-size:11px; color:var(--muted); margin:6px 0 18px; }
.demo-page .demo-counter{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:14px; }
.demo-page .demo-counter div{ background:rgba(255,255,255,.07); border-radius:12px; padding:10px 2px; }
.demo-page .demo-counter b{ display:block; font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--gold); font-variant-numeric:tabular-nums; }
.demo-page .demo-counter span{ font-size:8px; letter-spacing:.05em; color:var(--muted); }
.demo-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.demo-photo{ aspect-ratio:1; border-radius:10px; animation:demoShift 9s ease-in-out infinite; }
.demo-photo:nth-child(1){ background:linear-gradient(135deg,#ff4f8b,#ffc978); }
.demo-photo:nth-child(2){ background:linear-gradient(135deg,#9d6bff,#5ee7df); animation-delay:-3s; }
.demo-photo:nth-child(3){ background:linear-gradient(135deg,#e11d74,#7c3aed); animation-delay:-6s; }
@keyframes demoShift{ 0%,100%{ filter:hue-rotate(0deg) brightness(1); } 50%{ filter:hue-rotate(30deg) brightness(1.12); } }
.demo-qr{
  width:118px; height:118px; padding:0; border-radius:14px; background:#0b0614; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 34px rgba(255,79,139,.3);
  animation:qrFloat 4.5s ease-in-out infinite;
}
.demo-qr img, .demo-qr canvas{ width:100% !important; height:100% !important; display:block; }
@keyframes qrFloat{ 0%,100%{ transform:translateY(0) rotate(-1.2deg); } 50%{ transform:translateY(-7px) rotate(1.2deg); } }
.demo-page .demo-foot{ font-size:10px; color:var(--muted); margin:12px 0 0; padding:0; border:0; }

/* ---------- Cinta de ocasiones ---------- */
.lp-occasions{ padding:8px 0 24px; overflow:hidden; }
.occ-strip{ display:flex; width:max-content; animation:marquee 38s linear infinite; }
.occ-group{
  display:flex; align-items:center; gap:22px; padding-right:22px;
  font-family:var(--font-head); font-weight:700; font-size:clamp(20px,3.6vw,30px); letter-spacing:-.02em;
  color:rgba(246,241,255,.5);
}
.occ-strip i{ font-style:normal; color:var(--red); font-size:.7em; }

/* ---------- Secciones genéricas ---------- */
.lp-section{ max-width:1180px; margin:0 auto; padding:72px 20px; scroll-margin-top:72px; }
.lp-head{ text-align:center; max-width:680px; margin:0 auto 40px; }
.lp-eyebrow{
  display:inline-block; margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lp-section-title{
  font-family:var(--font-head); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(28px,5.4vw,46px); line-height:1.08; margin:0; text-wrap:balance;
}
.lp-section-sub{ color:var(--muted); font-size:16px; line-height:1.65; margin:14px auto 0; max-width:560px; }

/* ---------- Cómo funciona ---------- */
.steps-grid{ list-style:none; padding:0; margin:0; display:grid; gap:16px; grid-template-columns:1fr; }
.step-card{
  position:relative; padding:28px 24px; border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1);
}
.step-num{
  display:block; font-family:var(--font-head); font-weight:800; font-size:44px; line-height:1; letter-spacing:-.04em; margin-bottom:18px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step-card h3{ font-family:var(--font-head); font-size:20px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px; }
.step-card p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; }

/* ---------- Funciones: bento ---------- */
.bento{ display:grid; gap:14px; grid-template-columns:1fr; }
.bento-card{
  position:relative; padding:24px; border-radius:24px; isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);
  transition:transform .3s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
}
.bento-card::before{                      /* brillo que sigue al hover */
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; opacity:0;
  background:radial-gradient(60% 80% at 50% 0%, rgba(157,107,255,.22), transparent 70%);
  transition:opacity .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .bento-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.18); box-shadow:0 24px 50px rgba(0,0,0,.35); }
  .bento-card:hover::before{ opacity:1; }
}
.bento-ico{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px; margin-bottom:16px;
  background:var(--grad); color:#fff; box-shadow:0 10px 24px rgba(157,107,255,.35);
}
.bento-ico .ico{ width:22px; height:22px; }
.bento-card h3{ font-family:var(--font-head); font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0 0 6px; }
.bento-card p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.6; }
.bento-counter{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:20px; }
.bento-counter div{ text-align:center; padding:12px 4px; border-radius:14px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06); }
.bento-counter b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(22px,4vw,30px); color:var(--gold); font-variant-numeric:tabular-nums; }
.bento-counter span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.bento-qr{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.bento-qr-art{
  flex:none; width:96px; height:96px; border-radius:18px; background:#fff; padding:10px; position:relative;
  box-shadow:0 14px 34px rgba(0,0,0,.35); transform:rotate(4deg);
}
.bento-qr-art span{
  position:absolute; inset:10px; border-radius:6px;
  background:
    conic-gradient(from 90deg at 30% 30%, #0b0614 25%, transparent 0) 0 0/16px 16px,
    linear-gradient(#0b0614 0 0) 0 0/26px 26px no-repeat,
    linear-gradient(#0b0614 0 0) 100% 0/26px 26px no-repeat,
    linear-gradient(#0b0614 0 0) 0 100%/26px 26px no-repeat;
  opacity:.9;
}

/* ---------- Calculadora ---------- */
.calc{
  max-width:900px; margin:0 auto; padding:clamp(28px,5vw,48px) clamp(20px,5vw,48px);
  border-radius:32px; position:relative; overflow:hidden;
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(255,79,139,.16), transparent 70%),
    radial-gradient(60% 60% at 100% 100%, rgba(94,231,223,.12), transparent 70%),
    rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
}
.calc-head{ text-align:center; margin-bottom:28px; }
.calc-form{ display:grid; gap:4px 14px; grid-template-columns:1fr; align-items:end; max-width:640px; margin:0 auto; }
.calc-form .btn{ width:100%; margin-bottom:18px; }
.calc .input{ color-scheme:dark; min-height:50px; }
.calc-out{ margin-top:20px; display:flex; flex-direction:column; align-items:center; gap:22px; animation:popIn .45s var(--ease-out); }
.calc-counter{ max-width:520px; }
.calc-cta{ text-align:center; max-width:460px; }
.calc-cta p{ color:var(--muted); margin:0 0 16px; line-height:1.6; }

/* ---------- Precios ---------- */
.plans{ display:grid; gap:16px; grid-template-columns:1fr; max-width:1000px; margin:0 auto; align-items:stretch; }
.plan{
  position:relative; display:flex; flex-direction:column; padding:28px 24px 24px; border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
}
.plan-featured{
  background:linear-gradient(180deg, rgba(157,107,255,.18), rgba(255,79,139,.06)), rgba(255,255,255,.03);
  border-color:transparent;
  box-shadow:0 0 0 1.5px rgba(157,107,255,.7), 0 30px 70px rgba(124,58,237,.25);
}
.plan-badge{
  position:absolute; top:-12px; left:24px; padding:5px 12px; border-radius:999px;
  background:var(--grad); color:#0b0614; font-size:12px; font-weight:800; letter-spacing:.02em;
}
.plan-name{ font-family:var(--font-head); font-size:22px; font-weight:700; margin:0; }
.plan-dur{ margin:4px 0 18px; color:var(--muted); font-size:14px; }
.plan-price{ margin:0 0 20px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.plan-price s{ color:rgba(246,241,255,.5); font-size:15px; }
.plan-price b{ font-family:var(--font-head); font-weight:800; font-size:40px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.plan-price span{ color:var(--muted); font-size:13px; font-weight:700; }
.plan ul{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; flex:1; }
.plan li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--text); }
.plan li .ico{ color:var(--cyan); }
.plan .btn-block{ max-width:none; }

/* ---------- Valoraciones (marquee) ---------- */
.lp-reviews{ padding:72px 0; }
.lp-reviews .lp-head{ padding:0 20px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:16px; width:max-content; padding:4px 8px; animation:marquee 52s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.review-card{
  flex:0 0 320px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:22px; padding:20px 22px;
}
.review-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.review-avatar{
  width:42px; height:42px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#0b0614;
  background:linear-gradient(135deg, var(--c,#ff4f8b), #ffc978);
}
.review-head b{ display:block; font-size:14px; }
.stars{ color:var(--gold); font-size:12px; letter-spacing:.08em; }
.review-card p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); }

/* ---------- Ideas ---------- */
.lp-tips-track{ display:grid; gap:14px; grid-template-columns:1fr; }
.tip-card{
  padding:22px; border-radius:22px; border-left:3px solid transparent;
  background:linear-gradient(rgba(20,11,33,.9), rgba(20,11,33,.9)) padding-box, var(--grad) border-box;
  border:1px solid transparent;
}
.tip-card h3{ font-family:var(--font-head); font-size:17px; font-weight:700; margin:0 0 6px; }
.tip-card p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); }

/* ---------- FAQ (acordeón nativo) ---------- */
.faq{ max-width:780px; margin:0 auto; display:grid; gap:10px; }
.faq details{
  border-radius:18px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08);
  transition:background-color .2s ease, border-color .2s ease;
}
.faq details[open]{ background:rgba(255,255,255,.07); border-color:rgba(157,107,255,.4); }
.faq summary{
  list-style:none; cursor:pointer; padding:18px 56px 18px 20px; position:relative;
  font-weight:700; font-size:16px; min-height:44px; border-radius:18px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:22px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg); transition:transform .25s var(--ease-out);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq details p{ margin:0; padding:0 20px 20px; color:var(--muted); line-height:1.7; font-size:15px; }
.faq details a{ color:var(--gold); }

/* ---------- CTA final ---------- */
.lp-final{
  max-width:1100px; margin:24px auto 80px; padding:clamp(40px,7vw,72px) 24px; text-align:center;
  border-radius:36px; position:relative; overflow:hidden; isolation:isolate;
  background:var(--grad);
}
.lp-final::before{ content:''; position:absolute; inset:2px; border-radius:34px; background:linear-gradient(180deg,#150a26,#0b0614); z-index:-1; }
.lp-final h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; font-size:clamp(28px,5vw,48px); line-height:1.08; margin:0 auto 14px; max-width:720px; text-wrap:balance; }
.lp-final p{ color:var(--muted); margin:0 auto 28px; font-size:17px; max-width:520px; }

/* ---------- Footer ---------- */
.lp-footer{
  margin-top:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.05));
  border-top:1px solid rgba(255,255,255,.08);
  padding:48px 24px calc(28px + var(--safe-b));
}
.lp-footer-grid{ max-width:1100px; margin:0 auto; display:grid; gap:34px; grid-template-columns:1fr; }
.lp-foot-col h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; }
.lp-foot-col a, .lp-foot-link{
  display:block; color:var(--muted); text-decoration:none; font-size:14px; margin-bottom:10px; padding:2px 0;
  font-family:var(--font-body); text-align:left; cursor:pointer; border:0; transition:color .15s ease;
}
.lp-foot-col a:hover, .lp-foot-link:hover{ color:var(--text); }
.lp-foot-brand p{ font-size:14px; line-height:1.6; color:var(--muted); margin:14px 0; max-width:320px; }
.lp-foot-mail{ font-size:14px; color:var(--text) !important; font-weight:600; }
.pay-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.pay-badge{ font-size:11px; font-weight:800; letter-spacing:.04em; padding:7px 12px; border-radius:8px; color:#0b0614; background:#ece6f5; }
.pay-webpay{ background:linear-gradient(135deg,#ffc978,#ff8f6b); }
.pay-visa{ background:#f7f3ff; color:#1a1f71; }
.pay-mc{ background:#fff0e8; color:#c8340a; }
.lp-foot-note{ font-size:12px; color:var(--muted); margin:12px 0 0; max-width:260px; line-height:1.5; }
.lp-footer-bottom{
  max-width:1100px; margin:34px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; font-size:12px; color:var(--muted);
}

/* ---------- Breakpoints: 640 / 900 / 1100 ---------- */
@media (min-width:640px){
  .steps-grid{ grid-template-columns:repeat(3,1fr); }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento-wide{ grid-column:span 2; }
  .lp-tips-track{ grid-template-columns:repeat(2,1fr); }
  .calc-form{ grid-template-columns:1.2fr 1fr auto; }
  .calc-form .btn{ width:auto; }
  .lp-footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
}
@media (min-width:900px){
  .lp-links{ display:flex; }
  .lp-hero{ flex-direction:row; justify-content:space-between; gap:40px; padding-top:40px; padding-bottom:88px; }
  .landing-hero{ text-align:left; flex:1; max-width:640px; }
  .landing-hero .rotator{ justify-items:start; }
  .landing-sub{ margin-left:0; }
  .landing-cta, .hero-proof{ justify-content:flex-start; }
  .bento{ grid-template-columns:repeat(3,1fr); }
  .plans{ grid-template-columns:repeat(3,1fr); }
  .plan-featured{ transform:translateY(-10px); }
  .lp-tips-track{ grid-template-columns:repeat(3,1fr); }
  .lp-section{ padding:96px 24px; }
}
@media (min-width:1100px){
  .lp-tips-track{ grid-template-columns:repeat(5,1fr); }
}
@media (max-width:380px){
  .float-chip{ display:none; }
  .landing-demo{ padding:10px 0; }
}

@media (prefers-reduced-motion: reduce){
  .aurora span, .float-chip, .occ-strip, .badge-dot, .marquee-track, .demo-photo, .demo-qr{ animation:none; }
  .demo-page{ animation:none; opacity:0; }
  .demo-page:nth-child(1){ opacity:1; }        /* muestra una sola pantalla fija */
  .occ-strip, .occ-group{ flex-wrap:wrap; width:auto; justify-content:center; padding:0 20px; }
  .occ-group[aria-hidden]{ display:none; }
  .marquee-track{ flex-wrap:wrap; width:auto; justify-content:center; }
}


/* ==========================================================================
   SUPERFICIES SIN BORDE
   Inputs y botones se integran con el fondo; el foco se marca con un halo
   de color, nunca con una caja/borde oscuro. Las tarjetas seleccionables
   solo muestran marco al pasar el cursor o al quedar elegidas.
   ========================================================================== */
.input, .textarea, .select, .link-input{
  border:1px solid transparent;
  background-color:rgba(255,255,255,.055);   /* -color, no shorthand: no borra la flecha del <select> */
  box-shadow:none;
}
.select{ background-color:#1d1230; }                 /* el desplegable necesita fondo opaco */
.input:focus, .textarea:focus, .select:focus, .link-input:focus{
  border-color:transparent;
  background-color:rgba(255,255,255,.09);
  box-shadow:0 0 0 2px var(--red-soft);
}
.select:focus{ background-color:#241640; }
.field.invalid .input, .field.invalid .textarea{
  border-color:transparent;
  box-shadow:0 0 0 2px rgba(255,79,139,.55);
}

.btn-ghost, .wiz-back, .badge, .landing-chips span, .chip,
.modal-close, .modal-nav, .share-btn{ border:none; }
.btn-ghost, .wiz-back{ background:rgba(255,255,255,.08); }

.option-card, .color-card, .price-card, .song-opt,
.media-thumb, .gallery-item, .counter-tile, .song-embed, .song-card{
  border-color:transparent;
}

/* Tarjetas de ejemplo en "Nuestros Momentos" (antes de subir fotos) */
.media-thumb.example{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(255,255,255,.18);
}
.media-thumb.example::after{
  content:'ejemplo'; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.media-thumb.example:nth-child(1){ background:linear-gradient(135deg,#ff6fb3,#ffd166); }
.media-thumb.example:nth-child(2){ background:linear-gradient(135deg,#8b5cf6,#4d8dff); }
.media-thumb.example:nth-child(3){ background:linear-gradient(135deg,#ff3b5c,#8b5cf6); }

/* ==========================================================================
   NUEVAS SECCIONES DEL REGALO — datos curiosos, aniversarios, PIN,
   historias y "guardar como app"
   ========================================================================== */
.field-help{ font-size:12px; color:var(--muted); margin:6px 0 0; line-height:1.5; }
.field-help-top{ margin:-4px 0 12px; font-size:13px; }
.result-pin{
  font-size:13px; line-height:1.5; color:var(--text); margin:0 0 18px; padding:10px 14px; border-radius:12px;
  background:rgba(255,201,120,.1); box-shadow:inset 0 0 0 1px rgba(255,201,120,.35);
}
.result-pin b{ color:var(--gold); letter-spacing:.2em; }

/* ---------- Datos curiosos (también en la calculadora de la landing) ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:100%; max-width:440px; }
.stat-tile{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:18px 10px 16px; border-radius:20px;
  background:var(--glass); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(6px);
}
.stat-ico{ width:22px; height:22px; color:var(--red); }
.stat-num{ font-family:var(--font-display); font-weight:600; font-size:clamp(22px,6vw,28px); line-height:1.1; color:var(--gold); font-variant-numeric:tabular-nums; }
.stat-label{ font-size:12px; letter-spacing:.06em; color:var(--muted); }
.stats-note{ font-size:12px; color:var(--muted); margin:18px 0 0; }
#calcStats .stat-num{ font-family:var(--font-head); font-weight:800; }
@media (min-width:560px){ .stats-grid{ grid-template-columns:repeat(3,1fr); max-width:560px; } }

/* ---------- Aniversarios de boda (carrusel horizontal) ---------- */
.milestones-next{ color:var(--muted); font-size:15px; margin:-8px 0 22px; max-width:340px; }
.milestones-next b{ color:var(--text); }
.milestones{
  list-style:none; margin:0; padding:10px 24px 18px; width:100%; max-width:640px;
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.milestones::-webkit-scrollbar{ display:none; }
.milestones:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:12px; }
.milestone{
  position:relative;               /* contiene su .sr-only: sin esto ensanchaba la página */
  flex:0 0 118px; scroll-snap-align:center; padding:16px 8px 14px; border-radius:20px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--glass); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); opacity:.55;
}
.milestone.is-done{ opacity:1; box-shadow:inset 0 0 0 1px rgba(255,201,120,.4); }
.milestone.is-next{ opacity:1; box-shadow:inset 0 0 0 1.5px var(--red), 0 12px 30px var(--red-soft); }
.milestone-year{ font-family:var(--font-display); font-style:italic; font-size:30px; line-height:1; color:var(--gold); }
.milestone-name{ font-weight:700; font-size:14px; }
.milestone-when{ font-size:11px; color:var(--muted); }

/* ---------- PIN en la pantalla de apertura ---------- */
.pin-form{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:300px; }
.pin-label{ color:var(--muted); font-size:14px; line-height:1.5; }
.pin-input{
  width:180px; text-align:center; font-family:var(--font-body); font-size:28px; font-weight:700; letter-spacing:.5em;
  padding:12px 0 12px .5em; border-radius:16px; border:0; color:var(--text);
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.pin-input:focus{ outline:none; box-shadow:0 0 0 2px var(--red); }
.pin-error{ margin:0; color:#ff8fb3; font-size:13px; }

/* ---------- Botones nuevos del regalo ---------- */
.btn-story{ margin-top:22px; }
#gsec-outro .btn{ display:inline-flex; align-items:center; gap:8px; }

/* ---------- Visor de historias ---------- */
.story-viewer{
  position:fixed; inset:0; z-index:70; background:#000;
  display:flex; align-items:center; justify-content:center; animation:fadeIn .2s ease;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
.story-bars{
  position:absolute; top:calc(12px + var(--safe-t)); left:12px; right:12px; z-index:3;
  display:flex; gap:4px;
}
.story-bars > span{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.3); overflow:hidden; }
.story-bars i{ display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left; }
.story-close{ top:calc(26px + var(--safe-t)); z-index:4; width:44px; height:44px; }
.story-media{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.story-media img, .story-media video{ max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; }
.story-caption{
  position:absolute; left:16px; right:16px; bottom:calc(28px + var(--safe-b)); z-index:3; margin:0;
  text-align:center; font-size:15px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.story-tap{ position:absolute; top:0; bottom:0; z-index:2; border:0; background:transparent; cursor:pointer; }
.story-prev{ left:0; width:33%; }
.story-next{ right:0; width:67%; }
.story-tap:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:-6px; }

/* ---------- Hoja "guardar como app" ---------- */
.install-sheet{
  position:fixed; inset:0; z-index:65; background:rgba(3,1,7,.7); backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .2s ease;
}
.install-panel{
  position:relative; width:100%; max-width:480px; padding:28px 22px calc(28px + var(--safe-b));
  border-radius:26px 26px 0 0; background:linear-gradient(180deg,#1b1030,#0d0718);
  box-shadow:0 -20px 60px rgba(0,0,0,.5); animation:sheetUp .3s var(--ease-out);
}
.install-panel .modal-close{ position:absolute; top:14px; right:14px; }
.install-panel h3{ font-family:var(--font-head); font-size:21px; margin:0 48px 16px 0; }
.install-panel ol{ margin:0; padding-left:22px; display:grid; gap:10px; color:var(--muted); line-height:1.55; font-size:15px; }
.install-panel b{ color:var(--text); }
@keyframes sheetUp{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
@media (min-width:560px){ .install-sheet{ align-items:center; } .install-panel{ border-radius:26px; } }

/* Resultado: títulos con la nueva tipografía */
#view-result .section-title, .status-title, .gen-loader-title{ font-family:var(--font-head); font-style:normal; font-weight:800; letter-spacing:-.02em; }
.calc-counter{ text-align:center; }
.calc-counter .counter-num{ font-family:var(--font-head); font-weight:800; }
@media (min-width:900px){ .bento-qr{ grid-column:span 3; } }
.status-pin{ margin:0 auto 16px; }

/* ==========================================================================
   FONDO ANIMADO COMPARTIDO — la misma aurora de la landing, fija detrás del
   asistente, el pago, el resultado y las pantallas de estado. Su primera
   mancha toma el color de la ocasión elegida (--occ) y cambia con fundido.
   ========================================================================== */
.aurora-app{ position:fixed; inset:0; height:auto; z-index:0; }
.aurora-app span:nth-child(1){ background:var(--occ, #ff4f8b); transition:background-color 1.2s ease; opacity:.42; }
.aurora-app span:nth-child(2){ opacity:.38; }
body:has(#view-landing:not([hidden])) .aurora-app,
body:has(#view-gift:not([hidden])) .aurora-app{ display:none; }
.no-scroll{ overflow:hidden; }

/* Vista previa embebida: solo el regalo, sin fondos extra del sitio */
.is-preview #particles, .is-preview .aurora-app{ display:none !important; }
.is-preview body{ background:var(--bg-0); }
.is-preview .gift-music-toggle{ display:none; }
#view-gift.is-preview .section{ min-height:auto; padding-top:72px; padding-bottom:72px; }
#view-gift.is-preview #gsec-hero{ min-height:100svh; }

/* ==========================================================================
   ASISTENTE — formulario a la izquierda, teléfono con la vista previa en
   vivo a la derecha (escritorio). En móvil la vista previa se abre como hoja.
   ========================================================================== */
#view-wizard{ min-height:100dvh; }
.wiz{ position:relative; z-index:1; width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
.wiz-top{
  position:sticky; top:0; z-index:12; display:flex; align-items:center; gap:14px;
  padding:calc(14px + var(--safe-t)) 0 14px; isolation:isolate;
}
.wiz-top::before{
  content:''; position:absolute; z-index:-1; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
  background:linear-gradient(180deg, rgba(7,4,13,.92), rgba(7,4,13,.55) 75%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.wiz-back{
  flex:none; width:44px; height:44px; border-radius:50%; cursor:pointer; color:var(--text);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--glass); border:1px solid var(--glass-border); transition:background-color .2s ease, transform .15s ease;
}
.wiz-back:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){ .wiz-back:hover{ background:var(--glass-strong); } }
.wiz-brand{ display:none; }
.wiz-progress{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.wiz-progress-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.wiz-step-label{ font-family:var(--font-head); font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wiz-step-count{ font-size:12px; color:var(--muted); flex:none; font-variant-numeric:tabular-nums; }
.wiz-progress .progress{ flex:none; height:6px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.progress-fill{ height:100%; width:11%; border-radius:inherit; background:var(--grad); background-size:200% 100%; transition:width .5s var(--ease-out); animation:gradSlide 4s linear infinite; }
@keyframes gradSlide{ to{ background-position:-200% 0; } }
.wiz-preview-btn{
  flex:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  border-radius:999px; cursor:pointer; font:700 14px var(--font-body); color:var(--text);
  background:var(--glass); border:1px solid var(--glass-border);
}
.wiz-preview-btn span{ display:none; }
@media (min-width:420px){ .wiz-preview-btn span{ display:inline; } }

.wiz-body{ display:block; padding-top:10px; }
.wiz-main{ width:100%; max-width:560px; margin:0 auto; min-height:calc(100dvh - 90px); display:flex; flex-direction:column; }
.steps-container{ flex:1; display:flex; }
.step{ width:100%; display:flex; flex-direction:column; animation:stepIn .45s var(--ease-out); }
@keyframes stepIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.step-kicker{ margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--gold); }
.step-title{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; font-size:clamp(30px,8vw,44px); line-height:1.05; margin:0 0 10px; outline:none; }
.step-sub{ color:var(--muted); font-size:15px; line-height:1.6; margin:0 0 26px; max-width:46ch; }
.field-label{ display:block; font-size:13px; letter-spacing:.02em; color:var(--text); margin:0 0 8px; font-weight:700; }
.field-label-plain{ color:var(--text); }
.field-optional{ color:var(--muted); font-weight:500; }
.field-count{ text-align:right; font-variant-numeric:tabular-nums; }
.input, .textarea{ background:rgba(255,255,255,.05); border-radius:16px; padding:15px 16px; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.input:focus, .textarea:focus{ border-color:var(--occ, var(--red)); box-shadow:0 0 0 4px color-mix(in srgb, var(--occ, #ff4f8b) 22%, transparent); background:rgba(255,255,255,.07); }
.input::placeholder, .textarea::placeholder{ color:rgba(246,241,255,.38); }
.field-error{ color:#ff8fb3; font-size:13px; }
.textarea{ min-height:170px; line-height:1.65; }
.input-pin{ max-width:180px; letter-spacing:.4em; font-weight:700; font-size:20px; }

/* Ocasiones: tarjetas teñidas con el color de cada una */
.occ-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px; }
.occ-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  min-height:132px; padding:16px; border-radius:22px; cursor:pointer; color:var(--text); font-family:var(--font-body);
  background:linear-gradient(160deg, color-mix(in srgb, var(--occ) 16%, transparent), rgba(255,255,255,.03) 60%);
  border:1.5px solid rgba(255,255,255,.1); overflow:hidden; isolation:isolate;
  transition:transform .25s var(--ease-out), border-color .2s ease, box-shadow .25s ease;
}
.occ-card::before{
  content:''; position:absolute; width:120px; height:120px; right:-40px; top:-40px; z-index:-1; border-radius:50%;
  background:var(--occ); filter:blur(36px); opacity:.35; transition:opacity .3s ease, transform .4s var(--ease-out);
}
.occ-ico{
  width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:8px;
  background:color-mix(in srgb, var(--occ) 24%, rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--occ) 45%, transparent);
}
.occ-card b{ font-family:var(--font-head); font-size:17px; letter-spacing:-.01em; }
.occ-card > span:not(.occ-ico):not(.occ-check){ font-size:13px; color:var(--muted); line-height:1.4; }
.occ-check{
  position:absolute; top:12px; right:12px; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; background:var(--occ);
  transform:scale(0); transition:transform .25s var(--ease-out);
}
.occ-check .ico{ width:14px; height:14px; stroke-width:3; }
.occ-card.selected{ border-color:var(--occ); box-shadow:0 14px 34px color-mix(in srgb, var(--occ) 30%, transparent); }
.occ-card.selected .occ-check{ transform:scale(1); }
.occ-card.selected::before{ opacity:.6; transform:scale(1.3); }
.occ-card:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .occ-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--occ) 70%, transparent); } }
.occ-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Fecha */
.date-row{ gap:10px; margin-bottom:0; }
.select-month{ flex:1.6; }
.select{ border-radius:14px; padding:14px 34px 14px 14px; background-color:#170d26; }
.date-hint{
  min-height:56px; display:flex; align-items:center; gap:10px; margin:6px 0 20px; padding:14px 16px; border-radius:16px;
  font-size:15px; color:var(--muted); background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.14);
}
.date-hint:empty{ visibility:hidden; }
.date-hint b{ color:var(--text); font-family:var(--font-head); }
.date-hint::before{ content:'⏳'; }

/* Fotos: zona para soltar archivos */
.dropzone{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:30px 18px; border-radius:22px; cursor:pointer; color:var(--text); font-family:var(--font-body);
  background:rgba(255,255,255,.035); border:2px dashed rgba(255,255,255,.18);
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease, padding .3s ease;
}
.dropzone b{ font-size:16px; }
.dropzone-sub{ font-size:13px; color:var(--muted); }
.dropzone-ico{
  width:58px; height:58px; border-radius:18px; margin-bottom:6px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--occ, #ff4f8b) 22%, transparent); color:var(--text); animation:floatY 3s ease-in-out infinite;
}
.dropzone-ico .ico{ width:26px; height:26px; }
.dropzone.is-drag, .dropzone:focus-visible{ border-color:var(--occ, var(--red)); background:color-mix(in srgb, var(--occ, #ff4f8b) 10%, transparent); outline:none; }
.dropzone.is-compact{ flex-direction:row; justify-content:center; padding:14px 18px; }
.dropzone.is-compact .dropzone-ico{ width:38px; height:38px; margin:0 6px 0 0; border-radius:12px; animation:none; }
.dropzone.is-compact .dropzone-sub{ display:none; }
.dropzone:disabled{ opacity:.45; cursor:not-allowed; }
@media (hover:hover) and (pointer:fine){ .dropzone:not(:disabled):hover{ border-color:color-mix(in srgb, var(--occ, #ff4f8b) 70%, transparent); } }
.media-count{ margin:12px 0 10px; font-size:13px; }
.media-grid{ gap:10px; }
.media-thumb{ border-radius:16px; animation:popIn .3s var(--ease-out); background:rgba(255,255,255,.04); }
.media-thumb .rm{ width:30px; height:30px; top:6px; right:6px; font-size:13px; backdrop-filter:blur(4px); }
.media-badge{ position:absolute; left:6px; top:6px; font-size:10px; font-weight:800; letter-spacing:.04em; padding:3px 7px; border-radius:999px; color:#120818; background:rgba(255,255,255,.88); }
.media-cover{ background:var(--gold); }
.media-thumb video + .media-badge + .media-cover{ top:28px; }
.media-move{ position:absolute; left:6px; right:6px; bottom:6px; display:flex; justify-content:space-between; }
.media-move button{ width:30px; height:30px; border-radius:50%; border:0; cursor:pointer; color:#fff; background:rgba(0,0,0,.55); font-size:18px; line-height:1; backdrop-filter:blur(4px); }
.media-move button:disabled{ opacity:0; pointer-events:none; }

/* Mensaje: sugerencias como tarjetas completas */
.sugg-list{ display:grid; gap:10px; margin-bottom:22px; }
.sugg{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; cursor:pointer;
  padding:14px 16px; border-radius:16px; color:var(--text); font-family:var(--font-body);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); transition:border-color .2s ease, background-color .2s ease;
}
.sugg-txt{ font-size:14px; line-height:1.55; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sugg-use{ font-size:12px; font-weight:800; color:var(--gold); }
@media (hover:hover) and (pointer:fine){ .sugg:hover{ border-color:var(--gold); background:rgba(255,201,120,.07); } }

/* Música */
.search-wrap{ position:relative; }
.search-wrap > .ico{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.input-search{ padding-left:46px; }
.input-search::-webkit-search-cancel-button{ filter:invert(1); }
.song-opt{ border-radius:14px; padding:10px 12px; }

/* Estilo */
.color-grid{ grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:24px; }
.color-card{ padding:12px 4px; border-radius:16px; font-size:11px; gap:6px; }
.color-dot{ width:28px; height:28px; box-shadow:0 0 0 3px rgba(255,255,255,.08); transition:transform .2s var(--ease-out); }
.color-card.selected .color-dot{ transform:scale(1.12); box-shadow:0 0 0 3px var(--bg-0), 0 0 0 5px currentColor; }
.q-mode-label{ margin-top:16px; }
.q-mode{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.q-mode-opt{ position:relative; display:block; cursor:pointer; }
.q-mode-opt input{ position:absolute; opacity:0; pointer-events:none; }
.q-mode-opt > span{ display:flex; flex-direction:column; gap:2px; min-height:56px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1); transition:border-color .2s, background .2s; }
.q-mode-opt b{ font-size:14px; }
.q-mode-opt small{ font-size:12px; color:var(--muted); }
.q-mode-opt input:checked + span{ border-color:var(--gold); background:rgba(255,209,102,.08); }
.q-mode-opt input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
.q-answers{ display:grid; gap:8px; margin-top:12px; }
.q-answers.invalid .field-error{ display:block; }
.opt-group{ border-radius:20px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1); padding:2px 16px; margin-bottom:16px; }
.switch-row{ padding:15px 0; cursor:pointer; }
.switch-row > span:first-child{ display:flex; flex-direction:column; gap:2px; }
.switch input:checked + .switch-track{ background:var(--occ, var(--red)); }
.switch input:focus-visible + .switch-track{ outline:2px solid var(--gold); outline-offset:2px; }
#fQuestionText, #fPin{ margin-bottom:18px; }
@media (max-width:420px){ .color-grid{ grid-template-columns:repeat(3,1fr); } }

/* Duración */
.price-list{ gap:14px; }
.price-card{ display:flex; align-items:center; gap:14px; padding:18px; border-radius:20px; }
.price-radio{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.3); transition:border-color .2s ease, box-shadow .2s ease; }
.price-card.selected .price-radio{ border-color:var(--gold); box-shadow:inset 0 0 0 4px var(--bg-0), inset 0 0 0 12px var(--gold); }
.price-main{ flex:1; display:flex; flex-direction:column; gap:2px; }
.price-dur{ font-size:12.5px; color:var(--muted); }
.price-amounts{ display:flex; flex-direction:column; align-items:flex-end; }
.price-amount{ font-family:var(--font-head); font-weight:800; font-size:22px; }
.price-was{ margin:0; }
.price-badge{ left:auto; right:16px; }

/* CTA del paso: fijo abajo con un velo para que se lea sobre el contenido */
.wiz-cta{
  margin-top:auto; position:sticky; bottom:0; z-index:5;
  padding:22px 0 calc(16px + var(--safe-b));
  background:linear-gradient(180deg, transparent, rgba(7,4,13,.85) 45%);
}
.wiz-cta .btn-block{ max-width:none; width:100%; }

/* Vista previa: hoja a pantalla completa en móvil */
.wiz-aside{
  position:fixed; inset:0; z-index:60; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); background:rgba(5,2,10,.9); backdrop-filter:blur(14px);
}
.wiz-aside.is-open{ display:flex; animation:fadeIn .25s ease; }
.wiz-aside-head{ display:flex; align-items:center; gap:10px; width:100%; max-width:360px; font-weight:700; font-size:14px; }
.wiz-aside-close{ margin-left:auto; width:44px; height:44px; border-radius:50%; cursor:pointer; color:var(--text); background:var(--glass); border:1px solid var(--glass-border); }
.live-dot{ width:9px; height:9px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 0 rgba(61,220,132,.6); animation:livePulse 1.8s ease-out infinite; }
@keyframes livePulse{ to{ box-shadow:0 0 0 10px rgba(61,220,132,0); } }
.wiz-aside-note{ margin:0; font-size:13px; color:var(--muted); text-align:center; }

.live-phone{
  position:relative; width:min(340px, 86vw); aspect-ratio:9 / 19; max-height:calc(100dvh - 160px);
  border-radius:44px; padding:10px; background:linear-gradient(160deg,#2a2236,#0e0a15);
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 40px 90px rgba(0,0,0,.55), 0 0 80px color-mix(in srgb, var(--occ, #ff4f8b) 25%, transparent);
}
.live-notch{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:92px; height:24px; border-radius:20px; background:#000; z-index:2; }
.live-frame{ width:100%; height:100%; border:0; border-radius:34px; background:var(--bg-0); display:block; }

@media (min-width:1024px){
  .wiz-brand{ display:inline-flex; }
  .wiz-preview-btn{ display:none; }
  .wiz-top{ gap:24px; }
  .wiz-progress{ max-width:620px; margin:0 auto; }
  .wiz-body{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:56px; align-items:start; }
  .wiz-main{ margin:0; justify-self:center; }
  .wiz-aside{
    position:sticky; top:96px; inset:auto; z-index:1; display:flex; background:none; backdrop-filter:none; padding:0;
    height:calc(100dvh - 120px); justify-content:flex-start;
  }
  .wiz-aside-close{ display:none; }
  .live-phone{ width:auto; height:min(720px, calc(100dvh - 190px)); max-height:none; }
}

/* ==========================================================================
   PAGO — resumen + método de pago (Webpay o simulado en modo prueba)
   ========================================================================== */
#view-checkout{ min-height:100dvh; }
.co{ position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:0 20px calc(40px + var(--safe-b)); animation:stepIn .45s var(--ease-out); }
.co-top{ display:flex; align-items:center; gap:14px; padding:calc(14px + var(--safe-t)) 0 14px; }
.co-secure{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#7be0a8; }
.co-title{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; font-size:clamp(30px,7vw,46px); margin:12px 0 16px; }
.co-test{
  display:flex; gap:12px; align-items:flex-start; margin:0 0 22px; padding:14px 16px; border-radius:16px;
  font-size:14px; line-height:1.55; color:var(--text);
  background:rgba(255,201,120,.1); box-shadow:inset 0 0 0 1px rgba(255,201,120,.4);
}
.co-test .ico{ color:var(--gold); margin-top:2px; }
.co-test b{ color:var(--gold); }
.co-grid{ display:grid; gap:16px; }
.co-card{ padding:22px; border-radius:24px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px); }
.co-card h2{ font-family:var(--font-head); font-size:19px; margin:0 0 16px; }
.co-item{ display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.08); }
.co-item-ico{ flex:none; width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; background:color-mix(in srgb, var(--occ, #ff4f8b) 25%, transparent); }
.co-item-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.co-item-txt b{ font-size:16px; }
.co-item-txt span{ font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.co-link{ flex:none; border:0; background:none; cursor:pointer; color:var(--gold); font:700 14px var(--font-body); min-height:44px; padding:0 4px; text-decoration:underline; text-underline-offset:3px; }
.co-features{ list-style:none; margin:16px 0; padding:0; display:grid; gap:9px; }
.co-features li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted); line-height:1.45; }
.co-features .ico{ color:#7be0a8; margin-top:2px; stroke-width:2.5; }
.co-label{ margin:6px 0 10px; font-size:13px; font-weight:700; }
.co-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.co-plan{
  display:flex; flex-direction:column; gap:2px; align-items:flex-start; padding:12px; border-radius:14px; cursor:pointer; text-align:left;
  color:var(--text); font-family:var(--font-body); background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.12);
  transition:border-color .2s ease, background-color .2s ease;
}
.co-plan b{ font-size:13px; }
.co-plan span{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.co-plan.selected{ border-color:var(--gold); background:rgba(255,201,120,.1); }
.co-plan.selected span{ color:var(--gold); }
.co-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.co-total span{ color:var(--muted); }
.co-total b{ font-family:var(--font-head); font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; }
.co-method{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; border:1.5px solid var(--gold); background:rgba(255,201,120,.07); }
.co-method-radio{ flex:none; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--gold), inset 0 0 0 5px var(--bg-0), inset 0 0 0 10px var(--gold); }
.co-method-txt{ flex:1; display:flex; flex-direction:column; gap:2px; }
.co-method-txt span{ font-size:12.5px; color:var(--muted); }
.co-email{ font-size:14px; color:var(--muted); margin:16px 0; overflow-wrap:anywhere; }
.co-email b{ color:var(--text); }
.co-email:empty{ display:none; }
.co-pay-btn{ width:100%; margin-top:6px; }
.co-fine{ font-size:12px; color:var(--muted); text-align:center; margin:14px 0 0; }
@media (min-width:860px){
  .co-grid{ grid-template-columns:1.25fr 1fr; align-items:start; }
  .co-pay{ position:sticky; top:24px; }
}
.co-processing{
  position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:24px; text-align:center; background:rgba(5,2,10,.92); backdrop-filter:blur(14px); animation:fadeIn .25s ease;
}
.co-proc-ring{ position:relative; width:84px; height:84px; border-radius:50%; border:4px solid rgba(255,255,255,.1); border-top-color:var(--gold); animation:genSpin 1s linear infinite; }
.co-proc-ring.is-ok{ animation:popIn .4s var(--ease-out); border-color:#3ddc84; background:#3ddc84; }
.co-proc-ring.is-ok::after{ content:''; position:absolute; left:28px; top:16px; width:18px; height:34px; border:solid #0b2a17; border-width:0 5px 5px 0; transform:rotate(45deg); }
.co-proc-title{ font-family:var(--font-head); font-weight:800; font-size:24px; margin:8px 0 0; }
.co-proc-sub{ color:var(--muted); margin:0; }

/* ==========================================================================
   RESULTADO — teléfono con el regalo real + QR, link y envío
   ========================================================================== */
#view-result{ min-height:100dvh; display:flex; align-items:center; justify-content:center; }
#view-result .gen-loader{ min-height:100dvh; }
.res{ position:relative; z-index:1; width:100%; max-width:1080px; margin:0 auto; padding:calc(28px + var(--safe-t)) 20px calc(40px + var(--safe-b)); animation:stepIn .5s var(--ease-out); }
.res-head{ text-align:center; max-width:640px; margin:0 auto 28px; }
.res-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700; color:#7be0a8; background:rgba(61,220,132,.12); box-shadow:inset 0 0 0 1px rgba(61,220,132,.35); }
.res-badge.is-test{ color:var(--gold); background:rgba(255,201,120,.1); box-shadow:inset 0 0 0 1px rgba(255,201,120,.4); }
.res-title{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; font-size:clamp(30px,7vw,48px); line-height:1.08; margin:16px 0 10px; }
.res-sub{ color:var(--muted); margin:0; font-size:15px; line-height:1.6; }
.res-grid{ display:grid; gap:22px; }
.res-preview{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.res-preview .live-phone{ width:min(300px, 78vw); max-height:none; }
.res-panel{ display:grid; gap:14px; align-content:start; }
.res-card{ padding:18px; border-radius:22px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px); }
.res-qr{ display:flex; gap:18px; align-items:center; }
.res-qr .qr-canvas{ flex:none; padding:0; border-radius:18px; background:#0b0614; overflow:hidden; box-shadow:0 10px 30px rgba(255,79,139,.25); }
.qr-canvas canvas{ width:188px; height:188px; border-radius:18px; }
.res-qr-txt h2{ font-family:var(--font-head); font-size:18px; margin:0 0 6px; }
.res-qr-txt p{ font-size:13px; color:var(--muted); margin:0 0 12px; line-height:1.5; }
.res-label{ display:block; font-size:13px; font-weight:700; margin:0 0 10px; }
.link-row{ margin-bottom:8px; }
.link-input{ border-radius:14px; min-height:44px; }
.result-id{ margin:0; }
.result-pin{ margin:12px 0 0; }
.share-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; }
.share-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border-radius:14px; font-size:14px; }
.share-wa{ background:rgba(37,211,102,.14); border-color:rgba(37,211,102,.45); }
.res-steps{ margin:0; padding:4px 4px 0 22px; display:grid; gap:8px; font-size:14px; color:var(--muted); line-height:1.5; }
.res-steps b{ color:var(--text); }
.res-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.res-actions .btn{ flex:1 1 200px; }
@media (max-width:420px){ .res-qr{ flex-direction:column; text-align:center; } }
@media (min-width:900px){
  .res-grid{ grid-template-columns:auto minmax(0,1fr); gap:48px; align-items:start; }
  .res-preview{ position:sticky; top:24px; }
  .res-preview .live-phone{ width:auto; height:min(640px, calc(100dvh - 140px)); }
}

/* Pantalla de estado / loader con el estilo nuevo */
.status-screen{ position:relative; z-index:1; padding:32px 26px; border-radius:28px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(12px); max-width:380px; }
.status-title{ font-size:clamp(24px,6vw,30px); }

/* ==========================================================================
   PÁGINA DEL REGALO — retoques por ocasión
   ========================================================================== */
#view-gift.theme-san-valentin{                      /* rojo pasión, rosas y oro */
  --bg-0:#090205; --bg-1:#16040b; --bg-2:#2a0714;
  --red:#ff1f4b; --red-deep:#c3002f; --red-soft:rgba(255,31,75,.38);
  --gold:#ffd6a0;
  --violet:#ff6f91; --violet-soft:rgba(255,111,145,.3);
  --text:#fff1f3; --muted:#e3a5b4;
}
#view-gift.theme-navidad{                           /* verde pino, rojo y dorado */
  --bg-0:#020806; --bg-1:#05140e; --bg-2:#0b2418;
  --red:#ff3b47; --red-deep:#c2141f; --red-soft:rgba(255,59,71,.3);
  --gold:#ffd166;
  --violet:#2fbf71; --violet-soft:rgba(47,191,113,.3);
  --text:#f2fff7; --muted:#9fcdb4;
}
.hero-emoji{ font-size:54px; line-height:1; margin-bottom:16px; animation:floatY 3s ease-in-out infinite; filter:drop-shadow(0 10px 24px var(--red-soft)); }
.display-title .amp{ font-style:italic; }
.counter-next{
  margin:14px 0 0; padding:10px 16px; border-radius:999px; font-size:14px; color:var(--text);
  background:var(--glass); box-shadow:inset 0 0 0 1px var(--glass-border);
}
.counter-next b{ color:var(--gold); }
.outro-sign{ font-family:var(--font-display); font-style:italic; color:var(--muted); font-size:18px; margin:-8px 0 22px; }
.outro-sign:empty{ display:none; }
.song-yt-note{ flex-basis:100%; font-size:12px; color:var(--muted); text-align:left; }
.song-card{ flex-wrap:wrap; }

/* Barra fija de los regalos de ejemplo */
.example-bar{
  position:fixed; z-index:30; left:50%; top:calc(12px + var(--safe-t)); transform:translateX(-50%);
  width:min(560px, calc(100% - 24px)); display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; border-radius:999px;
  background:rgba(12,6,20,.82); backdrop-filter:blur(12px); box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 12px 40px rgba(0,0,0,.4);
  animation:fadeIn .3s ease;
}
.example-tag{ flex:none; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#120818; background:var(--gold); padding:4px 8px; border-radius:999px; }
.example-txt{ flex:1; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.example-close{ flex:none; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; color:var(--text); background:rgba(255,255,255,.08); }
.example-bar .btn-sm{ min-height:40px; padding:8px 14px; flex:none; }
#view-gift:has(.example-bar:not([hidden])) .loader{ padding-top:80px; }

/* ==========================================================================
   LANDING — ejemplos por ocasión
   ========================================================================== */
.ex-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap:16px; max-width:1100px; margin:0 auto; }
.ex-card{ position:relative; border-radius:24px; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; transition:transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease; }
.ex-cover{ position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden; }
.ex-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out); }
.ex-play{ position:absolute; right:14px; bottom:14px; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); box-shadow:0 0 0 1px rgba(255,255,255,.25); }
.ex-play .ico{ fill:#fff; stroke:none; }
.ex-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.ex-body h3{ margin:0; font-family:var(--font-head); font-size:19px; }
.ex-body p{ margin:0 0 8px; color:var(--muted); font-size:14px; }
.ex-actions{ margin-top:auto; display:flex; gap:8px; }
.ex-actions .btn{ flex:1; }
@media (hover:hover) and (pointer:fine){
  .ex-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--occ) 60%, transparent); box-shadow:0 24px 50px color-mix(in srgb, var(--occ) 22%, transparent); }
  .ex-card:hover .ex-cover img{ transform:scale(1.06); }
}
.ex-actions .btn{ white-space:nowrap; padding-left:12px; padding-right:12px; }

/* Fotos procesándose (HEIC / alta resolución) */
.dropzone.is-busy .dropzone-ico{ animation:dzPulse 1s ease-in-out infinite; }
@keyframes dzPulse{ 50%{ transform:scale(.9); opacity:.6; } }
@media (prefers-reduced-motion: reduce){ .dropzone.is-busy .dropzone-ico{ animation:none; } }

/* Regalo guardado solo en este equipo (el servidor no lo recibió) */
.res-local{ display:flex; gap:12px; align-items:flex-start; border-color:color-mix(in srgb, #ffd166 45%, transparent); background:color-mix(in srgb, #ffd166 9%, transparent); }
.res-local > .ico{ flex:none; width:22px; height:22px; color:#ffd166; margin-top:2px; }
.res-local b{ display:block; margin-bottom:4px; }
.res-local p{ margin:0 0 12px; font-size:14px; color:var(--muted); line-height:1.5; }
.res-panel:has(#resultLocal:not([hidden])) .res-qr{ opacity:.55; }

/* Barra de ejemplos: segunda fila con las 7 ocasiones para recorrerlas */
.example-bar{ flex-wrap:wrap; border-radius:24px; row-gap:8px; padding:8px 8px 10px 14px; }
.example-occs{
  flex-basis:100%; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -2px 0 -6px; padding:2px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 18px), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 18px), transparent);
  scroll-behavior:smooth;
}
.example-occs::-webkit-scrollbar{ display:none; }
.example-occ{
  flex:none; display:inline-flex; align-items:center; min-height:34px; padding:6px 12px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--text); text-decoration:none; white-space:nowrap;
  background:rgba(255,255,255,.07); transition:background .2s ease, transform .2s ease;
}
.example-occ:hover{ background:rgba(255,255,255,.13); }
.example-occ:active{ transform:scale(.96); }
.example-occ.is-on{ background:var(--occ); color:#120818; }
.example-occ:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
#view-gift:has(.example-bar:not([hidden])) .loader{ padding-top:130px; }
#view-gift:has(.example-bar:not([hidden])) .app{ padding-top:110px; }
@media (prefers-reduced-motion: reduce){ .example-occs{ scroll-behavior:auto; } }

/* Confirmación antes de pagar (después del pago no se edita) */
.co-confirm{ margin:16px 0 4px; }
.co-confirm .legal-text label{ cursor:pointer; }
.co-confirm .legal-text b{ color:var(--text); }
.co-pay .legal-error{ margin:4px 0 12px; }

/* Teléfono de vista previa: sin barra de desplazamiento visible (se sigue
   pudiendo deslizar con el dedo, la rueda o el teclado). */
html.is-preview, html.is-preview body{ scrollbar-width:none; -ms-overflow-style:none; }
html.is-preview::-webkit-scrollbar, html.is-preview body::-webkit-scrollbar{ display:none; width:0; height:0; }