/* Layout: papelería fina. Mucho aire, filetes finos, Fraunces para titulares con carácter y Nunito para leer, cronología vertical en "Cómo funciona". El regalo cambia de tono: romántico, cálido o simpático. */
:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --ink:#12203A;
  --muted:#56524A;
  --line:#E6E0D3;
  --rose:#80631F;
  --rose-ink:#FFFFFF;
  --rose-soft:#F6F1E4;
  --gold:#80631F;
  --shadow:0 24px 60px -30px rgba(18,32,58,.4);
  --f-serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --f-body:"Nunito","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-script:"Caveat","Bradley Hand","Segoe Print",cursive;
  --f-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  --f-fun:"Bricolage Grotesque","Arial Rounded MT Bold",system-ui,sans-serif;
  --r:16px;
}
/* Un solo aspecto: blanco roto siempre, también en móviles con modo oscuro */
:root{color-scheme:light}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;font-weight:500;line-height:1.6}
h1,h2,h3{font-family:var(--f-serif);font-weight:600;line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--rose)}
.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:14px 28px;font-weight:500;letter-spacing:.02em;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.btn-main{background:var(--ink);color:var(--bg)}
.btn-main:hover{background:var(--rose);color:var(--rose-ink)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.link:hover{border-color:var(--rose)}

body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:#F2D6DC}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,#F2D6DC 94%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid #E8C3CC}
header.top nav.links a:not(.btn){color:#5E4A55}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:30px;height:30px;flex:none;color:var(--rose)}
.brand b{font-family:"Bodoni Moda","Didot",Georgia,serif;font-weight:500;font-size:26px;letter-spacing:-.01em}
.brand b span{font-style:italic;color:var(--rose)}
nav.links{display:flex;gap:28px;align-items:center}
nav.links a{text-decoration:none;font-size:15px;color:var(--muted)}
nav.links a:hover{color:var(--ink)}
nav.links .btn{padding:10px 20px;font-size:15px;color:var(--bg)}
nav.links .btn:hover{color:var(--rose-ink)}
.demo-bar{background:var(--rose-soft);font-size:13px;text-align:center;color:var(--ink)}
.demo-bar .wrap{padding-block:6px}
@media (max-width:760px){nav.links a:not(.btn){display:none}}

/* Portada */
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-block:88px 80px}
.hero h1{font-size:clamp(44px,6.2vw,82px)}
.hero h1 em{color:var(--rose)}
.hero p.lead{font-size:19px;font-weight:400;color:var(--muted);max-width:30em;margin-top:24px}
.hero .cta{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:36px}
.hero .quiet{margin-top:28px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stage{display:grid;place-items:center}
.giftcard{position:relative;width:min(290px,100%);background:#fff;color:#2B2230;border:1px solid var(--line);border-radius:4px;padding:40px 28px 30px;text-align:center;box-shadow:var(--shadow)}
.giftcard .ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:84px;color:#B4475F}
.giftcard .qrbox{display:inline-block;padding:10px;border:1px solid #EFE6E6}
.giftcard .qrbox img,.giftcard .qrbox canvas{display:block}
.giftcard .script{font-family:var(--f-script);font-size:34px;line-height:1;margin-top:18px;color:#B4475F}
.giftcard .caps{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#7D7280;margin-top:10px}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-block:48px}}

section.block{padding-block:96px;border-top:1px solid var(--line)}
section.block h2{font-size:clamp(34px,4.4vw,52px)}
section.block .lede{margin-top:14px;color:var(--muted);font-weight:400;max-width:32em}

/* Cómo funciona: cronología vertical */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:64px;align-items:start}
.how .intro{position:sticky;top:110px}
@media (max-width:860px){.how{grid-template-columns:1fr;gap:36px}.how .intro{position:static}}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding-bottom:40px}
.timeline li::before{content:"";position:absolute;left:27px;top:56px;bottom:0;border-left:1px solid var(--line)}
.timeline li:last-child::before{display:none}
.timeline li.after::before{border-left-style:dashed}
.timeline .n{width:56px;height:56px;border-radius:50%;border:1px solid var(--rose);display:grid;place-items:center;font-family:var(--f-serif);font-style:italic;font-size:24px;color:var(--rose);background:var(--bg)}
.timeline li.after .n{border-style:dashed}
.timeline h3{font-size:26px;margin-top:10px}
.timeline p{color:var(--muted);font-weight:400;margin-top:6px}
.timeline .divider{display:block;grid-column:1/-1;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);padding:0 0 20px 76px}
.timeline li.label{padding-bottom:0}
.timeline li.label::before{top:0}

/* Ocasiones */
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px;margin-top:56px}
@media (max-width:760px){.groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.group h3{font-style:italic;font-size:30px;color:var(--rose);margin-bottom:12px}
.group .tone{font-size:13px;color:var(--muted);margin-bottom:10px}
.occ{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;padding:16px 0;border:0;border-top:1px solid var(--line);background:none;cursor:pointer;text-align:left}
.occ:last-child{border-bottom:1px solid var(--line)}
.occ b{font-family:var(--f-serif);font-weight:500;font-size:22px;display:block}
.occ small{display:block;color:var(--muted);font-size:15px;font-weight:400;margin-top:2px}
.occ span.go{color:var(--rose);font-size:20px;transition:transform .2s}
.occ:hover span.go{transform:translateX(4px)}
.occ:hover b{color:var(--rose)}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.plan-card{padding:28px 24px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line)}
.plan-card:first-child{border-left:0}
.plan-card h3{font-size:24px}
.plan-card .price{font-family:var(--f-serif);font-size:40px;font-variant-numeric:tabular-nums}
.plan-card .for{font-size:14px;color:var(--muted)}
.plan-card ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:15px;font-weight:400}
.plan-card li::before{content:"—  ";color:var(--rose)}
.plan-card .pill{align-self:start;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--rose)}
@media (max-width:900px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-card:nth-child(3){border-left:0;grid-column:1/-1}.plan-card:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.plan-card{padding:18px 14px}.plan-card h3{font-size:20px}.plan-card .price{font-size:30px}.plan-card ul{font-size:13px}.later-block{font-size:12px}}

.faq{max-width:720px;margin-top:40px}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--f-serif);font-size:21px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--rose)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--muted);font-weight:400}

footer{border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:36px}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
.foot-txt{display:grid;gap:4px;min-width:0}
.foot-txt small{font-size:13px;opacity:.85}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

/* Creador */
#crear .wrap{padding-block:32px 88px}
.back{font-size:14px;color:var(--muted);text-decoration:none}
.journey{display:flex;flex-wrap:wrap;gap:4px 22px;margin:22px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.journey span.on{color:var(--ink);font-weight:500;box-shadow:0 15px 0 -14px var(--rose)}
.journey span.done{color:var(--ink)}
.journey span.post{color:var(--gold)}
.q{font-size:clamp(32px,4.4vw,48px);margin:40px 0 10px}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:28px}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:20px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.choice:hover{border-color:var(--muted)}
.choice[aria-pressed="true"]{border-color:var(--rose);background:var(--rose-soft)}
.choice b{font-family:var(--f-serif);font-weight:500;font-size:21px}
.choice small{font-size:14px;color:var(--muted);font-weight:400;line-height:1.4}
.choice .sug{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin-top:6px}
.subhead{margin-top:36px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:44px;flex-wrap:wrap}

.edit{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start;margin-top:28px}
.edit .sticky{position:sticky;top:96px}
@media (max-width:960px){.edit{grid-template-columns:1fr}.edit .sticky{position:static;order:-1}.edit .sticky .phone{max-width:250px}.edit .sticky .screen{max-height:400px}}
.blocks{display:grid;gap:12px}
.bk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:14px;min-width:0}
.bk header{display:flex;gap:12px;align-items:baseline;justify-content:space-between}
.bk header > div{flex:1;min-width:0}
.bk header b{display:block;font-family:var(--f-serif);font-weight:500;font-size:21px}
.bk header small{color:var(--muted);font-size:14px;font-weight:400}
.bk .del{border:0;background:none;padding:0;font-size:13px;cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:3px;flex:none}
.bk .del:hover{color:var(--rose)}
.bk .byothers{font-size:14px;color:var(--muted);font-weight:400;border-left:2px solid var(--gold);padding-left:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:14px;font-weight:500}
.field .hint{font-size:13px;color:var(--muted);font-weight:400}
.field input,.field textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;font-weight:400}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--rose);outline:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:none;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:400;cursor:pointer;text-align:left}
.chips button:hover{border-color:var(--rose);color:var(--rose)}
.drop{display:block;border:1px dashed var(--muted);border-radius:12px;padding:18px;text-align:center;cursor:pointer;font-size:15px}
.drop:hover{border-color:var(--rose)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.thumbs figure{margin:0;position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--line);max-width:100%}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs button{position:absolute;top:4px;right:4px;border:0;border-radius:999px;width:22px;height:22px;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;line-height:1}
.files{display:grid;gap:6px;font-size:14px}
.files div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:6px 0}
.files button{border:0;background:none;cursor:pointer;color:var(--muted)}
.add > b{font-family:var(--f-serif);font-weight:500;font-size:21px}
.addlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.addlist button{display:block;text-align:left;border:1px dashed var(--line);background:none;border-radius:12px;padding:12px 14px;cursor:pointer}
.addlist button:hover{border-color:var(--rose)}
.addlist b{display:block;font-size:15px;font-weight:500}
.addlist b::before{content:"+ ";color:var(--rose)}
.addlist small{font-size:13px;color:var(--muted);font-weight:400}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.pairs{display:grid;gap:6px}
.pair{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:8px 0;font-size:15px}
.pair button{border:1px solid var(--line);background:none;border-radius:999px;padding:4px 12px;cursor:pointer;font-size:13px}
.err{color:var(--rose);font-size:14px}

