/* ============================================================
   DecaClick — sistema de diseño
   Dirección: editorial suizo oscuro, tipografía monumental,
   el formulario tratado como el documento oficial (papel sobre tinta).
   Tokens → base → componentes → motion. Sin frameworks.
   ============================================================ */

/* ---------- Fuentes (autohospedadas, subset latín) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* color — tinta cálida (familia Oryzo: near-black cálido + un acento) */
  --tinta: #0f0c08;
  --tinta-2: #17120c;
  --papel: #f2efe9;
  --papel-2: #eae6dd;
  --blanco: #fbfaf7;
  --mica: #a09a90;
  --mica-2: #675f55;
  --verde: #2fbf62;        /* acento sobre tinta */
  --verde-tinta: #15803d;  /* acento sobre papel */
  --rojo: #e5484d;
  --ambar: #d9a13b;
  --linea: rgba(242, 239, 233, 0.14);
  --linea-fuerte: rgba(242, 239, 233, 0.32);
  --linea-papel: rgba(15, 12, 8, 0.18);
  --linea-papel-suave: rgba(15, 12, 8, 0.09);

  /* tipografía */
  --f-sans: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --display: clamp(3.4rem, 11.5vw, 10rem);
  --titulo: clamp(2rem, 5vw, 4.2rem);
  --sub: clamp(1.05rem, 1.6vw, 1.3rem);
  --cuerpo: 1.0625rem;
  --meta: 0.75rem;

  /* espacio y ritmo */
  --margen: clamp(1.25rem, 5vw, 5.5rem);
  --seccion: clamp(6rem, 14vh, 12rem);
  --radio: 2px;

  /* motion */
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 200ms;
  --dur-reveal: 800ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--f-sans);
  font-size: var(--cuerpo);
  line-height: 1.6;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--verde); color: var(--tinta); }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
img { max-width: 100%; display: block; }

.margen { padding-inline: var(--margen); }

/* etiqueta mono de expediente */
.meta {
  font-family: var(--f-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mica);
}
.meta .indice { color: var(--verde); margin-right: 0.75em; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem var(--margen);
}
.logo {
  font-weight: 740;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.logo span { color: var(--verde); }
.cabecera .chip {
  font-family: var(--f-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mica);
  border: 1px solid var(--linea);
  padding: 0.55em 0.9em;
  border-radius: 99px;
  white-space: nowrap;
}
.cabecera .chip strong { color: var(--papel); font-weight: 500; }
.cabecera .ir-form {
  font-family: var(--f-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  background: var(--verde);
  padding: 0.7em 1.1em;
  border-radius: 99px;
  transition: background var(--dur-micro) var(--salida);
}
.cabecera .ir-form:hover { background: var(--papel); }
.nav-cuenta { display: flex; align-items: center; gap: 1.2rem; }
.enlace-nav {
  font-family: var(--f-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mica);
  transition: color var(--dur-micro);
}
.enlace-nav:hover { color: var(--papel); }
@media (max-width: 700px) { .cabecera .chip { display: none; } }

/* ---------- Hero ---------- */
.hero {
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8rem var(--margen) 0;
}
.hero .kicker { margin-bottom: clamp(1.5rem, 4vh, 3rem); max-width: 62ch; }
.hero .kicker .regla {
  display: block;
  width: 3rem; height: 1px;
  background: var(--verde);
  margin-bottom: 1rem;
}
.hero h1 {
  margin: 0;
  font-size: var(--display);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 700;
  font-variation-settings: 'wdth' 94;
  text-wrap: balance;
}
.hero h1 .fina { font-weight: 340; color: var(--mica); }
.hero h1 .verde { color: var(--verde); }

.hero .bajo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: clamp(2rem, 5vh, 3.5rem) 0 2rem;
}
.hero .entrada {
  max-width: 44ch;
  font-size: var(--sub);
  line-height: 1.55;
  color: var(--mica);
  margin: 0;
}
.hero .entrada strong { color: var(--papel); font-weight: 600; }

/* cuenta atrás como objeto */
.cuenta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.cuenta .numero {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--papel);
}
.cuenta .detalle { max-width: 11em; line-height: 1.7; }

/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
  white-space: nowrap;
  padding: 0.9rem 0;
  display: flex;
}
.marquee .tira {
  display: inline-flex;
  gap: 3rem;
  padding-right: 3rem;
  animation: marquesina 28s linear infinite;
  flex-shrink: 0;
  min-width: 100%;
  justify-content: space-around;
}
.marquee .tira span { color: var(--mica); }
.marquee .tira b { color: var(--verde); font-weight: 500; }
@keyframes marquesina { to { transform: translateX(-100%); } }

/* ---------- Sección genérica ---------- */
.seccion { padding-block: var(--seccion); }
.seccion-cabeza { margin-bottom: clamp(2.5rem, 7vh, 5rem); }
/* h1 y h2: la cabecera de sección se ve igual lleve el titular de la página
   (h1, como en /precios) o el de un bloque interior (h2). */
.seccion-cabeza h1,
.seccion-cabeza h2 {
  margin: 0.6em 0 0;
  font-size: var(--titulo);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 680;
  text-wrap: balance;
  max-width: 20ch;
}

/* La cifra del plan gratuito, pegada al titular: es el argumento comercial
   más fuerte y estaba solo en la FAQ y en los datos estructurados. */
.entrada-cuota {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--linea, rgba(242,239,233,.18));
  line-height: 1.6;
}
.entrada-cuota strong { color: var(--papel, inherit); font-weight: 620; }

/* ---------- El documento (formulario como papel) ---------- */
.generador { padding-block: clamp(3rem, 8vh, 6rem) var(--seccion); }
.documento {
  background: var(--papel);
  color: var(--tinta);
  max-width: 880px;
  margin-inline: auto;
  border-radius: var(--radio);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px rgba(0,0,0,0.55);
}
.documento-cabeza {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--linea-papel);
}
.documento-cabeza .meta { color: var(--mica-2); }
.documento-cabeza .meta.ok { color: var(--verde-tinta); }
.documento-cuerpo { padding: clamp(1.5rem, 4vw, 2.75rem); }

fieldset { border: 0; padding: 0; margin: 0 0 2.4rem; }
fieldset:last-of-type { margin-bottom: 1.6rem; }
legend {
  width: 100%;
  padding: 0 0 0.65rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--linea-papel);
  font-family: var(--f-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mica-2);
}
legend .indice { color: var(--verde-tinta); margin-right: 0.75em; }
.hint {
  font-size: 0.8125rem;
  color: var(--mica-2);
  margin: -0.8rem 0 1rem;
}

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1.1rem 0 0.4rem;
}
label .opcional { font-weight: 400; color: var(--mica-2); font-size: 0.8em; }

