/* =========================================================================
   Sezio · la web pública · seziosoftware.es
   -------------------------------------------------------------------------
   DIRECCIÓN DE ARTE · «TARIFA»

   No se parece a una web de software a propósito. Se parece al material que
   un distribuidor ya tiene encima de la mesa: la tarifa impresa del
   fabricante, la ficha de catálogo, el albarán autocopiativo.

   Las reglas, y no se rompen:
     · TINTA PLANA. El violeta del negocio inunda secciones enteras. No hay
       ni un degradado, ni un resplandor, ni un desenfoque en toda la hoja.
     · RADIO 0 EN TODO, menos en DOS cosas, y las dos estan dichas donde se
       usan:
         1. las laminas del sistema y su paspartu, por decision del dueno el 8
            de septiembre;
         2. el LOGOTIPO, que trae sus esquinas de origen — un logotipo no se
            reencuadra para que encaje con una hoja de estilo (10 de sept.).
       Fuera de esas dos: si aparece un radio en un boton, en una tarjeta o en
       un recuadro, esta mal.
     · SIN SOMBRAS, menos en las fichas de «Por qué Sezio»: las pidio el dueno
       el 8 de septiembre y van con una MUY leve. En el resto, la profundidad
       la dan los bloques de color y los filetes gruesos, como en imprenta.
     · LAS CIFRAS SON MONOESPACIADAS Y TABULARES, como en el sistema.
     · El amarillo ácido es rotulación industrial: marca, no decora.
   ========================================================================= */

/* =========================================================================
   LAS FUENTES, SERVIDAS DESDE AQUÍ · 16/09/2026
   -------------------------------------------------------------------------
   Antes se pedían a Google Fonts desde cada página, y eso manda la IP de
   cada visitante a Google SIN su consentimiento: una sentencia alemana de
   2022 lo sancionó por RGPD, y en una web que todavía no tiene aviso de
   privacidad es lo último que conviene. Ahora son cuatro ficheros de
   `fuentes/` y ninguna petición sale de seziosoftware.es.

   Sólo los subconjuntos LATINO y LATINO EXTENDIDO: el castellano, el € y
   los nombres propios europeos. `unicode-range` hace que el navegador baje
   únicamente el que necesita la página, normalmente sólo el latino.

   Son fuentes VARIABLES —peso y anchura en un solo fichero—, así que los
   `font-stretch: 118%` del diseño siguen funcionando igual que con Google.
   Licencia SIL Open Font License 1.1: ver fuentes/LICENCIAS.txt.
   ========================================================================= */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fuentes/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fuentes/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("fuentes/martian-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("fuentes/martian-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Color ------------------------------------------------------------ */
  --papel:      #e9e9e4;   /* papel de tarifa, gris y frío */
  --papel-alto: #f6f6f3;   /* la hoja, más limpia */
  --tinta:      #17161a;
  --tinta-2:    #45434e;   /* texto secundario · 8,3:1 sobre papel */
  --filete:     #c9c8c1;

  --violeta:    #4a1fd0;   /* EL violeta del negocio, en tinta de imprenta */
  --violeta-2:  #3714a3;   /* el mismo, pisado */
  --lila:       #b9a6ff;   /* sobre tinta */

  --acido:      #d8fb1e;   /* rotulación: marca lo que hay que mirar */
  --verde:      #17a06a;   /* cumple  */
  --ambar:      #e08700;   /* avisa   */
  --rojo:       #d92b1c;   /* bloquea */

  /* --- Tipografía ------------------------------------------------------- */
  --titular: Archivo, "Arial Narrow", Helvetica, sans-serif;
  --texto-f: Archivo, Helvetica, Arial, sans-serif;
  --mono:    "Martian Mono", ui-monospace, "Cascadia Mono", monospace;

  /* --- Medidas ---------------------------------------------------------- */
  --ancho:  1180px;
  --aire:   clamp(54px, 8vw, 104px);
  --barra-alto: 60px;
  --radio-lamina: 11px;   /* la unica curva de la casa · ver cabecera */
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto-f);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* =========================================================================
   Tipografía · Archivo con el eje de ANCHURA, que es lo que le da carácter:
   los titulares van expandidos y pesados, como la portada de un catálogo.
   ========================================================================= */
h1, h2, h3, h4 {
  font-family: var(--titular);
  margin: 0;
  line-height: .96;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -.035em;
}
h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.03em;
}
h3 {
  font-size: 1.18rem;
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: -.015em;
  line-height: 1.15;
}
p { margin: 0; }
a { color: inherit; }
strong, b { font-weight: 700; }

.cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.04em;
}

/* La cejilla: el código de sección de un catálogo */
.cejilla {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: inline-block;
  background: var(--tinta);
  color: var(--papel-alto);
  padding: 5px 10px 4px;
}
.cejilla--violeta { background: var(--violeta); color: #fff; }
.cejilla--acido   { background: var(--acido);   color: var(--tinta); }
.cejilla--papel   { background: var(--papel-alto); color: var(--tinta); }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.5; max-width: 56ch; }
.menor { font-size: .92rem; line-height: 1.5; color: var(--tinta-2); }

/* Lo que va sobre tinta o sobre violeta invierte el gris secundario */
.oscuro .menor, .violeta .menor { color: rgba(255,255,255,.72); }

/* Subrayado de bloque: tinta plana detrás de una palabra, como un rotulador */
.marcado {
  background: var(--violeta);
  color: #fff;
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.marcado--acido { background: var(--acido); color: var(--tinta); }

/* =========================================================================
   Estructura · secciones a sangre, alternando tinta plana
   ========================================================================= */
.contenedor { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }

section.tramo { padding-block: var(--aire); border-top: 3px solid var(--tinta); }
.violeta { background: var(--violeta); color: #fff; border-top-color: var(--violeta); }
.oscuro  { background: var(--tinta);   color: var(--papel-alto); }

/* El rótulo de sección: código, título y un filete que se dibuja al llegar */
.rotulo { margin-bottom: clamp(30px, 4vw, 52px); }
.rotulo h2 { margin-top: 16px; max-width: 18ch; }
.rotulo .menor { margin-top: 14px; max-width: 62ch; }
.rotulo .filete {
  display: block;
  height: 3px;
  background: var(--tinta);
  margin-top: 22px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.16,.8,.3,1);
}
.rotulo.visto .filete { transform: scaleX(1); }
.violeta .rotulo .filete, .oscuro .rotulo .filete { background: currentColor; }

/* =========================================================================
   Botones · rectángulos que se invierten. Nada de degradados.
   ========================================================================= */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: 50px;
  padding: 13px 26px;
  border: 2px solid var(--tinta);
  background: var(--tinta);
  color: var(--papel-alto);
  font-family: var(--texto-f);
  font-size: .95rem;
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s linear, color .14s linear, border-color .14s linear;
}
.boton:hover { background: transparent; color: var(--tinta); }
.boton .flecha { transition: transform .14s ease; }
.boton:hover .flecha { transform: translateX(4px); }

.boton--hueco { background: transparent; color: var(--tinta); }
.boton--hueco:hover { background: var(--tinta); color: var(--papel-alto); }

