/*
 * La portada de fac-360.com, transcrita de `Fac-360 Landing v2.dc.html`.
 *
 * ============================================================================================
 * EL CAMBIO DE PALETA, Y POR QUE ESTE FICHERO YA NO DICE LO CONTRARIO
 * ============================================================================================
 *
 * La version anterior salia de `Fac-360 Landing.dc.html` y era crema y verde profundo, y este
 * comentario defendia esa eleccion asi: «no es la de la consola -- morado sobre gris -- y no
 * deberia serlo. Una portada y una herramienta de trabajo tienen dos trabajos distintos, y el
 * lienzo las separo a proposito».
 *
 * El v2 revierte eso: crema y MORADO, el mismo #6428f5 de la consola. No es un descuido del
 * lienzo, es la decision contraria tomada despues, y quien la tomo tenia delante las dos. Se
 * escribe aqui porque un comentario que sigue defendiendo la eleccion anterior es peor que no
 * tener comentario: convence al siguiente de que el fichero esta mal.
 *
 * ============================================================================================
 * SIN NINGUNA PETICION A OTRO ORIGEN. Esto no cambia y no lo cambia un rediseno.
 * ============================================================================================
 *
 * El v2 pide Schibsted Grotesk e IBM Plex Mono desde Google Fonts. Van por la pila del sistema,
 * igual que el v1 y igual que la consola. La razon estetica es menor -- una fuente que no carga
 * no rompe nada -- pero se suma la otra, que no lo es: esta pagina la abre gente que todavia no
 * nos conoce, y no hay por que contarle su visita a un tercero antes de que decida nada.
 *
 * IBM Plex Mono se conserva al frente de la pila monoespaciada: si el visitante la tiene
 * instalada la usa, y si no cae en la del sistema. Pedirla a un CDN por si acaso seria pagar el
 * origen externo por un detalle tipografico.
 *
 * ============================================================================================
 * LO QUE SE MIDE EN `clamp()` Y NO EN PIXELES
 * ============================================================================================
 *
 * El lienzo dibuja a un ancho fijo, asi que sus 84px de titular son 84px a cualquier tamano de
 * pantalla. Aqui los titulares van en `clamp()`: el limite superior es el valor del diseno, y el
 * inferior es donde la linea deja de partirse mal en un movil. El diseno no pierde nada -- a
 * partir de su propio ancho se ve exactamente como se dibujo -- y gana lo que un lienzo no puede
 * dibujar, que es la pantalla estrecha.
 */

:root {
  /* Los tres fondos. `--surface-2` es el gris calido de los botones secundarios al pasar. */
  --cream: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f1f0eb;

  /* Tinta. `--body` es el gris azulado de todos los parrafos; `--faint` solo para etiquetas mono. */
  --ink: #17161b;
  --body: #4a5666;
  --muted: #7b8492;
  --faint: #a6adb8;

  --purple: #6428f5;
  --purple-hi: #4b18cc;
  --purple-pale: #efe7fe;
  --purple-soft: #c9b6fd;

  /*
   * El panel oscuro. Dos tonos y no uno: `--night` es el fondo de la seccion y `--night-soft` el
   * de una pastilla dentro de ella. Un solo morado oscuro con opacidades encima daba un gris
   * sucio sobre el crema de al lado.
   *
   * El lienzo trae un tercero, #2E1D6E, para las tarjetas del cuadro de mando simulado. Aqui no
   * hay cuadro de mando simulado, asi que no hay tercer tono: un token que no usa nadie es una
   * invitacion a usarlo mal.
   */
  --night: #1b1147;
  --night-soft: #332a72;
  --on-night: #f4f4ef;
  --on-night-body: #b7b2cc;
  --on-night-accent: #b7a6fb;

  --line: #e7e7e1;
  --line-2: #edede8;
  --line-3: #f4f4ef;
  --line-btn: #deded7;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:
    "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --pad: 48px;
}

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

