/* TallerClaro · portada y páginas públicas
   ---------------------------------------------------------------------------
   La cargan /, /privacidad/, /terminos/, /solicitar-acceso/ y /alta/, siempre después de
   css/estilo.css, cuyos tokens usa. Mismas reglas: sin estilos en línea, modo claro y oscuro
   por tokens. Lo de la portada va bajo sus propias clases; las demás páginas solo usan el pie
   (.pie*) y las páginas legales (.legal*). Guía en docs/DISENO.md.

   0. Tokens de la portada     1. Secciones          2. Tarjetas de función
   3. Maquetas                 4. Botón de Clarito   5. Llamada final y pie
   6. Páginas legales          7. Píldora de las apps */

/* ===========================================================================
   0. Tokens de la portada
   =========================================================================== */

:root {
  /* Sobre grafito (el hero, Clarito y la llamada final). El grafito es oscuro en los dos modos,
     así que estos valen igual en claro y en oscuro, como --acento-sobre-grafito en estilo.css:
     no se repiten en el bloque oscuro. --grafito-lectura sobre --grafito: 11,3:1. */
  --grafito-lectura: #c9d1d8;
  --grafito-velo: rgb(255 255 255 / 0.06);
  --grafito-velo-fuerte: rgb(255 255 255 / 0.12);
  --grafito-filo: rgb(255 255 255 / 0.14);
  --grafito-filo-fuerte: rgb(255 255 255 / 0.3);
  --grafito-rejilla: rgb(255 255 255 / 0.035);
  --grafito-luz: rgb(255 255 255 / 0.1);
  --acento-resplandor: rgb(67 208 143 / 0.18);
  --lectura-brillo: rgb(67 208 143 / 0.3);
  --sombra-maqueta: 0 40px 80px -30px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.08);

  /* El papel fotografiado en la maqueta del hero: blanco en claro, algo apagado en oscuro. */
  --papel: #ffffff;
  --papel-linea: #cfd6dc;

  /* El botón flotante de Clarito y el sitio que le deja el pie. */
  --alto-lanzador: 56px;

  /* El QR de la App Store no tiene fondo propio: se lee sobre blanco en los dos modos. */
  --qr-fondo: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #dfe4e8;
    --papel-linea: #9aa5af;
  }
}

/* ===========================================================================
   1. Secciones
   =========================================================================== */

.pagina-portada main {
  max-width: none;
  padding: 0;
}

.pagina-portada .mensajes {
  max-width: var(--ancho-portada);
  margin: var(--e-4) auto 0;
  padding: 0 var(--lateral);
}

.seccion {
  padding-block: var(--e-8);
}

@media (min-width: 1000px) {
  .seccion {
    padding-block: var(--e-9);
  }
}

.seccion-alterna {
  background: var(--superficie-2);
  border-block: 1px solid var(--borde-suave);
}

.seccion-intro {
  max-width: 52rem;
  margin-bottom: var(--e-6);
}

.seccion-intro .antetitulo,
.estado-texto .antetitulo {
  margin-bottom: var(--e-3);
  font-size: var(--t-sm);
}

.seccion-intro h2 {
  margin-bottom: var(--e-4);
  font-size: var(--t-3xl);
  font-weight: 750;
  letter-spacing: -0.028em;
  line-height: 1.08;
}

.seccion-intro p:not(.antetitulo) {
  max-width: var(--ancho-texto);
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--t-md);
}

/* El destello: lo que hace la inteligencia artificial, en toda la portada. */
.destello {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--acento);
}

/* --- Hero: nave en penumbra con luz cenital y rejilla de plano. --- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--e-7) var(--e-8);
  background-color: var(--grafito);
  background-image:
    radial-gradient(55% 55% at 80% -5%, var(--grafito-luz), transparent 70%),
    radial-gradient(35% 40% at 8% -10%, var(--grafito-velo), transparent 70%),
    linear-gradient(var(--grafito-rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--grafito-rejilla) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  color: var(--grafito-texto);
}

@media (min-width: 1000px) {
  .hero {
    padding-block: var(--e-8) var(--e-9);
  }
}

.hero-rejilla {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-rejilla {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

.sello-desarrollo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 32px;
  margin: 0 0 var(--e-4);
  padding: 4px 14px 4px 12px;
  border: 1px solid var(--grafito-filo);
  border-radius: var(--r-pastilla);
  background: var(--grafito-velo);
  color: var(--grafito-texto);
  font-family: var(--fuente-titulos);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
}

.sello-luz {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--acento-sobre-grafito);
  box-shadow: 0 0 0 4px var(--acento-resplandor);
}

.hero .antetitulo,
.seccion-clarito .antetitulo {
  color: var(--acento-sobre-grafito);
}

.hero .antetitulo {
  margin-bottom: var(--e-4);
  font-size: var(--t-sm);
}

.hero h1 {
  max-width: 14ch;
  margin: 0 0 var(--e-5);
  color: var(--grafito-texto);
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* En dos columnas el texto tiene la mitad del ancho: con el tope, el título no pasa de cuatro líneas
   entre 1000 y 1300 px. */
@media (min-width: 1000px) {
  .hero h1 {
    font-size: min(var(--t-display), 5.6vw);
  }
}