/* Sobre violeta o sobre tinta, el ácido es el que manda */
.violeta .boton, .oscuro .boton {
  background: var(--acido);
  border-color: var(--acido);
  color: var(--tinta);
}
.violeta .boton:hover, .oscuro .boton:hover { background: transparent; color: var(--acido); }
.violeta .boton--hueco, .oscuro .boton--hueco {
  background: transparent; border-color: currentColor; color: inherit;
}
.violeta .boton--hueco:hover { background: #fff; border-color: #fff; color: var(--violeta); }
.oscuro  .boton--hueco:hover { background: var(--papel-alto); border-color: var(--papel-alto); color: var(--tinta); }

:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }
.violeta :focus-visible, .oscuro :focus-visible { outline-color: var(--acido); }
/* Dentro del formulario el fondo vuelve a ser papel: el ácido no se vería */
form.impreso :focus-visible { outline-color: var(--violeta); }

/* =========================================================================
   Barra
   ========================================================================= */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: 3px solid var(--tinta);
}
.barra .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: var(--barra-alto);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--titular);
  font-weight: 800;
  font-stretch: 118%;
  /* Grande a propósito: lo pidió el dueño comparando las dos versiones. El
     logotipo va PEQUEÑO al lado y el nombre es el que manda. */
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.marca i { font-style: normal; color: var(--violeta); }

/* ⚠ EL RÓTULO VA ENVUELTO EN UN `<span>`, Y NO ES DECORACIÓN.
   `.marca` es un contenedor flex, así que TODOS sus hijos son elementos flex
   — incluido el `<i>` del punto. Sin el `span`, el `gap` de 9 px se metía
   entre «SEZIO» y el punto y se leía «SEZIO .».

   Es la TERCERA vez que este proyecto paga el mismo fallo: ya pasó con
   `.senal` y con `.razon-puntos li`, donde un `<strong>` inline se convirtió
   en elemento flex. Al hacer flex un contenedor hay que mirar qué había
   dentro. */
.marca > span { display: inline; }

/* EL LOGOTIPO · el mismo fichero que usa el sistema, no una copia parecida.
   Que el escaparate y la aplicación enseñen el mismo hexágono es lo que hace
   que quien entra por primera vez reconozca dónde ha llegado.

   ⚠ TERCERA EXCEPCIÓN AL RADIO 0, y va dicha como las otras dos: el logotipo
   trae sus esquinas redondeadas de origen. No se le quitan — un logotipo no
   se reencuadra para que encaje con una hoja de estilo, se usa como es. */
.marca img {
  width: 34px;
  height: 34px;
  flex: none;
  display: block;
  /* Más redondeado que el fichero de origen, a petición del dueño (14/09/2026). */
  border-radius: 10px;
}
/* En el pie va algo menor: ahí la marca acompaña, no encabeza. */
.pie .marca { font-size: 1.4rem; }
.pie .marca img { width: 28px; height: 28px; border-radius: 8px; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a:not(.boton) {
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 12px;
  transition: background .12s linear, color .12s linear;
}
.menu a:not(.boton):hover { background: var(--tinta); color: var(--papel); }
/* El botón de la barra es el elemento dominante: es la acción que se quiere
   que ocurra. «Entrar» es un enlace más, porque el que ya es cliente sabe
   entrar y el que no, no lo necesita. */
.menu .boton { min-height: 40px; padding: 9px 18px; font-size: .87rem; margin-left: 8px; }

/* =========================================================================
   Portada
   ========================================================================= */
/* La cubierta va centrada, como la portada de un catálogo. Sólo ella: el
   texto largo se lee peor centrado, así que a partir del primer tramo todo
   vuelve a la izquierda. */
.portada {
  padding-block: clamp(44px, 6vw, 80px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.portada > .contenedor { position: relative; z-index: 1; }

/* =========================================================================
   EL AIRE DE LA PORTADA
   Estructura en movimiento, no atmósfera difusa: la retícula de imprenta
   deriva un módulo entero —así el bucle no tiene costura—, unos filetes la
   cruzan a velocidades distintas y las marcas de corte fijan las esquinas.
   Ni un degradado de color, ni un desenfoque, ni una imagen.
   ========================================================================= */
.aire { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.aire .reticula {
  position: absolute;
  inset: -80px;
  background-image:
    repeating-linear-gradient(90deg, rgba(23,22,26,.085) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg,  rgba(23,22,26,.05)  0 1px, transparent 1px 58px);
  animation: derivar 54s linear infinite;
  will-change: transform;
}
@keyframes derivar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(58px, 58px, 0); }
}

.aire .filete-vuela {
  position: absolute;
  left: 0;
  height: 2px;
  background: rgba(23,22,26,.11);
  animation: cruzar linear infinite;
  will-change: transform;
}
@keyframes cruzar {
  from { transform: translate3d(-70vw, 0, 0); }
  to   { transform: translate3d(170vw, 0, 0); }
}
.aire .f1 { top: 13%; width: 22vw; animation-duration: 31s; animation-delay: -6s; }
.aire .f2 { top: 30%; width: 34vw; animation-duration: 47s; animation-delay: -24s; background: rgba(74,31,208,.17); }
.aire .f3 { top: 52%; width: 15vw; animation-duration: 25s; animation-delay: -13s; }
.aire .f4 { top: 71%; width: 28vw; animation-duration: 39s; animation-delay: -31s; }
.aire .f5 { top: 88%; width: 19vw; animation-duration: 34s; animation-delay: -9s; background: rgba(74,31,208,.12); }

/* Marcas de corte: quietas. Son un detalle de imprenta, no un efecto. */
.aire .corte {
  position: absolute;
  width: 22px; height: 22px;
  border: 0 solid rgba(23,22,26,.3);
}
.aire .c1 { top: 22px; left: 22px;  border-top-width: 2px; border-left-width: 2px; }
.aire .c2 { top: 22px; right: 22px; border-top-width: 2px; border-right-width: 2px; }
.aire .c3 { bottom: 22px; left: 22px;  border-bottom-width: 2px; border-left-width: 2px; }
.aire .c4 { bottom: 22px; right: 22px; border-bottom-width: 2px; border-right-width: 2px; }

/* --- El titular se coloca subiendo desde su propia caja --------------- */
.portada h1 { margin: 18px auto 0; max-width: 22ch; }
.portada h1 .linea {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* sin este par, la caja recorta la coma y las tildes */
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.portada h1 .alza {
  display: inline-block;
  transform: translateY(106%);
  animation: alzar .82s cubic-bezier(.16,.86,.26,1) forwards;
}
.portada h1 .linea:nth-of-type(1) .alza { animation-delay: .08s; }
.portada h1 .linea:nth-of-type(2) .alza { animation-delay: .22s; }
@keyframes alzar { to { transform: translateY(0); } }
.portada .lede { margin: 26px auto 0; font-weight: 500; max-width: 58ch; }
/* El carril de módulos: lo tangible, justo debajo del titular. Dice «esto es
   software» antes de que haga falta leer nada. */
.modulos {
  list-style: none;
  margin: 24px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 9px 15px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--tinta);
  max-width: 46ch;
}
.modulos li { display: flex; align-items: center; gap: 15px; }
.modulos li::after { content: ""; width: 5px; height: 5px; background: var(--violeta); }
.modulos li:last-child::after { display: none; }

.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* La copia calco es un documento: dentro de ella se lee de izquierda a
   derecha, aunque la cubierta esté centrada. */
.portada .calco { text-align: left; }

.sellos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 34px; border-top: 1px solid var(--filete); }
.sellos span {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding: 12px 22px;
  border-right: 1px solid var(--filete);
}
.sellos span:last-child { border-right: 0; }

/* --- La entrada, escalonada ------------------------------------------- */
.entra { opacity: 0; transform: translateY(14px); animation: subir .55s cubic-bezier(.16,.8,.3,1) forwards; }
.entra-1 { animation-delay: .04s; }
.entra-2 { animation-delay: .12s; }
.entra-3 { animation-delay: .22s; }
.entra-4 { animation-delay: .32s; }
@keyframes subir { to { opacity: 1; transform: none; } }

.asoma { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,.8,.3,1); }
.asoma.visto { opacity: 1; transform: none; }

