/* La portada de oivim.com.
   Los tokens son los de DESIGN.md: la misma pizarra, el mismo esmalte y
   el mismo ámbar que la app, para que la web y el producto se lean como
   la misma cosa. El ámbar sigue significando «acción disponible»: aquí
   lo lleva «Escríbenos», y en la demo, lo mismo que en la app.
   La política de privacidad sigue con estilo.css; esta hoja es solo de
   la portada. */

@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url(/fuentes/barlow-regular.woff) format("woff"); }
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url(/fuentes/barlow-medium.woff) format("woff"); }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(/fuentes/barlow-semibold.woff) format("woff"); }
@font-face { font-family: Barlow; font-weight: 800; font-display: swap; src: url(/fuentes/barlow-extrabold.woff) format("woff"); }

/* ── Tokens ──────────────────────────────────────────────────────────── */

:root {
  --ground:     #F0F3F2;
  --plate:      #FFFFFF;
  --plate-2:    #E3E9E8;
  --ink:        #10191C;
  --ink-dim:    #4A5D63;
  --rule:       #C3D0CF;
  --edge:       rgba(16, 25, 28, .06);
  --focus:      #10191C;
  --amber:      #FFB627;
  --amber-ink:  #6B4400;
  --amber-wash: #FFEFD2;
  --amber-edge: #8F5A00;
  --on-amber:   #1B1305;
  --teal:       #0A5C52;
  --teal-wash:  #D7EDE9;
  --coral:      #96201A;
  --coral-wash: #FBE3E1;
  --shadow-1:   0 1px 2px rgba(16, 25, 28, .08);
  --shadow-2:   0 2px 4px rgba(16, 25, 28, .06), 0 12px 28px rgba(16, 25, 28, .10);

  --r-md: 16px;
  --r-lg: 22px;

  --gutter: clamp(16px, 4.5vw, 56px);
  --ancho: 1280px;
  --sale: cubic-bezier(.16, 1, .3, 1);   /* exponencial hacia fuera */

  color-scheme: light;
}

/* El tablero: las secciones oscuras. Redefine los tokens en su ámbito,
   así que todo lo que vive dentro hereda la versión oscura sin clases
   aparte. Son los valores del modo oscuro de DESIGN.md. */
.tablero,
.barra[data-tono="tablero"] {
  --ground:     #101A1E;
  --plate:      #1A282D;
  --plate-2:    #243740;
  --ink:        #F0F5F4;
  --ink-dim:    #9DB3B9;
  --rule:       #2B4048;
  --edge:       rgba(255, 255, 255, .07);
  --focus:      #FFB627;
  --amber-ink:  #FFC65A;
  --amber-edge: #FFC65A;
  --amber-wash: #3A2A08;
  --teal:       #6FD9C8;
  --teal-wash:  #12332F;
  --coral:      #FF8A80;
  --coral-wash: #3A1613;
  --shadow-1:   0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2:   0 2px 4px rgba(0, 0, 0, .4), 0 14px 32px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* Modo oscuro: la pizarra se hunde, y el tablero se hunde un paso más
   para que las secciones sigan alternando. Dos veces con los mismos
   valores, como manda DESIGN.md. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:     #101A1E;
    --plate:      #1A282D;
    --plate-2:    #243740;
    --ink:        #F0F5F4;
    --ink-dim:    #9DB3B9;
    --rule:       #2B4048;
    --edge:       rgba(255, 255, 255, .07);
    --focus:      #FFB627;
    --amber-ink:  #FFC65A;
    --amber-edge: #FFC65A;
    --amber-wash: #3A2A08;
    --teal:       #6FD9C8;
    --teal-wash:  #12332F;
    --coral:      #FF8A80;
    --coral-wash: #3A1613;
    --shadow-1:   0 1px 2px rgba(0, 0, 0, .45);
    --shadow-2:   0 2px 4px rgba(0, 0, 0, .4), 0 14px 32px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .tablero,
  :root:not([data-theme="light"]) .barra[data-tono="tablero"] {
    --ground:  #0A1215;
    --plate:   #16232A;
    --plate-2: #1F313A;
    --rule:    #24363D;
  }
}
:root[data-theme="dark"] {
  --ground:     #101A1E;
  --plate:      #1A282D;
  --plate-2:    #243740;
  --ink:        #F0F5F4;
  --ink-dim:    #9DB3B9;
  --rule:       #2B4048;
  --edge:       rgba(255, 255, 255, .07);
  --focus:      #FFB627;
  --amber-ink:  #FFC65A;
  --amber-edge: #FFC65A;
  --amber-wash: #3A2A08;
  --teal:       #6FD9C8;
  --teal-wash:  #12332F;
  --coral:      #FF8A80;
  --coral-wash: #3A1613;
  --shadow-1:   0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2:   0 2px 4px rgba(0, 0, 0, .4), 0 14px 32px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
:root[data-theme="dark"] .tablero,
:root[data-theme="dark"] .barra[data-tono="tablero"] {
  --ground:  #0A1215;
  --plate:   #16232A;
  --plate-2: #1F313A;
  --rule:    #24363D;
}

/* ── Base ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Barlow, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* 18 px de base: mucha de esta gente tiene además baja visión. */
  font-size: 1.125rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}

