/* Ama Love · regalo: capítulos 9 a 18 (palabra, lugares, árbol, ruleta, vales, logros, carta, lo que viene, la pregunta y el final). */

/* ---------- 9 palabra secreta ---------- */
.ch-palabra{padding-bottom:16px}
.wgrid{display:grid;gap:6px;margin:12px auto 0;justify-content:center}
.wrow{display:grid;gap:6px}
.tile{position:relative;border-radius:8px;border:2px solid color-mix(in srgb,var(--ink) 28%,transparent);display:grid;place-items:center;font-family:var(--disp);text-transform:uppercase;line-height:1;transition:background .3s,border-color .3s,transform .2s}
.tile.full{border-color:var(--ink);transform:scale(1.05)}
.tile.g{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tile.y{background:var(--pop);border-color:var(--pop);color:var(--pop-i)}
.tile.n{background:color-mix(in srgb,var(--ink) 12%,transparent);border-color:transparent;opacity:.6}
.tile.g::after{content:"";position:absolute;left:30%;right:30%;bottom:9%;height:2px;border-radius:2px;background:currentColor}
.tile.y::after{content:"";position:absolute;top:10%;right:10%;width:5px;height:5px;border-radius:50%;background:currentColor}
.tile.flip{animation:flip .5s ease}
.wmsg{min-height:24px;margin-top:6px;text-align:center}
.wmsg .sub{margin-top:0}
.w-legend{display:flex;gap:8px;justify-content:center;align-items:center;font-size:12.5px;font-weight:700}
.w-legend i{display:inline-block;width:14px;height:14px;border-radius:4px}
.w-legend i.g{background:var(--ink)}.w-legend i.y{background:var(--pop);margin-left:6px}
.kb{margin-top:auto;display:grid;gap:6px;padding-top:8px}
.kb .r{display:flex;gap:4px;justify-content:center}
.kb button{flex:1;max-width:36px;height:46px;border-radius:8px;background:color-mix(in srgb,var(--ink) 13%,transparent);font-weight:700;font-size:15px}
.kb button.wide{max-width:64px;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.kb button.g{background:var(--ink);color:var(--bg)}.kb button.y{background:var(--pop);color:var(--pop-i)}.kb button.n{opacity:.35}
.premio{margin-top:8px;padding:14px 16px;border-radius:18px;background:var(--bg);color:var(--ink);text-align:center}
.premio small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.premio b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;margin-top:4px}
@container (max-height:600px){.kb button{height:38px}.kb{gap:5px}.ch-palabra .t2{font-size:26px}}
@container (max-height:520px){.kb button{height:34px;font-size:14px}.ch-palabra .kick{display:none}}

/* ---------- 10 lugares ---------- */
.ch-lugares{padding-bottom:18px}
.lu-st{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:13px;font-weight:700}
.lu-st b{font-family:var(--disp);font-weight:400;font-size:22px;margin-right:3px}
.mapbox{position:relative;flex:1;min-height:150px;margin-top:12px;border-radius:22px;overflow:hidden}
.map{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-bg{fill:color-mix(in srgb,var(--bg) 90%,var(--ink))}
.m-city{fill:color-mix(in srgb,var(--bg) 80%,var(--ink))}
.m-av{stroke:color-mix(in srgb,var(--ink) 10%,transparent);stroke-width:1.5}
.m-ring{fill:none;stroke:color-mix(in srgb,var(--ink) 13%,transparent);stroke-width:1.5}
.m-ring.b{stroke-width:2.6;stroke:color-mix(in srgb,var(--ink) 22%,transparent)}
.m-river{fill:none;stroke:color-mix(in srgb,var(--pop) 40%,transparent);stroke-width:10;stroke-linecap:round}
.m-lbl{fill:color-mix(in srgb,var(--ink) 55%,transparent);font-size:8px;font-family:var(--sans);font-weight:600}
.m-route{fill:none;stroke:var(--pop);stroke-width:calc(3px * var(--k,1));stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.m-mk{fill:var(--ink);stroke:var(--pop);stroke-width:3}
.pin{cursor:pointer;outline:none}
.pin .pc{fill:var(--pop);stroke:var(--bg);stroke-width:2.5;transition:fill .3s}
.pin .pn{fill:var(--pop-i);font-family:var(--disp);font-size:11px}
.pin.on .pc{fill:var(--ink)}.pin.on .pn{fill:var(--bg)}
.pin .halo{fill:color-mix(in srgb,var(--pop) 35%,transparent);animation:halo 2s ease-out infinite;transform-box:fill-box;transform-origin:center}
.pin:focus-visible .pc{stroke:var(--ink);stroke-width:4}
.lcard{flex:none;display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px;border-radius:20px;background:var(--bg);color:var(--ink)}
.lcard img{width:78px;height:78px;border-radius:14px;object-fit:cover;flex:none}
.lc-t{flex:1;min-width:0}
.lc-t small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.lc-t b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.1;margin-top:2px}
.lc-t span{display:block;font-size:13.5px;opacity:.88;margin-top:2px}
.lnav{display:flex;flex-direction:column;gap:6px}
.lnav button{width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent);display:grid;place-items:center}
.lnav .i{width:15px;height:15px}
@container (max-height:520px){.lcard img{width:60px;height:60px}.ch-lugares .t2{font-size:25px}}

/* ---------- 11 árbol de regalos ---------- */
.snowbox{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.snow{position:absolute;top:-10px;border-radius:50%;background:var(--ink);opacity:.45;animation:snow linear infinite}
@keyframes snow{to{transform:translate(var(--x),110cqh)}}
.xmas{position:relative;flex:none;width:min(340px,86cqw,54cqh);aspect-ratio:260/300;margin:12px auto 0}
.xmas>svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.t-a{fill:#2E7D52}.t-b{fill:#35905E}.t-c{fill:#3FA36B}.t-s{fill:#000;opacity:.14}.t-trunk{fill:#6B4226}.t-floor{fill:color-mix(in srgb,var(--ink) 14%,transparent)}
.gar{fill:none;stroke:var(--pop);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:0 9;animation:garl 1.6s linear infinite}
@keyframes garl{to{stroke-dashoffset:-18}}
.orn{animation:tw2 2.4s ease-in-out infinite}.o1{fill:var(--pop)}.o2{fill:var(--ink)}.o3{fill:var(--alt)}
.xmas .star{fill:var(--alt);animation:starSpin 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes starSpin{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(8deg)}}
.gift{--c:var(--bg);--r:var(--pop);position:absolute;aspect-ratio:1/.84;cursor:pointer;animation:giftWig 3.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes giftWig{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-4deg)}90%{transform:rotate(4deg)}94%{transform:rotate(-2deg)}}
.g-b{position:absolute;left:5%;right:5%;bottom:0;height:76%;border-radius:4px;background:linear-gradient(90deg,transparent 42%,var(--r) 42% 58%,transparent 58%),var(--c);box-shadow:0 8px 14px rgba(0,0,0,.28)}
.g-l{position:absolute;left:0;right:0;top:4%;height:24%;border-radius:4px;z-index:1;background:linear-gradient(90deg,transparent 42%,var(--r) 42% 58%,transparent 58%),color-mix(in srgb,var(--c) 86%,#000);transition:transform .7s cubic-bezier(.4,-.3,.6,1),opacity .5s .2s}
.g-w{position:absolute;left:50%;top:-30%;width:62%;margin-left:-31%;z-index:2;transition:transform .7s cubic-bezier(.4,-.3,.6,1),opacity .5s .15s}
.g-w svg{display:block;width:100%;height:auto}
.gift .bw1{fill:var(--r)}.gift .bw2{fill:color-mix(in srgb,var(--r) 78%,#000)}.gift .bw3{fill:none;stroke:#fff;stroke-opacity:.3;stroke-width:2.4;stroke-linecap:round}
.g-in{position:absolute;left:50%;top:6%;width:34%;margin-left:-17%;color:var(--deep-p);opacity:0;transition:opacity .4s .35s,transform .6s cubic-bezier(.2,1.6,.4,1) .35s}
.g-in .i{width:100%;height:auto}
.gift.open{animation:none}
.gift.open .g-l{transform:translate(18%,-140%) rotate(24deg);opacity:0}
.gift.open .g-w{transform:translateY(-170%) rotate(-30deg);opacity:0}
.gift.open .g-in{opacity:1;transform:translateY(-70%) scale(1.2)}
.gcount{text-align:center;font-size:14px;font-weight:600;margin-top:14px}

/* ---------- 12 ruleta ---------- */
.wheel-wrap{position:relative;flex:none;width:min(330px,86cqw,46cqh);aspect-ratio:1;margin:18px auto 0}
.wheel{display:block;width:100%;height:100%}
.w-rim{fill:var(--ink)}
.w-sg{fill:var(--bg);stroke:var(--ink);stroke-width:2}
.w-tx{fill:var(--ink);font-family:var(--sans);font-weight:700}
.w-hub{fill:var(--ink)}.w-heart{fill:var(--bg)}
.wheel-wrap .pointer{position:absolute;left:50%;top:-12px;width:30px;height:38px;margin-left:-15px;z-index:3}
.pointer path{fill:var(--ink);stroke:var(--bg);stroke-width:2.5}
.result{min-height:70px;margin-top:12px;text-align:center}
.res-in{display:inline-block;max-width:100%;padding:10px 20px;border-radius:16px;background:var(--bg);color:var(--ink)}
.res-in small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.res-in b{display:block;font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:min(30px,8cqw);line-height:1.05}
.result .sub{display:block;font-size:13px;margin-top:6px}
#spin{align-self:center;margin-top:auto}

/* ---------- 13 vales ---------- */
.vl-list{display:grid;gap:10px;margin-top:14px;grid-auto-rows:minmax(84px,124px)}
.vale{--n:58px;position:relative;display:flex;border-radius:16px;background:var(--bg);color:var(--ink);overflow:hidden;
  -webkit-mask:radial-gradient(circle 9px at calc(100% - var(--n)) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at calc(100% - var(--n)) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 9px at calc(100% - var(--n)) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at calc(100% - var(--n)) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.vl-in{flex:1;min-width:0;padding:10px 16px;display:flex;flex-direction:column;justify-content:center}
.vl-in small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.vl-in b{font-family:var(--serif);font-weight:400;font-size:min(22px,6cqw);line-height:1.12;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vl-in em{font-style:normal;font-size:12px;opacity:.8;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl-stub{width:var(--n);flex:none;border-left:2px dashed color-mix(in srgb,var(--ink) 40%,transparent);display:grid;place-items:center;font-family:var(--disp);font-size:15px;letter-spacing:.06em;writing-mode:vertical-rl;rotate:180deg}
.vale canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
@container (max-height:560px){.vl-in b{-webkit-line-clamp:1}.vl-in em{display:none}.vl-list{grid-auto-rows:minmax(76px,96px)}}

/* ---------- 14 logros ---------- */
.lg-n{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.lg-n b{font-family:var(--disp);font-weight:400;font-size:min(56px,15cqw);line-height:1}
.lg-n span{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.lg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;margin-top:14px;align-content:start}
.lg-b{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.lg-med{width:min(92px,25cqw,15cqh);aspect-ratio:1;display:grid;place-items:center;background:var(--bg);color:var(--ink)}
.lg-med b{font-family:var(--disp);font-weight:400;font-size:min(26px,7cqw,4.4cqh);line-height:1}
.lg-t{font-size:12px;font-weight:700;line-height:1.2;margin-top:7px}
.lg-b small{font-size:11px;font-weight:600;opacity:.8;margin-top:2px}
.lg-b.lock .lg-med{background:none;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,currentColor 45%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.lg-b.lock .lg-med .i{width:18px;height:18px;opacity:.8}
.lg-b.lock .lg-med b{font-size:min(17px,4.6cqw);opacity:.85}

/* ---------- 15 carta ---------- */
.paper{position:relative;flex:1;min-height:0;overflow:auto;margin-top:14px;background:var(--bg);color:var(--ink);border-radius:6px;padding:22px 22px 18px;font-size:16px;line-height:1.62;opacity:0;transform-origin:top center;scrollbar-width:none;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent),0 24px 50px rgba(0,0,0,.16)}
.paper.show{opacity:1}
.paper .fecha{font-size:13px;opacity:.75;margin-bottom:10px}
.paper p{opacity:0;transform:translateY(8px);margin-top:8px}
.paper .to{font-weight:700;margin-top:0}
.paper .firma{font-family:var(--script);font-size:42px;line-height:1.1;margin-top:8px;clip-path:inset(0 100% 0 0)}
.paper.go .firma{animation:sign 1.6s ease forwards}
.sealbig{position:absolute;left:50%;top:52%;width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;z-index:6;background:var(--pop);color:var(--pop-i);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;animation:sealPulse 2.2s ease-in-out infinite}
.sealbig::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1.5px dashed currentColor;opacity:.55}
.sealbig .i{width:40px;height:40px}
.sealbig span{font-family:var(--disp);text-transform:uppercase;font-size:14px;letter-spacing:.12em}

/* ---------- 16 lo que viene ---------- */
.px-days{display:flex;align-items:flex-end;gap:10px;margin-top:12px}
.px-d{display:flex;font-family:var(--disp);font-size:min(150px,40cqw,24cqh);line-height:1}
.px-l{font-family:var(--disp);text-transform:uppercase;font-size:min(34px,9cqw);line-height:1;padding-bottom:.3em}
.px-clock{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.px-clock>div{background:var(--ink);color:var(--bg);border-radius:16px;padding:10px 6px 8px;text-align:center}
.px-n{display:inline-flex;font-family:var(--disp);font-size:min(42px,11cqw);line-height:1}
.px-clock small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-top:4px}
.px-foot{display:flex;align-items:flex-end;gap:16px;margin-top:auto;padding-top:14px}
.px-cal{flex:none;width:124px;border-radius:16px;overflow:hidden;background:var(--bg);color:var(--ink);text-align:center;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.px-cal .m{display:block;background:var(--pop);color:var(--pop-i);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:7px}
.px-cal b{display:block;font-family:var(--disp);font-weight:400;font-size:56px;line-height:1;padding-top:8px}
.px-cal .y{display:block;font-size:12px;font-weight:600;padding:2px 0 10px;text-transform:capitalize}
.px-end{font-family:var(--serif);font-size:20px;line-height:1.2;padding-bottom:6px}
@container (max-height:520px){.px-cal b{font-size:40px}.px-cal{width:104px}}

/* ---------- 17 la pregunta ---------- */
.ch-propuesta{align-items:center;justify-content:center;text-align:center}
.ch-propuesta .kick::before{display:none}
.pr-q{width:100%;line-height:1.02}
.prop{position:relative;width:100%;height:150px;margin-top:20px}
.prop .yes,.prop .no{position:absolute;top:44px;padding:18px 38px;border-radius:999px;font-weight:800;font-size:19px;transition:left .22s,top .22s}
.prop .yes{left:calc(50% - 150px);background:var(--ink);color:var(--bg)}
.prop .no{left:calc(50% + 30px);background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.ch-propuesta #pn{min-height:52px}

/* ---------- 18 final ---------- */
.ch-final{align-items:center;text-align:center;padding-top:68px}
.ch-final .kick::before{display:none}
.fin-heart{display:grid;gap:3px;margin:10px auto 0;flex:none}
.fin-heart img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.fin-heart.beat{animation:hb 1.5s ease-in-out infinite}
@keyframes hb{0%,100%{transform:scale(1)}14%{transform:scale(1.06)}28%{transform:scale(1)}42%{transform:scale(1.035)}}
.fin-t{width:100%;margin-top:16px;font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.95}
.fin-t .ln>span{white-space:nowrap}
.fin-f{width:100%;font-family:var(--script);font-size:min(36px,10cqw);line-height:1.15;color:var(--pop);margin-top:4px;white-space:nowrap}
.fin-st{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;width:100%}
.fin-st>div{background:var(--bg);color:var(--ink);border-radius:16px;padding:10px 6px 8px}
.fin-st b{display:block;font-family:var(--disp);font-weight:400;font-size:28px;line-height:1}
.fin-st span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.fin-b{display:grid;gap:8px;width:100%;margin-top:12px}
.fin-b .cbtn{width:100%}
#reply{background:var(--pop);color:var(--pop-i)}
.fin-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fin-2 .cbtn{padding:13px 8px;font-size:14px}
.fin-l{display:block;margin-top:12px;font-size:13.5px;color:inherit;opacity:.85;text-decoration:underline;text-underline-offset:3px}
@container (max-height:600px){.fin-st{display:none}.fin-t{margin-top:12px}}

@media (prefers-reduced-motion:reduce){.paper .firma{clip-path:none}}