/* Capa de pulido · sistema de la página de certificación (anexo 04 del cerebro, guia/v3-caic).
   Se carga DESPUÉS de los estilos de Claude Design. Como Design escribe todo en estilos inline,
   las propiedades que corrigen el sistema llevan !important: aquí manda esta hoja.
   Las clases las pone build.py (polish) leyendo las firmas de los estilos de Design. */

:root {
  --bg: #060810; --bg-2: #0b0c0e; --bg-3: #121316;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --fg: #f4f5f7; --fg-2: rgba(244,245,247,.64); --fg-3: rgba(244,245,247,.40); --fg-4: rgba(244,245,247,.24);
  --accent: #37bdf8; --accent-deep: #1f6f9f; --warm: #f39237;
  --sans: 'Montserrat', system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;
  --container: 1080px; --hero-w: 1140px; --nav-h: 60px;
  --ease: cubic-bezier(.22,1,.36,1);
}
.doc, body.is-light {
  --bg: #f5f6f8; --bg-2: #fff; --bg-3: #eceef2;
  --line: rgba(11,13,18,.09); --line-2: rgba(11,13,18,.16);
  --fg: #0b0d12; --fg-2: rgba(11,13,18,.66); --fg-3: rgba(11,13,18,.62); --fg-4: rgba(11,13,18,.58);
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.is-light { background: #f5f6f8 !important; color: #0b0d12; }
[id] { scroll-margin-top: 70px; }
.doc { background: #f5f6f8 !important; }
main { overflow-x: clip !important; } /* overflow-x: hidden rompía el position: sticky del índice */
.container { max-width: var(--container) !important; padding-left: 24px !important; padding-right: 24px !important; }
.hero .container, .cta .container { max-width: var(--hero-w) !important; }
b, strong { font-weight: 600; }

/* ---------- tipografía ---------- */
.h1 { font-size: 56px !important; line-height: 1.06 !important; font-weight: 400 !important; letter-spacing: -.045em !important; }
.h1 > span { display: block; overflow: hidden; padding-bottom: .04em; }
.h1 [data-mask] { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease); animation: none !important; }
.h1.is-in [data-mask] { transform: none; }
.h1.is-in [data-mask-delay] { transition-delay: .08s; }
.h1--plain { transform: none; }
.h2 { font-size: 38px !important; line-height: 48px !important; font-weight: 500 !important; letter-spacing: -.04em !important; text-wrap: balance; }
.h2--center { margin-left: auto !important; margin-right: auto !important; }
.h3 { font-size: 28px !important; line-height: 34px !important; font-weight: 500 !important; letter-spacing: -.03em !important; }
.h3--card { font-size: 22px !important; line-height: 29px !important; font-weight: 500 !important; letter-spacing: -.02em !important; }
.h4 { font-size: 20px !important; line-height: 26px !important; font-weight: 500 !important; letter-spacing: -.02em !important; }
.lead { font-size: 20px !important; line-height: 31px !important; letter-spacing: -.01em !important; font-weight: 400 !important; }
.hero__sub { font-size: 18px !important; line-height: 28px !important; letter-spacing: -.01em !important; font-weight: 400 !important; color: rgba(244,245,247,.86) !important; max-width: 46ch; }
.hero--light .hero__sub { color: rgba(11,13,18,.86) !important; }
.hero__p { font-size: 16px !important; line-height: 25px !important; }
.label { font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 500 !important; }
.card p:not(.label):not(.h4):not(.h3):not(.facts__num), .card li { font-size: 15px !important; line-height: 23px !important; }
.card p.h4 { line-height: 26px !important; }
.card p.label { font-size: 11px !important; line-height: 16px !important; }
.sec__p { font-size: 16px !important; line-height: 24px !important; }
.sec__head { display: grid !important; grid-template-columns: 1fr 340px !important; gap: 40px !important; align-items: end !important; margin-bottom: 40px !important; }
.sec__head--wide { grid-template-columns: 1fr 1.15fr !important; align-items: start !important; }

/* ---------- ritmo ---------- */
.sec { padding-top: 100px !important; padding-bottom: 100px !important; }
.sec--first { padding-top: 110px !important; }
.sec--tight { padding-top: 0 !important; padding-bottom: 0 !important; }
.sec--faq { padding-bottom: 130px !important; }
.sec--decision { padding-top: 120px !important; padding-bottom: 140px !important; }
.sec--resumen { padding-top: 140px !important; }
.sec--cierre-doc { padding-top: 40px !important; padding-bottom: 110px !important; }

/* ---------- botones ---------- */
.btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px; height: 48px !important; padding: 0 30px !important; border-radius: 999px !important;
  font-family: var(--sans) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: -.01em !important; text-transform: none !important; line-height: 1 !important;
  border: 0; cursor: pointer; white-space: nowrap; box-shadow: none !important; transition: transform .3s var(--ease), background .3s, box-shadow .3s, border-color .3s, color .3s !important; }
.btn--light { background: rgba(255,255,255,.88) !important; color: #0a0a0b !important; }
.btn--light:hover { background: #fff !important; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 30px -10px rgba(55,189,248,.55) !important; }
.btn--dark { background: #0b0d12 !important; color: #f4f5f7 !important; }
.btn--dark:hover { background: #171a21 !important; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(11,13,18,.06), 0 10px 30px -10px rgba(55,189,248,.55) !important; }
.btn--ghost { height: 44px !important; padding: 0 22px !important; font-weight: 400 !important; background: rgba(255,255,255,.06) !important; color: var(--fg) !important; border: 1px solid var(--line-2) !important; }
.btn--ghost:hover { background: rgba(255,255,255,.1) !important; }
.is-light .btn--ghost, .doc .btn--ghost { background: rgba(11,13,18,.04) !important; color: #0b0d12 !important; border-color: rgba(11,13,18,.16) !important; }
.is-light .btn--ghost:hover, .doc .btn--ghost:hover { background: rgba(11,13,18,.08) !important; }
.btn--nav { height: 38px !important; padding: 0 18px !important; background: rgba(255,255,255,.12) !important; color: #f4f5f7 !important; }
.btn--nav:hover { background: rgba(255,255,255,.2) !important; transform: none; box-shadow: none !important; }
.btn--sm { height: 40px !important; padding: 0 20px !important; font-size: 13px !important; }
.btn--wide { width: 100%; }
.btn[style*="opacity: 0.6"] { cursor: default; }

/* ---------- chip ---------- */
.chip { display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 30px !important; padding: 0 14px 0 12px !important; border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.06) !important;
  font-family: var(--sans) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--fg-2) !important; }
.doc .chip, .is-light .chip { background: rgba(11,13,18,.05) !important; border-color: rgba(11,13,18,.06) !important; color: rgba(11,13,18,.66) !important; }
.chip__dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--accent) !important; box-shadow: 0 0 8px rgba(55,189,248,.7) !important; flex: none; }
.chip--mono { font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: .12em !important; text-transform: uppercase !important; }

/* ---------- nav ---------- */
.nav { height: var(--nav-h) !important; z-index: 50 !important; border-bottom: 1px solid transparent !important;
  background: linear-gradient(180deg, rgba(5,5,6,.75), rgba(5,5,6,0)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: background .4s, border-color .4s !important; }
.nav > div { max-width: none !important; padding: 0 clamp(20px,6vw,180px) !important; }
.nav.is-scrolled { background: rgba(5,5,6,.72) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom-color: var(--line) !important; }
.nav--light { background: linear-gradient(180deg, rgba(245,246,248,.9), rgba(245,246,248,0)) !important; }
.nav--light.is-scrolled { background: rgba(245,246,248,.78) !important; border-bottom-color: rgba(11,13,18,.09) !important; }
.nav__brand { font-family: var(--sans) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: none !important; }
.nav__brand-img { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 18px rgba(55,189,248,.45); border: 0 !important; }
.nav--light .nav__brand-img { box-shadow: 0 0 0 1px rgba(11,13,18,.14), 0 0 18px rgba(55,189,248,.35); }
.nav__link { font-family: var(--sans) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--fg-2) !important; padding: 8px 14px !important; border-radius: 999px !important; transition: color .2s, background .2s !important; }
.nav__link:hover { color: var(--fg) !important; background: rgba(255,255,255,.06) !important; }
.nav__login { font-family: var(--sans) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--fg-2) !important; }
.nav__login:hover { color: var(--fg) !important; }
#asr-navlinks { gap: 4px !important; }
#asr-sheet a { font-family: var(--sans) !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; }

/* ---------- barra de progreso ---------- */
.progress { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 60 !important; height: 2px !important; width: auto !important; pointer-events: none; background: none !important; box-shadow: none !important; }
.progress__bar { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgba(55,189,248,.8), #37bdf8 60%, #d8f3ff); box-shadow: 0 0 12px rgba(55,189,248,.7); will-change: transform; }
.progress__head { position: absolute; top: -3px; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(55,189,248,.85); opacity: 0; transition: opacity .3s var(--ease); will-change: transform; }
.progress.is-on .progress__head { opacity: 1; }

/* ---------- hero oscuro ---------- */
.hero { overflow: clip !important; }
.hero--dark { background: var(--bg) !important; min-height: 1080px; display: flex; align-items: center; padding-top: 140px !important; padding-bottom: 200px !important; }
.hero__sky { position: absolute; inset: 0; z-index: 0; background: radial-gradient(200% 83% at 50% 0px, #0c0e11 0%, #171b1f 42%, #2f78a8 100%); }
.hero__sky::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 100%, rgba(55,189,248,.22), rgba(55,189,248,0) 70%); }
.hero .layer { z-index: 1 !important; will-change: transform; left: 34% !important; opacity: .32 !important; filter: blur(1px) saturate(.85) !important; background-position: 50% 40% !important; }
.hero__veil { z-index: 2 !important; }
.hero--dark .hero__veil--v { background: linear-gradient(180deg, rgba(6,8,16,.55) 0%, rgba(6,8,16,.25) 40%, rgba(6,8,16,.35) 75%, rgba(6,8,16,.0) 100%) !important; }
.hero--dark .hero__veil--h { background: linear-gradient(90deg, rgba(6,8,16,1) 0%, rgba(6,8,16,1) 30%, rgba(6,8,16,.55) 50%, rgba(6,8,16,.15) 75%, rgba(6,8,16,.05) 100%) !important; }
.hero--dark::after { content: ''; position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 280px; background: linear-gradient(180deg, rgba(6,8,16,0), rgba(6,8,16,.6) 45%, var(--bg) 88%); pointer-events: none; }
.hero .container { position: relative; z-index: 6; width: 100%; }
@media (min-width: 1000px) { .hero .container { grid-template-columns: minmax(0,1.1fr) 380px !important; gap: 64px !important; } }
.hero__lockup { flex-wrap: nowrap !important; white-space: nowrap; }
.hero__lockup img { width: 34px !important; height: 34px !important; border: 0 !important; background: #070809; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 22px rgba(55,189,248,.5); }
.hero__lockup .label { font-size: 11px !important; letter-spacing: .14em !important; }
.note { font-size: 13px !important; line-height: 20px !important; color: var(--fg-3) !important; letter-spacing: 0 !important; text-transform: none !important; font-family: var(--sans) !important; }
.hero__cta { gap: 12px !important; margin-top: 34px !important; }

/* ---------- hero claro (micropáginas) ---------- */
.hero--light { padding-top: 140px !important; }
.hero--light .h1 { color: #0b0d12 !important; }
.hero--light .container { position: relative; z-index: 3; }
.hero--light video { z-index: 0; }
.hero--light .hero__veil { z-index: 1 !important; }

/* ---------- ficha 3D ---------- */
.plate { position: relative !important; width: 380px !important; max-width: 100% !important; min-height: 486px !important; padding: 30px !important; border-radius: 22px !important; display: flex !important; flex-direction: column !important; color: #f4f5f7 !important;
  background: linear-gradient(160deg, #111215 0%, #0a0b0d 100%) !important; border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 50px 120px -40px rgba(0,0,0,.9), 0 0 90px -30px rgba(55,189,248,.32) !important;
  transform: perspective(1100px) rotateX(var(--rx, 2deg)) rotateY(var(--ry, -7deg)) !important; transform-style: preserve-3d; transition: transform .6s var(--ease) !important; will-change: transform; }
.plate > div:not(.plate__sheen) { display: flex; flex-direction: column; flex: 1 1 auto; }
.plate__sheen { position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important;
  background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%), radial-gradient(520px circle at var(--mx, 28%) var(--my, 18%), rgba(255,255,255,.06), transparent 46%) !important; }
.plate__top { padding-bottom: 0 !important; border-bottom: 0 !important; gap: 12px !important; }
.plate__top img { width: 44px !important; height: 44px !important; border: 0 !important; background: #070809; box-shadow: 0 0 0 2px rgba(255,255,255,.16), 0 0 24px rgba(55,189,248,.5); }
.plate__brand { font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 500 !important; color: rgba(244,245,247,.64) !important; }
.plate__title { margin: 52px 0 0 !important; font-size: 30px !important; line-height: 1.12 !important; letter-spacing: -.035em !important; font-weight: 500 !important; color: #f4f5f7 !important; }
.plate__abbr { margin: 10px 0 0 !important; font-family: var(--mono) !important; font-size: 12px !important; letter-spacing: .22em !important; text-transform: uppercase !important; font-weight: 400 !important; color: rgba(244,245,247,.40) !important; }
.plate__rows { margin-top: 32px !important; }
.plate__row { display: grid !important; grid-template-columns: 84px 1fr !important; gap: 12px !important; padding: 11px 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
.plate__row--wide { grid-template-columns: 104px 1fr !important; }
.plate__row > span:first-child { font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 400 !important; color: rgba(244,245,247,.40) !important; padding-top: 2px !important; }
.plate__row > span:last-child { font-size: 13px !important; line-height: 19px !important; color: rgba(244,245,247,.64) !important; }
.plate__row b, .plate__row strong, .plate__row span span { color: rgba(244,245,247,.86) !important; }
.plate__foot { margin-top: auto !important; padding-top: 22px !important; font-size: 12px !important; color: rgba(244,245,247,.64) !important; gap: 10px !important; }
.plate__foot span:last-child { font-family: var(--sans) !important; font-size: 12px !important; letter-spacing: .01em !important; text-transform: none !important; font-weight: 400 !important; color: rgba(244,245,247,.64) !important; }
.plate--small { width: 340px !important; min-height: 0 !important; padding: 26px !important; --ry: 7deg; }
.plate--small .plate__title { margin-top: 40px !important; font-size: 26px !important; }
.plate--small .plate__rows { margin-top: 26px !important; }
.plate__row [style*="39237" i], .plate__row [style*="9A5F1E" i], .plate__row [style*="B3742A" i] { color: var(--warm) !important; }
.plate--inline { margin: 0 !important; }

/* ---------- tira de datos ---------- */
.facts { position: relative; z-index: 6; }
.facts__grid { margin-top: -76px !important; border-radius: 22px !important; background: #fff !important; border: 1px solid var(--line) !important; gap: 0 !important;
  grid-template-columns: repeat(4, 1fr) !important; box-shadow: 0 2px 4px rgba(11,13,18,.04), 0 30px 80px -30px rgba(11,13,18,.35) !important; overflow: clip !important; }
.facts__grid--caso { margin-top: 46px !important; }
.facts__cell { padding: 30px 32px 28px !important; border-right: 1px solid var(--line); }
.facts__cell:last-child { border-right: 0; }
.facts__cell .label { color: var(--fg-3) !important; }
.facts__num { margin: 14px 0 0 !important; font-size: 30px !important; line-height: 36px !important; letter-spacing: -.03em !important; font-weight: 500 !important; color: #0b0d12 !important; }
.facts__cell p:last-child { margin-top: 6px !important; font-size: 13px !important; line-height: 19px !important; color: rgba(11,13,18,.66) !important; }

/* ---------- tarjetas ---------- */
.card { border-radius: 20px !important; background: #fff !important; border: 1px solid rgba(11,13,18,.09) !important; box-shadow: 0 1px 2px rgba(11,13,18,.04), 0 16px 40px -28px rgba(11,13,18,.3) !important; }
.card--pillar { padding: 30px 34px 26px !important; }
.card--wide { border-radius: 26px !important; }
.card--soft { box-shadow: 0 1px 2px rgba(11,13,18,.04), 0 10px 30px -20px rgba(11,13,18,.25) !important; }
.pillar__out { border-radius: 12px !important; background: #f5f6f8 !important; border: 1px solid rgba(11,13,18,.09) !important; font-size: 14.5px; }
.pillar__more summary { font-family: var(--sans) !important; font-size: 13.5px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; color: rgba(11,13,18,.66) !important; transition: color .2s; }
.pillar__more summary:hover { color: #0b0d12 !important; }
.pillar__more [data-plus] { font-size: 16px !important; }

/* ---------- bandeja y tarjetas camino ---------- */
.tray { border-radius: 26px !important; background: #eceef2 !important; border: 1px solid rgba(11,13,18,.09); padding: 12px !important; gap: 12px !important; }
.track { min-height: 280px; padding: 32px 34px 26px !important; border-radius: 18px !important; background: rgba(255,255,255,.55) !important; border: 1px solid transparent !important; box-shadow: none !important;
  transition: background .35s, border-color .35s, box-shadow .5s var(--ease) !important; }
.track[aria-pressed="true"] { background: #fff !important; border-color: rgba(11,13,18,.09) !important; box-shadow: 0 2px 4px rgba(11,13,18,.04), 0 24px 60px -30px rgba(11,13,18,.35), 0 0 0 4px rgba(55,189,248,.10) !important; }
.track:hover { background: rgba(255,255,255,.8) !important; }
.track > span:nth-child(2) { margin-top: 40px !important; font-size: 22px !important; line-height: 29px !important; letter-spacing: -.02em !important; max-width: 22ch; }
.track > span:nth-child(3) { margin-top: 14px !important; font-size: 14.5px !important; line-height: 22px !important; max-width: 44ch; }
.tray .card { border-radius: 18px !important; box-shadow: 0 2px 4px rgba(11,13,18,.04), 0 24px 60px -30px rgba(11,13,18,.35) !important; }

/* ---------- raíl del temario ---------- */
#asr-chapters { grid-template-columns: 280px minmax(0,1fr) !important; gap: 72px !important; align-items: start !important; }
#asr-index { top: 100px !important; }
.rail__item a > span:nth-child(1) { font-size: 11px !important; letter-spacing: .08em !important; }
.rail__item a > span:nth-child(2) { font-size: 15px !important; line-height: 22px !important; letter-spacing: -.01em !important; }
.rail__item a > span:nth-child(3) { font-size: 12.5px !important; line-height: 18px !important; }
.rail__track { width: 1px !important; background: rgba(11,13,18,.16) !important; border-radius: 0 !important; }
.rail__fill { left: -1px !important; width: 3px !important; height: 100% !important; border-radius: 2px !important; transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(180deg, #1a8fcb, #37bdf8) !important; box-shadow: 0 0 10px rgba(55,189,248,.5) !important; will-change: transform; }
.rail__item { position: relative; padding-left: 16px; opacity: .55; transition: opacity .3s; }
.rail__item::before { content: ''; position: absolute; left: -26px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: rgba(11,13,18,.16); transition: background .3s, box-shadow .3s; }
.rail__item.is-active { opacity: 1; }
.rail__item.is-active::before { background: #37bdf8; box-shadow: 0 0 0 1px rgba(55,189,248,.4), 0 0 10px rgba(55,189,248,.7); }
.rail__item a:hover { color: #0b0d12; }

/* ---------- filas de entregables ---------- */
.plan__row { gap: 12px !important; padding: 18px 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--line) !important; align-items: center !important; }
.plan__row svg { width: 22px; height: 22px; }
.plan__row svg circle { stroke: transparent; fill: rgba(55,189,248,.14); }
.plan__row svg path { stroke: #1a8fcb; }

/* ---------- FAQ ---------- */
.qa { border-radius: 22px !important; background: #fff !important; border: 1px solid var(--line) !important; padding: 0 !important; box-shadow: 0 1px 2px rgba(11,13,18,.04), 0 10px 30px -20px rgba(11,13,18,.25) !important; }
.qa summary { align-items: center !important; padding: 34px 36px !important; font-size: 17px !important; font-weight: 400 !important; letter-spacing: 0 !important; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa > p, .qa > div { padding: 0 36px 34px !important; margin: 0 !important; font-size: 15px !important; line-height: 23px !important; color: rgba(11,13,18,.66) !important; max-width: 62ch; }
.qa__chev { position: relative; width: 34px !important; height: 34px !important; border-radius: 50%; background: rgba(11,13,18,.04); border: 1px solid var(--line); color: transparent !important; font-size: 0 !important; flex: none; transition: transform .3s var(--ease) !important; }
.qa__chev::after { content: ''; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px; border: solid rgba(11,13,18,.66); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.qa[open] .qa__chev { transform: rotate(180deg) !important; }
.faq__side { border-radius: 22px !important; }

/* ---------- bio ---------- */
#dan .tray { grid-template-columns: 1.2fr .8fr !important; }
#dan .card:has(.bio__img) { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 8px 28px; align-items: start; padding: 30px !important; }
.bio__img { grid-row: 1 / 4; width: 180px !important; height: 180px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; object-fit: cover !important; object-position: 50% 12% !important; box-shadow: 0 20px 50px -30px rgba(11,13,18,.5); }
#dan .card:has(.bio__img) > p:nth-of-type(1) { margin: 0 !important; font-size: 22px !important; line-height: 28px !important; font-weight: 500 !important; letter-spacing: -.02em !important; }
#dan .card:has(.bio__img) > p:nth-of-type(2) { margin: 0 !important; align-self: start; }
#dan .card:has(.bio__img) > p:nth-of-type(3) { margin: 8px 0 0 !important; font-size: 14.5px !important; line-height: 22px !important; }
#dan .tray .card:not(:has(.bio__img)) { display: flex; flex-direction: column; justify-content: center; }

/* ---------- cierre oscuro ---------- */
.cta { background: linear-gradient(180deg, var(--bg), #14181c) !important; padding-top: 200px !important; padding-bottom: 240px !important; overflow: clip !important; }
.cta__dunes { z-index: 1 !important; opacity: .95 !important; mask-image: linear-gradient(180deg, transparent 0%, #000 55%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); will-change: transform; }
.cta .container { z-index: 2; }
.cta .container > div:last-child { display: flex; justify-content: center; perspective: 1100px; }
.cta .h2 { color: #f4f5f7 !important; font-size: 40px !important; line-height: 54px !important; }
.cta__p { font-size: 16px !important; line-height: 24px !important; color: var(--fg-2) !important; max-width: 40ch !important; }

/* ---------- gracias: banda oscura sólida, la tarjeta monta encima ---------- */
.hero--gracias { background: #060810 !important; }
.hero--gracias > div[aria-hidden] { background: linear-gradient(180deg, rgba(6,8,16,0) 0%, rgba(6,8,16,0) 70%, rgba(55,189,248,.08) 100%) !important; }

/* ---------- barra de pedido ---------- */
.orderbar { background: #fff !important; border-top: 1px solid rgba(11,13,18,.09) !important; box-shadow: 0 -12px 34px -22px rgba(11,13,18,.18) !important; }
.orderbar [data-total], .orderbar #pk-total { font-size: 30px !important; line-height: 36px !important; letter-spacing: -.03em !important; font-weight: 500 !important; }
.orderbar__go { font-family: var(--sans) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 500 !important; color: #0b0d12 !important; border-bottom: 1px solid rgba(11,13,18,.25) !important; }
body.has-orderbar { padding-bottom: 96px; }
body.has-orderbar footer { padding-bottom: 60px !important; }

/* ---------- footer ---------- */
.footer { position: relative; z-index: 2; background: var(--bg) !important; padding-top: 70px !important; }
.footer .label { color: var(--fg-2) !important; }
.footer a { font-size: 15px !important; }
.footer a[style*="Roboto"] { font-family: var(--sans) !important; letter-spacing: 0 !important; font-size: 13px !important; text-transform: none !important; }
.footer__brand-img { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 18px rgba(55,189,248,.45); border: 0 !important; }

/* ---------- CTA fija en móvil ---------- */
#asr-sticky { background: rgba(5,5,6,.9) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line) !important; }

/* ---------- movimiento ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--fade { opacity: 0; transition: opacity 1s var(--ease); }
.reveal--fade.is-in { opacity: 1; }
.plate.reveal--fade { transition: opacity 1s var(--ease), transform .6s var(--ease) !important; }
[data-type] .w { display: inline-block; white-space: nowrap; }
[data-type] .ch { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(4px); transition: opacity .55s var(--ease), filter .55s var(--ease), transform .55s var(--ease); }
[data-type].is-typed .ch { opacity: 1; filter: blur(0); transform: none; }
html.is-swapping .t { opacity: 0; }
.t { transition: opacity .24s; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero .layer { left: 62% !important; opacity: .2 !important; }
  .hero--dark { min-height: 0; padding-top: 130px !important; padding-bottom: 170px !important; }
  .h1 { font-size: 48px !important; }
  .h2, .cta .h2 { font-size: 34px !important; line-height: 42px !important; }
  .h3 { font-size: 24px !important; line-height: 30px !important; }
  #asr-chapters { grid-template-columns: 236px minmax(0,1fr) !important; gap: 40px !important; }
  .hero__sub { font-size: 17px !important; line-height: 26px !important; }
  .sec__head { grid-template-columns: 1fr !important; gap: 18px !important; }
  .hero .container { grid-template-columns: 1fr !important; }
  .plate { width: 340px !important; min-height: 440px !important; }
  .facts__grid, .facts__grid--caso { grid-template-columns: repeat(2, 1fr) !important; }
  .facts__cell:nth-child(2n) { border-right: 0; }
  .facts__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
  #dan .tray { grid-template-columns: 1fr !important; }
  #asr-chapters { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  #dan .card:has(.bio__img) { grid-template-columns: 1fr; }
  .bio__img { width: 160px !important; height: 160px !important; grid-row: auto; }
  .nav .btn--nav { display: none !important; }
  #asr-burger { width: 40px !important; height: 40px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; border: 0 !important; color: #fff; }
  .orderbar > div { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; gap: 6px 14px !important; }
  .orderbar > div > div:last-child { display: flex !important; align-items: center !important; gap: 14px !important; }
  .orderbar [data-total], .orderbar #pk-total { font-size: 22px !important; line-height: 26px !important; }
  .orderbar__go { font-size: 13px !important; }
  .hero .layer { left: 0 !important; opacity: .22 !important; }
  .hero__lockup { flex-wrap: wrap !important; white-space: normal; }
  .h1 { font-size: 40px !important; }
  .h2, .cta .h2 { font-size: 30px !important; line-height: 38px !important; }
  .h3 { font-size: 24px !important; line-height: 30px !important; }
  .sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .sec--decision { padding-top: 80px !important; padding-bottom: 100px !important; }
  .hero--dark { min-height: 0; padding-top: 120px !important; padding-bottom: 150px !important; }
  .hero--dark::after { height: 180px; }
  .facts__grid { margin-top: -40px !important; }
  .facts__cell { padding: 22px 20px 20px !important; }
  .plate, .plate--small { --rx: 0deg; --ry: 0deg; transform: none !important; width: 100% !important; max-width: 380px !important; min-height: 0 !important; margin: 0 auto !important; justify-self: center !important; }
  .plate__title { margin-top: 36px !important; font-size: 26px !important; }
  .card--pillar { padding: 24px 22px 20px !important; }
  .track { min-height: 0; padding: 24px 22px 20px !important; }
  .qa summary { padding: 22px 22px !important; font-size: 16px !important; }
  .qa > p, .qa > div { padding: 0 22px 22px !important; }
  .cta { padding-top: 120px !important; padding-bottom: 140px !important; }
  .nav > div { padding: 0 20px !important; }
  [data-type] .ch { filter: none; }
  .hero__sub, .lead { font-size: 18px !important; line-height: 28px !important; }
  .orderbar [data-total], .orderbar #pk-total { font-size: 26px !important; line-height: 30px !important; }
}
@media (max-width: 520px) {
  .btn { padding: 0 22px !important; }
  .facts__grid, .facts__grid--caso { grid-template-columns: 1fr 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal--fade { opacity: 1; transform: none; transition: none; }
  .h1 [data-mask] { transform: none; transition: none; }
  [data-type] .ch { opacity: 1; filter: none; transform: none; transition: none; }
  .plate, .plate--small { transform: none !important; transition: none !important; }
  .hero .layer, .cta__dunes { transform: none !important; }
  .progress__bar, .rail__fill { transition: none; }
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}