/* ==========================================================
   Deco Bazar — estilos
   Paleta de la marca: menta, rosa y coral sobre blanco cálido
   ========================================================== */
:root{
  --rosa:#EC5FA0;
  --rosa-2:#D04586;
  --rosa-suave:#FDE7F1;
  --menta:#6CCBB3;
  --menta-osc:#2F9A84;
  --menta-osc-2:#237A68;
  --menta-suave:#E3F6F1;
  --coral:#F37E6C;
  --coral-suave:#FEE9E4;
  --crema:#FFFBF8;
  --tinta:#36353B;
  --tinta-2:#6A6870;
  --linea:#F0DDE5;
  --radio:24px;
  --display:"Fraunces", Georgia, serif;
  --base:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mano:"Caveat", "Segoe Script", cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--base);font-size:17px;line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.08}
p{margin:0 0 1em}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.center{text-align:center;margin-inline:auto}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.9em 1.6em;border-radius:999px;font-weight:800;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn .ico{width:1.2em;height:1.2em}
.btn-pink{background:var(--rosa);color:#fff;box-shadow:0 8px 0 -2px var(--rosa-2)}
.btn-pink:hover{background:var(--rosa-2)}
.btn-line{background:#fff;color:var(--menta-osc);border-color:var(--menta-osc);border-style:dashed}
.btn-line:hover{background:var(--coral-suave)}
.btn-light{background:#fff;color:var(--menta-osc)}
.btn-sm{padding:.6em 1.2em;box-shadow:none}

/* ---------- Cabecera ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,248,240,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:box-shadow .3s ease}
.site-header.is-scrolled{box-shadow:0 6px 20px -14px rgba(47,154,132,.5)}
.header-inner{display:flex;align-items:center;gap:24px;min-height:78px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-img{width:56px;height:56px;border-radius:50%;transition:transform .6s ease}
.logo:hover .logo-img{transform:rotate(-8deg)}
.logo-text{font-family:var(--display);font-weight:600;font-size:1.6rem;line-height:.9;color:var(--menta-osc)}
.logo-text span{color:var(--menta-osc)}
.logo-text small{display:block;font-family:var(--base);font-weight:800;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rosa);margin-top:4px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-weight:700;color:var(--tinta-2);font-size:.98rem;position:relative;padding:6px 0;transition:color .2s ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--rosa) 0 6px,transparent 6px 10px);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav a:hover,.nav a.is-active{color:var(--rosa)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:0;background:var(--rosa);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-btn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease, opacity .3s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Texto a mano ---------- */
.hand{font-family:var(--mano);font-weight:700;font-size:1.7rem;color:var(--rosa);margin:0 0 6px;transform:rotate(-2deg);display:inline-block}
.hand-light{color:#FFE1D9}

/* ---------- 1. Hero ---------- */
.hero{position:relative;padding:0 0 30px;overflow:hidden;background:
  radial-gradient(circle at 85% 15%,var(--rosa-suave) 0 18%,transparent 40%),
  radial-gradient(circle at 10% 90%,var(--menta-suave) 0 14%,transparent 34%),
  var(--crema)}
.hero-banner{position:relative;margin:-1px 0 0}.hero-banner img{width:100%;height:auto;max-height:520px;object-fit:cover;object-position:center}.hero-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,transparent,var(--crema))}
.hero-inner{display:flex;justify-content:center;text-align:center;margin-top:clamp(10px,2vw,24px)}.hero-copy{max-width:820px}.hero-sub{margin-inline:auto}.hero-actions{justify-content:center}
.hero-title{isolation:isolate;font-family:var(--display);font-weight:800;font-size:clamp(2.8rem,6.4vw,5rem);letter-spacing:-.02em;color:var(--tinta)}
.hero-title em{font-style:italic;color:var(--rosa);position:relative;white-space:nowrap}
.hero-title em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.14em;background:var(--menta);border-radius:99px;z-index:-1;opacity:.7}
.hero-sub{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--tinta-2);max-width:33em;margin-top:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-art svg{width:100%;height:auto;overflow:visible}
.ball{transform-box:fill-box;transform-origin:center}
.b1{animation:bob 7s ease-in-out infinite}
.b2{animation:bob 6s ease-in-out infinite -2s}
.b3{animation:bob 8s ease-in-out infinite -4s}
@keyframes bob{50%{translate:0 -8px}}
.thread{animation:dash 30s linear infinite}
@keyframes dash{to{stroke-dashoffset:-400}}

.hero-strip{list-style:none;margin:30px 0 0;padding:16px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;background:#fff;border:2px dashed var(--linea);border-radius:var(--radio)}
.hero-strip li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;text-align:center}
.hero-strip b{font-size:.92rem;color:var(--tinta)}
.s-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;background:var(--rosa-suave);transition:transform .3s ease}
.hero-strip li:nth-child(3n+2) .s-ico{background:var(--menta-suave)}
.hero-strip li:nth-child(3n) .s-ico{background:var(--coral-suave)}
.hero-strip li:hover .s-ico{transform:rotate(-10deg) scale(1.1)}

