/* ══════════════════════════════════════════════════════════════════════════
   Allnisa — sistema de diseño
   Claro, editorial, técnico. Un solo acento. Sin gradientes ni vidrios.
   ══════════════════════════════════════════════════════════════════════════ */

/* Dos temas, y el visitante elige. Arranca en claro —es el look con el que la
   página se compromete— y el botón de la cabecera lo cambia. La elección queda
   guardada en el navegador.

   No sigue el modo oscuro del sistema operativo a propósito: la primera
   impresión tiene que ser la que diseñamos. Si algún día se quiere que lo siga,
   está explicado abajo del bloque oscuro. */

:root {
  color-scheme: light;

  --papel: #FBFAF8;
  --papel-hondo: #F3F1EC;
  --papel-fuerte: #EAE6DE;
  --tinta: #171612;
  --tinta-media: #45423C;
  --tinta-suave: #6B6862;
  --linea: #E3DFD7;
  --linea-fuerte: #CFC9BE;
  /* El acento sale del logo, no de una paleta genérica. #0062A6 es uno de los
     siete azules del SVG de la marca. Contrasta 6.4:1 contra blanco, así que
     sirve de fondo de botón sin pelearse con la accesibilidad. */
  --acento: #0062A6;
  --acento-hondo: #003463;
  --acento-tenue: #EAF2F9;
  --sobre-acento: #FFFFFF;
  --ok: #2F6B4F;
  --ok-tenue: #EAF3EE;

  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --texto: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;

  --radio: 10px;
  /* Ancho máximo del contenido. Es la perilla del aire de los costados: más
     chico = más margen, más grande = la página se estira. Los párrafos igual
     no crecen, porque están limitados en caracteres y no en píxeles. */
  --ancho: 1200px;
  --borde: 1px solid var(--linea);
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  /* Negro y blanco, pero ninguno de los dos puro: #000 con #fff encima vibra y
     cansa la vista. Un paso adentro de cada extremo y el contraste sigue muy
     por encima del mínimo sin lastimar. El tinte es apenas frío para que
     acompañe al azul de la marca. */
  --papel: #101113;
  --papel-hondo: #17181B;
  --papel-fuerte: #1F2124;
  --tinta: #F4F5F6;
  --tinta-media: #C3C6CA;
  --tinta-suave: #979BA1;
  --linea: #292B2F;
  --linea-fuerte: #3C3F44;
  /* En oscuro el azul del logo se levanta para seguir legible, y el texto que
     va encima del botón deja de ser blanco: sobre un azul claro no se lee. */
  --acento: #59B0E0;
  --acento-hondo: #7CC6E5;
  --acento-tenue: #12222E;
  --sobre-acento: #08243A;
  --ok: #6FBF95;
  --ok-tenue: #14251C;
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--acento);
  color: var(--papel);
}

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

a {
  color: inherit;
}

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

/* ── Estructura ─────────────────────────────────────────────────────────── */

.marco {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 84px 0;
  border-top: var(--borde);
}

section:first-of-type {
  border-top: 0;
}

@media (max-width: 720px) {
  section {
    padding: 56px 0;
  }
}

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

h1,
h2,
h3 {
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(32px, 5.2vw, 54px);
}

h2 {
  font-size: clamp(25px, 3.4vw, 35px);
}

h3 {
  font-size: 17px;
  line-height: 1.3;
}

p {
  margin: 0;
}

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

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

.plomo {
  color: var(--tinta-media);
  font-size: 18px;
  max-width: 60ch;
}

.chico {
  font-size: 14.5px;
  color: var(--tinta-suave);
}

.encabezado-seccion {
  max-width: 62ch;
  margin-bottom: 44px;
}

.encabezado-seccion h2 {
  margin: 12px 0 14px;
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--acento);
  background: var(--acento);
  color: var(--sobre-acento);
  padding: 12px 22px;
  border-radius: var(--radio);
  cursor: pointer;
  text-decoration: none;
  transition: opacity .12s ease, border-color .12s ease, background .12s ease;
}