/* =========================================================================
   LA CAPTURA · la pieza de la portada
   El sistema de verdad, en una placa de tinta. No es una ilustración: es
   la pantalla de presupuestos tal cual sale.
   ========================================================================= */
.captura { margin: clamp(40px, 5vw, 68px) 0 0; text-align: left; }
/* La placa lleva la tinta; el pie se queda fuera, sobre papel, o sería
   texto gris sobre negro. */
/* Las CUATRO placas, no solo las de .captura: las tres de la seccion de
   producto se quedaban sin fondo de tinta y su chapa —blanco al 66 %— caia
   sobre papel. */
.placa { border: 3px solid var(--tinta); background: var(--tinta); border-radius: var(--radio-lamina); }

/* EL PASPARTÚ · la cartulina sobre la que va montada la lámina. NO es un
   filete de tinta: eso era un grito negro alrededor de la foto. Es un tono
   de la misma familia del papel —uno más claro— con un filete finísimo del
   gris que ya separa el resto de la web. Se relaciona con el fondo en vez
   de pelearse con él.
   Va DETRÁS de la placa (z-index -1), como una cartulina de verdad. */
.placa { position: relative; }
.placa::after {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  background: var(--papel-alto);
  border: 2px solid var(--filete);
  /* 11 del interior + los 16 de separacion: las dos curvas son concentricas */
  border-radius: 27px;
  pointer-events: none;
}
.placa .chapa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding: 10px 14px 9px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
  border-bottom: 3px solid var(--tinta);
  border-radius: 8px 8px 0 0;   /* 11 menos los 3 del filete de la placa */
}
.placa .chapa b { color: var(--acido); font-weight: 500; }
/* El recorte se lleva la franja muerta de abajo y el distintivo del
   servidor de desarrollo, que vive fijo en esa esquina. */
.placa .marco { display: block; aspect-ratio: 1440 / 618; overflow: hidden; border-radius: 0 0 8px 8px; }
/* El lienzo es LA IMAGEN ENTERA, y el marco la recorta. Así las señales se
   colocan en porcentajes de la imagen y siguen cuadrando cuando el recorte
   cambia —que en el móvil cambia—. */
.placa .lienzo { display: block; position: relative; width: 100%; aspect-ratio: 2880 / 1720; }
.placa img { display: block; width: 100%; height: 100%; }

/* --- Los recuadros sobre la captura ----------------------------------- */
.zona {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
  border: 2px solid var(--acido);
}
.zona b {
  position: absolute;
  top: -2px; left: -2px;
  transform: translateY(-100%);
  background: var(--acido);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: .56rem;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px 3px;
}
.leyenda {
  list-style: none;
  margin: 28px 0 0;   /* deja pasar el paspartu, que baja 14 px */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.leyenda li { display: flex; align-items: center; gap: 8px; }
.leyenda b {
  background: var(--tinta);
  color: var(--papel-alto);
  font-size: .58rem;
  padding: 3px 6px 2px;
  flex: 0 0 auto;
}
.captura figcaption {
  padding: 18px 2px 0;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 72ch;
  margin-inline: auto;
  text-align: center;
}
.captura figcaption strong { color: var(--tinta); font-weight: 700; }

/* La de la portada se sale del contenedor: el producto tiene que ser lo más
   grande de la pantalla, no un adorno debajo del titular. */
/* ⚠ Centrado con margen negativo y NO con translateX: esta figura lleva
   también la animación de entrada, que anima `transform` y se lo comería. */
.captura--portada {
  --ancho-grande: min(100vw - 72px, 1512px);
  width: var(--ancho-grande);
  margin-left: calc((100% - var(--ancho-grande)) / 2);
}

/* =========================================================================
   ASÍ SE VE POR DENTRO · una pantalla, lo que se decide en ella, y la placa
   ========================================================================= */
.demo + .demo { margin-top: clamp(44px, 5vw, 78px); }
.demo-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 10px 36px;
  align-items: baseline;
  border-top: 3px solid var(--tinta);
  padding-top: 16px;
  margin-bottom: 32px;   /* idem: el paspartu sube 14 px sobre la placa */
}
.demo-cabeza h3 {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.03em;
}
.demo-cabeza p { font-size: .99rem; line-height: 1.5; color: var(--tinta-2); max-width: 64ch; }
.demo-cabeza strong { color: var(--tinta); font-weight: 700; }
.demo .marco { aspect-ratio: 1440 / 780; }

.tras-demos {
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: 18px;
  border-top: 1px solid var(--filete);
  font-size: .97rem;
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: 76ch;
}
.tras-demos a { color: var(--violeta); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.tras-demos a:hover { border-bottom-color: var(--violeta); }

/* --- La copia calco: fuera de la portada desde el 8 de septiembre, se
       conserva por si vuelve a hacer falta en otra página --------------- */
.calco {
  margin-top: clamp(38px, 5vw, 64px);
  background: var(--violeta);
  color: #fff;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 34px) clamp(24px, 3vw, 30px);
}
.calco-cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 2px solid rgba(255,255,255,.34);
}
.calco-cabeza h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.calco-cabeza .menor { color: rgba(255,255,255,.78); }

.marco-calco { overflow-x: auto; }
table.hoja-calco {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}
.hoja-calco th, .hoja-calco td { padding: 11px 8px; text-align: left; white-space: nowrap; }
.hoja-calco thead th {
  font-weight: 500;
  font-size: .6rem;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(255,255,255,.34);
  padding-top: 16px;
}
.hoja-calco td.doc {
  font-family: var(--texto-f);
  font-size: .98rem;
  font-weight: 700;
  font-stretch: 106%;
  letter-spacing: -.01em;
}
.hoja-calco tbody tr { border-bottom: 1px solid rgba(255,255,255,.18); }
.hoja-calco tbody tr:last-child { border-bottom: 0; }
.hoja-calco .num { text-align: right; }
.hoja-calco .quien { color: rgba(255,255,255,.62); font-size: .62rem; text-transform: uppercase; }
.hoja-calco .a-mano { color: var(--acido); }

