/* ============================================================================
   AutomateK · sistema visual único (apartado 8 del encargo)
   Una sola hoja para las diez páginas. Nada se sirve desde fuera de este
   dominio y no hay ni un atributo style= en el HTML: la política de seguridad
   de _headers no permite 'unsafe-inline'.

   PASO BASE 8 px. Escala cerrada: 4 · 8 · 16 · 24 · 32 · 40 · 48 · 64 · 80 ·
   96 · 128. El 4 solo dentro de un componente pequeño. Única excepción: los
   bordes de 1 px.
   SEIS ESCALONES DE LETRA, en rem. Nada por debajo de 0,875rem.
   ========================================================================= */

:root{
  /* Paleta: un acento y el resto neutros */
  --papel:#FFFFFF;
  --superficie:#F5F5F7;
  --tinta:#101114;
  --secundario:#565D6B;
  --acento:#1C4BD8;
  --acento-tenue:#E9F0FF;
  --borde:#E3E4E8;
  --borde-campo:#767E8C;
  --correcto:#0B6B3E;
  --error:#B3261E;
  --oscuro:#0B0B0C;
  --oscuro-texto:#FFFFFF;
  --oscuro-secundario:#C9CCD4;
  --azul-oscuro:#1A71FF;

  /* Espaciado: la escala entera, y nada más */
  --e4:4px;  --e8:8px;   --e16:16px; --e24:24px; --e32:32px; --e40:40px;
  --e48:48px; --e64:64px; --e80:80px; --e96:96px; --e128:128px;

  /* Márgenes laterales, iguales en las diez páginas */
  --margen:16px;

  --radio-8:8px;
  --radio-16:16px;
  --pildora:999px;

  --sombra:0 1px 2px rgba(16,17,20,.06), 0 8px 24px rgba(16,17,20,.08);
  --curva:cubic-bezier(.2,0,0,1);

  --fuente-titulo:'General Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fuente-cuerpo:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fuente-dato:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (min-width:480px){ :root{ --margen:24px } }
@media (min-width:768px){ :root{ --margen:40px } }
@media (min-width:1280px){ :root{ --margen:56px } }

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html{
  /* Los colores de AutomateK se mantienen siempre: ni el modo oscuro del
     dispositivo ni el modo de alto contraste del sistema los sustituyen. Es una
     decisión de marca, y está declarada como tal en /legal (declaración de
     accesibilidad, apartado 2) y en SEGURIDAD.md (defecto A-02). */
  color-scheme:only light;
  forced-color-adjust:none;
  /* rem sobre raíz de 16 px: subir la letra del sistema sigue sirviendo */
  font-size:100%;
  scroll-padding-top:88px;
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--fuente-cuerpo);
  font-size:1rem;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-wrap:pretty;
}

@media (min-width:768px){ body{ font-size:1.125rem } }

svg{display:block}

a{color:var(--acento);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--acento);text-decoration-thickness:2px}

h1,h2,h3{font-family:var(--fuente-titulo);margin:0;text-wrap:balance}
.h1,.h2,.h3{overflow-wrap:anywhere}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* Los seis escalones. Ningún par se distingue solo por el color. */
.h1{font-size:2.75rem;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.h2{font-size:2rem;font-weight:700;line-height:1.1;letter-spacing:-.015em}
.h3{font-size:1.5rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.entradilla{font-size:1.25rem;font-weight:400;line-height:1.45}
.cuerpo{font-size:1rem;font-weight:400;line-height:1.6}
.etiqueta{
  font-family:var(--fuente-dato);
  font-size:.875rem;font-weight:600;line-height:1.4;
  text-transform:uppercase;letter-spacing:.08em;
  overflow-wrap:anywhere;
}

@media (min-width:768px){
  .h1{font-size:3.5rem}
  .h2{font-size:2.5rem}
  .h3{font-size:1.75rem}
  .entradilla{font-size:1.5rem}
  .cuerpo{font-size:1.125rem}
}

.secundario{color:var(--secundario)}
.acento{color:var(--acento)}
.medida{max-width:70ch}
.dato{font-family:var(--fuente-dato);font-size:.875rem;line-height:1.4}

/* ── Rejilla de página ────────────────────────────────────────────────── */

.env{
  width:100%;max-width:1200px;margin-inline:auto;
  padding-inline:var(--margen);
}

.seccion{padding-block:var(--e64)}
@media (min-width:768px){ .seccion{padding-block:var(--e96)} }

.seccion-superficie{background:var(--superficie)}

.encabezado-bloque{display:flex;flex-direction:column;gap:var(--e16);margin-bottom:var(--e40)}
@media (min-width:768px){ .encabezado-bloque{margin-bottom:var(--e48)} }

/* ── Enlace de salto ─────────────────────────────────────────────────── */

.salto{
  position:absolute;left:var(--e16);top:var(--e16);z-index:60;
  transform:translateY(-200%);
  background:var(--acento);color:var(--papel);
  padding:var(--e16) var(--e24);border-radius:var(--radio-8);
  font-size:inherit;font-weight:600;text-decoration:none;
}
.salto:focus{transform:none;color:var(--papel)}

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

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e8);
  min-height:48px;min-width:48px;
  padding:var(--e16) var(--e24);
  font-family:var(--fuente-cuerpo);font-size:inherit;font-weight:600;line-height:1.4;
  text-decoration:none;text-align:center;
  border:1px solid transparent;border-radius:var(--radio-8);
  background:none;color:var(--tinta);
  cursor:pointer;
}