html {
  scroll-behavior: smooth;
}
/* Quien pide menos movimiento tampoco quiere que la pagina se deslice sola al pulsar un ancla. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--purple);
  text-decoration: none;
  transition: color 140ms ease;
}
a:hover {
  color: var(--purple-hi);
}

/*
 * El foco visible, que el lienzo no dibuja porque un lienzo no se recorre con el teclado.
 * Morado sobre crema y morado claro sobre el panel oscuro: en los dos casos por encima de 3:1.
 */
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 6px;
}
.night :focus-visible {
  outline-color: var(--purple-soft);
}

img,
svg {
  max-width: 100%;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
}

section {
  padding: 76px var(--pad) 0;
  /*
   * El dock flota sobre el contenido, asi que un salto a un ancla dejaba el titulo de la seccion
   * escondido detras de el. `scroll-margin-top` le dice al navegador donde termina de verdad la
   * parte visible: es la contrapartida de haber sacado la cabecera del flujo.
   */
  scroll-margin-top: 92px;
}

/* ------------------------------------------------------------------ tipografia */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  text-wrap: pretty;
}

/*
 * 68px y no los 84px del lienzo, y no es un capricho: el lienzo dibuja el titular a todo el ancho
 * de la pagina y aqui vive en una columna con el camaleon al lado. A 84px «Factura hoy, no en tres
 * semanas» parte en tres lineas dentro de esa columna, y la tercera queda con una sola palabra.
 * A 68px son dos, que es como esta escrita la frase: una mitad negra y una morada.
 */
h1 {
  max-width: 720px;
  margin-top: 26px;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1;
  letter-spacing: -0.048em;
}
h1 .accent {
  color: var(--purple);
}

h2 {
  margin-top: 14px;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.042em;
}
h2.sm {
  font-size: clamp(28px, 3.8vw, 40px);
}
h2.lg {
  font-size: clamp(34px, 4.8vw, 52px);
  margin-top: 0;
  line-height: 1.02;
  letter-spacing: -0.048em;
}

h3 {
  font-size: 21px;
  letter-spacing: -0.032em;
}
h3.lg {
  font-size: 22px;
}

.lede {
  max-width: 660px;
  margin: 28px 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}
.note {
  margin: 16px 0 0;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}
p {
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  color: var(--purple);
}
.eyebrow.on-night {
  color: var(--on-night-accent);
}

/* La etiqueta mono gris: pies de tabla, notas al margen, sellos. */
.stamp {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
}

.head {
  max-width: 700px;
}
.head.narrow {
  max-width: 660px;
}

/* ------------------------------------------------------------------ cabecera */

/*
 * EL DOCK FLOTANTE.
 *
 * `fixed` y no `sticky`: flota sobre el contenido en vez de empujarlo, y la pagina empieza en el
 * borde de la pantalla. El hueco que necesita se lo da `.hero` con su propio relleno superior, y
 * no un `padding-top` en `body`: asi el fondo del heroe sigue llegando hasta arriba y el dock se
 * ve encima de el, que es de lo que se trata.
 *
 * `max-width` con el mismo `--wrap` del resto de la pagina, para que el dock quede alineado con el
 * contenido y no flotando a su aire.
 */
.top {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: var(--wrap);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 10px 14px 10px 20px;
  background: rgba(247, 247, 245, 0.82);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(23, 22, 27, 0.04),
    0 12px 32px -12px rgba(23, 22, 27, 0.16);
}

