/* =====================================================================
   Spottune Colombia · components (BRIEF §4.3 class contract + chrome)
   Layout · components · utilities · header · drawer · footer · fab · toast
   Breakpoints: 1100 / 900 / 600 / 420
   ===================================================================== */

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:820px}
.sec{position:relative;padding:var(--sec-pad) 0}
.sec-tight{padding:calc(var(--sec-pad) * .6) 0}
.sec-white{background:var(--st-white);color:var(--st-black)}
.sec-cream{background:var(--st-cream);color:var(--st-black)}
.sec-dark{background:var(--st-black);color:var(--st-cream)}
.sec-head{margin:0 0 var(--sp-6);padding-bottom:var(--sp-4);border-bottom:1px solid var(--st-line)}
.sec-head > *{max-width:760px}
.sec-head h2{margin:0}
.sec-head .lead{margin-top:var(--sp-2)}
.sec-head .eyebrow::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin:0 10px 2px 0}
.sec-head.center{text-align:center}
.sec-head.center > *{margin-left:auto;margin-right:auto}
.sec-head.center .eyebrow::before{display:none}
.sec-head.no-rule{border-bottom:0;padding-bottom:0}
/* the only two allowed deviations from the 48px contract — sections must use these, never their own margin */
.sec-head.tight{margin-bottom:var(--sp-4)}
.sec-head.loose{margin-bottom:var(--sp-8)}
.sec-dark .sec-head{border-color:var(--st-cream-a14)}
.rule{display:block;height:1px;border:0;margin:0;background:var(--st-line)}
.sec-dark .rule{background:var(--st-cream-a14)}
.grid-2,.grid-3,.grid-4{display:grid;gap:var(--sp-3)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,80px);align-items:center}
.split-media{min-width:0}
.split-media img,.split-media video{width:100%;height:auto;border-radius:var(--r)}
.split-body{min-width:0;max-width:540px}
.split.reverse .split-media{order:2}
.split.reverse .split-body{order:1;justify-self:end}
.split.top{align-items:start}