.resalte {
  color: var(--acento-sobre-grafito);
}

.hero-entrada {
  max-width: 36rem;
  margin-bottom: var(--e-5);
  color: var(--grafito-lectura);
  font-size: var(--t-md);
  line-height: 1.55;
}

.hero .acciones {
  margin-top: 0;
}

/* Botones sobre grafito: el hero, Clarito y la llamada final. */
.hero .boton,
.seccion-clarito .boton,
.cta-final .boton {
  background: var(--grafito-velo);
  border-color: var(--grafito-filo-fuerte);
  color: var(--grafito-texto);
  box-shadow: none;
}

.hero .boton:hover,
.seccion-clarito .boton:hover,
.cta-final .boton:hover {
  background: var(--grafito-velo-fuerte);
  border-color: var(--grafito-suave);
}

.hero .boton.primario,
.seccion-clarito .boton.primario,
.cta-final .boton.primario {
  background: var(--acento-sobre-grafito);
  border-color: var(--acento-sobre-grafito);
  color: var(--tinta-sobre-acento-vivo);
}

.hero .boton.primario:hover,
.seccion-clarito .boton.primario:hover,
.cta-final .boton.primario:hover {
  background: var(--acento-sobre-grafito-hover);
  border-color: var(--acento-sobre-grafito-hover);
}

.hero .ayuda,
.cta-final .ayuda {
  max-width: 34rem;
  margin-top: var(--e-3);
  color: var(--grafito-suave);
}

/* Enlaces de la nota de aceptación: sobre el grafito, el verde de los enlaces no llega a AA. */
.hero .ayuda a,
.cta-final .ayuda a {
  color: var(--acento-sobre-grafito);
}

.hero :focus-visible,
.seccion-clarito :focus-visible,
.cta-final :focus-visible {
  outline-color: var(--acento-sobre-grafito);
}

.hero .destello,
.seccion-clarito .destello {
  color: var(--acento-sobre-grafito);
}

/* Dentro de un botón, el destello toma el color del texto. */
.boton .destello {
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
}

.garantias-breves {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-5) 0 0;
  padding: 0;
  list-style: none;
}

.garantias-breves li {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--grafito-filo);
  border-radius: var(--r-pastilla);
  background: var(--grafito-velo);
  color: var(--grafito-lectura);
  font-size: var(--t-sm);
  font-weight: 600;
}

.garantias-breves .icono {
  width: 18px;
  height: 18px;
  color: var(--acento-sobre-grafito);
}

.hero-apps {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  color: var(--grafito-suave);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.hero-apps .icono {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--acento-sobre-grafito);
}

.hero-apps a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- La IA en el taller (#funciones). --- */
.ia-principios {
  display: grid;
  gap: var(--e-4) var(--e-6);
  align-items: center;
  margin-top: var(--e-6);
  padding: var(--e-5);
  border: 1px solid var(--acento-borde);
  border-radius: var(--r-3);
  background: var(--acento-suave);
}

@media (min-width: 1000px) {
  .ia-principios {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
    padding: var(--e-5) var(--e-6);
  }
}

.ia-principios h3 {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  font-size: var(--t-lg);
  letter-spacing: -0.015em;
}

.ia-principios ul {
  display: grid;
  gap: var(--e-2) var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .ia-principios ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ia-principios li {
  position: relative;
  padding-left: 28px;
  color: var(--texto);
  font-weight: 600;
}

.ia-principios li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background: var(--acento);
  -webkit-mask: var(--i-ok) center / contain no-repeat;
  mask: var(--i-ok) center / contain no-repeat;
}

/* --- Clarito (#clarito): grafito, como el hero. --- */
.seccion-clarito {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--grafito);
  background-image:
    radial-gradient(45% 60% at 85% 55%, var(--acento-resplandor), transparent 70%),
    linear-gradient(var(--grafito-rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--grafito-rejilla) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  color: var(--grafito-texto);
}

.seccion-clarito h2 {
  color: var(--grafito-texto);
}

.seccion-clarito .seccion-intro p:not(.antetitulo) {
  color: var(--grafito-lectura);
}

.clarito-rejilla {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}

@media (min-width: 1000px) {
  .clarito-rejilla {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--e-8);
  }
}

.clarito-texto .seccion-intro {
  margin-bottom: var(--e-5);
}

.clarito-texto > .boton {
  margin-bottom: var(--e-6);
}

@media (max-width: 519px) {
  .clarito-texto > .boton {
    width: 100%;
  }
}

.seccion-clarito .funcion-tarjeta,
.seccion-clarito .funcion-tarjeta:hover {
  border-color: var(--grafito-3);
  background: var(--grafito-2);
  box-shadow: none;
}

.seccion-clarito .funcion-tarjeta h3 {
  color: var(--grafito-texto);
}

.seccion-clarito .funcion-tarjeta p {
  color: var(--grafito-lectura);
}

/* --- Todo el taller (#todo-el-taller): cuatro grupos. --- */
.funciones-grupo + .funciones-grupo {
  margin-top: var(--e-7);
}

.funciones-grupo-titulo {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin: 0 0 var(--e-4);
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
}