.boton:hover:not(:disabled) {
  opacity: .88;
}

.boton:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.boton--fantasma {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea-fuerte);
}

.boton--fantasma:hover:not(:disabled) {
  border-color: var(--acento);
  color: var(--acento);
  opacity: 1;
}

.boton--chico {
  padding: 7px 14px;
  font-size: 13.5px;
}

/* ── Botón del tema ─────────────────────────────────────────────────────── */

/* Un círculo mitad lleno en vez del sol y la luna de siempre: dice lo mismo,
   ocupa menos y no parece sacado de una plantilla. */
.tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  background: transparent;
  color: var(--tinta-media);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}

.tema:hover {
  color: var(--acento);
  border-color: var(--acento);
  background: var(--acento-tenue);
}

.tema .glifo {
  width: 17px;
  height: 17px;
}

/* El círculo gira medio vuelta al cambiar de tema: el lleno pasa al otro lado,
   que es literalmente lo que acaba de pasar en la página. */
.tema .glifo {
  transition: transform .3s ease;
}

:root[data-tema="oscuro"] .tema .glifo {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .tema .glifo {
    transition: none;
  }
}

/* La cabecera tiene tres cosas a la derecha, agrupadas para que el
   space-between siga separando marca | navegación | acciones. */
.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

/* En celular el botón de agendar de la cabecera no entra al lado de la marca y
   del de WhatsApp: se va, y quedan el del hero y el del formulario, que en esa
   pantalla están a un scroll de distancia. */
@media (max-width: 560px) {
  .agenda--cabecera {
    display: none;
  }
}

/* ── Glifos ─────────────────────────────────────────────────────────────── */

/* El sprite guarda los <symbol>. No se oculta con display:none porque eso
   rompe las referencias <use> en algunos navegadores. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.glifo {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  fill: currentColor;
}

/* Los botones de WhatsApp usan el azul de la marca, no el verde de una marca
   ajena. Si alguna vez se quiere el verde clásico, es descomentar esto y no
   tocar nada más.

.boton--wsp {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}

.flotante {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}
*/

/* ── Botón flotante de WhatsApp ─────────────────────────────────────────── */

.flotante {
  position: fixed;
  z-index: 60;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));

  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 12px 18px 12px 15px;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);

  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;

  box-shadow: 0 5px 18px rgb(0 0 0 / .16);

  opacity: 0;
  visibility: hidden;
  transform: translateY(9px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s,
    background .12s ease, border-color .12s ease;
}

.flotante--visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.flotante:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
}

.flotante .glifo {
  width: 19px;
  height: 19px;
}

@media (prefers-reduced-motion: reduce) {
  .flotante {
    transition: opacity .01s, visibility .01s;
    transform: none;
  }
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel);
  border-bottom: var(--borde);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 64px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
}

/* El SVG original de Illustrator tiene el lienzo en 800x600 con la marca de
   438x454 en el medio: más de la mitad era aire. assets/logo.svg es el mismo
   archivo con el viewBox recortado a la marca, así el alto que se pide acá es
   el alto que se ve. */
.marca__logo {
  height: 30px;
  width: auto;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .marca__logo {
    height: 26px;
  }
}