input[type="text"], input[type="email"], input[type="date"],
input[type="password"], input[type="search"], input[type="tel"], textarea, select {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* evita zoom iOS */
  padding: 0.8rem 0.9rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea-papel);
  border-radius: var(--radio);
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
}
/* El select nativo no hereda el estilo de los inputs: se iguala aquí y se le
   pone una flecha propia (la del sistema desentona con el tema). */
select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23675f55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18);
}
input.mayusculas { text-transform: uppercase; font-family: var(--f-mono); letter-spacing: 0.06em; }
input.invalido { border-color: var(--rojo); }
.error-campo { display: none; color: var(--rojo); font-size: 0.8125rem; margin-top: 0.35rem; }
input.invalido + .error-campo, .mostrar-error { display: block; }

.fila-doble { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; }
@media (min-width: 640px) { .fila-doble { grid-template-columns: 1fr 1fr; } }

.alternativa { font-size: 0.8125rem; margin: 0.6rem 0 0; }
.alternativa a { color: var(--verde-tinta); text-underline-offset: 3px; }

details.mas-opciones { margin: 0 0 2.4rem; border-top: 1px solid var(--linea-papel-suave); border-bottom: 1px solid var(--linea-papel-suave); }
details.mas-opciones summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 0;
  font-family: var(--f-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mica-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.mas-opciones summary::-webkit-details-marker { display: none; }
details.mas-opciones summary::after { content: '+'; font-size: 1.1rem; color: var(--verde-tinta); }
details.mas-opciones[open] summary::after { content: '\2212'; }
details.mas-opciones > :last-child { padding-bottom: 1.4rem; }

/* botón principal: bloque de tinta */
.boton {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--tinta);
  color: var(--papel);
  font: inherit;
  font-weight: 620;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  border: 0;
  border-radius: var(--radio);
  padding: 1.15rem 1.3rem;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-micro) var(--salida), color var(--dur-micro) var(--salida);
}
.boton .flecha { font-family: var(--f-mono); transition: transform var(--dur-micro) var(--salida); }
.boton:hover { background: var(--verde-tinta); color: var(--blanco); }
.boton:hover .flecha { transform: translateX(4px); }
.boton.contorno {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--linea-papel);
}
.boton.contorno:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.nota-form {
  font-size: 0.78rem;
  color: var(--mica-2);
  text-align: center;
  margin: 1rem 0 0;
  line-height: 1.6;
  text-wrap: balance;   /* reparte las líneas por igual: nada de palabras huérfanas */
}
/* Nota en dos filas centradas con el mismo aire entre ellas */
.nota-form-doble {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.2rem;
}
.nota-form-doble span { display: block; text-wrap: balance; }