::selection { background: var(--amber); color: var(--on-amber); }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.saltar {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--amber); color: var(--on-amber);
  padding: 10px 16px; border-radius: 999px; font-weight: 600;
  text-decoration: none; transition: top .2s var(--sale);
}
.saltar:focus { top: 16px; }

.dentro {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Las secciones del tablero llevan su propio fondo. */
.tablero, .seccion, .pie { background: var(--ground); color: var(--ink); }

/* ── Tipografía ──────────────────────────────────────────────────────── */

.display {
  font-weight: 800;
  font-size: clamp(3rem, 1.6rem + 6.2vw, 6rem);
  line-height: .94;
  letter-spacing: -.028em;
}

.titular {
  font-weight: 800;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.022em;
  max-width: 17ch;
}

.entrada {
  font-size: clamp(1.2rem, 1.05rem + .55vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink-dim);
  max-width: 34em;
}

/* El rótulo de tablero: mayúsculas, peso máximo, tracking abierto. */
.fila__quien, .salida__que, .comparar__rotulo, .demo__quien, .dato dt {
  font-weight: 800;
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Botones ─────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px;
  font: 600 1.0625rem/1 Barlow, system-ui, sans-serif;
  text-decoration: none;
  transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
  white-space: nowrap;
}
.boton--accion {
  background: var(--amber);
  color: var(--on-amber);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--shadow-2);
}
.boton--accion:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 6px color-mix(in srgb, var(--amber) 30%, transparent), var(--shadow-2);
}
.boton--borde {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.boton--borde:hover { background: var(--plate); box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px var(--rule); }
.boton--chico { min-height: 44px; padding: 0 20px; font-size: 1rem; }
.boton--grande { min-height: 64px; padding: 0 40px; font-size: 1.25rem; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  transition: border-color .18s ease;
}
.enlace-flecha::after {
  content: ""; width: .9em; height: .9em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 5l7 7-7 7M20 12H4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--sale);
}
.enlace-flecha:hover { border-color: var(--ink); }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ── Barra ───────────────────────────────────────────────────────────── */

.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--ink);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.barra.con-fondo {
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--rule);
}
.barra__dentro {
  max-width: var(--ancho); margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.barra__nav {
  display: flex; gap: 4px; margin-left: auto;
}
.barra__nav a {
  font-weight: 600; font-size: 1rem; text-decoration: none;
  padding: 10px 14px; border-radius: 999px;
  color: var(--ink-dim);
  transition: color .18s ease, background-color .18s ease;
}
.barra__nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--plate) 70%, transparent); }

.marca {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
/* El icono de la app: «Oi» en tinta sobre ámbar, el palo de la i en
   blanco. Aquí la i va entera en tinta: a 34 px el blanco no se lee. */
.marca__oi {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--amber); color: #10191C;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em;
}
.marca__nombre { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }

/* ── Portada ─────────────────────────────────────────────────────────── */

.portada {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 120px 0 72px;
  overflow: hidden;
}
/* Las líneas del tablero, al fondo: una regla cada 64 px, casi nada. */
.portada::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 63px, var(--rule) 63px 64px);
  opacity: .35;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
.portada__dentro {
  position: relative;
  width: 100%; max-width: var(--ancho); margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.portada__texto { display: grid; gap: 28px; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.portada__demo { position: relative; }

/* La demo: el tablero de la app, de verdad interactivo. */
.demo {
  margin: 0;
  position: relative; z-index: 1;
  background: var(--plate);
  border-radius: 32px;
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow-2);
  padding: 14px 14px 16px;
  max-width: 440px;
  margin-left: auto;
  display: grid;
}
.demo__barra {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 6px 12px;
  border-bottom: 1px solid var(--rule);
}
.demo__crono { font-weight: 600; font-size: .875rem; color: var(--ink-dim); }

.demo__tablero {
  list-style: none; margin: 0; padding: 0 4px;
  height: 340px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
}
.demo__franja {
  min-height: 0; height: 0; overflow: hidden;
  margin: 0 4px;
  border-radius: 999px;
  font-weight: 500; font-size: .9375rem;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--amber-wash); color: var(--amber-ink);
  transition: height .25s var(--sale), opacity .25s ease;
  opacity: 0;
}
.demo__franja.activa { height: 38px; opacity: 1; margin-top: 8px; }
.demo__franja::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); flex: none;
}
.demo__controles { display: grid; place-items: center; padding-top: 14px; }
.demo__nota {
  margin-top: 12px; text-align: right;
  /* A la izquierda se sienta Guardián. */
  padding-left: 96px;
  font-size: .875rem; color: var(--ink-dim);
}

/* Las filas, igual que en la app: HORA · QUIÉN · ESTADO, y la tablilla. */
.filas { list-style: none; margin: 0; padding: 0; }
.fila {
  display: grid;
  grid-template-columns: 4.2em minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  padding: 10px 2px 12px;
}
.fila + .fila { border-top: 1px solid var(--rule); }
.fila__hora { font-weight: 500; font-size: .875rem; color: var(--ink-dim); }
.fila__chip {
  font-weight: 600; font-size: .8125rem;
  padding: 3px 11px; border-radius: 999px;
  white-space: nowrap;
}
.chip--vivo { background: var(--amber); color: var(--on-amber); }
.chip--editable { background: var(--teal-wash); color: var(--teal); }
.tablilla {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--plate-2);
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow-1);
  font-size: 1.125rem; line-height: 1.45;
}
.demo .tablilla { background: var(--ground); }
.comparar .tablilla { background: var(--plate); }
.fila--propia .tablilla {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink-dim);
  color: var(--ink-dim);
}
.fila--vivo .tablilla {
  background: transparent;
  box-shadow: none;
  outline: 1.5px dashed var(--amber-edge);
  outline-offset: -1.5px;
}
.fila--vivo .tablilla::after {
  content: ""; display: inline-block;
  width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--amber-edge);
  vertical-align: -.15em;
  animation: parpadeo 1s steps(1) infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }

.demo .fila { animation: cae .55s var(--sale) both; }
@keyframes cae {
  from { opacity: 0; transform: translateY(18px); }
}

/* El botón de hablar. Los colores y el halo cambian; el tamaño no. */
.ptt {
  appearance: none; border: 0; background: none; color: var(--ink);
  font: inherit; padding: 0; cursor: pointer;
  display: grid; justify-items: center; gap: 8px;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ptt__disco {
  position: relative;
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--plate); color: var(--ink-dim);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: background-color .13s ease, color .13s ease, box-shadow .13s ease;
}
.ptt__mic { width: 34px; height: 34px; fill: currentColor; }
.ptt__cuenta { display: none; font-weight: 800; font-size: 1.625rem; }
.ptt__rueda {
  display: none; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--rule); border-top-color: var(--ink);
  animation: gira .72s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.ptt__rotulo { font-weight: 700; font-size: .9375rem; }

.ptt[data-estado="listo"] .ptt__disco {
  background: var(--amber); color: var(--on-amber);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--shadow-2);
}
.ptt[data-estado="escuchando"] .ptt__disco {
  background: var(--ink); color: var(--ground);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--amber) 38%, transparent), var(--shadow-2);
}
.ptt[data-estado="escuchando"] .ptt__mic { display: none; }
.ptt[data-estado="escuchando"] .ptt__cuenta { display: block; }
.ptt[data-estado="trabajando"] .ptt__disco {
  background: var(--plate-2); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow-1);
}
.ptt[data-estado="trabajando"] .ptt__mic { display: none; }
.ptt[data-estado="trabajando"] .ptt__rueda { display: block; }
.ptt[data-estado="sinred"] .ptt__disco { color: var(--ink-dim); }
.ptt[data-estado="sinred"] .ptt__rotulo { color: var(--coral); }

.ptt--grande .ptt__disco { width: clamp(150px, 16vw, 200px); height: clamp(150px, 16vw, 200px); }
.ptt--grande .ptt__mic { width: 38%; height: 38%; }
.ptt--grande .ptt__cuenta { font-size: clamp(2.5rem, 4vw, 3.5rem); }
.ptt--grande .ptt__rueda { width: 52px; height: 52px; border-width: 5px; }
.ptt--grande .ptt__rotulo { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 800; }
.ptt--grande[data-estado="escuchando"] .ptt__disco {
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--amber) 38%, transparent), var(--shadow-2);
}

/* ── Guardián y las capturas ─────────────────────────────────────────── */

/* Mientras no llegue la imagen, el hueco dice qué falta. Cuando el
   archivo existe, el hueco no se ve. */
.guardian, .captura { margin: 0; position: relative; }
/* Que una imagen que no está no enseñe su texto alternativo encima del hueco. */
.guardian img, .captura img { color: transparent; }
.hueco { display: none; }
.falta img { display: none; }
.falta .hueco {
  display: grid; place-items: center; text-align: center;
  width: 100%; height: 100%;
  padding: 12px;
  border: 1.5px dashed var(--rule);
  border-radius: var(--r-lg);
  color: var(--ink-dim);
  font-weight: 600; font-size: .9375rem;
}

.guardian { pointer-events: none; }
/* Una pose de Guardián que todavía no existe no deja hueco: no se ve. */
.guardian.falta { display: none; }
.guardian img { width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .18)); }

/* Guardián se sienta al lado del tablero, en el suelo de la portada,
   con la cabeza vuelta hacia la conversación. */
.guardian--frente {
  position: absolute; z-index: 2;
  left: -16%; bottom: -88px;
  width: clamp(160px, 15.5vw, 224px);
  aspect-ratio: 720 / 910;
}
/* En Transcripción mira de lado hacia el teléfono. */
.guardian--lado {
  position: absolute; z-index: 2;
  right: -16%; bottom: -8px;
  width: clamp(150px, 17vw, 240px);
  aspect-ratio: 720 / 842;
}
.guardian--atento {
  position: absolute; z-index: 2;
  left: -2%; bottom: -12px;
  width: clamp(120px, 12vw, 180px);
  aspect-ratio: 1;
}
.guardian--saludar { width: clamp(200px, 24vw, 340px); aspect-ratio: 4 / 5; justify-self: end; }
.guardian--descansar { width: clamp(180px, 20vw, 260px); aspect-ratio: 5 / 3; }

/* Una captura de teléfono: el marco es el de la maqueta de escritorio de
   DESIGN.md (radio 32, filo, sombra 2). */
.captura {
  width: min(100%, 320px);
  aspect-ratio: 1080 / 2340;
  border-radius: 32px;
  padding: 8px;
  background: var(--plate);
  box-shadow: inset 0 1px 0 var(--edge), 0 0 0 1px var(--rule), var(--shadow-2);
}
.captura img { width: 100%; height: 100%; object-fit: cover; border-radius: 25px; }
.captura.falta { padding: 8px; }
.captura .hueco { border-radius: 25px; }

/* Una pantalla de la app dibujada en HTML, con el mismo marco que las
   capturas. Va rotulada como ilustración. */
.pantalla {
  margin: 0; position: relative;
  width: min(100%, 320px);
  display: grid; gap: 12px; justify-items: center;
}
.pantalla__vidrio {
  width: 100%;
  aspect-ratio: 9 / 18.5;
  border-radius: 32px;
  padding: 8px;
  background: var(--plate);
  box-shadow: inset 0 1px 0 var(--edge), 0 0 0 1px var(--rule), var(--shadow-2);
  display: grid;
}
.timbre { border-radius: 25px; }
.pantalla:not(.pantalla--timbre) .pantalla__vidrio {
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--ground);
  padding: 14px 12px 16px;
}
.pantalla__barra {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--rule);
}
.pantalla__titulo { font-weight: 600; font-size: 1.0625rem; }
.pantalla__accion { font-weight: 600; font-size: .9375rem; color: var(--ink-dim); }
.pantalla__filas {
  align-self: end;
  padding: 0 2px;
}
.pantalla .tablilla { font-size: 1rem; padding: 10px 12px; background: var(--plate); }
.pantalla .fila--propia .tablilla { background: transparent; }
.pantalla__pie { display: grid; place-items: center; padding-top: 10px; }
.ptt--pantalla { cursor: default; }
.ptt--pantalla .ptt__disco { width: 64px; height: 64px; }
.ptt--pantalla .ptt__mic { width: 26px; height: 26px; }
.ptt--pantalla .ptt__rotulo { font-size: .8125rem; }
.pantalla__nota { font-size: .875rem; color: var(--ink-dim); }

/* El aviso: la pantalla entera pasa de pizarra a ámbar, como en el
   teléfono. Solo cambia el color. */
.timbre {
  --t-fondo: var(--ground); --t-tinta: var(--ink); --t-tenue: var(--ink-dim);
  display: grid; align-content: center; justify-items: center; gap: 14px;
  padding: 24px 18px;
  background: var(--t-fondo); color: var(--t-tinta);
  animation: destello 1.6s steps(1) infinite;
}
@keyframes destello {
  50% { --t-fondo: var(--amber); --t-tinta: var(--on-amber); --t-tenue: var(--on-amber); }
}
@property --t-fondo { syntax: "<color>"; inherits: true; initial-value: #F0F3F2; }
@property --t-tinta { syntax: "<color>"; inherits: true; initial-value: #10191C; }
@property --t-tenue { syntax: "<color>"; inherits: true; initial-value: #4A5D63; }
.timbre__titulo { font-weight: 600; font-size: 1rem; color: var(--t-tenue); }
.timbre__cara {
  display: grid; place-items: center;
  width: 108px; height: 108px; border-radius: 50%;
  margin-top: 8px;
  background: var(--plate-2); color: var(--ink);
  font-weight: 800; font-size: 2.5rem;
}
.timbre__nombre { font-weight: 800; font-size: 1.75rem; margin-bottom: 28px; }
.timbre__boton {
  width: 100%;
  display: grid; place-items: center;
  min-height: 52px; border-radius: 999px;
  font-weight: 700; font-size: 1.0625rem;
}
.timbre__boton--si { background: var(--teal); color: var(--ground); }
.timbre__boton--no { box-shadow: inset 0 0 0 1.5px var(--coral); color: var(--coral); background: var(--ground); }

/* ── Secciones ───────────────────────────────────────────────────────── */

.seccion { padding: clamp(96px, 12vw, 176px) 0; }
.cabeza { display: grid; gap: 24px; margin-bottom: clamp(48px, 6vw, 88px); }

/* Comparación */
.comparar {
  position: relative;
  display: grid;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 460px;
  box-shadow: inset 0 0 0 1px var(--rule);
  background: var(--plate-2);
  --corte: 50%;
}
/* El borde va encima de las dos mitades, para que la de Oivim no lo tape. */
.comparar::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--rule);
  pointer-events: none;
}
.comparar__lado {
  grid-area: 1 / 1;
  padding: clamp(24px, 4vw, 48px);
  display: grid; align-content: start; gap: 20px;
}
.comparar__lado--antes { color: var(--ink-dim); }
.comparar__lado--oivim {
  background: var(--ground);
  clip-path: inset(0 0 0 var(--corte));
  justify-items: end;
}
.comparar__lado--oivim .comparar__rotulo,
.comparar__lado--oivim .filas { width: min(100%, 520px); }
.comparar__lado--oivim .comparar__rotulo { text-align: right; }
.comparar__corrida {
  height: 340px; overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  max-width: 520px;
}
.comparar__corrida p {
  font-size: 1.25rem; line-height: 1.5;
  padding-bottom: 1.5em;
  animation: corre 26s linear infinite;
}
@keyframes corre { to { transform: translateY(-100%); } }
.comparar__asa {
  position: absolute; top: 0; bottom: 0;
  left: var(--corte);
  width: 2px; margin-left: -1px;
  background: var(--ink);
  pointer-events: none;
}
.comparar__asa span {
  position: absolute; top: 50%; left: 50%;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: var(--shadow-2);
}
.comparar__asa span::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ground);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.comparar__control { position: absolute; inset: 0; }
.comparar__control input {
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.comparar:has(input:focus-visible) .comparar__asa span {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
.pie-dato { margin-top: 16px; font-size: .9375rem; color: var(--ink-dim); }

/* La frase que se enciende al bajar */
.manifiesto { padding: clamp(120px, 16vw, 220px) 0; }
.manifiesto__texto {
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 22ch;
}
.js .manifiesto__texto .p { color: var(--rule); transition: color .35s ease; }
.js .manifiesto__texto .p.on { color: var(--ink); }

/* Los estados del botón */
.pasos__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
}
.pasos__escena { position: relative; }
.pasos__fijo {
  position: sticky; top: calc(50vh - 150px);
  display: grid; place-items: center;
  min-height: 300px;
  border-radius: var(--r-lg);
  background: var(--plate);
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow-1);
}
.pasos__lista { list-style: none; margin: 0; padding: 0; }
.paso {
  min-height: 52vh;
  display: grid; align-content: center; gap: 10px;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  opacity: .38;
  transition: opacity .4s ease;
}
.paso:first-child { border-top: 0; }
.paso.activo { opacity: 1; }
.paso__num { font-weight: 800; font-size: 1rem; color: var(--ink-dim); }
.paso h3 { font-weight: 800; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.015em; }
.paso p { font-size: 1.1875rem; color: var(--ink-dim); max-width: 30em; }

/* Bloques que alternan imagen y texto */
.alterno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}
.alterno--reves .alterno__imagen { order: 2; }
.alterno__texto { display: grid; gap: 28px; align-content: center; }
.alterno__imagen {
  position: relative;
  display: grid; place-items: center;
  padding-bottom: 32px;
}

.datos { margin: 8px 0 0; display: grid; }
.dato {
  display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.dato dt { color: var(--ink); padding-top: .2em; }
.dato dd { margin: 0; color: var(--ink-dim); }

.lista-aviso {
  list-style: none; margin: 0; padding: 0;
}
.lista-aviso li {
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-dim);
}
.lista-aviso strong { color: var(--ink); font-weight: 600; }

/* Anillos de vibración detrás del aviso: solo anillos y opacidad. */
.vibra {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.vibra__anillo {
  grid-area: 1 / 1;
  width: min(80%, 420px); aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--rule);
  opacity: 0;
  animation: anillo 3.6s var(--sale) infinite;
}
.vibra__anillo:nth-child(2) { animation-delay: 1.2s; }
.vibra__anillo:nth-child(3) { animation-delay: 2.4s; }
@keyframes anillo {
  0%   { opacity: .9; transform: scale(.55); }
  100% { opacity: 0;  transform: scale(1.25); }
}

/* El tablero de datos: un tablero de salidas de verdad. */
.salidas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.salida {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px 32px;
  align-items: baseline;
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--rule);
}
.salida__que { color: var(--ink-dim); }
.salida__valor {
  font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.salida__nota { color: var(--ink-dim); }
/* Cada letra de la paleta en su casilla, para que al girar no baile. */
.paleta { display: inline-block; text-align: center; }
.paleta.gira { color: var(--ink-dim); }

/* La galería: en escritorio se fija y corre de lado al bajar. */
.galeria { padding: clamp(96px, 12vw, 176px) 0 clamp(64px, 8vw, 120px); }
.galeria__cabeza { margin-bottom: clamp(40px, 5vw, 72px); }
.galeria__pista {
  list-style: none; margin: 0;
  padding: 0 var(--gutter) 24px;
  display: flex; gap: clamp(20px, 3vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.galeria__item {
  flex: 0 0 auto;
  width: clamp(230px, 24vw, 300px);
  scroll-snap-align: start;
  display: grid; gap: 8px; align-content: start;
}
.galeria__item .captura { width: 100%; margin-bottom: 12px; }
.galeria__item h3 { font-weight: 800; font-size: 1.375rem; }
.galeria__item p { color: var(--ink-dim); font-size: 1.0625rem; }

.galeria.fijada { height: var(--alto-galeria, auto); padding: 0; }
.galeria.fijada .galeria__fijo {
  position: sticky; top: 0;
  height: 100vh;
  padding-top: 72px;
  display: grid; align-content: center;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.galeria.fijada .galeria__pista {
  overflow: visible;
  width: max-content;
  padding-left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  padding-right: var(--gutter);
  will-change: transform;
}
.galeria.fijada .galeria__item { width: clamp(220px, 19vw, 280px); }

/* Privacidad */
.privacidad__dentro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  border-top: 1px solid var(--rule);
  padding-top: clamp(48px, 6vw, 88px);
}
.privacidad { padding-top: 0; }
.privacidad__texto { display: grid; gap: 18px; color: var(--ink-dim); font-size: 1.1875rem; }
.privacidad__enlaces { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 8px; color: var(--ink); }

/* Cierre */
.cierre { padding: clamp(112px, 14vw, 200px) 0 0; overflow: hidden; }
.cierre__dentro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  gap: 32px;
  align-items: end;
}
.cierre__texto { display: grid; gap: 28px; padding-bottom: clamp(80px, 10vw, 140px); }
.cierre__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cierre__correo { font-weight: 600; font-size: 1.125rem; color: var(--ink-dim); }
.cierre__correo:hover { color: var(--ink); }
.cierre .guardian--saludar { margin-bottom: -4px; }

/* Pie */
.pie { padding: 64px 0 32px; border-top: 1px solid var(--rule); }
.pie__dentro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 32px 56px;
  align-items: end;
}
.pie__marca { display: grid; gap: 12px; color: var(--ink-dim); }
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie__enlaces a { font-weight: 600; text-decoration: none; }
.pie__enlaces a:hover { text-decoration: underline; }
.pie__legal { margin-top: 40px; font-size: .9375rem; color: var(--ink-dim); }

/* ── Movimiento ──────────────────────────────────────────────────────── */

/* Todo se ve aunque no haya JavaScript. Con JavaScript, lo que está
   por debajo de la pantalla espera a entrar. */
.js [data-revela] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s var(--sale), transform 1.1s var(--sale);
}
.js [data-revela="lado"] { transform: translateY(56px) scale(.97); }
.js [data-revela].dentro-vista { opacity: 1; transform: none; }

/* Los titulares suben palabra por palabra, cada una desde detrás de su
   propia línea, como las letras de un tablero al cambiar. */
.js [data-palabras] .pal {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em; margin-bottom: -.08em;
}
.js [data-palabras] .pal > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--sale);
  transition-delay: calc(var(--i) * 55ms);
}
.js [data-palabras].dentro-vista .pal > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-revela], .js [data-revela="lado"] { opacity: 1; transform: none; transition: none; }
  .js [data-palabras] .pal > span { transform: none; transition: none; }
  .comparar__corrida p, .vibra__anillo, .demo .fila { animation: none; }
  .vibra__anillo:first-child { opacity: .6; transform: scale(.8); }
  .fila--vivo .tablilla::after { animation: none; }
  .timbre { animation: none; }
}

/* ── Pantallas más estrechas ─────────────────────────────────────────── */

@media (max-width: 1020px) {
  .barra__nav { display: none; }
  .barra .boton--chico { margin-left: auto; }
  .portada { min-height: 0; padding-top: 108px; }
  .portada__dentro { grid-template-columns: minmax(0, 1fr); }
  .demo { margin: 0 auto; }
  .guardian--frente { left: auto; right: -8px; bottom: -36px; width: clamp(110px, 28vw, 180px); }
  .demo__nota { text-align: left; padding-left: 4px; padding-right: clamp(110px, 30vw, 180px); }
  .pasos__rejilla { grid-template-columns: minmax(0, 1fr); }
  .pasos__escena { display: none; }
  .paso { min-height: 0; opacity: 1; }
  .alterno, .privacidad__dentro { grid-template-columns: minmax(0, 1fr); }
  .alterno--reves .alterno__imagen { order: 0; }
  .salida { grid-template-columns: minmax(0, 1fr) auto; }
  .salida__nota { grid-column: 1 / -1; }
  .cierre__dentro { grid-template-columns: minmax(0, 1fr); }
  .cierre__texto { padding-bottom: 24px; }
  .guardian--saludar { justify-self: center; }
  .pie__dentro { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .portada__acciones .boton { flex: 1 1 auto; }
  .demo { padding: 12px 10px 14px; }
  .demo__tablero { height: 300px; }
  /* En el teléfono no cabe la línea: una encima de la otra. */
  .comparar { min-height: 0; }
  .comparar__lado { grid-area: auto; padding: 22px 18px; }
  .comparar__lado--oivim { clip-path: none; justify-items: stretch; }
  .comparar__lado--oivim .comparar__rotulo { text-align: left; }
  .comparar__asa, .comparar__control { display: none; }
  .comparar__corrida { height: 200px; }
  .comparar__corrida p { font-size: 1.0625rem; }
  .pie-dato { display: none; }
  .dato { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .salida { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .salida__valor { white-space: normal; }
  .boton--grande { width: 100%; }
  .captura { width: min(78%, 300px); }
  /* El teléfono a la izquierda y Guardián al lado, sin taparlo. */
  #transcripcion .alterno__imagen { justify-items: start; }
  #transcripcion .pantalla { width: 72%; }
  .guardian--lado { right: -4px; width: 34%; }
}