/*
 * 72 Horas · landing de promoción.
 *
 * Concepto de maqueta: columna de 1200 px con los teléfonos-demo como
 * protagonistas; bandas que alternan el pizarra claro de la app y el blanco,
 * y un tramo oscuro para el modo emergencia, igual que en la app.
 *
 * Los colores, la tipografía y la escala de movimiento salen de
 * app/src/styles/tokens.css. Un solo tema claro, a propósito: es el de la app
 * y el de las capturas que se muestran.
 *
 * Todo funciona con la CSP estricta de la app (sin estilos en línea): lo que
 * cambia por script son propiedades personalizadas vía CSSOM.
 */

@font-face {
  font-family: 'Inter';
  src: url('assets/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ancho: 300px;

  /* Color (de la app) */
  --fondo: #eaebf0;
  --superficie: #ffffff;
  --superficie-hundida: #eff1f7;
  --borde: #c3cbe0;
  --pista: #e1e6f1;
  --texto: #111725;
  --texto-suave: #576a96;
  --primario: #323d5b;
  --primario-hover: #252f45;
  --acento: #ce2029;
  --noche: #111725;
  --exito: #3f6b4f;
  --whatsapp: #25d366;
  --ios-azul: #2f7cf6;

  /* Tipografía: una sola familia, como la app */
  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Forma y profundidad */
  --radio: 22px;
  --radio-sm: 14px;
  --sombra: 0 2px 4px rgb(17 23 37 / 0.04), 0 14px 34px rgb(50 61 91 / 0.1);
  --sombra-alta: 0 2px 4px rgb(17 23 37 / 0.05), 0 26px 56px -18px rgb(50 61 91 / 0.32);

  /* Movimiento (escala de la app) */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-rebote: cubic-bezier(0.34, 1.36, 0.64, 1);
  --curva-ios: cubic-bezier(0.32, 0.72, 0, 1);

  /* Maqueta */
  --ancho-max: 1200px;
  --margen: clamp(16px, 5vw, 48px);
  --alto-cabecera: 64px;
  --relacion-telefono: 812 / 390;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 16px);
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--primario);
  outline-offset: 3px;
  border-radius: 6px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--primario);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.saltar:focus {
  top: calc(12px + env(safe-area-inset-top, 0px));
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.875rem, 1.25rem + 2.4vw, 2.875rem);
  font-weight: 700;
}

h3 {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

p {
  text-wrap: pretty;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.bajada {
  max-width: 60ch;
  margin: 18px 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--texto-suave);
}

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

.contenedor--angosto {
  width: min(100% - 2 * var(--margen), 840px);
}

.seccion-cabeza {
  max-width: 780px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.acento {
  color: var(--acento);
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.75em 1.3em;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition:
    transform 250ms var(--curva),
    background-color 250ms var(--curva),
    box-shadow 250ms var(--curva),
    border-color 250ms var(--curva);
}

.boton:active {
  transform: scale(0.97);
  transition-duration: 120ms;
}

.boton-principal {
  color: #fff;
  background: var(--primario);
  box-shadow: 0 12px 26px -14px rgb(50 61 91 / 0.9);
}

.boton-secundario {
  color: var(--texto);
  background: var(--superficie);
  border-color: var(--borde);
}

.boton-grande {
  min-height: 56px;
  padding-inline: 1.5em;
  font-size: 1.0625rem;
}

.boton-chico {
  min-height: 42px;
  padding: 0.5em 1.05em;
  font-size: 0.9375rem;
}

@media (hover: hover) and (pointer: fine) {
  .boton-principal:hover {
    background: var(--primario-hover);
    transform: translateY(-1px);
  }

  .boton-secundario:hover {
    border-color: var(--texto-suave);
  }
}

.insignia {
  padding: 0.3em 0.65em;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  transition:
    background-color 300ms var(--curva),
    box-shadow 300ms var(--curva);
}

.cabecera.con-fondo {
  background: rgb(234 235 240 / 0.84);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgb(195 203 224 / 0.7);
}

.cabecera-interior {
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(100% - 2 * var(--margen), var(--ancho-max));
  height: var(--alto-cabecera);
  margin-inline: auto;
}

.cabecera-interior > .boton {
  margin-left: auto;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--texto);
}

.marca img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.cabecera-nav {
  display: none;
}

@media (min-width: 1040px) {
  .cabecera-nav {
    display: flex;
    gap: 28px;
    margin-left: auto;
  }

  .cabecera-interior > .boton {
    margin-left: 0;
  }

  .cabecera-nav a {
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--texto-suave);
    transition: color 200ms var(--curva);
  }

  .cabecera-nav a:hover {
    color: var(--texto);
  }
}

/* La barra roja de lectura: el mismo gesto que la barra de progreso de la
 * mochila. Crece con el desplazamiento de la página. */
.progreso-lectura {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 45;
  height: 3px;
  pointer-events: none;
}

.progreso-lectura span {
  display: block;
  height: 100%;
  background: var(--acento);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(24px, 5vw, 64px) clamp(64px, 9vw, 112px);
  overflow-x: clip;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -10% -20% auto;
  height: 120%;
  z-index: -1;
  background:
    radial-gradient(42% 46% at 76% 42%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 70%),
    radial-gradient(30% 30% at 12% 8%, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 70%);
  pointer-events: none;
}

.hero-interior {
  display: grid;
  gap: 56px;
  align-items: center;
  width: min(100% - 2 * var(--margen), var(--ancho-max));
  margin-inline: auto;
}

@media (min-width: 960px) {
  .hero-interior {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 48px;
  }
}

.hero-titulo {
  margin-bottom: 24px;
  font-size: clamp(2.75rem, 1.4rem + 5.6vw, 5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.hero-titulo .linea {
  display: block;
}

.hero-titulo .linea > .entra {
  display: inline-block;
}

.linea-acento {
  position: relative;
  width: fit-content;
  color: var(--acento);
}

.subrayado {
  position: absolute;
  left: 0;
  bottom: -0.16em;
  width: 100%;
  height: 0.26em;
  overflow: visible;
}

.subrayado path {
  fill: none;
  stroke: var(--acento);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.hero-bajada {
  max-width: 34em;
  margin: 0 0 32px;
  font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.25rem);
  color: var(--texto-suave);
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 479px) {
  .hero-acciones .boton {
    width: 100%;
  }
}

.garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--texto-suave);
}

.garantias li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.garantias .icono {
  width: 1.05em;
  height: 1.05em;
  color: var(--exito);
  stroke-width: 7;
}