/* mensajes */
.caja-errores, .caja-avisos {
  border-radius: var(--radio);
  padding: 1rem 1.2rem;
  margin-bottom: 1.6rem;
  font-size: 0.9rem;
  line-height: 1.55;
}
.caja-errores { background: rgba(229, 72, 77, 0.08); border: 1px solid rgba(229, 72, 77, 0.35); color: #b3282d; }
.caja-avisos { background: rgba(217, 161, 59, 0.1); border: 1px solid rgba(217, 161, 59, 0.4); color: #8a6116; }
.caja-errores ul, .caja-avisos ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* ---------- Éxito (expediente emitido) ---------- */
.exito-titulo {
  margin: 0 0 0.4em;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.exito-sub { color: var(--mica-2); margin: 0 0 2rem; max-width: 52ch; }
.acciones { display: grid; gap: 0.8rem; margin: 0 0 1.6rem; }
@media (min-width: 640px) { .acciones { grid-template-columns: 1fr 1fr; } }
.enlace-doc { display: flex; gap: 0.6rem; margin-bottom: 0.8rem; }
.enlace-doc input {
  flex: 1;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--mica-2);
  background: var(--papel-2);
}
.enlace-doc .boton { width: auto; padding: 0.8rem 1.1rem; font-size: 0.9rem; }
.boton.whatsapp { background: #128c4b; color: #fff; }
.boton.whatsapp:hover { background: var(--tinta); }
.aviso-conservar {
  border: 1px solid var(--linea-papel);
  border-left: 3px solid var(--verde-tinta);
  border-radius: var(--radio);
  padding: 1.1rem 1.3rem;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 2rem;
}
/* Recordatorio de la Resolución: las anotaciones manuscritas no valen. */
.nota-manuscrita {
  margin-top: 1.2rem;
  font-size: 0.78rem;
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}
.nota-manuscrita strong { opacity: 1; }
.otra-vez { margin-top: 2rem; font-size: 0.9rem; }
.otra-vez a { color: var(--verde-tinta); text-underline-offset: 3px; }

/* ---------- Bloques editoriales (confianza) ---------- */
.fila-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem 2rem;
  padding: 2.2rem 0;
  border-top: 1px solid var(--linea);
}
@media (min-width: 900px) {
  .fila-editorial { grid-template-columns: 8rem 1fr 1.4fr; align-items: start; }
}
.fila-editorial:last-child { border-bottom: 1px solid var(--linea); }
.fila-editorial h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 660;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.fila-editorial p { margin: 0; color: var(--mica); max-width: 58ch; }
.fila-editorial p strong { color: var(--papel); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.6rem 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color var(--dur-micro);
}
.faq summary:hover { color: var(--verde); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--f-mono);
  font-weight: 400;
  color: var(--verde);
  flex-shrink: 0;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p {
  margin: 0;
  padding: 0 0 1.8rem;
  color: var(--mica);
  max-width: 68ch;
}

/* ---------- CTA final ---------- */
.cta-final { text-align: center; }
.cta-final .meta { margin-bottom: 1.2rem; display: block; }
.cta-final h2 {
  margin: 0 0 2rem;
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.cta-final .boton { display: inline-flex; width: auto; background: var(--verde); color: var(--tinta); padding: 1.1rem 2rem; }
.cta-final .boton:hover { background: var(--papel); }

/* ---------- Pie con peso ---------- */
.pie { border-top: 1px solid var(--linea); padding: clamp(3rem, 8vh, 5rem) var(--margen) 2rem; }
/* La marca del pie va en BLANCO sólido, decisión de Roberto del 29-ago-2026.
   Antes era tinta-2 con un contorno de 1 px: a ese tamaño la línea desaparecía
   y parecía suciedad de renderizado, no un contorno. En blanco pesa mucho más
   —es el elemento más fuerte de la página—, así que si algún día hay que
   bajarle el volumen, se hace aquí con la opacidad y no tocando nada más. */
.pie .marca {
  font-size: clamp(4rem, 16vw, 15rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-variation-settings: 'wdth' 92;
  color: var(--papel);
  user-select: none;
  margin: 0 0 2.5rem;
}
.pie .filas {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.pie .filas a { color: var(--mica); text-decoration: none; transition: color var(--dur-micro); }
.pie .filas a:hover { color: var(--papel); }
.pie .aviso { margin-top: 1.6rem; font-size: 0.78rem; color: var(--mica-2); max-width: 70ch; }

/* ---------- Páginas de cuenta (login, registro, reset) ---------- */
.pagina-cuenta {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 7rem var(--margen) 4rem;
}
.tarjeta-cuenta {
  background: var(--papel);
  color: var(--tinta);
  width: 100%;
  max-width: 460px;
  border-radius: var(--radio);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px rgba(0,0,0,0.55);
}
.titulo-cuenta {
  margin: 0 0 0.5rem;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.entradilla-cuenta {
  margin: 0 0 1.6rem;
  color: var(--mica-2);
  font-size: 0.95rem;
  line-height: 1.55;
}
.entradilla-cuenta a { color: var(--verde-tinta); }
.bajo-tarjeta {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--mica);
  max-width: 460px;
}
.bajo-tarjeta a { color: var(--verde); text-underline-offset: 3px; }
.caja-ok {
  background: rgba(47, 191, 98, 0.1);
  border: 1px solid rgba(47, 191, 98, 0.4);
  color: #157f3f;
  border-radius: var(--radio);
  padding: 1rem 1.2rem;
  margin-bottom: 1.6rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.caja-ok a { color: inherit; font-weight: 600; }
.enlace-menor {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--mica-2);
  text-underline-offset: 3px;
}

/* ---------- Precios ---------- */
.oferta-lanzamiento {
  display: block;
  max-width: 46ch;
  margin: 0 0 1.6rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--verde);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--papel);
}
.oferta-lanzamiento strong { color: var(--verde); }
.oferta-lanzamiento code {
  font-family: var(--f-mono);
  font-size: 0.85em;
  letter-spacing: 0.08em;
  padding: 0.15em 0.45em;
  background: var(--verde);
  color: var(--tinta);
}

.conmutador {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: 4px;
  margin-bottom: 2.5rem;
}
.conmutador a {
  font-family: var(--f-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mica);
  padding: 0.6em 1.1em;
  border-radius: 99px;
  transition: background var(--dur-micro), color var(--dur-micro);
}
.conmutador a:hover { color: var(--papel); }
.conmutador a.activo { background: var(--verde); color: var(--tinta); }
.conmutador a em { font-style: normal; opacity: 0.75; }

.rejilla-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.plan {
  background: var(--tinta);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan.destacado { background: var(--tinta-2); }
.plan .cinta {
  position: absolute;
  top: 0; right: 0;
  background: var(--verde);
  color: var(--tinta);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45em 0.8em;
}
.plan h3 {
  margin: 0 0 0.3rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.plan-resumen {
  margin: 0 0 1.4rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mica);
  min-height: 2.6em;
}
.plan-precio { margin: 0 0 1.4rem; }
.plan-precio strong {
  display: block;
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan-precio .periodo {
  font-family: var(--f-mono);
  font-size: var(--meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mica-2);
}
.plan-precio .antes {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--mica-2);
  text-decoration: line-through;
}
.plan-precio .equivale {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--verde);
}
.plan .boton { font-size: 0.95rem; padding: 0.9rem 1.1rem; }
.plan .boton.contorno { color: var(--papel); border-color: var(--linea-fuerte); }
.plan .boton.contorno:hover { background: var(--papel); color: var(--tinta); }
.plan-lista {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.45;
}
.plan-lista li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.5rem;
  border-top: 1px solid var(--linea);
  color: var(--papel);
}
.plan-lista li:first-child { border-top: 0; }
.plan-lista li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--verde);
  font-size: 0.85em;
}
.plan-lista li.no { color: var(--mica-2); }
.plan-lista li.no::before { content: '—'; color: var(--mica-2); }

/* El ✓ y el — son contenido generado por CSS: no existen como texto. Quien lee
   la página sin estilos —un lector de pantalla, un buscador, un asistente de
   IA— veía la misma lista en los cuatro planes y no podía saber qué entra en
   cada uno. Esta etiqueta lo dice con palabras, sin tocar el diseño.
   (Detectado el 18-ago-2026: ChatGPT leyó la página y concluyó que el plan
   Gratis incluía API, Excel y multiempresa.) */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.nota-precios { margin-top: 1.6rem; text-align: center; }
.nota-correcciones { margin: 0 0 1.2rem; color: var(--mica); }
.nota-correcciones strong { color: var(--verde); }

/* ---------- Panel ---------- */
/* padding-block, no shorthand: la clase .margen aporta el padding lateral */
.panel { padding-block: 8rem var(--seccion); }

/* Avisos sobre fondo oscuro (el .caja-avisos base está pensado para el papel) */
.panel .caja-avisos {
  background: rgba(217, 161, 59, 0.12);
  border-color: rgba(217, 161, 59, 0.45);
  color: #e5b761;
}
.panel .caja-ok {
  background: rgba(47, 191, 98, 0.12);
  border-color: rgba(47, 191, 98, 0.4);
  color: var(--verde);
}
.panel .caja-avisos .boton.contorno { color: var(--papel); border-color: var(--linea-fuerte); }
.panel .caja-avisos .boton.contorno:hover { background: var(--papel); color: var(--tinta); }
.panel-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.titulo-panel {
  margin: 0.5rem 0 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.salir { text-decoration: none; transition: color var(--dur-micro); }
.salir:hover { color: var(--papel); }

.contadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 2rem;
}
.contador { background: var(--tinta); padding: 1.4rem 1.5rem; }
.contador .numero {
  display: block;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.contador .numero small { font-size: 0.45em; color: var(--mica); font-weight: 500; }

.buscador { display: flex; gap: 0.6rem; margin-bottom: 2rem; }
.buscador input {
  flex: 1;
  font: inherit;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  color: var(--papel);
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.buscador input::placeholder { color: var(--mica-2); }
.buscador input:focus { outline: none; border-color: var(--verde); }
.buscador .boton { width: auto; color: var(--papel); border-color: var(--linea); }
.buscador .boton:hover { background: var(--papel); color: var(--tinta); }

.tabla-decas { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabla-decas th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mica-2);
  padding: 0 0.8rem 0.8rem 0;
  border-bottom: 1px solid var(--linea);
}
.tabla-decas td {
  padding: 1rem 0.8rem 1rem 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}
.tabla-decas tbody tr { transition: background var(--dur-micro); }
.tabla-decas tbody tr:hover { background: var(--tinta-2); }
.tabla-decas .mono { font-family: var(--f-mono); font-size: 0.85rem; letter-spacing: 0.04em; }
.tabla-decas .mica { color: var(--mica-2); }
.acciones-fila { white-space: nowrap; }
.acciones-fila a {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--verde);
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: 0.4em 0.8em;
  margin-left: 0.4rem;
  transition: background var(--dur-micro), color var(--dur-micro);
}
.acciones-fila a:hover { background: var(--verde); color: var(--tinta); border-color: var(--verde); }
.etiqueta {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mica);
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: 0.35em 0.7em;
  white-space: nowrap;
}
.etiqueta.activa { color: var(--verde); border-color: rgba(47, 191, 98, 0.4); }
.etiqueta.caducada { color: var(--mica-2); }
.nota-tabla { margin-top: 1.2rem; }