/* El heroe se aparta del dock. Es lo unico que lo hace: el resto de la pagina pasa por debajo. */
.hero .wrap {
  padding-top: 132px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--ink);
}
/*
 * LA MARCA, y por que ya no es un cuadrado.
 *
 * El lienzo pone un cuadrado morado redondeado, que es lo que se dibuja cuando todavia no hay
 * logotipo. Aqui si lo hay: el camaleon esta en `/img/`, lo usa el favicon y lo usa el hero. Un
 * cuadrado de color al lado del nombre, teniendo la marca hecha, era dejarse el logotipo fuera de
 * la unica pagina que lo presenta.
 *
 * Va a 30px y sin baldosa detras. Con baldosa hay que meterlo dentro con margen, y a ese tamaño la
 * silueta se convierte en una mancha; suelto sobre el crema conserva el perfil.
 *
 * El animal y la palabra van del MISMO indigo, y esa es la razon de que el logotipo funcione como
 * una pieza: dos tintas partirian la marca en dos cosas que van juntas por casualidad. La particion
 * a dos colores queda reservada al titular, que es donde dice algo -- una mitad es la promesa y la
 * otra es contra que se compara.
 */
.brand-mark {
  width: 30px;
  height: auto;
  flex-shrink: 0;
}
.brand-word {
  color: var(--purple-hi);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.top nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.dock-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dock-nav > li > a,
.top .plain {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--body);
}
.dock-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border-radius: 999px;
}
.dock-nav > li > a:hover,
.top .plain:hover {
  color: var(--purple);
}
.dock-nav > li > a:hover {
  background: var(--surface-2);
}
.chev {
  font-size: 10px;
  color: var(--faint);
  transition: transform 0.18s ease;
}

/*
 * EL MEGA MENU. Se abre con el raton y con el teclado, y no hay una tercera forma que mantener.
 *
 * `:hover` cubre el raton. `:focus-within` cubre el teclado: al tabular hasta el disparador el
 * panel aparece, se puede seguir tabulando dentro, y al salir se cierra solo. Ningun estado que
 * guardar, ningun `aria-expanded` que se quede desincronizado.
 *
 * Cerrado NO es `display:none` sino `visibility:hidden` con opacidad: asi la aparicion puede tener
 * transicion, y `visibility` -- a diferencia de `opacity` sola -- si saca los enlaces del orden de
 * tabulacion mientras esta cerrado, que es lo que evita tabular a ciegas por un panel invisible.
 *
 * El puente de 10px entre el disparador y el panel es el `padding-top` del contenedor: sin el, el
 * raton cruza un hueco muerto camino del panel, el `:hover` se pierde y el menu se cierra en la
 * cara de quien iba a usarlo.
 */
/*
 * El panel se ancla AL DOCK, no al elemento del menu que lo abre.
 *
 * Anclado al elemento y centrado sobre el, un panel de 760px colgando de un disparador que esta a
 * 140px del borde izquierdo se sale de la pantalla por la izquierda -- que es exactamente lo que
 * pasaba. Anclado al dock queda centrado bajo una caja que ya esta centrada y que nunca es mas
 * ancha que la ventana, asi que no puede desbordarse por ningun lado.
 *
 * Por eso `.has-mega` es `static`: hace que el antecesor posicionado mas cercano sea `.top`.
 */
.has-mega {
  position: static;
}
.has-mega:hover > a,
.has-mega:focus-within > a {
  color: var(--purple);
  background: var(--surface-2);
}
.has-mega:hover .chev,
.has-mega:focus-within .chev {
  transform: rotate(180deg);
}
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  margin-top: 10px;
  display: grid;
  /*
   * Las columnas las pone el contenido: `grid-auto-flow: column` da una por bloque, sin que haya
   * que declarar cuantas tiene cada menu ni acordarse de cambiarlo al añadir una. Dos menus con
   * distinto numero de columnas y una sola regla.
   */
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 240px);
  gap: 26px;
  padding: 22px;
  width: max-content;
  max-width: min(760px, calc(100vw - 48px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(23, 22, 27, 0.04),
    0 24px 48px -16px rgba(23, 22, 27, 0.22);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
}
/* El puente: el panel empieza 10px mas abajo, y ese hueco lo cubre este pseudoelemento. */
.mega::before {
  content: "";
  position: absolute;
  inset: -12px 0 auto 0;
  height: 12px;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mega-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.mega-col > a {
  display: block;
  padding: 9px 11px;
  border-radius: 11px;
  white-space: normal;
}
.mega-col > a:hover {
  background: var(--purple-pale);
}
.mega-col > a strong {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ink);
}
.mega-col > a:hover strong {
  color: var(--purple-hi);
}
.mega-col > a span {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 2px;
}
.mega-aside {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 16px;
  align-items: flex-start;
}
/* El boton no parte la flecha en una segunda linea dentro de una columna estrecha. */
.mega-aside .btn {
  white-space: nowrap;
}
.mega-aside p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
  margin: 0 0 12px;
  white-space: normal;
}
.grow {
  flex: 1;
}