.boton-relleno{
  background:var(--acento);color:var(--papel);
  border-radius:var(--pildora);
  border-color:var(--acento);
}
.boton-relleno:hover{background:#1741BE;border-color:#1741BE;color:var(--papel)}

.boton-contorno{
  border-color:var(--acento);color:var(--acento);background:var(--papel);
}
.boton-contorno:hover{background:var(--acento-tenue);color:var(--acento)}

.boton-texto{
  padding:var(--e16) 0;color:var(--acento);
  text-decoration:underline;text-underline-offset:3px;
}

.boton[disabled],.boton[aria-disabled="true"]{
  background:var(--superficie);color:var(--secundario);
  border-color:var(--borde-campo);cursor:not-allowed;
}

/* Foco: anillo de 2 px con 2 px de separación en todas las paradas */
:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
  border-radius:var(--radio-8);
}
.boton-relleno:focus-visible{box-shadow:inset 0 0 0 2px var(--papel)}
.pie a:focus-visible,.barra-oscura a:focus-visible{outline-color:var(--azul-oscuro)}

/* Grupo de acciones: 8 px de aire entre dos objetivos táctiles seguidos */
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e16)}

/* ── S0 · Cabecera fija ──────────────────────────────────────────────── */

.barra{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:var(--papel);
  border-bottom:1px solid var(--borde);
  transform:translateY(-100%);
}
/* Sin JavaScript la barra no se muestra al bajar, pero el teclado la saca:
   ninguna parada de tabulación queda fuera de la pantalla. */
.barra:focus-within{transform:none}
.barra.visible{transform:none}

.barra-fila{
  display:flex;align-items:center;gap:var(--e16);
  min-height:64px;padding-block:var(--e8);
}

.logo{
  font-family:var(--fuente-titulo);font-weight:700;font-size:1.5rem;
  line-height:1.25;letter-spacing:-.01em;
  color:var(--tinta);text-decoration:none;margin-right:auto;
}
.logo:hover{color:var(--tinta)}
.logo-k{color:var(--acento)}

.barra-nav{display:none}
@media (min-width:1024px){
  .barra-nav{display:flex;align-items:center;gap:var(--e24)}
  .barra-nav a{
    font-size:inherit;font-weight:400;color:var(--secundario);text-decoration:none;
    padding-block:var(--e8);
  }
  .barra-nav a:hover{color:var(--tinta)}
}

.barra-tel{
  display:none;font-family:var(--fuente-dato);font-size:.875rem;font-weight:600;
  color:var(--tinta);text-decoration:none;padding:var(--e8);
}
@media (min-width:768px){ .barra-tel{display:inline-flex;align-items:center;min-height:44px} }

.barra .boton-relleno{padding:var(--e8) var(--e16);min-height:44px;font-size:.875rem}
@media (min-width:768px){ .barra .boton-relleno{padding:var(--e8) var(--e24)} }

/* Menú plegable de móvil: <details>, sin JavaScript */
.menu-movil{position:relative}
@media (min-width:1024px){ .menu-movil{display:none} }
.menu-movil>summary{
  display:inline-flex;align-items:center;gap:var(--e8);
  min-height:44px;padding:var(--e8) var(--e16);
  border:1px solid var(--borde-campo);border-radius:var(--radio-8);
  font-size:.875rem;font-weight:600;color:var(--tinta);
  list-style:none;cursor:pointer;
}
.menu-movil>summary::-webkit-details-marker{display:none}
.menu-movil-panel{
  position:absolute;right:0;top:calc(100% + var(--e8));z-index:1;
  min-width:240px;
  display:flex;flex-direction:column;
  background:var(--papel);border:1px solid var(--borde);
  border-radius:var(--radio-16);box-shadow:var(--sombra);
  padding:var(--e8);
}
.menu-movil-panel a{
  padding:var(--e16);color:var(--tinta);text-decoration:none;font-size:inherit;
  border-radius:var(--radio-8);
}
.menu-movil-panel a:hover{background:var(--superficie)}

/* ── S1 · Primera pantalla ───────────────────────────────────────────── */