@media (max-width: 760px) {
  .tabla-decas thead { display: none; }
  .tabla-decas, .tabla-decas tbody, .tabla-decas tr, .tabla-decas td { display: block; width: 100%; }
  .tabla-decas tr { border-bottom: 1px solid var(--linea); padding: 1rem 0; }
  .tabla-decas td { border: 0; padding: 0.15rem 0; }
  .tabla-decas .acciones-fila { margin-top: 0.7rem; }
  .acciones-fila a { margin: 0 0.4rem 0 0; }
}

.texto-panel { color: var(--mica); max-width: 66ch; margin-bottom: 1.8rem; }
.texto-panel strong { color: var(--papel); }
.form-export { max-width: 460px; }
.form-export label { color: var(--papel); }
.form-export input[type="date"] { background: var(--tinta-2); color: var(--papel); border-color: var(--linea); }
.form-export .boton { color: var(--tinta); background: var(--verde); }
.form-export .boton:hover { background: var(--papel); }

.nav-panel { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.nav-panel a { text-decoration: none; color: var(--mica); transition: color var(--dur-micro); }
.nav-panel a:hover { color: var(--papel); }
.nav-panel a.actual { color: var(--papel); }
.nav-panel a.actual::before { content: "\2014\00a0"; color: var(--verde); }

.sub-panel {
  margin: 3rem 0 1.2rem;
  font-size: 1.3rem;
  font-weight: 660;
  letter-spacing: -0.02em;
}
.sub-panel .meta { font-weight: 400; text-transform: none; letter-spacing: 0.04em; }
.vacio-linea { color: var(--mica); font-size: 0.92rem; max-width: 60ch; }

.acciones-fila a.destacada { color: var(--tinta); background: var(--verde); border-color: var(--verde); }
.acciones-fila a.destacada:hover { background: var(--papel); border-color: var(--papel); }
.enlace-borrar {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mica-2);
  background: none;
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: 0.4em 0.8em;
  margin-left: 0.4rem;
  cursor: pointer;
  transition: color var(--dur-micro), border-color var(--dur-micro);
}
.enlace-borrar:hover { color: var(--rojo); border-color: var(--rojo); }

/* Envíos agrupados */
.envio {
  border-left: 2px solid var(--linea-papel);
  padding-left: 1rem;
  margin-bottom: 1.4rem;
}
.envio:first-child:last-child { border-left: 0; padding-left: 0; }
.envio-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.envio-cabeza .meta { color: var(--verde-tinta); }
#lista-envios.uno-solo .envio-cabeza { display: none; }
.quitar-envio {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mica-2);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.2em 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quitar-envio:hover { color: var(--rojo); }

/* Elección de método de modificación */
.opcion-metodo {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid var(--linea-papel);
  border-radius: var(--radio);
  padding: 1rem 1.1rem;
  margin: 0 0 0.8rem;
  cursor: pointer;
  font-weight: 400;
  transition: border-color var(--dur-micro), background var(--dur-micro);
}
.opcion-metodo:hover { border-color: var(--tinta); }
.opcion-metodo input { margin-top: 0.25rem; accent-color: var(--verde-tinta); width: 18px; height: 18px; flex-shrink: 0; }
.opcion-metodo:has(input:checked) { border-color: var(--verde-tinta); background: rgba(21, 128, 61, 0.06); }
.opcion-metodo strong { display: block; font-size: 1rem; margin-bottom: 0.2rem; }
.opcion-metodo em {
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mica-2);
}

/* Plantillas rápidas sobre el formulario */
.tira-plantillas {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.5rem;
}
.chip-plantilla {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: 99px;
  padding: 0.5em 0.9em;
  transition: background var(--dur-micro), color var(--dur-micro);
}
.chip-plantilla:hover { background: var(--verde); color: var(--tinta); border-color: var(--verde); }
.chip-plantilla.gestionar { color: var(--mica-2); border-style: dashed; }

.vacio {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(2rem, 6vw, 4rem);
  text-align: center;
}
.vacio h2 {
  margin: 0.8rem 0 0.6rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  font-weight: 680;
}
.vacio p { color: var(--mica); margin: 0 0 1.6rem; }

/* ---------- Página de error (404 / 410) ---------- */
.error-pagina {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--margen);
}
.error-pagina .codigo {
  font-size: clamp(6rem, 26vw, 20rem);
  font-weight: 760;
  line-height: 0.85;
  letter-spacing: -0.04em;
  margin: 0 0 1.5rem;
  color: var(--tinta-2);
  -webkit-text-stroke: 1.5px var(--linea-fuerte);
}
.error-pagina p { color: var(--mica); max-width: 44ch; }
.error-pagina a { color: var(--verde); }

