/* DMC MEDIA — Home, versión STATIC (Fase A).
   Cada escena (.scene[data-scene]) muestra aquí su estado final legible.
   El motion de fases B–F solo añadirá presentación encima: no cambia este contenido. */

.scene { position: relative; padding-block: var(--section-pad); }
.scene .label { margin-bottom: clamp(2.5rem, 7vh, 5.5rem); }
.cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 0; }

/* ---------- S01 · Hero ---------- */
.hero { display: flex; min-height: calc(100svh - var(--header-h)); padding-block: 0; overflow: hidden; }
@supports not (height: 100svh) { .hero { min-height: calc(100vh - var(--header-h)); } }
.hero__frame { display: flex; flex-direction: column; padding-block: clamp(1.4rem, 3vh, 3rem) clamp(1.75rem, 5vh, 3.5rem); }
.hero .grid-bg { -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%); }
.hero__topline { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.hero__eyebrow { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: var(--t-label); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.hero__eyebrow .cell { --cell-size: .55rem; }
.hero__index { color: var(--muted); font-size: .65rem; letter-spacing: .1em; line-height: 1.5; text-align: right; }

.hero__title { position: relative; display: flex; flex-direction: column; margin: clamp(2.2rem, 7vh, 6rem) 0 clamp(2rem, 5vh, 4rem); font-weight: 600; line-height: .8; letter-spacing: -.085em; }
.hero__line { display: block; white-space: nowrap; }
.hero__line > span { display: inline-block; }
.hero__line--first { font-size: clamp(3.3rem, min(9.7vw, 18vh), 12rem); }
.hero__line--second { align-self: flex-end; margin-right: 7.7%; font-size: clamp(3.8rem, min(11.1vw, 20vh), 13.5rem); }
.hero__line--third { align-self: center; padding-left: 7.2%; font-size: clamp(4rem, min(11.6vw, 21vh), 14rem); }
.hero__title em { display: inline-block; margin-left: .07em; font-family: var(--serif); font-weight: 400; letter-spacing: -.06em; color: var(--muted); }
/* The period of "negocio." is the first lit cell. The "." stays in the DOM for indexing and reading. */
.hero__period { display: inline-block; width: .19em; height: .19em; margin-left: .06em; overflow: hidden; background: var(--cell-lit); box-shadow: var(--cell-glow); color: transparent; line-height: 0; vertical-align: baseline; }

.hero__bottom { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 3rem; margin-top: auto; }
.hero__lead { max-width: 25rem; }
.hero__cta { font-size: var(--t-body); }

@media (max-width: 1099px) {
  .hero__line--first { font-size: 9.7vw; }
  .hero__line--second { font-size: 11.1vw; }
  .hero__line--third { font-size: 11.6vw; }
}
@media (max-width: 699px) {
  .hero__title { margin: clamp(3rem, 10vh, 7rem) 0 2.5rem; line-height: .88; letter-spacing: -.082em; }
  .hero__line--first { font-size: 12vw; }
  .hero__line--second { align-self: flex-start; margin: .14em 0 0; font-size: 16.1vw; }
  .hero__line--third { align-self: flex-end; padding: 0; margin: .16em 4% 0 0; font-size: 17.4vw; }
  .hero__bottom { flex-direction: column; align-items: flex-start; }
  .hero__index { font-size: .55rem; }
}
@media (max-width: 380px) {
  .hero__line--first { font-size: 11.6vw; }
  .hero__line--second { font-size: 15.3vw; }
  .hero__line--third { font-size: 16.6vw; }
}
@media (max-height: 720px) and (min-width: 700px) {
  .hero__title { margin-block: 1.5rem; }
  .hero__line--first { font-size: min(9vw, 8.7rem); }
  .hero__line--second { font-size: min(10vw, 9.9rem); }
  .hero__line--third { font-size: min(10.5vw, 10.4rem); }
}

/* ---------- S02 · Internet → negocio ---------- */
.internet__layout { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); row-gap: clamp(3rem, 7vh, 5rem); }
.internet__copy { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2rem; }
.internet__claim { max-width: 22ch; }
.internet__diagram { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
.internet__stage--all { grid-column: 1 / -1; }
.internet__stage--pick { grid-column: 1 / -2; padding-right: 1rem; }
.internet__stage--result { grid-column: -2 / -1; }
.internet__step { display: flex; gap: .75rem; margin-bottom: 1rem; color: var(--muted); font-size: var(--t-label); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.internet__step span { color: var(--ink); }

/* Posibilidades: solo tipografía, sin celdas ni bordes (igual que en WOW 1) */
.possibilities { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em 1.1em; font-size: clamp(1.25rem, 1rem + 1.2vw, 2.2rem); }
.possibilities li { color: var(--muted); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; white-space: nowrap; }

.picks { display: grid; gap: .6rem; }
.pick { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: var(--t-small); line-height: 1.3; }
.pick i { flex: none; width: .5rem; height: .5rem; background: var(--cell-lit); }

.business-cell { position: relative; display: flex; align-items: flex-end; aspect-ratio: 1; width: 100%; padding: .6rem .7rem; background: var(--cell-lit); box-shadow: 0 0 3rem rgba(103, 185, 251, .22); color: #08090b; font-size: clamp(1.3rem, 3.1vw, 2.9rem); line-height: .9; }
.business-cell em { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }

@media (min-width: 700px) {
  .internet__diagram { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .business-cell { padding: .9rem 1rem; }
}
@media (min-width: 1100px) {
  .internet__copy { grid-column: 1 / span 5; align-self: start; position: relative; }
  .internet__diagram { grid-column: 7 / -1; }
  .internet__layout { column-gap: 0; }
}

/* ---------- S03 · Que te elijan (silencio) ---------- */
.choose { padding-block: clamp(6rem, 18vh, 14rem); }
.choose__title { max-width: 15ch; }
.choose__found { color: var(--muted); }
.choose__foot { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-items: end; margin-top: clamp(3rem, 10vh, 8rem); }
.choose__foot .cell { --cell-size: calc(var(--m) * .5); grid-column: 1; }
.choose__foot p { grid-column: 2 / -1; max-width: 26ch; }
@media (min-width: 700px) { .choose__foot .cell { --cell-size: calc(var(--m) * .6); } .choose__foot p { grid-column: 5 / -1; } }
@media (min-width: 1100px) { .choose__foot p { grid-column: 8 / -1; } }

/* ---------- S04 · Digital. Media. Code. ---------- */
.dmc__layout { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); row-gap: 3rem; }
.dmc__symbol { grid-column: 1 / span 3; }
.dmc-symbol { width: 100%; height: auto; aspect-ratio: 245 / 334; }
.dmc__columns { display: grid; grid-template-columns: 4.8fr 77.4fr 75.5fr 82.7fr 4.6fr; margin-top: 1rem; color: var(--muted); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.dmc__content { grid-column: 1 / -1; }
.dmc__title { max-width: 11ch; }
.dmc__intro { max-width: 40ch; margin-top: 1.75rem; color: var(--muted); }

.disciplines { margin-top: clamp(2.5rem, 6vh, 4.5rem); border-bottom: 1px solid var(--rule); }
.discipline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-block: 1.75rem; border-top: 1px solid var(--rule); }
.discipline__key { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: var(--t-label); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.colmark { display: inline-flex; gap: 2px; }
.colmark i { display: block; width: 5px; height: 14px; border: 1px solid var(--rule); }
.colmark i.on { border-color: transparent; background: var(--cell-lit); }
.discipline__services { display: grid; gap: 1.75rem; }
.service__title { font-size: var(--t-h3); font-weight: 600; line-height: 1.02; letter-spacing: -.05em; }
.service__title a { display: inline-flex; align-items: baseline; gap: .35em; min-height: 44px; }
.service__title a span { font-size: .7em; font-weight: 400; transition: transform var(--t-fast) var(--ease); }
.service__title a:hover span, .service__title a:focus-visible span { transform: translate(3px, -3px); }
.service__title a:hover, .service__title a:focus-visible { color: var(--cell-cyan); }
.service__kind { margin-top: .35rem; color: var(--muted); font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.service__text { max-width: 44ch; margin-top: .6rem; color: var(--muted); }
.dmc__close { margin-top: 2rem; color: var(--muted); }
.dmc__close strong { color: var(--ink); font-weight: 600; }

@media (min-width: 700px) {
  .dmc__symbol { grid-column: 1 / span 3; }
  .discipline { grid-template-columns: 9rem minmax(0, 1fr); }
  .discipline__key { align-self: start; padding-top: .7rem; }
}
@media (min-width: 1100px) {
  .dmc__symbol { grid-column: 1 / span 4; align-self: start; }
  .dmc__content { grid-column: 6 / -1; }
}

/* ---------- S05 · ALICIA ONE ---------- */
.alicia { background: #050607; }
.alicia__intro { display: grid; gap: 2rem; align-items: end; }
.alicia__intro p { max-width: 36ch; color: var(--muted); }
.alicia__case { margin-top: clamp(4rem, 12vh, 9rem); }
.alicia__meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: var(--t-label); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.display { font-size: var(--t-display); font-weight: 600; line-height: .82; letter-spacing: -.075em; }
.alicia__title { margin-top: 1.25rem; }
.alicia__lead { max-width: 30ch; margin-top: 1.75rem; }

.alicia__display { margin-top: clamp(2.5rem, 7vh, 5rem); }
.alicia__camera { position: relative; overflow: hidden; border: 1px solid var(--rule); background: #0e121d; }
.alicia__camera img { width: 100%; }
.alicia__caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2rem; padding-top: .75rem; color: var(--muted); font-size: var(--t-small); }
.alicia__caption .link-arrow { color: var(--ink); }

.alicia__details { margin-top: clamp(3rem, 8vh, 6rem); }
.alicia__detail { display: grid; gap: 1.25rem; padding-block: 1.75rem; border-top: 1px solid var(--rule); }
.alicia__detail figcaption { max-width: 32ch; color: var(--muted); }
.alicia__detail-key { color: var(--ink); font-family: var(--serif); font-size: 1.35em; font-style: italic; }
.alicia__detail img { width: 100%; border: 1px solid var(--rule); }
.alicia__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); color: var(--muted); }
.alicia__foot p { max-width: 44ch; }
.alicia__foot .link-arrow { color: var(--ink); font-size: 1.15rem; }

@media (min-width: 1100px) {
  .alicia__intro { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .alicia__intro h2 { grid-column: 1 / span 8; }
  .alicia__intro p { grid-column: 9 / -1; }
  .alicia__detail { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .alicia__detail figcaption { grid-column: 1 / span 3; }
  .alicia__detail picture { grid-column: 5 / -1; }
}

/* ---------- S06 · Puente (silencio) ---------- */
.bridge { padding-block: clamp(5rem, 16vh, 11rem); }
.bridge__frame { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-items: start; }
.bridge__cell { --cell-size: calc(var(--m) * .5); grid-column: 1; margin-top: .5rem; }
.bridge__line { grid-column: 2 / -1; max-width: 20ch; font-size: clamp(2rem, 1.1rem + 4vw, 5.6rem); font-weight: 600; line-height: .98; letter-spacing: -.055em; }
.bridge__line em { display: block; color: var(--muted); font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
@media (min-width: 1100px) { .bridge__cell { grid-column: 2; } .bridge__line { grid-column: 3 / -1; } }

/* ---------- S07 · DMC Web Auditor ---------- */
.auditor__head { display: grid; gap: 1.75rem; }
.auditor__head .lead { max-width: 30ch; color: var(--muted); }
.auditor__block { margin-top: clamp(3.5rem, 9vh, 6rem); }
.auditor__subhead { margin-bottom: 1.25rem; color: var(--muted); font-size: var(--t-label); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }

.phases { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); counter-reset: none; }
.phases li { display: flex; align-items: center; gap: .9rem; min-height: 56px; padding-block: .6rem; border-top: 1px solid var(--rule); font-weight: 500; letter-spacing: -.015em; }
.phases__cell { flex: none; width: .9rem; aspect-ratio: 1; border: 1px solid var(--rule); }
.phases li:first-child .phases__cell { border-color: transparent; background: var(--cell-lit); box-shadow: var(--cell-glow); }
.phases__n { color: var(--muted); font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; }

.checks { max-width: 70ch; color: var(--muted); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .8rem; line-height: 2; letter-spacing: .01em; }

.auditor__score { display: grid; gap: 3rem; margin-top: clamp(3.5rem, 9vh, 6rem); padding-top: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--rule); }
.auditor__score-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.auditor__score-copy p { max-width: 34ch; color: var(--muted); }
.auditor__score-copy .cta-cell { margin-top: .5rem; }

.weights { width: min(100%, 27rem); }
.weights__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.weights__grid i { display: block; aspect-ratio: 1; border: 1px solid var(--rule); }
.weights__grid i:nth-child(-n+35) { border-color: transparent; background: var(--ink); }
.weights__grid i:nth-child(n+36):nth-child(-n+65) { border-color: transparent; background: rgba(244, 245, 247, .55); }
.weights__grid i:nth-child(n+66):nth-child(-n+85) { border-color: transparent; background: rgba(244, 245, 247, .26); }
.weights__caption { margin-top: 1.25rem; color: var(--muted); font-size: var(--t-small); }
.weights__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin-top: 1rem; }
.weights__legend div { display: grid; grid-template-columns: .8rem 1fr; column-gap: .6rem; align-items: baseline; }
.weights__legend div::before { content: ''; grid-row: 1 / span 2; width: .8rem; aspect-ratio: 1; align-self: start; margin-top: .3rem; border: 1px solid var(--rule); }
.weights__legend [data-w="performance"]::before { border-color: transparent; background: var(--ink); }
.weights__legend [data-w="seo"]::before { border-color: transparent; background: rgba(244, 245, 247, .55); }
.weights__legend [data-w="ux"]::before { border-color: transparent; background: rgba(244, 245, 247, .26); }
.weights__legend dt { color: var(--muted); font-size: var(--t-small); }
.weights__legend dd { font-size: clamp(1.5rem, 1.1rem + .9vw, 2.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -.04em; white-space: nowrap; }

@media (min-width: 700px) {
  .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; border-bottom: 0; }
  .phases li { flex-direction: column; align-items: flex-start; gap: .6rem; padding-block: 1rem 1.5rem; }
  .weights__legend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .auditor__head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .auditor__head h2 { grid-column: 1 / span 8; }
  .auditor__head .lead { grid-column: 9 / -1; }
  .phases { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .auditor__score { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .auditor__score-copy { grid-column: 1 / span 5; }
  .weights { grid-column: 7 / -1; justify-self: end; }
}

/* ---------- S08 · Método ---------- */
.method__intro { display: grid; gap: 1.75rem; }
.method__intro p { max-width: 36ch; color: var(--muted); }
.method__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.5rem; margin-top: clamp(3rem, 8vh, 5.5rem); }
.method__list li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .75rem; padding-block: 1.25rem 1.75rem; border-top: 1px solid var(--rule); }
.method__cell { width: .9rem; aspect-ratio: 1; border: 1px solid var(--rule); align-self: center; }
.method__cell.cell--lit { border-color: transparent; background: var(--cell-lit); }
.method__n { color: var(--muted); font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; }
.method__list h3 { grid-column: 1 / -1; margin-top: 1rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.method__list p { grid-column: 1 / -1; margin-top: .6rem; color: var(--muted); max-width: 26ch; }
@media (min-width: 700px) { .method__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .method__intro { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .method__intro h2 { grid-column: 1 / span 7; }
  .method__intro p { grid-column: 9 / -1; }
  .method__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- S09 · Tu celda ---------- */
.end { padding-block: clamp(6rem, 16vh, 12rem); overflow: hidden; }
.end .grid-bg { inset: calc(-1 * clamp(6rem, 16vh, 12rem)) 0; -webkit-mask-image: radial-gradient(120% 90% at 70% 60%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 70% 60%, #000 30%, transparent 85%); }
.end__title { position: relative; max-width: 13ch; }
.end__bottom { position: relative; display: grid; gap: 2.5rem; margin-top: clamp(3rem, 9vh, 6rem); }
.end__bottom .lead { max-width: 28ch; color: var(--muted); }
.end__cta { width: 100%; min-height: calc(var(--m) * 1.5); font-size: clamp(1.15rem, 1rem + .8vw, 1.8rem); }
@media (min-width: 700px) {
  .end__bottom { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-items: end; }
  .end__bottom .lead { grid-column: 1 / span 4; }
  .end__cta { grid-column: 6 / -1; min-height: calc(var(--m) * 1.5); }
}
@media (min-width: 1100px) {
  .end__bottom .lead { grid-column: 1 / span 5; }
  .end__cta { grid-column: 9 / -1; min-height: calc(var(--m) * 2); }
}

/* =====================================================================
   MOTION · Fase B — S01 + S02 (WOW 1). Solo se aplica en FULL / REDUCED.
   La geometría (alturas, solape, sticky) existe antes de que cargue JS,
   así no hay saltos de layout. STATIC (sin JS, reduce, Save-Data, fallo)
   no ve nada de esto.
   ===================================================================== */
:root { --wow1-scroll: 67vh; }
@media (max-width: 1099px) { :root { --wow1-scroll: 51vh; } }
@media (max-width: 699px) { :root { --wow1-scroll: 44vh; } }

/* S01 · revelado de carga: el texto existe desde el primer render (sin opacity 0). */
@keyframes dmc-line-reveal { from { clip-path: inset(-10% 100% -20% 0); } to { clip-path: inset(-10% -2% -20% 0); } }
@keyframes dmc-cell-on { from { opacity: .22; box-shadow: none; } }
html:is([data-motion="full"], [data-motion="reduced"]) .hero__line > span { animation: dmc-line-reveal .42s cubic-bezier(.2, .8, .2, 1) backwards; }
html:is([data-motion="full"], [data-motion="reduced"]) .hero__line--second > span { animation-delay: .07s; }
html:is([data-motion="full"], [data-motion="reduced"]) .hero__line--third > span { animation-delay: .14s; }
html:is([data-motion="full"], [data-motion="reduced"]) .hero__period { animation: dmc-cell-on .3s ease-out .42s backwards; }

/* S01 · resalte de la celda bajo el puntero (lo crea JS solo en FULL) */
.grid-hover { position: absolute; left: 0; top: 0; border: 1px solid rgba(244, 245, 247, .1); opacity: 0; transition: opacity .35s ease, transform .18s var(--ease); pointer-events: none; }
.grid-hover.is-visible { opacity: 1; }

/* Geometría reservada: el hero se superpone al escenario sticky de S02 */
html:is([data-motion="full"], [data-motion="reduced"]) .hero { position: relative; z-index: 2; height: calc(100svh - var(--header-h)); min-height: 0; }
html:is([data-motion="full"], [data-motion="reduced"]) .s02 { --stage-h: calc(100svh - var(--header-h)); z-index: 1; margin-top: calc(-1 * var(--stage-h)); height: calc(2 * var(--stage-h) + var(--wow1-scroll)); padding: 0; }
@supports not (height: 100svh) {
  html:is([data-motion="full"], [data-motion="reduced"]) .hero { height: calc(100vh - var(--header-h)); }
  html:is([data-motion="full"], [data-motion="reduced"]) .s02 { --stage-h: calc(100vh - var(--header-h)); }
}
html:is([data-motion="full"], [data-motion="reduced"]) .s02 > .frame { position: sticky; top: var(--header-h); height: var(--stage-h); }
html:is([data-motion="full"], [data-motion="reduced"]):not(.motion-on) .s02 > .frame { visibility: hidden; }

/* Composición del escenario (solo con el motion ya iniciado) */
.motion-on .s02 :is(.internet__layout, .internet__diagram, .internet__stage) { display: contents; }
.motion-on .s02 .label { position: absolute; top: clamp(.75rem, 2.5vh, 1.75rem); left: 0; right: 0; margin: 0; }
.motion-on .s02 .label > span:last-child { visibility: hidden; }
.motion-on .s02 .internet__step { position: absolute; top: calc(clamp(.75rem, 2.5vh, 1.75rem) + .9rem); right: 0; margin: 0; opacity: 0; }
.motion-on .s02 .picks { display: none; }
.motion-on .s02 .internet__copy { position: absolute; top: calc(clamp(.75rem, 2.5vh, 1.75rem) + 3.6rem); left: 0; right: 0; display: grid; gap: 0; }
.motion-on .s02 .internet__copy > * { grid-area: 1 / 1; align-self: start; }
.motion-on .s02 .internet__copy .h2 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 6.4rem); }
.motion-on .s02 .internet__claim { max-width: 17ch; font-size: clamp(1.9rem, 1.1rem + 2.7vw, 4.6rem); font-weight: 600; line-height: .98; letter-spacing: -.05em; opacity: 0; }

/* Posibilidades en WOW 1: solo tipografía sobre el fondo. Sin celdas, bordes ni paneles. */
.motion-on .s02 .possibilities { position: absolute; left: 0; right: 0; top: 44%; bottom: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .55em 1.1em; width: auto; border: 0; opacity: 0; font-size: clamp(1.35rem, 1rem + 1.9vw, 3.4rem); }
.motion-on .s02 .possibilities li { position: relative; display: block; aspect-ratio: auto; min-width: 0; padding: 0; border: 0; overflow: visible; font-size: inherit; font-weight: 500; line-height: 1.1; letter-spacing: -.035em; white-space: nowrap; hyphens: manual; color: rgba(161, 164, 176, var(--t, 1)); translate: 0 calc(var(--y, 0) * 1em); }
.motion-on .s02 .possibilities li.is-on { color: rgba(244, 245, 247, var(--t, 1)); }
.motion-on .s02 .possibilities li::before { content: ''; position: absolute; left: -.62em; top: .36em; width: .3em; height: .3em; background: var(--cell-lit); opacity: var(--hl, 0); pointer-events: none; }
.motion-on .s02 .possibilities li::after { content: none; }
@media (min-width: 700px) {
  .motion-on .s02 .possibilities { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; row-gap: .7em; column-gap: 1em; }
}
@media (min-width: 1100px) {
  .motion-on .s02 .internet__copy { top: calc(clamp(.75rem, 2.5vh, 1.75rem) + 4.2rem); right: auto; width: calc(var(--m) * 9); }
  .motion-on .s02 .possibilities { top: 46%; bottom: auto; grid-template-columns: repeat(6, auto); row-gap: .75em; }
  /* Fase G: entre 1100 y 1439 px las 6 columnas no cabían («Automatización» pisaba «IA»); a ≥ 1440 px no cambia nada */
  .motion-on .s02 .possibilities { font-size: min(clamp(1.35rem, 1rem + 1.9vw, 3.4rem), 3.02vw); }
}
@media (min-width: 700px) and (max-width: 1099px) and (orientation: landscape) {
  .motion-on .s02 .internet__copy { right: 0; top: calc(clamp(.75rem, 2.5vh, 1.75rem) + 3.6rem); margin-top: 0; }
  .motion-on .s02 .possibilities { top: 48%; transform: none; width: auto; }
}

.wow1-word { position: absolute; left: 0; top: 0; z-index: 3; color: var(--ink); font-weight: 600; line-height: .9; letter-spacing: -.085em; white-space: nowrap; opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
.wow1-slot { display: inline-block; margin-left: .06em; vertical-align: baseline; }
.wow1-cell { position: absolute; left: 0; top: 0; z-index: 4; background: var(--cell-lit); opacity: 0; pointer-events: none; }

.motion-on .s02 .business-cell { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: 6; width: auto; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; padding: 0; font-size: clamp(4.5rem, 19vw, 21rem); line-height: 1; background: none; box-shadow: none; opacity: 0; pointer-events: none; }
.wow1-plane { position: absolute; left: 0; top: 0; z-index: 5; background: var(--cell-lit); opacity: 0; transform-origin: 0 0; pointer-events: none; }
.motion-on .s02 .business-cell::after { content: ''; position: absolute; inset: -2px 0; z-index: 0; background: var(--light); opacity: var(--to-light, 0); }
.motion-on .s02 .business-cell em { position: relative; z-index: 1; opacity: 0; padding-right: .06em; }

/* Salida WOW 1 → S03: el escenario termina con el color de S03; se acorta el aire superior de S03
   para que el silencio no sea una pantalla vacía. Único ajuste fuera de S01/S02. */
html:is([data-motion="full"], [data-motion="reduced"]) .s03 { padding-top: clamp(3rem, 9vh, 6.5rem); }
.motion-on .s02 .label > span:first-child { white-space: nowrap; }
.motion-on .s02 .label { opacity: 0; }

/* =====================================================================
   MOTION · Fase C — S04 · WOW 2 «Digital. Media. Code.»
   ===================================================================== */
:root { --wow2-scroll: 86vh; }
@media (max-width: 1099px) { :root { --wow2-scroll: 66vh; } }

/* Header (global, solo con motion): se retira al bajar y vuelve al subir */
.motion-on .site-header { transition: transform .38s var(--ease); }
.motion-on .site-header.is-hidden { transform: translateY(-100%); }

/* Desktop y tablet: escenario sticky con símbolo + tipografía */
@media (min-width: 700px) {
  html:is([data-motion="full"], [data-motion="reduced"]) .s04 { --stage-h: calc(100svh - var(--header-h)); height: calc(var(--stage-h) + var(--wow2-scroll)); padding: 0; }
  @supports not (height: 100svh) { html:is([data-motion="full"], [data-motion="reduced"]) .s04 { --stage-h: calc(100vh - var(--header-h)); } }
  html:is([data-motion="full"], [data-motion="reduced"]) .s04 > .frame { position: sticky; top: var(--header-h); height: var(--stage-h); }
  html:is([data-motion="full"], [data-motion="reduced"]):not(.motion-on) .s04 > .frame { visibility: hidden; }
  /* ancla #servicios: aterriza con el símbolo ya formado y el titular visible (12/86 del recorrido) */
  html:is([data-motion="full"], [data-motion="reduced"]) .s04 { scroll-margin-top: calc(var(--header-h) - var(--wow2-scroll) * 12 / 86); }

  .motion-on .s04 .label { position: absolute; top: clamp(.75rem, 2.5vh, 1.75rem); left: 0; right: 0; margin: 0; }
  .motion-on .s04 .dmc__layout { display: contents; }
  .motion-on .s04 .dmc__symbol { position: absolute; left: 0; top: 50%; width: calc(var(--m) * 2.7); margin-top: calc(var(--m) * 2.7 * -.72); }
  .motion-on .s04 .dmc__content { position: absolute; left: calc(var(--m) * 3.3); right: 0; top: 50%; transform: translateY(-50%); display: grid; }
  .motion-on .s04 .dmc__content > * { grid-column: 1; }
  .motion-on .s04 .dmc__title { grid-row: 1; align-self: center; max-width: 14ch; font-size: clamp(2rem, 1rem + 2.6vw, 4.4rem); opacity: 0; }
  .motion-on .s04 .dmc__intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .motion-on .s04 .disciplines { grid-row: 1; margin: 0; border: 0; }
  .motion-on .s04 .discipline { display: block; padding-block: clamp(.5rem, 1.6vh, 1.1rem); border: 0; }
  .motion-on .s04 .discipline__key { display: block; padding: 0; color: var(--ink); font-size: clamp(2rem, 1.2rem + 2.2vw, 3.8rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; opacity: 0; }
  .motion-on .s04 .colmark { display: none; }
  .motion-on .s04 .discipline__services { display: flex; flex-wrap: wrap; gap: .1rem 2rem; margin-top: .45rem; opacity: 0; }
  .motion-on .s04 .service__title { font-size: clamp(1.1rem, .85rem + .8vw, 1.7rem); }
  .motion-on .s04 .service__kind { margin-top: 0; }
  .motion-on .s04 .service__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .motion-on .s04 .dmc__close { grid-row: 2; margin-top: clamp(1rem, 3vh, 2rem); font-size: clamp(1rem, .85rem + .45vw, 1.4rem); opacity: 0; }
  .motion-on .s04 .dmc__columns span { transition: none; }
  .wow2-cell { position: absolute; left: 0; top: 0; z-index: 4; background: linear-gradient(to top right, #2a9bf7 0%, #2087f5 50%, #7f86fb 50%, #162fd1 100%); outline: 1px solid rgba(169, 214, 255, .9); outline-offset: -1px; opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
}
@media (min-width: 1100px) {
  .motion-on .s04 .dmc__symbol { --sym-w: min(calc(var(--m) * 3.4), 31svh); left: calc(var(--m) * .5 + (var(--m) * 3.4 - var(--sym-w)) / 2); width: var(--sym-w); margin-top: calc(var(--sym-w) * -.72); }
  .motion-on .s04 .dmc__content { left: calc(var(--m) * 5.2); right: calc(var(--m) * .5); }
  .motion-on .s04 .discipline { display: grid; grid-template-columns: calc(var(--m) * 2.7) minmax(0, 1fr); align-items: baseline; column-gap: 1.5rem; }
  .motion-on .s04 .discipline__services { display: grid; gap: .15rem; margin-top: 0; }
}

/* Móvil: el símbolo queda sticky arriba y las disciplinas pasan por debajo */
@media (max-width: 699px) {
  .motion-on .s04 .dmc__symbol { position: sticky; top: 0; z-index: 2; align-self: start; grid-column: 1 / -1; display: grid; grid-template-columns: 38vw minmax(0, 1fr); align-items: end; column-gap: 1rem; margin-inline: calc(-1 * var(--gutter)); padding: .9rem var(--gutter) .8rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .motion-on .s04 .dmc__columns { grid-column: 2; grid-row: 1; align-self: end; display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0 0 .15rem; font-size: .7rem; text-align: left; }
  .motion-on .s04 .dmc__columns span:empty { display: none; }
  .motion-on .s04 .dmc__symbol svg { grid-column: 1; grid-row: 1; }
  .motion-on .s04 .discipline__key { color: var(--ink); font-size: clamp(1.7rem, 1.2rem + 3vw, 2.4rem); font-weight: 600; letter-spacing: -.04em; opacity: 0; }
  .motion-on .s04 .colmark { display: none; }
  .motion-on .s04 .discipline__services, .motion-on .s04 .dmc__close { opacity: 0; }
  .motion-on .s04 .discipline { padding-block: 2.2rem; }
}

/* =====================================================================
   MOTION · Fase D — S05 · WOW 3 «ALICIA ONE»
   La celda de WOW 2 se abre en la interfaz real; cuatro estados (producto,
   voz, capacidades, producto completo) y salida hacia la celda de S06.
   ===================================================================== */
:root { --wow3-scroll: 108vh; --wow3-overlap: 100svh; --wow3-s06: 70svh; }
@media (max-width: 1099px) { :root { --wow3-scroll: 80vh; } }
@media (max-width: 699px) { :root { --wow3-scroll: 76vh; --wow3-overlap: 0px; } }
@supports not (height: 100svh) { :root { --wow3-s06: 70vh; } @media (min-width: 700px) { :root { --wow3-overlap: 100vh; } } }

html:is([data-motion="full"], [data-motion="reduced"]) .s05 {
  --scr-w: min(86vw, 1760px, calc((100svh - 13rem) * 2.1053));
  --scr-h: calc(var(--scr-w) / 2.1053);
  --scr-top: max(4.5rem, calc((100svh - var(--scr-h) - 7rem) / 2));
  height: calc(100svh + var(--wow3-scroll)); margin-top: calc(-1 * var(--wow3-overlap)); padding: 0; background: transparent;
  scroll-margin-top: calc(-1 * var(--wow3-scroll) * .03);
}
@supports not (height: 100svh) { html:is([data-motion="full"], [data-motion="reduced"]) .s05 { height: calc(100vh + var(--wow3-scroll)); } }
/* la sección solapa el final de S04: no debe capturar clics ni hover de WOW 2 (solo sus enlaces son interactivos) */
html:is([data-motion="full"], [data-motion="reduced"]) .s05 { pointer-events: none; }
html:is([data-motion="full"], [data-motion="reduced"]) .s05 a { pointer-events: auto; }
html:is([data-motion="full"], [data-motion="reduced"]) .s05 > .frame { position: sticky; z-index: 1; top: 0; height: 100svh; pointer-events: none; }
@supports not (height: 100svh) { html:is([data-motion="full"], [data-motion="reduced"]) .s05 > .frame { height: 100vh; } }
html:is([data-motion="full"], [data-motion="reduced"]):not(.motion-on) .s05 > .frame { visibility: hidden; }
html:is([data-motion="full"], [data-motion="reduced"]) .s06 { margin-top: calc(-1 * var(--wow3-s06)); }
@media (max-width: 1099px) { html:is([data-motion="full"], [data-motion="reduced"]) .s05 { --scr-w: min(90vw, calc((100svh - 13rem) * 2.1053)); } }

.motion-on .s05 .label { position: absolute; z-index: 3; top: clamp(.75rem, 2.5vh, 1.75rem); left: 0; right: 0; margin: 0; }
.motion-on .s05 .alicia__intro, .motion-on .s05 .alicia__meta, .motion-on .s05 .alicia__lead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.motion-on .s05 .alicia__case, .motion-on .s05 .alicia__display, .motion-on .s05 .alicia__details { margin: 0; }
.motion-on .s05 .alicia__title { position: absolute; z-index: 1; left: 50%; top: calc(var(--scr-top) + var(--scr-h) / 2); margin: 0; font-size: clamp(4.5rem, 15.5vw, 24rem); line-height: .8; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%); }
.motion-on .s05 .alicia__camera { position: absolute; z-index: 2; left: calc(50% - var(--scr-w) / 2); top: var(--scr-top); width: var(--scr-w); height: var(--scr-h); border: 0; outline: 1px solid var(--rule); outline-offset: 0; opacity: 0; transform-origin: 50% 50%; }
.motion-on .s05 .alicia__camera picture, .motion-on .s05 .alicia__camera img { display: block; width: 100%; height: 100%; }
.motion-on .s05 .alicia__camera img { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.wow3-dim { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.wow3-dim i { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: rgba(3, 4, 9, .64); transform-origin: 0 0; }
.wow3-bg { position: absolute; z-index: 0; inset: 0 calc(50% - 50vw); background: #050607; opacity: 0; pointer-events: none; will-change: opacity; }
.wow3-face { position: absolute; z-index: 4; left: 0; top: 0; opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
.wow3-face--in { background: linear-gradient(to top right, #2a9bf7 0%, #2087f5 50%, #7f86fb 50%, #162fd1 100%); outline: 1px solid rgba(169, 214, 255, .9); outline-offset: -1px; }
.wow3-face--out { background: var(--cell-lit); box-shadow: var(--cell-glow); }
.s06.wow3-hold .bridge__cell { opacity: 0; }

/* Una frase cada vez, bajo la pantalla y alineada con ella */
.motion-on .s05 .alicia__caption, .motion-on .s05 .alicia__detail figcaption, .motion-on .s05 .alicia__foot {
  position: absolute; z-index: 3; left: calc(50% - var(--scr-w) / 2); width: var(--scr-w); top: calc(var(--scr-top) + var(--scr-h) + clamp(1.25rem, 3.4vh, 2.75rem));
  max-width: none; margin: 0; padding: 0; border: 0; color: var(--muted); font-size: clamp(1.05rem, .85rem + .6vw, 1.55rem); line-height: 1.35; opacity: 0; visibility: hidden;
}
.motion-on .s05 .alicia__detail figcaption { max-width: min(var(--scr-w), 46ch); }
.motion-on .s05 .alicia__caption { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; }
.motion-on .s05 .alicia__caption .link-arrow, .motion-on .s05 .alicia__foot .link-arrow { font-size: var(--t-small); }
.motion-on .s05 .alicia__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 3rem; }
.motion-on .s05 .alicia__foot p { max-width: 46ch; }
.motion-on .s05 .alicia__foot .link-arrow { flex: none; font-size: clamp(1.05rem, .9rem + .5vw, 1.4rem); }
.motion-on .s05 a { pointer-events: auto; }
.motion-on .s05 .alicia__detail { display: block; padding: 0; border: 0; }
.motion-on .s05 .alicia__detail picture { display: none; }

/* Móvil: composiciones reales distintas en lugar de una cámara reducida */
@media (max-width: 699px) {
  html:is([data-motion="full"], [data-motion="reduced"]) .s05 {
    --m-top: 4.25rem; --m-text: 8.75rem;
    --scr-w: 100vw; --scr-h: calc(100vw / 2.1053);
    --scr-top: calc(var(--m-top) + (100svh - var(--m-top) - var(--m-text) - var(--scr-h)) / 2);
  }
  .motion-on .s05 .alicia__camera { outline: 0; }
  .motion-on .s05 .alicia__title { font-size: 21vw; }
  .motion-on .s05 .alicia__caption, .motion-on .s05 .alicia__detail figcaption, .motion-on .s05 .alicia__foot { top: auto; bottom: max(1.25rem, env(safe-area-inset-bottom)); left: 0; width: 100%; min-height: calc(var(--m-text) - 2rem); font-size: 1.05rem; }
  .motion-on .s05 .alicia__caption, .motion-on .s05 .alicia__foot { flex-direction: column; justify-content: flex-start; align-items: flex-start; }
  .motion-on .s05 .alicia__detail:first-child picture { display: block; position: absolute; z-index: 2; left: calc(50% - 50vw); width: 100vw; top: calc(var(--m-top) + (100svh - var(--m-top) - var(--m-text)) / 2); opacity: 0; transform: translate3d(0, -50%, 0); }
  .motion-on .s05 .alicia__detail:first-child img { border: 0; border-block: 1px solid var(--rule); }
  .wow3-cards { position: absolute; z-index: 2; left: 50%; top: calc(var(--m-top) + (100svh - var(--m-top) - var(--m-text)) / 2); display: grid; gap: .375rem; width: min(100%, calc((100svh - var(--m-top) - var(--m-text) - 2.5rem) / 4 * 2.92)); opacity: 0; transform: translate3d(-50%, -50%, 0); }
  .wow3-cards img { display: block; width: 100%; height: auto; border-radius: 3px; }
}
.s04.wow3-took .wow2-cell { visibility: hidden; }
.weights__thresholds { margin-top: 1.25rem; color: var(--muted); font-size: var(--t-small); line-height: 1.6; }
.weights__thresholds span { display: block; color: var(--ink); font-size: var(--t-label); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }

/* =====================================================================
   MOTION · Fase E — S07 · WOW 4 «DMC WEB AUDITOR»
   Tres estados: analizamos (seis fases reales) · cómo puntuamos (retícula
   10×10 con los pesos reales) · tu turno (una celda: el CTA).
   ===================================================================== */
:root { --wow4-scroll: 88vh; }
@media (max-width: 1099px) { :root { --wow4-scroll: 70vh; } }

.s06.wow4-took .bridge__cell { opacity: 0; }
.wow4-seed, .wow4-bg { display: none; }
@media (min-width: 700px) { .wow4-seed, .wow4-bg { display: block; } }

@media (min-width: 700px) {
  html:is([data-motion="full"], [data-motion="reduced"]) .s06 { height: 70svh; }
  html:is([data-motion="full"], [data-motion="reduced"]) .s07 {
    --stage-h: calc(100svh - var(--header-h));
    height: calc(var(--stage-h) + var(--wow4-scroll)); margin-top: calc(var(--header-h) - 75svh); padding: 0; background: transparent;
    scroll-margin-top: calc(var(--header-h) - var(--wow4-scroll) * .03);
  }
  @supports not (height: 100svh) {
    html:is([data-motion="full"], [data-motion="reduced"]) .s06 { height: 70vh; }
    html:is([data-motion="full"], [data-motion="reduced"]) .s07 { --stage-h: calc(100vh - var(--header-h)); margin-top: calc(var(--header-h) - 75vh); }
  }
  html:is([data-motion="full"], [data-motion="reduced"]) .s07 > .frame { position: sticky; z-index: 1; top: var(--header-h); height: var(--stage-h); pointer-events: none; }
  html:is([data-motion="full"], [data-motion="reduced"]):not(.motion-on) .s07 > .frame { visibility: hidden; }

  .wow4-bg { position: absolute; z-index: 0; top: calc(-1 * var(--header-h)); bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--paper); opacity: 0; pointer-events: none; will-change: opacity; }
  .wow4-seed { position: absolute; z-index: 5; left: 0; top: 0; background: var(--cell-lit); box-shadow: var(--cell-glow); opacity: 0; pointer-events: none; transform-origin: 0 0; }
  .motion-on .s07 .label { position: absolute; z-index: 3; top: clamp(.75rem, 2.5vh, 1.75rem); left: 0; right: 0; margin: 0; opacity: 0; }
  .motion-on .s07 .auditor__head, .motion-on .s07 .auditor__block, .motion-on .s07 .auditor__score, .motion-on .s07 .weights__grid,
  .motion-on .s07 .weights figcaption, .motion-on .s07 .auditor__score-copy .h3, .motion-on .s07 .auditor__score-copy p, .motion-on .s07 .cta-cell { opacity: 0; }

  /* A · analizamos */
  .motion-on .s07 .auditor__head { position: absolute; z-index: 2; left: 0; top: 24%; display: block; width: calc(var(--m) * 6.2); }
  .motion-on .s07 .auditor__title { font-size: clamp(3.5rem, 1.5rem + 5.4vw, 9.5rem); }
  .motion-on .s07 .auditor__head .lead { max-width: 24ch; margin-top: clamp(1.5rem, 4vh, 2.75rem); font-size: clamp(1.15rem, .9rem + .75vw, 1.75rem); }
  .motion-on .s07 .auditor__block { position: absolute; z-index: 2; margin: 0; }
  .motion-on .s07 .auditor__block:not(.auditor__checks) { left: calc(var(--m) * 7); top: 24%; width: calc(var(--m) * 3.4); }
  .motion-on .s07 .auditor__checks { left: calc(var(--m) * 10.7); top: 24%; width: calc(var(--m) * 1.3); }
  .motion-on .s07 .phases { display: block; border-bottom: 1px solid var(--rule); }
  .motion-on .s07 .phases li { display: flex; flex-direction: row; align-items: center; gap: .9rem; min-height: clamp(2.6rem, 6.4vh, 3.6rem); padding: 0; border-top: 1px solid var(--rule); color: var(--muted); font-size: clamp(.95rem, .8rem + .35vw, 1.2rem); }
  .motion-on .s07 .phases li.is-on { color: var(--ink); }
  .motion-on .s07 .phases li.is-done { color: rgba(244, 245, 247, .72); }
  .motion-on .s07 .phases__cell { width: 1.15rem; border-color: var(--rule); background: none; box-shadow: none; }
  .motion-on .s07 .phases li:first-child .phases__cell { border-color: var(--rule); background: none; box-shadow: none; }
  .motion-on .s07 .phases li.is-done .phases__cell { border-color: transparent; background: rgba(244, 245, 247, .5); }
  .motion-on .s07 .checks { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wow4-ticker { display: grid; gap: .3rem; color: var(--muted); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .74rem; line-height: 1.5; letter-spacing: .01em; white-space: nowrap; }
  .wow4-ticker span { display: block; overflow: hidden; text-overflow: ellipsis; opacity: .4; }
  .wow4-ticker span:last-child { color: var(--ink); opacity: 1; }

  /* B · cómo puntuamos · C · tu turno */
  .motion-on .s07 .auditor__score { position: absolute; z-index: 2; inset: 0; display: block; margin: 0; padding: 0; border: 0; --gw: min(calc(var(--m) * 4.6), calc(var(--stage-h) * .62)); --gtop: calc((var(--stage-h) - var(--gw)) / 2 + 1.25rem); }
  .motion-on .s07 .weights, .motion-on .s07 .auditor__score-copy { display: contents; }
  .motion-on .s07 .weights__grid { position: absolute; left: calc(var(--m) * 6.6); top: var(--gtop); width: var(--gw); gap: 4px; }
  .motion-on .s07 .weights__grid i { border-color: rgba(244, 245, 247, .1); background: none; }
  .motion-on .s07 .weights__grid i.on[data-b="0"] { border-color: transparent; background: var(--ink); }
  .motion-on .s07 .weights__grid i.on[data-b="1"] { border-color: transparent; background: rgba(244, 245, 247, .55); }
  .motion-on .s07 .weights__grid i.on[data-b="2"] { border-color: transparent; background: rgba(244, 245, 247, .26); }
  .motion-on .s07 .weights__grid i.on[data-b="3"] { border-color: rgba(244, 245, 247, .5); background: rgba(244, 245, 247, .07); }
  .motion-on .s07 .weights__legend [data-w="trust"]::before { border-color: rgba(244, 245, 247, .5); background: rgba(244, 245, 247, .07); }
  .motion-on .s07 .weights figcaption { position: absolute; left: 0; top: var(--gtop); width: calc(var(--m) * 5.4); }
  .motion-on .s07 .weights__caption { margin: 0; max-width: 16ch; color: var(--ink); font-size: clamp(1.7rem, 1rem + 1.8vw, 3.2rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
  .motion-on .s07 .weights__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; margin-top: clamp(1.75rem, 5vh, 3rem); }
  .motion-on .s07 .weights__legend div { opacity: .28; }
  .motion-on .s07 .weights__legend div.is-on { opacity: 1; }
  .motion-on .s07 .weights__thresholds { margin-top: clamp(1.75rem, 5vh, 3rem); opacity: 0; }
  .motion-on .s07 .auditor__score-copy .h3 { position: absolute; left: 0; top: var(--gtop); width: calc(var(--m) * 5.6); font-size: clamp(2.2rem, 1rem + 3.2vw, 5rem); }
  .motion-on .s07 .auditor__score-copy p { position: absolute; left: 0; top: calc(var(--gtop) + clamp(7rem, 2.5rem + 7.5vw, 12.5rem)); max-width: 30ch; margin: 0; font-size: clamp(1rem, .85rem + .4vw, 1.3rem); }
  .motion-on .s07 .cta-cell { position: absolute; left: calc(var(--m) * 6.6); top: var(--gtop); width: var(--gw); min-height: clamp(4.5rem, 11vh, 7rem); margin: 0; font-size: clamp(1.05rem, .85rem + .6vw, 1.5rem); }
  .motion-on .s07 a { pointer-events: auto; }
}

/* Tablet: mismas tres etapas, en vertical y sin la cinta de comprobaciones */
@media (min-width: 700px) and (max-width: 1099px) {
  .motion-on .s07 .auditor__head { top: 9%; width: 100%; }
  .motion-on .s07 .auditor__block:not(.auditor__checks) { left: 0; top: 44%; width: 100%; }
  .motion-on .s07 .auditor__checks { display: none; }
  .motion-on .s07 .auditor__score { --gw: min(62vw, calc(var(--stage-h) * .4)); --gtop: calc(var(--stage-h) * .5); }
  .motion-on .s07 .weights__grid, .motion-on .s07 .cta-cell { left: calc(50% - var(--gw) / 2); }
  .motion-on .s07 .weights figcaption { top: calc(clamp(.75rem, 2.5vh, 1.75rem) + 3.25rem); width: 100%; }
  .motion-on .s07 .weights__caption { font-size: clamp(1.5rem, .9rem + 1.5vw, 2.4rem); }
  .motion-on .s07 .weights__legend { margin-top: clamp(1rem, 3vh, 2rem); }
  .motion-on .s07 .weights__legend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .motion-on .s07 .weights__thresholds { display: none; }
  .motion-on .s07 .auditor__score-copy .h3 { top: 12%; width: 100%; }
  .motion-on .s07 .auditor__score-copy p { top: calc(12% + clamp(6rem, 2rem + 8vw, 9rem)); }
}

/* Móvil: sin sticky. Fases como lista editorial, retícula que se completa al entrar, CTA a todo el ancho */
@media (max-width: 699px) {
  .motion-on .s07 .phases li { color: var(--muted); }
  .motion-on .s07 .phases li.is-on { color: var(--ink); }
  .motion-on .s07 .phases li.is-done { color: rgba(244, 245, 247, .72); }
  .motion-on .s07 .phases li:first-child .phases__cell { border-color: var(--rule); background: none; box-shadow: none; }
  .motion-on .s07 .phases li.is-on .phases__cell { border-color: transparent; background: var(--cell-lit); box-shadow: var(--cell-glow); }
  .motion-on .s07 .phases li.is-done .phases__cell { border-color: transparent; background: rgba(244, 245, 247, .5); }
  .motion-on .s07 .checks { font-family: var(--sans); font-size: .95rem; line-height: 1.7; }
  .motion-on .s07 .weights { width: 100%; }
  .motion-on .s07 .weights__grid i { border-color: rgba(244, 245, 247, .1); background: none; }
  .motion-on .s07 .weights__grid i.on[data-b="0"] { border-color: transparent; background: var(--ink); }
  .motion-on .s07 .weights__grid i.on[data-b="1"] { border-color: transparent; background: rgba(244, 245, 247, .55); }
  .motion-on .s07 .weights__grid i.on[data-b="2"] { border-color: transparent; background: rgba(244, 245, 247, .26); }
  .motion-on .s07 .weights__grid i.on[data-b="3"] { border-color: rgba(244, 245, 247, .5); background: rgba(244, 245, 247, .07); }
  .motion-on .s07 .weights__legend [data-w="trust"]::before { border-color: rgba(244, 245, 247, .5); background: rgba(244, 245, 247, .07); }
  .motion-on .s07 .weights__legend div { opacity: .28; }
  .motion-on .s07 .weights__legend div.is-on { opacity: 1; }
  .motion-on .s07 .cta-cell { display: flex; width: 100%; min-height: 4.5rem; }
  .motion-on .s07 .weights { order: -1; }
  .motion-on .s07 .auditor__score-copy { align-items: stretch; }
}

/* =====================================================================
   MOTION · Fase F — Cierre: S08 Método + S09 CTA (sin sticky, sin scrub)
   ===================================================================== */
.close-seed { display: none; }
.motion-on .s08 .method__list { position: relative; }
.motion-on .s08 .method__cell.cell--lit { border-color: var(--rule); background: none; }
.motion-on .s08 .method__list li { transition: opacity .16s steps(2, end); opacity: .34; }
.motion-on .s08 .method__list li.is-done { opacity: .7; }
.motion-on .s08 .method__list li.is-on { opacity: 1; }
@media (min-width: 700px) {
  .motion-on .close-seed { display: block; position: absolute; z-index: 1; left: 0; top: 0; background: var(--cell-lit); pointer-events: none; }
}
@media (max-width: 699px) {
  .motion-on .s08 .method__list li.is-on .method__cell { border-color: transparent; background: var(--cell-lit); }
  .motion-on .s08 .method__list li.is-done .method__cell { border-color: transparent; background: rgba(8, 9, 11, .35); }
}

/* CTA final: la celda encendida. En FULL, el relleno se enciende con clip-path al pasar o enfocar. */
.end__cta:hover > span[aria-hidden], .end__cta:focus-visible > span[aria-hidden] { transform: translate(3px, -3px); }
html[data-motion="full"] .end__cta { position: relative; isolation: isolate; }
html[data-motion="full"] .end__cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(45deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08)); clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease); pointer-events: none; }
html[data-motion="full"] .end__cta:hover::before, html[data-motion="full"] .end__cta:focus-visible::before { clip-path: inset(0 0 0 0); }