/* ---------------------------------------------------------------- buttons */
.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-wa{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 26px;border-radius:var(--r-pill);border:1px solid transparent;font-family:var(--font);font-size:15px;font-weight:var(--w-medium);line-height:1;letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:hover,.btn-primary:hover,.btn-secondary:hover,.btn-ghost:hover,.btn-wa:hover{text-decoration:none}
.btn-primary{background:var(--st-black);color:var(--st-white);border-color:var(--st-black)}
.btn-primary:hover{box-shadow:0 0 0 4px var(--st-black-a06)}
html:not(.js) .btn-primary:hover,html:not(.js) .btn-wa:hover{transform:translateY(-2px)}
.btn-secondary{background:transparent;color:var(--st-black);border-color:var(--st-black)}
.btn-secondary:hover{background:var(--st-black);color:var(--st-white)}
.btn-ghost{background:transparent;color:var(--st-black);padding:0 14px;border-color:transparent}
.btn-ghost:hover{color:var(--st-teal);background:var(--st-black-a06)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-ghost.btn-sm{padding:0 12px}
.btn-lg{height:54px;padding:0 32px;font-size:16px}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled="true"],.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn .ic,.btn-primary .ic,.btn-secondary .ic,.btn-ghost .ic{width:18px;height:18px}
.btn-arrow::after,.btn-ghost.arrow::after{content:"→";font-weight:var(--w-regular);transition:transform var(--dur) var(--ease)}
.btn-arrow:hover::after,.btn-ghost.arrow:hover::after{transform:translateX(4px)}
/* WhatsApp glyph, drawn with a mask so the fill can be set per context (BRIEF §13.7: always #25D366 on .btn-wa) */
:root{--wa-glyph:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E")}
.btn-wa::before,.wa-glyph::before{content:"";flex:none;width:18px;height:18px;-webkit-mask:var(--wa-glyph) center/contain no-repeat;mask:var(--wa-glyph) center/contain no-repeat}
.wa-glyph::before{background:currentColor}
.btn-sm.btn-wa::before{width:16px;height:16px}
/* inverted on dark bands (primary/secondary/ghost) */
.sec-dark .btn-primary,.site-footer .btn-primary{background:var(--st-white);color:var(--st-black);border-color:var(--st-white)}
.sec-dark .btn-primary:hover{box-shadow:0 0 0 4px rgba(255,255,255,.12)}
/* WhatsApp text CTAs (BRIEF §13.7, client decision 4 Sep 2026 — supersedes §11.4):
   white text on #25D366 measures 1,98:1 and fails AA, so .btn-wa is the brand button again
   (#282828 background, #FFFFFF label) and ONLY the WhatsApp glyph keeps the green. It inverts on the
   dark bands, the footer and the dark hero exactly like .btn-primary; the drawer is white, so it stays dark.
   The green survives on .fab-wa (the WhatsApp logotype) and on the glyph. */
.btn-wa,.btn-primary.btn-wa,.drawer .btn-wa{background:var(--st-black);color:var(--st-white);border-color:var(--st-black)}
.btn-wa:hover,.btn-primary.btn-wa:hover,.drawer .btn-wa:hover{background:var(--st-black);border-color:var(--st-black);color:var(--st-white);box-shadow:0 0 0 4px var(--st-black-a06)}
.btn-wa:active,.btn-primary.btn-wa:active{box-shadow:0 0 0 2px var(--st-black-a12)}
.sec-dark .btn-wa,.sec-dark .btn-primary.btn-wa,.site-footer .btn-wa,.site-footer .btn-primary.btn-wa,.s-hero--dark .btn-wa{background:var(--st-white);color:var(--st-black);border-color:var(--st-white)}
.sec-dark .btn-wa:hover,.sec-dark .btn-primary.btn-wa:hover,.site-footer .btn-wa:hover,.s-hero--dark .btn-wa:hover{background:var(--st-white);border-color:var(--st-white);color:var(--st-black);box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.sec-dark .btn-wa:active,.site-footer .btn-wa:active,.s-hero--dark .btn-wa:active{box-shadow:0 0 0 2px rgba(255,255,255,.2)}
/* the glyph is the WhatsApp logotype: always #25D366, on every button surface */
.btn-wa::before{background:var(--wa)}
/* focus ring: teal on light surfaces, cream on the near-black bands (#335C67 on #282828 is only 2,01:1) */
.btn-wa:focus-visible{outline:2px solid var(--st-teal);outline-offset:3px}
.sec-dark .btn-wa:focus-visible,.site-footer .btn-wa:focus-visible,.s-hero--dark .btn-wa:focus-visible{outline-color:var(--st-cream)}
.sec-dark .btn-secondary{color:var(--st-cream);border-color:var(--st-cream)}
.sec-dark .btn-secondary:hover{background:var(--st-cream);color:var(--st-black)}
.sec-dark .btn-ghost{color:var(--st-cream)}
.sec-dark .btn-ghost:hover{color:var(--st-white);background:rgba(255,255,255,.08)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------------------------------------------------------------- cards */
.card{position:relative;background:var(--st-white);border:1px solid var(--st-line);border-radius:var(--r);overflow:hidden;transform-style:preserve-3d}
.card:hover{transform:translateY(-3px);border-color:var(--st-gray)}
.card-pad{padding:clamp(22px,2.4vw,32px)}
.card > img:first-child,.card .card-media{width:100%;height:auto}
.card h3,.card h4{margin-bottom:8px}
.card p{color:var(--st-black)}
.card .card-foot{margin-top:auto;padding-top:var(--sp-2)}
.sec-white .card{background:var(--st-cream)}
.sec-cream .card{background:var(--st-white)}
.sec-dark .card{background:rgba(255,255,255,.04);border-color:var(--st-cream-a14);color:var(--st-cream)}
.sec-dark .card:hover{border-color:rgba(245,239,231,.4)}
.sec-dark .card p{color:var(--st-cream-a78)}
a.card{display:block;color:inherit;text-decoration:none}
a.card:hover{text-decoration:none}
.card.flat:hover{transform:none}
.card-link{position:absolute;inset:0;z-index:1;border-radius:inherit}

/* ---------------------------------------------------------------- pills · badges · stats */
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--st-line);background:var(--st-white);color:var(--st-gray-text);font-size:12px;font-weight:var(--w-medium);letter-spacing:.02em;line-height:1;white-space:nowrap}
.pill.dark{background:var(--st-black);color:var(--st-white);border-color:var(--st-black)}
.pill.teal{color:var(--st-teal);border-color:var(--st-teal-a12);background:var(--st-teal-a12)}
.sec-dark .pill{background:transparent;border-color:rgba(245,239,231,.24);color:var(--st-cream-a78)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--r-pill);background:var(--st-teal);color:var(--st-white);font-size:11px;font-weight:var(--w-medium);letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}
.badge.outline{background:transparent;color:var(--st-teal);box-shadow:inset 0 0 0 1px var(--st-teal)}
.badge.gray{background:var(--st-black);color:var(--st-white)}
.stat{display:block}
.stat .n{display:block;font-size:clamp(34px,4vw,52px);font-weight:var(--w-bold);line-height:1;letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.stat .l{display:block;margin-top:8px;font-size:var(--fs-small);font-weight:var(--w-light);color:var(--st-gray-text);line-height:1.4}
.sec-dark .stat .l{color:var(--st-cream-a60)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-4) var(--sp-3)}

/* ---------------------------------------------------------------- tabs */
.tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--st-line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:var(--sp-4)}
.tabs::-webkit-scrollbar{display:none}
.sec-dark .tabs{border-color:var(--st-cream-a14)}
.tab{flex:none;background:none;border:0;padding:14px 18px;font-size:15px;font-weight:var(--w-medium);color:var(--st-gray-text);border-radius:8px 8px 0 0;cursor:pointer;white-space:nowrap;transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.tab:hover{color:var(--st-black);background:var(--st-black-a06)}
.tab.active{color:var(--st-black)}
.tab:focus-visible{outline-offset:-3px}
.sec-dark .tab{color:var(--st-cream-a60)}
.sec-dark .tab:hover,.sec-dark .tab.active{color:var(--st-cream)}
.sec-dark .tab:hover{background:rgba(255,255,255,.06)}
.tab-panel{display:none}
.tab-panel.show{display:block}
.tabs.pills{border:0;gap:8px;overflow:visible;flex-wrap:wrap}
.tabs.pills .tab{height:40px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--st-gray-text);font-size:14px}
.tabs.pills .tab.active{background:var(--st-black);color:var(--st-white);border-color:var(--st-black)}
.tabs.pills::after{display:none}

