/* ==========================================================================
   kontrolcon.com — la ficha de producto de KontrolCON.

   Colores y letra del dossier de la marca (ERP_Contenedores/Artes): azul #1B54FF, tinta
   #161616, marino #19234A del motivo de la «K», Poppins para títulos, Public Sans para texto e
   IBM Plex Mono para cifras y rótulos. Igual que en el ERP: las fuentes se sirven desde aquí
   mismo, nada de Google en el navegador del visitante.

   Composición del dossier: portada oscura con la «K» marina de fondo, páginas blancas con el
   título en Poppins sobre una raya fina, «cejas» en mayúsculas espaciadas y tarjetas gris claro
   de esquinas redondeadas. Las bandas oscuras (cabecera, portada, lo urgente, pie) no tienen
   estilos propios por pieza: redefinen las variables de color y las piezas se adaptan solas.
   Color nuevo = variable, nunca un #fff suelto dentro de una pieza.
   ========================================================================== */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fuentes/Poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fuentes/Poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fuentes/Poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fuentes/Poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fuentes/PublicSans-400-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fuentes/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fuentes/IBMPlexMono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fuentes/IBMPlexMono-600.woff2") format("woff2"); }

:root {
  /* Marca */
  --azul: #1B54FF;
  --azul-hover: #1544D6;
  --azul-suave: #EAF0FF;
  --tinta: #161616;
  --marino: #19234A;

  /* Página clara (las páginas interiores del dossier) */
  --fondo: #FFFFFF;
  --fondo-2: #F5F6F8;
  --tarjeta: #F2F2F3;
  --tarjeta-2: #E9EAEE;
  --texto: #161616;
  --texto-2: #3F4350;
  --texto-3: #626878;
  --borde: #CDD1D9;
  --borde-fino: #E3E5EA;
  --raya: #161616;
  --acento: #1B54FF;            /* el azul que se usa como texto: en oscuro se aclara */
  --acento-suave: #EAF0FF;

  /* Estados (los del ERP: las tareas del móvil llevan estos colores) */
  --llevada: #147A48;
  --cambio: #9A5B00;
  --retirada: #C4261D;
  --urgente: #C4261D;
  --urgente-suave: #FCEBEA;

  /* Letra */
  --f-titulo: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Medidas */
  --ancho: 1160px;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --radio: 12px;
  --radio-pequeno: 6px;
  --alto-cabecera: 64px;
  --paso: clamp(3.5rem, 8vw, 6rem);
}

/* Bandas oscuras: mismas piezas, otra paleta. */
.oscuro {
  --fondo: #161616;
  --fondo-2: #1B1C21;
  --tarjeta: #1E1F24;
  --tarjeta-2: #26272D;
  --texto: #FFFFFF;
  --texto-2: #C4C6CF;
  --texto-3: #9A9EAD;
  --borde: #33343B;
  --borde-fino: #2B2C33;
  --raya: #4A4C55;
  --acento: #7C9BFF;            /* #1B54FF sobre #161616 no llega a 3:1 */
  --acento-suave: rgba(27, 84, 255, 0.18);
  --urgente: #FF7A6E;
  --urgente-suave: rgba(196, 38, 29, 0.22);
  background: var(--fondo);
  color: var(--texto);
}

/* --- Base ----------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Los saltos a #seccion no quedan debajo de la cabecera fija. */
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titulo);
  text-wrap: balance;
  color: var(--texto);
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

p { margin: 0; }
strong { font-weight: 700; color: var(--texto); }
a { color: inherit; }

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

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--azul);
  color: #FFFFFF;
  padding: 0.6rem 1rem;
  border-radius: var(--radio-pequeno);
  font-weight: 600;
}
.saltar:focus { top: 0.75rem; }

/* --- Rótulos -------------------------------------------------------------- */