/* El sello: cada línea aparece detrás de la anterior, en orden */
.hoja-calco tbody tr { opacity: 0; }
.calco.visto .hoja-calco tbody tr { animation: sellar .34s cubic-bezier(.16,.9,.3,1) forwards; }
.calco.visto .hoja-calco tbody tr:nth-child(1) { animation-delay: .10s; }
.calco.visto .hoja-calco tbody tr:nth-child(2) { animation-delay: .46s; }
.calco.visto .hoja-calco tbody tr:nth-child(3) { animation-delay: .70s; }
.calco.visto .hoja-calco tbody tr:nth-child(4) { animation-delay: .94s; }
.calco.visto .hoja-calco tbody tr:nth-child(5) { animation-delay: 1.18s; }
@keyframes sellar {
  from { opacity: 0; transform: translateY(-6px) scale(1.012); }
  to   { opacity: 1; transform: none; }
}

.calco-pie {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 2px solid rgba(255,255,255,.34);
  font-size: .98rem;
  max-width: 70ch;
  color: rgba(255,255,255,.88);
}
.calco-pie strong { color: #fff; }

/* =========================================================================
   Razones · tres bloques con filete grueso arriba
   ========================================================================= */
/* Fichas, no columnas. ⚠ Es la ÚNICA parte de la web con sombra, y la lleva
   porque la pidió el dueño el 8 de septiembre. Se mantiene muy leve a
   propósito: en cuanto se note, esto se parece a cualquier otra web. */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.razon {
  background: var(--papel-alto);
  border: 1px solid var(--filete);
  border-radius: var(--radio-lamina);
  padding: 26px 24px 28px;
  box-shadow: 0 1px 0 rgba(23,22,26,.05), 0 16px 30px -24px rgba(23,22,26,.6);
  transition: transform .22s ease, box-shadow .22s ease;
}
.razon:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(23,22,26,.06), 0 22px 36px -24px rgba(23,22,26,.7);
}

/* El icono de cada concepto, dibujado con el mismo trazo que el resto */
.razon-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 2px solid var(--violeta);
  border-radius: 10px;
  color: var(--violeta);
  margin-bottom: 18px;
}
.razon-icono svg { width: 23px; height: 23px; }

.razon .clave {
  font-family: var(--mono);
  font-size: .62rem;
  text-transform: uppercase;
  color: var(--violeta);
  letter-spacing: -.02em;
}
.razon h3 { margin: 10px 0 14px; max-width: 16ch; }
.razon p { font-size: .96rem; color: var(--tinta-2); }
.razon strong { color: var(--tinta); }

/* Los puntos: se lee de un vistazo, y lo que importa va en violeta */
.razon-puntos { list-style: none; margin: 0; padding: 0; }
.razon-puntos li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  padding: 7px 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--tinta-2);
}
.razon-puntos li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--violeta);
  transform: translateY(-2px);
}
.razon-puntos em { font-style: normal; font-weight: 700; color: var(--violeta); }
.razon-puntos strong { color: var(--tinta); font-weight: 700; }

/* --- EL MEDIDOR DE MARGEN ---------------------------------------------
   No es un semáforo de tres casillas: es una regla graduada con la zona
   prohibida rayada, como la señalización de una nave. El mínimo es el filo
   que separa lo rayado de lo limpio, y lo pone la empresa. */
.medidor { margin: 24px 0 0; }
/* Tres barras limpias en vez de la regla rayada: se lee de un golpe qué
   pasa en cada zona, y el color hace todo el trabajo. */
.medidor .barras { display: flex; gap: 5px; }
.medidor .barras span { height: 8px; border-radius: 4px; }
.barras .b-bloquea { flex: 0 0 26%; background: var(--rojo); }
.barras .b-avisa   { flex: 0 0 20%; background: var(--ambar); }
.barras .b-cumple  { flex: 1 1 auto; background: var(--verde); }
.medidor .pies {
  display: flex;
  gap: 5px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.pies .z-bloquea { flex: 0 0 26%; color: var(--rojo); }
.pies .z-avisa   { flex: 0 0 20%; color: var(--ambar); }
.pies .z-cumple  { flex: 1 1 auto; color: var(--verde); }
.medidor .aclara { margin-top: 9px; font-family: var(--mono); font-size: .56rem; text-transform: uppercase; color: var(--tinta-2); }

/* --- LA ESCALERA DEL PRECIO -------------------------------------------
   Baja de verdad: cada peldaño entra un poco más y es más corto que el de
   arriba. El primero que existe es el que manda, y se para ahí. */
.escalera { list-style: none; margin: 24px 0 0; padding: 0; }
.peldano {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 2px solid var(--tinta);
}
/* Cada peldaño es una caja cerrada; se solapan 2 px para que el filo sea
   uno solo donde coinciden, y asome donde el de abajo ya ha entrado. */
.escalera .peldano + .peldano { margin-top: -2px; }
.escalera .peldano:nth-child(2) { margin-left: 18px; }
.escalera .peldano:nth-child(3) { margin-left: 36px; }
.peldano--manda { background: var(--violeta); color: #fff; }
.peldano .orden {
  font-family: var(--titular);
  font-weight: 800;
  font-stretch: 114%;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--violeta);
}
.peldano--manda .orden { color: var(--acido); }
.peldano .que { font-size: .92rem; font-weight: 600; letter-spacing: -.012em; }
.peldano .sello-manda {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .54rem;
  text-transform: uppercase;
  background: var(--acido);
  color: var(--tinta);
  padding: 3px 7px 2px;
}

/* =========================================================================
   LO QUE APRENDE · lo que mira, y una ficha de ejemplo
   La ficha es una ILUSTRACIÓN, no una captura: va marcada aria-hidden y su
   «botón» no es un botón, para que nadie intente pulsarlo.
   ========================================================================= */
.aprende-reja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.aprende-reja .clave {
  font-family: var(--mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--violeta);
  margin-bottom: 16px;
}
/* Qué mira: una línea con icono por cosa, y lo que se repite en violeta */
.observa { list-style: none; margin: 0; padding: 0; }
.observa li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--filete);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--tinta-2);
}
.observa li:last-child { border-bottom: 0; }
.observa-icono {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1.5px solid var(--filete);
  border-radius: 9px;
  background: var(--papel-alto);
  color: var(--violeta);
}
.observa-icono svg { width: 18px; height: 18px; }
.observa em { font-style: normal; font-weight: 700; color: var(--violeta); }
.observa-pie { margin-top: 20px; font-size: .93rem; line-height: 1.5; color: var(--tinta-2); }
.observa-pie strong { color: var(--tinta); }

/* --- CÓMO APRENDE, DIBUJADO -------------------------------------------
   La línea se completa y los puntos se encienden a su paso. Todo CSS: ni
   una imagen, ni una librería. Se queda quieta y entera con
   prefers-reduced-motion. */