.hero{padding-block:var(--e48) var(--e64)}
@media (min-width:768px){ .hero{padding-block:var(--e64) var(--e80)} }

.hero-caja{display:flex;flex-direction:column;gap:var(--e24);max-width:960px}
.hero h1{max-width:22ch}
.hero .entradilla{max-width:60ch}

.aval{
  display:inline-flex;align-items:center;gap:var(--e8);
  font-size:inherit;font-weight:600;color:var(--tinta);
}
.aval-punto{
  width:8px;height:8px;border-radius:var(--pildora);
  background:var(--acento);flex:none;
}

.pasos-cita{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e8) var(--e16);
  padding-top:var(--e8);
}
.paso-cita{
  display:inline-flex;align-items:center;gap:var(--e8);
  font-family:var(--fuente-dato);font-size:.875rem;line-height:1.4;
  color:var(--secundario);
}
.paso-cita-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:none;
  border-radius:var(--pildora);background:var(--acento-tenue);color:var(--acento);
  font-size:.875rem;font-weight:600;
}
.sin-compromiso{
  font-family:var(--fuente-dato);font-size:.875rem;font-weight:600;
  color:var(--acento);
}

/* ── S2 · Tres tarjetas del mismo peso ───────────────────────────────── */

.tarjetas-3{display:grid;gap:var(--e24);grid-template-columns:1fr}
@media (min-width:768px){ .tarjetas-3{grid-template-columns:repeat(3,1fr)} }

.tarjeta{
  display:flex;flex-direction:column;gap:var(--e16);
  padding:var(--e32);
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio-16);
}

/* ── S3 · La factura invisible ───────────────────────────────────────── */

.factura{display:flex;flex-direction:column;gap:var(--e24);max-width:70ch}

/* ── S4 · Rejilla entra → resuelto ───────────────────────────────────── */

.rejilla{
  border:1px solid var(--borde);border-radius:var(--radio-16);
  overflow:hidden;background:var(--papel);
}
.rejilla-cabecera,.rejilla-fila{
  display:grid;grid-template-columns:1fr;
  border-bottom:1px solid var(--borde);
}
.rejilla-fila:last-of-type{border-bottom:0}
.rejilla-cabecera{background:var(--superficie)}
.rejilla-cabecera span{
  padding:var(--e16) var(--e24);
  font-family:var(--fuente-dato);font-size:.875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--secundario);
}
.rejilla-fila>span{padding:var(--e16) var(--e24);font-size:inherit;line-height:1.6}
.rejilla-entra{color:var(--secundario)}
.rejilla-resuelto{font-weight:600;color:var(--tinta)}
@media (min-width:768px){
  .rejilla-cabecera,.rejilla-fila{grid-template-columns:1fr 1fr}
  .rejilla-cabecera span+span,.rejilla-fila>span+span{border-left:1px solid var(--borde)}
  .rejilla-fila>span{padding:var(--e16) var(--e24)}
}
.rejilla-pie{padding-top:var(--e24);color:var(--secundario);max-width:70ch}

/* ── S5 · Qué te devuelve ────────────────────────────────────────────── */

.devuelve{display:flex;flex-direction:column;gap:var(--e80)}
.devuelve-bloque{display:grid;gap:var(--e32);grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){
  .devuelve-bloque{grid-template-columns:1fr 1fr;gap:var(--e48)}
}
.devuelve-texto{display:flex;flex-direction:column;gap:var(--e16)}
.devuelve-num{
  font-family:var(--fuente-dato);font-size:.875rem;font-weight:600;
  letter-spacing:.08em;color:var(--acento);
}
.lista-viñetas{display:flex;flex-direction:column;gap:var(--e8);padding-top:var(--e8)}
.lista-viñetas li{
  display:grid;grid-template-columns:24px 1fr;gap:var(--e8);
  font-size:inherit;line-height:1.6;
}
.viñeta{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}
.viñeta::before{content:"";display:block;width:8px;height:8px;border-radius:var(--pildora);background:var(--acento)}

.ejemplo{
  display:flex;flex-direction:column;gap:var(--e16);
  padding:var(--e24);
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-16);
}
.ejemplo-fila{display:flex;flex-wrap:wrap;gap:var(--e8);justify-content:space-between;align-items:baseline}
.ejemplo-cierre{
  padding-top:var(--e16);border-top:1px solid var(--borde);
  font-weight:600;
}
.ejemplos-lista{display:grid;gap:var(--e16);grid-template-columns:1fr}
@media (min-width:600px){ .ejemplos-lista{grid-template-columns:1fr 1fr} }
.ejemplo-mini{
  display:flex;flex-direction:column;gap:var(--e8);
  padding:var(--e16);
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio-8);
}

.descargos{display:flex;flex-direction:column;gap:var(--e16);margin-top:var(--e48);max-width:70ch}