/* ---------------------------------------------------------------- accordion */
.acc{border-top:1px solid var(--st-line)}
.acc-item{border-bottom:1px solid var(--st-line)}
.sec-dark .acc,.sec-dark .acc-item{border-color:var(--st-cream-a14)}
.acc-head{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:20px 0;margin:0;background:none;border:0;text-align:left;font-family:var(--font);font-size:17px;font-weight:var(--w-medium);line-height:1.35;color:inherit;cursor:pointer;letter-spacing:-.005em}
.acc-head:hover{color:var(--st-teal)}
.sec-dark .acc-head:hover{color:var(--st-white)}
.acc-head::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .4s var(--ease);opacity:.8}
.acc-item.open .acc-head::after,.acc-head[aria-expanded="true"]::after{transform:rotate(45deg)}
.acc-head > span:first-child{flex:1}
/* A closed panel needs visibility:hidden, not just height:0 — otherwise screen readers still read the 11 FAQ
   answers and the 4 spec groups, and the links inside a collapsed panel stay in the tab order (WCAG 1.3.1 / 2.4.3).
   .animating keeps it visible while main.js runs the height transition in either direction, so the animation is
   unchanged; the moment the transition ends the class is dropped and the panel leaves the a11y tree. */
.acc-body{height:0;overflow:hidden;visibility:hidden;transition:height .4s var(--ease)}
.acc-item.open > .acc-body,.acc-body.open{height:auto}
.acc-item.open > .acc-body,.acc-body.open,.acc-body.animating{visibility:visible}
.acc-body > *{margin-top:0}
.acc-body > :last-child{margin-bottom:22px}
.acc-body p{color:var(--st-black);font-weight:var(--w-light)}
.sec-dark .acc-body p{color:var(--st-cream-a78)}
.acc-body{padding-right:40px}
.acc-body.animating{will-change:height}
html:not(.js) .acc-body{height:auto;visibility:visible}

/* ---------------------------------------------------------------- steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;padding:24px 0;border-top:1px solid var(--st-line)}
.step:last-child{border-bottom:1px solid var(--st-line)}
.sec-dark .step{border-color:var(--st-cream-a14)}
.step .num{grid-column:1;grid-row:1 / span 9;width:44px;height:44px;border-radius:50%;border:1px solid var(--st-black);display:grid;place-items:center;font-size:15px;font-weight:var(--w-medium);font-variant-numeric:tabular-nums;line-height:1;background:var(--st-white)}
.sec-cream .step .num{background:var(--st-white)}
.sec-dark .step .num{border-color:var(--st-cream);background:transparent}
.step > *:not(.num){grid-column:2}
.step h3,.step h4{font-size:18px;font-weight:var(--w-medium);margin:10px 0 6px;letter-spacing:-.005em}
.step p{margin:0 0 10px;max-width:70ch}
.step .media,.step img{margin:6px 0 12px;max-width:560px}
.step .btn,.step .btn-ghost,.step .btn-sm{justify-self:start;margin-top:4px}
.step .note{margin-top:4px}
.steps.compact .step{padding:16px 0}
.steps.compact .step .num{width:32px;height:32px;font-size:13px}
.steps.compact .step{grid-template-columns:32px minmax(0,1fr);column-gap:16px}

/* ---------------------------------------------------------------- table */
.table-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--st-line);border-radius:var(--r);background:var(--st-white)}
.table-wrap .table{border:0;margin:0}
.table{width:100%;border-collapse:collapse;font-size:15px;text-align:left}
.table th,.table td{padding:14px 18px;border-bottom:1px solid var(--st-line);vertical-align:top}
.table th{font-size:12px;font-weight:var(--w-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--st-gray-text);background:var(--st-cream);white-space:nowrap}
.table td{font-weight:var(--w-light)}
.table td:first-child,.table th[scope="row"]{font-weight:var(--w-medium)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:rgba(245,239,231,.5)}
.table .num,.table .tnum{font-variant-numeric:tabular-nums;text-align:right}
.table .check{color:var(--st-teal);font-weight:var(--w-medium)}
.table .muted{color:var(--st-gray-text)}
.sec-dark .table-wrap{background:transparent;border-color:var(--st-cream-a14)}
.sec-dark .table th{background:rgba(255,255,255,.05);color:var(--st-cream-a60)}
.sec-dark .table th,.sec-dark .table td{border-color:var(--st-cream-a14)}
.sec-dark .table tbody tr:hover td{background:rgba(255,255,255,.03)}

/* ---------------------------------------------------------------- notes · kbd · callout · led */
.note{font-size:var(--fs-caption);font-weight:var(--w-light);color:var(--st-gray-text);line-height:1.5}
.kbd{display:inline-block;padding:1px 8px 2px;border:1px solid var(--st-gray);border-bottom-width:2px;border-radius:6px;background:var(--st-white);color:var(--st-black);font-size:.82em;font-weight:var(--w-medium);letter-spacing:.06em;line-height:1.45;vertical-align:baseline;white-space:nowrap}
.sec-dark .kbd{background:transparent;color:var(--st-cream);border-color:var(--st-cream-a60)}
.callout{position:relative;padding:18px 22px;border-left:2px solid var(--st-teal);background:var(--st-cream);border-radius:0 var(--r-md) var(--r-md) 0;font-size:15px;line-height:1.55}
.callout > :last-child{margin-bottom:0}
.callout strong,.callout b{font-weight:var(--w-medium)}
.callout .eyebrow{color:var(--st-teal);margin-bottom:6px}
.sec-cream .callout{background:var(--st-white)}
.sec-dark .callout{background:rgba(255,255,255,.05);border-left-color:var(--st-cream)}
.callout.warn{border-left-color:var(--st-black)}
.led{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);line-height:1.4}
/* the dot depicts the physical LED (BRIEF §2.1), so the hue stays; the inset ring lifts the graphic itself
   to ≥3:1 (green #2FBF5A on white is only 2,41:1 and the off state 1,81:1). Ring in brand near-black, not pure #000. */
.led-dot{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(40,40,40,.55)}
.led-dot.green,.led-dot.green-blink{background:#2FBF5A}
.led-dot.red,.led-dot.red-blink{background:#E0463F}
.led-dot.white{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--st-gray-text)}
.led-dot.off{background:var(--st-gray);box-shadow:inset 0 0 0 1px var(--st-gray-text)}
.led-dot.green-blink,.led-dot.red-blink{animation:ledBlink 1.2s step-end infinite}
.led-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.led-list li{margin:0}

/* ---------------------------------------------------------------- marquee */
.marquee{position:relative;overflow:hidden;white-space:nowrap;padding:18px 0;border-top:1px solid var(--st-line);border-bottom:1px solid var(--st-line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:inline-flex;align-items:center;width:max-content}
.marquee .track > *{display:inline-flex;align-items:center;gap:10px;padding:0 28px;font-size:14px;font-weight:var(--w-medium);letter-spacing:.02em;color:var(--st-black);margin:0}
.marquee .track > * b,.marquee .track > * strong{font-weight:var(--w-bold)}
.marquee .track > *::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--st-gray);margin-left:28px}
.sec-dark .marquee,.marquee.dark{border-color:var(--st-cream-a14)}
.sec-dark .marquee .track > *,.marquee.dark .track > *{color:var(--st-cream)}
html:not(.js) .marquee{white-space:normal}
html:not(.js) .marquee .track{flex-wrap:wrap;width:auto;justify-content:center}

/* ---------------------------------------------------------------- media · icons · figure */
.ic{display:inline-block;width:24px;height:24px;flex:none;vertical-align:middle;color:currentColor}
svg.ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-lg{width:32px;height:32px}
.ic-box{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-md);border:1px solid var(--st-line);background:var(--st-white);margin-bottom:var(--sp-2)}
.sec-dark .ic-box{background:transparent;border-color:var(--st-cream-a14)}
.media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--st-cream)}
.media img,.media video,.media picture{display:block;width:100%;height:auto}
.media.cover img,.media.cover video{height:100%;object-fit:cover}
.media.ratio-4-3{aspect-ratio:4/3}.media.ratio-16-9{aspect-ratio:16/9}.media.ratio-1{aspect-ratio:1}.media.ratio-3-4{aspect-ratio:3/4}
.media.ratio-4-3 img,.media.ratio-16-9 img,.media.ratio-1 img,.media.ratio-3-4 img,.media.ratio-4-3 video,.media.ratio-16-9 video{width:100%;height:100%;object-fit:cover}
.media.zoom img{transition:transform .8s var(--ease)}
.media.zoom:hover img,a:hover .media.zoom img,.card:hover .media.zoom img{transform:scale(1.04)}
.sec-white .media{background:var(--st-cream)}
.sec-cream .media{background:var(--st-white)}
.figure{margin:0}
.figure .media{margin-bottom:10px}
.figcaption{font-size:var(--fs-caption);font-weight:var(--w-light);color:var(--st-gray-text);line-height:1.5}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5)}
.logo-row img{height:28px;width:auto}   /* never reduce a logo's opacity (Brand Guidelines §01) */

/* ---------------------------------------------------------------- misc shared */
.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--st-teal);font-weight:var(--w-medium);font-size:15px;text-decoration:none}
.text-link:hover{text-decoration:underline}
.text-link::after{content:"→";transition:transform var(--dur) var(--ease)}
.text-link.ext::after{content:"↗"}
.text-link:hover::after{transform:translateX(3px)}
.text-link.ext:hover::after{transform:translate(2px,-2px)}
.sec-dark .text-link{color:var(--st-cream)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-caption);color:var(--st-gray-text);margin:0 0 var(--sp-3)}
.crumbs a{color:var(--st-gray-text)}
.crumbs a:hover{color:var(--st-teal)}
.crumbs [aria-current]{color:var(--st-black)}
.list-clean{list-style:none;padding:0;margin:0}
.list-clean li{margin:0}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.check-list li{position:relative;padding-left:26px;margin:0}
.check-list li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:1.6px solid var(--st-teal);border-bottom:1.6px solid var(--st-teal);transform:rotate(-45deg)}
.sec-dark .check-list li::before{border-color:var(--st-cream)}
.two-col-text{columns:2;column-gap:var(--sp-6)}
.two-col-text > *{break-inside:avoid}
.field{display:grid;gap:6px}
.field label{font-size:var(--fs-small);font-weight:var(--w-medium)}
.input,.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),.field select,.field textarea{width:100%;height:48px;padding:0 16px;border:1px solid var(--st-gray-text);border-radius:var(--r-md);background:var(--st-white);color:var(--st-black);font-size:15px;font-weight:var(--w-regular);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.field textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical;line-height:1.5}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--st-teal);box-shadow:0 0 0 3px var(--st-teal-a12);outline:none}
.input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--st-gray-text);font-weight:var(--w-light)}
.range{width:100%;height:32px;-webkit-appearance:none;appearance:none;background:transparent}
.range::-webkit-slider-runnable-track{height:2px;background:var(--st-gray);border-radius:2px}
.range::-moz-range-track{height:2px;background:var(--st-gray);border-radius:2px}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--st-black);border:2px solid var(--st-white);box-shadow:0 0 0 1px var(--st-black);margin-top:-10px;cursor:pointer}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--st-black);border:2px solid var(--st-white);box-shadow:0 0 0 1px var(--st-black);cursor:pointer}
.range:focus-visible{outline-offset:6px}

/* ---------------------------------------------------------------- utilities */
.mt-0{margin-top:0!important}.mt-1{margin-top:8px!important}.mt-2{margin-top:16px!important}.mt-3{margin-top:24px!important}.mt-4{margin-top:32px!important}.mt-5{margin-top:40px!important}.mt-6{margin-top:48px!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:8px!important}.mb-2{margin-bottom:16px!important}.mb-3{margin-bottom:24px!important}.mb-4{margin-bottom:32px!important}.mb-5{margin-bottom:40px!important}.mb-6{margin-bottom:48px!important}
.text-gray{color:var(--st-gray-text)!important}
.text-teal{color:var(--st-teal)!important}
.text-center{text-align:center}
.text-left{text-align:left}
.fw-300{font-weight:300}.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-700{font-weight:700}
.maxw-60{max-width:60ch}.maxw-70{max-width:70ch}
.flex{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hide-desktop{display:none!important}
@media (max-width:600px){.hide-mobile{display:none!important}.hide-desktop{display:revert!important}}
.no-wrap{white-space:nowrap}
.relative{position:relative}
/* bandera de pais dentro de un testimonio o caso (BRIEF 12.3) — SVG, no emoji:
   Windows no trae glifos de bandera y el emoji se ve como las letras "DK".
   Es decorativa: el pais siempre esta escrito al lado, por eso alt="" + aria-hidden. */
.flag{display:inline-block;height:11px;width:auto;aspect-ratio:4/3;vertical-align:-1px;margin:0 .18em;border-radius:1.5px;box-shadow:0 0 0 .5px rgba(40,40,40,.22)}

[tabindex="-1"]:focus-visible{outline:none}
[data-copied]{color:var(--st-teal)!important}

/* ---------------------------------------------------------------- skip link */
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;padding:10px 16px;border-radius:var(--r-pill);background:var(--st-black);color:var(--st-white);font-size:14px;font-weight:var(--w-medium)}
/* the pill sits on the white page, so the ring must be teal (7,33:1) — a white ring would be invisible */
.skip-link:focus{top:12px}
.skip-link:focus-visible{outline:2px solid var(--st-teal);outline-offset:3px}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:var(--z-header);height:var(--header-h);background:transparent;border-bottom:1px solid transparent;transition:background-color .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease)}
.site-header.scrolled,.site-header.menu-open{background:var(--st-white-a86);border-bottom-color:var(--st-line);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
.site-header.menu-open{background:var(--st-white)}
/* the header row may run wider than the 1200px content column (full-width chrome, like spottune.com) so the
   brand group + partner slot + 7 links + language + CTA fit without shrinking the logo */
.site-header .wrap{max-width:1400px}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);height:var(--header-h)}
/* brand group: Spottune logo (primary, 118px, never scaled/recoloured) · 1px rule · partner slot (BRIEF §11.3) */
.brand-group{display:flex;align-items:center;gap:16px;flex:none;min-width:0}
.brand{display:grid;align-items:center;flex:none;height:44px;border-radius:var(--r-sm)}
.brand img{grid-area:1/1;width:118px;height:30px;display:block;transition:opacity .6s var(--ease)}
.brand .brand-white{opacity:0}
.brand-rule{flex:none;width:1px;height:24px;background:var(--st-line);transition:background-color .6s var(--ease)}
.partner-slot{position:relative;display:grid;align-items:center;height:22px;flex:none;min-width:0}
.partner-slot > *{grid-area:1/1;transition:opacity .6s var(--ease)}
.partner-logo{display:grid;align-items:center;width:86px;height:20px;opacity:1}
.partner-logo img{grid-area:1/1;display:block;width:86px;height:20px;transition:opacity .6s var(--ease)}
.partner-logo .partner-white{opacity:0}
.partner-text{display:block;font-size:11px;font-weight:var(--w-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;line-height:22px;color:var(--st-black);white-space:nowrap;opacity:0;transition:opacity .6s var(--ease),color .6s var(--ease)}
.partner-slot[data-show="text"] .partner-logo{opacity:0}
.partner-slot[data-show="text"] .partner-text{opacity:1}
/* logo-only mode: not enough room for the 11px line — static Audiocity logo (main.js checks display of .partner-text).
   Measured: brand group 349 + nav 680 + CTA 219 + gaps 64 = 1312px → the cross-fade needs a 1400px viewport
   (layout width minus scrollbar minus 48px gutters = 1337px, 25px cushion). */
@media (min-width:1101px) and (max-width:1399px),(max-width:480px){
  .partner-slot{display:grid}
  .partner-slot .partner-text{display:none}
  .partner-slot .partner-logo{opacity:1!important}
}
@media (prefers-reduced-motion:reduce){
  .partner-slot .partner-logo{opacity:1!important}
  .partner-slot .partner-text{opacity:0!important}
}
.nav{display:flex;align-items:center;gap:26px;flex:1;justify-content:center;min-width:0}
.nav a{position:relative;display:inline-flex;align-items:center;height:44px;color:var(--st-black);font-size:14px;font-weight:var(--w-medium);letter-spacing:.005em;text-decoration:none;opacity:.78;transition:opacity var(--dur) var(--ease),color .6s var(--ease);white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a.active,.nav a:focus-visible{opacity:1;text-decoration:none}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.header-cta{display:flex;align-items:center;gap:14px;flex:none}
/* visible WhatsApp number, required in the desktop header by BRIEF §10.7 (partials/header.html:36).
   Below the burger breakpoint it is hidden: the number is already written out in the drawer,
   in 20-contacto and in the footer, and the mobile header row has no space for it. */
.header-phone{display:inline-flex;align-items:center;height:44px;color:var(--st-black);font-size:14px;font-weight:var(--w-medium);letter-spacing:.01em;white-space:nowrap;text-decoration:none;opacity:.78;transition:color .6s var(--ease),opacity var(--dur) var(--ease)}
.header-phone:hover{opacity:1;color:var(--st-teal);text-decoration:none}
.lang-toggle{display:inline-flex;align-items:center;height:36px;padding:3px;border:1px solid var(--st-line);border-radius:var(--r-pill);background:var(--st-white);transition:border-color .6s var(--ease),background-color .6s var(--ease)}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:var(--w-medium);letter-spacing:.06em;color:var(--st-gray-text);background:transparent;transition:background-color .6s var(--ease),color .6s var(--ease)}
.lang-btn:hover{color:var(--st-black)}
.lang-btn.active{background:var(--st-black);color:var(--st-white)}
.lang-btn:focus-visible{outline-offset:1px}
.burger{display:none;position:relative;width:44px;height:44px;border-radius:50%;flex:none;color:var(--st-black);transition:color .6s var(--ease)}

/* on-dark header state (home only, BRIEF §11.1): the transparent header sits over the dark full-bleed hero video.
   Contract with 01-hero: #hero gets class .s-hero--dark and is pulled under the header with
   margin-top:calc(-1 * var(--header-h)); padding-top:var(--header-h). main.js adds body.no-dark-hero when #hero lacks
   .s-hero--dark (fallback → normal header). Once .scrolled or .menu-open the normal white header returns (600ms). */
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .brand-dark{opacity:0}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .brand-white{opacity:1}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .brand-rule{background:rgba(255,255,255,.4)}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .partner-dark{opacity:0}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .partner-white{opacity:1}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .partner-text{color:var(--st-white)}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .nav a{color:var(--st-white);opacity:.86}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .nav a:hover,body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .nav a.active{opacity:1}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .header-phone{color:var(--st-white);opacity:.86}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .header-phone:hover{color:var(--st-white);opacity:1}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .lang-toggle{border-color:rgba(255,255,255,.4);background:transparent}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .lang-btn{color:rgba(255,255,255,.82)}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .lang-btn:hover{color:var(--st-white)}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .lang-btn.active{background:var(--st-white);color:var(--st-black)}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .header-cta .btn-primary,body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .header-cta .btn-wa{background:var(--st-white);color:var(--st-black);border-color:var(--st-white)}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .header-cta .btn-primary:hover,body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .header-cta .btn-wa:hover{background:var(--st-white);color:var(--st-black);border-color:var(--st-white);box-shadow:0 0 0 4px rgba(255,255,255,.16)}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .burger{color:var(--st-white)}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) :focus-visible{outline-color:var(--st-white)}
body.page-home:not(.no-dark-hero) .site-header:not(.scrolled):not(.menu-open) .btn-wa:focus-visible{outline-color:var(--st-white)}
.burger span{position:absolute;left:12px;width:20px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),opacity .25s var(--ease),top .35s var(--ease)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* mobile drawer (sibling of the header, see header.html) */
.drawer{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:var(--z-drawer);background:var(--st-white);overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;display:flex;flex-direction:column}
.drawer.open{visibility:visible;opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.drawer-in{display:flex;flex-direction:column;flex:1;padding:8px var(--gutter) 40px}
.drawer-nav{display:flex;flex-direction:column}
.drawer-nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:14px 0;border-bottom:1px solid var(--st-line);color:var(--st-black);font-size:20px;font-weight:var(--w-regular);letter-spacing:-.01em;text-decoration:none}
.drawer-nav a::after{content:"→";font-size:16px;color:var(--st-gray-text);transition:transform var(--dur) var(--ease)}
.drawer-nav a:hover::after{transform:translateX(4px);color:var(--st-black)}
.drawer-nav a:hover{text-decoration:none}
.drawer-nav a.active{color:var(--st-teal)}
.drawer-foot{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.drawer-foot .lang-toggle{height:44px;align-self:flex-start}
.drawer-foot .lang-btn{height:36px;min-width:52px;font-size:13px}
.drawer-foot .btn-primary{width:100%;height:52px;font-size:16px}
.drawer-contact{display:grid;gap:6px;font-size:var(--fs-small);color:var(--st-gray-text)}
.drawer-contact a{color:var(--st-black);font-weight:var(--w-regular)}
.drawer-contact .eyebrow{margin-bottom:4px}

/* 1101–1299: everything still on one row (logo-only partner slot) — tighten the gaps
   (measured at 1101: brand 227 + nav 556 + CTA 213 + gaps 32 = 1028px of 1038px available;
   from 1300 the normal gaps fit: 229 + 680 + 219 + 64 = 1192px of 1237px) */
@media (min-width:1101px) and (max-width:1299px){
  .header-in{gap:16px}
  .brand-group{gap:12px}
  .nav{gap:12px}
  .nav a{font-size:13px}
  .header-cta{gap:8px}
  .header-phone{font-size:13px}
}
@media (max-width:1100px){
  /* Client decision (round 5): below the burger breakpoint the header keeps the language toggle — it must be
     reachable on every viewport — and drops the WhatsApp button; the floating FAB and the drawer already carry
     WhatsApp, so a second green target in the header was redundant. */
  .nav,.header-cta .header-phone,.header-cta .btn-primary:not(.btn-wa),.header-cta .btn-wa{display:none}
  .burger{display:inline-block}
  .header-cta{gap:8px}
  .header-cta .lang-toggle{display:inline-flex}
}
/* phones: the language toggle stays, but compact enough to leave the brand lock-up and the burger room */
@media (max-width:520px){
  .header-cta .lang-toggle{height:40px;padding:2px}
  .header-cta .lang-btn{height:36px;min-width:40px;padding:0 8px;font-size:12px}
  .header-in{gap:12px}
}
@media (min-width:1101px){.drawer{display:none}}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--st-black);color:var(--st-cream);padding:clamp(56px,7vw,88px) 0 28px;font-size:var(--fs-small)}
.site-footer a{color:var(--st-cream-a78);text-decoration:none;transition:color var(--dur) var(--ease)}
.site-footer a:hover{color:var(--st-white);text-decoration:underline}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);padding-bottom:var(--sp-5);border-bottom:1px solid var(--st-cream-a14)}
/* alliance lockup (BRIEF §11.2): both logos in white, side by side, same optical height, 1px vertical rule between */
.footer-brands{display:flex;align-items:center;gap:18px;flex:none}
.footer-brands .brand img{width:118px;height:30px}
.footer-brands .brand-rule{height:28px;background:rgba(255,255,255,.3)}
.footer-partner{display:block;width:112px;height:26px;flex:none}
.footer-tagline{margin:0;font-size:var(--fs-small);color:var(--st-cream-a60);max-width:52ch}
.footer-hours{display:block;margin-top:8px;font-size:var(--fs-caption);color:var(--st-cream-a60);line-height:1.5}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
.footer-legal a,.footer-legal button{display:inline-block;padding:2px 0;font-family:var(--font);font-size:var(--fs-caption);font-weight:var(--w-light);line-height:1.55;color:var(--st-cream-a78);background:none;border:0;text-decoration:none;cursor:pointer;transition:color var(--dur) var(--ease)}
.footer-legal a:hover,.footer-legal button:hover{color:var(--st-white);text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5) var(--sp-4);padding:var(--sp-6) 0}
.footer-col{min-width:0}
.footer-title{display:block;margin:0 0 var(--sp-2);font-size:var(--fs-eyebrow);font-weight:var(--w-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--st-cream-a60)}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-links li{margin:0;line-height:1.45}
.footer-links a{display:inline-block;padding:2px 0}
.footer-links .ext::after{content:" ↗";font-size:.85em;opacity:.7}
.footer-address{margin:0;color:var(--st-cream-a78);line-height:1.5}
.footer-address a{display:inline-block;margin-top:2px}
.footer-bottom{display:grid;gap:10px;padding-top:var(--sp-3);border-top:1px solid var(--st-cream-a14);font-size:var(--fs-caption);color:var(--st-cream-a60);font-weight:var(--w-light);line-height:1.55}
.footer-bottom p{margin:0}
.footer-bottom a{color:var(--st-cream-a78)}
.footer-socials{display:flex;flex-wrap:wrap;gap:8px 18px}

/* ---------------------------------------------------------------- WhatsApp FAB (permanent, BRIEF §10.7 + §13.7)
   WhatsApp-green circle, white glyph, 56px, bottom-right 24px (16px ≤600px), on every page and viewport,
   z-index above content and the cookie banner, below the mobile drawer. Never hidden on scroll.
   It is the WhatsApp logotype: the ONLY place on the site that keeps #25D366 as a surface. */
.fab-wa{position:fixed;right:24px;bottom:24px;z-index:var(--z-fab);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--wa);color:var(--st-white);box-shadow:var(--elev);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color var(--dur) var(--ease)}
.fab-wa:hover,.fab-wa:focus-visible{background:var(--wa-hover);transform:translateY(-3px);box-shadow:var(--elev-hi);text-decoration:none}
/* the FAB floats over white, cream AND near-black bands, so no single ring colour works: a near-black ring
   next to the green (7,43:1) plus a white halo outside it (14,74:1 on the dark bands). One of the two always reads. */
.fab-wa:focus-visible{outline:2px solid var(--st-black);outline-offset:2px;box-shadow:0 0 0 6px var(--st-white),var(--elev-hi)}
.fab-wa svg{width:28px;height:28px;fill:currentColor}
.fab-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);padding:8px 14px;border-radius:var(--r-pill);background:var(--st-white);color:var(--st-black);border:1px solid var(--st-line);font-size:13px;font-weight:var(--w-medium);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);box-shadow:var(--elev)}
.fab-wa:hover .fab-tip,.fab-wa:focus-visible .fab-tip{opacity:1;transform:translate(0,-50%)}
@media (hover:none){.fab-tip{display:none}}
@media (max-width:600px){.fab-wa{right:16px;bottom:16px}}

/* ---------------------------------------------------------------- back-to-top FAB
   Same circle as the WhatsApp FAB, stacked directly above it, brand palette (never the WhatsApp green).
   Shown only once the page has scrolled past the hero band (main.js toggles [hidden]). */
.fab-top{position:fixed;right:24px;bottom:92px;z-index:var(--z-fab);display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--st-black);color:var(--st-white);box-shadow:var(--elev);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color var(--dur) var(--ease)}
.fab-top:hover,.fab-top:focus-visible{background:var(--st-teal);transform:translateY(-3px);box-shadow:var(--elev-hi)}
.fab-top:focus-visible{outline:2px solid var(--st-black);outline-offset:2px;box-shadow:0 0 0 6px var(--st-white),var(--elev-hi)}
.fab-top svg{width:22px;height:22px}
.fab-top:hover .fab-tip,.fab-top:focus-visible .fab-tip{opacity:1;transform:translate(0,-50%)}
@media (max-width:600px){.fab-top{right:16px;bottom:84px}}

/* ---------------------------------------------------------------- toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:var(--z-toast);transform:translate(-50%,12px);padding:12px 18px;border-radius:var(--r-pill);background:var(--st-black);color:var(--st-white);font-size:14px;font-weight:var(--w-medium);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:calc(100vw - 32px);text-overflow:ellipsis;overflow:hidden}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split.reverse{grid-template-columns:minmax(0,1fr)}
  .split .split-media,.split.reverse .split-media{order:-1}
  .split .split-body,.split.reverse .split-body{order:0;justify-self:start;max-width:none}
  .sec-head{margin-bottom:var(--sp-5)}
  .two-col-text{columns:1}
  .table th,.table td{padding:12px 14px}
}
@media (max-width:600px){
  :root{--gutter:20px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .footer-top{flex-direction:column}
  .sec-head{padding-bottom:var(--sp-3);margin-bottom:var(--sp-4)}
  .lead{font-size:17px}
  .step{grid-template-columns:36px minmax(0,1fr);column-gap:14px}
  .step .num{width:36px;height:36px;font-size:14px}
  .acc-head{font-size:16px;padding:16px 0}
  .acc-body{padding-right:0}
  .tab{padding:12px 14px;font-size:14px}
  .btn-row .btn,.btn-row .btn-primary,.btn-row .btn-secondary{flex:1 1 auto;min-width:0}
  .marquee .track > *{font-size:13px;padding:0 18px}
  .marquee .track > *::after{margin-left:18px}
}
/* ---------------------------------------------------------------- touch targets (WCAG 2.5.5)
   Coarse pointers only: every small control of the §4.3 contract gets a 44px hit area.
   Fine-pointer desktop keeps the compact sizes. */
@media (pointer:coarse){
  .btn-sm{height:44px}
  .btn-ghost.btn-sm{padding:0 14px}
  .header-cta .btn-wa{width:44px;height:44px}
  .lang-toggle,.drawer-foot .lang-toggle{height:52px}
  .lang-btn,.drawer-foot .lang-btn{height:44px;min-width:48px}
  .tab{min-height:44px}
  .tabs.pills .tab{height:44px}
  .acc-head{min-height:44px}
  .range{height:44px}
  .text-link{min-height:44px}
  .crumbs{gap:0 12px}
  .crumbs a,.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px}
  .footer-links{gap:0}
  .footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .footer-legal{gap:0 22px}
  .footer-legal a,.footer-legal button{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .footer-socials{gap:0 18px}
  .footer-socials a{display:inline-flex;align-items:center;min-height:44px}
  .footer-address a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:420px){
  :root{--gutter:16px}
  .btn,.btn-primary,.btn-secondary,.btn-wa{padding:0 20px;font-size:14px}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn,.btn-row .btn-primary,.btn-row .btn-secondary,.btn-row .btn-ghost{width:100%}
  .stats{grid-template-columns:minmax(0,1fr)}
  /* the Spottune × Audiocity lock-up stays on phones too (client decision, round 5): the rule and the
     partner logo shrink instead of disappearing, so the alliance reads the same as on desktop. */
  .brand-group{gap:10px}
  .brand img{width:100px;height:25px}
  .brand-rule{height:20px}
  .partner-logo,.partner-logo img{width:70px;height:16px}
  .drawer-nav a{font-size:18px;min-height:52px}
}