.aprendizaje { margin: 26px 0 0; }
.via-aprende {
  position: relative;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.via-aprende .pista {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--filete);
}
.via-aprende .avance {
  position: absolute;
  left: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  width: 0;
  background: var(--violeta);
  animation: completar 5.2s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes completar {
  0%        { width: 0;    opacity: 1; }
  78%, 92%  { width: 100%; opacity: 1; }
  100%      { width: 100%; opacity: 0; }
}
.via-aprende .punto {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--papel);
  border: 2px solid var(--filete);
  animation: encender-punto 5.2s linear infinite;
  animation-delay: calc(var(--i) * .52s);
}
@keyframes encender-punto {
  0%, 1%   { background: var(--papel);   border-color: var(--filete); }
  3%, 88%  { background: var(--violeta); border-color: var(--violeta); }
  100%     { background: var(--papel);   border-color: var(--filete); }
}
.aprendizaje figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* --- LA FICHA DE SUGERENCIA · flotante --------------------------------- */
.sugerencia { margin: 0; }
.sugerencia > figcaption {
  font-family: var(--mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--violeta);
  margin-bottom: 16px;
}
.ficha-sugerencia {
  position: relative;
  background: var(--papel-alto);
  border: 1px solid var(--filete);
  border-radius: var(--radio-lamina);
  padding: 24px 24px 22px;
  box-shadow: 0 1px 0 rgba(23,22,26,.05), 0 20px 34px -24px rgba(23,22,26,.65);
}
.ficha-icono {
  position: absolute;
  top: -20px; left: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--violeta);
  color: #fff;
}
.ficha-icono svg { width: 21px; height: 21px; }
.ficha-cejilla {
  font-family: var(--mono);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  background: var(--acido);
  color: var(--tinta);
  display: inline-block;
  padding: 3px 8px 2px;
  margin: 12px 0 14px;
}
.ficha-que { font-size: 1.08rem; line-height: 1.35; }
.ficha-que b { font-family: var(--mono); font-size: .95rem; letter-spacing: -.04em; }
.ficha-porque {
  margin-top: 8px;
  font-size: .9rem;
  color: var(--violeta);
  font-weight: 600;
}
.ficha-acciones {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--filete);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.falso-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  background: var(--tinta);
  color: var(--papel-alto);
  font-size: .9rem;
  font-weight: 700;
}
.falso-boton--hueco { background: transparent; color: var(--tinta); }

/* --- LA INSIGNIA · lo que NO lleva dentro, en corto -------------------- */
.insignia {
  margin-top: clamp(34px, 4vw, 54px);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--papel-alto);
  border: 1px solid var(--filete);
  border-radius: var(--radio-lamina);
  padding: 20px 24px;
  max-width: 84ch;
  font-size: .97rem;
  line-height: 1.55;
  color: var(--tinta-2);
}
.insignia strong { color: var(--tinta); }
.insignia-icono {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--violeta);
  color: #fff;
}
.insignia-icono svg { width: 20px; height: 20px; }

/* =========================================================================
   Encaja contigo si · sobre tinta
   ========================================================================= */
.senales { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.senal {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.22);
  font-size: 1rem;
  color: rgba(255,255,255,.8);
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.senal strong { color: var(--acido); font-weight: 700; }
.senal .marca-orden {
  font-family: var(--mono);
  font-size: .6rem;
  color: rgba(255,255,255,.45);
  flex: 0 0 auto;
}

/* =========================================================================
   TODO CONECTADO · la cadena, que es el argumento
   Seis bloques que se pueden tocar: cada uno abre en dos líneas qué es y
   cómo funciona en el sistema. Plano, como el resto: bloques, filetes e
   inversión de color. Ni una sombra ni un degradado.
   ========================================================================= */
.cadena { position: relative; }

.cadena-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.eslabon {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 92px;
  padding: 14px 14px 16px;
  border: 2px solid rgba(255,255,255,.45);
  background: transparent;
  color: #fff;
  font-family: var(--texto-f);
  text-align: left;
  cursor: pointer;
  transition: background .14s linear, color .14s linear, border-color .14s linear, transform .14s ease;
  /* Entran uno detrás de otro cuando la sección asoma */
  opacity: 0;
  transform: translateY(10px);
}
.cadena.visto .eslabon {
  animation: entrar-eslabon .45s cubic-bezier(.16,.86,.26,1) forwards;
}
.cadena.visto li:nth-child(1) .eslabon { animation-delay: .04s; }
.cadena.visto li:nth-child(2) .eslabon { animation-delay: .10s; }
.cadena.visto li:nth-child(3) .eslabon { animation-delay: .16s; }
.cadena.visto li:nth-child(4) .eslabon { animation-delay: .22s; }
.cadena.visto li:nth-child(5) .eslabon { animation-delay: .28s; }
.cadena.visto li:nth-child(6) .eslabon { animation-delay: .34s; }
@keyframes entrar-eslabon { to { opacity: 1; transform: none; } }

.eslabon .orden {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: -.02em;
  color: var(--acido);
  transition: color .14s linear;
}
.eslabon .nombre {
  font-family: var(--titular);
  font-weight: 800;
  font-stretch: 108%;
  font-size: 1.02rem;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.eslabon:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.eslabon.activo {
  background: var(--acido);
  border-color: var(--acido);
  color: var(--tinta);
  transform: translateY(-3px);
}
.eslabon.activo .orden { color: var(--tinta); }

/* El hilo que los cose: se dibuja al llegar */
.cadena .hilo {
  display: block;
  height: 2px;
  margin-top: 14px;
  background: var(--acido);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s cubic-bezier(.16,.8,.3,1) .3s;
}
.cadena.visto .hilo { transform: scaleX(1); }

/* El detalle: dos líneas, y no salta la maqueta al cambiar de eslabón */
.cadena .detalles { margin-top: 24px; min-height: 108px; }
.cadena .detalle { max-width: 68ch; }
.cadena .detalle[hidden] { display: none; }
.cadena .detalle h3 {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--acido);
  margin-bottom: 10px;
}
.cadena .detalle p {
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  line-height: 1.45;
  color: rgba(255,255,255,.84);
}
.cadena .detalle strong { color: #fff; }
.cadena .detalle:not([hidden]) { animation: abrir-detalle .3s ease forwards; }
@keyframes abrir-detalle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.flujo-cierre {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.32);
  font-size: .99rem;
  line-height: 1.55;
  max-width: 76ch;
  color: rgba(255,255,255,.78);
}
.flujo-cierre strong { color: #fff; }

/* =========================================================================
   Cómo se empieza · el número dice algo: es una secuencia de verdad
   ========================================================================= */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.hito { padding: 0 24px 0 0; border-right: 1px solid var(--filete); position: relative; }
/* La flecha entre pasos: esto es un proceso, no cuatro tarjetas sueltas */
.hito:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 10px;
  right: -9px;
  font-family: var(--mono);
  font-size: .9rem;
  line-height: 1;
  color: var(--violeta);
  background: var(--papel);
  padding: 4px 2px;
}
.hito:last-child { border-right: 0; padding-right: 0; }
.hito:not(:first-child) { padding-left: 24px; }
.hito .cuenta {
  font-family: var(--titular);
  font-size: 3.4rem;
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--violeta);
  display: block;
  border-bottom: 3px solid var(--tinta);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.hito h3 { margin-bottom: 8px; }
.hito p { font-size: .93rem; color: var(--tinta-2); }

/* =========================================================================
   Planes
   ========================================================================= */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 3px solid var(--tinta); }