.contador {
  margin: 22px 0 0;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.contador strong {
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.hero-demo {
  position: relative;
  display: grid;
  justify-items: center;
}

.telefono--hero {
  --ancho: min(318px, 78vw);
}

.hero-escena {
  position: relative;
}

/* Las etiquetas acompañan al teléfono solo donde hay sitio para ellas sin
 * tapar la pantalla ni el titular. */
.hero-flotantes {
  display: none;
}

@media (min-width: 1280px) {
  .hero-flotantes {
    display: block;
  }
}

.flotante {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 200px;
  margin: 0;
  padding: 10px 16px 10px 10px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  background: rgb(255 255 255 / 0.94);
  border-radius: 16px;
  box-shadow: var(--sombra-alta);
  translate: 0 var(--py, 0px);
}

.flotante small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.flotante .icono {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 11px;
  background: var(--superficie-hundida);
  color: var(--primario);
}

.flotante-1 {
  top: 15%;
  left: calc(100% - 22px);
}

.flotante-2 {
  top: 49%;
  left: calc(100% - 22px);
}

.flotante-2 .icono {
  color: #2d7fd4;
}

.flotante-3 {
  bottom: 27%;
  right: calc(100% - 22px);
}

.flotante-3 .icono {
  color: var(--exito);
}

/* Entrada del hero: CSS puro, así no depende del script. */
@media (prefers-reduced-motion: no-preference) {
  .entra {
    animation: entrar 850ms var(--curva) both;
  }

  .entra-1 { animation-delay: 40ms; }
  .entra-2 { animation-delay: 110ms; }
  .entra-3 { animation-delay: 190ms; }
  .entra-4 { animation-delay: 280ms; }
  .entra-5 { animation-delay: 420ms; }
  .entra-6 { animation-delay: 520ms; }
  .entra-7 { animation-delay: 620ms; }
  .entra-8 { animation-delay: 700ms; }

  .entra-telefono {
    animation: entrar-telefono 1100ms var(--curva) 220ms both;
  }

  .subrayado path {
    stroke-dashoffset: 1;
    animation: trazar 900ms var(--curva) 900ms forwards;
  }

  .flotante {
    animation: entrar-flotante 700ms var(--curva-rebote) both;
  }

  .flotante-1 { animation-delay: 1250ms; }
  .flotante-2 { animation-delay: 1450ms; }
  .flotante-3 { animation-delay: 1650ms; }
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes entrar-telefono {
  from {
    opacity: 0;
    transform: translateY(48px) rotate(3deg) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes entrar-flotante {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes trazar {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Por qué ---------- */

.porque {
  padding-block: clamp(80px, 11vw, 150px);
  background: var(--superficie);
}

.declaracion {
  margin: 0;
  font-size: clamp(1.625rem, 1.05rem + 2.3vw, 2.625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--texto);
}

.declaracion-cierre {
  color: var(--texto-suave);
}

.declaracion.leyendo .palabra {
  color: #b8c1d8;
  transition: color 220ms var(--curva);
}

.declaracion.leyendo .palabra.leida {
  color: var(--texto);
}

.declaracion.leyendo .declaracion-cierre .palabra.leida {
  color: var(--texto-suave);
}

/* ---------- Secciones ---------- */

.como,
.amenazas,
.trae,
.galeria,
.no-es,
.preguntas {
  padding-block: clamp(80px, 10vw, 136px);
}

.amenazas,
.galeria,
.preguntas {
  background: var(--superficie);
}

/* ---------- Relato: pasos + teléfono ---------- */

/*
 * Una misma estructura para las dos escalas. En el teléfono: la demo arriba
 * y los pasos debajo, que avanzan solos. En escritorio: los pasos a la
 * izquierda, altos, y el teléfono fijo a la derecha mientras se desplaza.
 */
.relato {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.relato-escenario {
  --ancho: min(300px, 76vw);
  --arriba: 58px;
  order: -1;
  position: relative;
  width: var(--ancho);
  height: calc(var(--ancho) * var(--relacion-telefono) + var(--arriba));
  margin-inline: auto;
}

.relato-escenario > .telefono {
  position: absolute;
  top: var(--arriba);
  left: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 18px;
  scale: 0.97;
  transition:
    opacity 450ms var(--curva),
    translate 600ms var(--curva),
    scale 600ms var(--curva),
    visibility 0s linear 450ms;
}

.relato-escenario > .telefono.activo {
  opacity: 1;
  visibility: visible;
  translate: none;
  scale: 1;
  transition-delay: 0s;
}

.relato-pasos {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.relato-paso {
  position: relative;
  padding: 18px 20px 22px;
  background: var(--superficie);
  border: 2px solid transparent;
  border-radius: 18px;
  box-shadow: var(--sombra);
  transition: border-color 300ms var(--curva);
}

.relato-paso.activo {
  border-color: var(--primario);
}

.relato-paso h3 {
  font-size: 1.1875rem;
}

.paso-boton {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.paso-numero {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.relato-paso p {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.relato-paso .paso-detalle {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto);
}

.pausada .historias i,
.pausada .telefono *,
.pausada .telefono {
  animation-play-state: paused !important;
}


/* En el teléfono, un indicador como el de las historias: en qué paso va la
 * demostración y cuánto le falta, sin tener que bajar hasta la lista. */
.historias {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  gap: 10px;
}

.historias-barras {
  display: flex;
  gap: 6px;
}

.historias-barras span {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--pista);
}

.historias-barras i {
  display: block;
  height: 100%;
  background: var(--primario);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.historias-barras .llena i {
  transform: scaleX(1);
}

.historias-barras .corre i {
  animation: avance var(--duracion, 8000ms) linear forwards;
}

.historias-titulo {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.relato--oscuro .historias-barras span {
  background: rgb(255 255 255 / 0.16);
}

.relato--oscuro .historias-barras i {
  background: var(--acento);
}

@keyframes avance {
  to {
    transform: scaleX(1);
  }
}

.relato-control {
  display: flex;
  justify-content: center;
  margin: 24px 0 0;
}

.relato-control--izq {
  justify-content: flex-start;
}

.boton-pausa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-suave);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
}

.boton-pausa .icono {
  width: 14px;
  height: 14px;
}

.boton-pausa .icono-play,
.boton-pausa[aria-pressed='true'] .icono-pausa {
  display: none;
}

.boton-pausa[aria-pressed='true'] .icono-play {
  display: block;
}

@media (min-width: 960px) {
  .relato {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(48px, 7vw, 120px);
    align-items: start;
  }

  .relato-escenario {
    --ancho: min(330px, calc((100vh - var(--alto-cabecera) - 72px) / 2.082));
    --ancho: min(330px, calc((100svh - var(--alto-cabecera) - 72px) / 2.082));
    order: 0;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--alto-cabecera) + 24px);
    margin: 0;
  }

  .historias {
    display: none;
  }

  .relato-escenario {
    --arriba: 0px;
  }

  .relato-pasos {
    grid-column: 1;
    grid-row: 1;
    gap: 0;
    padding-block: 6vh 18vh;
  }

  .relato-paso {
    min-height: 72vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 32px;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 0.32;
    transition: opacity 500ms var(--curva);
  }

  .relato-paso::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: var(--pista);
    transition: background-color 400ms var(--curva);
  }

  .relato-paso.activo {
    opacity: 1;
  }

  .relato-paso.activo::before {
    background: var(--primario);
  }

  .relato-paso h3 {
    font-size: clamp(1.875rem, 1.3rem + 1.4vw, 2.625rem);
    font-weight: 700;
    letter-spacing: -0.035em;
  }

  .relato-paso p {
    max-width: 42ch;
    margin-top: 14px;
    font-size: 1.125rem;
  }

  .relato-paso .paso-detalle {
    font-size: 0.9375rem;
  }

  .relato-control {
    justify-content: flex-end;
    margin-top: 0;
  }

  .relato-control--izq {
    justify-content: flex-start;
    margin-top: 24px;
  }
}

/* ---------- Teléfono (maqueta) ---------- */

/*
 * El teléfono mide `--ancho`; todo lo de adentro va en `em` sobre una letra
 * base que escala con ese ancho, así la pantalla es la de la app a 390 px
 * reducida, a cualquier tamaño.
 */
.telefono {
  position: relative;
  width: var(--ancho);
  aspect-ratio: 390 / 812;
  padding: calc(var(--ancho) * 0.032);
  flex: none;
  border-radius: calc(var(--ancho) * 0.15);
  background: linear-gradient(150deg, #353d52 0%, #10141f 38%, #1c2232 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    0 44px 80px -34px rgb(17 23 37 / 0.6),
    0 18px 36px -20px rgb(17 23 37 / 0.35);
}

.pantalla {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  font-size: calc(var(--ancho) / 26);
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
  border-radius: calc(var(--ancho) * 0.12);
}

.pantalla svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pantalla p {
  margin: 0;
}

.pantalla img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.pantalla--oscura {
  color: #fff;
  background: var(--noche);
}

/* Barra de estado del sistema */
.a-estado {
  position: absolute;
  inset: 0 0 auto;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3em;
  padding: 0.5em 1.7em 0 2.1em;
  font-weight: 600;
  pointer-events: none;
}

.a-hora {
  font-size: 0.95em;
  letter-spacing: -0.01em;
}

.a-isla {
  position: absolute;
  top: 0.6em;
  left: 50%;
  width: 6.4em;
  height: 1.85em;
  margin-left: -3.2em;
  border-radius: 1em;
  background: #000;
}

.a-estado-iconos {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.a-estado svg {
  fill: currentColor;
  stroke: none;
}

.a-senal {
  width: 1.12em;
  height: 0.76em;
}

.a-senal rect {
  transition: opacity 400ms var(--curva);
}

.a-avion {
  display: none;
  width: 1em;
  height: 1em;
}

.sin-red .a-avion {
  display: block;
}

.sin-red .a-senal rect {
  opacity: 0.22;
}

.a-bateria {
  position: relative;
  display: block;
  width: 1.6em;
  height: 0.82em;
  padding: 0.09em;
  border: 0.09em solid currentColor;
  border-radius: 0.26em;
  opacity: 0.9;
}

.a-bateria i {
  display: block;
  width: 76%;
  height: 100%;
  border-radius: 0.12em;
  background: currentColor;
}

.a-bateria::after {
  content: '';
  position: absolute;
  top: 0.2em;
  right: -0.24em;
  width: 0.12em;
  height: 0.3em;
  border-radius: 0 0.1em 0.1em 0;
  background: currentColor;
}

/* La app dentro del teléfono */
.a-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: 3em;
  background: inherit;
}

.a-vista {
  position: relative;
  z-index: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.9em 1.25em 1em;
}

.a-eyebrow {
  margin: 0 0 0.6em !important;
  font-size: 0.6875em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.a-h1 {
  margin: 0 0 0.3em !important;
  font-size: 2.3em;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.a-rojo {
  display: block;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.a-h2 {
  margin: 0 0 0.5em !important;
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.a-h3 {
  margin: 0 0 0.55em !important;
  font-size: 1.22em;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.a-h3--chica {
  font-size: 1em;
}

.a-h3--icono {
  display: flex;
  align-items: center;
  gap: 0.45em;
}

.a-h3--icono svg {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  stroke-width: 1.3;
}

.a-apoyo {
  margin: 0 0 1em !important;
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--texto-suave);
}

.a-nota {
  margin: 0.6em 0 0 !important;
  font-size: 0.78em;
  line-height: 1.45;
  color: var(--texto-suave);
}

.a-texto {
  font-size: 0.92em;
}

.a-grande {
  font-size: 1.9em;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.a-barra {
  height: 0.5em;
  margin: 0.25em 0 0.85em;
  overflow: hidden;
  border-radius: 1em;
  background: var(--pista);
}

.a-barra--chica {
  height: 0.38em;
  margin-bottom: 0;
}

.a-barra-relleno {
  display: block;
  width: calc(var(--v, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--acento);
  transition: width 700ms var(--curva);
}

/* Estados de reposo de cada barra (sin script, o antes de que corra). */
.telefono--hero [data-barra='prep'] { --v: 0.5; }
[data-escena='mochila'] [data-barra='mochila'] { --v: 0.32; }
.a-barra-relleno--67 { --v: 0.67; }

.a-tarjeta {
  margin-bottom: 0.8em;
  padding: 1.1em 1.15em;
  background: #fff;
  border: 0.09em solid transparent;
  border-radius: 1.25em;
  box-shadow:
    0 0.1em 0.25em rgb(17 23 37 / 0.04),
    0 0.8em 2em rgb(50 61 91 / 0.1);
}

.a-tarjeta--pasos {
  border-color: var(--primario);
}

.a-segmentos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.3em;
  margin: -0.05em 0 0.9em;
}

.a-segmentos i {
  height: 0.3em;
  border-radius: 1em;
  background: var(--pista);
  transition: background-color 400ms var(--curva);
}

.a-segmentos i.hecho {
  background: var(--primario);
}

.a-pasos {
  display: grid;
  gap: 0.55em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.a-paso {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.9em;
  color: var(--texto-suave);
}

.a-check {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border: 0.12em solid var(--borde);
  border-radius: 50%;
  transition:
    background-color 300ms var(--curva),
    border-color 300ms var(--curva);
}

.a-check svg {
  width: 0.9em;
  height: 0.9em;
  stroke: #fff;
  stroke-width: 8;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 250ms var(--curva),
    transform 450ms var(--curva-rebote);
}

.a-paso.hecho .a-check {
  background: var(--primario);
  border-color: var(--primario);
}

.a-paso.hecho .a-check svg {
  opacity: 1;
  transform: none;
}

.a-paso--siguiente {
  display: block;
}

.a-paso--siguiente .a-nota {
  display: block;
  margin-top: 0.5em !important;
  font-size: 0.8em;
}

.a-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.8em;
  padding: 0.6em 1em;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 0.07em solid transparent;
  border-radius: 0.9em;
  transition:
    transform 150ms var(--curva),
    background-color 250ms var(--curva),
    box-shadow 250ms var(--curva);
}

.a-boton svg {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 5;
}

.a-boton--principal {
  color: #fff;
  background: var(--primario);
}

.a-boton--secundario {
  color: var(--texto);
  background: #fff;
  border-color: var(--borde);
}

.presionado {
  transform: scale(0.95) !important;
}

.a-boton.latido {
  animation: latido 1500ms var(--curva) 3;
}

@keyframes latido {
  from {
    box-shadow: 0 0 0 0 rgb(50 61 91 / 0.5);
  }
  to {
    box-shadow: 0 0 0 1em rgb(50 61 91 / 0);
  }
}

.a-tarjeta--ilustrada {
  display: grid;
  grid-template-columns: 5.2em 1fr;
  align-items: center;
  gap: 0.9em;
}

.a-tarjeta--ilustrada img {
  width: 100%;
}

/* Barra de navegación de la app */
.a-nav {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0.7em 0.3em 1.4em;
  font-size: 0.56em;
  font-weight: 500;
  text-align: center;
  color: #7d8bad;
  background: var(--noche);
}

.a-nav span {
  display: grid;
  justify-items: center;
  gap: 0.4em;
}

.a-nav svg {
  width: 2.5em;
  height: 2.5em;
  stroke-width: 2.3;
}

.a-nav .activo {
  color: #fff;
}

.a-sos {
  position: absolute;
  right: 0.85em;
  bottom: 4.2em;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.05em;
  width: 3.9em;
  height: 3.9em;
  font-size: 0.82em;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  border-radius: 50%;
  background: var(--acento);
  box-shadow:
    0 0 0 0.32em rgb(206 32 41 / 0.22),
    0 0.6em 1.2em rgb(17 23 37 / 0.3);
}

.a-sos svg {
  width: 1.55em;
  height: 1.55em;
  stroke-width: 6;
}

/* El dedo que toca: enseña dónde se toca, sin texto. */
.dedo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 2.7em;
  height: 2.7em;
  margin: -1.35em 0 0 -1.35em;
  border: 0.16em solid rgb(255 255 255 / 0.95);
  border-radius: 50%;
  background: rgb(17 23 37 / 0.3);
  box-shadow: 0 0.35em 0.9em rgb(17 23 37 / 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--x, 150px), var(--y, 700px));
  transition:
    transform 520ms var(--curva),
    opacity 280ms var(--curva),
    scale 140ms var(--curva);
}

.dedo.visible {
  opacity: 1;
}

.dedo.toca {
  scale: 0.8;
}

.dedo::after {
  content: '';
  position: absolute;
  inset: -0.3em;
  border: 0.14em solid rgb(255 255 255 / 0.9);
  border-radius: 50%;
  opacity: 0;
}

.dedo.toca::after {
  animation: onda 520ms var(--curva);
}

@keyframes onda {
  from {
    opacity: 0.9;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* Marcos: pantallas dentro de una escena, que se deslizan como la app. */
.a-marcos {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.a-marcos--completo {
  position: absolute;
  inset: 0;
}

.a-marco {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  translate: 9% 0;
  transition:
    opacity 160ms var(--curva),
    translate 450ms var(--curva),
    visibility 0s linear 450ms;
}

.a-marco.antes {
  translate: -9% 0;
}

.a-marco.activo {
  opacity: 1;
  visibility: visible;
  translate: none;
  transition:
    opacity 340ms var(--curva) 110ms,
    translate 450ms var(--curva),
    visibility 0s;
}

.a-marco--oscuro {
  color: #fff;
  background: var(--noche);
}

/* ---------- Escena: armar el plan ---------- */

.a-app--ob {
  padding-top: 3.1em;
}

.ob-cabeza {
  padding: 0.4em 1.25em 0.7em;
}

.ob-paso {
  margin: 0 0 0.45em !important;
  font-size: 0.72em;
  font-weight: 600;
  color: var(--texto-suave);
}

.ob-barra {
  height: 0.28em;
  overflow: hidden;
  border-radius: 1em;
  background: var(--pista);
}

.ob-barra span {
  display: block;
  width: calc(var(--v, 0.25) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--primario);
  transition: width 500ms var(--curva);
}

.a-app--ob .a-marco {
  padding: 0.35em 1.25em 0;
}

.ob-etiqueta {
  margin: 0 0 0.35em !important;
  font-size: 0.82em;
  font-weight: 600;
}

.ob-campo {
  display: flex;
  align-items: center;
  height: 2.8em;
  margin: 0 0 1em !important;
  padding: 0 0.95em;
  font-size: 0.92em;
  background: #fff;
  border: 0.08em solid var(--borde);
  border-radius: 0.8em;
  transition:
    border-color 200ms var(--curva),
    box-shadow 200ms var(--curva);
}

.ob-campo [data-escribe]:empty::before {
  content: attr(data-marcador);
  color: #9aa6c3;
}

.ob-campo.foco {
  border-color: var(--primario);
  box-shadow: 0 0 0 0.22em rgb(50 61 91 / 0.14);
}

.cursor {
  width: 0.08em;
  height: 1.15em;
  margin-left: 0.06em;
  background: var(--primario);
  opacity: 0;
}

.ob-campo.foco .cursor {
  opacity: 1;
  animation: parpadeo 1s steps(1) infinite;
}

@keyframes parpadeo {
  50% {
    opacity: 0;
  }
}

.ob-sub {
  margin-top: 0.2em !important;
}

.ob-dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
}

.ob-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  padding: 0.55em 0.5em 0.65em;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  background: #fff;
  border: 0.15em solid transparent;
  border-radius: 1.1em;
  box-shadow:
    0 0.1em 0.25em rgb(17 23 37 / 0.04),
    0 0.7em 1.6em rgb(50 61 91 / 0.1);
  transition:
    border-color 250ms var(--curva),
    transform 150ms var(--curva);
}

.ob-opcion img {
  width: 100%;
  height: 4.7em;
  object-fit: contain;
}

.ob-opcion.elegida {
  border-color: var(--texto-suave);
}

.ob-opcion--h {
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.9em;
  margin-bottom: 0.55em;
  padding: 0.45em 0.9em 0.45em 0.5em;
  font-size: 0.9em;
  font-weight: 700;
  text-align: left;
}

.ob-opcion--h img {
  flex: none;
  width: 4.4em;
  height: 3.5em;
}

.ob-personas {
  display: grid;
  gap: 0.45em;
  margin: 0 0 0.7em;
  padding: 0;
  list-style: none;
}

.ob-persona {
  display: none;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.7em;
  font-size: 0.88em;
  background: #fff;
  border-radius: 0.9em;
  box-shadow: 0 0.4em 1em rgb(50 61 91 / 0.08);
}

.ob-persona.visible {
  display: grid;
  animation: aparece 450ms var(--curva-rebote);
}

@keyframes aparece {
  from {
    opacity: 0;
    transform: translateY(0.6em) scale(0.96);
  }
}

.ob-avatar {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  font-weight: 700;
  color: var(--primario);
  border-radius: 50%;
  background: var(--superficie-hundida);
}

.ob-nombre {
  font-weight: 600;
}

.ob-nombre small {
  margin-left: 0.3em;
  font-weight: 500;
  color: var(--texto-suave);
}

.ob-cat {
  padding: 0.25em 0.6em;
  font-size: 0.78em;
  color: var(--texto-suave);
  border-radius: 1em;
  background: var(--superficie-hundida);
}

.ob-anadir {
  margin-bottom: 0.8em;
  min-height: 2.5em;
}


.ob-siguiente {
  margin: 0.4em 1.25em 1.4em;
  flex: none;
}

.ob-siguiente.escondido {
  visibility: hidden;
}

.ob-armando {
  display: grid;
  gap: 0.55em;
  margin: 0.3em 0 1.1em;
  padding: 0;
  list-style: none;
}

.ob-armando li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.9em;
  font-weight: 500;
  opacity: 0;
  translate: 0 0.4em;
  transition:
    opacity 350ms var(--curva),
    translate 350ms var(--curva);
}

.ob-armando li.visible {
  opacity: 1;
  translate: none;
}

.ob-armando svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  padding: 0.22em;
  color: #fff;
  border-radius: 50%;
  background: var(--exito);
  stroke-width: 9;
}

.ob-regla {
  padding: 0.95em 1em;
  color: #fff;
  border-radius: 1.1em;
  background: var(--primario);
  opacity: 0;
  translate: 0 0.6em;
  transition:
    opacity 400ms var(--curva),
    translate 500ms var(--curva-rebote);
}

.ob-regla.visible {
  opacity: 1;
  translate: none;
}

.ob-regla .a-h3 {
  margin-bottom: 0.3em !important;
  font-size: 1em;
}

.ob-regla p:last-child {
  font-size: 0.85em;
  opacity: 0.9;
}

/* ---------- Escena: la mochila ---------- */

.a-cabeza-ilustrada {
  position: relative;
}

.a-cabeza-ilustrada img {
  position: absolute;
  top: -1.1em;
  right: -1em;
  z-index: -1;
  width: 7.8em;
}

.a-logro {
  display: none;
  margin-bottom: 0.8em;
  padding: 0.9em 1.1em;
  color: #fff;
  border-radius: 1.1em;
  background: var(--primario);
}

.a-logro.visible {
  display: block;
  animation: logro 650ms var(--curva-rebote);
}

@keyframes logro {
  from {
    opacity: 0;
    transform: translateY(0.8em) scale(0.94);
  }
}

.a-logro .a-eyebrow {
  color: rgb(255 255 255 / 0.7);
}

.a-logro .a-h3 {
  margin-bottom: 0.3em !important;
}

.a-logro p:last-child {
  font-size: 0.78em;
  opacity: 0.88;
}

.sig-marcos {
  display: grid;
}

.sig {
  grid-area: 1 / 1;
  opacity: 0;
  translate: 0 0.5em;
  transition:
    opacity 300ms var(--curva),
    translate 400ms var(--curva);
}

.sig.activo {
  opacity: 1;
  translate: none;
}

.sig-nombre {
  margin: 0 0 0.35em !important;
  font-size: 1.2em;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.sig-nombre small {
  margin-left: 0.25em;
  font-size: 0.6em;
  font-weight: 500;
  color: var(--texto-suave);
}

.sig-razon {
  margin: 0 0 0.85em !important;
  font-size: 0.78em;
  line-height: 1.45;
  color: var(--texto-suave);
}

.a-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.a-item {
  display: flex;
  gap: 0.7em;
  padding: 0.65em 0;
  border-top: 0.06em solid var(--borde);
}

.a-item:first-child {
  border-top: 0;
  padding-top: 0.1em;
}

.a-casilla {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.05em;
  border: 0.12em solid var(--borde);
  border-radius: 0.3em;
  transition:
    background-color 250ms var(--curva),
    border-color 250ms var(--curva);
}

.a-casilla svg {
  width: 1em;
  height: 1em;
  stroke: #fff;
  stroke-width: 9;
  stroke-dasharray: 77;
  stroke-dashoffset: 77;
  transition: stroke-dashoffset 350ms var(--curva) 80ms;
}

.a-item.marcado .a-casilla {
  background: var(--acento);
  border-color: var(--acento);
}

.a-item.marcado .a-casilla svg {
  stroke-dashoffset: 0;
}

.a-item-cuerpo {
  min-width: 0;
}

.a-item-nombre {
  display: block;
  font-size: 0.9em;
}

.a-item.marcado .a-item-nombre {
  color: var(--texto-suave);
  text-decoration: line-through;
}

.a-cantidad {
  display: block;
  font-size: 0.75em;
  color: var(--texto-suave);
}

.a-caduca {
  display: none;
  width: fit-content;
  margin-top: 0.4em;
  padding: 0.25em 0.6em;
  font-size: 0.7em;
  color: var(--texto-suave);
  border-radius: 0.5em;
  background: var(--superficie-hundida);
}

.a-item.marcado .a-caduca {
  display: block;
  animation: aparece 400ms var(--curva);
}

/* ---------- Escena: compartir ---------- */

.a-tarjeta--compartir .a-apoyo {
  margin-bottom: 0.8em !important;
}

.mini-tarjeta {
  margin: 0 0 0.9em;
  padding: 0.5em 0.6em 0.65em;
  border-radius: 1em;
  background: var(--fondo);
}

.mini-tarjeta img {
  position: relative;
  z-index: 1;
  width: 58%;
  margin: 0 auto -1.1em;
}

.mini-tarjeta-cuerpo {
  padding: 1.35em 0.85em 0.75em;
  background: #fff;
  border-radius: 0.8em;
  box-shadow: 0 0.4em 1em rgb(50 61 91 / 0.12);
}

.mini-eyebrow {
  margin: 0 0 0.35em !important;
  font-size: 0.48em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.mini-titulo {
  margin: 0 0 0.35em !important;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mini-etiqueta {
  font-size: 0.58em;
  color: var(--texto-suave);
}

.mini-valor {
  margin: 0 0 0.45em !important;
  font-size: 0.8em;
  font-weight: 800;
  line-height: 1.2;
}

.mini-valor--chico {
  font-size: 0.72em;
}

.mini-911 {
  margin: 0.3em 0 0 !important;
  padding: 0.45em;
  font-size: 0.56em;
  font-weight: 700;
  text-align: center;
  color: #fff;
  border-radius: 1em;
  background: var(--acento);
}

/* Hoja de compartir del sistema */
.hoja {
  position: absolute;
  inset: 0;
  z-index: 15;
  visibility: hidden;
  background: rgb(17 23 37 / 0);
  transition:
    background-color 350ms var(--curva),
    visibility 0s linear 450ms;
}

.hoja-cuerpo {
  position: absolute;
  left: 0.5em;
  right: 0.5em;
  bottom: 0.5em;
  padding: 1em;
  border-radius: 1.5em;
  background: #f3f4f8;
  transform: translateY(115%);
  transition: transform 450ms var(--curva-ios);
}

.hoja.abierta {
  visibility: visible;
  background: rgb(17 23 37 / 0.35);
  transition-delay: 0s;
}

.hoja.abierta .hoja-cuerpo {
  transform: none;
}

.hoja-archivo {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.9em;
  padding-bottom: 0.8em;
  border-bottom: 0.06em solid var(--borde);
}

.hoja-archivo img {
  width: 2.7em;
  height: 2.7em;
  object-fit: cover;
  object-position: top;
  border-radius: 0.55em;
}

.hoja-archivo b {
  display: block;
  font-size: 0.82em;
}

.hoja-archivo small {
  font-size: 0.7em;
  color: var(--texto-suave);
}

.hoja-apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4em;
  font-size: 0.66em;
  text-align: center;
}

.hoja-app {
  display: grid;
  justify-items: center;
  gap: 0.45em;
}

.hoja-app-icono {
  display: grid;
  place-items: center;
  width: 4.3em;
  height: 4.3em;
  color: #fff;
  border-radius: 1.15em;
  transition: transform 150ms var(--curva);
}

.hoja-app-icono svg {
  width: 2.3em;
  height: 2.3em;
  stroke-width: 5;
}

.hoja-app-icono--verde { background: var(--whatsapp); }
.hoja-app-icono--azul { background: #3b82f6; }
.hoja-app-icono--gris { background: #8e97ad; }

.hoja-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 0.6em;
  padding: 0.75em 0.95em;
  font-size: 0.8em;
  background: #fff;
  border-bottom: 0.06em solid #e3e6ee;
  transition: background-color 200ms var(--curva);
}

.hoja-archivo + .hoja-fila {
  border-radius: 0.8em 0.8em 0 0;
}

.hoja-fila:last-child {
  border-bottom: 0;
  border-radius: 0 0 0.8em 0.8em;
}

.hoja-fila svg {
  width: 1.35em;
  height: 1.35em;
  stroke-width: 1.8;
}

.resalta {
  background-color: #e3ebfd !important;
}

/* Chat */
.a-marco--chat {
  background: #e8ecf3;
}

.chat-cabeza {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.8em;
  font-size: 0.88em;
  background: #fff;
  border-bottom: 0.06em solid var(--borde);
}

.chat-cabeza > svg {
  width: 1.2em;
  height: 1.2em;
  color: var(--primario);
}

.chat-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  font-weight: 700;
  color: var(--primario);
  border-radius: 50%;
  background: var(--superficie-hundida);
}

.chat-avatar svg {
  width: 1.35em;
  height: 1.35em;
  stroke-width: 5;
}

.chat-cabeza b {
  display: block;
  font-size: 0.95em;
}

.chat-cabeza small {
  display: block;
  font-size: 0.72em;
  color: var(--texto-suave);
}

.chat-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5em;
  min-height: 0;
  padding: 0.8em;
  overflow: hidden;
}

.chat-fecha {
  align-self: center;
  margin: 0 0 auto !important;
  padding: 0.25em 0.7em;
  font-size: 0.65em;
  color: var(--texto-suave);
  border-radius: 0.5em;
  background: rgb(255 255 255 / 0.85);
}

.chat-burbuja {
  display: none;
  align-self: flex-start;
  max-width: 80%;
  padding: 0.5em 0.7em 0.4em;
  font-size: 0.78em;
  line-height: 1.35;
  background: #fff;
  border-radius: 0.9em 0.9em 0.9em 0.25em;
  box-shadow: 0 0.1em 0.2em rgb(17 23 37 / 0.08);
  overflow-wrap: anywhere;
}

.chat-burbuja.visible {
  display: block;
  animation: burbuja 420ms var(--curva-rebote);
}

@keyframes burbuja {
  from {
    opacity: 0;
    transform: translateY(0.8em) scale(0.92);
  }
}

.chat-burbuja b {
  display: block;
  margin-bottom: 0.1em;
  font-size: 0.85em;
  color: var(--primario);
}

.chat-burbuja--mia {
  align-self: flex-end;
  background: #d9fdd3;
  border-radius: 0.9em 0.9em 0.25em 0.9em;
}

.chat-burbuja--imagen {
  width: 52%;
  padding: 0.25em;
}

.chat-burbuja--imagen img {
  width: 100%;
  border-radius: 0.7em;
}

.chat-hora {
  display: block;
  margin-top: 0.15em;
  font-size: 0.75em;
  text-align: right;
  color: var(--texto-suave);
}

.chat-hora b {
  display: inline;
  color: #3aa0d8;
  font-weight: 600;
}

.chat-escribir {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.4em 0.6em 1.3em;
}

.chat-escribir span {
  flex: 1;
  min-width: 0;
  padding: 0.6em 0.9em;
  font-size: 0.78em;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 1.2em;
  background: #fff;
}

.chat-escribir--lleno span {
  color: var(--texto);
}

.chat-escribir i {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  color: #fff;
  border-radius: 50%;
  background: var(--whatsapp);
}

.chat-escribir i svg {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  stroke: none;
}

.aviso-app {
  position: absolute;
  top: 3.2em;
  left: 0.6em;
  right: 0.6em;
  z-index: 16;
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.6em 0.8em;
  font-size: 0.76em;
  line-height: 1.3;
  color: var(--texto);
  border-radius: 1.15em;
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 0.6em 1.6em rgb(17 23 37 / 0.28);
  opacity: 0;
  transform: translateY(-150%);
  transition:
    transform 500ms var(--curva-rebote),
    opacity 300ms var(--curva);
}

.aviso-app.visible {
  opacity: 1;
  transform: none;
}

.aviso-app img {
  flex: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 0.65em;
}

.aviso-app b {
  display: block;
  font-size: 0.92em;
}

/* ---------- Amenazas ---------- */

.simulador {
  display: grid;
  gap: 24px;
}

@media (min-width: 1000px) {
  .simulador {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }

  .simulador-preguntas {
    position: sticky;
    top: calc(var(--alto-cabecera) + 24px);
  }
}

.simulador-preguntas {
  display: grid;
  gap: 22px;
  padding: 24px;
  border-radius: var(--radio);
  background: var(--fondo);
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 10px;
  padding: 0;
  font-weight: 700;
}

.segmentado {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--pista);
}

.segmentado label {
  position: relative;
  flex: 1;
  min-width: 0;
}

.segmentado input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmentado span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--texto-suave);
  border-radius: 10px;
  transition:
    background-color 250ms var(--curva),
    color 250ms var(--curva),
    box-shadow 250ms var(--curva);
}

.segmentado input:checked + span {
  color: var(--texto);
  background: var(--superficie);
  box-shadow: 0 2px 8px rgb(17 23 37 / 0.12);
}

.segmentado input:focus-visible + span {
  outline: 3px solid var(--primario);
  outline-offset: 2px;
}

.segmentado span.auto {
  animation: auto-elegido 700ms var(--curva);
}

@keyframes auto-elegido {
  from {
    box-shadow: 0 0 0 6px rgb(50 61 91 / 0.25);
  }
}

.simulador-nota {
  margin: 0;
  font-size: 0.875rem;
  color: var(--texto-suave);
}

.simulador-tarjetas {
  display: grid;
  gap: 20px;
}

@media (min-width: 720px) {
  .simulador-tarjetas {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.amenaza {
  overflow: hidden;
  background: var(--superficie);
  border: 2px solid transparent;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition:
    border-color 400ms var(--curva),
    box-shadow 400ms var(--curva);
}

.amenaza-imagen {
  display: grid;
  place-items: end center;
  aspect-ratio: 16 / 9;
  padding: 18px 18px 0;
  background: linear-gradient(180deg, var(--superficie-hundida), var(--superficie));
}

.amenaza-imagen img {
  width: auto;
  max-height: 100%;
  object-fit: contain;
  transition:
    opacity 300ms var(--curva),
    filter 400ms var(--curva),
    scale 400ms var(--curva);
}

.amenaza-cuerpo {
  padding: 18px 24px 24px;
}

.amenaza-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.etiqueta {
  padding: 3px 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 6px;
}

.etiqueta--caso {
  color: #fff;
  background: var(--acento);
}

.etiqueta--guia {
  color: var(--texto-suave);
  background: var(--superficie-hundida);
}

.amenaza h3 {
  margin-bottom: 6px;
}

.amenaza p {
  margin: 0 0 10px;
}

.amenaza-regla {
  font-size: 1.0625rem;
  font-weight: 700;
}

.amenaza-mito {
  margin: 14px 0 0 !important;
  padding-top: 12px;
  font-size: 0.875rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--pista);
}

.amenaza-suma {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--pista);
}

.amenaza-suma li {
  display: flex;
  gap: 10px;
  font-size: 0.9375rem;
}

.amenaza-suma .icono {
  margin-top: 1px;
  color: var(--primario);
  stroke-width: 2.6;
}

.amenaza--inundacion[data-caso='si'] {
  border-color: var(--acento);
}

.amenaza--inundacion[data-caso='no'] .amenaza-imagen img {
  filter: grayscale(0.85);
  opacity: 0.55;
  scale: 0.92;
}

.amenaza--sismo .etiqueta--caso {
  background: var(--primario);
}

.cambia {
  animation: cambio 380ms var(--curva);
}

@keyframes cambio {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---------- Modo emergencia ---------- */

.emergencia {
  position: relative;
  padding-block: clamp(80px, 10vw, 136px);
  color: #fff;
  background: var(--noche);
  overflow-x: clip;
}

.emergencia h2 {
  max-width: 22ch;
}

.eyebrow--rojo {
  color: #ff6b72;
}

.sismograma {
  position: sticky;
  top: calc(50vh - 90px);
  z-index: 0;
  display: block;
  width: 100%;
  height: 180px;
  margin-bottom: -180px;
  pointer-events: none;
  opacity: 0.9;
}

.emergencia .contenedor {
  position: relative;
  z-index: 1;
}

.relato--oscuro .relato-paso {
  color: #fff;
  background: rgb(255 255 255 / 0.05);
  box-shadow: none;
}

.relato--oscuro .relato-paso.activo {
  border-color: var(--acento);
}

.relato--oscuro .paso-numero {
  color: #ff8a8f;
}

.relato--oscuro .relato-paso p {
  color: rgb(255 255 255 / 0.68);
}

.emergencia .boton-pausa {
  color: rgb(255 255 255 / 0.85);
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.2);
}

.emergencia :focus-visible {
  outline-color: #fff;
}

@media (min-width: 960px) {
  .relato--oscuro .relato-paso {
    background: none;
  }

  .relato--oscuro .relato-paso::before {
    background: rgb(255 255 255 / 0.14);
  }

  .relato--oscuro .relato-paso.activo::before {
    background: var(--acento);
  }
}

.telefono.tiembla {
  animation: temblor 2000ms linear;
}

@keyframes temblor {
  0%, 100% { transform: none; }
  4% { transform: translate(-4px, 1px) rotate(-0.7deg); }
  8% { transform: translate(4px, -1px) rotate(0.7deg); }
  12% { transform: translate(-4px, 1px) rotate(-0.6deg); }
  16% { transform: translate(4px, 0) rotate(0.6deg); }
  20% { transform: translate(-3px, 1px) rotate(-0.5deg); }
  26% { transform: translate(3px, -1px) rotate(0.5deg); }
  32% { transform: translate(-3px, 1px) rotate(-0.4deg); }
  40% { transform: translate(2px, 0) rotate(0.3deg); }
  48% { transform: translate(-2px, 1px) rotate(-0.3deg); }
  58% { transform: translate(1.5px, 0) rotate(0.2deg); }
  68% { transform: translate(-1px, 0) rotate(-0.1deg); }
  80% { transform: translate(0.6px, 0); }
  90% { transform: translate(-0.3px, 0); }
}

/* Pantalla de emergencia de la app: se abre al instante, sin transición. */
.a-app--emergencia {
  color: #fff;
  background: var(--noche);
}

[data-emergencia-rapida] {
  display: none;
  z-index: 6;
}

[data-emergencia-rapida].abierta {
  display: flex;
}

.e-pestanas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  margin: 0.2em 0 1.4em;
}

.e-pestanas span {
  padding: 0.65em 0.4em;
  font-size: 0.76em;
  font-weight: 700;
  text-align: center;
  color: rgb(255 255 255 / 0.72);
  border: 0.08em solid rgb(255 255 255 / 0.18);
  border-radius: 1em;
}

.e-pestanas .activa {
  color: #fff;
  background: rgb(206 32 41 / 0.15);
  border: 0.12em solid var(--acento);
}

.e-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.55em !important;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.156em;
  text-transform: uppercase;
  color: var(--acento);
}

.e-eyebrow svg {
  width: 1.45em;
  height: 1.45em;
  stroke-width: 3;
}

.e-eyebrow--despues {
  margin-top: 1.5em !important;
}

.e-eyebrow--arriba {
  margin-top: 0.3em !important;
}

.e-h1 {
  margin: 0 0 0.45em !important;
  font-size: 1.72em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.e-detalle {
  margin: 0 0 0.6em !important;
  font-size: 1em;
  line-height: 1.45;
}

.e-apoyo {
  margin: -0.2em 0 1em !important;
  font-size: 0.74em;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.62);
}

.e-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3em;
  margin: 0 0 0.75em;
  font-size: 0.92em;
  font-weight: 700;
  color: #fff;
  border-radius: 1em;
  background: var(--acento);
  transition: transform 120ms linear;
}

.e-boton svg {
  width: 1.3em;
  height: 1.3em;
  stroke-width: 5;
}

.e-boton--salir,
.e-boton--secundario {
  color: rgb(255 255 255 / 0.82);
  background: transparent;
  border: 0.08em solid rgb(255 255 255 / 0.16);
}

.e-tarjeta {
  margin: 0 0 0.75em;
  padding: 0.9em 1em;
  border: 0.08em solid rgb(255 255 255 / 0.13);
  border-radius: 1em;
}

.e-h3 {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.3em !important;
  font-size: 1.05em;
  font-weight: 800;
}

.e-h3 svg {
  width: 1.3em;
  height: 1.3em;
  stroke-width: 5;
}

.e-tarjeta p:last-child {
  font-size: 0.8em;
  color: rgb(255 255 255 / 0.65);
}

.e-inundacion {
  display: none;
}

.agua-activa .e-inundacion {
  display: block;
}

.agua-activa .e-sismo {
  display: none;
}

/* Avisar */
.av-opcion {
  display: block;
  margin-bottom: 0.5em;
  padding: 0.75em 0.95em;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.35;
  background: #fff;
  border: 0.12em solid transparent;
  border-radius: 0.9em;
  box-shadow: 0 0.4em 1em rgb(50 61 91 / 0.08);
}

.av-opcion.activa {
  border-color: var(--primario);
}

.av-burbuja {
  margin: 0.35em 0 0.7em;
  padding: 0.75em 0.9em;
  font-size: 0.8em;
  line-height: 1.4;
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 0.4em 1em rgb(50 61 91 / 0.1);
  overflow-wrap: anywhere;
}

.av-remitente {
  margin-bottom: 0.3em !important;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--texto-suave);
}

.av-whatsapp,
.av-sms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 2.7em;
  margin-bottom: 0.45em;
  font-size: 0.85em;
  font-weight: 700;
  color: #fff;
  border-radius: 0.9em;
  background: var(--whatsapp);
  transition: transform 150ms var(--curva);
}

.av-sms {
  color: var(--texto);
  background: #fff;
  border: 0.08em solid var(--borde);
}

.av-whatsapp svg,
.av-sms svg {
  width: 1.2em;
  height: 1.2em;
  stroke-width: 5;
}

/* Albergues */
.a-tarjeta--albergues .al-nombre {
  font-size: 0.95em;
  font-weight: 700;
}

.al-meta {
  font-size: 0.74em;
  color: var(--texto-suave);
}

.al-enlace {
  display: flex;
  align-items: center;
  gap: 0.2em;
  margin: 0.3em 0 0.8em !important;
  font-size: 0.74em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.al-enlace:last-child {
  margin-bottom: 0 !important;
}

.al-enlace svg {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 3;
}

/* ---------- Lo que trae ---------- */

.trae-lista {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .trae-lista {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (min-width: 1024px) {
  .trae-lista {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.trae-item {
  padding: 24px;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition:
    opacity 700ms var(--curva),
    translate 800ms var(--curva),
    transform 350ms var(--curva),
    box-shadow 350ms var(--curva);
}

.trae-icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: var(--primario);
  border-radius: 14px;
  background: var(--superficie-hundida);
}

.trae-icono svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trae-item--rojo .trae-icono {
  color: #fff;
  background: var(--acento);
}

.trae-item h3 {
  margin-bottom: 8px;
  font-size: 1.1875rem;
}

.trae-item p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

@media (hover: hover) and (pointer: fine) {
  .trae-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgb(17 23 37 / 0.05), 0 24px 48px rgb(50 61 91 / 0.16);
  }

  .trae-item:hover .trae-icono svg {
    animation: menea 600ms var(--curva);
  }
}

@keyframes menea {
  30% {
    transform: rotate(-9deg) scale(1.1);
  }
  60% {
    transform: rotate(6deg);
  }
}

.trae-ademas {
  max-width: 70ch;
  margin: 28px 0 0;
  color: var(--texto-suave);
}

.trae-ademas strong {
  color: var(--texto);
}

/* ---------- Galería ---------- */

.galeria {
  overflow-x: clip;
}

.galeria-cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.galeria-cabeza .eyebrow {
  margin-bottom: 14px;
}

.galeria-flechas {
  display: none;
  gap: 10px;
}

@media (min-width: 720px) {
  .galeria-flechas {
    display: flex;
  }
}

.boton-redondo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 50%;
  cursor: pointer;
  transition:
    opacity 200ms var(--curva),
    border-color 200ms var(--curva),
    transform 150ms var(--curva);
}

.boton-redondo:active {
  transform: scale(0.94);
}

.boton-redondo:disabled {
  opacity: 0.35;
  cursor: default;
}

.galeria-pista {
  --lado: max(var(--margen), calc((100% - var(--ancho-max)) / 2));
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 8px var(--lado) 28px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lado);
  scrollbar-width: none;
}

.galeria-pista::-webkit-scrollbar {
  display: none;
}

.galeria-pista:focus-visible {
  outline-offset: -3px;
}

.galeria-item {
  flex: none;
  width: min(66vw, 256px);
  scroll-snap-align: start;
}

.captura {
  padding: 7px;
  border-radius: 34px;
  background: linear-gradient(150deg, #353d52 0%, #10141f 38%, #1c2232 100%);
  box-shadow: 0 30px 50px -30px rgb(17 23 37 / 0.55);
}

.captura img {
  width: 100%;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  border-radius: 27px;
  background: var(--fondo);
}

.captura--oscura img {
  background: var(--noche);
}

.captura--tarjeta img {
  aspect-ratio: 9 / 16;
}

.galeria-item p {
  margin: 14px 4px 0;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.galeria-item strong {
  color: var(--texto);
}

/* ---------- Sin señal ---------- */

.sin-senal {
  padding-block: clamp(80px, 10vw, 136px);
  background: var(--fondo);
}

.sin-senal-interior {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 960px) {
  .sin-senal-interior {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 80px;
  }
}

.plataformas {
  display: inline-flex;
  gap: 4px;
  margin: 28px 0 18px;
  padding: 4px;
  border-radius: 14px;
  background: var(--pista);
}

.plataformas button {
  min-height: 44px;
  padding: 10px 16px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto-suave);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background-color 250ms var(--curva),
    color 250ms var(--curva),
    box-shadow 250ms var(--curva);
}

.plataformas [aria-selected='true'] {
  color: var(--texto);
  background: var(--superficie);
  box-shadow: 0 2px 8px rgb(17 23 37 / 0.12);
}

.instalar-pasos {
  display: grid;
  gap: 12px;
  max-width: 34em;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.instalar-pasos li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--superficie);
  border: 2px solid transparent;
  border-radius: 16px;
  counter-increment: paso;
  transition: border-color 300ms var(--curva);
}

.instalar-pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-weight: 700;
  color: var(--primario);
  border-radius: 50%;
  background: var(--superficie-hundida);
  transition:
    background-color 300ms var(--curva),
    color 300ms var(--curva);
}

.instalar-pasos li.actual {
  border-color: var(--primario);
}

.instalar-pasos li.actual::before {
  color: #fff;
  background: var(--primario);
}

.sin-senal-demo {
  display: grid;
  justify-items: center;
}

.sin-senal-demo .telefono {
  --ancho: min(300px, 76vw);
}

/* El navegador y la pantalla de inicio del teléfono */
.nav-web {
  padding-top: 3em;
  background: #fff;
}

.web-barra-android {
  display: none;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.7em 0.5em;
  border-bottom: 0.06em solid var(--borde);
}

[data-plataforma-demo='android'] .web-barra-android {
  display: flex;
}

.web-url {
  flex: 1;
  padding: 0.45em 0.9em;
  font-size: 0.72em;
  text-align: center;
  color: var(--texto);
  border-radius: 1.2em;
  background: var(--superficie-hundida);
}

.web-menu {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  transition: background-color 200ms var(--curva);
}

.web-menu svg {
  width: 1.5em;
  height: 1.5em;
}

.web-pagina {
  flex: 1;
  min-height: 0;
  padding: 0.9em 1.25em;
  overflow: hidden;
  background: var(--fondo);
}

.web-pagina img {
  width: 52%;
  margin: 0 0 0.4em;
}

.web-titulo {
  margin: 0 0 0.5em !important;
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.web-titulo span {
  color: var(--acento);
}

.web-texto {
  margin: 0 0 0.9em !important;
  font-size: 0.78em;
  color: var(--texto-suave);
}

.web-nota {
  margin-top: 0.6em !important;
  font-size: 0.66em;
  color: var(--texto-suave);
}

.web-barra-ios {
  padding: 0.5em 0.8em 1.3em;
  background: #f6f6f8;
  border-top: 0.06em solid var(--borde);
}

[data-plataforma-demo='android'] .web-barra-ios {
  display: none;
}

.web-barra-ios .web-url {
  display: block;
  margin-bottom: 0.55em;
}

.web-herramientas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3em;
  color: var(--ios-azul);
}

.web-herramientas svg {
  width: 1.45em;
  height: 1.45em;
  stroke-width: 2;
}

.web-herramientas > svg:nth-child(4),
.web-herramientas > svg:nth-child(5) {
  stroke-width: 4.2;
}

.web-herramientas .apagado {
  opacity: 0.35;
}

.web-compartir {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 0.6em;
  transition: background-color 200ms var(--curva);
}

.web-compartir svg {
  stroke-width: 5;
}

.menu-android {
  position: absolute;
  top: 5.6em;
  right: 0.6em;
  z-index: 14;
  width: 12.5em;
  padding: 0.4em 0;
  font-size: 0.8em;
  background: #fff;
  border-radius: 0.8em;
  box-shadow: 0 0.6em 1.6em rgb(17 23 37 / 0.25);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  transform-origin: top right;
  transition:
    opacity 200ms var(--curva),
    transform 300ms var(--curva),
    visibility 0s linear 300ms;
}

.menu-android.abierto {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.menu-android span {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1em;
}

.menu-android svg {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 1.8;
}

.hoja--ios .hoja-cuerpo {
  padding: 0.8em;
  background: #f2f2f7;
}

.confirmar {
  padding-top: 3em;
  background: #f2f2f7;
}

.confirmar-android {
  display: none;
}

[data-plataforma-demo='android'] .confirmar {
  background: rgb(17 23 37 / 0.45);
}

[data-plataforma-demo='android'] .confirmar-ios {
  display: none;
}

[data-plataforma-demo='android'] .confirmar-android {
  display: block;
  margin: auto 1.1em;
  padding: 1.2em;
  background: #fff;
  border-radius: 1.4em;
}

.confirmar-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 0.9em;
  font-size: 0.8em;
  color: var(--ios-azul);
}

.confirmar-barra b {
  color: var(--texto);
}

.confirmar-anadir,
.confirmar-instalar {
  padding: 0.25em 0.55em;
  font-weight: 700;
  border-radius: 0.45em;
  transition: background-color 200ms var(--curva);
}

.confirmar-fila {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 0.6em 0.8em;
  padding: 0.8em;
  background: #fff;
  border-radius: 0.8em;
}

.confirmar-android .confirmar-fila {
  margin: 0;
  padding: 0;
}

.confirmar-fila img {
  width: 3.4em;
  height: 3.4em;
  border-radius: 0.8em;
}

[data-plataforma-demo='android'] .confirmar-fila img {
  border-radius: 50%;
}

.confirmar-nombre {
  font-size: 0.95em;
  font-weight: 600;
}

.confirmar-url {
  font-size: 0.74em;
  color: var(--texto-suave);
}

.confirmar-nota {
  margin: 0 1.2em !important;
  font-size: 0.68em;
  color: var(--texto-suave);
}

.confirmar-titulo {
  margin: 0 0 0.8em !important;
  font-size: 1.05em;
  font-weight: 600;
}

.confirmar-botones {
  display: flex;
  justify-content: flex-end;
  gap: 1em;
  margin: 1em 0 0 !important;
  font-size: 0.85em;
  font-weight: 600;
  color: #1a73e8;
}

.escritorio {
  padding: 4.3em 1.1em 1em;
  background: linear-gradient(165deg, #7f94bf 0%, #b8a9cf 52%, #efc3ad 100%);
}

.escritorio-rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.35em 0.8em;
  justify-items: center;
}

.app-falsa {
  width: 3.4em;
  height: 3.4em;
  border-radius: 0.95em;
  background: rgb(255 255 255 / 0.55);
}

.app-falsa--2 { background: rgb(255 255 255 / 0.4); }
.app-falsa--3 { background: rgb(17 23 37 / 0.18); }
.app-falsa--4 { background: rgb(255 255 255 / 0.7); }
.app-falsa--5 { background: rgb(50 61 91 / 0.25); }
.app-falsa--6 { background: rgb(255 255 255 / 0.3); }
.app-falsa--7 { background: rgb(255 255 255 / 0.62); }
.app-falsa--8 { background: rgb(17 23 37 / 0.1); }

[data-plataforma-demo='android'] .app-falsa,
[data-plataforma-demo='android'] .app-nueva img {
  border-radius: 50%;
}

.app-nueva {
  display: grid;
  justify-items: center;
  gap: 0.35em;
  opacity: 0;
  transform: scale(0.3);
  transition:
    transform 600ms var(--curva-rebote),
    opacity 250ms var(--curva);
}

.app-nueva.visible {
  opacity: 1;
  transform: none;
}

.app-nueva img {
  width: 3.4em;
  height: 3.4em;
  border-radius: 0.95em;
  box-shadow: 0 0.3em 0.8em rgb(17 23 37 / 0.28);
}

.app-nueva small {
  font-size: 0.6em;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.escritorio-aviso {
  position: absolute;
  left: 50%;
  bottom: 2.6em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  font-size: 0.74em;
  font-weight: 600;
  color: #fff;
  border-radius: 1em;
  background: rgb(17 23 37 / 0.82);
  opacity: 0;
  translate: -50% 0.6em;
  transition:
    opacity 300ms var(--curva),
    translate 400ms var(--curva);
}

.escritorio-aviso.visible {
  opacity: 1;
  translate: -50% 0;
}

.escritorio-aviso svg {
  width: 1.3em;
  height: 1.3em;
  stroke-width: 1.9;
}

.sin-conexion {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.9em !important;
  padding: 0.55em 0.8em;
  font-size: 0.74em;
  font-weight: 600;
  color: var(--exito);
  border-radius: 0.8em;
  background: #e5f2ea;
}

.sin-conexion svg {
  width: 1.35em;
  height: 1.35em;
  stroke-width: 5;
}

/* ---------- Lo que no es ---------- */

.no-es {
  overflow-x: clip;
}

.no-es-interior {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 960px) {
  .no-es-interior {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 64px;
  }
}

.mitos {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mito {
  padding: 18px 22px 20px;
  background: var(--superficie);
  border-radius: 18px;
  box-shadow: var(--sombra);
}

.mito-falso {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--texto-suave);
}

.mito-falso s {
  position: relative;
  text-decoration: none;
}

.mito-falso s::after {
  content: '';
  position: absolute;
  top: 55%;
  left: -3px;
  right: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--acento);
  transform-origin: 0 50%;
  transition: transform 600ms var(--curva) 350ms;
}

.js .mito:not(.es-visible) .mito-falso s::after {
  transform: scaleX(0);
}

.mito-verdad {
  margin: 0;
  font-size: 1.0625rem;
}

.no-es-imagen {
  justify-self: center;
  width: min(100%, 400px);
  translate: 0 var(--py, 0px);
}

/* ---------- Gratis ---------- */

.gratis {
  padding-block: clamp(120px, 14vw, 180px) clamp(80px, 10vw, 136px);
}

.gratis-tarjeta {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  background: var(--superficie);
  border-radius: 28px;
  box-shadow: 0 2px 4px rgb(17 23 37 / 0.04), 0 34px 70px -30px rgb(50 61 91 / 0.38);
}

.gratis-imagen {
  width: min(210px, 56%);
  margin: calc(-1 * clamp(96px, 13vw, 128px)) auto 4px;
  translate: 0 var(--py, 0px);
}

.gratis-precio {
  margin: 0 0 12px;
  font-size: clamp(3.75rem, 2.4rem + 6vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;
}

.gratis-bajada {
  max-width: 40ch;
  margin: 0 auto 26px;
  color: var(--texto-suave);
}

.gratis-lista {
  display: grid;
  gap: 12px;
  width: fit-content;
  margin: 0 auto 30px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.gratis-lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}

.check-dibujado {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primario);
  transition:
    transform 500ms var(--curva-rebote),
    opacity 250ms var(--curva);
  transition-delay: calc(var(--i, 0) * 140ms + 250ms);
}

.check-dibujado svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 77;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 420ms var(--curva);
  transition-delay: calc(var(--i, 0) * 140ms + 420ms);
}

.js .gratis-tarjeta:not(.es-visible) .check-dibujado {
  opacity: 0;
  transform: scale(0.5);
}

.js .gratis-tarjeta:not(.es-visible) .check-dibujado svg {
  stroke-dashoffset: 77;
}

.gratis-contador {
  margin: 18px 0 0;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.gratis-contador strong {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* ---------- Preguntas ---------- */

.acordeon {
  display: grid;
  gap: 10px;
}

.pregunta {
  background: var(--fondo);
  border-radius: 16px;
  transition: background-color 250ms var(--curva);
}

.pregunta h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pregunta button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 16px 20px;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: var(--texto);
  background: none;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
}

.pregunta button .icono {
  color: var(--texto-suave);
  transition: transform 350ms var(--curva);
}

.pregunta button[aria-expanded='true'] .icono {
  transform: rotate(180deg);
}

.respuesta {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 380ms var(--curva);
}

.respuesta > div {
  min-height: 0;
  overflow: hidden;
}

.respuesta p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--texto-suave);
}

.js .pregunta:not(.abierta) .respuesta {
  grid-template-rows: 0fr;
}

.js .pregunta:not(.abierta) .respuesta > div {
  visibility: hidden;
  transition: visibility 0s linear 380ms;
}

/* ---------- Cierre ---------- */

.cierre {
  padding-block: clamp(80px, 10vw, 136px);
  text-align: center;
}

.cierre-interior {
  display: grid;
  justify-items: center;
}

.cierre-imagen {
  width: min(360px, 78%);
  margin-bottom: 20px;
}

.cierre h2 {
  font-size: clamp(2.25rem, 1.4rem + 3.8vw, 3.875rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}

.cierre .bajada {
  margin-inline: auto;
}

.cierre-acciones {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 32px;
}

.enlace-compartir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--primario);
  text-underline-offset: 4px;
}