/* ── S6 · Cómo funciona ──────────────────────────────────────────────── */

.avales{display:flex;flex-direction:column;gap:var(--e16);margin-bottom:var(--e48)}
@media (min-width:768px){ .avales{flex-direction:row;flex-wrap:wrap;gap:var(--e32)} }

.pasos{display:flex;flex-direction:column;gap:var(--e32)}
.paso{
  display:grid;gap:var(--e16);grid-template-columns:1fr;
  padding:var(--e32);
  border:1px solid var(--borde);border-radius:var(--radio-16);
}
.paso-num{
  font-family:var(--fuente-titulo);font-size:2rem;font-weight:700;line-height:1.1;
  color:var(--acento);
}
@media (min-width:768px){
  .paso{grid-template-columns:96px 1fr;gap:var(--e32)}
  .paso-num{font-size:2.5rem}
}
.paso-cuerpo{display:flex;flex-direction:column;gap:var(--e16)}
.paso-cuando{
  font-family:var(--fuente-dato);font-size:.875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--secundario);
  /* Envuelve: nada de nowrap en texto que puede no caber */
  overflow-wrap:break-word;
}
.semanas{display:grid;gap:var(--e16);grid-template-columns:1fr;margin-top:var(--e8)}
@media (min-width:768px){ .semanas{grid-template-columns:repeat(3,1fr)} }
.semana{
  display:flex;flex-direction:column;gap:var(--e8);
  padding:var(--e16);background:var(--superficie);border-radius:var(--radio-8);
}

/* ── S7 · Demo ───────────────────────────────────────────────────────── */

.ventana{
  border:1px solid var(--borde);border-radius:var(--radio-16);
  background:var(--papel);box-shadow:var(--sombra);overflow:hidden;
  max-width:840px;margin-inline:auto;
}
.ventana-barra{
  display:flex;align-items:center;gap:var(--e8);
  padding:var(--e16) var(--e24);
  background:var(--superficie);border-bottom:1px solid var(--borde);
  font-family:var(--fuente-dato);font-size:.875rem;color:var(--secundario);
}
.ventana-punto{width:8px;height:8px;border-radius:var(--pildora);background:var(--correcto);flex:none}
.ventana-cuerpo{padding:var(--e24);display:flex;flex-direction:column;gap:var(--e16)}
@media (min-width:768px){ .ventana-cuerpo{padding:var(--e32)} }
.parte-titulo{
  font-family:var(--fuente-dato);font-size:.875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--tinta);
  padding-bottom:var(--e16);border-bottom:1px solid var(--borde);
}
.parte-lineas{display:flex;flex-direction:column;gap:var(--e16)}
.parte-lineas li{font-size:inherit;line-height:1.6;color:var(--tinta)}
.demo-pie{
  display:flex;flex-direction:column;gap:var(--e16);align-items:flex-start;
  margin-top:var(--e32);
}
@media (min-width:768px){
  .demo-pie{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--e24)}
}

/* ── S8 · Medición ───────────────────────────────────────────────────── */

.formula{display:grid;gap:var(--e16);grid-template-columns:1fr;margin-block:var(--e40)}
@media (min-width:1024px){ .formula{grid-template-columns:repeat(4,1fr)} }
.formula-paso{
  display:flex;flex-direction:column;gap:var(--e8);
  padding:var(--e24);border:1px solid var(--borde);border-radius:var(--radio-16);
  position:relative;
}
.formula-signo{
  font-family:var(--fuente-dato);font-size:inherit;font-weight:600;color:var(--acento);
}
.formula-termino{font-size:inherit;font-weight:600;line-height:1.6}

.panel-ejemplo{
  background:var(--oscuro);color:var(--oscuro-texto);
  border-radius:var(--radio-16);padding:var(--e24);
  display:flex;flex-direction:column;gap:var(--e24);
}
@media (min-width:768px){ .panel-ejemplo{padding:var(--e40)} }
.panel-ejemplo .etiqueta{color:var(--oscuro-secundario)}
.panel-ejemplo-mes{display:flex;flex-direction:column;gap:var(--e4)}
.panel-filas{display:flex;flex-direction:column;gap:var(--e16)}
.panel-fila{
  display:flex;flex-wrap:wrap;gap:var(--e8) var(--e16);
  justify-content:space-between;align-items:baseline;
  padding-bottom:var(--e16);border-bottom:1px solid #2A2B30;
}
.panel-fila:last-child{border-bottom:0;padding-bottom:0}
.panel-fila-dato{font-family:var(--fuente-dato);font-size:.875rem;color:var(--oscuro-secundario)}

/* ── S9 · Planes ─────────────────────────────────────────────────────── */

