/* sweetbonanza.ing — candy daylight: the v1 palette (white canvas, hot pink, lemon-gold, plum).
   3D "candy" buttons: sugar-white rim, glossy top and a solid edge; screenshots sit in the game's
   red-and-white striped frame; a tumble of candies and a multiplier bomb at the top of the home hero. */
@font-face{font-family:"Inter";src:url("/fonts/inter/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#ffffff;
  --bg-2:#fff4fb;
  --bg-3:#ffe6f6;
  --stone:#f5f5f4;
  --line:#efd9e9;
  --line-2:#f6b3e4;
  --text:#171717;
  --body:#292524;
  --muted:#57534e;
  --pink:#ff2bd6;
  --pink-deep:#ff007a;
  --pink-hi:#ff4df7;
  --pink-edge:#b30055;
  --gold:#ffbd00;
  --gold-hi:#ffe600;
  --gold-low:#ff9f00;
  --gold-edge:#d88400;
  --gold-ink:#433802;
  --plum:#6e0036;
  --ink:#171717;
  --gutter:16px;
  --col:1180px;
  --font:"Inter","Segoe UI",Roboto,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:400 clamp(16px, .4vw + 14.5px, 17.5px)/1.65 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--pink-edge);text-underline-offset:3px}
a:hover{color:var(--pink-deep)}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:4px 0}
h1,h2,h3{font-family:var(--font);color:var(--text);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 14px}
h1{font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);line-height:1.05;max-width:20ch}
h2{font-size:clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem)}
h3{font-size:clamp(1.08rem, 1rem + .35vw, 1.25rem);font-weight:700;letter-spacing:0}
h2::after{content:"";display:block;width:64px;height:6px;margin-top:12px;border-radius:6px;
  background:repeating-linear-gradient(-45deg,var(--pink-deep) 0 6px,#fff 6px 10px);box-shadow:0 0 0 1px var(--pink-deep)}
strong{color:var(--text)}
.num,.grid-tbl td,.ficha dd,.cuenta{font-variant-numeric:tabular-nums}
.frame{width:min(100% - 2 * var(--gutter), var(--col));margin-inline:auto}
.lead{font-size:1.12rem;color:var(--text);max-width:62ch}
:focus-visible{outline:3px solid var(--pink-edge);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------ candy buttons (sugar rim + gloss + solid edge, pressed on click) */
.candy{--c:var(--stone);--c-hi:#fff;--c-edge:#c9c3bd;--c-ink:var(--text);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 24px;
  border-radius:14px;border:3px solid #fff;font:800 1rem/1.1 var(--font);letter-spacing:.01em;text-decoration:none;
  color:var(--c-ink);background:linear-gradient(180deg,var(--c-hi) 0%,var(--c) 70%);
  box-shadow:0 0 0 2px var(--c-edge),0 6px 0 2px var(--c-edge),0 12px 18px rgba(179,0,85,.22);
  transform:translateY(0);transition:transform .08s ease,box-shadow .08s ease;cursor:pointer;white-space:nowrap}
.candy::before{content:"";position:absolute;left:10%;right:10%;top:3px;height:42%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));z-index:-1;pointer-events:none}
.candy:hover{color:var(--c-ink);filter:saturate(1.15)}
.candy:active{transform:translateY(5px);box-shadow:0 0 0 2px var(--c-edge),0 1px 0 2px var(--c-edge),0 4px 8px rgba(179,0,85,.2)}
.candy-pink{--c:var(--pink-deep);--c-hi:var(--pink-hi);--c-edge:var(--pink-edge);--c-ink:var(--ink)}
.candy-gold{--c:var(--gold-low);--c-hi:var(--gold-hi);--c-edge:var(--gold-edge);--c-ink:var(--gold-ink)}
.candy-line{--c:#fff;--c-hi:#fff;--c-edge:var(--line-2);border-color:var(--bg-2)}
.candy-line:hover{--c-edge:var(--pink)}
.candy-lg{min-height:56px;padding:14px 30px;font-size:1.1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:20px 14px;align-items:center;margin:22px 0 10px}

/* ------------------------------------------------ header */
.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:relative;z-index:30}
.header-inner{width:min(100% - 2 * var(--gutter), var(--col));margin-inline:auto;display:flex;align-items:center;gap:12px;min-height:64px}
.logo img{height:38px;width:auto}
.header-cta{margin-left:auto;min-height:42px;padding:8px 16px;font-size:.95rem}
.nav-panel{display:flex;align-items:center;gap:12px}
.main-nav{display:flex;gap:2px}
.main-nav a{color:var(--text);text-decoration:none;font:700 .96rem/1 var(--font);padding:10px 9px;border-radius:10px}
.main-nav a:hover{background:var(--bg-3);color:var(--text)}
.main-nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--pink)}
.nav-login{min-height:42px;padding:8px 16px;font-size:.95rem}
/* burger: checkbox + label, no JS */
.nav-toggle{position:absolute;opacity:0;width:44px;height:44px;margin:0;right:var(--gutter);top:10px;z-index:2;cursor:pointer}
.burger{display:none}
.site-header:not(.has-burger) .nav-toggle{display:none}
@media (min-width:1000px){.nav-toggle{display:none}}
@media (max-width:999.98px){
  .site-header:not(.has-burger) .header-inner{flex-wrap:wrap}
  .site-header:not(.has-burger) .nav-panel{order:3;width:100%;overflow-x:auto;padding-bottom:8px}
  .site-header:not(.has-burger) .nav-login{display:none}
  .has-burger .header-inner{padding-right:58px}
  .has-burger .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;position:absolute;right:var(--gutter);top:10px;
    width:44px;height:44px;border-radius:12px;background:#fff;border:3px solid #fff;box-shadow:0 0 0 2px var(--line-2),0 4px 0 2px var(--line-2);padding:0 9px}
  .has-burger .burger span{display:block;height:3px;border-radius:2px;background:var(--pink-deep);transition:transform .2s ease,opacity .2s ease}
  .has-burger .nav-toggle:focus-visible + .burger{outline:3px solid var(--pink-edge);outline-offset:4px}
  .has-burger .nav-toggle:checked + .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .has-burger .nav-toggle:checked + .burger span:nth-child(2){opacity:0}
  .has-burger .nav-toggle:checked + .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .has-burger .nav-panel{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:16px;
    padding:12px var(--gutter) 24px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(110,0,54,.15)}
  .has-burger .nav-toggle:checked ~ .nav-panel{display:flex}
  .has-burger .main-nav{flex-direction:column;gap:2px}
  .has-burger .main-nav a{padding:14px 10px;font-size:1.08rem;border-bottom:1px solid var(--line);border-radius:0}
  .has-burger .main-nav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--pink)}
  .has-burger .nav-login{align-self:flex-start}
}

/* ------------------------------------------------ hero */
.dulce{position:relative;padding:20px 0 34px;overflow:hidden;
  background:radial-gradient(900px 420px at 88% -80px,rgba(255,43,214,.16),transparent 70%),
             radial-gradient(700px 360px at 0 0,rgba(255,230,0,.16),transparent 70%)}
.dulce-grid{display:grid;gap:28px}
.dulce-copy > :last-child{margin-bottom:0}
.age-line{font-size:.92rem;color:var(--muted);margin-top:16px}
.age-line .age{margin-right:6px}
.page-top{padding:6px 0 28px}
.page-top .dulce-grid{align-items:center}

/* screenshot frame: the game's red-and-white striped rim */
.marco{position:relative;margin:0;padding:8px;border-radius:22px;
  background:repeating-linear-gradient(-45deg,#ff3355 0 10px,#fff 10px 18px);
  box-shadow:0 0 0 2px var(--pink-edge),0 10px 0 2px var(--pink-edge),0 26px 44px rgba(179,0,85,.22)}
.marco img{border-radius:15px;width:100%;background:#fff}
.marco figcaption{font-size:.85rem;color:var(--text);background:#fff;margin:8px -2px -2px;padding:8px 10px;border-radius:0 0 15px 15px;font-weight:600;line-height:1.4}

/* tumble rail: three candies drop, the bomb lands and shows its multiplier (transform + opacity only) */
.caida{position:relative;display:flex;align-items:flex-end;gap:clamp(14px, 2vw, 22px);height:86px;margin:0 0 12px;padding-bottom:6px}
.caida::after{content:"";position:absolute;left:0;bottom:0;width:min(100%, 420px);height:6px;border-radius:6px;
  background:repeating-linear-gradient(-45deg,#ff3355 0 6px,#fff 6px 10px);box-shadow:0 0 0 1px var(--pink-edge)}
.dulce-c{flex:none;width:52px;height:52px}
.c-cuadro{border-radius:16px;background:radial-gradient(circle at 32% 26%,#ffd6fb 0 10%,#ff4df7 34%,#b100a8 100%);box-shadow:inset 0 -5px 0 rgba(90,0,90,.35)}
/* the oval's tilt lives on ::before: the drop animation owns the element's own transform */
.c-ovalo{position:relative}
.c-ovalo::before{content:"";position:absolute;inset:14% -4%;border-radius:50%;transform:rotate(-24deg);
  background:radial-gradient(circle at 34% 28%,#d6ecff 0 10%,#2f7bff 38%,#0b2e9e 100%);box-shadow:inset 0 -6px 0 rgba(0,20,90,.35)}
.c-penta{clip-path:polygon(50% 2%,98% 38%,80% 96%,20% 96%,2% 38%);background:radial-gradient(circle at 40% 30%,#d7ffd0 0 10%,#3fd35a 38%,#127a2c 100%)}
.bomba{position:relative;flex:none;width:66px;height:66px;display:grid;place-items:center;border-radius:50%;
  background:conic-gradient(from 20deg,#ff3355,#ffbd00,#ffe600,#3fd35a,#2fb3ff,#8d5bff,#ff4df7,#ff3355);
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.18),0 0 0 3px #fff,0 0 0 5px var(--pink-edge)}
.bomba::before{content:"";position:absolute;top:-12px;left:50%;width:10px;height:14px;margin-left:-5px;border-radius:3px;background:#8a5a2b}
.bomba b{font:900 1.15rem/1 var(--font);color:#fff;text-shadow:0 1px 2px rgba(60,0,40,.9),0 0 8px rgba(60,0,40,.6)}
.premio{flex:none;align-self:center;margin-left:4px;padding:9px 14px;border-radius:14px;font:800 clamp(1.05rem, .9rem + .8vw, 1.4rem)/1 var(--font);
  color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-hi),var(--gold-low));border:3px solid #fff;box-shadow:0 0 0 2px var(--gold-edge),0 5px 0 2px var(--gold-edge)}
@media (prefers-reduced-motion:no-preference){
  .caida .d1{animation:drop-a 7s linear infinite}
  .caida .d2{animation:drop-b 7s linear infinite}
  .caida .d3{animation:drop-c 7s linear infinite}
  .caida .bomba{animation:drop-bomb 7s linear infinite}
  .caida .premio{animation:pop 7s linear infinite}
  /* one 7 s cycle for every piece, so they never drift apart */
  @keyframes drop-a{0%{transform:translateY(-120px);opacity:0}4%{opacity:1}12%{transform:translateY(5px)}15%,84%{transform:none;opacity:1}92%,100%{transform:translateY(16px);opacity:0}}
  @keyframes drop-b{0%,10%{transform:translateY(-120px);opacity:0}14%{opacity:1}22%{transform:translateY(5px)}25%,84%{transform:none;opacity:1}92%,100%{transform:translateY(16px);opacity:0}}
  @keyframes drop-c{0%,20%{transform:translateY(-120px);opacity:0}24%{opacity:1}32%{transform:translateY(5px)}35%,84%{transform:none;opacity:1}92%,100%{transform:translateY(16px);opacity:0}}
  @keyframes drop-bomb{0%,32%{transform:translateY(-130px) rotate(-40deg);opacity:0}36%{opacity:1}44%{transform:translateY(6px) rotate(8deg)}47%{transform:scale(1.15)}51%,84%{transform:none;opacity:1}92%,100%{transform:translateY(16px);opacity:0}}
  @keyframes pop{0%,50%{transform:scale(.4);opacity:0}56%{transform:scale(1.12);opacity:1}60%,84%{transform:none;opacity:1}92%,100%{transform:scale(.9);opacity:0}}
  .dulce .marco{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
}

/* fact sheet (ficha) */
.ficha{margin:32px 0 0;padding:20px;border-radius:20px;background:var(--bg-2);border:2px solid var(--line-2);box-shadow:0 6px 0 var(--line-2)}
.ficha-title{font:800 1.15rem/1.2 var(--font);color:var(--pink-edge);margin:0 0 14px}
.ficha dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:0}
.ficha dt{font-size:.82rem;color:var(--muted);margin:0}
.ficha dd{margin:2px 0 0;font:800 1.06rem/1.25 var(--font);color:var(--text)}
.ficha-note{margin:14px 0 0;font-size:.88rem;color:var(--muted)}

/* ------------------------------------------------ sections */
.tier{padding:46px 0}
.tier.alt{background:var(--bg-2);border-block:1px solid var(--line)}
/* blocks span the container from the same left edge; only running text is capped (~75 ch); nothing centered except 404 */
.prose > p,.prose > ul,.prose > ol,.tablet p,.qa-body p,.doc-body > p,.doc-body > ul,.doc-body > ol,.cuenta p,.aviso p,.byline{max-width:75ch}
.duo{display:grid;gap:26px;align-items:start}
.duo > *{min-width:0}
.pic{margin:0}
.pic img{border-radius:16px;border:3px solid #fff;box-shadow:0 0 0 2px var(--line-2),0 8px 0 2px var(--line-2)}
.pic figcaption{font-size:.88rem;color:var(--muted);margin-top:16px;line-height:1.45}
.pic.small{max-width:420px}
.reel{display:grid;gap:16px;margin:22px 0 4px;grid-auto-flow:column;grid-auto-columns:min(78%, 360px);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px}
.reel .pic{scroll-snap-align:start}
.tablets{display:grid;gap:18px;margin:20px 0 0}
.tablet{background:#fff;border:2px solid var(--line);border-radius:18px;padding:18px 18px 16px;box-shadow:0 6px 0 var(--line);min-width:0}
.tablet:nth-child(even){box-shadow:0 6px 0 var(--line-2)}
.tablet h3{margin-bottom:8px}
.tablet p:last-child{margin-bottom:0}
.stairs{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;counter-reset:s}
.stairs > li{position:relative;margin:0;padding:16px 16px 14px 68px;background:#fff;border:2px solid var(--line);border-radius:16px;counter-increment:s}
.stairs > li::before{content:counter(s);position:absolute;left:14px;top:14px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;font:800 1.1rem/1 var(--font);color:var(--ink);background:radial-gradient(circle at 35% 30%,#ffd6fb 0 12%,var(--pink-hi) 40%,var(--pink-deep) 100%);
  border:3px solid #fff;box-shadow:0 0 0 2px var(--pink-edge),0 3px 0 2px var(--pink-edge)}
.stairs h3{margin-bottom:6px}
.stairs p:last-child{margin-bottom:0}
.aviso{margin:18px 0;padding:14px 16px;border-radius:14px;background:#fff0f7;border:2px solid #ffb3d6;color:var(--text)}
.aviso p:last-child{margin:0}
.cuenta{margin:18px 0;padding:16px 18px;border-radius:16px;background:#fffbe0;border:2px dashed var(--gold-edge)}
.cuenta p{margin:0 0 6px}
.cuenta p:last-child{margin:0}
.byline{margin-top:24px;padding:14px 16px;border-left:5px solid var(--pink);background:var(--bg-2);border-radius:0 14px 14px 0;font-size:.95rem;color:var(--body)}
.pros{display:grid;gap:18px;margin-top:18px}
.pro{border-top:5px solid var(--gold)}
.con{border-top:5px solid var(--pink)}

/* tables: classic grid, Gemini-like (equal columns, wrapped text, row rules only);
   phones scroll inside the frame with the first column pinned */
.tbl-box{--cols:3;overflow-x:auto;margin:18px 0;border-radius:16px;border:2px solid var(--line);
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/40px 100% no-repeat local,
             linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right/40px 100% no-repeat local,
             radial-gradient(farthest-side at 100% 50%,rgba(110,0,54,.22),transparent) right/14px 100% no-repeat scroll,
             #fff}
.grid-tbl{width:100%;min-width:calc(var(--cols) * 9.5rem);table-layout:fixed;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.grid-tbl caption{caption-side:bottom;text-align:left;padding:10px 16px 12px;color:var(--muted);font-size:.85rem}
.grid-tbl th,.grid-tbl td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:break-word;hyphens:auto}
.grid-tbl thead th{font:700 .9rem/1.3 var(--font);color:var(--muted);background:var(--bg-2);border-bottom:2px solid var(--line-2)}
.grid-tbl tbody th{font-weight:700;color:var(--text)}
.grid-tbl tbody tr:last-child > *{border-bottom:0}
.grid-tbl tr > :first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:inset -1px 0 0 var(--line)}
.grid-tbl thead tr > :first-child{background:var(--bg-2)}
@media (min-width:900px){
  .grid-tbl tr > :first-child{position:static;box-shadow:none}
  .grid-tbl{font-size:.98rem}
}

/* demo facade: the provider's iframe loads only after a click */
.demo-box{position:relative;margin:22px 0 10px;border-radius:20px;overflow:hidden;background:#2a0a1f;aspect-ratio:16/9;
  border:8px solid transparent;background-clip:padding-box;
  box-shadow:0 0 0 2px var(--pink-edge),0 10px 0 2px var(--pink-edge)}
.demo-box img{width:100%;height:100%;object-fit:cover;opacity:.7}
.demo-box button{position:absolute;inset:auto 50% 50% auto;transform:translate(50%,50%)}
.demo-box button:active{transform:translate(50%,calc(50% + 5px))}
.demo-box.is-live{aspect-ratio:auto;height:min(78vh,720px);min-height:420px}
.demo-box iframe{width:100%;height:100%;border:0;display:block}
.demo-alt{font-size:.9rem;color:var(--muted)}

/* FAQ */
.qa{background:#fff;border:2px solid var(--line);border-radius:16px;margin:10px 0}
.qa summary{list-style:none;cursor:pointer;padding:16px 54px 16px 18px;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{margin:0;font-size:1.08rem}
.qa summary::after{content:"";position:absolute;right:20px;top:22px;width:10px;height:10px;border-right:3px solid var(--pink-deep);border-bottom:3px solid var(--pink-deep);transform:rotate(45deg);transition:transform .2s ease}
.qa[open]{border-color:var(--line-2)}
.qa[open] summary::after{transform:rotate(225deg);top:26px}
.qa-body{padding:0 18px 16px}
.qa-body p:last-child{margin:0}

/* CTA counter before the FAQ (v1 plum banner) */
.mostrador{margin:10px 0 0;padding:28px 22px;border-radius:24px;color:#fff;
  background:radial-gradient(520px 240px at 92% 0,rgba(255,77,247,.45),transparent 70%),linear-gradient(135deg,#8a0048 0%,var(--plum) 70%);
  box-shadow:0 8px 0 #3d001e}
.mostrador h2{color:#fff;margin-bottom:8px}
.mostrador h2::after{box-shadow:0 0 0 1px #fff}
.mostrador p{color:#ffe6f3;max-width:62ch}
.mostrador a:not(.candy){color:#fff}

/* breadcrumbs + documents */
.crumbs ol{display:flex;flex-wrap:nowrap;gap:6px;list-style:none;padding:0;margin:18px 0 0;font-size:.88rem;color:var(--muted)}
.crumbs li{margin:0;flex:none}
.crumbs li[aria-current]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs li + li::before{content:"›";margin-right:6px;color:var(--pink-deep)}
.crumbs a{color:var(--muted)}
.doc{padding-bottom:40px}
.doc-body{padding:20px 0 10px}
.doc-body h1{max-width:none;margin-top:10px}
.doc-body h2{margin-top:34px}
.doc-date{font-size:.92rem;color:var(--muted)}

/* 404 */
.notfound{text-align:center}
.notfound h1,.notfound > p{margin-inline:auto}
.notfound .btn-row{justify-content:center}
.big-404{font:900 clamp(5rem, 3rem + 10vw, 9rem)/1 var(--font);margin:10px 0 4px;color:var(--text)}
.big-404 span{color:var(--pink-deep)}
.tips{columns:2;max-width:520px;margin:22px auto 0;text-align:left}
.tips li{break-inside:avoid;margin:0 0 8px}

/* footer */
.site-footer{margin-top:40px;background:var(--stone);border-top:1px solid #e7e5e4;padding:34px 0 26px;font-size:.95rem}
.foot-grid{display:grid;gap:26px}
.foot-label{font:800 1.02rem/1.2 var(--font);color:var(--text);margin-bottom:8px}
.foot-links{list-style:none;padding:0;margin:0}
.foot-links li{margin:0}
.foot-links a{display:inline-block;padding:7px 0;color:var(--muted);text-decoration:none}
.foot-links a:hover,.foot-links a[aria-current="page"]{color:var(--text);text-decoration:underline}
.foot-note{color:var(--muted);margin-top:12px}
.foot-18{margin:26px 0 10px;color:var(--body)}
.age{display:inline-grid;place-items:center;min-width:40px;height:28px;padding:0 6px;border-radius:8px;border:2px solid var(--pink-deep);color:var(--text);font:800 .9rem/1 var(--font)}
.disclosure,.copy{color:var(--muted);font-size:.88rem}
.dock{position:fixed;left:var(--gutter);right:var(--gutter);bottom:14px;z-index:40}
body{padding-bottom:88px}

/* ------------------------------------------------ breakpoints */
@media (min-width:600px){
  .ficha dl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tablets.two,.pros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reel{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
}
@media (min-width:900px){
  body{padding-bottom:0}
  .dock{display:none}
  .dulce{padding:28px 0 44px}
  .dulce-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px;align-items:center}
  .ficha dl{grid-template-columns:repeat(4,minmax(0,1fr))}
  .duo{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px}
  .duo.flip > :first-child{order:2}
  .tablets.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stairs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .tier{padding:64px 0}
  .dulce-c{width:60px;height:60px}
  .bomba{width:76px;height:76px}
  .caida{height:100px}
}
@media (min-width:1000px){
  .site-header{position:sticky;top:0;backdrop-filter:blur(8px)}
  .header-inner{min-height:72px;gap:16px}
  .logo img{height:44px}
  .nav-panel{flex:1;justify-content:space-between}
  .main-nav{margin-left:6px;margin-right:auto}
  .header-cta{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .candy,.burger span,.qa summary::after{transition:none}
}

/* spacing between stacked blocks */
.duo + .duo{margin-top:36px}
.prose h3,.duo h3{margin-top:24px}
.prose h3:first-child{margin-top:0}
.mostrador + .prose{margin-top:44px}
.tablets.two > :last-child:nth-child(odd){grid-column:1 / -1}
.btn-row + .prose,.prose .btn-row{margin-bottom:8px}
/* phones: the tumble rail must fit 343px (375 - gutters) */
@media (max-width:599.98px){
  .caida{gap:10px;height:76px}
  .dulce-c{width:42px;height:42px}
  .bomba{width:54px;height:54px}
  .bomba b{font-size:.95rem}
  .premio{padding:8px 10px;font-size:1rem}
}
.pics{display:grid;gap:28px;align-content:start}
.stairs + .mostrador,.pros + p + .mostrador,.aviso + .mostrador,.tablets + .mostrador{margin-top:32px}