.funciones-grupo-titulo::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--borde);
}

/* --- Móvil y ordenador (#apps). --- */
.apps-tarjetas {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 760px) {
  .apps-tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-5);
  }
}

.apps-descargas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

/* --- Cómo funciona. --- */
.pasos {
  display: grid;
  gap: var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

@media (min-width: 900px) {
  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-6);
  }
}

.paso {
  position: relative;
  padding-top: var(--e-5);
  border-top: 2px solid var(--texto);
  counter-increment: paso;
}

.paso::before {
  content: "0" counter(paso);
  display: block;
  margin-bottom: var(--e-3);
  font-family: var(--fuente-titulos);
  font-size: 3.5rem;
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acento);
}

.paso h3 {
  font-size: var(--t-lg);
}

.paso p {
  color: var(--texto-suave);
}

.paso-quien {
  display: inline-flex;
  margin-top: var(--e-2);
}

/* --- Para quién. --- */
.destinatarios {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 900px) {
  .destinatarios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-5);
  }
}

.destinatario {
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-4);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

@media (min-width: 1000px) {
  .destinatario {
    padding: var(--e-6);
  }
}

.destinatario h3 {
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
}

.destinatario p {
  color: var(--texto-suave);
}

.destinatario-oscuro {
  border-color: var(--grafito-3);
  background: var(--grafito);
  color: var(--grafito-texto);
}

.destinatario-oscuro h3 {
  color: var(--grafito-texto);
}

.destinatario-oscuro p,
.destinatario-oscuro li {
  color: var(--grafito-lectura);
}

.destinatario-oscuro .antetitulo {
  color: var(--acento-sobre-grafito);
}

.roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}

.lista-marcada {
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}

.lista-marcada li {
  position: relative;
  padding: 5px 0 5px 28px;
}

.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  background: var(--acento);
  -webkit-mask: var(--i-ok) center / contain no-repeat;
  mask: var(--i-ok) center / contain no-repeat;
}

.destinatario-oscuro .lista-marcada li::before {
  background: var(--acento-sobre-grafito);
}

/* --- Garantías. --- */
.garantias {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 640px) {
  .garantias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .garantias {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-5);
  }
}

.garantia {
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

.garantia-icono {
  display: inline-grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  margin-bottom: var(--e-4);
  border-radius: var(--r-3);
  background: var(--acento-suave);
  color: var(--acento-tinta);
}

.garantia-icono svg {
  width: 26px;
  height: 26px;
}

.garantia-icono .destello {
  color: inherit;
}

.garantia h3 {
  font-size: var(--t-md);
}

.garantia p {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

/* --- Estado del proyecto (#estado). --- */
.estado-proyecto {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-4);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

@media (min-width: 760px) {
  .estado-proyecto {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--e-6);
    padding: var(--e-7);
  }
}

.estado-icono {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-4);
  background: var(--acento-suave);
}

.estado-icono .destello {
  width: 36px;
  height: 36px;
}

.estado-texto h2 {
  margin-bottom: var(--e-4);
  font-size: var(--t-3xl);
  font-weight: 750;
  letter-spacing: -0.028em;
  line-height: 1.08;
}

.estado-texto > p:not(.antetitulo) {
  max-width: var(--ancho-texto);
  color: var(--texto-suave);
  font-size: var(--t-md);
}

.estado-texto .boton {
  margin-top: var(--e-2);
}

/* --- Preguntas frecuentes. --- */
.preguntas {
  max-width: 50rem;
  border-top: 1px solid var(--borde);
}

.pregunta {
  border-bottom: 1px solid var(--borde);
}

.pregunta summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: var(--e-3) 48px var(--e-3) 0;
  font-family: var(--fuente-titulos);
  font-size: var(--t-md);
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.pregunta summary::-webkit-details-marker {
  display: none;
}

.pregunta summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: var(--acento);
  -webkit-mask: var(--i-mas) center / contain no-repeat;
  mask: var(--i-mas) center / contain no-repeat;
  transition: transform var(--media) var(--curva);
}

.pregunta[open] summary::after {
  transform: rotate(45deg);
}

.pregunta summary:hover {
  color: var(--acento-tinta);
}

.pregunta summary:focus-visible {
  outline-offset: 4px;
  border-radius: var(--r-1);
}

.pregunta-respuesta {
  max-width: 44rem;
  padding: 0 0 var(--e-5);
  color: var(--texto-suave);
}

.pregunta-respuesta p:last-child {
  margin-bottom: 0;
}

/* ===========================================================================
   2. Tarjetas de función: una por función, con su estado (texto y color)
   =========================================================================== */

.funciones-destacadas,
.funciones-rejilla {
  display: grid;
  gap: var(--e-4);
}

.funciones-destacadas {
  margin-bottom: var(--e-5);
}

@media (min-width: 640px) {
  .funciones-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .funciones-destacadas,
  .funciones-rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-5);
  }
}

.funcion-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--rapida) var(--curva);
}

@media (hover: hover) {
  .funcion-tarjeta:hover {
    box-shadow: var(--sombra-2);
  }
}

.funcion-tarjeta-cabeza {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
}