.navegacion {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navegacion a {
  text-decoration: none;
  font-size: 14.5px;
  color: var(--tinta-media);
  padding: 7px 11px;
  border-radius: 7px;
}

.navegacion a:hover {
  color: var(--acento);
  background: var(--acento-tenue);
}

@media (max-width: 1020px) {
  .navegacion {
    display: none;
  }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  padding: 76px 0 68px;
}

.hero h1 {
  margin: 14px 0 20px;
  max-width: 17ch;
}

.hero .plomo {
  font-size: 19px;
}

/* En pantalla ancha el hero es de dos columnas: el texto a la izquierda y el
   video a la derecha. Se arma con áreas nombradas porque en el HTML el video
   está en el medio —entre el título y el párrafo, que es donde tiene que quedar
   en celular— y desde acá se lo manda a la otra columna sin tocar el orden del
   documento.

   Las dos filas de 1fr, arriba y abajo del texto, son las que hacen que esto no
   se desarme: sin ellas, cuando el video queda más alto que el texto, el sobrante
   se reparte entre los renglones del texto y le abre huecos entre el título, el
   párrafo y los botones. Con las dos filas flexibles el sobrante se va ahí, y de
   paso el bloque de texto queda centrado contra el video. */
@media (min-width: 901px) {
  .hero__reja {
    display: grid;
    /* El mínimo de 400px de la izquierda no es decorativo: es lo que miden los
       dos botones uno al lado del otro. Con la proporción sola, entre 900 y
       1000px la columna quedaba en 380px y el segundo botón se caía al renglón
       de abajo. */
    grid-template-columns: minmax(400px, 0.95fr) minmax(0, 1.05fr);
    column-gap: 52px;
    grid-template-rows: 1fr auto auto auto auto 1fr auto;
    grid-template-areas:
      ".        video"
      "rotulo   video"
      "titulo   video"
      "plomo    video"
      "acciones video"
      ".        video"
      "pie      pie";
  }

  .hero__reja > .mono {
    grid-area: rotulo;
  }

  .hero__reja > h1 {
    grid-area: titulo;
  }

  .hero__reja > .plomo {
    grid-area: plomo;
  }

  .hero__reja > .hero__acciones {
    grid-area: acciones;
  }

  /* Sin el center quedaría estirado a lo alto de las seis filas y perdería el
     16:9. */
  .hero__reja > .video {
    grid-area: video;
    align-self: center;
    margin: 0;
  }

  .hero__reja > .hero__pie {
    grid-area: pie;
  }
}

/* ── Video de presentación ──────────────────────────────────────────────── */

.video {
  margin: 26px 0 30px;
}

/* Cuando el hero es de una sola columna el video se lleva todo el ancho, y
   entre 560 y 900px eso lo deja tan alto que empuja el párrafo y los botones
   abajo del pliegue. El techo lo deja a la altura del título, que tampoco usa
   todo el ancho. Más abajo de 560px no hace falta: ahí el ancho ya es el techo. */
@media (min-width: 561px) and (max-width: 900px) {
  .video {
    max-width: 560px;
  }
}

.video__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  /* El póster tarda un instante en pintarse. Mejor que ese instante sea el
     papel de la página y no un rectángulo negro. */
  background: var(--papel-hondo);
}

.video__pieza {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El botón tapa el cuadro entero: se toca el video, no un blanco de 66px. */
.video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: rgb(0 0 0 / .12);
  cursor: pointer;
  transition: background .14s ease;
}

/* Este renglón no es de más: el `display:flex` de arriba le gana al
   `[hidden] { display:none }` del navegador —los dos pesan lo mismo y el de la
   página va después—, así que sin esto el atributo `hidden` no oculta nada. El
   botón se quedaría encima del video mientras se reproduce, tapándole los
   controles. */
.video__play[hidden] {
  display: none;
}

.video__play:hover {
  background: rgb(0 0 0 / .2);
}

/* El foco va para adentro: con el offset de 3px que usa el resto de la página,
   el overflow:hidden del marco se lo comería. */
.video__play:focus-visible {
  outline-offset: -5px;
}

/* Mismo disco que el botón flotante de WhatsApp —tinta de fondo, papel
   adelante— y el mismo salto al acento cuando se lo apunta. */
.video__disco {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  box-shadow: 0 6px 20px rgb(0 0 0 / .25);
  transition: background .14s ease, color .14s ease, transform .14s ease;
}

.video__play:hover .video__disco {
  background: var(--acento);
  color: var(--sobre-acento);
  transform: scale(1.07);
}

.video__disco .glifo {
  width: 23px;
  height: 23px;
}

.video__pie {
  margin-top: 11px;
}

@media (prefers-reduced-motion: reduce) {

  .video__play,
  .video__disco {
    transition: none;
  }

  .video__play:hover .video__disco {
    transform: none;
  }
}