/* Vista previa del regalo: cada tono define su papel */
.phone{width:100%;max-width:340px;margin:0 auto;border-radius:40px;padding:10px;background:#1B161E;box-shadow:var(--shadow)}
.screen{border-radius:31px;overflow:hidden;max-height:660px;overflow-y:auto;background:var(--p-bg);color:var(--p-ink)}
.mood-romantic{--p-bg:#FCF8F6;--p-ink:#2B2230;--p-muted:#8A7D84;--p-accent:#B4475F;--p-soft:#F6E7EA;--p-line:#EFE3E3;--p-title:var(--f-serif);--p-hand:var(--f-script);--p-cover:linear-gradient(180deg,#F5E1E5,#FCF8F6)}
.mood-warm{--p-bg:#FFFCF7;--p-ink:#2E2A26;--p-muted:#8C8378;--p-accent:#A8744A;--p-soft:#F4ECE0;--p-line:#EEE6DA;--p-title:var(--f-serif);--p-hand:var(--f-hand);--p-cover:linear-gradient(180deg,#F0E5D4,#FFFCF7)}
.mood-fun{--p-bg:#FFFFFF;--p-ink:#1F1A33;--p-muted:#6E6886;--p-accent:#EF4F5B;--p-soft:#FFF3C9;--p-line:#EEEAF5;--p-title:var(--f-fun);--p-hand:var(--f-hand);--p-cover:#FFE07A}
.mood-fun.tone-mint{--p-cover:#BDEFD9;--p-soft:#DDF6EC}
.mood-fun.tone-ribbon{--p-cover:#FFD1D6}
.mood-formal{--p-bg:#FAFAF8;--p-ink:#1E2430;--p-muted:#6B7280;--p-accent:#2F4A6D;--p-soft:#E9EDF3;--p-line:#E5E7EB;--p-title:var(--f-serif);--p-hand:var(--f-serif);--p-cover:linear-gradient(180deg,#E3E8EF,#FAFAF8)}
.mood-formal .g-cover .g-hand{font-style:italic;font-size:19px}
.mood-formal .pola p,.mood-formal .lessons{font-family:var(--f-body);font-size:14px}
.mood-formal .pola,.mood-formal .pola:nth-child(even){transform:none}
.mood-noche{--p-bg:#151A2C;--p-ink:#F4EFE6;--p-muted:#A9A7B8;--p-accent:#D9B26F;--p-soft:#232A42;--p-line:#2A3150;--p-title:var(--f-serif);--p-hand:var(--f-script);--p-cover:radial-gradient(90% 70% at 50% 0%,#28325C,#151A2C)}
.mood-noche .g-cover::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#D9B26F 1px,transparent 1.6px),radial-gradient(rgba(255,255,255,.75) .8px,transparent 1.4px);background-size:53px 47px,31px 37px;background-position:0 0,15px 20px}
.mood-noche .g-cover h3,.mood-lavanda .g-cover h3{font-style:italic;font-size:31px}
.mood-noche .g-cover .g-hand,.mood-lavanda .g-cover .g-hand{font-size:30px}
.mood-botanico{--p-bg:#F6F7F1;--p-ink:#26301F;--p-muted:#76806C;--p-accent:#5E7D4F;--p-soft:#E3EBDA;--p-line:#E2E7D9;--p-title:var(--f-serif);--p-hand:var(--f-hand);--p-cover:linear-gradient(180deg,#D7E3CB,#F6F7F1)}
.mood-lavanda{--p-bg:#FAF7FC;--p-ink:#2E2639;--p-muted:#857B92;--p-accent:#7B5EA7;--p-soft:#EDE5F6;--p-line:#ECE6F2;--p-title:var(--f-serif);--p-hand:var(--f-script);--p-cover:linear-gradient(180deg,#E6DBF3,#FAF7FC)}
.mood-minimal{--p-bg:#FFFFFF;--p-ink:#111111;--p-muted:#777777;--p-accent:#111111;--p-soft:#F2F2F2;--p-line:#E6E6E6;--p-title:var(--f-body);--p-hand:var(--f-serif);--p-cover:#FFFFFF}
.mood-minimal .g-cover{border-bottom:1px solid #111111}
.mood-minimal .g-cover h3{font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:21px}
.mood-minimal .g-cover .g-hand{font-style:italic;font-size:19px}
.mood-minimal .pola,.mood-minimal .pola:nth-child(even){transform:none;box-shadow:none;border:1px solid #E6E6E6}
.mood-minimal .pola p{font-family:var(--f-body);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.mood-vintage{--p-bg:#F4ECDF;--p-ink:#3B2F2A;--p-muted:#8A7A6E;--p-accent:#9A4A2F;--p-soft:#EADCC6;--p-line:#E3D5BF;--p-title:var(--f-serif);--p-hand:var(--f-hand);--p-cover:#E9DAC1}
.mood-vintage .g-cover{box-shadow:inset 0 0 0 10px #F4ECDF,inset 0 0 0 11px #9A4A2F}
.mood-vintage .pola img{filter:sepia(.3)}
.mood-mar{--p-bg:#F6FAFB;--p-ink:#1C3440;--p-muted:#6F8790;--p-accent:#1F6F8B;--p-soft:#DCEDF2;--p-line:#E1ECEF;--p-title:var(--f-serif);--p-hand:var(--f-hand);--p-cover:linear-gradient(180deg,#CBE5EE,#F6FAFB)}
.g-cover{position:relative;padding:48px 24px 32px;text-align:center;overflow:hidden;background:var(--p-cover)}
.g-cover .orn{font-family:var(--f-serif);font-size:26px;color:var(--p-accent);line-height:1}
.mood-fun .g-cover .orn{font-size:38px}
.g-cover h3{font-family:var(--p-title);font-size:28px;margin-top:12px;color:var(--p-ink)}
.mood-romantic .g-cover h3{font-style:italic;font-size:31px}
.mood-fun .g-cover h3{font-weight:800;letter-spacing:-.02em}
.g-cover p{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--p-muted);margin-top:12px}
.g-cover .g-hand{font-family:var(--p-hand);font-size:24px;letter-spacing:0;text-transform:none;line-height:1.15;color:var(--p-accent);margin-top:12px}
.mood-romantic .g-cover .g-hand{font-size:30px}
.darkcover .g-cover h3,.darkcover .g-cover p,.darkcover .g-cover .g-hand,.darkcover .g-cover .orn{color:#FFFFFF}
.mood-fun .g-cover::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;background-image:radial-gradient(#EF4F5B 2px,transparent 2.5px),radial-gradient(#3C8DFF 2px,transparent 2.5px),radial-gradient(#1F1A33 1.5px,transparent 2px);background-size:57px 61px,43px 47px,71px 53px;background-position:0 0,20px 30px,40px 10px}
.snow::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#fff 1.6px,transparent 2.2px),radial-gradient(rgba(255,255,255,.8) 1px,transparent 1.6px);background-size:46px 46px,27px 27px}
@media (prefers-reduced-motion:no-preference){.snow::after{animation:snow 9s linear infinite}@keyframes snow{to{background-position:20px 460px,-10px 270px}}}
.g-sec{padding:26px 22px;border-top:1px solid var(--p-line)}
.g-sec h4{margin:0 0 16px;font-family:var(--f-body);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--p-muted);text-align:center}
.mood-fun .g-sec h4{text-align:left;font-family:var(--f-fun);font-size:17px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--p-ink)}
.ph{background:var(--p-soft);display:grid;place-items:center;font-size:11px;color:var(--p-muted);overflow:hidden}
.ph img,.ph video{width:100%;height:100%;object-fit:cover;display:block}
.heart{width:240px;height:216px;margin:0 auto;clip-path:path("M120 216 C40 150 0 110 0 64 C0 28 28 0 64 0 C90 0 110 14 120 34 C130 14 150 0 176 0 C212 0 240 28 240 64 C240 110 200 150 120 216 Z");display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:54px;gap:2px;background:var(--p-accent)}
.polas{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.pola{width:44%;background:#fff;padding:7px 7px 6px;box-shadow:0 8px 18px -8px rgba(43,34,48,.35);transform:rotate(-2deg)}
.pola:nth-child(even){transform:rotate(2deg)}
.mood-fun .pola{transform:rotate(-5deg)}.mood-fun .pola:nth-child(even){transform:rotate(4deg)}
.pola .ph{aspect-ratio:1}
.pola p{font-family:var(--p-hand);font-size:19px;text-align:center;margin-top:4px;color:#2B2230;min-height:22px}
.carousel{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.carousel .ph{flex:0 0 78%;aspect-ratio:4/5;border-radius:4px;scroll-snap-align:center}
.mood-fun .carousel .ph{border-radius:14px}
.dots{display:flex;justify-content:center;gap:5px;margin-top:8px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--p-line)}
.dots i:first-child{background:var(--p-ink)}
.vid{aspect-ratio:16/9;border-radius:4px;position:relative}
.vid .play{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vgrid .ph{aspect-ratio:3/4;border-radius:10px;position:relative;align-items:end;justify-items:start;padding:8px;background:linear-gradient(160deg,var(--p-soft),var(--p-line));color:var(--p-ink);font-weight:500;font-size:12px}
.vgrid .ph::before{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:20px;color:var(--p-accent)}
.vgrid .ph img{position:absolute;inset:0;border-radius:inherit}
.vgrid .ph:has(img){color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.vgrid .ph:has(img)::before{color:#fff;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.vgrid .ph:has(img)::after{content:"";position:absolute;inset:50% 0 0;border-radius:0 0 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.vgrid .ph span{position:relative;z-index:1}
.g-letter{font-size:15px;font-weight:400;white-space:pre-wrap;line-height:1.7;color:var(--p-ink)}
.mood-romantic .g-letter{font-family:var(--f-serif);font-style:italic;font-size:16px}
.g-song{display:flex;align-items:center;gap:12px;border:1px solid var(--p-line);color:var(--p-ink);border-radius:999px;padding:10px 14px;text-decoration:none;font-size:14px}
.g-song i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--p-accent);color:#fff;display:grid;place-items:center;flex:none;font-size:11px}
.counter{text-align:center;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--p-muted)}
.counter b{display:block;font-family:var(--p-title);font-weight:500;font-size:54px;letter-spacing:0;color:var(--p-accent);font-variant-numeric:tabular-nums;text-transform:none}
.flip{display:grid;gap:8px}
.flip button{border:1px solid var(--p-line);border-radius:12px;padding:14px;text-align:left;background:var(--p-bg);color:var(--p-ink);cursor:pointer;font-size:15px;font-weight:400}
.flip button.open{background:var(--p-soft);border-color:var(--p-accent);font-family:var(--f-serif);font-style:italic}
.tl{display:grid;gap:14px;border-left:1px solid var(--p-accent);padding-left:18px;margin-left:6px}
.tl div{position:relative;font-size:14px;font-weight:400}
.tl div::before{content:"";position:absolute;left:-23px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--p-bg);border:1px solid var(--p-accent)}
.tl b{display:block;font-family:var(--p-title);font-size:16px;color:var(--p-accent);font-weight:500}
.wall{display:grid;gap:10px}
.wall div{border-bottom:1px solid var(--p-line);padding-bottom:10px;font-size:14px;font-weight:400}
.mood-fun .wall div{background:var(--p-soft);border:0;border-radius:12px;padding:10px 12px}
.wall b{display:block;font-size:12px;font-weight:500;color:var(--p-muted);margin-bottom:2px}
.baby{border:1px solid var(--p-line);border-radius:4px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center}
.baby div{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-muted)}
.baby b{display:block;font-family:var(--p-title);font-weight:500;font-size:21px;letter-spacing:0;text-transform:none;color:var(--p-ink)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba .ph{aspect-ratio:3/4;border-radius:4px;position:relative}
.ba span{position:absolute;left:6px;top:6px;background:rgba(255,255,255,.9);color:#2B2230;font-size:10px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:3px 9px}
.audio{display:grid;gap:8px}
.audio div{display:flex;align-items:center;gap:10px;border:1px solid var(--p-line);border-radius:999px;padding:8px 12px;font-size:13px}
.audio i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--p-accent);color:#fff;display:grid;place-items:center;font-size:10px;flex:none}
.audio .wave{flex:1;height:14px;background:repeating-linear-gradient(90deg,var(--p-muted) 0 1.5px,transparent 1.5px 5px);opacity:.5;border-radius:3px}
.clues{display:grid;gap:8px;counter-reset:c}
.clues div{counter-increment:c;background:var(--p-soft);border-radius:12px;padding:10px 12px;font-size:14px}
.clues div::before{content:"Pista " counter(c) " · ";font-weight:600}
.reveal{display:block;width:100%;border:0;border-radius:999px;padding:13px;background:var(--p-ink);color:var(--p-bg);font-weight:500}
.checks{display:grid;gap:6px;font-size:14px;font-weight:400}
.checks div::before{content:"○  ";color:var(--p-accent)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.gal .ph{aspect-ratio:1}
.g-foot{padding:22px;text-align:center;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--p-muted)}
.ex{font-size:10px;color:var(--p-muted);font-weight:400;letter-spacing:.1em}
.vales{display:grid;gap:8px}
.vale{display:grid;gap:2px;width:100%;border:1px dashed var(--p-accent);background:var(--p-bg);border-radius:10px;padding:14px;text-align:left;cursor:pointer;color:var(--p-ink);font-size:16px}
.mood-romantic .vale{font-family:var(--f-serif);font-style:italic}
.vale small{font-family:var(--f-body);font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--p-accent)}
.vale em{font-family:var(--f-body);font-style:normal;font-size:12px;color:var(--p-muted)}
.vale.used{opacity:.5}
.years{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.yr{display:grid;gap:3px}
.yr .ph{aspect-ratio:1;border-radius:3px}
.yr span{font-size:10px;text-align:center;color:var(--p-muted)}
.retos{display:grid;gap:6px}
.retos div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--p-line);padding:8px 0;font-size:14px;font-weight:400}
.retos b{font-size:12px;color:var(--p-accent);white-space:nowrap;font-weight:500}
.poll{margin-bottom:14px}
.poll p{font-size:14px;font-weight:500;margin-bottom:6px}
.poll .bar{height:6px;background:var(--p-line);border-radius:999px;overflow:hidden}
.poll .bar i{display:block;height:100%;background:var(--p-accent)}
.poll small{font-size:11px;color:var(--p-muted)}
.vote{display:flex;flex-wrap:wrap;gap:6px}
.vote span{border:1px solid var(--p-ink);border-radius:999px;padding:6px 14px;font-size:14px}
.lessons{margin:0;padding-left:22px;font-family:var(--p-hand);font-size:22px;line-height:1.35;color:var(--p-ink)}
.mood-warm .lessons{font-size:24px}
.envelope{display:grid;place-items:center;gap:10px;width:100%;min-height:150px;border:1px solid var(--p-line);border-radius:4px;background:linear-gradient(162deg,var(--p-soft) 0 50%,var(--p-bg) 50%);color:var(--p-ink);cursor:pointer;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:20px;text-align:center}
.envelope .seal{width:44px;height:44px;border-radius:50%;background:var(--p-accent);color:#fff;display:grid;place-items:center;font-size:18px;letter-spacing:0}
.envelope.open{background:var(--p-bg);text-transform:none;letter-spacing:0}
.envelope.open b{font-family:var(--p-hand);font-weight:400;font-size:28px;color:var(--p-accent)}

/* Revisar y pagar */
.result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px;align-items:start;margin-top:28px}
@media (max-width:900px){.result{grid-template-columns:1fr}}
.side{display:grid;gap:16px;min-width:0}
.summary,.locked,.next{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.summary{display:grid;gap:10px}
.summary .row{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:400}
.summary .row span:last-child{font-variant-numeric:tabular-nums;text-align:right}
.summary .total{border-top:1px solid var(--line);padding-top:12px;font-family:var(--f-serif);font-weight:500;font-size:24px}
.locked{display:flex;gap:16px;align-items:center}
.locked .qrfake{width:76px;height:76px;flex:none;border-radius:6px;border:1px dashed var(--muted);display:grid;place-items:center;font-size:22px;color:var(--muted)}
.locked b{font-family:var(--f-serif);font-weight:500;font-size:19px}
.next h3{font-size:22px;margin-bottom:12px}
.next ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px;font-weight:400}
.next ol b{font-weight:500}
.note{background:var(--rose-soft);border-radius:10px;padding:12px 14px;font-size:14px}

/* Email de ejemplo */
.mail{margin-top:36px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.mail .meta{padding:12px 18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);display:grid;gap:2px}
.mail .body{background:#F5F0EE;padding:28px 12px}
.mcard{max-width:560px;margin:0 auto;background:#fff;color:#2B2230;border-radius:4px;overflow:hidden}
.mcard .mhead{padding:34px 26px 26px;text-align:center;background:linear-gradient(180deg,#F5E1E5,#fff)}
.mcard .mhead h3{font-size:28px;font-style:italic;color:#2B2230}
.mcard .mqr{display:flex;gap:18px;align-items:center;padding:22px 26px;border-bottom:1px solid #EFE6E6;flex-wrap:wrap}
.mcard .mqr .qr{border:1px solid #EFE6E6;padding:6px}
.mcard .mqr .qr img,.mcard .mqr .qr canvas{display:block}
.mcard .mqr a{display:inline-block;background:#2B2230;color:#fff;text-decoration:none;border-radius:999px;padding:10px 20px;margin-top:10px;font-size:14px}
.mcard .msteps{padding:22px 26px;display:grid;gap:16px}
.mcard .msteps div{display:grid;grid-template-columns:34px 1fr;gap:12px;font-size:15px;line-height:1.5;font-weight:400}
.mcard .msteps i{font-style:italic;font-family:var(--f-serif);width:30px;height:30px;border-radius:50%;border:1px solid #B4475F;color:#B4475F;display:grid;place-items:center;font-size:15px}
.mcard .msteps b{display:block;font-weight:500}
.mcard .mfoot{padding:16px 26px;background:#FBF8F6;font-size:12px;color:#7D7280}

/* Más vida: franjas de color, detalles dorados, ejemplos de regalos */
:root{--band:#FFFFFF;--sand:#F6F1E4;--butter:#F6F1E4;--sage:#F6F1E4}
.eyebrow::before{content:"✦  ";color:var(--gold)}
.hero{background:radial-gradient(55% 75% at 82% 45%,#F2DCE0 0%,rgba(242,220,224,0) 70%),radial-gradient(30% 40% at 60% 90%,#F6EBD9 0%,rgba(246,235,217,0) 70%)}
.hero h1 em{background:linear-gradient(transparent 78%,rgba(184,150,104,.25) 78%)}
.stage{position:relative;display:block;min-height:540px}
.hero-phone{width:270px;margin-left:auto;margin-right:12px;transform:rotate(3deg)}
.hero-phone .phone{max-width:270px}
.hero-phone .screen{max-height:500px;overflow:hidden}
.hero-phone{position:relative;z-index:1}
.hero-phone2{position:absolute;left:0;top:34px;width:228px;transform:rotate(-7deg);z-index:0}
@media (prefers-reduced-motion:no-preference){.hero-phone2{animation:drift2 8s ease-in-out -2s infinite}@keyframes drift2{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-12px)}}}
.hero-phone2 .phone{max-width:228px}
.hero-phone2 .screen{max-height:420px;overflow:hidden}
.stage .giftcard{position:absolute;left:14%;bottom:0;z-index:2;width:190px;padding:30px 16px 18px;transform:rotate(-4deg)}
.stage .giftcard .script{font-size:30px;margin-top:12px}
@media (prefers-reduced-motion:no-preference){
  .hero-phone{animation:drift 7s ease-in-out infinite}
  @keyframes drift{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(2deg) translateY(-10px)}}
}
@media (max-width:860px){.stage{min-height:500px}.hero-phone{margin-right:0}}
@media (max-width:420px){.hero-phone{width:230px}.hero-phone2{width:190px;top:60px}.stage .giftcard{width:160px;left:0}}
section.band{background:var(--band);border-top:0}
.band .timeline .n{background:var(--band)}
.band .timeline li::before{border-color:rgba(180,71,95,.35)}
.groups .group{border-radius:24px;padding:32px 30px 24px;position:relative;overflow:hidden}
.g-icon{position:absolute;right:24px;top:24px;width:72px;height:72px;border-radius:50%;border:1px solid rgba(184,150,104,.5);display:grid;place-items:center;color:var(--rose);background:rgba(255,255,255,.35)}
.g-icon svg{width:36px;height:36px}
.g-bodas .g-icon{color:#9C7A4D}
.g-vida .g-icon{color:#C8432F}
.g-fechas .g-icon{color:#4F6B4A}
.groups .group h3,.groups .group .tone{padding-right:84px}
.g-amor{background:#F6E4E7}
.g-bodas{background:var(--sand)}
.g-vida{background:var(--butter)}
.g-vida h3{font-family:var(--f-fun);font-style:normal;font-weight:800;color:#C8432F}
.g-fechas{background:var(--sage)}
.g-fechas h3{color:#4F6B4A}
#crear{background:radial-gradient(45% 35% at 95% 0%,#F2DCE0 0%,rgba(242,220,224,0) 70%),radial-gradient(35% 30% at 0% 30%,#F6EBD9 0%,rgba(246,235,217,0) 70%)}
.step-eb{margin-top:40px}
.step-eb + .q{margin-top:12px}
.choices{gap:16px}
.choice{position:relative;padding:24px 22px;gap:6px;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.choice:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line)}
.choice .ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--rose-soft);color:var(--rose);margin-bottom:10px;transition:transform .2s}
.choice:hover .ic{transform:scale(1.06)}
.choice .ic svg{width:30px;height:30px}
.choice.c-bodas .ic{background:var(--sand);color:#9C7A4D}
.choice.c-vida .ic{background:var(--butter);color:#C8432F}
.choice.c-fechas .ic{background:var(--sage);color:#4F6B4A}
.choice[aria-pressed="true"]{border-color:var(--rose);background:var(--surface);box-shadow:0 0 0 3px var(--rose-soft)}
.choice[aria-pressed="true"]::after{content:"✓";position:absolute;top:16px;right:16px;width:26px;height:26px;border-radius:50%;background:var(--rose);color:#fff;display:grid;place-items:center;font-size:13px}
.tones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.tones span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.tones button{border:1px solid var(--line);background:none;border-radius:999px;padding:7px 16px;cursor:pointer;font-size:14px}
.tones button:hover{border-color:var(--rose)}
.tones button[aria-pressed="true"]{border-color:var(--rose);background:var(--rose-soft)}
.groups .occ{border-color:rgba(43,34,48,.1)}
.showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:48px}
.showcase figure{margin:0;display:grid;gap:16px;justify-items:center}
.showcase .phone{max-width:290px}
.showcase .screen{max-height:520px}
.showcase figure:nth-child(2){transform:translateY(28px)}
.showcase figcaption{text-align:center;font-size:14px;color:var(--muted)}
.showcase figcaption b{display:block;font-family:var(--f-serif);font-weight:500;font-style:italic;font-size:24px;color:var(--rose)}
@media (max-width:900px){.showcase{grid-template-columns:1fr;gap:48px}.showcase figure:nth-child(2){transform:none}}
.plans{box-shadow:var(--shadow)}
.plan-card:nth-child(2){background:#FBF1F2}
footer{background:#2B2230;color:#CFC4CB;border-top:0}
footer a:hover{color:#FFFFFF}

/* Animación de carga: la caja se dibuja, aparece el QR, se abre la tapa y sale un corazón */
#loader{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--bg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s}
#loader.on{opacity:1;visibility:visible;pointer-events:auto;transition:none}
.ld{display:grid;justify-items:center;gap:14px}
.ld-box{width:104px;height:104px;color:var(--rose);overflow:visible}
.ld-box .draw{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#loader.on .draw{animation:ld-draw .45s cubic-bezier(.6,0,.2,1) forwards}
#loader.on .d2{animation-delay:.18s}
#loader.on .d3{animation-delay:.32s;animation-duration:.4s}
@keyframes ld-draw{to{stroke-dashoffset:0}}
.ld-box .px{fill:var(--ink);transform-box:fill-box;transform-origin:center;transform:scale(.7);opacity:0}
.ld-box .px .hole{fill:var(--bg)}
#loader.on .px{animation:ld-pop .26s cubic-bezier(.3,1.7,.5,1) forwards;animation-delay:calc(.45s + var(--i) * 40ms)}
@keyframes ld-pop{to{transform:scale(1);opacity:1}}
.ld-lid{transform-box:fill-box;transform-origin:0% 100%}
#loader.on .ld-lid{animation:ld-lid .5s cubic-bezier(.4,0,.2,1) .78s forwards}
@keyframes ld-lid{60%{transform:translate(-1px,-6px) rotate(-12deg)}100%{transform:translate(-1px,-4px) rotate(-8deg)}}
.ld-heart{fill:var(--rose);opacity:0;transform-box:fill-box;transform-origin:center}
#loader.on .ld-heart{animation:ld-heart .7s ease-out .9s forwards}
@keyframes ld-heart{0%{opacity:0;transform:translateY(14px) scale(.3)}45%{opacity:1}100%{opacity:0;transform:translateY(-8px) scale(1.4)}}
.ld-word{font-size:26px;letter-spacing:-.01em;opacity:0;transform:translateY(6px)}
.ld-word span{font-style:italic;color:var(--rose)}
#loader.on .ld-word{animation:ld-up .5s ease .25s forwards}
@keyframes ld-up{to{opacity:1;transform:none}}
.ld-bar{width:120px;height:1px;background:var(--line);overflow:hidden}
.ld-bar i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
#loader.on .ld-bar i{animation:ld-bar 1.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes ld-bar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){#loader.on *{animation-duration:.01ms !important;animation-delay:0s !important}}

/* Precios en promoción y caprichos */
s{color:var(--muted);font-weight:400;text-decoration-thickness:1px;margin-right:2px}
.later{font-size:.8em;font-weight:400;color:var(--muted);white-space:nowrap}
.later-block{font-size:13px;line-height:1.45;color:var(--gold);margin-top:-4px}
.topping span .later{display:block;font-family:var(--f-body);font-size:13px}
.promo{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;text-decoration:none;font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 16px 6px 6px;box-shadow:0 8px 24px -16px rgba(180,71,95,.6)}
.promo b{background:var(--rose);color:var(--rose-ink);border-radius:999px;padding:3px 12px;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.promo span{color:var(--rose)}
.promo:hover{border-color:var(--rose)}
.tops-head{margin-top:56px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.tops-head h3{font-size:30px;font-style:italic;color:var(--rose)}
.tops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.topping{display:grid;gap:4px;align-content:start;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:20px}
.topping b{font-family:var(--f-serif);font-weight:500;font-size:20px}
.topping small{color:var(--muted);font-weight:400;font-size:14px}
.topping span{margin-top:8px;font-family:var(--f-serif);font-size:24px;font-variant-numeric:tabular-nums}
.topping span s{font-size:15px}
@media (max-width:900px){.tops{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.tops{grid-template-columns:1fr}}
.bk .tp,.bk .inc{font-size:13px;white-space:nowrap;flex:none}
.bk .inc{color:var(--gold);letter-spacing:.06em}
.bk .tp{color:var(--rose);font-weight:500}
.addlist .tp{display:block;margin-top:6px;font-size:13px;color:var(--rose);font-weight:500}
.add > small{display:block;margin-top:-6px}
.summary .row s{font-size:13px}
.save{font-size:13px;color:var(--gold);margin-top:-4px}

/* Apertura interactiva del regalo */
.screen{position:relative}
.intro{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;min-height:100%;border:0;cursor:pointer;background:var(--p-cover);color:var(--p-accent);overflow:hidden;transition:opacity .4s ease}
.screen.darkcover .intro{color:#FFFFFF}
.intro .ii{width:132px;height:132px;display:grid;place-items:center;border-radius:50%;background:var(--p-bg);box-shadow:0 18px 40px -20px rgba(0,0,0,.35)}
.intro .ii svg{width:84px;height:84px;overflow:visible}
.intro .it{font-family:var(--p-title);font-size:22px;color:var(--p-ink);padding:0 24px;text-align:center}
.screen.darkcover .intro .it{color:#FFFFFF}
.mood-romantic .intro .it,.mood-noche .intro .it,.mood-lavanda .intro .it{font-style:italic}
.intro .ih{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--p-muted)}
.screen.darkcover .intro .ih{color:rgba(255,255,255,.75)}
.intro i{position:absolute;left:50%;top:42%;font-style:normal;font-size:18px;color:var(--p-accent);pointer-events:none;animation:burst .95s cubic-bezier(.2,.7,.3,1) forwards}
.intro i:nth-of-type(3n){color:var(--p-ink)}
.intro i:nth-of-type(4n){color:#E8B54A}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(var(--s));opacity:0}}
.intro.gone{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .intro .ii{animation:invite 2.2s ease-in-out infinite}
  .intro.fx-beat .ii{animation:beat 1.2s ease-in-out infinite}
  .intro.fx-swing .ii svg{transform-origin:50% 15%;animation:swing 2.4s ease-in-out infinite}
  .intro.fx-shake .ii{animation:wiggle 2.6s ease-in-out infinite}
}
@keyframes invite{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}45%{transform:scale(1.08)}}
@keyframes swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-8deg)}88%{transform:rotate(8deg)}92%{transform:rotate(-6deg)}96%{transform:rotate(5deg)}}
.intro.opening .ii{animation:open-pop .7s cubic-bezier(.3,1.5,.5,1) forwards}
.intro.opening.fx-fly .ii{animation:open-fly .8s cubic-bezier(.5,0,.8,.4) forwards}
.intro.opening.fx-blow .flame{opacity:0;transition:opacity .25s}
.intro .shackle{transform-origin:40px 30px;transition:transform .35s ease}
.intro.opening.fx-unlock .shackle{transform:rotate(35deg) translateY(-3px)}
.intro .glass-l,.intro .glass-r{transition:transform .3s ease}
.intro.opening.fx-clink .glass-l{transform:translateX(4px) rotate(10deg)}
.intro.opening.fx-clink .glass-r{transform:translateX(-4px) rotate(-10deg)}
.intro.opening.fx-bloom .ii svg circle{transform-box:fill-box;transform-origin:center;animation:open-bloom .5s ease forwards}
.intro.opening .it,.intro.opening .ih{opacity:0;transition:opacity .3s}
@keyframes open-pop{40%{transform:scale(1.15)}100%{transform:scale(.8);opacity:0}}
@keyframes open-fly{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(160px,-240px) rotate(25deg) scale(.6);opacity:0}}
@keyframes open-bloom{to{transform:scale(1.35)}}
.replay{display:block;margin:14px auto 0;border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.replay:hover{color:var(--rose)}
@media (prefers-reduced-motion:reduce){.intro i{display:none}.intro.opening .ii{animation:none;opacity:0}}

.swipe{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:12px}
.showcase figcaption .swipe{display:block;margin-top:8px}
.bk.premium{border-color:var(--gold);background:linear-gradient(180deg,#FFFBF4,var(--surface))}
.bk.premium > b::after{content:"  ✦";color:var(--gold)}
.bk.designs{gap:12px}

/* Ocasiones en dos columnas en el móvil (va al final para ganar a las reglas generales) */
@media (max-width:760px){
  .groups .group{padding:18px 14px 12px;border-radius:18px}
  .groups .group h3{font-size:21px;padding-right:0;margin-bottom:8px}
  .groups .group .tone{display:none}
  .groups .g-icon{position:static;width:44px;height:44px;margin-bottom:10px}
  .groups .g-icon svg{width:24px;height:24px}
  .groups .occ{padding:10px 0}
  .groups .occ b{font-size:16px;line-height:1.2}
  .groups .occ small{font-size:12px;line-height:1.35}
  .groups .occ span.go{display:none}
}

/* Toques de la apertura */
.intro .taps{display:flex;gap:7px}
.intro .taps b{width:9px;height:9px;border-radius:50%;border:1px solid var(--p-accent);transition:background .2s,transform .2s}
.intro .taps b.on{background:var(--p-accent);transform:scale(1.15)}
.screen.darkcover .intro .taps b{border-color:#fff}.screen.darkcover .intro .taps b.on{background:#fff}
.intro .fillrect{transform:translateY(calc(var(--k) * -64px));transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.intro .ii.bump{animation:bump .28s ease}
@keyframes bump{50%{transform:scale(1.12) rotate(-3deg)}}
.intro.mode-rise .ii svg{transform:translateY(calc(var(--k) * -14px)) rotate(calc(var(--k) * -10deg));transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.intro .solid{fill:var(--p-bg)}
.intro .flame{transition:opacity .25s,transform .25s;transform-box:fill-box;transform-origin:center bottom}
.intro[data-step="1"] .f1,.intro[data-step="2"] .f1,.intro[data-step="2"] .f2,.intro[data-step="3"] .f1,.intro[data-step="3"] .f2,.intro[data-step="3"] .f3{opacity:0;transform:scale(.3)}
.intro .seal{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.intro:not([data-step="0"]) .seal{transform:scale(.6);opacity:0}
.intro .flap{transform-box:view-box;transform-origin:32px 26px;transition:transform .4s ease}
.intro[data-step="2"] .flap,.intro[data-step="3"] .flap{transform:scaleY(-1)}
.intro .letter{transition:transform .4s ease}
.intro[data-step="2"] .letter{transform:translateY(-6px)}.intro[data-step="3"] .letter{transform:translateY(-14px)}
.intro .bow,.intro .ribbon{transition:transform .4s ease,opacity .4s ease}
.intro:not([data-step="0"]) .bow{transform:translateY(-14px) rotate(-12deg);opacity:0}
.intro[data-step="2"] .ribbon,.intro[data-step="3"] .ribbon{opacity:0}
.intro .lid{transform-box:fill-box;transform-origin:0% 100%;transition:transform .4s ease}
.intro[data-step="3"] .lid{transform:translate(-2px,-8px) rotate(-28deg)}
.intro .ringL,.intro .ringR{transition:transform .35s ease}
.intro .ringL{transform:translateX(calc(var(--k) * 6px))}.intro .ringR{transform:translateX(calc(var(--k) * -6px))}
.intro .cork{transition:transform .5s cubic-bezier(.2,.9,.3,1),opacity .5s}
.intro.opening .cork{transform:translate(6px,-30px) rotate(40deg);opacity:0}
.intro .hand{transform-box:view-box;transform-origin:32px 36px;transition:transform .3s;transform:rotate(calc(var(--k) * 270deg))}
/* Píldora «Desliza» sobre los móviles */
.pw{position:relative;width:100%;display:grid;justify-items:center}
.swipe-pill{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:6px;background:rgba(43,34,48,.85);color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:999px;pointer-events:none;transition:opacity .3s;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.swipe-pill i{font-style:normal;display:inline-block;animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}
.pw.scrolled .swipe-pill{opacity:0}
/* Ejemplos en dos filas; en el móvil, carrusel lateral */
.showcase{row-gap:72px}
.showcase figure:nth-child(2){transform:none}
.showcase figure:nth-child(3n+2){transform:translateY(28px)}
@media (max-width:900px){.showcase{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding-bottom:12px}.showcase figure{flex:0 0 80%;scroll-snap-align:center;transform:none !important}}
.only-mobile{display:none !important}
@media (max-width:640px){.only-mobile{display:inline-flex !important}p.only-mobile{display:block !important}}
/* Género y tonos de bebé */
.gender{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gender .lbl,.bk.designs .lbl{display:block;width:100%;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.gender button{border:1px solid var(--line);background:none;border-radius:999px;padding:7px 14px;cursor:pointer;font-size:14px}
.gender button[aria-pressed="true"]{border-color:var(--rose);background:var(--rose-soft)}
.btones{display:flex;flex-wrap:wrap;gap:10px}
.btones button{display:grid;justify-items:center;gap:4px;border:0;background:none;cursor:pointer;font-size:13px;color:var(--muted)}
.btones span{width:40px;height:40px;border-radius:50%;border:1px solid var(--line)}
.btones button[aria-pressed="true"]{color:var(--ink);font-weight:500}
.btones button[aria-pressed="true"] span{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--rose)}
/* Promo en una línea en el móvil */
.promo em{font-style:normal;color:var(--ink)}
.promo .short{display:none}
@media (max-width:520px){.promo .long{display:none}.promo .short{display:inline}}
/* Botones Atrás / Siguiente siempre visibles */
.wiz-nav{position:sticky;bottom:0;z-index:8;margin-top:32px;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(250,246,240,0),var(--bg) 30%);border-top:0}
.wiz-nav .btn{box-shadow:0 10px 24px -14px rgba(43,34,48,.5)}
.wiz-nav{flex-wrap:nowrap;align-items:center}
@media (max-width:520px){.wiz-nav .btn{padding:12px 18px;font-size:15px;white-space:nowrap}}

.hero{overflow-x:clip}


/* Diseños temáticos */
.mood-corazones{--p-bg:#FFF7F7;--p-ink:#3A1520;--p-muted:#8C5A64;--p-accent:#C9304A;--p-soft:#FBE3E6;--p-line:#F3D6DA;--p-title:var(--f-serif);--p-hand:var(--f-script);--p-cover:linear-gradient(160deg,#7E1428,#C9304A)}
.mood-corazones .g-cover::before,.mood-corazones .intro::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M14 24c-5-4-8-6-8-10a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 4-3 6-8 10z' fill='%23FFC2CF'/%3E%3Cpath d='M42 50c-3-2.5-5-4-5-6.5a2.5 2.5 0 0 1 5-.6 2.5 2.5 0 0 1 5 .6c0 2.5-2 4-5 6.5z' fill='%23FFE3E9'/%3E%3C/svg%3E")}
.mood-corazones .g-cover h3{font-style:italic;font-size:31px}
.mood-corazones .g-cover .g-hand{font-size:30px;color:#FFD3DC}
.mood-navidad{--p-bg:#FFFBF7;--p-ink:#3B1414;--p-muted:#8C5A50;--p-accent:#B3122A;--p-soft:#F8E3E3;--p-line:#F0DEDA;--p-title:var(--f-serif);--p-hand:var(--f-script);--p-cover:linear-gradient(170deg,#9E0F25,#C8102E)}
.mood-navidad .g-cover .g-hand{font-size:30px;color:#F2C76B}
.mood-navidad .g-cover::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,#F2C76B 0 14px,#FFFFFF 14px 28px);opacity:.85}
.darkcover .g-cover h3,.darkcover .g-cover p,.darkcover .g-cover .orn{color:#FFFFFF}
.darkcover .intro{color:#FFFFFF}
.darkcover .intro .it{color:#FFFFFF}
.darkcover .intro .ih{color:rgba(255,255,255,.8)}
.darkcover .intro .taps b{border-color:#fff}.darkcover .intro .taps b.on{background:#fff}
.mood-neon{--p-bg:#160A1F;--p-ink:#FCEFFF;--p-muted:#C9A9D6;--p-accent:#FF4FB8;--p-soft:#2A1236;--p-line:#3A1A4A;--p-title:var(--f-fun);--p-hand:var(--f-hand);--p-cover:radial-gradient(80% 70% at 50% 10%,#3B0F4F,#14061C)}
.mood-neon .g-cover h3{font-weight:800;color:#FFFFFF;text-shadow:0 0 8px #FF4FB8,0 0 22px #FF4FB8}
.mood-neon .g-cover .g-hand{color:#5CF3FF;text-shadow:0 0 10px rgba(92,243,255,.7);font-size:27px}
.mood-neon .g-cover::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#FF4FB8 1.4px,transparent 2px),radial-gradient(#5CF3FF 1.2px,transparent 1.8px),radial-gradient(#FFE86B 1px,transparent 1.6px);background-size:47px 53px,61px 41px,37px 59px;background-position:0 0,22px 14px,9px 30px;opacity:.8}
@media (prefers-reduced-motion:no-preference){.mood-neon .g-cover::before{animation:twinkle 1.6s steps(2) infinite}@keyframes twinkle{50%{opacity:.35}}}
.mood-neon .g-sec h4{color:#FF4FB8}
.mood-neon .retos div,.mood-neon .wall div{background:#2A1236}
.mood-neon .retos b{color:#5CF3FF}
.mood-neon .poll .bar i{background:linear-gradient(90deg,#FF4FB8,#5CF3FF)}
.mood-gala{--p-bg:#FFFDF8;--p-ink:#2E2416;--p-muted:#8A7656;--p-accent:#9C7A2E;--p-soft:#F6EDD6;--p-line:#EEE3C8;--p-title:var(--f-serif);--p-hand:var(--f-script);--p-cover:linear-gradient(135deg,#F6E7C1,#D9B56C 55%,#F3E3B8)}
.mood-gala .g-cover h3{font-style:italic;font-size:31px}
.mood-gala .g-cover .g-hand{font-size:30px;color:#5E4614}
.mood-gala .g-cover{box-shadow:inset 0 0 0 10px rgba(255,253,248,.55),inset 0 0 0 11px #9C7A2E}
.mood-atardecer{--p-bg:#FFF9F5;--p-ink:#3A1F1C;--p-muted:#8C625A;--p-accent:#E2574C;--p-soft:#FFE6DA;--p-line:#F6DDD2;--p-title:var(--f-serif);--p-hand:var(--f-hand);--p-cover:linear-gradient(180deg,#FFB38A,#FF8A80 60%,#FFD0B0)}
.mood-atardecer .g-cover::before{content:"";position:absolute;left:50%;bottom:-46px;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:radial-gradient(circle,#FFE29A 0 55%,rgba(255,226,154,0) 70%);opacity:.9}
.mood-atardecer .g-cover > *{position:relative}
.mood-atardecer .g-cover .g-hand{color:#7A2E24;font-size:27px}
.mood-jardin{--p-bg:#FFFDF9;--p-ink:#3A2430;--p-muted:#8C6A78;--p-accent:#C2577A;--p-soft:#FBEAF0;--p-line:#F3E1E8;--p-title:var(--f-serif);--p-hand:var(--f-script);--p-cover:#FCE9EC}
.mood-jardin .g-cover::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cg fill='%23F4B6C6'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='18' cy='12' r='4'/%3E%3Ccircle cx='15' cy='7' r='4'/%3E%3Ccircle cx='15' cy='17' r='4'/%3E%3C/g%3E%3Ccircle cx='15' cy='12' r='2.4' fill='%23F7D27A'/%3E%3Cpath d='M48 50c6-8 14-6 14-6s-2 8-14 6z' fill='%239CC5A1'/%3E%3C/svg%3E")}
.mood-jardin .g-cover > *{position:relative}
.mood-jardin .g-cover .g-hand{font-size:30px}
.mood-nubes{--p-bg:#FBFDFF;--p-ink:#24364A;--p-muted:#6F8296;--p-accent:#5B8DB8;--p-soft:#E6F0FA;--p-line:#E3ECF5;--p-title:var(--f-fun);--p-hand:var(--f-hand);--p-cover:linear-gradient(180deg,#DCEBFA,#FFFFFF)}
.mood-nubes .g-cover h3{font-weight:700}
.mood-nubes .g-cover::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(28px 18px at 18% 30%,#fff 98%,transparent),radial-gradient(22px 15px at 26% 26%,#fff 98%,transparent),radial-gradient(30px 19px at 80% 22%,#fff 98%,transparent),radial-gradient(22px 14px at 72% 26%,#fff 98%,transparent),radial-gradient(24px 15px at 60% 78%,#fff 98%,transparent)}
.mood-nubes .g-cover > *{position:relative}

/* Páginas legales y contacto */
.legal{max-width:760px;padding-block:32px 88px}
.legal .lh{font-size:clamp(34px,5vw,52px);margin-top:12px}
.legal h2{font-size:24px;margin-top:36px;margin-bottom:10px}
.legal p,.legal li{color:var(--ink);line-height:1.7}
.legal p + p{margin-top:12px}
.legal ul,.legal ol{padding-left:22px;display:grid;gap:8px}
.legal blockquote{margin:14px 0;padding:14px 18px;border-left:2px solid var(--gold);background:var(--surface);font-size:15px}
.legal a{color:var(--rose)}
mark.todo{background:#FFF1B8;color:#5E4614;padding:0 4px;border-radius:4px}
.lede-s{color:var(--muted);margin-top:12px}
.cform{display:grid;gap:16px;margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.cform select{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--rose);flex:none;width:16px;height:16px}
.check a{color:var(--rose)}

/* Tres móviles en la portada */
.stage .hero-phone{margin:0 auto;width:250px}
.stage .hero-phone .phone{max-width:250px}
.hero-phone2{left:-6px;top:46px;width:200px}
.hero-phone2 .phone{max-width:200px}
.hero-phone3{position:absolute;right:-6px;top:46px;width:200px;transform:rotate(7deg);z-index:0}
.hero-phone3 .phone{max-width:200px}
.hero-phone3 .screen{max-height:420px;overflow:hidden}
@media (prefers-reduced-motion:no-preference){.hero-phone3{animation:drift3 7.5s ease-in-out -4s infinite}@keyframes drift3{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(6deg) translateY(-12px)}}}
.stage .giftcard{left:4%}
@media (max-width:420px){.stage .hero-phone{width:200px}.hero-phone2,.hero-phone3{width:160px;top:70px}.stage .giftcard{width:150px}}
/* Aviso de descarga dentro del regalo */
.g-dl{margin:6px 18px 0;padding:16px;border:1px dashed var(--p-accent);border-radius:12px;display:grid;gap:6px;text-align:center;font-size:13px;color:var(--p-muted)}
.g-dl b{font-family:var(--p-title);font-size:17px;color:var(--p-ink)}
.g-dl button{justify-self:center;margin-top:4px;border:0;border-radius:999px;padding:9px 16px;background:var(--p-accent);color:#fff;font-size:13px;cursor:pointer}

/* Selector de diseños */
.designs{margin-top:0}
.designs .lbl{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.dgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:560px){.dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dz{display:grid;gap:6px;justify-items:center;background:none;border:0;padding:0;cursor:pointer}
.dz .sw{width:100%;aspect-ratio:4/3;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);font-size:24px;transition:transform .2s,box-shadow .2s}
.dz .sw i{font-style:normal;line-height:1}
.dz:hover .sw{transform:translateY(-2px)}
.dz[aria-pressed="true"] .sw{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--rose)}
.dz small{font-size:13px;color:var(--muted);text-align:center;line-height:1.3}
.dz[aria-pressed="true"] small{color:var(--ink);font-weight:500}
.dz{min-width:0;grid-template-columns:minmax(0,1fr)}
@media (max-width:560px){.bk header{flex-wrap:wrap}.bk .tp{flex:1 1 100%;white-space:normal;order:3}}

/* Lectura: letra clara, sin cursivas en textos largos y sin etiquetas diminutas */
.g-letter,.mood-romantic .g-letter,.flip button.open,.mood-romantic .vale{font-style:normal}
.timeline .n,.mcard .msteps i{font-style:normal;font-weight:600}
.group h3,.tops-head h3,.showcase figcaption b{font-style:normal}
.hero h1{font-size:clamp(40px,5vw,64px)}
.g-cover h3,.mood-romantic .g-cover h3,.mood-noche .g-cover h3,.mood-corazones .g-cover h3,.mood-gala .g-cover h3,.intro .it,.mood-romantic .intro .it,.mood-noche .intro .it{font-style:normal}
.eyebrow{font-size:13px;letter-spacing:.1em}
.eyebrow::before{content:none}
.hero .quiet{font-size:15px;letter-spacing:0;text-transform:none}
.g-cover p{font-size:12px;letter-spacing:.08em}
.g-sec h4{font-size:12px;letter-spacing:.1em}
.ex{font-size:11px;letter-spacing:.02em}
.g-foot{font-size:11px;letter-spacing:.1em}
.g-letter{font-size:15px}
.btn{transition:background .2s,border-color .2s,color .2s,transform .12s ease-out}
.btn:active{transform:scale(.97)}

/* Portada: tres móviles en abanico, más abierto, con la tarjeta QR pequeña delante */
@media (min-width:861px){.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px}}
.stage{position:relative;display:block;min-height:560px}
.stage .phones{display:block}
.stage .phones > div{position:absolute;width:auto;margin:0}
.stage .phones .phone{width:250px;max-width:250px;zoom:.8}
.stage .phones .screen{max-height:500px;overflow:hidden}
.stage .phones .hero-phone{left:50%;top:0;margin-left:-125px;z-index:1;transform:rotate(0deg)}
.stage .phones .hero-phone .phone{zoom:1}
.stage .phones .hero-phone2{left:16px;top:52px;z-index:0;transform:rotate(-7deg)}
.stage .phones .hero-phone3{right:16px;top:52px;z-index:0;transform:rotate(7deg)}
@media (prefers-reduced-motion:no-preference){
  .stage .phones .hero-phone{animation:fan-c 7s ease-in-out infinite}
  .stage .phones .hero-phone2{animation:fan-l 8s ease-in-out -2s infinite}
  .stage .phones .hero-phone3{animation:fan-r 7.5s ease-in-out -4s infinite}
  @keyframes fan-c{50%{transform:translateY(-8px)}}
  @keyframes fan-l{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-6deg) translateY(-10px)}}
  @keyframes fan-r{0%,100%{transform:rotate(7deg)}50%{transform:rotate(6deg) translateY(-10px)}}
}
.stage .giftcard{position:absolute;left:24%;bottom:0;z-index:2;width:136px;padding:24px 12px 12px;transform:rotate(-4deg)}
.stage .giftcard .ribbon{width:60px;top:-10px}
.stage .giftcard .qrbox{padding:6px}
.stage .giftcard .script{font-size:25px;margin-top:8px;white-space:nowrap}
.stage .giftcard .caps{font-size:10px;letter-spacing:.18em;margin-top:4px}
@media (max-width:1040px) and (min-width:861px){.stage{min-height:470px}.stage .phones .phone{zoom:.64}.stage .phones .hero-phone{margin-left:-100px}.stage .phones .hero-phone .phone{zoom:.8}}
@media (max-width:860px){.stage{width:100%;max-width:560px;margin-inline:auto}}
@media (max-width:560px){
  .stage{min-height:420px}
  .stage .phones .phone{zoom:.52}
  .stage .phones .hero-phone{margin-left:-85px}
  .stage .phones .hero-phone .phone{zoom:.68}
  .stage .phones .hero-phone2{left:8px;top:40px}
  .stage .phones .hero-phone3{right:8px;top:40px}
  .stage .giftcard{width:112px;left:17%;padding:20px 10px 10px}
  .stage .giftcard .qrbox img,.stage .giftcard .qrbox canvas{width:60px !important;height:60px !important}
  .stage .giftcard .script{font-size:21px;margin-top:6px}
}

/* Tres certezas bajo «Cómo funciona» */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}
.facts div{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.facts svg{width:30px;height:30px;color:var(--rose);grid-row:span 2}
.facts b{font-weight:600}
.facts span{color:var(--muted);font-size:15px;line-height:1.4}
@media (max-width:760px){.facts{grid-template-columns:1fr}}

/* Filas editables: línea del tiempo y viajes */
.rows{display:grid;gap:8px}
.rowp{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1fr) 28px;gap:6px;align-items:center}
.rowp button{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer}
@media (max-width:560px){.rowp{grid-template-columns:76px minmax(0,1fr) 28px}.rowp input:nth-child(3){grid-column:1/3;grid-row:2}}
.addrow{justify-self:start;border:1px dashed var(--muted);background:none;border-radius:999px;padding:7px 16px;font-size:14px;cursor:pointer}
.addrow:hover{border-color:var(--rose);color:var(--rose)}
.where{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--p-muted);margin-top:2px}
.where svg{width:13px;height:13px;flex:none;color:var(--p-accent)}

/* Mapa */
.gmap{position:relative;height:210px;margin-top:16px;border-radius:12px;overflow:hidden;background:var(--p-soft)}
.gmap:not(.on){display:none}
.gmap.jvm-container{position:relative;overflow:hidden;height:210px;touch-action:pan-y}
.jvm-zoom-btn{position:absolute;left:8px;width:24px;height:24px;line-height:22px;text-align:center;border-radius:6px;background:var(--p-bg);color:var(--p-ink);border:1px solid var(--p-line);cursor:pointer;font-size:15px;user-select:none}
.jvm-zoomin{top:8px}
.jvm-zoomout{top:36px}
.jvm-tooltip{position:absolute;display:none;background:#2B2230;color:#fff;font:500 13px var(--f-body);padding:3px 8px;border-radius:5px;z-index:70;pointer-events:none}
.jvm-tooltip.active{display:block}
.trips{display:grid;gap:10px;counter-reset:t}
.trips div{counter-increment:t;display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 10px;font-size:14px}
.trips div::before{content:counter(t);grid-row:span 2;width:24px;height:24px;border-radius:50%;background:var(--p-accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600}
.trips b{font-weight:600}
.trips span{color:var(--p-muted);font-size:13px}

/* Notas de voz: grabar o subir */
.recrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.recrow .btn{padding:10px 18px;font-size:15px;cursor:pointer}
.btn-rec{background:var(--rose);color:var(--rose-ink)}
.audio button{border:0;width:26px;height:26px;border-radius:50%;background:var(--p-accent);color:#fff;display:grid;place-items:center;font-size:10px;flex:none;cursor:pointer;padding:0}

/* Vale especial */
.ticket{position:relative;display:grid;gap:6px;justify-items:center;width:100%;border:1px dashed var(--p-accent);border-radius:12px;background:var(--p-bg);color:var(--p-ink);padding:22px 26px;text-align:center;cursor:pointer}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--p-bg);border:1px dashed var(--p-accent)}
.ticket::before{left:-10px}.ticket::after{right:-10px}
.ticket svg{width:22px;height:22px;color:var(--p-accent)}
.ticket small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent)}
.ticket b{font-size:18px;font-weight:600;line-height:1.3}
.ticket em{font-style:normal;font-size:13px;color:var(--p-muted)}

/* Menos plantilla: fondos planos, secciones distintas entre sí, una sola animación */
.hero,#crear{background:none}
.hero h1 em{background:none}
.bk.premium{background:var(--surface)}
section.block .eyebrow{display:none}
section.block h2{margin-top:0 !important}
.facts{gap:32px;border-top:1px solid var(--line);padding-top:28px}
.facts div{background:none;border:0;border-radius:0;padding:0}
.groups .group{border-radius:0;background:none;padding:20px 0 0;border-top:3px solid var(--rose)}
.groups .g-bodas{border-color:#9C7A4D}
.groups .g-vida{border-color:#C8432F}
.groups .g-fechas{border-color:#4F6B4A}
.g-icon{background:none}
#precios{background:var(--ink);color:#F7F0F2;border-top:0}
#precios .lede{color:#D8CCD3}
#precios .plans{color:var(--ink);box-shadow:none}
#precios .plan-card .pill{letter-spacing:.04em;text-transform:none;font-size:13px}
#faq .wrap{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:48px;align-items:start}
#faq .faq{margin-top:0;max-width:none}
@media (max-width:760px){#faq .wrap{grid-template-columns:minmax(0,1fr);gap:24px}.facts{gap:20px}}
.groups .group h3,.groups .group .tone{padding-right:84px}
@media (max-width:760px){.groups .group{padding:14px 0 0}.groups .group h3{padding-right:0}}

/* El regalo que se abre al bajar */
.abre{position:relative;height:190vh;background:var(--sand);--p:0}
.abre-pin{position:sticky;top:64px;height:calc(100vh - 64px);min-height:560px;overflow:hidden;display:grid;align-items:center}
.abre-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:center;width:100%}
.abre h2{font-size:clamp(34px,4.4vw,52px)}
.abre p{margin-top:14px;color:var(--muted);max-width:30em}
.abre-box{position:relative;width:340px;height:520px;clip-path:inset(-80px -80px 0 -80px);justify-self:center}
.abre-phone{position:absolute;left:50%;top:0;width:210px;margin-left:-105px;transform:translateY(calc((1 - var(--p)) * 240px))}
.abre-phone .phone{width:210px;max-width:210px}
.abre-phone .screen{max-height:400px;overflow:hidden}
.abre-svg{position:absolute;left:0;bottom:0;width:340px;height:auto;display:block;color:var(--rose);overflow:visible}
.abre-svg .fillb{fill:var(--surface);stroke:currentColor;stroke-width:.7}
.abre-svg .fillb2{fill:none;stroke:currentColor;stroke-width:.7}
.abre-svg .qrp{fill:var(--ink)}
.abre-svg .hole{fill:var(--surface)}
.abre-lid{transform-box:fill-box;transform-origin:0% 100%;transform:translateY(calc(var(--p) * -14px)) rotate(calc(var(--p) * -38deg))}
@media (max-width:760px){
  .abre-grid{grid-template-columns:minmax(0,1fr);gap:20px;justify-items:center;text-align:center}
  .abre p{margin-inline:auto}
  .abre-box{zoom:.82}
}
@media (prefers-reduced-motion:reduce){.abre{height:auto;--p:1}.abre-pin{position:static;height:auto;padding-block:64px}}

/* Revisión Taste Skill: un protagonista claro, texto en tinta plena, sin sombras ni líneas decorativas */
.hero h1 em{font-style:italic}
.hero h1{margin-top:18px;font-size:clamp(40px,5.2vw,72px);line-height:1.06;letter-spacing:-.02em}
.hero-txt p.lead{margin-top:0}
@media (min-width:861px){.hero-txt{align-self:start;padding-top:48px}}
@media (min-width:861px){
  .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"top top" "txt fan";gap:32px 40px;padding-block:36px 72px;align-items:center}
  .hero-top{grid-area:top}.hero-txt{grid-area:txt}.hero .stage{grid-area:fan}
}
.hero p.lead,section.block .lede,.abre p{color:var(--ink)}
section.block{border-top:0}
header.top{border-bottom:0}
.promo{box-shadow:none;border-color:transparent;background:var(--rose-soft)}
.wiz-nav .btn{box-shadow:none}
.facts{border-top:0;padding-top:0}
.choice:hover{box-shadow:none}
/* Cada sección entra por partes, una sola vez. Sin script, todo se ve igual */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--o,0) * 70ms)}
  @keyframes rise{from{transform:translateY(20px)}to{transform:none}}
}
.plan-card,.occ,.addlist button{transition:background .15s ease-out,transform .15s ease-out}
@media (hover:hover){.plan-card:hover{transform:translateY(-3px)}}

/* Fotos de ejemplo: se marcan mientras el cliente crea su regalo */
.ph.sam{position:relative}
.ph.sam::after{content:"Ejemplo";position:absolute;right:3px;bottom:3px;background:rgba(43,34,48,.72);color:#fff;font-size:9px;line-height:1;padding:2px 4px;border-radius:3px;pointer-events:none}
.heart .ph.sam::after,.yr .ph.sam::after,.gal .ph.sam::after{content:none}
.vid .play{font-size:14px;color:var(--p-muted);text-shadow:none}

/* Logo oficial: va en trazados, independiente de la letra de la web */
.brand svg{width:auto;height:42px;color:inherit}
.ld-word svg{display:block;height:44px;width:auto}
@media (max-width:520px){.brand svg{height:34px}}

/* Iconos propios en lugar de emojis */
.oi{width:46px;height:46px;display:inline-block;vertical-align:middle}

/* Onda de audio real */
.audio div{border-radius:16px;padding:10px 12px}
.vb{flex:1;min-width:0;display:grid;gap:4px}
.vb small{font-size:12px;color:var(--p-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wv{display:flex;align-items:center;gap:2px;height:26px}
.wv i{flex:1;min-width:1px;border-radius:2px;background:var(--p-line);transition:background .1s}
.wv i.on{background:var(--p-accent)}
.vt{font-size:12px;color:var(--p-muted);font-variant-numeric:tabular-nums}

/* Cuestionario */
.rowp.qz{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) 28px}
@media (max-width:560px){.rowp.qz{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}.rowp.qz input:nth-child(1){grid-column:1/3;grid-row:1}.rowp.qz input:nth-child(2){grid-column:1;grid-row:2}.rowp.qz input:nth-child(3){grid-column:2;grid-row:2}.rowp.qz button{grid-column:3;grid-row:1}}
.qdots{display:flex;justify-content:center;gap:6px;margin-bottom:12px}
.qdots i{width:18px;height:4px;border-radius:2px;background:var(--p-line)}
.qdots i.on{background:var(--p-accent)}
.qq{font-size:18px;font-weight:600;line-height:1.3;text-align:center;margin-bottom:14px;color:var(--p-ink)}
.qopts{display:grid;gap:8px}
.qopts button{border:1px solid var(--p-line);border-radius:12px;padding:13px;background:var(--p-bg);color:var(--p-ink);font-size:15px;cursor:pointer}
.qopts button:active{transform:scale(.98)}
.qmiss{text-align:center;font-size:13px;color:var(--p-accent);margin-top:10px}

/* Email: mismo vale punteado que en los regalos */
.mcard .mhead{background:#F6E8EA}
.mcard .mqr .qr{border:1px dashed #B4475F;border-radius:8px}

/* Marca negro, blanco y dorado. El logo no cambia de forma: solo de color. Los diseños de los regalos (mood-*) conservan sus colores. */
:root{--negro:#12203A;--oro:#C9A24B;--oro-claro:#E6CD8E;--blanco-sobre-negro:#F4F1EA}
body::before{background:var(--negro)}
header.top{background:color-mix(in srgb,var(--negro) 95%,transparent);border-bottom:1px solid rgba(201,162,75,.35)}
header.top nav.links a:not(.btn){color:var(--blanco-sobre-negro)}
header.top nav.links a:not(.btn):hover{color:var(--oro)}
.brand svg [fill="#2B2230"]{fill:#FFFFFF}
.brand svg [fill="#A83D55"]{fill:var(--oro)}
.brand svg [stroke="#A83D55"]{stroke:var(--oro)}
.demo-bar{background:var(--negro);color:var(--oro-claro);letter-spacing:.04em}
.btn-main{background:var(--negro);color:#FFFFFF;border-color:var(--negro)}
.btn-main:hover{background:var(--oro);border-color:var(--oro);color:var(--negro)}
header.top .btn-main,.hero .btn-main,#precios .btn-main{background:var(--oro);border-color:var(--oro);color:var(--negro)}
header.top .btn-main:hover,.hero .btn-main:hover,#precios .btn-main:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--negro)}
nav.links .btn,nav.links .btn:hover{color:var(--negro)}
.hero{background:var(--negro);color:#FFFFFF}
.hero h1{color:#FFFFFF}
.hero h1 em{color:var(--oro);background:none}
.hero p.lead{color:var(--blanco-sobre-negro)}
.hero .quiet{color:var(--oro-claro)}
.hero .link{color:#FFFFFF;border-color:var(--oro)}
.hero .btn-ghost{color:#FFFFFF;border-color:var(--oro)}
.hero .promo{background:transparent;border:1px solid rgba(201,162,75,.55)}
.hero .promo b{background:var(--oro);color:var(--negro)}
.hero .promo em{color:#FFFFFF}
.hero .promo span{color:var(--oro)}
.hero .phone{box-shadow:0 0 0 1px rgba(201,162,75,.7),0 30px 70px -30px rgba(201,162,75,.35)}
.giftcard{background:#FFFFFF;color:var(--negro);border-color:var(--oro)}
.giftcard .ribbon,.giftcard .script{color:var(--rose)}
.giftcard .qrbox{border-color:var(--line)}
.giftcard .caps{color:var(--muted)}
#crear{background:var(--bg)}
.band .timeline li::before{border-color:rgba(128,99,31,.35)}
.band .timeline .n{color:var(--rose)}
.g-amor,.g-bodas,.g-vida,.g-fechas{background:#FFFFFF}
.g-vida h3,.g-fechas h3{font-family:var(--f-serif);font-style:italic;font-weight:500;color:var(--rose)}
.g-icon,.g-bodas .g-icon,.g-vida .g-icon,.g-fechas .g-icon{color:var(--rose)}
.groups .group,.groups .g-bodas,.groups .g-vida,.groups .g-fechas{border-color:var(--oro)}
.groups .occ{border-color:var(--line)}
.choice .ic,.choice.c-bodas .ic,.choice.c-vida .ic,.choice.c-fechas .ic{background:var(--rose-soft);color:var(--rose)}
.plan-card:nth-child(2){background:var(--rose-soft)}
footer{background:var(--negro);color:#CFCABE;border-top:1px solid rgba(201,162,75,.35)}
footer a:hover{color:var(--oro)}
#precios{background:var(--negro);color:var(--blanco-sobre-negro)}
#precios .eyebrow,#precios h2 em{color:var(--oro)}
#precios .lede{color:#D6D1C5}
#loader{background:var(--negro)}
.ld-box{color:var(--oro)}
.ld-box .px{fill:#FFFFFF}
.ld-box .px .hole{fill:var(--negro)}
.ld-heart{fill:var(--oro)}
.ld-word svg [fill="#2B2230"]{fill:#FFFFFF}
.ld-word svg [fill="#A83D55"]{fill:var(--oro)}
.ld-word svg [stroke="#A83D55"]{stroke:var(--oro)}
.abre{background:var(--negro);color:#FFFFFF}
.abre h2{color:#FFFFFF}
.abre p{color:var(--blanco-sobre-negro)}
.abre .eyebrow{color:var(--oro)}
.abre-svg{color:var(--oro)}
.abre-svg .fillb{fill:var(--negro)}
.abre-svg .qrp{fill:var(--oro)}
.abre-svg .hole{fill:var(--negro)}
.abre .phone{box-shadow:0 0 0 1px rgba(201,162,75,.7)}
.bk.premium{background:var(--rose-soft)}
.swipe-pill{background:rgba(18,32,58,.88)}
.wiz-nav{background:linear-gradient(180deg,rgba(255,255,255,0),#FFFFFF 30%)}
.jvm-tooltip{background:var(--negro)}
.mcard{color:var(--negro)}
.mcard .mhead{background:var(--negro)}
.mcard .mhead h3,.mcard .mhead p{color:#FFFFFF !important}
.mcard .mqr a{background:var(--negro)}
.mcard .mqr .qr{border-color:var(--oro)}
.mcard .msteps i{border-color:var(--oro);color:var(--rose)}

/* Cabecera centrada y botones rectos, sobre la estructura original */
.btn{border-radius:0;text-transform:uppercase;letter-spacing:.14em;font-size:13px}
.choice,.plans,.promo,.promo b{border-radius:0}
header.top{background:var(--negro);backdrop-filter:none;border-bottom:1px solid rgba(201,162,75,.3)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;padding-block:12px}
.menu-btn,.top-r{font:500 12px var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#FFFFFF;text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer}
.menu-btn{display:inline-flex;align-items:center;gap:12px;justify-self:start}
.menu-btn i{display:block;width:22px;height:7px;border-block:1px solid var(--oro)}
.top-r{justify-self:end}
.menu-btn:hover,.top-r:hover{color:var(--oro)}
#menu{position:fixed;inset:0;z-index:50;background:var(--negro);color:#FFFFFF;display:grid;align-content:center;padding:calc(72px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 40px max(24px,env(safe-area-inset-left,0px));overflow:auto}
#menu[hidden]{display:none}
#menu nav{display:grid;width:min(760px,100%);margin:0 auto}
#menu nav a{font-family:var(--f-serif);font-size:clamp(32px,6vw,60px);line-height:1.1;color:#FFFFFF;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(201,162,75,.3)}
#menu nav a:first-child{color:var(--oro);font-style:italic}
#menu nav a:hover{color:var(--oro)}
.menu-x{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));left:max(24px,env(safe-area-inset-left,0px));font:500 12px var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#FFFFFF;background:none;border:0;padding:8px 0;cursor:pointer}
.barra{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;justify-content:center;gap:14px;background:var(--oro);color:var(--negro);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .3s ease}
.barra.on{transform:none}
.barra:hover{background:#FFFFFF}
footer{padding-bottom:48px}
@media (prefers-reduced-motion:reduce){.barra{transition:none}}
@media (max-width:860px){
  .top-r{font-size:11px;letter-spacing:.14em}
  .menu-btn{font-size:11px;letter-spacing:.14em;gap:8px}
  .menu-btn i{width:18px}
  .brand svg{height:28px}
}

/* ---------- Mejoras tras revisar a la competencia ---------- */
.hero .garantias{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:15px;color:var(--blanco-sobre-negro)}
.hero .garantias li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.hero .garantias li::before{content:"✓";color:var(--oro)}
button.link{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.hero button.link{color:var(--oro-claro);text-decoration:underline;text-underline-offset:4px}
.top-d{justify-self:end;display:flex;align-items:center;gap:16px}
.lang{font:700 12px var(--f-body);letter-spacing:.14em;color:var(--oro-claro);background:none;border:1px solid rgba(201,162,75,.55);padding:5px 8px;cursor:pointer}
.lang:hover{background:var(--oro);color:var(--negro)}
.pasos3{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.pasos3 li{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:24px;align-items:center}
.pasos3 img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pasos3 .n{font-family:var(--f-serif);font-style:italic;font-size:21px;color:var(--rose)}
.pasos3 h3{font-size:25px;margin:4px 0 6px}
.pasos3 p{color:var(--muted);font-weight:400}
@media (max-width:520px){.pasos3 li{grid-template-columns:108px minmax(0,1fr);gap:16px}.pasos3 h3{font-size:21px}.pasos3 p{font-size:15px}}
/* Regalo de ejemplo que se abre */
#demo{position:fixed;inset:0;z-index:60;background:var(--negro);color:var(--blanco-sobre-negro);overflow:auto;display:grid;place-items:center;padding:60px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
#demo[hidden]{display:none}
#demo .demo-x{position:fixed;top:max(14px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));z-index:2;background:none;border:1px solid var(--oro);color:var(--oro-claro);font:700 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;cursor:pointer}
.d-sobre-w{display:grid;gap:18px;justify-items:center;text-align:center}
.d-sobre-w h2{color:#FFF;font-size:clamp(25px,6vw,34px)}
.d-sobre{position:relative;width:min(86vw,360px);aspect-ratio:27/17;perspective:800px;background:none;border:0;padding:0;cursor:pointer;display:block;margin-top:96px}
.d-tarj{position:absolute;left:7%;right:7%;top:8%;bottom:8%;background:#F6F1E4;color:var(--negro);display:grid;place-content:center;text-align:center;font-family:var(--f-serif);font-style:italic;font-size:24px;z-index:1;transition:transform .7s cubic-bezier(.2,.8,.2,1) .25s}
.d-cuerpo{position:absolute;inset:0;background:#1B2C4D;border:1px solid var(--oro);z-index:2;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)}
.d-solapa{position:absolute;left:0;right:0;top:0;height:60%;background:#22365D;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .55s ease .12s;z-index:3}
.d-lacre{position:absolute;left:50%;top:60%;width:64px;height:64px;margin:-32px 0 0 -32px;z-index:4}
.d-lacre i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E6CD8E,#C9A24B 60%,#8E6F2B);box-shadow:0 3px 8px rgba(0,0,0,.4);transition:transform .45s ease,opacity .45s ease}
.d-lacre i:first-child{clip-path:polygon(0 0,58% 0,44% 34%,56% 60%,42% 100%,0 100%)}
.d-lacre i:last-child{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%,56% 60%,44% 34%)}
.d-sobre.abierto .d-lacre i:first-child{transform:translate(-22px,10px) rotate(-16deg);opacity:0}
.d-sobre.abierto .d-lacre i:last-child{transform:translate(22px,10px) rotate(16deg);opacity:0}
.d-sobre.abierto .d-solapa{transform:rotateX(180deg);z-index:0}
.d-sobre.abierto .d-tarj{transform:translateY(-42%)}
.d-pie{color:var(--oro-claro);font-size:15px}
.d-regalo{width:min(100%,330px);animation:dsube .5s ease both}
.d-regalo .screen{max-height:min(74vh,640px);overflow-y:auto}
@keyframes dsube{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* Respuesta y visita a la web */
.g-rta,.g-cta{margin:14px;padding:16px;display:grid;gap:8px;text-align:left;font-family:var(--f-body)}
.g-rta{background:#F6F1E4;color:#12203A}
.g-rta b,.g-cta b{font-family:var(--f-serif);font-weight:500;font-size:19px;line-height:1.2}
.g-rta span,.g-cta span{font-size:13.5px;line-height:1.4}
.g-rta textarea{width:100%;min-height:70px;border:1px solid #D8CEB6;background:#FFF;padding:9px;font:400 14px var(--f-body);color:#12203A;resize:vertical}
.g-rta button,.g-cta a{justify-self:start;border:0;background:#12203A;color:#FFF;font:700 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:10px 13px;cursor:pointer;text-decoration:none}
.g-cta{background:#12203A;color:#F4F1EA}
.g-cta a{background:#C9A24B;color:#12203A}
.g-cta small{font-size:12px;color:#E6CD8E}
/* Entrega y pregunta secreta */
.bk .choices{margin-top:0;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.bk .choice{padding:15px}
.bk .choice b{font-size:18px}
.dosc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field select{background:var(--bg);border:1px solid var(--line);padding:12px 14px;width:100%;font:400 15px var(--f-body);color:var(--ink);border-radius:0}
.tick{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:15px;cursor:pointer}
.tick input{margin-top:4px;accent-color:var(--rose)}
.tick b{font-family:var(--f-serif);font-weight:500;font-size:19px;display:block}
.tick small{display:block;color:var(--muted);font-size:14px;font-weight:400}
.ent-res{background:var(--rose-soft);padding:11px 13px;font-size:14.5px}
.lockscr{background:#12203A!important;color:#F4F1EA;min-height:470px;display:grid;align-content:center;gap:12px;padding:26px 22px;text-align:center;font-family:var(--f-body)}
.lockscr small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#E6CD8E}
.lockscr h3{font-family:var(--f-serif);font-weight:500;font-size:24px;line-height:1.18;color:#FFF}
.lockscr p{font-size:14.5px}
.lockscr input{width:100%;background:none;border:0;border-bottom:1px solid #C9A24B;color:#FFF;padding:9px 2px;font:400 16px var(--f-body);text-align:center}
.lockscr input::placeholder{color:#B9B4A6}
.lockscr button{justify-self:center;border:0;background:#C9A24B;color:#12203A;font:700 12px var(--f-body);letter-spacing:.13em;text-transform:uppercase;padding:12px 16px;cursor:pointer}
.lockscr .mal{color:#E6CD8E;min-height:20px}
/* Calendario de Adviento: oferta */
.choice.oferta,.adv-oferta{background:#12203A;color:#F4F1EA;border-color:#C9A24B}
.choice.oferta b{color:#FFF}.choice.oferta small{color:#F4F1EA}
.choice.oferta .sug{color:#E6CD8E}.choice.oferta .ic{background:#C9A24B;color:#12203A}
.choice .edicion,.adv-oferta .edicion{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#E6CD8E;display:block}
.adv-oferta{margin-top:18px;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:20px;text-align:left;border:1px solid #C9A24B;cursor:pointer;font-family:var(--f-body)}
.adv-oferta b{font-family:var(--f-serif);font-weight:500;font-size:22px;color:#FFF;display:block}
.adv-oferta small{font-size:14px;display:block}
.adv-oferta em{font-style:normal;font-family:var(--f-serif);font-size:25px;color:#E6CD8E}
.plans{grid-template-columns:repeat(4,minmax(0,1fr))}
.plan-card.adv{background:#12203A!important;color:#F4F1EA;outline:1px solid #C9A24B;outline-offset:-1px}
.plan-card.adv .pill{color:#E6CD8E}.plan-card.adv .for{color:#F4F1EA}.plan-card.adv li::before{color:#E6CD8E}
.plan-card.adv .btn{margin-top:10px;text-align:center;background:#C9A24B;border-color:#C9A24B;color:#12203A}
.plan-card.adv button.link{color:#E6CD8E;text-decoration:underline;text-underline-offset:4px;text-align:left;font-size:15px}
@media (max-width:1040px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-card{border-left:1px solid var(--line)}.plan-card:nth-child(odd){border-left:0}.plan-card:nth-child(3){grid-column:auto}.plan-card:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.plan-card.adv .btn{padding-inline:8px;letter-spacing:.08em;font-size:11px}}
/* Calendario de Adviento: el regalo */
.adv-screen{background:#0E1A30!important;color:#F4F1EA;font-family:var(--f-body)}
.adv-cover{padding:24px 16px 8px;text-align:center}
.adv-cover small{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#E6CD8E}
.adv-cover h3{font-family:var(--f-serif);font-weight:500;font-size:25px;line-height:1.15;color:#FFF;margin-top:6px}
.adv-cover p{font-size:13px;margin-top:3px}
.adv-root{padding:10px 11px 12px}
.adv-busca{font-family:var(--f-serif);font-size:20px;text-align:center;color:#E6CD8E}
.adv-msg{min-height:20px;font-size:13px;text-align:center;margin:2px 0 6px}
.adv-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:50px;gap:6px}
.t{border:1px solid rgba(201,162,75,.6);padding:0;cursor:pointer;display:grid;place-items:center;font-family:var(--f-serif);font-size:19px;transform:rotate(var(--r));position:relative;box-shadow:0 2px 4px rgba(0,0,0,.35);transition:transform .15s}
.t:hover{transform:rotate(0) scale(1.04);z-index:1}
.t.t-g{font-size:34px}
.t.c0{background:#1B2C4D;color:#E6CD8E}.t.c1{background:#21493D;color:#F4F1EA}.t.c2{background:#6E2233;color:#F4F1EA}.t.c3{background:#C9A24B;color:#12203A}.t.c4{background:#F4F1EA;color:#12203A}
.t.ab{background:#0A1322;color:#C9A24B;border-style:dashed;box-shadow:none}
.t.ab span{font-size:13px}
.t.no{animation:sacude .4s}
@keyframes sacude{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.adv-panel{display:grid;gap:10px;justify-items:center;text-align:center;padding:6px 0 10px}
.adv-panel h4{font-family:var(--f-serif);font-weight:500;font-size:21px;color:#FFF;margin:0}
.adv-panel p{font-size:13.5px}
.adv-panel>button,.adv-rev>button{border:0;background:#C9A24B;color:#12203A;font:700 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:10px 13px;cursor:pointer}
.rasca{position:relative;width:206px;height:136px;background:#F6F1E4;color:#12203A;display:grid;place-items:center;font-family:var(--f-serif);font-size:42px;touch-action:none;user-select:none}
.rasca .rc{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr)}
.rasca .rc i{background:#C9A24B;border:0;transition:opacity .2s}.rasca .rc i:nth-child(odd){background:#B99240}
.rasca .rc i.x{opacity:0}
.copos{position:relative;width:100%;height:220px;background:#12203A;border:1px solid rgba(201,162,75,.5);overflow:hidden}
.copos button{position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid #E6CD8E;background:rgba(230,205,142,.15);color:#FFF;font-size:22px;cursor:pointer;animation:copo .25s ease both}
@keyframes copo{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.camps{display:grid;grid-template-columns:repeat(2,74px);gap:10px}
.camps button{height:66px;border:1px solid #C9A24B;background:#1B2C4D;color:#E6CD8E;font-size:25px;cursor:pointer;transition:background .12s,transform .12s}
.camps button.on{background:#C9A24B;color:#12203A;transform:scale(1.06)}
.adv-rev{position:relative;display:grid;gap:10px;justify-items:center;text-align:center;perspective:700px;padding-bottom:6px}
.adv-int{width:100%;background:#F6F1E4;color:#12203A;padding:16px 13px;display:grid;gap:9px}
.adv-int small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#80631F}
.adv-int img{width:100%;aspect-ratio:4/3;object-fit:cover}
.adv-int p{font-family:var(--f-serif);font-size:19px;line-height:1.25}
.adv-vale{border:1px dashed #80631F;padding:10px;display:grid;gap:6px;justify-items:center;font-family:var(--f-body)}
.adv-vale b{font-size:15px}
.adv-vale button{border:0;background:#12203A;color:#FFF;font:700 10.5px var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;cursor:pointer}
.adv-puerta{display:none}
.adv-rev.fresca .adv-puerta{display:grid;place-items:center;position:absolute;left:0;right:0;top:0;height:240px;background:#6E2233;border:1px solid #C9A24B;font-family:var(--f-serif);font-size:58px;color:#F4F1EA;transform-origin:left;z-index:2;animation:puerta 1s ease .15s both}
@keyframes puerta{0%{transform:rotateY(0)}80%{transform:rotateY(-118deg);opacity:1}100%{transform:rotateY(-118deg);opacity:0;visibility:hidden}}
.adv-rev .chis{position:absolute;left:50%;top:90px;width:7px;height:7px;background:#E6CD8E;border-radius:50%;opacity:0;pointer-events:none}
.adv-rev.fresca .chis{animation:chis .9s ease-out .5s both}
.adv-rev .chis:nth-of-type(1){--x:-90px;--y:-50px}.adv-rev .chis:nth-of-type(2){--x:80px;--y:-70px}.adv-rev .chis:nth-of-type(3){--x:-50px;--y:80px}.adv-rev .chis:nth-of-type(4){--x:96px;--y:40px}.adv-rev .chis:nth-of-type(5){--x:6px;--y:-96px}
@keyframes chis{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.3)}}
.adv-hint{font-size:13.5px;color:var(--muted);text-align:center;margin-top:10px;max-width:320px}
#demo .adv-hint{color:#E6CD8E;margin-inline:auto}
.diasg{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:5px}
.diasg button{height:38px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font:600 14px var(--f-body);color:var(--ink)}
.diasg button.tiene{border-color:var(--rose);color:var(--rose)}
.diasg button[aria-pressed=true]{background:var(--negro);color:#FFF;border-color:var(--negro)}
.chipsv{display:flex;flex-wrap:wrap;gap:6px}
.chipsv button{border:1px solid var(--rose);background:none;color:var(--rose);padding:6px 9px;font:600 13px var(--f-body);cursor:pointer}
.adv-foto{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center}
.adv-foto img{width:72px;height:72px;object-fit:cover}
/* Opiniones */
#opiniones .ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:32px}
#opiniones figure{margin:0;border-top:1px solid var(--rose);padding-top:14px;display:grid;gap:8px}
#opiniones blockquote{margin:0;font-family:var(--f-serif);font-size:20px;line-height:1.3}
#opiniones figcaption{font-size:14px;color:var(--muted)}
@media (max-width:520px){.dosc{grid-template-columns:minmax(0,1fr)}.top-d{gap:9px}}
@media (prefers-reduced-motion:reduce){.d-tarj,.d-solapa,.d-lacre i,.t{transition:none}.d-regalo,.copos button,.t.no{animation:none}.adv-rev.fresca .adv-puerta,.adv-rev .chis{display:none;animation:none}}

/* ---------- Página del regalo (quien lo recibe) ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.viewer{min-height:100vh;min-height:100dvh;background:var(--bg)}
body.viewing #live .pw{display:block}
body.viewing #live .phone{max-width:560px;margin:0 auto;border-radius:0;padding:0;background:none;box-shadow:none}
body.viewing #live .screen{border-radius:0;max-height:none;min-height:100vh;min-height:100dvh;overflow:visible}
body.viewing #live .intro{position:fixed;inset:0;max-width:560px;margin:0 auto}
body.viewing #live .swipe-pill{position:fixed}
body.viewing .replay{margin-bottom:24px}
.lock{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:var(--rose-soft)}
.lock-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:36px 24px;text-align:center;display:grid;gap:14px;justify-items:center}
.lock-ic{width:72px;height:72px;color:var(--rose)}
.lock h1{font-size:32px}
.lock-form{display:grid;gap:10px;width:100%;margin-top:6px}
.lock-form input{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:24px;letter-spacing:.12em;text-align:center;text-transform:uppercase;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.lock-form input:focus{outline:none;border-color:var(--rose)}
.linkbtn{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:15px}
.linkbtn:hover{color:var(--rose)}
.linkbtn[disabled]{opacity:.5;cursor:default}
.lock-foot{font-size:13px;color:var(--muted)}

/* ---------- Tarjeta de quien compra ---------- */
.owner{padding-bottom:88px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:20px;margin-top:28px}
@media (max-width:640px){.cards{grid-template-columns:minmax(0,1fr)}}
.pcard{margin:0;background:#fff;color:#2B2230;border:1px solid var(--line);border-radius:6px;padding:28px 20px;text-align:center;display:grid;justify-items:center;gap:8px;aspect-ratio:5/7;align-content:center}
.pcard .qrbox{padding:8px;border:1px solid #EFE6E6}
.pcard .qrbox img,.pcard .qrbox canvas{display:block}
.pcard .script{font-family:var(--f-script);font-size:34px;color:#B4475F;line-height:1}
.pcard .caps{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#7D7280}
.pcard .code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;letter-spacing:.1em}
.pcard .small{font-size:13px;color:#7D7280;max-width:22ch}
@media print{
  header.top,.owner .eyebrow,.owner .lh,.owner .muted,.owner .cta,.owner .note{display:none !important}
  body{background:#fff}
  .cards{grid-template-columns:repeat(2,8.5cm);gap:1cm}
  .pcard{break-inside:avoid;border:1px dashed #999}
}

/* El atributo hidden siempre oculta, aunque la clase tenga display */
[hidden]:not([hidden=until-found i]){display:none !important}

/* El regalo de verdad: se oculta la web y se muestra solo el regalo */
body.viewing header.top,body.viewing footer,body.viewing .demo-bar,body.viewing #barra,body.viewing #menu,body.viewing #crear .back,body.viewing #journey{display:none !important}
body.viewing #crear .wrap{max-width:none;padding:0}
body.viewing #crear{background:none}
.lock-q{display:grid;gap:8px;width:100%;text-align:left}
.lock-q p{font-family:var(--f-serif);font-size:19px;text-align:center}
.lock-q input{font-size:18px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);text-align:center}