.enlace-compartir .icono {
  color: #1ea952;
  stroke-width: 5;
}

/* ---------- Pie ---------- */

.pie {
  padding-block: 48px calc(40px + env(safe-area-inset-bottom, 0px));
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 0.7);
  background: var(--noche);
}

.pie-interior {
  display: grid;
  gap: 24px;
}

@media (min-width: 960px) {
  .pie-interior {
    grid-template-columns: 1fr 1.5fr auto;
    align-items: start;
    gap: 48px;
  }
}

.marca--clara {
  margin: 0 0 8px;
  color: #fff;
}

.pie-marca p {
  margin: 0;
}

.pie-marca .marca--clara {
  margin-bottom: 8px;
}

.pie-aviso {
  max-width: 60ch;
  margin: 0;
}

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.pie-enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  text-underline-offset: 4px;
}

.pie :focus-visible {
  outline-color: #fff;
}

/* ---------- Aparición al desplazar ---------- */

.js [data-revelar] {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 700ms var(--curva),
    translate 800ms var(--curva);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js [data-revelar].es-visible {
  opacity: 1;
  translate: none;
}

/* ---------- Ajustes de las escenas ---------- */

/* Una pantalla clara dentro de una escena oscura (avisar, albergues) pinta
 * su propio fondo, y la barra de estado la sigue. */
.a-marco--claro {
  color: var(--texto);
  background: var(--fondo);
}

.a-marco--chat {
  color: var(--texto);
}

.pantalla {
  transition:
    background-color 300ms var(--curva),
    color 300ms var(--curva);
}

.pantalla:has(.a-marco--claro.activo),
.pantalla:has(.a-marco--chat.activo) {
  color: var(--texto);
  background: var(--fondo);
}

.pantalla:has(.abierta[data-emergencia-rapida]) .a-estado,
.pantalla:has(.escritorio.activo) .a-estado {
  color: #fff;
}

.a-app--ob.listo .ob-cabeza {
  visibility: hidden;
}

/* Entre vueltas, la pantalla se apaga un instante y vuelve a empezar. */
.pantalla > :not(.a-estado, .dedo) {
  transition: opacity 260ms var(--curva);
}

.pantalla.reiniciando > :not(.a-estado, .dedo) {
  opacity: 0;
}

.sin-transicion,
.sin-transicion *,
.dedo.sin-viaje {
  transition: none !important;
  animation: none !important;
}

.galeria-pista.arrastrando {
  scroll-snap-type: none;
  cursor: grabbing;
}

@media (hover: hover) and (pointer: fine) {
  .galeria-pista {
    cursor: grab;
  }
}

/* Las tarjetas que aparecen al desplazar conservan su respuesta al pasar el
 * ratón: la regla de aparición no puede pisar esas transiciones. */
.js .trae-item[data-revelar] {
  transition:
    opacity 700ms var(--curva),
    translate 800ms var(--curva),
    transform 350ms var(--curva),
    box-shadow 350ms var(--curva);
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
}

/* Quien pidió menos movimiento ve la página quieta y completa. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-revelar] {
    opacity: 1;
    translate: none;
  }

  .relato-control,
  .flotante {
    translate: none;
  }

  .boton-pausa {
    display: none;
  }
}