.funcion-tarjeta-cabeza h3,
.funcion-tarjeta-cabeza h4 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.funcion-tarjeta-cabeza .destello {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.funcion-tarjeta-cabeza .insignia {
  flex: 0 0 auto;
}

.funcion-tarjeta p {
  margin: 0;
  color: var(--texto-suave);
}

.funcion-destacada .funcion-tarjeta-cabeza h3 {
  font-size: var(--t-lg);
}

.funcion-destacada .maqueta-mini {
  margin-bottom: var(--e-2);
}

/* Entre 640 y 999 px las tres grandes van a lo ancho: maqueta a la izquierda y texto a la derecha. */
@media (min-width: 640px) and (max-width: 999px) {
  .funcion-destacada {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: var(--e-2) var(--e-5);
  }

  .funcion-destacada .maqueta-mini {
    grid-row: 1 / 3;
    margin: 0;
  }
}

/* ===========================================================================
   3. Maquetas (HTML y CSS, no son imágenes; datos inventados)
   =========================================================================== */

.maqueta-marca {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fuente-titulos);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.maqueta-marca svg {
  width: 20px;
  height: 20px;
}

.logo-hexagono {
  fill: none;
  stroke: var(--acento-sobre-grafito);
  stroke-width: 5;
  stroke-linejoin: round;
}

.logo-check {
  fill: none;
  stroke: var(--grafito-texto);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Hero: la ventana de una orden detrás y, delante, el teléfono leyendo un papel. --- */
.maqueta-hero {
  position: relative;
  display: grid;
  justify-items: center;
  font-size: var(--t-xs);
  line-height: 1.4;
}

.maqueta-hero .maqueta-ventana,
.maqueta-hero .maqueta-aviso {
  display: none;
}

@media (min-width: 1000px) {
  .maqueta-hero {
    display: block;
    padding: 0 0 176px 120px;
  }

  .maqueta-hero .maqueta-ventana {
    display: block;
  }

  /* A la derecha, como mucho 280 px; y nunca debajo del teléfono (228 px de ancho y 12 px de aire): entre
     1000 y unos 1120 px de pantalla la columna no da para los dos y el teléfono tapaba el principio del
     aviso. Con columna de sobra, `left` es el 100 % menos los 280 px y los 20 del margen: el sitio de siempre. */
  .maqueta-hero .maqueta-aviso {
    display: flex;
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 148px;
    left: max(240px, 100% - 300px);
    max-width: 280px;
  }

  .maqueta-hero .maqueta-telefono {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    width: 228px;
  }
}

.maqueta-ventana {
  overflow: hidden;
  border-radius: var(--r-4);
  background: var(--fondo);
  color: var(--texto);
  box-shadow: var(--sombra-maqueta);
}

.maqueta-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--grafito-velo);
  background: var(--grafito-2);
  color: var(--grafito-texto);
}

.maqueta-ruta {
  overflow: hidden;
  color: var(--grafito-suave);
  font-size: var(--t-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maqueta-avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: 50%;
  background: var(--acento-sobre-grafito);
}

.maqueta-cuerpo {
  padding: 18px 18px 40px;
}

.maqueta-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.maqueta-numero {
  font-family: var(--fuente-titulos);
  font-size: var(--t-md);
  font-weight: 750;
  letter-spacing: -0.01em;
}

.maqueta-vehiculo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  color: var(--texto-suave);
}

.maqueta-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: start;
  gap: 12px;
}

.maqueta-columna {
  display: grid;
  gap: 12px;
}

.maqueta-bloque {
  padding: 12px;
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

.maqueta-rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--texto-tenue);
  font-family: var(--fuente-titulos);
  font-size: var(--t-2xs);
  font-weight: 700;
  font-stretch: 87.5%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.maqueta-rotulo .insignia,
.maqueta-rotulo .confianza,
.maqueta-reconocido .insignia,
.maqueta-reconocido .confianza,
.mini-rotulo .confianza {
  min-height: 20px;
  padding: 1px 8px;
  font-size: var(--t-2xs);
  letter-spacing: 0;
  text-transform: none;
}

.maqueta-lineas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.maqueta-lineas li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--borde);
}

.maqueta-lineas li span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.maqueta-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  color: var(--texto-suave);
  font-weight: 600;
}

.maqueta-total strong {
  color: var(--texto);
  font-family: var(--fuente-titulos);
  font-size: var(--t-lg);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.maqueta-firma {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--r-2);
  background: var(--ok-fondo);
  color: var(--verde-texto);
  font-weight: 600;
}

.maqueta-firma svg {
  width: 74px;
  height: 30px;
}