.tranquilizadores{display:grid;gap:var(--e24);grid-template-columns:1fr;margin-bottom:var(--e48)}
@media (min-width:768px){ .tranquilizadores{grid-template-columns:1fr 1fr;gap:var(--e32)} }
.tranquilizador{display:flex;flex-direction:column;gap:var(--e8);max-width:70ch}

.planes{display:grid;gap:var(--e24);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){ .planes{grid-template-columns:repeat(3,1fr)} }

.plan{
  display:flex;flex-direction:column;gap:var(--e16);
  padding:var(--e32);
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio-16);
  height:100%;
}
.plan-destacado{
  background:var(--acento-tenue);border:1px solid var(--acento);
}
.plan-precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e8)}
.plan-cifra{font-family:var(--fuente-titulo);font-size:2rem;font-weight:700;line-height:1.1}
@media (min-width:768px){ .plan-cifra{font-size:2.5rem} }
.plan-periodo{font-family:var(--fuente-dato);font-size:.875rem;color:var(--secundario)}
.plan-iva{font-family:var(--fuente-dato);font-size:.875rem;font-weight:600;color:var(--tinta)}
.plan-tabla{display:flex;flex-direction:column;gap:var(--e8);padding-top:var(--e16);border-top:1px solid var(--borde)}
.plan-tabla-fila{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e16);
  font-size:inherit;
}
.plan-tabla-fila span:first-child{color:var(--secundario)}
.marca-si{color:var(--correcto);font-weight:700}
.marca-no{color:var(--secundario);font-weight:700}
.notas{display:flex;flex-direction:column;gap:var(--e16);margin-top:var(--e48);max-width:70ch}

/* ── S10 · Preguntas ─────────────────────────────────────────────────── */

.preguntas{display:flex;flex-direction:column;gap:var(--e8);max-width:900px}
.pregunta{
  border:1px solid var(--borde);border-radius:var(--radio-16);
  background:var(--papel);
}
.pregunta>summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e16);
  padding:var(--e24);min-height:64px;
  font-size:inherit;font-weight:600;line-height:1.6;
  cursor:pointer;list-style:none;border-radius:var(--radio-16);
}
.pregunta>summary::-webkit-details-marker{display:none}
.pregunta>summary:hover{background:var(--superficie)}
.flecha{
  width:24px;height:24px;flex:none;color:var(--acento);
  transition:transform 240ms var(--curva);
}
.pregunta[open] .flecha{transform:rotate(180deg)}
.respuesta{padding:0 var(--e24) var(--e24);color:var(--secundario);max-width:70ch}

/* ── S11 · Cierre ────────────────────────────────────────────────────── */

.cierre{display:flex;flex-direction:column;gap:var(--e24);align-items:flex-start;max-width:70ch}
.cierre-notas{display:flex;flex-wrap:wrap;gap:var(--e8) var(--e24)}
.cierre-nota{font-family:var(--fuente-dato);font-size:.875rem;color:var(--secundario)}

/* ── S12 · Pie ───────────────────────────────────────────────────────── */

.pie{background:var(--oscuro);color:var(--oscuro-secundario);padding-block:var(--e48)}
.pie-fila{display:flex;flex-wrap:wrap;gap:var(--e16) var(--e32);align-items:center}
.pie a{color:var(--oscuro-texto);text-decoration:none;font-size:inherit;padding-block:var(--e8)}
.pie a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--oscuro-texto)}
.pie-sec{font-size:inherit;color:var(--oscuro-secundario)}
.pie-min{padding-block:var(--e32)}

/* ── Cabecera mínima (páginas 2, 3, 4, 5, 6) ─────────────────────────── */

.barra-min{
  border-bottom:1px solid var(--borde);background:var(--papel);
}
.barra-min .barra-fila{justify-content:space-between}
.barra-min a.vuelta{
  font-size:inherit;color:var(--secundario);text-decoration:none;
  display:inline-flex;align-items:center;gap:var(--e4);
  min-height:44px;padding-inline:var(--e8);
}
.barra-min a.vuelta:hover{color:var(--tinta)}

/* ── Formularios, agenda y estados (páginas 2, 4 y puertas de panel) ─── */

.columna{display:flex;flex-direction:column;gap:var(--e24);max-width:70ch}
.columna-ancha{max-width:840px}

.bloque{
  display:flex;flex-direction:column;gap:var(--e24);
  padding:var(--e24);
  border:1px solid var(--borde);border-radius:var(--radio-16);background:var(--papel);
}
@media (min-width:768px){ .bloque{padding:var(--e32)} }

.rotulo-paso{
  display:flex;align-items:center;gap:var(--e8);
  font-family:var(--fuente-dato);font-size:.875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--acento);
}

.aviso{
  padding:var(--e16);border-radius:var(--radio-8);
  background:var(--acento-tenue);color:var(--tinta);
  font-size:inherit;line-height:1.6;
}
.aviso-neutro{background:var(--superficie)}

