/* EDGE · edgepowerup.com
   Hoja única. Orden: fuentes, tokens, base, estructura, componentes, piezas, movimiento. */

/* ---------- Fuentes propias ---------- */
@font-face { font-family: "Manrope"; src: url("/fuentes/manrope-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fuentes/manrope-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fuentes/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fuentes/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fuentes/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fuentes/fraunces-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

/* Respaldo con size-adjust solo donde cambia el ancho: Inter es 6 % más ancha que Arial (medido con fontTools).
   Manrope, Fraunces y JetBrains Mono difieren menos de 1 % de Arial, Georgia y Courier New, y el interlineado es fijo:
   sus caras local() costaban hasta 0.9 s de LCP en móvil con CPU lenta sin mejorar el CLS (≈0 con o sin ellas). */
@font-face { font-family: "Inter Respaldo"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 106.06%; ascent-override: 91.34%; descent-override: 22.74%; line-gap-override: 0%; }
@font-face { font-family: "Inter Respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 101.06%; ascent-override: 95.86%; descent-override: 23.87%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --tinta: #0A0A0A;
  --tinta-2: #262626;
  --blanco: #F5F3F1;
  --superficie: #FAF9F5;
  --hoja: #FFFFFF;
  --borde: #E0DDD6;
  --tenue: #737373;      /* trazos y texto grande */
  --tenue-txt: #666666;  /* texto chico: 5.2:1 sobre el blanco cálido (AA) */
  --sobre-tinta: #CFCBC2; /* texto secundario sobre tinta: 12:1 */
  --amarillo: #E8FF00;
  --oro: #C9A800;
  --tinte: #F0F6C0;
  --verde: #16A34A;
  --ambar: #E0A100;
  --rojo: #DC2626;
  --apagado: #D6D3CC;

  --f-titulo: "Manrope", Arial, Helvetica, sans-serif;
  --f-ancla: "Fraunces", Georgia, "Times New Roman", serif;
  --f-texto: "Inter", "Inter Respaldo", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "Courier New", ui-monospace, monospace;

  --cab: 56px;
  --margen: clamp(16px, 4.2vw, 56px);
  --ancho: 1320px;
  --hueco: clamp(16px, 2vw, 24px);
  --seccion: clamp(80px, 10vw, 144px);
  --radio: 16px;
  --curva: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 720px) and (min-height: 501px) { :root { --cab: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 16px); }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, picture { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .24em; }
button { font: inherit; color: inherit; }
::selection { background: var(--amarillo); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }

h1, h2, .titulo {
  font-family: var(--f-titulo);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}
h3 { font-family: var(--f-titulo); font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; }
p { text-wrap: pretty; }

/* Palabra ancla: Fraunces Italic, solo en el h1 y en el cierre. 1.15em iguala su altura x (0.47) con la de Manrope (0.54). */
.ancla { font-family: var(--f-ancla); font-style: italic; font-weight: 500; letter-spacing: -0.012em; font-size: 1.15em; line-height: 1; }

/* Resaltador: franja bajo la palabra que se dibuja de izquierda a derecha una sola vez. */
.resaltado { position: relative; z-index: 0; padding-inline: .04em; white-space: nowrap; }
.resaltado::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -.06em .12em -.04em;
  height: .38em;
  border-radius: .06em;
  background: var(--amarillo);
  transform-origin: 0 50%;
}

/* Mono solo para cifras, precios, fuentes y estados del semáforo. */
.mono {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: .75rem;
  line-height: 1.45;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue-txt);
}
/* Etiquetas: Inter 600, sin mayúsculas forzadas. */
.etiqueta { font-family: var(--f-texto); font-weight: 600; font-size: .8125rem; line-height: 1.4; color: var(--tenue-txt); }

.oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

.saltar {
  position: absolute; left: var(--margen); top: -80px; z-index: 100;
  padding: 10px 14px; border-radius: 10px;
  background: var(--tinta); color: var(--blanco);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 8px; }

/* Secciones que nunca están en la primera pantalla: el navegador no las maqueta hasta que se acercan. */
.diferido { content-visibility: auto; contain-intrinsic-size: auto none auto 820px; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanco);
  view-transition-name: cabecera;
  container: cabecera / scroll-state;
}
.cabecera-barra { border-bottom: 1px solid transparent; transition: border-color .25s; }
@container cabecera scroll-state(stuck: top) {
  .cabecera-barra { border-bottom-color: var(--borde); }
}
.cabecera-int { min-height: var(--cab); display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); }

.logo {
  margin-right: auto;
  padding-block: 8px;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.045em;
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--oro); }

.nav { display: flex; gap: clamp(12px, 2.4vw, 30px); }
.nav a { padding-block: 10px; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
/* Pantallas angostas o texto grande (el em sigue al tamaño de letra del usuario):
   en el home se va la navegación; en las de producto queda solo el enlace actual. */
@media (max-width: 24em) {
  .nav:not(:has([aria-current])) { display: none; }
  .nav a:not([aria-current]) { display: none; }
}

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 10px 22px;
  border: 0; border-radius: 12px;
  background: var(--tinta); color: var(--blanco);
  font: 600 1rem/1.2 var(--f-texto);
  text-align: center; text-decoration: none; text-wrap: balance;
  cursor: pointer;
  transition: background-color .2s var(--curva);
}
.boton:hover { background: var(--tinta-2); }
.boton--linea { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.boton--linea:hover { background: rgb(10 10 10 / .06); }
.boton--chico { min-height: 40px; padding: 6px 15px; border-radius: 10px; font-size: .9375rem; }
.boton--acento { background: var(--amarillo); color: var(--tinta); }
.boton--acento:hover { background: var(--blanco); }

.enlace { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.enlace:hover { text-decoration-thickness: 2.5px; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(12px, 3vh, 48px) clamp(20px, 5vh, 64px); }
.hero-rejilla { display: flex; flex-direction: column; gap: 18px; }

.hero-titulo .linea-a {
  display: block;
  font-size: clamp(2rem, 1.05rem + 3.4vw, 4.375rem);
  line-height: 1.04;
}
.hero-titulo .linea-b {
  display: block;
  max-width: 31ch;
  margin-top: .6em;
  font-weight: 700;
  font-size: clamp(1.125rem, .86rem + 1vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -0.028em;
}
.hero-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hero-botones .boton { padding-inline: 10px; }
@media (max-width: 25em) { .hero-botones .boton { font-size: .9375rem; min-height: 50px; } }

/* Hero de producto */
.hero-texto h1 { font-size: clamp(2rem, 1.15rem + 2.55vw, 3.5rem); }
.bajada { margin-top: 18px; max-width: 36em; font-size: clamp(1.0625rem, .98rem + .38vw, 1.25rem); color: var(--tenue-txt); }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }

/* Marcos: el del video, 16:9 a lo ancho también en el celular; las piezas de producto, más altas en vertical. */
.hero .marco { aspect-ratio: 16 / 9; }
.hero--producto .marco { aspect-ratio: 4 / 5; }
@media (min-width: 600px) { .hero--producto .marco { aspect-ratio: 4 / 3; } }

/* Escritorio, y celular en horizontal: texto 5/12, marco 7/12, para que los botones queden en pantalla. */
@media (min-width: 960px) and (orientation: landscape), (orientation: landscape) and (max-height: 500px) {
  .hero-rejilla {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: clamp(24px, 3.6vw, 64px);
  }
  /* los dos botones van bajo el video, uno por mitad: las flechas del cartel final caen en cada uno */
  .hero--home .hero-rejilla {
    grid-template-rows: 1fr auto 1fr auto;
    grid-template-areas: ". marco" "titulo marco" ". marco" ". botones";
  }
  .hero--home .hero-botones { margin-top: 14px; }
  .hero-titulo { grid-area: titulo; }
  .hero-botones { grid-area: botones; margin-top: clamp(20px, 4.5vh, 48px); gap: 12px; }
  .hero--producto .hero-rejilla { grid-template-rows: 1fr auto 1fr; grid-template-areas: ". marco" "texto marco" ". marco"; }
  .hero-texto { grid-area: texto; }
  .hero .marco, .hero--producto .marco { grid-area: marco; aspect-ratio: 16 / 9; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding-block: 10px 16px; }
  .hero-titulo .linea-a { font-size: clamp(1.5rem, 7.4vh, 2.5rem); }
  .hero-titulo .linea-b { font-size: clamp(.9375rem, 4.4vh, 1.125rem); margin-top: .5em; }
  .hero-botones .boton { min-height: 46px; font-size: .9375rem; }
  .hero-texto h1 { font-size: clamp(1.5rem, 7.4vh, 2.25rem); }
  .bajada { margin-top: 10px; font-size: 1rem; }
  .hero-acciones { margin-top: 16px; }
}

/* ---------- Marco del video y de las piezas que lo esperan ---------- */
.marco {
  position: relative;
  margin: 0;
  min-width: 0; /* sin esto, al no ser contenedor de scroll, su mínimo en la rejilla crece y le quita ancho al texto */
  overflow: clip; /* clip y no hidden: hidden lo volvería contenedor de scroll y las líneas de tiempo view() de sus piezas no seguirían a la página */
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--blanco);
  isolation: isolate;
  container: marco / size;
  view-transition-name: marco;
}
/* Fondo provisional (radar sobrio en CSS) mientras llega /media/home-poster.jpg; el póster real lo tapa. */
.marco--video {
  background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cg fill='none' stroke='%231C1C1C' stroke-width='2'%3E%3Ccircle cx='800' cy='450' r='110'/%3E%3Ccircle cx='800' cy='450' r='220'/%3E%3Ccircle cx='800' cy='450' r='330'/%3E%3Ccircle cx='800' cy='450' r='440'/%3E%3Ccircle cx='800' cy='450' r='550'/%3E%3Ccircle cx='800' cy='450' r='660'/%3E%3Ccircle cx='800' cy='450' r='770'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
.marco-poster, .marco video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.marco video { opacity: 0; transition: opacity .5s ease; }
.marco[data-estado="reproduciendo"] video,
.marco[data-estado="pausado"] video,
.marco[data-estado="terminado"] video { opacity: 1; }

.controles {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: flex; gap: 8px;
  visibility: hidden;
}
.marco[data-estado="reproduciendo"] .controles,
.marco[data-estado="pausado"] .controles,
.marco[data-estado="terminado"] .controles { visibility: visible; }

.control {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 36px; min-height: 36px; padding: 0 12px;
  border: 1px solid #3A3A3A; border-radius: 10px;
  background: var(--tinta); color: var(--blanco);
  font: 600 .8125rem/1 var(--f-texto);
  cursor: pointer;
}
.control:hover { border-color: var(--blanco); }
.control:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; box-shadow: 0 0 0 4px var(--tinta); }
.control svg { width: 16px; height: 16px; flex: none; }
.control--icono { padding: 0; width: 36px; }
.control--sonido { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }
.control--sonido:hover { background: var(--hoja); }
@media (pointer: coarse) {
  .control { min-height: 44px; min-width: 44px; }
  .control--icono { width: 44px; }
}
.control .i-b { display: none; }
.marco[data-estado="pausado"] .control--pausa .i-a,
.marco[data-sonido="si"] .control--sonido .i-a,
.control--cc[aria-pressed="false"] .i-a { display: none; }
.marco[data-estado="pausado"] .control--pausa .i-b,
.marco[data-sonido="si"] .control--sonido .i-b,
.control--cc[aria-pressed="false"] .i-b { display: block; }
.marco[data-estado="terminado"] .control--pausa { display: none; }

.control--centro {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  translate: -50% -50%;
  display: none;
  min-height: 48px; padding: 0 18px;
  background: var(--blanco); color: var(--tinta); border-color: var(--blanco);
  font-size: .9375rem;
}
.marco[data-estado="bloqueado"] .control--reproducir,
.marco[data-estado="terminado"] .control--repetir { display: inline-flex; }

.subtitulos {
  position: absolute; left: 50%; bottom: 62px; z-index: 2;
  translate: -50% 0;
  width: max-content; max-width: min(88%, 42ch);
  padding: 5px 12px 6px;
  border-radius: 8px;
  background: var(--tinta);
  color: #FFFFFF;
  font-family: var(--f-texto); font-size: clamp(.875rem, .8rem + .35vw, 1.0625rem); line-height: 1.38;
  text-align: center;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.subtitulos[hidden], .marco[data-cc="no"] .subtitulos { display: none; }
@media (pointer: coarse) { .subtitulos { bottom: 70px; } }

/* ---------- Secciones ---------- */
.seccion { padding-block: calc(var(--seccion) / 2); }
.seccion--tinte { margin-block: calc(var(--seccion) / 4); padding-block: calc(var(--seccion) * .7); background: var(--tinte); }
.seccion-titulo { max-width: 20ch; font-size: clamp(2rem, 1.25rem + 2.3vw, 3.5rem); }
.seccion-bajada { margin-top: 18px; max-width: 40ch; font-size: clamp(1.0625rem, .98rem + .4vw, 1.3125rem); color: var(--tenue-txt); }

.hoja { background: var(--hoja); border: 1px solid var(--borde); border-radius: 20px; }

.filete { position: relative; }
.filete::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: var(--borde);
  transform-origin: 0 50%;
}
.filete--tinta::before { background: var(--tinta); }

.dos { display: grid; gap: 48px; margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 760px) { .dos { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 96px); } }

/* Dato con su fuente: la frase en Manrope, la fuente y el año en mono. */
.dato { margin-top: 26px; max-width: 24ch; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); line-height: 1.25; letter-spacing: -0.02em; }
.fuente { margin-top: 10px; font-size: .6875rem; }

/* Casos */
.casos { padding-block: clamp(36px, 6vw, 72px) calc(var(--seccion) / 2); }
.casos-int { display: grid; gap: 28px; }
.casos-titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; }
.casos-lista { display: grid; gap: 30px; }
.caso { padding-top: 18px; }
.caso-nombre { font-family: var(--f-titulo); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1.25; }
.caso-giro { margin-top: 4px; }
.caso-linea { margin-top: 12px; max-width: 34ch; }
@media (min-width: 900px) {
  .casos-int { grid-template-columns: 3fr 9fr; column-gap: var(--hueco); }
  .casos-titulo { padding-top: 16px; }
  .casos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--hueco); }
}

/* Problema */
.frente { padding-top: 26px; }
.frente h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.frente > p:first-of-type { margin-top: 12px; max-width: 38ch; font-size: 1.0625rem; }

/* Solución */
.solucion-titulo { max-width: 24ch; }
@media (min-width: 900px) { .solucion-titulo { margin-inline: auto; text-align: center; } }
.horquilla { display: none; }
.servicios { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 64px); }
@media (min-width: 900px) {
  .servicios { grid-template-columns: 1fr 1fr; gap: var(--hueco); margin-top: 0; }
  .horquilla { display: block; width: 100%; height: clamp(56px, 6vw, 88px); margin-top: clamp(28px, 4vw, 48px); overflow: visible; }
}
.horquilla path { fill: none; stroke: var(--tinta); stroke-width: 1.1; stroke-dasharray: 1; }

.servicio { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); }
.servicio-nombre { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); letter-spacing: -0.035em; }
.servicio-promesa { margin-top: 10px; max-width: 26ch; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); line-height: 1.28; letter-spacing: -0.02em; }
.servicio-lista { margin-top: 28px; }
.servicio-lista li { padding: 14px 0; border-top: 1px solid var(--borde); }
.servicio .enlace { align-self: flex-start; margin-top: 22px; margin-bottom: 30px; }
.servicio-plus { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--tinta); display: grid; gap: 6px; }
.servicio-plus-nombre { font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; }
.servicio-plus p { max-width: 40ch; }
.servicio-plus .mono { color: var(--tinta); }

/* Nosotros */
.nosotros-int { display: grid; gap: 48px; align-items: center; }
.nosotros-cuerpo { margin-top: 28px; max-width: 46ch; font-size: 1.0625rem; }
.nosotros-lema { margin-top: 28px; max-width: 30ch; padding-top: 20px; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.3; letter-spacing: -0.02em; }
@media (min-width: 900px) { .nosotros-int { grid-template-columns: 7fr 5fr; column-gap: var(--hueco); } }

/* Dial: la pieza metalizada de cada página (degradado plano negro→amarillo, sin grano ni destello). */
.pieza-dial { justify-self: center; width: min(100%, 400px); }
.pieza-dial figcaption { margin-top: 16px; text-align: center; }
.dial { width: 100%; height: auto; overflow: visible; }

/* Columnas con título pegajoso */
.dos-col { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .dos-col { grid-template-columns: 5fr 7fr; column-gap: var(--hueco); align-items: start; }
  .pegajoso { position: sticky; top: calc(var(--cab) + 40px); }
}
.paso { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0 12px; padding: 26px 0 30px; }
.paso-num { padding-top: .35em; color: var(--tinta); }
.paso h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); }
.paso-cuando { margin-top: 6px; }
.paso p:last-child { margin-top: 12px; max-width: 48ch; }
.pasos-nota { margin-top: 8px; padding-top: 22px; font-weight: 600; }

.capacidad { padding: 26px 0 30px; }
.capacidad h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.capacidad p { margin-top: 8px; max-width: 46ch; }

.semaforo { display: grid; }
.semaforo li { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; padding: 22px 0 24px; }
.semaforo p { font-size: 1.125rem; max-width: 40ch; }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--tenue); translate: 0 -1px; }
.punto--verde { background: var(--verde); }
.punto--ambar { background: var(--ambar); }
.punto--rojo { background: var(--rojo); }

/* Afirmación con dato y dial */
.afirmacion-titulo { max-width: 22ch; font-size: clamp(2.125rem, 1.2rem + 3vw, 4.25rem); }
.afirmacion-pie { display: grid; gap: 40px; margin-top: clamp(32px, 5vw, 64px); padding-top: 28px; align-items: center; }
.afirmacion-pie > div > p:first-child { max-width: 44ch; font-size: 1.125rem; }
@media (min-width: 900px) { .afirmacion-pie { grid-template-columns: 7fr 5fr; column-gap: var(--hueco); } }

/* Reporte de Power Up (el producto): tarjeta blanca dentro del marco del hero */
.marco--reporte { display: grid; place-items: center; }
.reporte {
  width: min(92cqw, 36em);
  padding: 1.4em 1.5em 1.5em;
  border-radius: 1em;
  background: var(--hoja);
  color: var(--tinta);
  font-size: clamp(.75rem, 3.8cqw, 1rem);
}
@container marco (aspect-ratio > 1.2) {
  .reporte { width: min(86cqw, 46em); font-size: clamp(.6875rem, 3.3cqh, 1rem); }
  .reporte-cuerpo { grid-template-columns: 1.2fr 1fr; column-gap: 2.2em; align-items: start; }
}
.reporte-cabeza { display: flex; align-items: center; gap: .7em; font-size: .875em; font-weight: 600; }
.reporte-cabeza .logo { margin: 0; padding: 0; font-size: 1.1em; }
.reporte-cabeza .etiqueta { margin-left: auto; font-size: 1em; }
.reporte-cuerpo { display: grid; gap: 1.3em; margin-top: 1.1em; }
.reporte-titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 1.55em; line-height: 1.1; letter-spacing: -0.03em; }
.reporte-filas { margin-top: .7em; }
.reporte-filas li { display: flex; align-items: center; gap: .8em; padding: .72em 0; border-top: 1px solid var(--borde); }
.reporte-filas .punto { width: .65em; height: .65em; translate: 0; }
.reporte-filas .mono { margin-left: auto; font-size: .72em; color: var(--tinta); }
.reporte-b { padding-top: .2em; }
.reporte-b .etiqueta { font-size: .85em; }
.reporte-acciones { margin-top: .6em; display: grid; gap: .5em; counter-reset: accion; }
.reporte-acciones li { display: grid; grid-template-columns: 1.6em 1fr; counter-increment: accion; line-height: 1.35; }
.reporte-acciones li::before { content: counter(accion); font-family: var(--f-mono); font-size: .8em; padding-top: .18em; color: var(--tenue-txt); }

/* Ficha Plus */
.ficha { display: grid; gap: 32px; padding: clamp(24px, 4vw, 56px); }
.ficha-titulo { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.1; }
.ficha-texto p { margin-top: 16px; max-width: 46ch; font-size: 1.0625rem; }
.ficha-texto .ficha-nota { color: var(--tenue-txt); }
.ficha-precio { display: flex; flex-direction: column; align-items: flex-start; }
.precio { margin-top: 6px; font-family: var(--f-mono); font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.3vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; color: var(--tinta); }
.ficha-letra { margin-top: 14px; max-width: 34ch; font-size: .9375rem; color: var(--tenue-txt); }
.ficha-precio .boton { margin-top: 26px; }
@media (min-width: 900px) { .ficha { grid-template-columns: 7fr 5fr; column-gap: clamp(32px, 5vw, 80px); align-items: end; } }

/* Preguntas */
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  letter-spacing: -0.02em; line-height: 1.3;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover .pregunta-icono { background: rgb(10 10 10 / .06); }
.pregunta-icono { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--borde); transition: background-color .2s; }
.pregunta-icono svg { width: 18px; height: 18px; transition: rotate .3s var(--curva); }
.pregunta[open] .pregunta-icono svg { rotate: 180deg; }
.pregunta-resp { padding: 0 56px 26px 0; }
.pregunta-resp p { max-width: 58ch; }

/* Cierre en tinta: título en blanco cálido y el botón amarillo como único acento. */
.cierre { margin-top: calc(var(--seccion) / 2); background: var(--tinta); color: var(--blanco); }
.cierre-int { display: grid; justify-items: center; text-align: center; padding-block: clamp(88px, 12vw, 168px); }
.cierre-titulo { color: var(--blanco); font-size: clamp(2.75rem, 1.6rem + 4.6vw, 6rem); line-height: 1; }
.cierre-texto { margin-top: 22px; max-width: 36ch; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); color: var(--sobre-tinta); }
.cierre .boton { margin-top: 34px; min-width: 200px; }
.cierre :focus-visible { outline-color: var(--blanco); }

/* Pie */
.pie { padding-block: 40px 36px; }
.pie-int { display: grid; gap: 28px; }
.pie-marca p { margin-top: 10px; max-width: 30ch; font-size: .9375rem; color: var(--tenue-txt); }
.pie-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .9375rem; }
.pie-nav a { text-decoration: none; padding-block: 4px; }
.pie-nav a:hover { text-decoration: underline; }
.pie-legal { font-size: .8125rem; color: var(--tenue-txt); }
@media (min-width: 900px) {
  .pie-int { grid-template-columns: 5fr 7fr; align-items: end; }
  .pie-nav { justify-content: flex-end; }
  .pie-legal { grid-column: 1 / -1; }
}

/* 404 */
.extravio { padding-block: clamp(64px, 12vw, 160px); }
.extravio h1 { font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); max-width: 14ch; }
.extravio p { margin-top: 20px; font-size: 1.125rem; color: var(--tenue-txt); }
.extravio .hero-acciones { margin-top: 32px; }
.extravio .extravio-codigo { margin-top: 56px; font-size: .6875rem; }

/* ---------- Pieza Sales Up: 20 anuncios de muestra; 19 se apagan y uno queda ---------- */
.anuncios {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2.4cqw;
  align-content: center;
  padding: 5cqh 13cqw 7cqh;
}
@container marco (aspect-ratio > 1.2) {
  .anuncios { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1.4cqw; padding: 8cqh 4.5cqw 13cqh; }
}
.anuncio { position: relative; }
.anuncio img { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 5px; filter: grayscale(1) brightness(.42); }
.anuncio--ganador img { filter: none; }
.sello {
  position: absolute; left: 50%; top: calc(100% + 6px); z-index: 1;
  translate: -50% 0;
  display: inline-flex; align-items: center; gap: .35em;
  padding: .32em .55em;
  border-radius: 6px;
  background: var(--amarillo); color: var(--tinta);
  font: 600 .75rem/1 var(--f-texto);
  white-space: nowrap;
}
.sello svg { width: .9em; height: .9em; flex: none; max-width: none; }

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
  ::view-transition-group(marco) { animation-duration: .5s; animation-timing-function: var(--curva); }

  .resaltado::before { animation: resaltar .75s cubic-bezier(.65, 0, .25, 1) .5s both; }

  .pregunta::details-content { transition: block-size .32s var(--curva), content-visibility .32s allow-discrete; }
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .pregunta::details-content { block-size: 0; overflow: clip; }
    .pregunta[open]::details-content { block-size: auto; }
  }

  /* Al ritmo del scroll y solo con CSS. Todo es visible por defecto: sin soporte, queda el estado final.
     Los trazos se completan al terminar de entrar («entry 100%»); los cambios de estado son de golpe (steps), sin medias tintas. */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .filete::before { animation: trazar linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .horquilla, .dial { view-timeline: --trazo block; }
    .horquilla path, .dial .dial-trazo { animation: dibujar linear both; animation-timeline: --trazo; animation-range: entry 0% entry 100%; }

    .anuncios { view-timeline: --anuncios block; }
    .anuncio:not(.anuncio--ganador) img {
      animation: apagar-anuncio linear both;
      animation-timeline: --anuncios;
      animation-timing-function: steps(1, end);
      animation-range: entry calc(8% + var(--i) * 4.6%) entry calc(9% + var(--i) * 4.6%);
    }

    .reporte-filas { view-timeline: --semaforo block; }
    .reporte-filas .punto {
      animation: encender-punto linear both;
      animation-timeline: --semaforo;
      animation-timing-function: steps(1, end);
      animation-range: entry calc(30% + var(--i) * 24%) entry calc(31% + var(--i) * 24%);
    }
  }
}

@keyframes resaltar { from { transform: scaleX(0); } }
@keyframes dibujar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes trazar { from { transform: scaleX(0); } }
@keyframes apagar-anuncio { from { filter: none; } to { filter: grayscale(1) brightness(.42); } }
@keyframes encender-punto { from { background-color: var(--apagado); } }

@media (forced-colors: active) {
  .resaltado::before { display: none; }
  .control, .boton { border: 1px solid ButtonText; }
}