/* ---------- Motion: reveals ---------- */
.linea-mascara { display: block; overflow: hidden; }
.linea-mascara > span {
  display: block;
  transform: translateY(115%);
  transition: transform var(--dur-reveal) var(--salida);
}
.cargado .linea-mascara > span { transform: translateY(0); }
.linea-mascara:nth-child(2) > span { transition-delay: 90ms; }
.linea-mascara:nth-child(3) > span { transition-delay: 180ms; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--salida), transform var(--dur-reveal) var(--salida);
  transition-delay: var(--retardo, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Lenis (smooth scroll) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Intro reveal ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.9rem;
  cursor: pointer;
}
.intro .linea-log {
  font-family: var(--f-mono);
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mica);
  opacity: 0;
}
.intro .linea-log b { color: var(--verde); font-weight: 500; }
.intro .barra {
  width: min(280px, 60vw);
  height: 1px;
  background: var(--linea);
  margin-top: 1.2rem;
  position: relative;
  overflow: hidden;
}
.intro .barra i {
  position: absolute;
  inset: 0;
  background: var(--verde);
  transform: scaleX(0);
  transform-origin: left;
}
html.intro-hecha .intro { display: none; }

/* ---------- El documento como objeto (la hoja) ---------- */
.escenario {
  perspective: 1400px;
  perspective-origin: 50% 40%;
}
.hoja {
  --hoja-ancho: clamp(240px, 30vw, 360px);
  width: var(--hoja-ancho);
  aspect-ratio: 210 / 297;
  background: var(--papel);
  color: var(--tinta);
  border-radius: 3px;
  padding: calc(var(--hoja-ancho) * 0.055);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 60px 140px rgba(0, 0, 0, 0.4);
  transform-style: preserve-3d;
  will-change: transform;
  user-select: none;
}
.hoja * { pointer-events: none; }
.hoja-cabecera { display: flex; justify-content: space-between; gap: 6%; }
.hoja-titulo {
  font-weight: 740;
  font-size: calc(var(--hoja-ancho) * 0.052);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 62%;
}
.hoja-titulo small {
  display: block;
  margin-top: 0.5em;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.55em;
  letter-spacing: 0.08em;
  color: var(--mica-2);
  text-transform: uppercase;
}
.hoja-qr { width: 26%; flex-shrink: 0; }
.hoja-qr svg { width: 100%; height: auto; display: block; }
.hoja-url {
  font-family: var(--f-mono);
  font-size: calc(var(--hoja-ancho) * 0.026);
  color: var(--mica-2);
  margin-top: 0.4em;
  text-align: right;
  word-break: break-all;
}
.hoja-sello {
  display: inline-block;
  margin-top: calc(var(--hoja-ancho) * 0.04);
  font-family: var(--f-mono);
  font-size: calc(var(--hoja-ancho) * 0.028);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-tinta);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.45em 0.7em;
}
.hoja-bloque { margin-top: calc(var(--hoja-ancho) * 0.045); }
.hoja-bloque .rotulo {
  font-family: var(--f-mono);
  font-size: calc(var(--hoja-ancho) * 0.026);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mica-2);
  border-bottom: 1px solid var(--linea-papel);
  padding-bottom: 0.5em;
  margin-bottom: 0.7em;
}
.hoja-bloque .rotulo b { color: var(--verde-tinta); font-weight: 500; margin-right: 0.6em; }
.hoja-linea {
  height: calc(var(--hoja-ancho) * 0.022);
  border-radius: 99px;
  background: var(--linea-papel-suave);
  margin-bottom: 0.55em;
}
.hoja-linea.corta { width: 62%; }
.hoja-linea.media { width: 80%; }
.hoja-pie {
  position: absolute;
  left: calc(var(--hoja-ancho) * 0.055);
  right: calc(var(--hoja-ancho) * 0.055);
  bottom: calc(var(--hoja-ancho) * 0.05);
  font-family: var(--f-mono);
  font-size: calc(var(--hoja-ancho) * 0.022);
  color: var(--mica-2);
  display: flex;
  justify-content: space-between;
  gap: 1em;
  border-top: 1px solid var(--linea-papel-suave);
  padding-top: 0.8em;
}
.hoja { position: relative; }

/* hero con la hoja */
.hero-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-rejilla { grid-template-columns: 1.25fr 0.75fr; }
  .hero-rejilla .escenario { justify-self: center; }
}
@media (max-width: 999px) {
  .hero-rejilla .escenario { display: flex; justify-content: center; }
  .hoja { --hoja-ancho: clamp(210px, 52vw, 300px); }
}

/* ---------- Escena scroll-telling ---------- */
.escena { position: relative; }
.escena-viewport {
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.escena .escenario { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.escena .hoja { --hoja-ancho: clamp(250px, 34vh, 400px); }
.callouts { position: absolute; inset: 0; pointer-events: none; }
.callout {
  position: absolute;
  max-width: 34ch;
  opacity: 0;
}
.callout .num {
  font-family: var(--f-mono);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--verde);
  display: block;
  margin-bottom: 0.6rem;
}
.callout h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--papel);
}
.callout p { margin: 0; color: var(--mica); font-size: 0.95rem; line-height: 1.55; }
.callout-1 { left: var(--margen); top: 16%; }
.callout-2 { right: var(--margen); top: 18%; text-align: right; }
.callout-3 { left: var(--margen); bottom: 16%; }
.callout-4 { right: var(--margen); bottom: 18%; text-align: right; }
@media (max-width: 800px) {
  .callout { max-width: 26ch; }
  .callout h3 { font-size: 1.15rem; }
  .callout p { font-size: 0.82rem; }
  .callout-1, .callout-3 { left: 1rem; }
  .callout-2, .callout-4 { right: 1rem; }
  .callout-1 { top: 6%; } .callout-2 { top: 8%; }
  .callout-3 { bottom: 6%; } .callout-4 { bottom: 8%; }
  .escena .hoja { --hoja-ancho: clamp(200px, 30vh, 280px); }
}

/* Fallback sin motion: mismo layout legible que reduced-motion, activado por
   JS si GSAP/Lenis no están disponibles. */
html.sin-motion .intro { display: none !important; }
html.sin-motion .callout { opacity: 1; position: static; text-align: left; max-width: 40ch; margin: 1.5rem var(--margen); }
html.sin-motion .escena .escenario { position: static; display: flex; justify-content: center; }
html.sin-motion .escena-viewport { height: auto; flex-direction: column; padding: 3rem 0; gap: 2rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .linea-mascara > span, .reveal { transform: none !important; opacity: 1 !important; transition: none !important; }
  .marquee .tira { animation: none; }
  .intro { display: none !important; }
  .callout { opacity: 1; position: static; text-align: left; max-width: 40ch; margin: 1.5rem var(--margen); }
  .escena .escenario { position: static; display: flex; justify-content: center; }
  .escena-viewport { height: auto; flex-direction: column; padding: 3rem 0; gap: 2rem; }
  * { transition-duration: 1ms !important; }
}

/* ---------- PWA: invitación a instalar ----------
   Barra inferior, discreta, una sola vez. En el móvil el pulgar vive abajo. */
.instalar-app {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  background: var(--tinta-2);
  color: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
  max-width: 46rem;
  margin-inline: auto;
}
.instalar-app.visible { opacity: 1; transform: none; }
.instalar-texto { display: flex; flex-direction: column; gap: .25rem; }
.instalar-texto strong { font-size: .98rem; }
.instalar-texto .meta { text-transform: none; letter-spacing: 0; opacity: .75; }
.instalar-botones { display: flex; gap: .6rem; }
.instalar-app .boton { width: auto; padding: .6rem 1.1rem; font-size: .85rem; }
/* La barra es oscura: el botón lleno pasa a verde y el de contorno se dibuja
   en papel — los estilos base están pensados para fondo papel y aquí se perdían. */
.instalar-app .boton:not(.contorno) { background: var(--verde); color: var(--tinta); }
.instalar-app .boton:not(.contorno):hover { background: var(--papel); }
.instalar-app .boton.contorno { color: var(--papel); border-color: var(--linea-fuerte); }
.instalar-app .boton.contorno:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
@media (max-width: 560px) {
  .instalar-app { flex-direction: column; align-items: stretch; }
  .instalar-botones { justify-content: stretch; }
  .instalar-app .boton { flex: 1; justify-content: center; }
}

/* ---------- Vista de inspección (móvil del conductor) ----------
   Una mano, a contraluz, con prisa: QR grande, matrícula enorme, nada más. */
.vista-inspeccion { background: var(--papel); color: var(--tinta); }
.inspeccion {
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.6rem var(--margen) 3rem;
}
.inspeccion .meta { color: var(--mica-2); }
.inspeccion .meta .indice { color: var(--verde-tinta); }
.inspeccion-qr {
  margin: 1.2rem 0 .8rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--linea-papel);
  border-radius: var(--radio);
}
.inspeccion-qr img { width: 100%; height: auto; image-rendering: pixelated; }
.inspeccion-url {
  font-size: .72rem;
  word-break: break-all;
  color: var(--mica-2);
  margin: 0 0 1.6rem;
}
.inspeccion-datos { margin: 0 0 1.6rem; }
.inspeccion-datos > div {
  padding: .85rem 0;
  border-top: 1px solid var(--linea-papel-suave);
}
.inspeccion-datos dt {
  font-family: var(--f-mono);
  font-size: var(--meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mica-2);
  margin-bottom: .25rem;
}
.inspeccion-datos dd { margin: 0; line-height: 1.45; }
.inspeccion-datos dd.grande { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; }
.inspeccion-datos .mica { color: var(--mica-2); font-size: .9rem; }
.vista-inspeccion .boton { width: 100%; justify-content: center; }
.inspeccion-nota { text-transform: none; letter-spacing: 0; margin-top: 1.2rem; line-height: 1.7; }

/* ---------- Casilla ADR (recordatorio, no es un campo del art. 6) ---------- */
.casilla-adr {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.2rem;
  font-weight: 600;
  cursor: pointer;
}
.casilla-adr input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--verde-tinta);
  margin: 0;
}
/* El aviso solo aparece al marcarla; si el navegador no soporta :has, se ve siempre. */
.hint-adr { display: none; }
.casilla-adr:has(input:checked) + .hint-adr { display: block; }
@supports not selector(:has(*)) {
  .hint-adr { display: block; }
}


/* ---------- Páginas legales ----------
   Texto largo tratado como documento: medida corta, jerarquía clara y tablas
   que se leen igual en el móvil que impresas. */
.legal { max-width: 46rem; padding-block: 9rem 5rem; }
.titulo-legal {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 740;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0.6rem 0 1.2rem;
}
.entradilla-legal { font-size: 1.15rem; color: var(--mica); max-width: 34rem; margin-bottom: 2.5rem; }
.legal h2 {
  font-size: 1.45rem;
  font-weight: 660;
  letter-spacing: -0.02em;
  margin: 3rem 0 0.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea);
}
.legal h3 { font-size: 1.08rem; font-weight: 620; margin: 1.8rem 0 0.5rem; }
.legal p { margin-bottom: 1rem; line-height: 1.65; color: var(--mica); }
.legal p strong, .legal li strong { color: var(--papel); font-weight: 560; }
.legal a { color: var(--verde); }
.lista-legal { margin: 0 0 1.2rem 0; padding: 0; list-style: none; }
.lista-legal li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.6rem;
  line-height: 1.6;
  color: var(--mica);
}
.lista-legal li::before { content: "—"; position: absolute; left: 0; color: var(--verde); }
.tabla-legal { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: 0.95rem; }
.tabla-legal th, .tabla-legal td {
  text-align: left;
  padding: 0.75rem 0.9rem 0.75rem 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
  color: var(--mica);
}
.tabla-legal th {
  font-family: var(--f-mono);
  font-size: var(--meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--papel);
}
.legal-hermanas { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 3.5rem 0 1.2rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); }
.legal-hermanas a { color: var(--mica); text-decoration: none; }
.legal-hermanas a:hover { color: var(--papel); }
@media (max-width: 700px) {
  .legal { padding-block-start: 7rem; }
  .tabla-legal { font-size: 0.88rem; }
  .tabla-legal th, .tabla-legal td { padding-right: 0.5rem; }
}

.filas-legal { margin-top: .9rem; opacity: .75; }
.filas-recursos { margin-top: .9rem; }


/* ---------- Caja de producto dentro de un artículo ---------- */
.caja-producto {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--verde);
  padding: 1.8rem;
  margin: 3rem 0;
  background: rgba(47, 191, 98, 0.05);
}
.caja-producto .meta { margin-bottom: 0.8rem; display: block; }
.caja-producto h3 { font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 0.6rem; }
.caja-producto p { color: var(--mica); margin: 0 0 1.4rem; }
.caja-producto strong { color: var(--papel); font-weight: 560; }
.caja-producto .boton { display: inline-flex; width: auto; background: var(--verde); color: var(--tinta); }
.caja-producto .boton:hover { background: var(--papel); }
@media (max-width: 700px) { .caja-producto { padding: 1.3rem; margin: 2.2rem 0; } }