.maqueta-firma .firma-trazo {
  fill: none;
  stroke: var(--texto);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.maqueta-dictado {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.maqueta-micro {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--peligro);
  color: var(--peligro-texto);
}

.maqueta-micro .icono {
  width: 16px;
  height: 16px;
}

/* La onda del dictado, quieta: lo único que se mueve en la portada es la lectura del hero y el
   chat de muestra. */
.onda {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
}

.onda span {
  display: block;
  width: 3px;
  height: 40%;
  border-radius: var(--r-pastilla);
  background: var(--texto-tenue);
}

.onda span:nth-child(2n) {
  height: 75%;
}

.onda span:nth-child(3n) {
  height: 55%;
}

.onda span:nth-child(5n) {
  height: 95%;
}

.onda span:nth-child(7n) {
  height: 30%;
}

.maqueta-parte {
  margin: 0;
  padding: 0;
  list-style: none;
}

.maqueta-parte li {
  display: flex;
  gap: 6px;
  padding: 3px 0;
}

.maqueta-parte b {
  flex: 0 0 auto;
  color: var(--texto-tenue);
  font-weight: 600;
}

.maqueta-albaran-datos {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.maqueta-albaran-datos span {
  min-width: 0;
}

.maqueta-albaran-datos strong {
  flex: 0 0 auto;
  font-family: var(--fuente-titulos);
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.maqueta-asignado {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--verde-texto);
  font-weight: 600;
}

.maqueta-asignado .icono {
  width: 16px;
  height: 16px;
}

.maqueta-aviso {
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-3);
  background: var(--grafito);
  color: var(--grafito-texto);
  box-shadow: var(--sombra-maqueta);
  font-weight: 600;
}

.maqueta-aviso .icono {
  width: 18px;
  height: 18px;
  color: var(--acento-sobre-grafito);
}

.maqueta-aviso small {
  display: block;
  color: var(--grafito-suave);
  font-weight: 400;
}

/* El teléfono: marco de grafito, barra de estado y pantalla de la app. */
.maqueta-telefono {
  position: relative;
  width: min(100%, 264px);
  padding: 6px 7px 10px;
  border: 1px solid var(--grafito-3);
  border-radius: var(--r-4);
  background: var(--grafito);
  box-shadow: var(--sombra-maqueta);
}

.telefono-estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 12px 6px;
  color: var(--grafito-texto);
  font-family: var(--fuente-titulos);
  font-size: var(--t-2xs);
  font-weight: 650;
  line-height: 1.2;
}

.telefono-bateria {
  width: 18px;
  height: 9px;
  border: 1.5px solid var(--grafito-suave);
  border-radius: var(--r-pastilla);
}

.telefono-pantalla {
  overflow: hidden;
  border-radius: var(--r-3);
  background: var(--superficie);
  color: var(--texto);
}

.telefono-barra {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--grafito-2);
  color: var(--grafito-texto);
}

.telefono-cuerpo {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.telefono-titulo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: var(--t-sm);
  font-weight: 750;
}

/* La foto del papel, con la línea de lectura que la recorre. */
.maqueta-foto {
  position: relative;
  overflow: hidden;
  height: 96px;
  padding: 10px 22px 0;
  border-radius: var(--r-2);
  background: var(--grafito-2);
}

.maqueta-hoja {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 118px;
  padding: 10px 12px;
  border-radius: var(--r-1);
  background: var(--papel);
  transform: rotate(-2.5deg);
}

.maqueta-hoja span {
  height: 3px;
  border-radius: var(--r-pastilla);
  background: var(--papel-linea);
}

.maqueta-hoja span:first-child {
  width: 50%;
  height: 5px;
}

.maqueta-hoja span:nth-child(3n) {
  width: 72%;
}

.maqueta-hoja span:nth-child(4n) {
  width: 86%;
}

.maqueta-lectura {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 55%,
    var(--lectura-brillo) calc(100% - 2px),
    var(--acento-sobre-grafito) calc(100% - 2px)
  );
  transform: translateY(-35%);
}

@media (prefers-reduced-motion: no-preference) {
  .maqueta-lectura {
    animation: leer-papel 2.4s ease-in-out infinite;
  }
}