.estado{font-family:var(--fuente-dato);font-size:.875rem;line-height:1.4;color:var(--secundario)}
.estado-error{color:var(--error);font-weight:600}
.estado-ok{color:var(--correcto);font-weight:600}

/* Agenda: seis días laborables */
.agenda{display:grid;gap:var(--e8);grid-template-columns:repeat(2,1fr)}
@media (min-width:480px){ .agenda{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .agenda{grid-template-columns:repeat(6,1fr)} }

.dia{
  display:flex;flex-direction:column;gap:var(--e4);align-items:flex-start;
  min-height:88px;padding:var(--e16);
  border:1px solid var(--borde-campo);border-radius:var(--radio-8);
  background:var(--papel);color:var(--tinta);
  font-family:var(--fuente-cuerpo);font-size:inherit;line-height:1.4;
  cursor:pointer;text-align:left;
}
.dia:hover{background:var(--superficie)}
.dia[aria-pressed="true"]{
  background:var(--acento-tenue);border:2px solid var(--acento);color:var(--acento);
  font-weight:600;
}
.dia[disabled]{
  background:var(--superficie);color:var(--secundario);
  border-color:var(--borde);cursor:not-allowed;
}
.dia-nombre{font-family:var(--fuente-dato);font-size:.875rem;text-transform:uppercase;letter-spacing:.08em}
.dia-libres{font-family:var(--fuente-dato);font-size:.875rem;color:var(--secundario)}
.dia[aria-pressed="true"] .dia-libres{color:var(--acento)}
/* Cargando: hueco gris, sin número y sin poder pulsarse. Nada salta de sitio
   cuando llegan los datos: la ficha ya ocupa su alto. */
.dia-hueco{
  min-height:88px;padding:var(--e16);
  border:1px solid var(--borde);border-radius:var(--radio-8);
  background:var(--superficie);
}

.huecos{display:flex;flex-wrap:wrap;gap:var(--e8);border:0;margin:0;padding:0}
.huecos legend{padding:0;margin-bottom:var(--e8);font-size:inherit;font-weight:600}
.hueco{position:relative}
.hueco input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.hueco span{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;min-width:88px;padding:var(--e8) var(--e16);
  border:1px solid var(--borde-campo);border-radius:var(--radio-8);
  font-family:var(--fuente-dato);font-size:inherit;background:var(--papel);
  cursor:pointer;
}
.hueco input:checked+span{
  background:var(--acento);border-color:var(--acento);color:var(--papel);font-weight:600;
}
.hueco input:focus-visible+span{outline:2px solid var(--acento);outline-offset:2px}
.hueco input:disabled+span{background:var(--superficie);color:var(--secundario);border-color:var(--borde);cursor:not-allowed}

/* Campos */
.campos{display:grid;gap:var(--e24);grid-template-columns:1fr}
@media (min-width:768px){ .campos{grid-template-columns:1fr 1fr} }
.campo{display:flex;flex-direction:column;gap:var(--e8)}
.campo-ancho{grid-column:1/-1}
.campo label{font-size:inherit;font-weight:600;line-height:1.4}
.campo input,.campo textarea{
  font-family:var(--fuente-cuerpo);font-size:inherit;line-height:1.6;color:var(--tinta);
  min-height:48px;padding:var(--e8) var(--e16);
  border:1px solid var(--borde-campo);border-radius:var(--radio-8);
  background:var(--papel);width:100%;
}
.campo textarea{min-height:96px;padding:var(--e16);resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:var(--secundario)}
.js .campo input,.js .campo textarea{transition:border-color 150ms var(--curva),background-color 150ms var(--curva)}
.campo input:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.campo-ayuda{font-size:.875rem;line-height:1.4;color:var(--secundario)}
.campo-error{font-size:.875rem;line-height:1.4;color:var(--error);font-weight:600}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border:2px solid var(--error)}

.marcas{display:grid;gap:var(--e8);grid-template-columns:1fr;border:0;margin:0;padding:0}
@media (min-width:600px){ .marcas{grid-template-columns:1fr 1fr} }
.marcas legend{padding:0;margin-bottom:var(--e16);font-size:inherit;font-weight:600}
.marca{
  display:flex;align-items:center;gap:var(--e8);
  min-height:48px;padding:var(--e8) var(--e16);
  border:1px solid var(--borde-campo);border-radius:var(--radio-8);
  font-size:inherit;cursor:pointer;
}
.marca input{width:24px;height:24px;flex:none;accent-color:var(--acento);margin:0}
.marca:hover{background:var(--superficie)}

/* Campo trampa para robots: invisible y fuera del recorrido de teclado */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.envio{display:flex;flex-direction:column;gap:var(--e16);align-items:flex-start}