/* ---------- Secciones ---------- */
.section{padding:clamp(70px,9vw,120px) 0}
.section-head{max-width:720px;margin-bottom:clamp(34px,5vw,54px)}
.section-head.center{text-align:center}
h2{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.015em;color:var(--tinta)}
h2 em{font-style:italic;color:var(--rosa)}
.lead{font-size:1.1rem;color:var(--tinta-2);margin-top:14px}

/* ---------- 2. Productos ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat{--c:var(--rosa);--s:var(--rosa-suave);position:relative;background:#fff;border-radius:var(--radio);padding:30px 28px;border:2px solid transparent;box-shadow:0 14px 30px -22px rgba(47,154,132,.5);transition:transform .35s ease, border-color .35s ease}
.cat::before{content:"";position:absolute;inset:8px;border:2px dashed var(--s);border-radius:calc(var(--radio) - 8px);pointer-events:none;transition:border-color .35s ease}
.cat:hover{transform:translateY(-6px) rotate(-.6deg)}
.cat:hover::before{border-color:var(--c)}
.c-green{--c:var(--menta-osc);--s:var(--menta-suave)}
.c-purple{--c:var(--coral);--s:var(--coral-suave)}
.c-teal{--c:var(--menta-osc);--s:var(--menta-suave)}
.c-yellow{--c:var(--coral);--s:var(--coral-suave)}
.cat-ico{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;background:var(--s);margin-bottom:16px}
.cat h3{font-family:var(--display);font-size:1.5rem;color:var(--c);margin-bottom:8px;filter:brightness(.85)}
.cat p{margin:0;color:var(--tinta-2)}

/* ---------- 2b. Calculadora de lana ---------- */
.cat .cat-link{color:var(--rosa-2);font-weight:800;text-decoration:none;white-space:nowrap}
.cat .cat-link:hover{text-decoration:underline}
.strip-link{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.calc-sec{background:var(--menta-suave);position:relative}
.calc-sec::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(47,154,132,.12) 1.5px,transparent 1.5px);background-size:24px 24px;pointer-events:none}
.calc-sec .wrap{position:relative}
.calc{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}
.calc-form{background:#fff;border-radius:var(--radio);padding:clamp(22px,3.5vw,36px);box-shadow:0 14px 30px -22px rgba(47,154,132,.6)}
.calc-projects{border:0;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.calc-projects legend,.calc-grid label{font-weight:800;color:var(--tinta);font-size:.95rem;margin-bottom:10px;padding:0}
.proj{position:relative;cursor:pointer}
.proj input{position:absolute;opacity:0;pointer-events:none}
.proj span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:16px;border:2px dashed var(--linea);font-size:1.6rem;text-align:center;transition:border-color .2s ease, background-color .2s ease, transform .2s ease}
.proj b{font-size:.85rem;line-height:1.2;color:var(--tinta)}
.proj-svg{width:1.15em;height:1.15em;display:block}
.proj:hover span{border-color:var(--menta);transform:translateY(-2px)}
.proj input:checked + span{border-style:solid;border-color:var(--rosa);background:var(--rosa-suave)}
.proj input:focus-visible + span{outline:3px solid var(--menta-osc);outline-offset:2px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.calc-grid label{display:grid;gap:6px;margin:0}
.calc-grid small{font-weight:600;color:var(--tinta-2)}
.calc-wide{grid-column:1 / -1}
.calc-grid select,.calc-grid input{font:inherit;font-size:1rem;color:var(--tinta);padding:12px 14px;border-radius:14px;border:2px solid var(--linea);background:var(--crema);width:100%;transition:border-color .2s ease, box-shadow .2s ease}
.calc-grid select:focus,.calc-grid input:focus{outline:none;border-color:var(--menta-osc);box-shadow:0 0 0 4px rgba(108,203,179,.25)}
.calc-grid select:disabled{opacity:.45}
.calc-result{position:sticky;top:100px;background:var(--menta-osc);color:#fff;border-radius:var(--radio);padding:clamp(24px,3.5vw,36px);text-align:center;box-shadow:0 20px 40px -24px rgba(35,122,104,.9);overflow:hidden}
.calc-result::after{content:"🧶";position:absolute;right:-14px;bottom:-22px;font-size:7rem;opacity:.15;transform:rotate(-15deg)}
.res-label{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:#CDEFE6}
.res-big{font-family:var(--display);font-weight:800;font-size:clamp(3rem,6vw,4.2rem);line-height:1;margin:10px 0 6px}
.res-big.pop{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.08)}}
.res-detail{font-weight:800;font-size:1.1rem;color:#FFE1D9;margin-bottom:12px}
.res-note{font-size:.92rem;color:#E2F4EF;margin-bottom:20px}
.calc-result .btn{position:relative;z-index:1;background:#fff;color:var(--rosa-2);box-shadow:0 8px 0 -2px rgba(0,0,0,.15)}
.res-small{margin:18px 0 0;font-size:.82rem;color:#CDEFE6;position:relative;z-index:1}

/* ---------- 3. Corte láser ---------- */
.laser{background:var(--menta-osc);color:#F2FBF8;position:relative;overflow:hidden}
.laser::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1.5px,transparent 1.5px);background-size:22px 22px}
.laser-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.laser h2{color:#fff}
.laser h2 em{color:#FFE1D9}
.laser-copy p{font-size:1.08rem;color:#E2F4EF}
.laser-copy .hand{font-size:1.7rem;color:#FFE1D9}
.laser h2{margin-bottom:18px}
.checks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.checks li{display:flex;gap:12px;align-items:center;font-weight:700}
.checks li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:50%;background:var(--menta);color:var(--menta-osc-2);display:grid;place-items:center;font-weight:900;font-size:.9rem}
.laser-art svg{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(20,8,40,.45))}
.laser-text{fill:#5A3A16}
.js .laser-text{fill:none;stroke-dasharray:900;stroke-dashoffset:900}
.beam{opacity:0}
.laser.is-on .laser-text{animation:write 3.2s ease forwards .3s}
.laser.is-on .beam{animation:beam 3.2s ease forwards .3s}
@keyframes write{to{stroke-dashoffset:0;fill:#5A3A16}}
@keyframes beam{0%{opacity:1;transform:translateX(-110px)}90%{opacity:1;transform:translateX(110px)}100%{opacity:0;transform:translateX(110px)}}

/* ---------- 4. Comunidad ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px}
.step{background:#fff;border-radius:var(--radio);padding:30px 26px;text-align:center;position:relative;box-shadow:0 14px 30px -22px rgba(47,154,132,.5)}
.step span{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:var(--rosa);color:#fff;font-family:var(--display);font-weight:800;font-size:1.4rem}
.step:nth-child(2) span{background:var(--menta)}
.step:nth-child(3) span{background:var(--menta-osc)}
.step b{display:block;font-family:var(--display);font-size:1.3rem;margin-bottom:6px}
.step p{margin:0;color:var(--tinta-2)}

/* ---------- 5. Contacto ---------- */
.contact-sec{background:var(--rosa-suave)}
.contact-card{max-width:720px;margin:0 auto;background:#fff;border-radius:32px;padding:clamp(30px,5vw,56px);text-align:center;border:3px dashed var(--rosa);box-shadow:0 20px 50px -30px rgba(208,69,134,.6)}
.channels{list-style:none;padding:0;margin:28px auto 0;display:grid;gap:12px;max-width:440px}
.channels a{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:var(--crema);text-decoration:none;text-align:left;border:2px solid var(--linea);transition:transform .25s ease, border-color .25s ease}
.channels a:hover{transform:translateY(-2px);border-color:var(--rosa)}
.ch-ico{width:48px;height:48px;border-radius:50%;background:var(--rosa);display:grid;place-items:center;flex:none;font-size:1.3rem}
.channels b{display:block;color:var(--tinta)}
.channels a>span:last-child>span{color:var(--tinta-2);font-size:.95rem}

/* ---------- Pie ---------- */
.site-footer{background:var(--menta-osc-2);color:#E2F4EF;padding:30px 0}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.footer-inner b{color:#fff}
.footer-small{margin:0;font-size:.9rem}

/* ---------- Aparición suave (solo con JS activo) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--menta-osc);outline-offset:3px;border-radius:8px}

@media (prefers-reduced-motion: reduce){
  .thread{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero-strip{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .menu-btn{display:flex}
  .header-cta{display:none}
  .nav{position:fixed;inset:78px 0 auto 0;flex-direction:column;gap:0;background:var(--crema);padding:10px 20px 24px;box-shadow:0 20px 30px -20px rgba(0,0,0,.3);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .25s ease, transform .25s ease, visibility .25s}
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav a{font-size:1.1rem;padding:14px 4px;border-bottom:2px dashed var(--linea)}
  .nav a::after{display:none}
  .hero-inner,.laser-inner{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .cats{grid-template-columns:1fr}
  .hero-strip{grid-template-columns:repeat(2,1fr)}
  .btn{width:100%;justify-content:center}
  .header-inner .btn{width:auto}
  .hero-title em{white-space:normal}
}

/* ---------- Bisutería: tarjeta que abre un visor de fotos ---------- */
.cat-fotos{cursor:pointer}
.visor-num{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(30,28,34,.7);color:#fff;font-weight:800;font-size:.9rem;padding:3px 12px;border-radius:999px}
.visor{border:0;padding:0;background:transparent;max-width:min(92vw,1000px);width:100%;overflow:visible}
.visor::backdrop{background:rgba(30,28,34,.85)}
.visor img{width:100%;height:auto;max-height:86vh;object-fit:contain;border-radius:16px;display:block;background:#fff}
.visor-btn{position:absolute;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--rosa-2);font-size:1.5rem;font-weight:800;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.visor-cerrar{top:-14px;right:-14px}
.visor-ant{left:-18px;top:50%;transform:translateY(-50%)}
.visor-sig{right:-18px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .visor-ant{left:6px}.visor-sig{right:6px}.visor-cerrar{right:6px;top:6px}
}

/* Calculadora en pantallas chicas */
@media (max-width:900px){.calc{grid-template-columns:1fr}.calc-result{position:relative;top:auto}}
@media (max-width:520px){.calc-grid{grid-template-columns:1fr}.proj span{font-size:1.4rem;padding:10px 4px}.proj b{font-size:.78rem}}

/* ============ Ruleta "Gira y gana" ============ */
.ruleta-sec{position:relative;padding:clamp(50px,7vw,90px) 0;overflow:hidden;
  background:radial-gradient(circle at 15% 20%,rgba(236,95,160,.16),transparent 40%),radial-gradient(circle at 85% 80%,rgba(108,203,179,.22),transparent 45%),
  repeating-linear-gradient(45deg,rgba(236,95,160,.04) 0 14px,transparent 14px 28px),var(--rosa-suave)}
.ruleta-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,70px);align-items:center}
.ruleta-copy .lead{color:var(--tinta-2)}
.ruleta-lista{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.ruleta-lista li{display:flex;align-items:center;gap:12px;font-weight:700;background:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 6px 18px -10px rgba(208,69,134,.4)}
.ruleta-lista span{font-size:1.4rem}
.ruleta-box{display:flex;flex-direction:column;align-items:center;gap:14px}
.ruleta-rueda{position:relative;width:min(440px,88vw);aspect-ratio:1;filter:drop-shadow(0 22px 30px rgba(208,69,134,.35))}
.ruleta-rueda svg{display:block;width:100%;height:100%}
.db-rot{will-change:transform}
.db-luz{fill:#FFF6C8;animation:dbLuz 1s steps(2) infinite}
.db-luz.b{animation-delay:.5s}
@keyframes dbLuz{0%{fill:#FFF6C8;filter:drop-shadow(0 0 3px #FFE27A)}50%{fill:#FFD1E6;filter:none}}
.ruleta-rueda.girando .db-luz{animation-duration:.25s}
.ruleta-flecha{position:absolute;left:50%;top:-6px;z-index:2;width:42px;height:54px;transform:translateX(-50%);transform-origin:50% 12px;
  background:linear-gradient(180deg,#fff,#FDE7F1);clip-path:polygon(50% 100%,0 32%,14% 8%,50% 0,86% 8%,100% 32%);filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.ruleta-flecha::after{content:"";position:absolute;inset:5px 7px 10px;background:var(--rosa);clip-path:polygon(50% 100%,0 32%,14% 8%,50% 0,86% 8%,100% 32%)}
.ruleta-flecha.toc{animation:dbToc .12s ease}
@keyframes dbToc{50%{transform:translateX(-50%) rotate(-14deg)}}
.ruleta-centro{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:5px solid #fff;padding:0;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff,#FDE7F1 70%);box-shadow:0 8px 22px -6px rgba(208,69,134,.7),inset 0 -4px 0 rgba(208,69,134,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .2s}
.ruleta-centro img{width:56%;height:auto;border-radius:50%}
.ruleta-centro span{font:800 clamp(.62rem,1.6vw,.85rem)/1 var(--base);letter-spacing:.08em;color:var(--rosa-2)}
.ruleta-centro:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.06)}
.ruleta-centro:not(:disabled){animation:dbLatido 1.6s ease-in-out infinite}
@keyframes dbLatido{50%{box-shadow:0 8px 22px -6px rgba(208,69,134,.7),0 0 0 10px rgba(236,95,160,.18)}}
.ruleta-centro:disabled{cursor:default;filter:saturate(.7)}
.ruleta-estado{margin:0;min-height:1.6em;text-align:center;font-weight:700;color:var(--tinta-2)}
.db-link{border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--rosa);text-decoration:underline;cursor:pointer}
.db-confeti{position:fixed;inset:0;z-index:120;pointer-events:none;display:none}

.db-premio{border:0;padding:clamp(22px,4vw,34px);width:min(440px,100% - 32px);border-radius:28px;text-align:center;background:var(--crema);color:var(--tinta);box-shadow:0 40px 90px -30px rgba(0,0,0,.5)}
.db-premio::backdrop{background:rgba(54,53,59,.55);backdrop-filter:blur(3px)}
.db-premio h3{font-family:var(--display);font-size:1.8rem;line-height:1.15;margin:4px 0 8px}
.db-sub{color:var(--tinta-2);margin:0 0 18px}
.db-cerrar{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:#fff;cursor:pointer;font-size:1rem;box-shadow:0 2px 8px rgba(0,0,0,.1)}
#dbForm{display:grid;gap:14px;text-align:left}
#dbForm label{display:grid;gap:6px;font-weight:800;font-size:.9rem}
#dbForm input{font:inherit;padding:12px 14px;border-radius:14px;border:2px solid var(--linea);background:#fff}
#dbForm input:focus{outline:none;border-color:var(--rosa)}
#dbForm input.is-invalid{border-color:var(--coral)}
#dbForm .btn{justify-content:center}
.db-ticket{position:relative;margin:6px 0 16px;padding:20px 16px;border-radius:20px;background:#fff;border:2px dashed var(--rosa)}
.db-ticket::before,.db-ticket::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--crema);transform:translateY(-50%)}
.db-ticket::before{left:-12px}.db-ticket::after{right:-12px}
.db-t-marca{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 6px;font-weight:800;font-size:.9rem;color:var(--tinta-2)}
.db-t-marca img{border-radius:50%}
.db-t-premio{margin:0;font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--rosa);line-height:1.15}
.db-t-codigo{margin:10px 0 4px;font:800 1.35rem/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;background:var(--menta-suave);color:var(--menta-osc-2);display:inline-block;padding:8px 14px;border-radius:12px}
.db-t-vence{margin:0;color:var(--tinta-2);font-size:.9rem}
.db-msg{color:var(--tinta-2);font-size:.95rem}
.db-premio .btn{width:100%;justify-content:center}
.db-letra{margin:12px 0 0;font-size:.75rem;color:var(--tinta-2)}

.db-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:10px;padding:7px 18px 7px 7px;border-radius:999px;text-decoration:none;color:#fff;font-weight:800;
  background:linear-gradient(135deg,var(--rosa),var(--coral));box-shadow:0 12px 28px -8px rgba(208,69,134,.8),0 0 0 3px #fff;transition:opacity .3s,transform .3s;animation:dbSalto 3.4s ease-in-out infinite}
.db-fab.oculto{opacity:0;pointer-events:none;transform:translateY(20px)}
.db-fab-rueda{width:40px;height:40px;border-radius:50%;border:3px solid #fff;flex:none;animation:dbGira 4s linear infinite;
  background:conic-gradient(#6CCBB3 0 60deg,#FFFBF8 60deg 120deg,#EC5FA0 120deg 180deg,#FFFBF8 180deg 240deg,#F37E6C 240deg 300deg,#FFFBF8 300deg 360deg)}
@keyframes dbGira{to{transform:rotate(360deg)}}
@keyframes dbSalto{0%,86%,100%{translate:0 0}90%{translate:0 -8px}94%{translate:0 0}97%{translate:0 -4px}}
@media (max-width:820px){.ruleta-inner{grid-template-columns:minmax(0,1fr)}.ruleta-copy{text-align:center}.ruleta-lista{max-width:420px;margin-inline:auto;text-align:left}}
@media (prefers-reduced-motion: reduce){.db-luz,.ruleta-centro,.db-fab,.db-fab-rueda{animation:none}}
@media (max-width:820px){.ruleta-lista{display:none}.ruleta-copy .lead{margin-bottom:0}}

/* ============ Juegos para la mente ============ */
.mente-sec{padding:clamp(30px,5vw,60px) 0 0}
.mente{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:center;text-decoration:none;color:var(--tinta);border-radius:32px;padding:clamp(22px,4vw,40px);
  background:radial-gradient(circle at 90% 20%,rgba(255,255,255,.7),transparent 40%),linear-gradient(135deg,var(--menta-suave),#FFF4D6 60%,var(--rosa-suave));box-shadow:0 0 0 2px var(--linea),0 10px 0 var(--linea);transition:transform .25s}
.mente:hover{transform:translateY(-4px)}
.mente h2{margin:0 0 10px}
.mente p{color:var(--tinta-2);font-size:1.08rem;margin:0 0 18px}
.mente-ico{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;justify-items:center}
.mente-ico span{display:grid;place-items:center;width:clamp(74px,12vw,110px);aspect-ratio:1;border-radius:26px;background:#fff;font-size:clamp(2.2rem,5vw,3.4rem);box-shadow:0 6px 0 var(--linea);transform:rotate(-4deg)}
.mente-ico span:nth-child(even){transform:rotate(4deg)}
@media (max-width:720px){.mente{grid-template-columns:minmax(0,1fr)}.mente-ico{grid-template-columns:repeat(4,1fr)}.mente-ico span{width:64px;font-size:2rem;border-radius:18px}}

/* Menú: sin cortes de palabra y menú ☰ desde pantallas medianas (hay más secciones) */
.nav{gap:clamp(14px,1.7vw,26px)}
.nav a{white-space:nowrap}
@media (max-width:1240px){
  .menu-btn{display:flex;margin-left:12px}
  .header-cta{margin-left:auto}
  .nav{position:fixed;inset:78px 0 auto 0;flex-direction:column;gap:0;background:var(--crema);padding:10px 20px 24px;box-shadow:0 20px 30px -20px rgba(0,0,0,.3);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .25s ease, transform .25s ease, visibility .25s}
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav a{font-size:1.1rem;padding:14px 4px;border-bottom:2px dashed var(--linea)}
  .nav a::after{display:none}
}
@media (max-width:900px){ .menu-btn{margin-left:auto} }