@keyframes leer-papel {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  15%,
  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

.maqueta-reconocido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.maqueta-campos {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.maqueta-campos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 8px;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: var(--superficie);
}

.maqueta-campos li > span:first-child {
  color: var(--texto-tenue);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.maqueta-campos b {
  font-weight: 650;
}

.maqueta-campos .placa {
  height: 22px;
  font-size: var(--t-2xs);
}

/* Un dato para comprobar con el papel: borde de atención y su nota, nunca solo el color. */
.maqueta-campos .maqueta-dudoso {
  border-color: var(--atencion);
  background: var(--atencion-fondo);
}

.maqueta-dudoso small {
  flex-basis: 100%;
  color: var(--atencion);
  font-size: var(--t-2xs);
  font-weight: 600;
}

.maqueta-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: var(--r-2);
  background: var(--acento);
  color: var(--acento-texto);
  font-family: var(--fuente-titulos);
  font-weight: 650;
}

/* --- Las tres grandes: un «antes» y un «después» unidos por una flecha. --- */
.maqueta-mini {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: var(--e-2);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: var(--e-3);
  border-radius: var(--r-2);
  background-color: var(--superficie-2);
  background-image: radial-gradient(var(--borde) 1px, transparent 1px);
  background-size: 16px 16px;
  font-size: var(--t-2xs);
  line-height: 1.3;
}

.mini-hoja {
  display: grid;
  align-content: start;
  gap: 6px;
  aspect-ratio: 3 / 4;
  padding: 10px 9px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--r-1);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

.mini-hoja span {
  height: 3px;
  border-radius: var(--r-pastilla);
  background: var(--borde);
}

.mini-hoja span:first-child {
  width: 55%;
  height: 5px;
  background: var(--texto-tenue);
}

.mini-hoja span:nth-child(3n) {
  width: 70%;
}

.mini-hoja span:nth-child(4n) {
  width: 85%;
}

.mini-dictado {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.mini-dictado .onda {
  height: 30px;
}

.mini-flecha {
  width: 20px;
  height: 20px;
  color: var(--acento);
}

.mini-ficha {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--r-1);
  background: var(--superficie);
  box-shadow: var(--sombra-2);
}

.mini-rotulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 0;
  color: var(--texto-tenue);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-stretch: 87.5%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mini-lineas,
.mini-cifras,
.mini-campos {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-lineas li {
  overflow: hidden;
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--borde);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-nota {
  margin: 0;
  color: var(--verde-texto);
  font-weight: 600;
}

.mini-columnas,
.mini-cifras li {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mini-columnas {
  margin: 0;
  color: var(--texto-suave);
  font-weight: 600;
}

.mini-cifras li {
  padding: 3px 0;
  border-bottom: 1px dashed var(--borde);
}

.mini-cifras span,
.mini-campos span {
  height: 5px;
  border-radius: var(--r-pastilla);
  background: var(--borde);
}

.mini-cifras span:last-child {
  background: var(--texto-tenue);
}

.mini-campos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px dashed var(--borde);
}

.mini-campos b {
  color: var(--texto-tenue);
  font-weight: 600;
}

/* --- El chat de muestra (#clarito), con los colores del panel de Clarito. --- */
.maqueta-chat {
  display: flex;
  flex-direction: column;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  border: 1px solid var(--grafito-3);
  border-radius: var(--r-4);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-maqueta);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.chat-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borde-suave);
}

.chat-icono {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento);
}

.chat-icono .icono {
  width: 22px;
  height: 22px;
}

.chat-nombre {
  display: grid;
  font-family: var(--fuente-titulos);
  font-weight: 750;
}

.chat-nombre small {
  color: var(--texto-tenue);
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  font-weight: 400;
}

.chat-mensajes {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
}

.burbuja {
  max-width: 88%;
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-3);
}

.burbuja-persona {
  align-self: flex-end;
  background: var(--acento-suave);
}

.burbuja-clarito {
  align-self: flex-start;
  border: 1px solid var(--borde-suave);
  background: var(--superficie-2);
}

.burbuja-quien {
  display: block;
  margin-bottom: 2px;
  color: var(--texto-tenue);
  font-family: var(--fuente-titulos);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Las burbujas aparecen una vez, una detrás de otra. */
@media (prefers-reduced-motion: no-preference) {
  .burbuja {
    animation: burbuja-entra 0.45s var(--curva) both;
  }

  .burbuja:nth-child(2) {
    animation-delay: 0.6s;
  }

  .burbuja:nth-child(3) {
    animation-delay: 1.2s;
  }
}

@keyframes burbuja-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.chat-entrada {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--borde-suave);
}

.chat-campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--r-2);
  color: var(--texto-tenue);
}

.chat-enviar {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: var(--r-2);
  background: var(--acento);
  color: var(--acento-texto);
  font-family: var(--fuente-titulos);
  font-weight: 650;
}

/* --- Dispositivos (#apps): ordenador detrás y dos teléfonos sin marca delante. --- */
.maqueta-dispositivos {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: 960px;
  margin: var(--e-7) auto 0;
  font-size: var(--t-2xs);
  line-height: 1.35;
}

.disp-navegador,
.disp-telefono-panel {
  display: none;
}

/* Desde 760 px, el ordenador y los dos teléfonos delante, a la derecha. Con el contenedor delante
   para ganar a .disp-telefono, que va después. */
@media (min-width: 760px) {
  .maqueta-dispositivos {
    display: block;
    padding: 0 240px 56px 0;
  }

  .maqueta-dispositivos .disp-navegador {
    display: block;
  }

  .maqueta-dispositivos .disp-telefono-parte {
    position: absolute;
    z-index: 1;
    right: 150px;
    bottom: 0;
  }

  .maqueta-dispositivos .disp-telefono-panel {
    display: block;
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 30px;
  }
}

.disp-navegador {
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
}

.disp-navegador-barra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--borde-suave);
  background: var(--superficie-2);
}

.disp-puntos {
  display: flex;
  gap: 5px;
}

.disp-puntos span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--borde-campo);
}