.hero__acciones {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hero__pie {
  margin-top: 34px;
  padding-top: 22px;
  border-top: var(--borde);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.hero__pie div {
  max-width: 24ch;
}

.hero__pie b {
  display: block;
  font-size: 14px;
  margin-bottom: 1px;
}

.hero__pie span {
  font-size: 13.5px;
  color: var(--tinta-suave);
}

/* ── Rejillas ───────────────────────────────────────────────────────────── */

.rejilla-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.rejilla-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 860px) {
  .rejilla-3 {
    grid-template-columns: 1fr;
  }

  .rejilla-2 {
    grid-template-columns: 1fr;
  }
}

.tarjeta {
  border: var(--borde);
  border-radius: var(--radio);
  padding: 22px;
  background: var(--papel);
}

.tarjeta h3 {
  margin: 10px 0 8px;
}

.tarjeta p {
  font-size: 14.5px;
  color: var(--tinta-suave);
}

.tarjeta__indice {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 3px;
  padding: 1px 6px;
  line-height: 1.5;
}

/* ── Método (pasos) ─────────────────────────────────────────────────────── */

.pasos {
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: paso;
}

.paso-metodo {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: var(--borde);
  align-items: start;
}

.paso-metodo:last-child {
  border-bottom: var(--borde);
}

.paso-metodo h3 {
  margin-bottom: 5px;
}

.paso-metodo p {
  font-size: 14.5px;
  color: var(--tinta-suave);
  max-width: 62ch;
}

@media (max-width: 640px) {
  .paso-metodo {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ── Listas de sí / no ──────────────────────────────────────────────────── */

.lista-marcada {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.lista-marcada li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--tinta-media);
}

.lista-marcada li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-weight: 700;
}

.lista-marcada--si li::before {
  content: "+";
  color: var(--ok);
}

.lista-marcada--no li::before {
  content: "\2212";
  color: var(--acento);
}

.lista-marcada b {
  color: var(--tinta);
}

/* ── Servicios y productos propios ──────────────────────────────────────── */

.tambien__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.prueba {
  border: var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  background: var(--papel-hondo);
}

/* El software a medida es el servicio central de la sección. El segundo borde
   le da jerarquía sin cambiar la estructura ni depender solo del color. */
.prueba--destacada {
  border-color: var(--acento);
  background: var(--acento-tenue);
  box-shadow: inset 0 0 0 1px var(--acento);
}

.prueba__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.prueba h3 {
  font-size: 20px;
}

.prueba p {
  font-size: 15px;
  color: var(--tinta-media);
  max-width: 64ch;
}

.prueba__enlace {
  font-size: 14px;
  color: var(--acento);
  font-weight: 600;
  text-decoration: none;
}

.prueba__enlace:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .tambien__rejilla {
    grid-template-columns: 1fr;
  }
}

/* Cierre de «también hacemos»: no es un producto más, así que no lleva el
   recuadro de los productos. Es una línea con una puerta al final. */
.invitacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 24px;
  border-top: var(--borde);
}

.invitacion p {
  max-width: 62ch;
  font-size: 15px;
  color: var(--tinta-media);
}

.invitacion b {
  color: var(--tinta);
}

@media (max-width: 560px) {
  .invitacion .boton {
    width: 100%;
  }
}