.plan {
  padding: 26px 24px 26px;
  border-right: 3px solid var(--tinta);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.plan:last-child { border-right: 0; }
.plan--destacado { background: var(--violeta); color: #fff; }
/* El marbete va al lado del nombre, no encima: encima empujaba esa tarjeta
   hacia abajo y los tres precios dejaban de estar a la misma altura. */
.plan-cabeza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan .marbete {
  font-family: var(--mono);
  font-size: .56rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  background: var(--acido);
  color: var(--tinta);
  padding: 4px 8px 3px;
  white-space: nowrap;
}
.plan h3 { font-size: 1.7rem; font-weight: 800; font-stretch: 114%; }
.plan .que { font-size: .93rem; color: var(--tinta-2); min-height: 4em; }
.plan--destacado .que { color: rgba(255,255,255,.8); }
.precio { display: flex; align-items: baseline; gap: 5px; padding-top: 6px; }
.precio .n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.075em;
}
/* El € va aparte del número: en monoespaciada el espacio entre los dos es
   enorme a este cuerpo, y así el número sigue siendo tabular sin trampas. */
.precio .eur { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; margin-left: 3px; }
.precio .u { font-size: .82rem; color: var(--tinta-2); margin-left: 2px; }
.plan--destacado .precio .u { color: rgba(255,255,255,.72); }
/* EL CONMUTADOR MES / AÑO
   El año también se dice AL MES —nadie compara 3.900 con 390—, así que lo
   que cambia es el número grande, no la unidad: el «/mes» se queda. El total
   del año no desaparece, se muda al renglón de arriba, porque redondear a
   dos decimales significa que multiplicar por doce no da el total y quien lo
   multiplique tiene que encontrar el número bueno.
   Los seis números los da el motor, con la misma expresión que usa
   fn_ui_suscripcion: round(precio * (12 - meses_gratis) / 12, 2). */
/* El rótulo se parte en dos: el texto a la izquierda y el conmutador pegado
   al borde derecho del contenedor —justo encima de la tercera tarjeta—, con
   los dos apoyados en la misma línea de abajo. */
.rotulo--con-conmutador {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px 36px;
  flex-wrap: wrap;
}
.rotulo--con-conmutador .rotulo-texto { flex: 1 1 26ch; }

.conmutador {
  display: inline-flex;
  border: 2px solid var(--tinta);
}
.conmutador button {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  /* 44 px de alto: es lo que hace falta para tocarlo con el dedo sin fallar */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: background .12s linear, color .12s linear;
}
.conmutador button + button { border-left: 2px solid var(--tinta); }
.conmutador button:hover { background: var(--filete); }
.conmutador button.activo { background: var(--tinta); color: var(--papel-alto); }

/* Sin JavaScript se queda lo mensual, que es lo que se ve por defecto. */
.planes .v-ano { display: none; }
.planes.al-ano .v-mes { display: none; }
.planes.al-ano .v-ano { display: inline; }
.antes .v-ano b { color: var(--tinta); }
.plan--destacado .antes .v-ano b { color: #fff; }

.antes { font-family: var(--mono); font-size: .64rem; letter-spacing: -.03em; text-transform: uppercase; color: var(--tinta-2); }
.plan--destacado .antes { color: rgba(255,255,255,.75); }
.antes s { text-decoration-thickness: 1px; }
.antes b { color: var(--violeta); }
.plan--destacado .antes b { color: var(--acido); }

/* La banda de plazas: es la condición de la oferta, así que se ve. Y además
   LLEVA AL CONTACTO: quien lee «sólo para los 30 primeros» y quiere una es
   justo el que tiene que escribir, y hasta ahora no tenía dónde pinchar. */
.plan .plazas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 44px;          /* se toca con el dedo */
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  border: 2px solid var(--tinta);
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .14s linear, color .14s linear;
}
.plan .plazas b { font-weight: 700; }
.plan .plazas .flecha { transition: transform .14s ease; }
.plan .plazas:hover { background: var(--tinta); color: var(--papel-alto); }
.plan .plazas:hover .flecha { transform: translateX(3px); }
.plan--destacado .plazas { border-color: var(--acido); color: var(--acido); }
.plan--destacado .plazas:hover { background: var(--acido); color: var(--tinta); }

/* Lo que trae el plan, en números */
.datos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.datos li {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-size: .87rem;
  line-height: 1.35;
  color: var(--tinta-2);
}
.plan--destacado .datos li { color: rgba(255,255,255,.82); }
.datos li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  background: var(--violeta);
  transform: translateY(-2px);
}
.plan--destacado .datos li::before { background: var(--acido); }
.datos b { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: var(--tinta); font-weight: 500; }
.plan--destacado .datos b { color: #fff; }

/* --- QUÉ ENTRA · las veinticuatro, dentro de cada plan ----------------- */
.prestaciones {
  margin: 0;
  padding: 14px 0 0;
  border-top: 2px solid var(--tinta);
  list-style: none;
  display: flex;
  flex-direction: column;
}
.plan--destacado .prestaciones { border-top-color: rgba(255,255,255,.45); }
.prestaciones li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  font-size: .87rem;
  line-height: 1.3;
}
.prestaciones li::before {
  flex: 0 0 12px;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.2;
}
.prestaciones .entra::before { content: "✓"; color: var(--violeta); font-weight: 700; }
/* El «no incluido» también informa: se distingue por el guion y por el
   color del ✓, no por dejarlo ilegible. Ambos pasan de 4,5:1. */