/*
 * La navegacion se esconde antes que los botones. Un menu que se parte en dos lineas sobre una
 * cabecera pegajosa se come la mitad de la pantalla al hacer scroll en un movil, y los enlaces
 * que contiene son anclas de la misma pagina: se llega a todas bajando.
 */
@media (max-width: 900px) {
  .top nav {
    display: none;
  }
  .top .plain {
    display: none;
  }
}

/* ------------------------------------------------------------------ botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border-radius: 15px;
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    border-color 140ms ease;
}
.btn.sm {
  height: 44px;
  padding: 0 20px;
  border-radius: 13px;
  font-size: 14.5px;
  gap: 9px;
}
.btn.lg {
  height: 58px;
  padding: 0 26px;
  border-radius: 16px;
  font-size: 17px;
  gap: 11px;
}
.btn.block {
  display: flex;
  width: 100%;
}

.btn.solid {
  background: var(--purple);
  color: #fff;
}
.btn.solid:hover {
  background: var(--purple-hi);
  color: #fff;
}

.btn.line {
  border: 1px solid var(--line-btn);
  background: var(--surface);
  color: var(--ink);
}
.btn.line:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.btn.on-night {
  background: #fff;
  color: var(--purple-hi);
}
.btn.on-night:hover {
  background: var(--purple-pale);
  color: var(--purple-hi);
}

.arrow {
  font-size: 1.08em;
}

/* La pastilla del hero: punto morado y texto en morado oscuro sobre morado palido. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--purple-pale);
  color: var(--purple-hi);
  font-size: 13.5px;
  font-weight: 600;
}
.pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
.actions .aside {
  font-size: 14px;
  color: var(--muted);
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  background: var(--cream);
}

/*
 * EL RESPLANDOR, que en el lienzo envuelve una captura simulada y aqui envuelve la marca.
 *
 * Es un `radial-gradient` en un pseudoelemento y no un `<div>` porque no dice nada: es
 * decoracion pura, y un elemento vacio en el HTML solo para pintarlo obliga a acordarse de
 * ponerle `aria-hidden`. Un pseudoelemento no esta en el arbol de accesibilidad y no hay nada
 * que recordar.
 */
/*
 * DOS COLUMNAS, y el camaleon a la derecha del texto.
 *
 * El lienzo lo pone debajo y a todo lo ancho porque debajo tenia una captura de la consola. Sin
 * esa captura, un logotipo solo y centrado bajo los botones no es una composicion: es una imagen
 * suelta esperando a que alguien baje a mirarla, y nadie baja. Al lado del titular si tiene
 * trabajo -- equilibra el peso de la columna de texto y entra en el primer pantallazo.
 *
 * `flex-wrap` y no una media query: cuando las dos bases no caben, el camaleon cae debajo solo.
 */
.hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
}
.hero-say {
  flex: 1 1 460px;
  min-width: 0;
}
.hero-mark {
  position: relative;
  display: flex;
  flex: 1 1 340px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 300px;
}
.hero-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6%;
  width: min(78%, 720px);
  height: 88%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(100, 40, 245, 0.22) 0%,
    rgba(100, 40, 245, 0.06) 48%,
    rgba(100, 40, 245, 0) 70%
  );
  pointer-events: none;
}
.hero-mark-still,
.hero-mark-canvas {
  position: relative;
  display: block;
  /* El `<canvas>` se crea con 560x500 fijos y no lo alcanza la regla de `img, svg`. */
  max-width: 100%;
  height: auto;
}
/* Cuando el motor de particulas arranca, el logo quieto se retira sin dejar hueco. */
.hero-mark.is-live .hero-mark-still {
  display: none;
}

/* ------------------------------------------------------------------ la tira de pruebas */

.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.strip li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: var(--body);
}
.strip ul {
  display: contents;
  list-style: none;
}
.strip .tick {
  color: var(--purple);
  font-size: 15px;
}

/* ------------------------------------------------------------------ rejillas y tarjetas */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin-top: 40px;
}
.grid.wide {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.grid.two {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}
.card p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--body);
  text-wrap: pretty;
}
.card h3 + p {
  margin-top: 6px;
}

/* La sexta tarjeta de «como funciona»: la unica oscura, porque es el paso que cambia todo. */
.card.night {
  border-color: var(--purple);
  background: var(--night);
  color: var(--on-night);
}
.card.night p {
  color: var(--on-night-body);
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--purple-pale);
  color: var(--purple-hi);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}
.card.night .step-num {
  background: var(--night-soft);
  color: var(--purple-soft);
}
.step-num + h3 {
  margin-top: 18px;
}

/* La etiqueta de una tarjeta que no lleva numero: LIBRO DE RECLAMACIONES, SIRE, OPENAPI. */
.tag {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  color: var(--faint);
}
.tag + h3 {
  margin-top: 10px;
}

/* ------------------------------------------------------------------ el panel oscuro */

.night {
  padding: clamp(28px, 4vw, 48px);
  border-radius: 30px;
  background: var(--night);
  color: var(--on-night);
}
.night .note,
.night .lede {
  color: var(--on-night-body);
}

.split {
  display: flex;
  flex-wrap: wrap;
  gap: 46px;
}
.split > * {
  flex: 1 1 380px;
  min-width: 0;
}
.split.left > :first-child {
  flex-basis: 340px;
}
.split.right > :last-child {
  flex-basis: 430px;
}

.facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.facts li {
  display: flex;
  gap: 13px;
}
.facts .tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--purple-pale);
  color: var(--purple-hi);
  font-size: 14px;
}
.night .facts .tick {
  background: var(--night-soft);
  color: var(--purple-soft);
}
.facts strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
}
.facts span:last-child {
  min-width: 0;
}
.facts .sub {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--body);
}
.night .facts .sub {
  color: var(--on-night-body);
}

/*
 * LA LISTA DE ARTEFACTOS, que ocupa el sitio donde el lienzo dibujaba un cuadro de mando.
 *
 * El v2 ponia ahi 1 482 emitidos, 1 463 aceptados y 19 en cola, con barras. Son numeros de
 * relleno, y esta portada ya quito una tabla igual una vez -- el comentario esta en el hero del
 * HTML. Lo que se enseña ahora son los cuatro artefactos que la plataforma guarda de cada
 * comprobante, que es producto de verdad y ademas es lo que la seccion afirma en el parrafo de
 * al lado.
 */
.sheet {
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
}
.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
.sheet-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.sheet-title::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--purple);
}
.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--purple-pale);
  color: var(--purple-hi);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
}
.sheet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-3);
}
.sheet-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.sheet-key {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}
.sheet-val {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 13.5px;
  color: var(--body);
}

/* ------------------------------------------------------------------ integraciones */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 12px;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  min-height: 82px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.tile b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.tile span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--body);
}
/* La unica en morado: el borde discontinuo dice «esta es la puerta», no «esta es una marca mas». */
.tile.api {
  border: 1px dashed var(--purple-soft);
  background: var(--purple-pale);
}
.tile.api b {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--purple-hi);
}
.tile.api span {
  color: var(--purple-hi);
}

/* ------------------------------------------------------------------ precios */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin-top: 40px;
  align-items: start;
}
.plan {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}
.plan > p {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--body);
}
.plan hr {
  height: 1px;
  margin: 24px 0 20px;
  border: 0;
  background: var(--line-2);
}
.plan ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  list-style: none;
}
.plan li {
  display: flex;
  gap: 10px;
}
.plan li::before {
  content: "✓";
  color: var(--purple);
}
.plan li.no {
  color: var(--faint);
}
.plan li.no::before {
  content: "—";
  color: var(--faint);
}
.plan .btn {
  margin-top: 26px;
}

/* El plan del medio, en morado lleno. Es el unico elemento de la pagina con sombra de color. */
.plan.featured {
  border-color: transparent;
  background: var(--purple);
  color: #fff;
  box-shadow: 0 22px 50px rgba(100, 40, 245, 0.24);
}
.plan.featured > p,
.plan.featured ul {
  color: #e4dbfe;
}
.plan.featured hr {
  background: rgba(255, 255, 255, 0.28);
}
.plan.featured li::before {
  color: #d8cbfe;
}
.plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--purple-hi);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 24px;
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.05em;
}
.price small {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--faint);
}
.plan.featured .price small {
  color: #d8cbfe;
}

/* ------------------------------------------------------------------ preguntas */

.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--purple);
}
.faq .plus {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--purple);
  transition: transform 160ms ease;
}
.faq details[open] .plus {
  transform: rotate(45deg);
}
.faq p {
  max-width: 620px;
  padding: 0 2px 22px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
}

/* ------------------------------------------------------------------ cierre y pie */

.close .actions {
  margin-top: 28px;
}
.close .stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--on-night-accent);
}

footer {
  margin-top: 76px;
  padding: 40px var(--pad);
  border-top: 1px solid var(--line);
}
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  font-size: 14px;
}
.foot-links a {
  color: var(--body);
}
.foot-links a:hover {
  color: var(--purple);
}
.foot .brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 8px;
}
.foot .brand-word {
  font-size: 17px;
}

/*
 * LA ATRIBUCION. Segunda fila del pie, separada por una linea: no es un enlace mas de navegacion,
 * es de quien es esto. Por eso no vive en `.foot-links`.
 */
.made-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.made-by-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--body);
}
.made-by-brand:hover {
  color: var(--purple-hi);
}
.made-by-brand strong {
  color: var(--ink);
  font-weight: 600;
}
.made-by-brand:hover strong {
  color: var(--purple-hi);
}
.made-by-brand img {
  width: 22px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  :root {
    --pad: 22px;
  }
  section {
    padding-top: 56px;
  }
  .split {
    gap: 32px;
  }
  .card,
  .plan {
    padding: 22px;
  }
}

/* ------------------------------------------------------------------ el flujo animado */

/*
 * Fuera de la pantalla pero NO fuera del orden de tabulacion. `display:none` sacaria los radios de
 * la navegacion con teclado y el grupo dejaria de ser un grupo; esto los esconde a la vista y los
 * deja enfocables, que es justo lo contrario de `aria-hidden`.
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.flow-map {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/*
 * LA VIA. Cinco nodos y cuatro cables, en una sola fila en pantalla ancha.
 *
 * `grid` con `auto` para los nodos y `1fr` para los cables: los nodos miden lo que necesita su
 * texto y el espacio sobrante se lo reparten los cables. Con `flex` habria que fijar anchos a mano
 * y se descuadraria en cuanto una etiqueta creciera una letra.
 */
.flow-track {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 0;
  margin-top: 44px;
}

.node {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.node:hover {
  border-color: var(--purple-soft);
  transform: translateY(-2px);
}
.node-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.node-name {
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.node-sub {
  font-size: 12.5px;
  color: var(--muted);
}

/*
 * EL CABLE, y por que el guion se dibuja con un degradado y no con un `border-dashed`.
 *
 * Un borde discontinuo no se puede mover: el navegador no anima la posicion de sus guiones. Un
 * `repeating-linear-gradient` si, porque lo que se anima es `background-position`, y eso da la
 * sensacion de que algo viaja del nodo anterior al siguiente. Es la unica animacion de la seccion
 * y la apaga el bloque de `prefers-reduced-motion` de arriba, que alcanza a todo el fichero.
 */
.wire {
  height: 2px;
  min-width: 24px;
  background-image: repeating-linear-gradient(
    to right,
    var(--purple-soft) 0 7px,
    transparent 7px 14px
  );
  background-size: 14px 2px;
  animation: wire-run 0.9s linear infinite;
}
@keyframes wire-run {
  to {
    background-position: 14px 0;
  }
}

/*
 * EL NODO ELEGIDO. Cinco reglas y no una con `:has()`: `:has()` no lo entienden todavia todos los
 * navegadores en uso, y aqui se puede escribir sin el. El selector es el hermano general `~`,
 * porque los radios estan antes que la via en el mismo contenedor.
 */
#flow-1:checked ~ .flow-track label[for="flow-1"],
#flow-2:checked ~ .flow-track label[for="flow-2"],
#flow-3:checked ~ .flow-track label[for="flow-3"],
#flow-4:checked ~ .flow-track label[for="flow-4"],
#flow-5:checked ~ .flow-track label[for="flow-5"] {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px var(--purple-pale);
}
#flow-1:checked ~ .flow-track label[for="flow-1"] .node-num,
#flow-2:checked ~ .flow-track label[for="flow-2"] .node-num,
#flow-3:checked ~ .flow-track label[for="flow-3"] .node-num,
#flow-4:checked ~ .flow-track label[for="flow-4"] .node-num,
#flow-5:checked ~ .flow-track label[for="flow-5"] .node-num {
  color: var(--purple);
}

/* El anillo de foco se pinta sobre la etiqueta, porque el radio no se ve. */
.flow-map input:focus-visible + .flow-track label,
.flow-map input:focus-visible ~ .flow-track label[for] {
  outline: none;
}
#flow-1:focus-visible ~ .flow-track label[for="flow-1"],
#flow-2:focus-visible ~ .flow-track label[for="flow-2"],
#flow-3:focus-visible ~ .flow-track label[for="flow-3"],
#flow-4:focus-visible ~ .flow-track label[for="flow-4"],
#flow-5:focus-visible ~ .flow-track label[for="flow-5"] {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

/* Los paneles se apilan y solo se ve el elegido. */
.flow-detail {
  margin-top: 28px;
}
.panel {
  display: none;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}
#flow-1:checked ~ .flow-detail #panel-1,
#flow-2:checked ~ .flow-detail #panel-2,
#flow-3:checked ~ .flow-detail #panel-3,
#flow-4:checked ~ .flow-detail #panel-4,
#flow-5:checked ~ .flow-detail #panel-5 {
  display: block;
}
.panel h3 {
  margin: 8px 0 10px;
}
.panel p {
  color: var(--body);
  max-width: 62ch;
}
.panel-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.panel-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  max-width: 68ch;
}
.panel-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-soft);
}
.panel code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--purple-hi);
  background: var(--purple-pale);
  padding: 1px 6px;
  border-radius: 6px;
}

/*
 * EN PANTALLA ESTRECHA LA VIA SE PONE DE PIE. Cinco nodos en fila en un movil darian cajas de
 * cuarenta pixeles con el texto partido en cuatro lineas. En columna los cables siguen contando lo
 * mismo -- que una cosa lleva a la siguiente -- girados noventa grados.
 */
@media (max-width: 980px) {
  .flow-track {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .wire {
    width: 2px;
    height: 26px;
    min-width: 0;
    justify-self: center;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--purple-soft) 0 7px,
      transparent 7px 14px
    );
    background-size: 2px 14px;
    animation-name: wire-run-down;
  }
  @keyframes wire-run-down {
    to {
      background-position: 0 14px;
    }
  }
  .panel {
    padding: 22px;
  }
}