.migas { max-width: 46rem; margin-inline: auto; padding-top: 7.5rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.migas a { color: var(--mica); text-decoration: none; }
.migas a:hover { color: var(--papel); }
.migas span:last-child { color: var(--papel); }
/* más específico que .articulo, que se declara después y traería sus 7rem */
.migas + article.articulo { padding-top: 1.5rem; }


/* ---------- Landings de intención de compra ---------- */
.landing { max-width: 46rem; margin-inline: auto; padding-block: 1.5rem var(--seccion); }
.landing-cabeza { padding-bottom: 2.5rem; border-bottom: 1px solid var(--linea); }
.landing-cabeza h1 {
  margin: .8rem 0 1.2rem;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 760;
}
.entradilla-landing { font-size: 1.2rem; color: var(--mica); line-height: 1.5; margin-bottom: 2rem; max-width: 34rem; }
.landing-cabeza .boton { display: inline-flex; width: auto; background: var(--verde); color: var(--tinta); }
.landing-cabeza .boton:hover { background: var(--papel); }
.bajo-boton { margin-top: .9rem; }
.landing-bloque { padding-block: 2.4rem; border-bottom: 1px solid var(--linea); }
.landing-bloque h2 {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 700;
  margin-bottom: 1rem;
}
.landing-bloque p { color: var(--mica); line-height: 1.65; margin-bottom: 1rem; }
.landing-bloque strong { color: var(--papel); font-weight: 560; }
.lista-landing { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: paso; }
.lista-landing li { position: relative; padding-left: 1.4rem; margin-bottom: .7rem; color: var(--mica); line-height: 1.6; }
.lista-landing li::before { content: "—"; position: absolute; left: 0; color: var(--verde); }
/* Lo que se vende pero aún no existe va etiquetado, no callado (app/planes.php). */
.etiqueta-pendiente { display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
  border: 1px solid var(--verde); border-radius: 2px; font-family: var(--f-mono);
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--verde); white-space: nowrap; vertical-align: .08em; }
/* En la página de la app hay una lista de «esto sí / esto no». El texto ya lo
   dice con palabras —que es lo que leen los buscadores— y esto lo separa
   también a la vista. */
.lista-landing li.no { color: var(--mica-2); }
.lista-landing li.no::before { content: "\00d7"; color: var(--mica-2); }

.lista-landing.numerada li { padding-left: 2.1rem; }
.lista-landing.numerada li::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: var(--meta);
  color: var(--verde);
  top: .15em;
}
/* Tabla de la comparativa: los números tienen que poder leerse en un móvil
   sin que la página entera se desplace en horizontal. */
.tabla-scroll { overflow-x: auto; margin-bottom: 1rem; }
.tabla-comparativa { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 34rem; }

/* Embudo del panel de analítica. La cifra va siempre en texto al lado de la
   barra: la barra es el adorno, el número es el dato. */
.embudo { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.embudo li {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  gap: .75rem; align-items: center; font-size: .88rem;
}
.embudo-barra { display: block; height: .75rem; background: rgba(255,255,255,.07); }
.embudo-barra > span { display: block; height: 100%; background: var(--verde); }
.embudo-cifra { white-space: nowrap; font-variant-numeric: tabular-nums; }
.embudo-cifra em { font-style: normal; margin-left: .5rem; }
@media (max-width: 46rem) {
  .embudo li { grid-template-columns: 1fr auto; }
  .embudo-barra { grid-column: 1 / -1; order: 3; }
}

/* Rejilla de confianza de la portada: seis puertas a las páginas que mira
   quien está decidiendo. Tarjetas enteras clicables, sin enlaces sueltos
   dentro, que en móvil son una trampa para el dedo. */
.rejilla-confianza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.tarjeta-confianza {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.6rem 1.4rem;
  background: var(--tinta);
  text-decoration: none; color: inherit;
  transition: background .25s ease;
}
.tarjeta-confianza:hover,
.tarjeta-confianza:focus-visible { background: rgba(242, 239, 233, 0.045); }
.tarjeta-confianza strong { font-size: 1.02rem; line-height: 1.3; font-weight: 620; }
.tarjeta-confianza .flecha { transition: transform .25s ease; display: inline-block; }
.tarjeta-confianza:hover .flecha { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .tarjeta-confianza, .tarjeta-confianza .flecha { transition: none; }
}

/* Estado del servicio: el color acompaña, pero la palabra ya lo dice sola
   («Correcto», «Incidencia», «Desconocido»), así que no hay información
   que dependa solo del color. */
.estado-correcto { color: var(--verde); }
.estado-incidencia { color: #b91c1c; }
.estado-desconocido { color: var(--tinta-suave, inherit); }
.tabla-comparativa th, .tabla-comparativa td {
  text-align: left;
  vertical-align: top;
  padding: .8rem .9rem .8rem 0;
  border-bottom: 1px solid var(--linea);
}
.tabla-comparativa thead th {
  font-family: var(--f-mono);
  font-size: var(--meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mica-2);
  font-weight: 500;
}
.tabla-comparativa tbody th { color: var(--papel); font-weight: 560; width: 30%; }
.tabla-comparativa td strong { color: var(--verde); font-weight: 560; }

.landing-faq { padding-block: 2.4rem; }
.landing-faq h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 1.2rem; }
.landing-faq details { border-bottom: 1px solid var(--linea); padding: 1rem 0; }
.landing-faq summary { cursor: pointer; font-weight: 560; color: var(--papel); }
.landing-faq details p { color: var(--mica); margin-top: .7rem; line-height: 1.6; }
.landing-otras { display: flex; flex-direction: column; gap: .7rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); }
.landing-otras a { color: var(--papel); text-decoration: none; font-weight: 560; }
.landing-otras a:hover { color: var(--verde); }


/* ---------- Banner de analítica ----------
   Discreto y abajo: pregunta una vez, se recuerda la respuesta y no vuelve. */
.banner-cookies {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: var(--tinta-2, #17130d);
  border: 1px solid var(--linea);
  padding: 1.1rem 1.3rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.banner-cookies[hidden] { display: none; }   /* el atributo manda sobre el display:flex de arriba */
.banner-cookies p { margin: 0; color: var(--mica); font-size: .95rem; line-height: 1.5; flex: 1 1 22rem; }
.banner-cookies a { color: var(--verde); }
.banner-botones { display: flex; gap: .6rem; flex-wrap: wrap; }
.banner-cookies .boton {
  width: auto;
  padding: .6rem 1.1rem;
  font-size: .85rem;
  background: var(--verde);
  color: var(--tinta);
}
.banner-cookies .boton.contorno { background: none; color: var(--papel); border: 1px solid var(--linea-fuerte, var(--linea)); }
.banner-cookies .boton.contorno:hover { background: var(--papel); color: var(--tinta); }
@media (max-width: 700px) {
  .banner-cookies { padding: 1rem; gap: .9rem; }
  .banner-botones { width: 100%; }
  .banner-cookies .boton { flex: 1; justify-content: center; }
}


/* ---------- Gráfico de barras de la analítica ---------- */
.barras { display: flex; align-items: flex-end; gap: 3px; height: 160px; margin: 1rem 0 .6rem; }
.barra { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.barra span { display: block; width: 100%; background: var(--verde); opacity: .75; transition: opacity var(--dur-micro); }
.barra:hover span { opacity: 1; }

.token-nuevo {
  display: block;
  margin: .8rem 0;
  padding: .8rem 1rem;
  background: var(--tinta);
  border: 1px solid var(--linea-fuerte, var(--linea));
  color: var(--verde);
  word-break: break-all;
  user-select: all;
}

.bloque-codigo {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--verde);
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  margin: 1rem 0 1.4rem;
}
.bloque-codigo code {
  font-family: var(--f-mono);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--papel);
  white-space: pre;
}

/* fin-estilo: centinela de integridad; qa.php comprueba que el CSS servido llega hasta aqui */

/* ---------- Blog ---------- */
.blog-listado { padding-top: 2rem; }
.blog-entrada { max-width: 52ch; color: var(--mica); font-size: var(--sub); line-height: 1.6; }
.blog-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: var(--seccion);
}
.blog-tarjeta {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.8rem 1.6rem;
  background: var(--tinta);
  text-decoration: none;
  transition: background var(--dur-micro);
}
.blog-tarjeta:hover { background: var(--tinta-2); }
.blog-tarjeta h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 650; }
.blog-tarjeta p { margin: 0; color: var(--mica); font-size: .95rem; line-height: 1.6; flex: 1; }
.blog-leer { color: var(--verde); font-family: var(--f-mono); font-size: var(--meta); letter-spacing: .12em; text-transform: uppercase; }
.blog-tarjeta:hover .flecha { transform: translateX(4px); }
.blog-tarjeta .flecha { display: inline-block; transition: transform var(--dur-micro) var(--salida); }

/* Artículo: prosa editorial, ancho de lectura, sobre tinta */
.articulo { max-width: 46rem; margin-inline: auto; padding-top: 7rem; padding-bottom: var(--seccion); }
.articulo-cabeza h1 {
  margin: .8rem 0 2.5rem;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.articulo-cuerpo { font-size: 1.0625rem; line-height: 1.75; }
.articulo-cuerpo .entradilla { font-size: 1.25rem; line-height: 1.6; color: var(--papel); font-weight: 480; }
.articulo-cuerpo p { color: #d8d3ca; margin: 0 0 1.4rem; }
.articulo-cuerpo h2 {
  margin: 2.6rem 0 1rem;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  font-weight: 660;
  color: var(--papel);
}
.articulo-cuerpo ul, .articulo-cuerpo ol { color: #d8d3ca; padding-left: 1.3rem; margin: 0 0 1.4rem; }
.articulo-cuerpo li { margin-bottom: .5rem; }
.articulo-cuerpo strong { color: var(--papel); }
.articulo-cta {
  margin-top: 3rem;
  padding: 2rem;
  border: 1px solid var(--linea-fuerte);
  border-left: 3px solid var(--verde);
  border-radius: var(--radio);
  background: var(--tinta-2);
}
.articulo-cta h2 { margin: .6rem 0 .4rem; font-size: 1.6rem; letter-spacing: -0.02em; }
.articulo-cta p { color: var(--mica); margin: 0 0 1.4rem; }
.articulo-cta .boton { width: auto; display: inline-flex; }
.articulo-descargo { margin-top: 2rem; text-transform: none; letter-spacing: 0; opacity: .6; }
.articulo-relacionados { display: flex; flex-direction: column; gap: .7rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); }
.articulo-relacionados a { color: var(--papel); text-decoration: none; font-weight: 560; }
.articulo-relacionados a:hover { color: var(--verde); }
.articulo-relacionados .todos { color: var(--verde); font-family: var(--f-mono); font-size: var(--meta); text-transform: uppercase; letter-spacing: .12em; margin-top: .5rem; }

/* Cabecera en móvil: Blog + Entrar + botón; "Precios" solo en pantallas anchas
   (sigue en el pie y en el propio flujo). */
@media (max-width: 700px) {
  .nav-cuenta { gap: 0.85rem; }
  .enlace-nav.solo-ancho { display: none; }
  .cabecera .ir-form { padding: 0.6em 0.9em; white-space: nowrap; }
}

/* ---------- Escena apilada (móvil y tablet) ----------
   Debajo de 1000px no hay scroll-telling con pin: el documento y sus notas se
   leen apilados, sin reservar pantallas de scroll vacías. Mismo criterio que el
   fallback sin-motion, aplicado también cuando el motion sí funciona. */
@media (max-width: 999px) {
  .escena-viewport,
  .escena-simple .escena-viewport {
    height: auto;
    min-height: 0;
    overflow: visible;
    flex-direction: column;
    gap: 2.5rem;
    padding-block: clamp(3rem, 8vh, 5rem);
  }
  .escena .escenario,
  .escena-simple .escenario {
    position: static;
    display: flex;
    justify-content: center;
  }
  .escena .hoja { --hoja-ancho: min(74vw, 320px); }
  .callouts,
  .escena-simple .callouts { position: static; display: grid; gap: 1.8rem; }
  .callout,
  .escena-simple .callout {
    opacity: 1;
    position: static;
    max-width: 42ch;
    text-align: left;
    margin-inline: var(--margen);
  }
  /* El marquee iba pegado al documento del hero */
  .marquee { margin-block: 2.5rem 0; }
}

/* --- Panel de gestoría (cartera de clientes) --- */
/* Los dos formularios de alta —uno a uno y por CSV— van lado a lado en
   escritorio y apilados en el móvil, que es donde se rellena el de uno a uno. */
.rejilla-formularios { display: grid; gap: 1rem; margin: 1.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla-formularios .formulario { margin: 0; }
.rejilla-formularios h2 { font-size: 1.05rem; margin: 0 0 .9rem; }
/* Un formulario de una sola acción dentro de una celda de tabla: sin salto. */
.en-linea { display: inline; }
/* Botón que parece enlace: para acciones destructivas menores (dar de baja),
   donde un botón de verdad pesaría más de lo que vale la acción. */
.enlace-boton { background: none; border: 0; padding: 0; margin: 0; width: auto;
  font: inherit; font-size: .82rem; color: var(--mica); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.enlace-boton:hover, .enlace-boton:focus-visible { color: var(--verde); }