.disp-direccion {
  flex: 0 1 260px;
  overflow: hidden;
  padding: 3px 10px;
  border-radius: var(--r-pastilla);
  background: var(--superficie);
  color: var(--texto-tenue);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disp-navegador-cuerpo {
  min-height: 236px;
  padding: 14px 112px 14px 16px;
  background: var(--fondo);
}

.disp-titulo {
  margin: 0 0 8px;
  color: var(--texto);
  font-family: var(--fuente-titulos);
  font-size: var(--t-sm);
  font-weight: 750;
}

.disp-ordenes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.disp-ordenes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

.disp-modelo {
  flex: 1 1 5rem;
  min-width: 0;
  color: var(--texto-suave);
  font-size: var(--t-xs);
}

.disp-ordenes .etiqueta-estado {
  min-height: 22px;
  font-size: var(--t-2xs);
}

.disp-importe {
  font-family: var(--fuente-titulos);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.disp-telefono {
  position: relative;
  width: min(100%, 220px);
  padding: 6px 6px 10px;
  border: 1px solid var(--grafito-3);
  border-radius: var(--r-4);
  background: var(--grafito);
  box-shadow: var(--sombra-3);
}

@media (min-width: 760px) {
  .disp-telefono {
    width: 176px;
  }

  .disp-telefono-panel {
    width: 168px;
  }
}

/* El segundo teléfono, de marco más fino y con la cámara redonda en el centro. */
.disp-telefono-panel {
  padding: 4px;
  border-radius: calc(var(--r-4) + 6px);
}

.disp-camara {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 50%;
  width: 11px;
  height: 11px;
  border: 2px solid var(--grafito-2);
  border-radius: 50%;
  background: var(--grafito);
  transform: translateX(-50%);
}

.disp-pantalla {
  min-height: 262px;
  padding: 12px 10px;
  border-radius: var(--r-3);
  background: var(--superficie);
  color: var(--texto);
}

.disp-telefono-panel .disp-pantalla {
  min-height: 280px;
  padding-top: 30px;
  border-radius: calc(var(--r-4) + 2px);
}

.disp-contadores {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.disp-contadores li {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: var(--superficie-2);
  color: var(--texto-suave);
}

.disp-contadores b {
  color: var(--texto);
  font-family: var(--fuente-titulos);
  font-size: var(--t-xl);
  font-weight: 750;
  line-height: 1;
}

/* ===========================================================================
   4. Botón flotante de Clarito (lo enseña app.js sin sesión y con Clarito encendido)
   =========================================================================== */

.portada-clarito-lanzador {
  position: fixed;
  z-index: 45;
  inset-block-end: max(var(--e-4), env(safe-area-inset-bottom));
  inset-inline-end: max(var(--e-4), env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-width: var(--alto-lanzador);
  height: var(--alto-lanzador);
  margin: 0;
  padding: 0 var(--e-5) 0 var(--e-4);
  border: 0;
  border-radius: var(--r-pastilla);
  background: var(--acento);
  color: var(--acento-texto);
  box-shadow: var(--sombra-3);
  font-family: var(--fuente-titulos);
  font-size: var(--t-base);
  font-weight: 650;
  cursor: pointer;
  transition: background-color var(--rapida) var(--curva);
}

.portada-clarito-lanzador:hover {
  background: var(--acento-hover);
}

.portada-clarito-lanzador:active {
  background: var(--acento-activo);
}

.portada-clarito-lanzador:focus-visible {
  outline-offset: 3px;
}

.portada-clarito-lanzador .icono {
  width: 26px;
  height: 26px;
  vertical-align: 0;
}

/* Mientras carga el chat, ocupado() pone «Un momento…»: el mismo giro que los botones. */
.portada-clarito-lanzador[aria-busy="true"] {
  cursor: progress;
}

.portada-clarito-lanzador[aria-busy="true"]::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

/* Por debajo de 480 px, solo el icono: 56 × 56, y el texto para los lectores de pantalla. */
@media (max-width: 479px) {
  .portada-clarito-lanzador {
    width: var(--alto-lanzador);
    padding: 0;
  }

  .portada-clarito-lanzador > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  .portada-clarito-lanzador[aria-busy="true"] {
    gap: 0;
    font-size: 0;
  }
}

@media (forced-colors: active) {
  .portada-clarito-lanzador {
    border: 2px solid ButtonText;
  }
}

/* ===========================================================================
   5. Llamada final y pie
   =========================================================================== */

.cta-final {
  padding-block: var(--e-8);
  background-color: var(--grafito);
  background-image:
    radial-gradient(50% 80% at 50% 120%, var(--acento-resplandor), transparent 70%),
    linear-gradient(var(--grafito-rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--grafito-rejilla) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  color: var(--grafito-texto);
  text-align: center;
}

.cta-final h2 {
  max-width: 20ch;
  margin: 0 auto var(--e-4);
  color: var(--grafito-texto);
  font-size: var(--t-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.cta-final p {
  max-width: 36rem;
  margin: 0 auto var(--e-5);
  color: var(--grafito-lectura);
  font-size: var(--t-md);
}

.cta-final .acciones {
  justify-content: center;
}

.cta-final .ayuda {
  margin: var(--e-3) auto 0;
  font-size: var(--t-sm);
}

.pie {
  padding: var(--e-6) 0 calc(var(--e-6) + env(safe-area-inset-bottom));
  background: var(--fondo-2);
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

@media (max-width: 959px) {
  /* En la portada, sitio para el botón de Clarito: que no tape los enlaces del pie (88 px). */
  .pagina-portada .pie {
    padding-bottom: calc(var(--alto-lanzador) + var(--e-6) + env(safe-area-inset-bottom));
  }

  body.con-barra .pie {
    padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + var(--e-6));
  }
}

.pie-rejilla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.pie-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

.pie-marca img {
  width: 28px;
  height: 28px;
}

.pie-marca .marca-claro {
  color: var(--acento-tinta);
}

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 var(--e-2);
  color: var(--texto-suave);
  font-weight: 600;
  text-decoration: none;
}

.pie-enlaces a:hover {
  color: var(--texto);
  text-decoration: underline;
}

.pie-legal {
  flex-basis: 100%;
  margin: 0;
  color: var(--texto-tenue);
  font-size: var(--t-xs);
}

/* ===========================================================================
   6. Páginas legales
   =========================================================================== */

.legal {
  max-width: 46rem;
  margin: 0 auto;
}

.legal-cabecera {
  margin: var(--e-4) 0 var(--e-6);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid var(--borde);
}

.legal-cabecera h1 {
  font-size: var(--t-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.legal-cabecera p {
  margin: 0;
  color: var(--texto-suave);
}

.legal-indice {
  margin: 0 0 var(--e-6);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  background: var(--superficie);
}

.legal-indice h2 {
  margin: 0 0 var(--e-2);
  font-size: var(--t-sm);
}

.legal-indice ol {
  margin: 0;
  padding-left: 1.25rem;
  columns: 2 14rem;
  column-gap: var(--e-6);
  font-size: var(--t-sm);
}

.legal-indice li {
  padding: 2px 0;
  break-inside: avoid;
}

.legal-cuerpo {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.legal-cuerpo h2 {
  margin: var(--e-6) 0 var(--e-3);
  padding-top: var(--e-2);
  font-size: var(--t-lg);
}

.legal-cuerpo h2:first-child {
  margin-top: 0;
}

.legal-cuerpo ul {
  padding-left: 1.25rem;
}

.legal-cuerpo li {
  margin-bottom: var(--e-2);
}

.legal-nota {
  margin: var(--e-6) 0 0;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-2);
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

/* ===========================================================================
   7. Píldora de las apps (App Store y descarga de Android); la enseña js/app-promo.js al bajar pantalla y media
   =========================================================================== */

/* Qué se ve lo decide esta hoja; el script solo pone atributos data-. Con visibility, fuera de la
   vista ni se tabula ni se lee. Por debajo de 1150 px sube sobre el botón flotante de Clarito (con 640 px de ancho, a 1100 px lo pisaba). */
.app-promo {
  position: fixed;
  z-index: 44;
  inset-inline: 0;
  inset-block-end: calc(max(var(--e-4), env(safe-area-inset-bottom)) + var(--alto-lanzador) + var(--e-3));
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  width: min(640px, calc(100% - var(--e-3) * 2));
  margin-inline: auto;
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(100% + var(--e-5)));
}

.app-promo[data-visible] {
  visibility: visible;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .app-promo {
    transition:
      transform var(--media) var(--curva),
      opacity var(--media) var(--curva),
      visibility 0s linear var(--media);
  }

  .app-promo[data-visible] {
    transition-delay: 0s;
  }
}

@media (min-width: 1150px) {
  .app-promo {
    inset-block-end: max(var(--e-4), env(safe-area-inset-bottom));
  }
}

.app-promo-qr {
  padding: 6px;
  border-radius: var(--r-2);
  background: var(--qr-fondo);
  forced-color-adjust: none;
}

.app-promo-qr img {
  display: block;
}

.app-promo-codigos {
  display: flex;
  gap: var(--e-2);
}

.app-promo-pie {
  margin: var(--e-1) 0 0;
  color: var(--texto-tenue);
  font-size: var(--t-xs);
  text-align: center;
}


.app-promo-cuerpo {
  flex: 1;
  min-width: 0;
}

.app-promo-titulo {
  margin: 0 0 var(--e-1);
  padding-inline-end: var(--e-5);
  font-family: var(--fuente-titulos);
  font-size: var(--t-sm);
  font-weight: 650;
  line-height: 1.3;
}

.app-promo-texto {
  margin: 0 0 var(--e-3);
  color: var(--texto-suave);
  font-size: var(--t-xs);
  line-height: 1.45;
}

.app-promo-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-3);
}

.app-promo-cerrar {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  padding: 0;
  border: 0;
  border-radius: var(--r-3);
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
}

.app-promo-cerrar:hover {
  color: var(--texto);
}

/* Tres versiones del texto y se ve una: la de la plataforma que detecta js/app-promo.js; sin atributo,
   la general. Sin QR en el móvil; sin botón de la tienda donde Safari ya pinta el banner de Apple. */
.app-promo:not([data-plataforma]) [data-para]:not([data-para="general"]),
.app-promo[data-plataforma="ios"] [data-para]:not([data-para="ios"]),
.app-promo[data-plataforma="android"] [data-para]:not([data-para="android"]),
.app-promo[data-plataforma="android"] .app-promo-tienda,
.app-promo[data-plataforma="ios"] .app-promo-android,
.app-promo[data-sin-qr="true"] .app-promo-escaner,
.app-promo[data-banner-nativo="true"] .app-promo-tienda {
  display: none;
}

/* Con sesión sobra «Solicitar acceso» (web/app.js ya enseña «Ir al panel»). Va aparte por si falta :has(). */
body:has(#acciones-con-sesion:not([hidden])) .app-promo-acceso {
  display: none;
}