.marca-verificacion{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--pildora);
  background:var(--acento-tenue);color:var(--correcto);flex:none;
}

.ficha{display:flex;flex-direction:column;gap:var(--e16)}
.ficha-fila{
  display:flex;flex-wrap:wrap;gap:var(--e8) var(--e16);justify-content:space-between;
  padding-bottom:var(--e16);border-bottom:1px solid var(--borde);
}
.ficha-fila:last-child{border-bottom:0;padding-bottom:0}
.ficha-clave{font-size:inherit;color:var(--secundario)}
.ficha-valor{font-family:var(--fuente-dato);font-size:inherit;font-weight:600;overflow-wrap:anywhere}

/* Filas y tarjetas en hueco (estado «cargando») */
.hueco-fila{height:48px;border-radius:var(--radio-8);background:var(--superficie)}
.hueco-tarjeta{height:96px;border-radius:var(--radio-16);background:var(--superficie)}

/* ── Paneles (páginas 7 a 10) ─────────────────────────────────── */

.cinta{
  background:var(--acento-tenue);border-bottom:1px solid var(--acento);
  padding-block:var(--e16);
}
.cinta p{font-family:var(--fuente-dato);font-size:.875rem;line-height:1.4;color:var(--tinta)}

.indicadores{display:grid;gap:var(--e16);grid-template-columns:1fr}
@media (min-width:600px){ .indicadores{grid-template-columns:repeat(3,1fr)} }
.indicador{
  display:flex;flex-direction:column;gap:var(--e8);
  padding:var(--e24);
  border:1px solid var(--borde);border-radius:var(--radio-16);background:var(--papel);
}
/* La etiqueta envuelve en dos líneas y la tarjeta crece: nada de puntos
   suspensivos. */
.indicador-etiqueta{
  font-family:var(--fuente-dato);font-size:.875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--secundario);
  overflow-wrap:anywhere;
}
.indicador-valor{
  font-family:var(--fuente-titulo);font-size:2rem;font-weight:700;line-height:1.1;
  overflow-wrap:anywhere;
}
@media (min-width:768px){ .indicador-valor{font-size:2.5rem} }

.pestanas{display:flex;flex-wrap:wrap;gap:var(--e8)}
.pestana{
  min-height:44px;padding:var(--e8) var(--e16);
  border:1px solid var(--borde-campo);border-radius:var(--pildora);
  background:var(--papel);color:var(--tinta);
  font-family:var(--fuente-dato);font-size:.875rem;cursor:pointer;
}
.pestana[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--papel);font-weight:600}

.procesos{display:flex;flex-direction:column;gap:var(--e16)}
.proceso-nombre{display:flex;flex-wrap:wrap;gap:var(--e8);justify-content:space-between;font-size:inherit}
.proceso-barra{height:8px;border-radius:var(--pildora);background:var(--superficie);overflow:hidden}
.proceso-relleno{height:100%;background:var(--acento);border-radius:var(--pildora)}
.p-38{width:38%} .p-30{width:30%} .p-18{width:18%} .p-14{width:14%}

/* ── Legal (página 5) ────────────────────────────────────────────────── */

.legal-rejilla{display:grid;gap:var(--e32);grid-template-columns:1fr}
@media (min-width:1024px){
  .legal-rejilla{grid-template-columns:256px 1fr;gap:var(--e48);align-items:start}
}

.indice nav{display:flex;flex-direction:column;gap:var(--e4)}
.indice a{
  display:flex;align-items:center;gap:var(--e8);
  min-height:44px;padding:var(--e8);
  border-radius:var(--radio-8);
  color:var(--tinta);text-decoration:none;font-size:inherit;line-height:1.4;
}
.indice a:hover{background:var(--superficie);color:var(--tinta)}
.indice-num{
  font-family:var(--fuente-dato);font-size:.875rem;font-weight:600;
  color:var(--acento);flex:none;
}
@media (min-width:1024px){
  /* Cabe en una ventana de 600 px de alto o se desplaza dentro de su caja. */
  .indice{position:sticky;top:88px;max-height:calc(100vh - 128px);overflow:auto}
}

.legal{display:flex;flex-direction:column;gap:var(--e64)}
.legal h2{
  font-family:var(--fuente-titulo);font-size:2rem;font-weight:700;line-height:1.1;
  letter-spacing:-.015em;margin:0 0 var(--e24);
}
.legal h3{
  font-family:var(--fuente-titulo);font-size:1.5rem;font-weight:600;line-height:1.25;
  margin:var(--e32) 0 var(--e16);
}
.legal p,.legal li{font-size:1rem;line-height:1.6;max-width:70ch}
.legal p{margin:0 0 var(--e16)}
.legal ul{margin:0 0 var(--e16);padding-left:var(--e24);list-style:disc}
.legal li{margin-bottom:var(--e8)}
.legal strong{font-weight:600}
.legal hr{border:0;border-top:1px solid var(--borde);margin:var(--e32) 0}

/* Filas de las tarjetas de la lista de subencargados y del registro de
   actividades. El HTML es <div><span>ETIQUETA</span><span>valor</span></div> y
   no tenía ni una regla: etiqueta y valor salían pegados en un solo bloque de
   texto («SERVICIOAlojamiento de la web…»). La etiqueta va encima, con el mismo
   tratamiento de dato que el resto de rótulos de la web. */
.legal div > div > span{display:block}
.legal div > div > span:first-child{
  font-family:var(--fuente-dato);font-size:.75rem;font-weight:600;
  letter-spacing:.04em;color:var(--secundario);
  margin:var(--e16) 0 var(--e4);
}
.legal div > div > span + span{font-size:1rem;line-height:1.6;max-width:70ch}
@media (min-width:768px){
  .legal div > div > span + span{font-size:1.125rem}
}
.legal a{overflow-wrap:anywhere}
@media (min-width:768px){
  .legal h2{font-size:2.5rem}
  .legal h3{font-size:1.75rem}
  .legal p,.legal li{font-size:1.125rem}
}

/* ── Movimiento (apartado 10) ────────────────────────────────────────── */

/* Todo lo animado se activa desde JavaScript: sin él, el contenido está a la
   vista desde el primer fotograma. Y `sin-entrada` lo devuelve a la vista de
   golpe cuando la animación no puede avanzar: la entrada de sección no puede
   esconder texto en ningún caso. */
html.sin-entrada .revelar{opacity:1 !important;transform:none !important;transition:none !important}
.js .revelar{opacity:0;transform:translateY(16px)}
.js .revelar.dentro{
  opacity:1;transform:none;
  transition:opacity 320ms var(--curva),transform 320ms var(--curva);
}
.js .barra{transition:transform 200ms var(--curva)}
.boton:active{transform:scale(.98)}
.js .boton{transition:transform 120ms var(--curva),background-color 150ms var(--curva),color 150ms var(--curva)}
html.js{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  html.js{scroll-behavior:auto}
  .js .revelar,.js .revelar.dentro{opacity:1;transform:none;transition:none}
  .js .barra,.js .boton,.flecha,.boton:active{transition:none;animation:none}
  .boton:active{transform:none}
}

/* ── /404 ────────────────────────────────────────────────────────────────
   Corta y en una sola pantalla: texto a la izquierda, la K del logotipo a la
   derecha, quieta. En estrecho, el texto va primero y la K debajo. Sin pie: el
   teléfono ya está en el cuerpo. */

.p404{
  display:grid;gap:var(--e40);align-items:center;
  padding-block:var(--e48) var(--e64);
}
@media (min-width:768px){
  .p404{
    grid-template-columns:minmax(0,1fr) auto;gap:var(--e64);
    min-height:min(72vh,560px);padding-block:var(--e32) var(--e64);
  }
}

.p404-txt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e16);max-width:34ch}

.p404-k{
  display:block;width:min(120px,32vw);height:auto;color:var(--acento);
  justify-self:start;
}
@media (min-width:768px){ .p404-k{width:clamp(150px,18vw,200px);justify-self:end} }

.p404-enlaces{
  display:flex;flex-wrap:wrap;gap:var(--e16) var(--e32);
  margin-top:var(--e8);
}
.p404-enlaces a{
  color:var(--tinta);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--borde-campo);
  display:inline-flex;align-items:center;min-height:44px;
}
.p404-enlaces a:hover{color:var(--acento);text-decoration-color:var(--acento)}

.p404-tel a{color:var(--secundario);text-underline-offset:3px}
.p404-tel a:hover{color:var(--acento)}

/* ── Móvil ───────────────────────────────────────────────────────────────
   El móvil es la versión principal del sitio: la mayoría del tráfico llega
   desde Instagram. En estas páginas la retícula ya es de una columna, así que
   lo único que cambia es el suelo del cuerpo de letra: el escalón de 0,875rem
   (14 px) sube a 1rem. Ningún texto por debajo de 16 px. */
@media (max-width:899px){
  .etiqueta,.dato,.paso-cita,.paso-cita-num,.sin-compromiso,.barra-tel,
  .devuelve-num,.paso-cuando,.plan-periodo,.plan-iva,.cierre-nota,
  .campo-ayuda,.campo-error,.estado,.dia-nombre,.dia-libres,
  .indicador-etiqueta,.pestana,.panel-fila-dato,.indice-num,
  .cinta p,.rejilla-cabecera span,.salto,
  .barra .boton-relleno,.menu-movil>summary{font-size:1rem}
  .legal div > div > span:first-child{font-size:1rem}
  html,body{max-width:100%;overflow-x:hidden}
}