.pendiente {
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 20px;
  color: var(--tinta-suave);
  font-size: 14.5px;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq details {
  border-bottom: var(--borde);
  padding: 4px 0;
}

.faq details:first-of-type {
  border-top: var(--borde);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 34px 17px 0;
  font-weight: 600;
  font-size: 16px;
  position: relative;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 15px;
  font-family: var(--mono);
  font-size: 19px;
  color: var(--acento);
  font-weight: 400;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  padding: 0 34px 18px 0;
  color: var(--tinta-suave);
  font-size: 15px;
  max-width: 68ch;
}

/* ── Contacto ───────────────────────────────────────────────────────────── */

.contacto {
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  padding: 34px;
  background: var(--acento-tenue);
}

.contacto h2 {
  margin-bottom: 12px;
}

.contacto__acciones {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ── Agenda ─────────────────────────────────────────────────────────────── */

/* Vive dentro de la sección de contacto, debajo del formulario: es la otra
   puerta, la de quien prefiere elegir un horario antes que escribir. El marco
   es más callado que el del formulario a propósito — ese sigue siendo el
   primero que se ve, y dos cajas gritando lo mismo no ayudan a elegir. */
.agenda {
  margin-top: 26px;
  padding: 34px;
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--papel-hondo);
}

/* El titulo abre la caja: sin el rotulo chico arriba no hay nada de que
   despegarlo. */
.agenda h2 {
  margin: 0 0 12px;
}

/* Acá adentro vive el iframe de cal.com. El alto reservado se pone recién
   cuando el script lo monta —de ahí el atributo— y no antes: sin JavaScript el
   div queda vacío, y reservarle media pantalla sería un hueco por nada. */
.agenda__cal {
  margin-top: 26px;
}

.agenda__cal[data-montado] {
  min-height: 560px;
}

/* El iframe trae su propio ancho y no siempre se achica solo. */
.agenda__cal :is(iframe, cal-inline) {
  max-width: 100%;
}

.agenda__respaldo {
  margin-top: 26px;
}

@media (max-width: 720px) {
  .agenda {
    padding: 24px 20px;
  }
}

/* ── Formularios ────────────────────────────────────────────────────────── */

label {
  display: block;
}

label .mono {
  display: block;
  margin-bottom: 6px;
}

/* La pregunta principal del formulario no va en mayúsculas monoespaciadas como
   el resto de los rótulos: en versalitas suena a trámite, y acá tiene que sonar
   a alguien preguntando. */
.campo__pregunta {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

input,
textarea,
select {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
}

textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}

input::placeholder,
textarea::placeholder {
  color: var(--tinta-suave);
  opacity: .75;
}

/* ── Pie ────────────────────────────────────────────────────────────────── */

.pie {
  border-top: var(--borde);
  padding: 40px 0 44px;
}

.pie__cierre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding-bottom: 30px;
}

.pie__frase {
  margin-top: 7px;
  max-width: 26ch;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.22;
  color: var(--tinta);
}

.pie__bajada {
  margin-top: 5px;
  font-size: 15px;
  color: var(--tinta-suave);
}

/* En celular la navegación de la cabecera no entra. Vive acá. */
.pie__mapa {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 20px 0;
  border-top: var(--borde);
  border-bottom: var(--borde);
}

.pie__mapa a {
  font-size: 14.5px;
  color: var(--tinta-media);
  text-decoration: none;
}

.pie__mapa a:hover {
  color: var(--acento);
}

.pie__fila {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 22px;
  font-size: 13.5px;
  color: var(--tinta-suave);
}

.pie__fila a {
  color: var(--tinta-suave);
  text-decoration: none;
  margin-left: 16px;
}

.pie__fila a:first-child {
  margin-left: 0;
}

.pie__fila a:hover {
  color: var(--acento);
}

.pie__cookies {
  margin-left: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  cursor: pointer;
}

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

/* ── Consentimiento de medición ─────────────────────────────────────────── */

.consentimiento {
  position: fixed;
  z-index: 90;
  left: max(14px, env(safe-area-inset-left, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: min(980px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 20px;
  border: var(--borde);
  border-color: var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: 0 18px 55px rgb(23 22 18 / .18);
}

.consentimiento[hidden] {
  display: none;
}

.consentimiento h2,
.consentimiento__dialogo h2 {
  margin: 5px 0 6px;
  font-size: 20px;
}

.consentimiento p {
  max-width: 68ch;
  margin: 0;
  color: var(--tinta-media);
  font-size: 14px;
}

.consentimiento p.mono {
  font-size: 12px;
}

.consentimiento__acciones {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.consentimiento__acciones .boton {
  padding: 9px 14px;
  font-size: 13.5px;
}

.consentimiento__enlace {
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--tinta-media);
  font: inherit;
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.consentimiento__dialogo {
  width: min(580px, calc(100vw - 28px));
  margin: auto;
  padding: 22px;
  border: var(--borde);
  border-color: var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta-media);
}

.consentimiento__dialogo::backdrop {
  background: rgb(23 22 18 / .62);
}

.consentimiento__barra {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.consentimiento__barra p,
.consentimiento__dialogo > p {
  margin: 0;
}

.consentimiento__dialogo > p {
  margin: 10px 0 18px;
  font-size: 14px;
}

.consentimiento__cerrar {
  width: 36px;
  height: 36px;
  border: var(--borde);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.consentimiento__opcion {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: var(--borde);
  cursor: pointer;
}

.consentimiento__opcion input {
  width: 19px;
  height: 19px;
  margin: 3px 0 0;
  accent-color: var(--acento);
}

.consentimiento__opcion strong,
.consentimiento__opcion small {
  display: block;
}

.consentimiento__opcion small {
  margin-top: 2px;
  color: var(--tinta-suave);
  font-size: 13px;
}

.consentimiento__guardar {
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
  border-top: var(--borde);
}

@media (max-width: 760px) {
  .consentimiento {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .consentimiento__acciones {
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .consentimiento__acciones,
  .consentimiento__acciones .boton,
  .consentimiento__guardar .boton {
    width: 100%;
  }

  .consentimiento__enlace {
    text-align: center;
  }
}

/* ── Documentos legales ─────────────────────────────────────────────────── */

/* Estos estilos viven acá y no en blog.css porque el mismo texto se lee en dos
   lados: en su página propia —/politica-de-privacidad/, la URL que hay que
   poder darle a Meta y a Google— y adentro de la ventana de la landing. Una
   sola hoja para los dos, así no se despegan nunca. */

.legal__cabecera {
  padding-top: 64px;
}

.legal__cabecera h1 {
  margin-top: 10px;
  max-width: 18ch;
  font-size: clamp(34px, 5vw, 50px);
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--tinta);
}

.legal__bajada {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.legal__fecha {
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--borde);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--tinta-suave);
}

.legal__reja {
  display: grid;
  grid-template-columns: 210px minmax(0, 720px);
  justify-content: center;
  align-items: start;
  gap: 48px;
  padding-top: 44px;
}

/* La columna se estira a lo alto de toda la fila aunque el índice sea corto: si
   quedara pegada a su propia altura, `sticky` no tendría por dónde viajar y el
   índice se iría de pantalla al primer scroll. */
.legal__indice-contenedor {
  align-self: stretch;
}

/* El índice de un documento legal es largo a propósito: es la forma de saltar a
   la cláusula que a alguien le importa sin leer las otras veintidós. Se queda
   fijo mientras se baja, y si no entra en el alto de la pantalla, scrollea. */
.legal__indice {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.legal__indice ol {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.legal__indice li + li {
  margin-top: 8px;
}

.legal__indice .nivel-3 {
  padding-left: 12px;
}

.legal__indice a {
  display: block;
  color: var(--tinta-suave);
  font-size: 12.5px;
  line-height: 1.35;
  text-decoration: none;
}

.legal__indice a:hover {
  color: var(--acento);
}

.legal__cuerpo {
  min-width: 0;
  color: var(--tinta-media);
  font-size: 17px;
  line-height: 1.72;
}

.legal__cuerpo > :first-child {
  margin-top: 0;
}

.legal__cuerpo p,
.legal__cuerpo ul,
.legal__cuerpo ol,
.legal__cuerpo blockquote,
.legal__cuerpo table {
  margin: 0 0 1.35em;
}

.legal__cuerpo h2,
.legal__cuerpo h3 {
  position: relative;
  scroll-margin-top: 92px;
  color: var(--tinta);
  letter-spacing: -0.02em;
}

.legal__cuerpo h2 {
  margin: 2.3em 0 .8em;
  padding-top: 1.1em;
  border-top: var(--borde);
  font-size: 25px;
  line-height: 1.2;
}

.legal__cuerpo > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal__cuerpo h3 {
  margin: 1.9em 0 .6em;
  font-size: 18.5px;
  line-height: 1.3;
}

/* El `#` de cada título aparece al pasar por encima. En un documento legal
   sirve más que en cualquier otro lado: es cómo se cita una cláusula suelta. */
.legal__ancla {
  position: absolute;
  right: 100%;
  padding-right: 9px;
  color: var(--linea-fuerte);
  font-family: var(--mono);
  font-size: .7em;
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
}

.legal__cuerpo h2:hover .legal__ancla,
.legal__cuerpo h3:hover .legal__ancla,
.legal__ancla:focus-visible {
  opacity: 1;
}

.legal__cuerpo strong {
  font-weight: 620;
  color: var(--tinta);
}

.legal__cuerpo a {
  color: var(--acento);
  text-underline-offset: 3px;
}

.legal__cuerpo code {
  padding: 2px 5px;
  border: var(--borde);
  border-radius: 5px;
  background: var(--papel-hondo);
  font-family: var(--mono);
  font-size: .87em;
  word-break: break-all;
}

.legal__cuerpo ul,
.legal__cuerpo ol {
  padding-left: 1.35em;
}

.legal__cuerpo li + li {
  margin-top: .5em;
}

/* Las dos citas de la política son texto que la Ley 25.326 obliga a reproducir
   palabra por palabra. Se marcan como lo que son: transcripciones, no opinión. */
.legal__cuerpo blockquote {
  padding: 16px 20px;
  border-left: 2px solid var(--acento);
  background: var(--papel-hondo);
  font-size: 15.5px;
  line-height: 1.62;
}

.legal__cuerpo blockquote p:last-child {
  margin-bottom: 0;
}

.legal__cuerpo table {
  width: 100%;
  border: var(--borde);
  border-collapse: collapse;
  font-size: 15px;
}

.legal__cuerpo th,
.legal__cuerpo td {
  padding: 10px 13px;
  border: var(--borde);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.legal__cuerpo th {
  background: var(--papel-hondo);
  font-weight: 620;
  color: var(--tinta);
}

.legal__pie {
  display: flex;
  align-items: baseline;
  gap: 10px 22px;
  flex-wrap: wrap;
  margin-top: 60px;
  padding-top: 26px;
  padding-bottom: 20px;
  border-top: var(--borde);
}

.legal__pie a {
  color: var(--acento);
  font-size: 15px;
  text-decoration: none;
}

.legal__pie a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Debajo de los 980px el índice fijo deja de tener dónde pararse. */
@media (max-width: 980px) {
  .legal__reja {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* Sin el tope, veintitrés cláusulas listadas empujan el documento entero
     media pantalla para abajo. Adentro de la caja el índice sigue entero, y al
     llegar al final la página sigue de largo: nada de scroll atrapado. */
  .legal__indice {
    position: static;
    max-height: 280px;
    margin-bottom: 40px;
    padding: 18px 20px;
    border: var(--borde);
    border-radius: var(--radio);
    background: var(--papel-hondo);
    overscroll-behavior: auto;
  }

  .legal__indice ol {
    columns: 2;
    column-gap: 26px;
  }
}

@media (max-width: 640px) {
  .legal__cabecera {
    padding-top: 40px;
  }

  .legal__indice ol {
    columns: 1;
  }

  .legal__cuerpo {
    font-size: 16.5px;
  }

  /* Tres columnas de tabla no entran en un celular. Antes que apretujarlas
     hasta una letra por renglón, la tabla se corre de costado. */
  .legal__cuerpo table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .legal__cuerpo td,
  .legal__cuerpo th {
    white-space: normal;
    min-width: 128px;
  }
}

/* ── Ventana de lectura ─────────────────────────────────────────────────── */

/* Los legales se leen sin salir de la landing. El <dialog> nativo se ocupa solo
   del foco, del Escape y de tapar el resto de la página: nada de eso hace falta
   escribirlo. El texto no viaja en el HTML de la landing —se lo trae de la
   página real recién cuando alguien hace clic— así que la portada no carga
   treinta kilobytes de cláusulas que casi nadie va a leer. */

.ventana {
  width: min(780px, calc(100vw - 28px));
  max-height: min(86vh, 940px);
  margin: auto;
  padding: 0;
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta-media);
  overflow: hidden;
}

.ventana[open] {
  display: flex;
  flex-direction: column;
}

.ventana::backdrop {
  background: rgb(23 22 18 / .6);
}

:root[data-tema="oscuro"] .ventana::backdrop {
  background: rgb(0 0 0 / .72);
}

.ventana__barra {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 20px 22px 16px;
  border-bottom: var(--borde);
  background: var(--papel);
}

.ventana__titulo {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--tinta);
}

.ventana__fecha {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--tinta-suave);
}

.ventana__cerrar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: var(--borde);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta-suave);
  cursor: pointer;
}

.ventana__cerrar:hover {
  border-color: var(--linea-fuerte);
  color: var(--tinta);
}

.ventana__cerrar svg {
  width: 15px;
  height: 15px;
}

/* Scrollea el cuerpo y no la ventana entera, así el título queda a la vista.
   El tabindex es para que se pueda bajar con el teclado sin tener que caer
   primero en un enlace de adentro. */
.ventana__cuerpo {
  flex: 1 1 auto;
  padding: 26px 22px 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ventana__cuerpo:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}

.ventana__cuerpo .legal__cuerpo {
  font-size: 16px;
  line-height: 1.68;
}

.ventana__cuerpo .legal__cuerpo h2 {
  scroll-margin-top: 12px;
  font-size: 21px;
}

.ventana__cuerpo .legal__cuerpo h3 {
  scroll-margin-top: 12px;
  font-size: 18px;
}

/* Adentro de la ventana no hay margen izquierdo donde colgar el `#`. */
.ventana__cuerpo .legal__ancla {
  display: none;
}

.ventana__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  padding: 14px 22px;
  border-top: var(--borde);
  background: var(--papel-hondo);
  font-size: 13.5px;
  color: var(--tinta-suave);
}

.ventana__pie a {
  color: var(--acento);
  text-decoration: none;
}

.ventana__pie a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ventana__cargando {
  padding: 40px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta-suave);
}

@media (prefers-reduced-motion: no-preference) {
  .ventana[open] {
    animation: ventana-entra .2s ease-out;
  }

  .ventana[open]::backdrop {
    animation: ventana-fondo .2s ease-out;
  }
}

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

@keyframes ventana-fondo {
  from {
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .ventana {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--radio) var(--radio) 0 0;
  }

  .ventana__barra,
  .ventana__cuerpo,
  .ventana__pie {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ── Celular ────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .marco {
    padding: 0 18px;
  }

  .cabecera__fila {
    height: 58px;
    gap: 12px;
  }

  .hero {
    padding: 46px 0 52px;
  }

  .hero .plomo {
    font-size: 17px;
  }

  .hero__pie {
    gap: 18px;
  }

  .hero__pie div {
    max-width: none;
  }

  .video {
    margin: 22px 0 26px;
  }

  .video__disco {
    width: 56px;
    height: 56px;
  }

  .video__disco .glifo {
    width: 20px;
    height: 20px;
  }

  .encabezado-seccion {
    margin-bottom: 30px;
  }

  .prueba,
  .contacto {
    padding: 22px 20px;
  }

  .faq summary {
    font-size: 15.5px;
  }

  .pie {
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }

  .pie__cierre .boton {
    width: 100%;
  }

  .pie__frase {
    font-size: 19px;
  }

  .flotante {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 11px 16px 11px 13px;
    font-size: 14px;
  }
}

/* Pantallas angostas de verdad: los botones del hero ocupan el ancho entero
   en vez de quedar dos pastillas huérfanas. */
@media (max-width: 420px) {
  .hero__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__acciones .boton {
    width: 100%;
  }
}

/* ── Utilidades ─────────────────────────────────────────────────────────── */

.oculto {
  display: none !important;
}

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