.prestaciones .fuera::before { content: "–"; color: #666360; }
.prestaciones .fuera { color: #666360; }
.plan--destacado .prestaciones .entra::before { content: "✓"; color: var(--acido); }
.plan--destacado .prestaciones .fuera::before { color: rgba(255,255,255,.62); }
.plan--destacado .prestaciones .fuera { color: rgba(255,255,255,.62); }

.plan .boton { margin-top: auto; }
.plan--destacado .boton { background: var(--acido); border-color: var(--acido); color: var(--tinta); }
.plan--destacado .boton:hover { background: transparent; color: var(--acido); }

.letra-chica { margin-top: 24px; font-size: .95rem; line-height: 1.55; max-width: 78ch; color: var(--tinta-2); }
.letra-chica strong { color: var(--tinta); }

.marca-pendiente {
  font-family: var(--mono);
  font-size: .58rem;
  color: var(--tinta);
  background: var(--acido);
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: 1px;
}

/* La nota de lo que aún no sale solo, con banda de aviso */
.nota-pendiente {
  margin-top: 20px;
  display: flex;
  gap: 0;
  border: 2px solid var(--tinta);
  max-width: 82ch;
}
.nota-pendiente .banda {
  flex: 0 0 14px;
  background: repeating-linear-gradient(-45deg, var(--acido) 0 7px, var(--tinta) 7px 14px);
}
.nota-pendiente p { padding: 14px 18px; font-size: .92rem; line-height: 1.5; }

/* =========================================================================
   Blog · fichas de artículo. La misma retícula de una ficha de catálogo.
   ========================================================================= */
.rejilla-articulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.rejilla-articulos--dos { grid-template-columns: repeat(2, 1fr); }
.ficha-articulo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 26px 28px 0;
  border-right: 1px solid var(--filete);
  text-decoration: none;
  transition: background .14s linear, color .14s linear;
}
.ficha-articulo:last-child { border-right: 0; }
.ficha-articulo:not(:first-child) { padding-left: 26px; }
.ficha-articulo:hover { background: var(--violeta); color: #fff; }
.ficha-articulo .meta {
  font-family: var(--mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--tinta-2);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ficha-articulo:hover .meta { color: rgba(255,255,255,.75); }
.ficha-articulo h3 { font-size: 1.3rem; max-width: 20ch; }
.ficha-articulo p { font-size: .94rem; color: var(--tinta-2); }
.ficha-articulo:hover p { color: rgba(255,255,255,.85); }
.ficha-articulo .seguir { margin-top: auto; font-weight: 700; font-size: .9rem; }
.ficha-articulo .seguir::after { content: " →"; }

/* --- El artículo ------------------------------------------------------- */
.articulo { padding-block: clamp(36px, 5vw, 64px) 0; }
.articulo-cabeza { border-bottom: 3px solid var(--tinta); padding-bottom: clamp(24px, 3vw, 38px); }
.articulo-cabeza h1 { font-size: clamp(2.2rem, 5.4vw, 4.1rem); max-width: 20ch; margin-top: 16px; }
.articulo-cabeza .menor { margin-top: 18px; }
.articulo-cabeza .entradilla { margin-top: 22px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 500; max-width: 60ch; line-height: 1.45; }

.cuerpo { max-width: 66ch; padding-block: clamp(30px, 4vw, 48px) var(--aire); font-size: 1.06rem; line-height: 1.66; }
.cuerpo > * + * { margin-top: 1.15em; }
.cuerpo h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.9em; }
.cuerpo h3 { font-size: 1.15rem; margin-top: 1.6em; }
.cuerpo ul, .cuerpo ol { padding-left: 1.2em; }
.cuerpo li + li { margin-top: .45em; }
.cuerpo li::marker { color: var(--violeta); font-weight: 700; }
.cuerpo a { color: var(--violeta); text-underline-offset: 3px; }
.cuerpo blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  border-left: 6px solid var(--violeta);
  background: var(--papel-alto);
  font-size: 1.02rem;
}
.cuerpo blockquote p + p { margin-top: .8em; }
.cuerpo .apunte {
  border: 2px solid var(--tinta);
  padding: 18px 20px;
  font-size: .96rem;
  background: var(--papel-alto);
}
.cuerpo .apunte b { display: block; font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 8px; color: var(--violeta); }
.cuerpo table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cuerpo th, .cuerpo td { border-bottom: 1px solid var(--filete); padding: 9px 10px; text-align: left; }
.cuerpo thead th { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; background: var(--tinta); color: var(--papel-alto); border-bottom: 0; }

.cierre-articulo { border-top: 3px solid var(--tinta); padding-block: clamp(30px, 4vw, 46px); }

/* =========================================================================
   Contacto
   ========================================================================= */
.cierre { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
.cierre h2 { max-width: 12ch; }
.cierre .lede { margin-top: 22px; color: rgba(255,255,255,.85); }
.contacto-directo { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.contacto-directo a {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: -.03em;
  color: var(--acido);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color .14s linear;
}
.contacto-directo a:hover { border-bottom-color: var(--acido); }

form.impreso { background: var(--papel-alto); color: var(--tinta); padding: 26px clamp(20px, 3vw, 28px) 28px; display: flex; flex-direction: column; gap: 15px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-family: var(--mono); font-size: .6rem; letter-spacing: -.02em; text-transform: uppercase; color: var(--tinta-2); }
.campo input, .campo textarea {
  font-family: var(--texto-f);
  font-size: 1rem;
  color: var(--tinta);
  background: #fff;
  border: 2px solid var(--tinta);
  padding: 11px 13px;
  min-height: 48px;
  transition: box-shadow .12s linear, border-color .12s linear;
}
.campo textarea { resize: vertical; min-height: 100px; line-height: 1.45; }
.campo input::placeholder, .campo textarea::placeholder { color: #8d8b93; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--violeta); box-shadow: inset 0 0 0 2px var(--violeta); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--rojo); }
.campo .error { font-size: .84rem; font-weight: 600; color: var(--rojo); }
.campo .error:empty { display: none; }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
form.impreso .boton { background: var(--violeta); border-color: var(--violeta); color: #fff; }
form.impreso .boton:hover { background: transparent; color: var(--violeta); }

.resumen-errores { border: 2px solid var(--rojo); padding: 14px 16px; }
.resumen-errores h3 { font-size: 1rem; margin-bottom: 6px; color: var(--rojo); }
.resumen-errores ul { margin: 0; padding-left: 18px; font-size: .9rem; }
.resumen-errores li { margin-top: 3px; }
.resumen-errores a { color: var(--rojo); }

.aviso-envio { font-size: .88rem; line-height: 1.5; color: var(--tinta-2); border-left: 4px solid var(--violeta); padding-left: 12px; }
.aviso-envio strong { color: var(--tinta); }
.aviso-envio.malo { border-left-color: var(--rojo); color: var(--tinta); }

/* =========================================================================
   Pie
   ========================================================================= */
.pie { background: var(--tinta); color: var(--papel-alto); padding-block: 42px 48px; font-size: .88rem; }
.pie .contenedor { display: flex; justify-content: space-between; gap: 26px 44px; flex-wrap: wrap; align-items: flex-start; }
.pie .marca { color: var(--papel-alto); }
.pie .marca i { color: var(--acido); }
.pie a { color: rgba(255,255,255,.72); text-decoration: none; }
.pie a:hover { color: var(--acido); }
.pie-enlaces { display: flex; flex-direction: column; gap: 8px; }
.pie-nota { max-width: 46ch; line-height: 1.55; color: rgba(255,255,255,.6); margin-top: 12px; }

/* =========================================================================
   Páginas de texto (aviso legal, privacidad)
   ========================================================================= */
.texto-legal { padding-block: 48px 84px; max-width: 70ch; }
.texto-legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 12px; }
.texto-legal h2 { font-size: 1.4rem; margin-top: 42px; margin-bottom: 12px; }
.texto-legal p, .texto-legal li { font-size: 1rem; line-height: 1.65; color: var(--tinta-2); }
.texto-legal p + p { margin-top: 14px; }
.texto-legal ul { padding-left: 20px; }
.texto-legal li::marker { color: var(--violeta); }
.texto-legal .hueco {
  font-family: var(--mono);
  font-size: .82em;
  letter-spacing: -.03em;
  background: var(--acido);
  color: var(--tinta);
  padding: 1px 6px;
}
.aviso-borrador { border: 3px solid var(--tinta); padding: 18px 20px; margin-bottom: 34px; background: var(--papel-alto); }
.aviso-borrador p { color: var(--tinta); font-size: .96rem; }

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

/* =========================================================================
   Tableta y teléfono
   ⚠ SIEMPRE "screen and": un max-width a secas también se aplica al
   imprimir, y saca la maqueta del móvil por la impresora.
   ========================================================================= */
@media screen and (max-width: 1000px) {
  .tres { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .hito:nth-child(2) { border-right: 0; padding-right: 0; }
  .hito:nth-child(3) { padding-left: 0; }
  .hito:nth-child(3) { border-right: 1px solid var(--filete); padding-right: 24px; }
  .hito:nth-child(4) { padding-left: 24px; }
  .rejilla-articulos { grid-template-columns: 1fr 1fr; }
  .ficha-articulo:nth-child(2) { border-right: 0; }
  .ficha-articulo:nth-child(3) { border-top: 1px solid var(--filete); padding-left: 0; padding-top: 26px; }
}

@media screen and (max-width: 820px) {
  .planes { grid-template-columns: 1fr; }
  .plan { border-right: 0; border-bottom: 3px solid var(--tinta); }
  .plan:last-child { border-bottom: 0; }
  .plan .que { min-height: 0; }
  .cierre { grid-template-columns: 1fr; }
}

@media screen and (max-width: 700px) {
  .marca { font-size: 1.5rem; gap: 9px; }
  .marca img { width: 30px; height: 30px; border-radius: 9px; }
  body { font-size: 16.5px; }
  .contenedor { width: min(100% - 28px, var(--ancho)); }
  .menu a:not(.boton) { display: none; }
  .tres, .pasos, .senales, .dos-campos, .rejilla-articulos, .rejilla-articulos--dos { grid-template-columns: 1fr; }
  /* Las fichas de razones ya son bloques sueltos: sólo se apilan. */
  .hito, .ficha-articulo {
    border-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--filete);
    padding-bottom: 26px;
  }
  .hito:last-child, .ficha-articulo:last-child { border-bottom: 0; }
  .hito:nth-child(3), .ficha-articulo:nth-child(3) { border-top: 0; margin-top: 0; }
  .hito { padding-top: 24px; }
  .hito .cuenta { font-size: 2.6rem; }
  .senal { padding: 14px 0; }
  .acciones .boton { flex: 1 1 100%; }
  .sellos span { border-right: 0; margin-right: 0; padding: 7px 0; width: 100%; }
  /* La copia calco en el teléfono: si se deja como tabla, las dos columnas
     que llevan el mensaje —el precio y quién lo escribe— se quedan fuera de
     la pantalla y sólo se ve la referencia. Se apila. */
  .marco-calco { overflow-x: visible; }
  /* `table.hoja-calco` y no `.hoja-calco`: la regla de arriba lleva el
     elemento en el selector y gana por especificidad, así que el
     min-width de 520 px se quedaba puesto y la tabla seguía desbordando. */
  table.hoja-calco { display: block; min-width: 0; font-size: .72rem; }
  .hoja-calco thead { display: none; }
  .hoja-calco tbody { display: block; }
  .hoja-calco tr { display: block; padding: 12px 0; }
  .hoja-calco td { display: inline; padding: 0; text-align: left; white-space: normal; }
  .hoja-calco td.doc { display: block; font-size: 1rem; margin-bottom: 3px; }
  .hoja-calco td.num::before { content: " · "; }
  .hoja-calco td.quien { display: block; margin-top: 5px; }

  /* La captura entera a 390 px es un sello de correos y no se lee nada. Se
     recorta: fuera el menú de la izquierda y la cabecera, y se amplía la
     lista, que es lo que hay que ver. Los números salen de la propia
     imagen: el menú ocupa 333 de 1440, y la lista empieza en el 90. */
  .demo-cabeza { grid-template-columns: 1fr; margin-bottom: 24px; }

  /* La cadena en el teléfono: dos columnas de tres. Con seis nombres cortos
     cabe, y una sola columna dejaba la sección larguísima. */
  .aprende-reja { grid-template-columns: 1fr; }
  .cadena-lista { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .eslabon { min-height: 76px; padding: 12px; }
  .eslabon .nombre { font-size: .95rem; }
  .cadena .detalles { min-height: 132px; }
  .flujo-cierre { margin-top: 30px; }

  /* Y las flechas del proceso de alta, también */
  .hito:not(:last-child)::after {
    content: "↓";
    top: auto; right: auto;
    bottom: -14px; left: 0;
  }
  /* El paspartú se aprieta: a 390 px no hay 14 px de aire que gastar */
  .placa::after { inset: -10px; border-radius: 21px; }
  .leyenda { margin-top: 20px; }
  .captura--portada { --ancho-grande: 100%; }
  .placa .marco { aspect-ratio: 2327 / 1000; }
  /* Las de la sección de producto llevan más contenido vertical, pero el
     recorte no puede pasar del 93 % de alto o entra el distintivo del
     servidor de desarrollo. 16/10 es justo el tope. */
  .demo .marco { aspect-ratio: 16 / 10; }
  /* Se mueve EL LIENZO, no la imagen: así las señales viajan con ella. */
  .placa .lienzo {
    width: 120.5%;         /* el menú ocupa el 17 % de la imagen: se aparta */
    margin-left: -20.5%;
    margin-top: -4.5%;     /* y la barra superior de la aplicación, el 6,3 % */
  }
  .leyenda { font-size: .58rem; gap: 7px 16px; }
  .entra-tabla td { width: 80px; }
}

/* =========================================================================
   Quien no quiere movimiento no lo tiene, y lo ve todo entero.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .entra, .asoma { opacity: 1; transform: none; }
  .hoja-calco tbody tr { opacity: 1; }
  .rotulo .filete { transform: scaleX(1); }
  .portada h1 .alza { transform: none; }
  .via-aprende .avance { width: 100%; opacity: 1; }
  .via-aprende .punto { background: var(--violeta); border-color: var(--violeta); }
  .eslabon { opacity: 1; transform: none; }
  .eslabon.activo { transform: none; }
  .cadena .hilo { transform: scaleX(1); }
  /* La retícula y las marcas de corte se quedan: son dibujo, no movimiento.
     Los filetes que cruzan sí se van, porque sólo existen para moverse. */
  .aire .filete-vuela { display: none; }
}

/* =========================================================================
   Impresión · esto es papel de todas formas
   ========================================================================= */
@media print {
  body { background: #fff; color: #000; font-size: 10pt; }
  .barra, .acciones, form.impreso, .contacto-directo, .sellos { display: none; }
  .violeta, .oscuro, .calco, .plan--destacado { background: #fff !important; color: #000 !important; }
  .calco, .plan--destacado, .entra-tabla .grupo th { border: 1px solid #000; }
  .entra-tabla thead th, .entra-tabla .grupo th, .entra-tabla .grupo td { background: #fff !important; color: #000 !important; }
  .hoja-calco tbody tr, .asoma, .entra { opacity: 1 !important; }
  .cejilla { background: #fff; color: #000; border: 1px solid #000; }
}

/* La trampa para robots del formulario: fuera de la vista y del tabulador,
   pero en el HTML para quien lo rellena todo sin mirar. No es display:none,
   que algunos robots saben saltarse. */
.trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================================
   El aviso de cookies · 01/11/2026 · lo pinta consentimiento.js
   -------------------------------------------------------------------------
   Aceptar y Rechazar llevan LA MISMA clase a propósito: rechazar tiene que
   costar lo mismo que aceptar, también a la vista. Una hoja más de la casa:
   filete grueso, sin radio y sin sombra.
   ========================================================================= */
.aviso-cookies {
  position: fixed;
  z-index: 60;
  right: 16px;
  bottom: 16px;
  left: 16px;
  max-width: 560px;
  margin-inline: auto;
  padding: 18px 20px;
  border: 3px solid var(--tinta);
  background: var(--papel-alto);
  color: var(--tinta);
}
.aviso-cookies p { font-size: .92rem; line-height: 1.5; color: var(--tinta-2); }
.aviso-cookies a { color: var(--violeta); }
.aviso-cookies-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.aviso-cookies .boton { min-height: 44px; padding: 8px 14px; }

.pie-cookies {
  padding: 0;
  border: 0;
  background: none;
  color: var(--violeta);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.pie .pie-cookies { color: rgba(255,255,255,.72); text-decoration: none; }
.pie .pie-cookies:hover { color: var(--acido); }
.pie-cookies:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }