:root {
  --ink: #120b17;
  --ink-2: #201027;
  --paper: #f6f0e8;
  --paper-2: #ebe2d5;
  --pink: #ff3d91;
  --pink-2: #ff76b6;
  --lime: #6df0a6;
  --yellow: #ffd84d;
  --blue: #77d8ff;
  --white: #fffdf9;
  --muted: #b5a9ba;
  --line: rgba(255,255,255,.14);
  --shadow: 0 28px 70px rgba(18, 6, 23, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; }
a { color: inherit; }

.reading-progress { position: fixed; inset: 0 0 auto; z-index: 100; height: 4px; background: rgba(255,255,255,.12); }
.reading-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--pink), var(--yellow), var(--lime)); }

.ticker { background: var(--lime); color: var(--ink); border-bottom: 2px solid var(--ink); overflow: hidden; }
.ticker__track { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.ticker__set { display: flex; align-items: center; gap: 22px; padding: 9px 11px; white-space: nowrap; font: 22px "Bebas Neue", sans-serif; letter-spacing: .05em; }
.ticker i { color: var(--pink); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.site-header { position: relative; z-index: 20; min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1240px; margin: auto; padding: 14px 28px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 168px; height: auto; }
.brand span { padding-left: 12px; border-left: 1px solid rgba(18,11,23,.25); font: 18px "Permanent Marker", cursive; }
nav { display: flex; align-items: center; gap: 22px; font-weight: 800; font-size: 13px; text-transform: uppercase; }
nav a { text-decoration: none; }
.nav-cta { padding: 12px 17px; color: white; background: var(--pink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }

.section-wide { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section-narrow { width: min(820px, calc(100% - 40px)); margin: 0 auto; }
.section-count { font: 22px "Bebas Neue", sans-serif; letter-spacing: .12em; color: var(--pink); }
.marker { margin: 8px 0 12px; color: var(--ink); font: 22px "Permanent Marker", cursive; transform: rotate(-1deg); }

main { display: flex; flex-direction: column; }
main > .hero { order: 1; }
main > .reel-bridge { order: 2; }
main > .panic { order: 3; }
main > .proof { order: 4; }
main > .simulator { order: 5; }
main > .montse-story { order: 6; }
main > .scanner { order: 7; }
main > .mid-cta { order: 8; }
main > .plan { order: 9; }
main > .safety { order: 10; }
main > .final-cta { order: 11; }
.marker--pink { color: var(--pink-2); }
.marker--lime { color: var(--lime); }
.marker--yellow { color: #c69700; }
.eyebrow { display: inline-block; padding: 7px 10px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); font-weight: 900; font-size: 12px; letter-spacing: .11em; transform: rotate(-1deg); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 { margin: 18px 0 16px; font: clamp(70px, 8.6vw, 126px)/.78 "Bebas Neue", sans-serif; letter-spacing: -.035em; }
h1 em { color: var(--pink); font-style: normal; text-shadow: 4px 4px 0 var(--ink); -webkit-text-stroke: 2px var(--ink); }
h2 { margin-bottom: 18px; font: clamp(46px, 6vw, 78px)/.9 "Bebas Neue", sans-serif; letter-spacing: -.02em; }
h2 span { color: var(--pink); }
h3 { font: 34px/.95 "Bebas Neue", sans-serif; letter-spacing: .01em; }
p { font-size: 17px; line-height: 1.55; }

.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button-row--center { justify-content: center; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 13px 18px; border: 2px solid currentColor; text-decoration: none; text-align: center; font: 22px "Bebas Neue", sans-serif; letter-spacing: .035em; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.button:hover { transform: translate(-2px,-2px); }
.button--pink { color: white; background: var(--pink); border-color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.button--lime { color: var(--ink); background: var(--lime); border-color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.button--ghost { color: var(--ink); background: transparent; }
.text-link { display: inline-block; margin-top: 6px; color: var(--pink); font: 25px "Bebas Neue", sans-serif; letter-spacing: .03em; }

.hero { min-height: 720px; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 54px; padding: 60px 0 100px; }
.hero__lead { max-width: 570px; margin-bottom: 12px; font: 34px/1.02 "Bebas Neue", sans-serif; }
.hero__truth { max-width: 610px; font-weight: 600; }
.hero__truth--hit { margin-top: -6px; padding-left: 13px; border-left: 4px solid var(--pink); font-weight: 800; }
.trust-line { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.trust-line span { padding: 7px 10px; border: 1px solid rgba(18,11,23,.25); border-radius: 99px; font-size: 12px; font-weight: 800; }

.hero-deck { position: relative; min-height: 610px; }
.belly-photo { position: absolute; width: 43%; padding: 0; background: var(--ink); border: 3px solid var(--ink); box-shadow: 12px 14px 0 rgba(18,11,23,.16); cursor: pointer; overflow: hidden; transition: .35s cubic-bezier(.2,.8,.2,1); }
.belly-photo::after { content: "TOCA"; position: absolute; z-index: 3; top: 8px; right: 8px; padding: 5px 8px; color: var(--ink); background: var(--lime); border: 2px solid var(--ink); font: 15px "Bebas Neue", sans-serif; letter-spacing: .06em; animation: tapPulse 1.7s ease-in-out infinite; }
.belly-photo img { height: 390px; object-fit: cover; filter: saturate(.86) contrast(1.03); }
.belly-photo span { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; color: white; text-align: left; font: 19px/1 "Bebas Neue", sans-serif; }
.belly-photo b { color: var(--yellow); }
.belly-photo:nth-child(1) { left: 4%; top: 14px; transform: rotate(-5deg); }
.belly-photo:nth-child(2) { right: 3%; top: 66px; transform: rotate(5deg); }
.belly-photo:nth-child(3) { left: 28%; top: 170px; transform: rotate(-1deg); }
.belly-photo.is-active { z-index: 4; transform: translateY(-14px) rotate(0) scale(1.07); box-shadow: 14px 18px 0 var(--pink); }
.belly-photo.is-active::after { content: "MIRA ESTA"; color: white; background: var(--pink); animation: none; }
.hero-deck.has-selection .belly-photo.is-active::after { content: "PULSADA ✓"; }
.deck-caption { position: absolute; z-index: 7; left: 2%; right: 0; bottom: 0; max-width: 520px; padding: 20px 22px; color: white; background: var(--ink); border: 2px solid var(--paper); box-shadow: 7px 7px 0 var(--yellow); }
.deck-caption span { color: var(--lime); font: 24px "Bebas Neue", sans-serif; }
.deck-caption p { margin: 4px 0 0; font-weight: 700; line-height: 1.35; }
.sticker { position: absolute; z-index: 8; top: -22px; right: -14px; padding: 14px 17px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font: 19px "Permanent Marker", cursive; transform: rotate(5deg); }
.sticker i { display: inline-block; width: 11px; height: 11px; margin-right: 4px; background: var(--pink); border-radius: 50%; box-shadow: 0 0 0 0 rgba(255,61,145,.5); animation: ripple 1.4s infinite; }
.selection-flag { position: absolute; z-index: 9; left: 50%; top: 90px; padding: 8px 11px; color: white; background: var(--pink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 16px "Bebas Neue", sans-serif; letter-spacing: .05em; opacity: 0; transform: translate(-50%,-8px); pointer-events: none; transition: .25s; }
.selection-flag.is-visible { opacity: 1; transform: translate(-50%,0); }

.reel-bridge { padding: 95px 0 115px; text-align: center; }
.bridge-kicker { max-width: 680px; margin: 0 auto 24px; padding: 13px 16px; color: white; background: var(--pink); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); font-weight: 900; transform: rotate(-1deg); }
.brain-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.brain-line span { padding: 9px 12px; background: var(--ink); color: white; font: 20px "Bebas Neue", sans-serif; }
.brain-line i { color: var(--pink); font-style: normal; font-weight: 900; }

.panic { padding: 96px 60px; color: white; background: var(--ink); border-radius: 36px; box-shadow: var(--shadow); }
.section-heading { max-width: 880px; margin-bottom: 38px; }
.section-heading > p:last-child { max-width: 700px; color: inherit; }
.panic .section-count, .scanner .section-count, .proof .section-count, .plan .section-count { color: var(--yellow); }
.panic h2 span, .scanner h2 span, .proof h2 span, .plan h2 span { color: var(--lime); }
.panic-game { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
.panic-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panic-options button { min-height: 158px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; color: white; background: #2a1531; border: 1px solid var(--line); text-align: left; cursor: pointer; transition: .2s; }
.panic-options button:hover { border-color: var(--pink); transform: translateY(-3px); }
.panic-options button.is-hit { color: var(--ink); background: var(--yellow); border-color: var(--ink); box-shadow: 6px 6px 0 var(--pink); }
.panic-options button.is-hit b { text-decoration: line-through 3px var(--pink); }
.panic-options span { font-size: 33px; }
.panic-options b { font: 25px/1 "Bebas Neue", sans-serif; }
.panic-options small { font-weight: 700; line-height: 1.35; opacity: .78; }
.panic-console { min-height: 374px; display: flex; flex-direction: column; justify-content: center; padding: 30px; background: #09050d; border: 1px solid var(--pink); position: relative; overflow: hidden; }
.panic-console::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(109,240,166,.025) 6px); pointer-events: none; }
.console-top { position: absolute; inset: 15px 18px auto; display: flex; align-items: center; gap: 8px; color: var(--lime); font: 14px "Bebas Neue", sans-serif; letter-spacing: .08em; }
.console-top i, .lab-status i, .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 15px var(--lime); animation: blink 1.2s infinite; }
.panic-score strong { color: var(--pink); font: 80px/.7 "Bebas Neue", sans-serif; }
.panic-score small { margin-left: 7px; color: var(--muted); font-weight: 800; }
.panic-console h3 { margin: 24px 0 8px; color: var(--yellow); }
.panic-console p { color: #d8cddd; }
.panic-meter { height: 8px; background: rgba(255,255,255,.1); }
.panic-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--pink),var(--yellow)); transition: width .35s; }

.scanner { margin-top: 90px; padding: 90px 60px; color: white; background: linear-gradient(145deg, #23102c, #100813 58%); border-radius: 36px; box-shadow: var(--shadow); }
.scanner-app { overflow: hidden; border: 1px solid rgba(109,240,166,.45); background: #0a060c; box-shadow: 0 0 45px rgba(109,240,166,.08); }
.app-topbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--muted); font: 14px "Bebas Neue", sans-serif; letter-spacing: .1em; }
.app-topbar div { display: flex; align-items: center; gap: 8px; color: var(--lime); }
.scan-progress { height: 5px; background: rgba(255,255,255,.08); }
.scan-progress span { display: block; width: 20%; height: 100%; background: linear-gradient(90deg,var(--pink),var(--yellow),var(--lime)); transition: width .4s; }
.scanner-layout { display: grid; grid-template-columns: 1.12fr .88fr; min-height: 590px; }
.scan-questions { position: relative; padding: 40px; border-right: 1px solid var(--line); }
.question-tag { color: var(--pink-2); font: 17px "Bebas Neue", sans-serif; letter-spacing: .08em; }
.scan-screen h3 { max-width: 580px; margin: 12px 0 26px; font-size: 44px; }
.scan-screen button { width: 100%; min-height: 76px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; margin-bottom: 10px; padding: 12px 16px; color: white; background: #211228; border: 1px solid var(--line); text-align: left; cursor: pointer; transition: .18s; }
.scan-screen button b { font-size: 26px; text-align: center; }
.scan-screen button span { font-weight: 800; line-height: 1.3; }
.scan-screen button:hover, .scan-screen button.is-selected { color: var(--ink); background: var(--lime); border-color: var(--lime); transform: translateX(5px); }
.scan-actions { position: absolute; left: 40px; right: 40px; bottom: 35px; display: flex; justify-content: space-between; gap: 12px; }
.scan-actions button { min-width: 120px; min-height: 43px; color: white; background: transparent; border: 1px solid var(--line); font: 19px "Bebas Neue", sans-serif; cursor: pointer; }
.scan-actions button:disabled { opacity: .25; cursor: not-allowed; }
.scan-next:not(:disabled) { color: var(--ink)!important; background: var(--pink)!important; border-color: var(--pink)!important; }
.belly-lab { position: relative; min-height: 590px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 28px; text-align: center; overflow: hidden; }
.lab-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(109,240,166,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(109,240,166,.3) 1px,transparent 1px); background-size: 28px 28px; }
.belly-core { --core: 126px; position: relative; z-index: 2; width: var(--core); height: calc(var(--core)*.8); display: grid; place-items: center; margin-bottom: 34px; border-radius: 48% 52% 45% 55%; background: radial-gradient(circle at 38% 30%,var(--yellow),var(--pink) 46%,#621047 72%); box-shadow: 0 0 70px rgba(255,61,145,.4); transition: .5s cubic-bezier(.2,.8,.2,1); animation: breathe 3.2s ease-in-out infinite; }
.belly-core span { color: white; font: 40px "Bebas Neue", sans-serif; text-shadow: 2px 2px var(--ink); }
.orbit { position: absolute; inset: -20px; border: 1px solid rgba(109,240,166,.45); border-radius: 50%; animation: orbit 7s linear infinite; }
.orbit--2 { inset: -40px; animation-duration: 11s; animation-direction: reverse; }
.orbit--3 { inset: -58px; animation-duration: 16s; }
.orbit::after { content: ""; position: absolute; width: 7px; height: 7px; top: 12%; left: 12%; border-radius: 50%; background: var(--lime); box-shadow: 0 0 13px var(--lime); }
.lab-status { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; color: var(--lime); font: 15px "Bebas Neue", sans-serif; letter-spacing: .08em; }
.belly-lab h3 { position: relative; z-index: 2; max-width: 420px; margin: 13px 0 8px; color: var(--yellow); }
.belly-lab p { position: relative; z-index: 2; max-width: 420px; color: #cfc2d2; font-size: 15px; }
.lab-paths { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.lab-paths span { padding: 6px 8px; border: 1px solid var(--line); color: #776c7c; font: 13px "Bebas Neue", sans-serif; }
.lab-paths span.is-active { color: var(--ink); background: var(--lime); border-color: var(--lime); box-shadow: 0 0 14px rgba(109,240,166,.35); }
.scan-result { padding: 46px 34px 50px; text-align: center; background: linear-gradient(135deg,rgba(255,61,145,.12),rgba(109,240,166,.08)); border-top: 1px solid var(--line); }
.result-stamp { display: inline-block; padding: 6px 9px; color: var(--ink); background: var(--lime); font-weight: 900; transform: rotate(-2deg); }
.scan-result > p:first-of-type { margin: 20px 0 4px; color: var(--muted); font: 18px "Bebas Neue", sans-serif; letter-spacing: .12em; }
.scan-result h2 { margin: 0; color: var(--yellow); font-size: clamp(60px,8vw,100px); }
.result-hit { max-width: 720px; margin: 8px auto 30px; font: 25px "Permanent Marker", cursive; color: var(--pink-2); }
.result-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; text-align: left; }
.result-columns article { padding: 20px; background: rgba(0,0,0,.32); border: 1px solid var(--line); }
.result-columns span { color: var(--lime); font: 17px "Bebas Neue", sans-serif; letter-spacing: .06em; }
.result-columns p { margin: 8px 0 0; color: #e6dfe8; font-size: 14px; }
.secondary-profile { display: inline-block; margin: 18px 0 22px; padding: 9px 13px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 800; }
.secondary-profile strong { color: var(--pink-2); }
.scan-result .button--ghost { color: white; }

.proof { padding: 105px 0 80px; }
.proof .section-heading { margin-left: auto; margin-right: auto; text-align: center; }
.proof .section-heading p:last-child { margin-left: auto; margin-right: auto; }
.case-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 26%); gap: 14px; overflow-x: auto; padding: 14px 8px 25px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.case-gallery::-webkit-scrollbar { display: none; }
.case-gallery figure { position: relative; margin: 0; scroll-snap-align: start; background: var(--ink); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--pink); overflow: hidden; }
.case-gallery img { height: 380px; object-fit: cover; }
.case-gallery figcaption { position: absolute; inset: auto 8px 8px; display: inline-block; width: max-content; padding: 7px 10px; color: var(--ink); background: var(--yellow); font: 21px "Bebas Neue", sans-serif; }
.case-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; font: 16px "Bebas Neue", sans-serif; letter-spacing: .06em; }
.case-controls button { width: 42px; height: 42px; border: 2px solid var(--ink); background: var(--paper); font-size: 20px; cursor: pointer; }
.proof-bridge { max-width: 880px; margin: 48px auto 0; padding: 30px; color: white; background: var(--ink); border: 2px solid var(--ink); box-shadow: 9px 9px 0 var(--lime); text-align: center; }
.proof-bridge > span { color: var(--yellow); font: 17px "Bebas Neue", sans-serif; letter-spacing: .1em; }
.proof-bridge h3 { margin: 8px 0; color: var(--pink-2); font-size: 42px; }
.proof-bridge p { max-width: 680px; margin: 0 auto 22px; color: #e6dee8; }
.proof-bridge .button--ghost { color: white; }

.simulator { display: grid; grid-template-columns: 1fr .8fr; gap: 44px; align-items: center; padding: 85px 70px; background: var(--yellow); border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); }
.simulator h2 span { color: var(--pink); }
.day-tabs { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; margin-top: 28px; }
.day-tabs button { min-height: 48px; padding: 5px; color: var(--ink); background: transparent; border: 2px solid var(--ink); font: 18px "Bebas Neue", sans-serif; cursor: pointer; transition: .2s; }
.day-tabs button.is-active { color: white; background: var(--pink); box-shadow: 3px 3px 0 var(--ink); transform: translateY(-3px); }
.jeans-lab { --gap: 0px; --belly-scale: .92; min-height: 510px; padding: 22px; color: white; background: var(--ink); text-align: center; border: 1px solid rgba(255,255,255,.16); overflow: hidden; }
.jeans-topline { display: flex; align-items: center; justify-content: space-between; color: var(--lime); font: 17px "Bebas Neue", sans-serif; letter-spacing: .07em; }
.jeans-topline strong { color: var(--yellow); font-size: 35px; }
.jeans-scene { position: relative; width: min(100%,360px); height: 285px; margin: 10px auto 4px; overflow: hidden; background: radial-gradient(circle at 50% 30%,rgba(255,61,145,.18),transparent 54%); }
.skin-belly { position: absolute; z-index: 1; top: 15px; left: 50%; width: 235px; height: 230px; transform: translateX(-50%) scaleX(var(--belly-scale)); transform-origin: 50% 100%; border-radius: 45% 45% 52% 52%; background: radial-gradient(circle at 42% 24%,#efbf9e,#cb876d 66%,#9a5a4c); box-shadow: inset -18px -10px 34px rgba(89,31,33,.3),0 0 36px rgba(255,61,145,.18); transition: transform .45s; }
.skin-belly::after { content: ""; position: absolute; left: 50%; top: 137px; width: 10px; height: 6px; transform: translateX(-50%); border-radius: 50%; background: rgba(101,50,44,.38); }
.skin-belly i { position: absolute; inset: 60px 34px auto; height: 75px; border-radius: 50%; border-bottom: 1px solid rgba(107,51,45,.22); }
.jeans-waist { position: absolute; z-index: 3; bottom: 18px; width: calc(50% - 7px); height: 105px; background: repeating-linear-gradient(83deg,#214d79 0 4px,#285c8b 5px 8px); border-top: 9px solid #173a5d; box-shadow: inset 0 4px 0 #b98e4d; transition: transform .45s; }
.jeans-waist::after { content: ""; position: absolute; inset: 15px 10px auto; height: 2px; border-top: 2px dashed #d4a657; }
.jeans-waist--left { left: 0; transform: translateX(calc(var(--gap) * -1)); clip-path: polygon(0 0,100% 0,96% 100%,0 100%); }
.jeans-waist--right { right: 0; transform: translateX(var(--gap)); clip-path: polygon(0 0,100% 0,100% 100%,4% 100%); }
.metal-button { position: absolute; z-index: 5; top: -8px; right: -3px; width: 22px; height: 22px; border: 3px solid #805d29; border-radius: 50%; background: radial-gradient(circle,#f4d189 0 25%,#aa7a34 29% 65%,#4f3518 70%); box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.button-hole { position: absolute; top: -1px; left: 2px; width: 28px; height: 6px; border-radius: 5px; border: 2px solid #e5b65f; transform: rotate(-3deg); }
.zipper { position: absolute; z-index: 4; left: 50%; bottom: 24px; display: flex; flex-direction: column; gap: 4px; transform: translateX(-50%); }
.zipper i { display: block; width: 13px; height: 4px; background: #d0a65f; box-shadow: 0 0 3px #000; }
.gap-ruler { position: absolute; z-index: 7; left: 50%; bottom: 130px; width: calc(30px + (var(--gap) * 2)); height: 34px; transform: translateX(-50%); border-left: 2px solid var(--pink); border-right: 2px solid var(--pink); transition: width .45s; }
.gap-ruler::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; border-top: 2px dashed var(--pink); }
.gap-ruler span { position: absolute; left: 50%; top: -19px; min-width: 55px; transform: translateX(-50%); color: var(--pink-2); font: 16px "Bebas Neue", sans-serif; }
.inside-signals { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.inside-signals span { padding: 5px 7px; color: #756a79; border: 1px solid #403544; font: 12px "Bebas Neue", sans-serif; letter-spacing: .05em; transition: .25s; }
.inside-signals span.is-active { color: var(--ink); background: var(--lime); border-color: var(--lime); box-shadow: 0 0 16px rgba(109,240,166,.35); }
.jeans-lab > p { margin: 5px 0; color: var(--yellow); font: 29px "Bebas Neue", sans-serif; }
.jeans-lab > small { display: block; max-width: 390px; margin: auto; color: #d8cfdc; line-height: 1.45; }

.mid-cta { width: min(1000px,calc(100% - 40px)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 25px; margin: 110px auto; padding: 34px; background: var(--pink); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.mid-cta span { font: 18px "Bebas Neue", sans-serif; }
.mid-cta h2 { margin: 4px 0 8px; font-size: 52px; }
.mid-cta p { margin: 0; font-weight: 700; }

.plan { padding: 90px 60px; color: white; background: var(--ink); border-radius: 36px; }
.mission-rules { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -8px 0 26px; padding: 14px; background: #291630; border: 1px solid var(--line); }
.mission-rules span { display: flex; align-items: center; gap: 6px; color: white; font: 17px "Bebas Neue", sans-serif; }
.mission-rules b { width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 50%; }
.mission-rules i { color: var(--pink-2); font-style: normal; }
.plan-app { display: grid; grid-template-columns: 130px 190px 1fr .75fr; gap: 12px; }
.plan-progress { display: flex; flex-direction: column; justify-content: center; padding: 18px; text-align: center; border: 1px solid var(--line); }
.plan-progress > span { color: var(--yellow); font: 56px "Bebas Neue", sans-serif; }
.plan-progress div { height: 190px; width: 14px; display: flex; align-items: flex-end; margin: 15px auto; background: rgba(255,255,255,.1); }
.plan-progress i { display: block; width: 100%; height: 0; background: linear-gradient(0deg,var(--pink),var(--yellow),var(--lime)); transition: height .4s; }
.plan-progress small { color: var(--muted); font-weight: 900; }
.mission-picker { display: grid; gap: 6px; }
.mission-picker button { display: grid; grid-template-columns: 31px 1fr 22px; align-items: center; gap: 6px; min-height: 53px; padding: 7px; color: white; background: #291630; border: 1px solid var(--line); text-align: left; cursor: pointer; }
.mission-picker button b { display: grid; place-items: center; width: 28px; height: 28px; color: var(--ink); background: var(--pink-2); border-radius: 50%; font: 18px "Bebas Neue", sans-serif; }
.mission-picker button span { font: 16px "Bebas Neue", sans-serif; letter-spacing: .04em; }
.mission-picker button i { color: transparent; font-style: normal; }
.mission-picker button.is-active { color: var(--ink); background: var(--yellow); border-color: var(--yellow); box-shadow: 4px 4px 0 var(--pink); }
.mission-picker button.is-done i { color: var(--lime); }
.mission-picker button.is-active.is-done i { color: var(--ink); }
.mission-console { display: flex; flex-direction: column; justify-content: center; min-height: 420px; padding: 28px; background: #190d1e; border: 1px solid var(--pink); }
.mission-profile { align-self: flex-start; margin-bottom: 14px; padding: 6px 8px; color: var(--ink); background: var(--lime); font: 13px "Bebas Neue", sans-serif; letter-spacing: .05em; }
.mission-console > span { color: var(--lime); font: 17px "Bebas Neue", sans-serif; letter-spacing: .08em; }
.mission-console h3 { margin: 10px 0; color: var(--pink-2); font-size: 38px; }
.mission-console p { color: #d8cddd; font-size: 14px; }
.mission-profile-hint { margin: 2px 0 10px; padding: 12px; color: var(--yellow)!important; background: rgba(255,216,77,.08); border-left: 3px solid var(--yellow); font-weight: 800; }
.mission-action { margin: 12px 0 18px; padding: 16px; color: var(--ink); background: var(--yellow); }
.mission-action small { display: block; font: 14px "Bebas Neue", sans-serif; letter-spacing: .06em; }
.mission-action strong { display: block; margin-top: 5px; line-height: 1.35; }
.mission-done { min-height: 48px; padding: 10px; color: white; background: transparent; border: 2px solid var(--lime); font: 19px "Bebas Neue", sans-serif; cursor: pointer; }
.mission-done.is-done { color: var(--ink); background: var(--lime); }
.plan-reward { display: flex; flex-direction: column; justify-content: center; padding: 28px; color: var(--ink); background: var(--yellow); }
.plan-reward > span { font: 17px "Bebas Neue", sans-serif; letter-spacing: .06em; }
.plan-reward h3 { margin: 14px 0 8px; font-size: 38px; }
.plan-reward p { font-weight: 700; }
.is-hidden { display: none!important; }

.safety { margin-top: 100px; padding: 48px; background: #e7ded0; border-left: 8px solid var(--pink); }
.safety h2 { font-size: 48px; }
.montse-story { display: grid; grid-template-columns: .65fr 1fr; align-items: center; gap: 70px; margin-top: 95px; padding: 70px; color: white; background: linear-gradient(135deg,#1a0e20,#35133d); border-radius: 32px; overflow: hidden; }
.phone-proof { position: relative; width: min(300px,100%); aspect-ratio: 9/17.5; margin: auto; padding: 12px; background: #080709; border: 3px solid #514b54; border-radius: 42px; box-shadow: 18px 20px 0 var(--pink); transform: rotate(-3deg); text-decoration: none; transition: transform .25s; }
.phone-proof:hover { transform: rotate(0) translateY(-5px); }
.phone-speaker { position: absolute; z-index: 4; top: 18px; left: 50%; width: 75px; height: 19px; transform: translateX(-50%); background: #080709; border-radius: 20px; }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 30px; background: linear-gradient(160deg,#ffd84e,#ff3d91 55%,#23112a); }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-play { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; display: grid; place-items: center; transform: translate(-50%,-50%); color: var(--ink); background: var(--yellow); border-radius: 50%; font-style: normal; font-size: 27px; box-shadow: 0 0 0 12px rgba(255,255,255,.24),0 12px 28px rgba(0,0,0,.35); }
.montse-copy h2 span { color: var(--lime); }
.montse-copy p:not(.marker) { color: #ddd2e0; }
.montse-lead { padding: 14px 16px; border-left: 4px solid var(--yellow); background: rgba(255,216,77,.08); font-weight: 800; }
.final-cta { margin-top: 100px; padding: 90px 60px 115px; color: white; background: linear-gradient(135deg,var(--ink),#34123c); text-align: center; border-radius: 36px 36px 0 0; }
.final-cta > span { color: var(--lime); font: 18px "Bebas Neue", sans-serif; letter-spacing: .08em; }
.final-cta p { max-width: 720px; margin: 0 auto 30px; color: #d5c9d8; }
.final-cta .button--ghost { color: white; }
footer { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 35px 20px 115px; color: #c5b8c9; background: #09050c; text-align: center; }
footer img { width: 180px; filter: brightness(0) invert(1); }
footer p { margin: 0; font-size: 12px; }

.mobile-dock { position: fixed; z-index: 90; left: 50%; bottom: 12px; display: none; grid-template-columns: 1fr 1fr; width: calc(100% - 22px); max-width: 390px; padding: 5px; transform: translateX(-50%); background: rgba(20,10,25,.92); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; box-shadow: 0 18px 45px rgba(0,0,0,.42); backdrop-filter: blur(16px); }
.mobile-dock a { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 9px; color: white; text-decoration: none; font: 18px "Bebas Neue", sans-serif; }
.mobile-dock a:first-child { background: var(--lime); color: var(--ink); border-radius: 13px 5px 5px 13px; }
.mobile-dock a:last-child { background: var(--pink); border-radius: 5px 13px 13px 5px; }
.mobile-dock i { font-style: normal; font-size: 17px; }
.mobile-dock span { line-height: .9; }
.mobile-dock small { display: block; margin-top: 4px; font: 8px "DM Sans", sans-serif; font-weight: 900; letter-spacing: .08em; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s, transform .7s; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes blink { 50% { opacity: .3; } }
@keyframes breathe { 50% { transform: scale(1.08); filter: saturate(1.2); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes tapPulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(109,240,166,.2); } }
@keyframes ripple { 70% { box-shadow: 0 0 0 9px rgba(255,61,145,0); } 100% { box-shadow: 0 0 0 0 rgba(255,61,145,0); } }

@media (max-width: 900px) {
  .site-header { padding: 12px 20px; }
  nav > a:not(.nav-cta) { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 35px; }
  .hero-deck { width: min(630px,100%); margin: auto; }
  .panic, .scanner, .plan { padding: 70px 28px; border-radius: 24px; }
  .panic-game, .scanner-layout, .simulator, .mid-cta { grid-template-columns: 1fr; }
  .scanner-layout { min-height: 0; }
  .scan-questions { min-height: 560px; border-right: 0; border-bottom: 1px solid var(--line); }
  .result-columns { grid-template-columns: 1fr; }
  .case-gallery { grid-auto-columns: minmax(230px,44%); }
  .simulator { padding: 65px 35px; }
  .mid-cta { text-align: center; }
  .plan-app { grid-template-columns: 1fr; }
  .plan-progress { flex-direction: row; align-items: center; gap: 14px; }
  .plan-progress div { width: 190px; height: 12px; margin: 0; align-items: stretch; }
  .plan-progress i { width: 0; height: 100%!important; }
  .mission-picker { grid-template-columns: repeat(7,1fr); overflow-x: auto; padding: 5px 2px 10px; }
  .mission-picker button { display: flex; flex-direction: column; justify-content: center; min-width: 78px; text-align: center; }
  .mission-picker button i { position: absolute; }
  .montse-story { grid-template-columns: .7fr 1fr; gap: 40px; padding: 50px 35px; }
}

@media (max-width: 600px) {
  body { padding-bottom: 78px; }
  .ticker__set { font-size: 18px; }
  .site-header { min-height: 68px; gap: 8px; padding: 10px 12px; }
  .brand { gap: 4px; min-width: 0; }
  .brand img { width: 126px; }
  .brand span { padding-left: 5px; font-size: 10.5px; white-space: nowrap; }
  .nav-cta { padding: 9px 6px; font-size: 9px; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
  .section-wide, .section-narrow { width: min(100% - 24px,1180px); }
  h1 { font-size: clamp(70px,25vw,104px); }
  h2 { font-size: 46px; }
  p { font-size: 15px; }
  .button { width: 100%; min-height: 50px; font-size: 20px; }
  .hero { min-height: auto; gap: 25px; padding: 28px 0 70px; }
  .hero__lead { font-size: 29px; }
  .hero-deck { min-height: 490px; }
  .belly-photo { width: 47%; }
  .belly-photo img { height: 270px; }
  .belly-photo span { font-size: 14px; }
  .belly-photo::after { top: 5px; right: 5px; padding: 4px 6px; font-size: 12px; }
  .belly-photo:nth-child(1) { left: 0; }
  .belly-photo:nth-child(2) { right: 0; top: 54px; }
  .belly-photo:nth-child(3) { left: 27%; top: 130px; }
  .deck-caption { right: 10px; bottom: 0; padding: 14px; }
  .deck-caption p { font-size: 13px; }
  .sticker { top: -18px; right: -5px; padding: 9px 10px; font-size: 13px; }
  .selection-flag { top: 82px; font-size: 13px; white-space: nowrap; }
  .reel-bridge { padding: 72px 0 82px; }
  .brain-line span { font-size: 17px; }
  .panic, .scanner, .plan { width: 100%; padding: 60px 12px; border-radius: 0; }
  .section-heading { padding: 0 6px; }
  .panic-options { grid-template-columns: 1fr 1fr; gap: 8px; }
  .panic-options button { min-height: 160px; padding: 12px 10px; }
  .panic-options span { font-size: 27px; }
  .panic-options b { font-size: 21px; }
  .panic-options small { font-size: 11px; }
  .panic-console { min-height: 340px; padding: 25px 20px; }
  .scan-questions { min-height: 590px; padding: 30px 14px; }
  .scan-screen h3 { font-size: 36px; }
  .scan-screen button { min-height: 72px; grid-template-columns: 40px 1fr; padding: 10px; }
  .scan-screen button span { font-size: 14px; }
  .scan-actions { left: 14px; right: 14px; bottom: 25px; }
  .belly-lab { min-height: 520px; padding: 35px 15px; }
  .scan-result { padding: 38px 14px 44px; }
  .scan-result h2 { font-size: 62px; }
  .result-hit { font-size: 19px; }
  .case-gallery { grid-auto-columns: 78%; }
  .case-gallery img { height: 350px; }
  .case-controls span { max-width: 210px; text-align: center; }
  .proof-bridge { margin-top: 38px; padding: 26px 16px; }
  .proof-bridge h3 { font-size: 34px; }
  .simulator { width: 100%; padding: 60px 18px; border-left: 0; border-right: 0; box-shadow: none; }
  .day-tabs { grid-template-columns: repeat(5,minmax(56px,1fr)); overflow-x: auto; padding: 5px 2px 12px; }
  .day-tabs button { min-width: 56px; font-size: 16px; }
  .jeans-lab { min-height: 490px; padding: 18px 10px; }
  .jeans-scene { height: 270px; }
  .mid-cta { margin: 75px auto; padding: 28px 17px; }
  .mid-cta h2 { font-size: 43px; }
  .plan-progress { flex-wrap: wrap; padding: 12px; }
  .plan-progress > span { font-size: 43px; }
  .plan-progress div { flex: 1; }
  .plan-progress small { width: 100%; }
  .mission-rules { justify-content: flex-start; gap: 8px 5px; padding: 12px 8px; }
  .mission-rules span { font-size: 14px; }
  .mission-rules i { display: none; }
  .mission-console { min-height: 470px; padding: 24px 16px; }
  .mission-console h3 { font-size: 34px; }
  .mission-picker { margin: 0 -4px; }
  .safety { padding: 32px 22px; }
  .safety h2 { font-size: 40px; }
  .montse-story { width: 100%; grid-template-columns: 1fr; gap: 48px; padding: 65px 18px; border-radius: 0; }
  .phone-proof { width: 245px; }
  .montse-copy h2 { font-size: 43px; }
  .final-cta { width: 100%; padding: 70px 18px 90px; border-radius: 0; }
  .mobile-dock { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  .reveal { opacity: 1; transform: none; }
}