/* La «ceja» del dossier: mayúsculas muy espaciadas en Poppins, en azul. */
.ceja {
  display: block;
  font-family: var(--f-titulo);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--acento);
}

/* Rótulo pequeño de máquina, el de las tarjetas y las tablas (el del ERP). */
.etiqueta {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.serial {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.sutil { color: var(--texto-2); }

/* --- Botones -------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radio-pequeno);
  border: 1.5px solid transparent;
  font-family: var(--f-titulo);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.boton svg { width: 18px; height: 18px; flex: 0 0 auto; }

.boton-azul { background: var(--azul); color: #FFFFFF; }
.boton-azul:hover { background: var(--azul-hover); }

.boton-borde { border-color: var(--texto); color: var(--texto); background: transparent; }
.boton-borde:hover { background: var(--texto); color: var(--fondo); }

.botonera { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- Cabecera ------------------------------------------------------------- */

.cabecera-sitio {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--borde-fino);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--alto-cabecera);
}

.cabecera-logo { display: inline-flex; color: var(--texto); line-height: 0; }
.cabecera-logo .marca { width: 150px; height: auto; }

.cabecera-fila nav { margin-left: auto; }

.menu {
  display: flex;
  gap: 0.25rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-2);
  text-decoration: none;
  white-space: nowrap;
}

.menu a:hover { color: var(--texto); }

.cabecera-fila .boton { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.88rem; }

@media (max-width: 960px) {
  .menu { display: none; }
  .cabecera-fila .boton { margin-left: auto; }
}

@media (max-width: 380px) {
  .cabecera-logo .marca { width: 128px; }
}

/* --- Portada -------------------------------------------------------------- */

.portada {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* El motivo de la «K» del dossier, en marino y en grande, a la derecha. */
.portada-motivo {
  position: absolute;
  z-index: -1;
  right: -4%;
  bottom: -8%;
  height: 118%;
  width: auto;
  max-width: none;
  color: var(--marino);
}

.portada-cuerpo {
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* El logotipo de la portada solo sale en papel: en pantalla ya está en la cabecera. */
.solo-impresion { display: none; }
.portada-marca { line-height: 0; }
.portada-marca .marca { width: 280px; height: auto; }

.portada-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 0.6rem;
  max-width: 760px;
}

.portada h1 {
  font-size: clamp(2.2rem, 6.2vw, 4.1rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 15ch;
}

.portada h1 em { font-style: normal; color: var(--acento); }

.entradilla {
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 56ch;
}

.aviso-vigor {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  border-radius: 100px;
  background: var(--urgente-suave);
  color: var(--texto);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
}

.aviso-vigor b {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--urgente);
  color: var(--fondo);
  border-radius: 100px;
  padding: 0.15rem 0.55rem;
}

.aviso-vigor:hover { text-decoration: underline; text-underline-offset: 3px; }
.aviso-vigor b { white-space: nowrap; }

@media (max-width: 700px) {
  /* En vertical la «K» entera tapaba media portada: más pequeña, más tenue y asomando. */
  .portada-motivo { height: 62%; right: -28%; bottom: -4%; opacity: 0.6; }
  .aviso-vigor { border-radius: 14px; align-items: flex-start; }
}

.tira-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2.5rem;
}

.tira-datos div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.4rem 0; }
.tira-datos b { font-size: 0.98rem; font-weight: 600; color: var(--texto); }

/* --- Secciones ------------------------------------------------------------ */

.seccion { padding-top: var(--paso); }
.banda { padding-bottom: var(--paso); }
/* Una banda oscura detrás de una sección clara: la clara no tiene relleno abajo. */
.seccion:not(.banda) + .banda { margin-top: var(--paso); }

.titulo-seccion {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  border-bottom: 1px solid var(--raya);
  padding-bottom: 0.9rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.titulo-seccion > div { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }

.titulo-seccion .numero {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--acento);
  padding-bottom: 0.35rem;
}

.prosa { display: flex; flex-direction: column; gap: 1rem; }
.prosa .creditos { padding: 0.25rem 0; }
.ceja-urgente { color: var(--urgente); }
.subtitulo { font-size: 1.15rem; margin-top: 0.5rem; }
.llamada { font-size: 1.05rem; }
.prosa-corta { max-width: 70ch; }
.separa { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.separa-arriba { margin-top: clamp(1.25rem, 3vw, 1.75rem); }

.destacado {
  font-family: var(--f-titulo);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--texto);
  max-width: 44ch;
}

.nota {
  border-left: 3px solid var(--borde);
  padding-left: 1rem;
  color: var(--texto-2);
  font-size: 0.94rem;
  max-width: 70ch;
}

/* --- Tarjetas (las cajas gris claro del dossier) -------------------------- */

.rejilla {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* Cuatro tarjetas: 4, 2 o 1 por fila, nunca 3 + 1 huérfana. */
.rejilla-4 { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .rejilla-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla-4 { grid-template-columns: repeat(4, 1fr); } }

.rejilla-2 {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
}

.tarjeta {
  position: relative;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tarjeta > .etiqueta:first-child { color: var(--acento); margin-bottom: 0.15rem; }
.tarjeta p { color: var(--texto-2); font-size: 0.96rem; }
.tarjeta p + p, .tarjeta p + h3 { margin-top: 0.35rem; }

.tarjeta h3 + .lista-marcada { margin-top: 0.5rem; }

.tarjeta .serial-esquina {
  position: absolute;
  top: 1.3rem;
  right: 1.4rem;
}

.tarjeta-blanca { background: var(--fondo); }

/* Las tres piezas: un poco más de aire y el número grande. */
.pieza h3 { font-size: 1.2rem; }

/* --- Comparativa hoy / con KontrolCON ------------------------------------- */

.comparativa {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.columna-hoy, .columna-sistema {
  border-radius: var(--radio);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.columna-hoy { background: var(--tarjeta); border: 1px solid var(--borde); color: var(--texto-2); }
.columna-sistema { background: var(--fondo); border: 2px solid var(--azul); }
.columna-sistema > .etiqueta { color: var(--acento); }

.lista-marcada {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.96rem;
}

/* Sangría francesa con la raya colgando: el <li> sigue siendo un bloque normal para que
   <strong> y los enlaces fluyan dentro del párrafo. */
.lista-marcada li { position: relative; padding-left: 1.75rem; }

.lista-marcada li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-mono);
  color: var(--texto-3);
}

.columna-sistema .lista-marcada li::before,
.lista-flecha li::before { content: "→"; color: var(--acento); }

/* --- Lo urgente ----------------------------------------------------------- */

.cifra-suelta, .fecha-limite {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-left: 3px solid var(--urgente);
  padding-left: 1rem;
}

.cifra-suelta .grande, .fecha-limite .grande {
  font-family: var(--f-mono);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.cifra-suelta .etiqueta, .fecha-limite .etiqueta { color: var(--urgente); }
.cifra-suelta .sutil, .fecha-limite .sutil { font-size: 0.9rem; }

.bloque-marcado {
  border: 1px solid var(--borde);
  border-top: 3px solid var(--azul);
  border-radius: var(--radio);
  background: var(--tarjeta);
  padding: clamp(1.4rem, 3.5vw, 2.25rem);
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.bloque-marcado .prosa { gap: 1.1rem; }
.bloque-marcado h3 { font-size: 1.22rem; }

.insignia {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  background: var(--acento-suave);
  color: var(--acento);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- El recorrido: el móvil y los pasos ----------------------------------- */

.recorrido {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: start;
}

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

.movil-marco {
  position: sticky;
  top: calc(var(--alto-cabecera) + 1.5rem);
  justify-self: center;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 17.5;
  background: #161616;
  border: 8px solid #161616;
  border-radius: 28px;
  box-shadow: 0 22px 44px -20px rgba(22, 22, 22, 0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 820px) {
  /* En una columna, pegado arriba taparía los pasos que se están leyendo. */
  .movil-marco { position: relative; top: 0; max-width: 270px; }
}

.movil-barra {
  flex: 0 0 auto;
  background: #161616;
  color: #9A9EAD;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.85rem 0.4rem;
}

/* El interior del móvil es siempre claro, como la app de verdad. */
.movil-pantalla {
  flex: 1;
  position: relative;
  background: #F5F6F8;
  color: #16171B;
  overflow: hidden;
}

.pantalla {
  position: absolute;
  inset: 0;
  padding: 0.9rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.pantalla.activa { opacity: 1; transform: none; pointer-events: auto; }

.pantalla-titulo {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #626878;
}

.visor {
  flex: 1;
  border: 2px dashed #A9AFBC;
  border-radius: 8px;
  background: #E7E9EE;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 90px;
}

/* El número pintado del contenedor: blanco sobre azul, como en el dibujo. */
.chapa {
  background: #3E6B92;
  color: #FFFFFF;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  padding: 0.45rem 0.7rem;
  border-radius: 2px;
  border: 2px solid #1B3A52;
}

.barrido {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--azul);
  opacity: 0.9;
  animation: barrer 2.1s ease-in-out infinite;
}

@keyframes barrer {
  0%, 100% { top: 12%; }
  50%      { top: 84%; }
}

.qr-cuadro {
  width: 78px;
  height: 78px;
  background:
    linear-gradient(90deg, #161616 22%, transparent 22% 30%, #161616 30% 38%, transparent 38% 52%, #161616 52% 60%, transparent 60% 72%, #161616 72% 80%, transparent 80%),
    linear-gradient(#161616 18%, transparent 18% 28%, #161616 28% 34%, transparent 34% 50%, #161616 50% 62%, transparent 62% 70%, #161616 70% 82%, transparent 82%),
    #F5F6F8;
  border: 4px solid #F5F6F8;
  outline: 2px solid #161616;
}

.ficha, .tarea, .residuo, .correo, .lienzo-firma {
  background: #FFFFFF;
  border: 1px solid #DADDE3;
  border-radius: 6px;
}

.ficha { padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.2rem; }
.ficha b { font-size: 0.78rem; font-weight: 700; }
.ficha span { font-size: 0.66rem; color: #626878; }

.tarea {
  border-left: 5px solid var(--llevada);
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.tarea.t-cambio   { border-left-color: var(--cambio); }
.tarea.t-retirada { border-left-color: var(--retirada); }
.tarea.t-atenuada { opacity: 0.45; }
.tarea b { font-size: 0.74rem; font-weight: 700; }
.tarea span { font-size: 0.63rem; color: #626878; }

.tarea .tarea-tipo {
  font-family: var(--f-mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.t-llevada .tarea-tipo  { color: var(--llevada); }
.t-cambio .tarea-tipo   { color: var(--cambio); }
.t-retirada .tarea-tipo { color: var(--retirada); }

.boton-movil {
  background: var(--azul);
  color: #FFFFFF;
  border-radius: 6px;
  text-align: center;
  padding: 0.6rem;
  font-family: var(--f-titulo);
  font-size: 0.8rem;
  font-weight: 600;
}

.boton-movil.pequeno { padding: 0.4rem; font-size: 0.72rem; }

.aviso-push {
  background: #FFFFFF;
  border: 1px solid #CDD1D9;
  border-left: 5px solid var(--azul);
  border-radius: 8px;
  padding: 0.6rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: 0 8px 18px -10px rgba(22, 22, 22, 0.45);
  animation: entrar-aviso 0.5s ease both;
}

@keyframes entrar-aviso {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

.aviso-push b { font-size: 0.76rem; }
.aviso-push span { font-size: 0.65rem; color: #3F4350; }

.relleno { flex: 1; }

.residuos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
  flex: 1;
  align-content: start;
}

.residuo {
  padding: 0.4rem 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.6rem;
  text-align: center;
  line-height: 1.25;
}

.residuo.elegido { border: 2px solid var(--azul); background: #EAF0FF; font-weight: 700; }
.residuo svg { width: 22px; height: 22px; }

.lienzo-firma {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
}

.lienzo-firma svg { width: 90%; }

.trazo-firma {
  fill: none;
  stroke: #16171B;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}

.pantalla.activa .trazo-firma { animation: firmar 1.9s ease-out 0.35s forwards; }

@keyframes firmar { to { stroke-dashoffset: 0; } }

.sello-ok {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--llevada);
  font-weight: 700;
  font-size: 0.82rem;
}

.sello-ok svg { width: 20px; height: 20px; }

.correo { padding: 0.55rem 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; }
.correo .de { font-size: 0.6rem; color: #626878; font-family: var(--f-mono); }
.correo .asunto { font-size: 0.74rem; font-weight: 700; }

.adjunto {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #DADDE3;
  border-radius: 4px;
  padding: 0.28rem 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  color: #3F4350;
}

/* Los pasos */

.pasos { display: flex; flex-direction: column; border-top: 1px solid var(--borde-fino); }

.paso-btn {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  gap: 0 1rem;
  padding: 0.95rem 0.9rem 0.95rem 0.75rem;
  border-bottom: 1px solid var(--borde-fino);
  border-left: 3px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.paso-btn:hover { background: var(--fondo-2); }
.paso-btn:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.paso-btn[aria-selected="true"] { background: var(--fondo-2); border-left-color: var(--azul); }

.paso-hora {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  padding-top: 0.12rem;
}

.paso-btn[aria-selected="true"] .paso-hora { color: var(--acento); font-weight: 600; }

.paso-texto { display: flex; flex-direction: column; gap: 0.3rem; }
.paso-texto b { font-family: var(--f-titulo); font-size: 1rem; font-weight: 600; }
.paso-texto span { font-size: 0.94rem; color: var(--texto-2); }

.mandos { display: flex; align-items: center; gap: 0.85rem; padding-top: 1.1rem; flex-wrap: wrap; }

.mando {
  all: unset;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto);
  border: 1px solid var(--texto);
  border-radius: var(--radio-pequeno);
  padding: 0.45rem 0.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.mando:hover { background: var(--texto); color: var(--fondo); }
.mando:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.riel {
  flex: 1;
  min-width: 120px;
  height: 3px;
  background: var(--borde-fino);
  border-radius: 2px;
  overflow: hidden;
}

.riel-relleno { height: 100%; width: 0%; background: var(--azul); transition: width 0.3s linear; }

/* --- Figura: las dos numeraciones ---------------------------------------- */

.figura {
  margin: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  overflow: hidden;
}

.figura img { display: block; width: 100%; height: auto; }

.figura figcaption {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.figura figcaption > .etiqueta { color: var(--acento); }
.figura figcaption p { font-size: 0.97rem; color: var(--texto-2); }

.dos-numeros {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.numero-caja {
  border-left: 3px solid var(--borde);
  padding-left: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.numero-caja.pintado { border-left-color: var(--azul); }

.numero-caja code {
  font-family: var(--f-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--texto);
}

.numero-caja b { font-size: 0.92rem; }
.numero-caja span { font-size: 0.9rem; color: var(--texto-2); }

/* --- Preguntas frecuentes -------------------------------------------------- */

.faq { display: flex; flex-direction: column; border-top: 1px solid var(--borde-fino); margin-top: 0.75rem; }

.faq-item {
  display: grid;
  gap: 0.35rem;
  padding: 1.05rem 0.25rem;
  border-bottom: 1px solid var(--borde-fino);
}

.faq-item b { font-family: var(--f-titulo); font-size: 1rem; font-weight: 600; }
.faq-item span { font-size: 0.96rem; color: var(--texto-2); }

/* --- Circuito del contenedor ---------------------------------------------- */

.marco-scroll { overflow-x: auto; }

.circuito { width: 100%; min-width: 600px; height: auto; overflow: visible; margin-top: 0.5rem; }
/* Plex Mono es más ancha que la letra para la que se dibujó: con más espaciado, los
   rótulos se salían de sus cajas. */
.circuito text { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.02em; }
.circuito .nodo-caja { fill: var(--fondo); stroke: var(--texto); stroke-width: 1.4; }
.circuito .nodo-txt  { fill: var(--texto); font-weight: 600; }
.circuito .arco      { fill: none; stroke: var(--borde); stroke-width: 1.4; }
.circuito .arco-act  { stroke: var(--azul); stroke-width: 1.8; stroke-dasharray: 5 4; }
.circuito .flecha-act { stroke-dasharray: none; }
.circuito .arco-txt  { fill: var(--texto-3); }
.circuito .dato      { fill: var(--acento); font-weight: 600; }

/* --- Copias de seguridad --------------------------------------------------- */

.copias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0.9rem;
}

.copia {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.copia .n {
  font-family: var(--f-titulo);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--azul);
  line-height: 1;
}

.copia b { font-size: 0.95rem; }
.copia span { font-size: 0.88rem; color: var(--texto-2); }

/* --- Tabla de opcionales -------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 640px;
}

thead th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto-3);
  padding: 0 0.85rem 0.6rem;
  border-bottom: 1.5px solid var(--texto);
}

tbody td {
  padding: 0.95rem 0.85rem;
  border-bottom: 1px solid var(--borde-fino);
  vertical-align: top;
  color: var(--texto-2);
}

tbody td:first-child {
  font-family: var(--f-titulo);
  color: var(--texto);
  font-weight: 600;
  width: 21%;
}

tbody tr:hover td { background: var(--fondo-2); }

/* --- Preguntas antes del precio ------------------------------------------- */

.preguntas {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: q;
  border-top: 1px solid var(--borde-fino);
}

.preguntas li {
  counter-increment: q;
  position: relative;
  padding: 0.85rem 0.25rem 0.85rem 3.4rem;
  border-bottom: 1px solid var(--borde-fino);
}

.preguntas li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute;
  left: 0.25rem;
  top: 0.95rem;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

/* --- Puesta en marcha ----------------------------------------------------- */

.arranque {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: fase;
}

.fase {
  counter-increment: fase;
  border-top: 3px solid var(--azul);
  padding-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fase::before {
  content: "Paso " counter(fase);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--acento);
}

.fase b { font-family: var(--f-titulo); font-size: 1rem; font-weight: 600; }
.fase span { font-size: 0.94rem; color: var(--texto-2); }

/* --- Quién está detrás y contacto ----------------------------------------- */

.bloque-autor {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
}

.creditos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2rem;
  padding: 1rem 0 0.25rem;
}

.credito { display: inline-flex; flex-direction: column; gap: 0.45rem; text-decoration: none; color: var(--texto); }
.credito .etiqueta { font-size: 0.6rem; }
.credito img, .credito .marca { display: block; height: auto; }
.credito .marca { width: 118px; }
.credito .logo-atinfor { width: 118px; }
.credito .logo-efgrupo { width: 84px; }

.contacto {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--azul);
  border-radius: var(--radio);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.datos-empresa { display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.95rem; }

.datos-empresa .fila {
  display: grid;
  grid-template-columns: 6.2rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.datos-empresa .fila > span:first-child {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.datos-empresa a { text-decoration: none; border-bottom: 1px solid var(--borde); }
.datos-empresa a:hover { border-bottom-color: var(--azul); }

/* --- Pie ------------------------------------------------------------------ */

.pie {
  margin-top: var(--paso);
  padding: clamp(2.5rem, 6vw, 3.5rem) 0 2rem;
  font-size: 0.92rem;
}

.pie-rejilla {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .pie-rejilla { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}

.pie-marca { display: flex; flex-direction: column; gap: 1rem; color: var(--texto); }
.pie-marca .marca { width: 220px; height: auto; }
.pie-marca p { color: var(--texto-3); max-width: 36ch; }

.pie h2 {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 0.8rem;
}

.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; color: var(--texto-2); }
.pie a { color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }

.pie-enlace-boton {
  all: unset;
  cursor: pointer;
  color: var(--texto-2);
}
.pie-enlace-boton:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.pie-enlace-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.pie-creditos {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde-fino);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.pie-creditos .creditos { padding: 0; }
.pie-creditos .credito .etiqueta { color: var(--texto-3); }
.pie-legal { color: var(--texto-3); font-size: 0.82rem; }

/* --- Páginas de texto (aviso legal, privacidad, 404) ---------------------- */

.pagina-texto { padding-top: clamp(2.5rem, 6vw, 4rem); }
.pagina-texto .titulo-seccion h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.025em; }
.pagina-texto .entradilla { margin-bottom: 2rem; }

.texto-legal { max-width: 78ch; display: flex; flex-direction: column; gap: 1rem; }
.texto-legal h2 { font-size: 1.3rem; margin-top: 1.25rem; }
.texto-legal ul { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; }
.texto-legal a { color: var(--acento); }

.ficha-datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; margin: 0; }
.ficha-datos dt {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
  padding-top: 0.25rem;
}
.ficha-datos dd { margin: 0; }

@media (max-width: 560px) {
  .ficha-datos { grid-template-columns: 1fr; gap: 0.1rem; }
  .ficha-datos dd { margin-bottom: 0.6rem; }
}

.tabla-legal { min-width: 560px; }

/* --- Movimiento reducido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Impresión / PDF: el documento se sigue mandando a clientes impreso.
   Todo en claro, fuera lo que solo sirve en pantalla.
   ========================================================================== */

@media print {
  .oscuro {
    --fondo: #FFFFFF; --fondo-2: #F5F6F8; --tarjeta: #FFFFFF; --tarjeta-2: #F2F2F3;
    --texto: #161616; --texto-2: #3F4350; --texto-3: #626878;
    --borde: #CDD1D9; --borde-fino: #E3E5EA; --raya: #161616;
    --acento: #1B54FF; --acento-suave: #EAF0FF; --urgente: #C4261D; --urgente-suave: #FCEBEA;
  }

  @page { margin: 14mm 13mm; }

  body { font-size: 10.5pt; line-height: 1.45; }
  .contenedor { max-width: none; padding: 0; }

  .cabecera-sitio, .menu, .saltar, .portada-motivo, .movil-marco, .mandos, .botonera,
  .aviso-vigor, .pie-enlace-boton { display: none !important; }

  .solo-impresion { display: block !important; }
  .portada-marca { color: #161616; margin-bottom: 0.5rem; }
  .recorrido { grid-template-columns: 1fr !important; }

  .tarjeta, .copia, .fase, .faq-item, .figura, .numero-caja, .cifra-suelta, .bloque-marcado,
  .columna-hoy, .columna-sistema, .paso-btn, .preguntas li, .contacto {
    break-inside: avoid;
  }

  h2, h3, .titulo-seccion { break-after: avoid; }
  #alcance, #opcionales, #arranque, #contacto { break-before: page; }

  thead { display: table-header-group; }
  tr, img, figure { break-inside: avoid; }
  table, .circuito { min-width: 0; }
  .marco-scroll { overflow: visible !important; }

  * { box-shadow: none !important; }
  a { text-decoration: none; color: inherit; }
  .figura img { max-height: 78mm; object-fit: cover; }
  .pie { margin-top: 2rem; }
}