/* ==========================================================================
   kontrol.css — la base común de las webs de la familia Kontrol (kontrolin.com, kontrolcon.com,
   kontrolmobil.com, kontrolepi.com). Cada web añade su css/<clave>.css con lo suyo.

   La marca es la de Branding/BRANDING KONTROLIN.pdf: «Kontrol» en tinta (#100D0C), el recuadro
   del color de cada producto, títulos en Sora con -25 de tracking (-0.025em) y texto en Inter.
   Las dos letras se sirven desde aquí mismo: nada de Google en el navegador del visitante.

   El color de cada web NO está aquí: lo escribe construir.mjs en css/marca.css a partir de
   sitios.mjs (--marca, --boton, --boton-texto, --acento-claro, --acento-oscuro y una clase
   .p-<clave> por producto). Aquí solo se usan esas variables.

   Las bandas oscuras (.oscuro: cabecera, portada, bandas, pie) no tienen estilos propios por
   pieza: redefinen las variables y las piezas se adaptan solas. Color nuevo = variable, nunca un
   #fff suelto dentro de una pieza.
   ========================================================================== */

@font-face { font-family: "Sora"; font-weight: 100 800; font-style: normal; font-display: swap; src: url("../fuentes/sora-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fuentes/inter-latin-wght-normal.woff2") format("woff2"); }

:root {
  /* La tinta de la guía (la de «Kontrol») y el negro de las tarjetas de visita */
  --tinta: #100D0C;
  --tinta-2: #181719;

  /* Página clara: grises cálidos, que casan con la tinta */
  --fondo: #FFFFFF;
  --fondo-2: #F7F6F4;
  --tarjeta: #F3F2EF;
  --tarjeta-2: #E8E6E2;
  --texto: #100D0C;
  --texto-2: #3E3B38;
  --texto-3: #6B6762;
  --borde: #D6D3CD;
  --borde-fino: #E7E4DF;
  --raya: #100D0C;
  --acento: var(--acento-claro);          /* el color de la marca como texto, legible sobre blanco */
  --acento-suave: color-mix(in srgb, var(--marca) 12%, #FFFFFF);

  /* Estados */
  --bien: #1A7A50;
  --bien-suave: #E3F2EA;
  --espera: #9A5B00;
  --espera-suave: #FBF1DF;
  --urgente: #C4261D;
  --urgente-suave: #FCEBEA;

  /* Letra */
  --f-titulo: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Inter", system-ui, sans-serif;   /* rótulos y cifras: Inter con cifras tabulares */
  --tracking-titulo: -0.025em;                 /* el -25 de la guía */

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

.oscuro {
  --fondo: #100D0C;
  --fondo-2: #151312;
  --tarjeta: #181719;
  --tarjeta-2: #222021;
  --texto: #FFFFFF;
  --texto-2: #D2CDC7;
  --texto-3: #9E9891;
  --borde: #2F2C2B;
  --borde-fino: #252323;
  --raya: #3F3B39;
  --acento: var(--acento-oscuro);
  --acento-suave: color-mix(in srgb, var(--marca) 22%, #100D0C);
  --bien: #5CC892;
  --bien-suave: rgba(26, 122, 80, 0.28);
  --espera: #F5B544;
  --espera-suave: rgba(154, 91, 0, 0.3);
  --urgente: #FF7A6E;
  --urgente-suave: rgba(196, 38, 29, 0.24);
  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;
  font-feature-settings: "cv11";               /* la «a» de una planta de Inter, más limpia */
}

img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

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

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
}

p { margin: 0; }
strong { font-weight: 650; color: var(--texto); }
a { color: inherit; }
code { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

: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(--boton);
  color: var(--boton-texto);
  padding: 0.6rem 1rem;
  border-radius: var(--radio-pequeno);
  font-weight: 600;
}
.saltar:focus { top: 0.75rem; }

/* --- Logotipos -------------------------------------------------------------- */
/* Van en línea: «Kontrol» toma el color del texto (currentColor), el recuadro lleva el suyo. */

.marca { display: block; height: auto; }

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

/* La «ceja»: mayúsculas espaciadas sobre los títulos, en el color de la marca. */
.ceja {
  display: block;
  font-family: var(--f-texto);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
}

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

.serial {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 550;
  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;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

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

.boton-marca { background: var(--boton); color: var(--boton-texto); }
.boton-marca:hover { filter: brightness(0.92); }

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

.boton:disabled { opacity: 0.55; cursor: progress; }

.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 { height: 26px; width: auto; }

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

.menu {
  display: flex;
  gap: 0.25rem 1.3rem;
  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); }

/* El enlace del menú que se distingue (la demo, la videollamada). */
.menu a.menu-destacado { color: var(--acento); }
.menu a.menu-destacado::before { content: "▸ "; }

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

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

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

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

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

/* La «K» del logotipo, en grande y en el color de la marca muy apagado, a la derecha. */
.portada-motivo {
  position: absolute;
  z-index: -1;
  right: -4%;
  bottom: -8%;
  height: 118%;
  width: auto;
  max-width: none;
  color: color-mix(in srgb, var(--marca) 30%, #100D0C);
}

.portada-cuerpo {
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 1000px) {
  .portada-cuerpo { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

.portada-texto { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }

/* 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 { height: 48px; width: 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, 4rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  max-width: 15ch;
}

@media (min-width: 1000px) {
  .portada h1 { font-size: clamp(2.4rem, 4.4vw, 3.4rem); max-width: 17ch; }
}

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

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

@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; }
}

.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); }

/* --- El tablero «en vivo» (la tarjeta oscura de la portada) ---------------- */

.vivo {
  margin: 0;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  min-width: 0;
}

.vivo-barra {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--borde-fino);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.vivo-luz {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3DDC84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6);
  animation: latido 2s ease-out infinite;
}

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.vivo-hora { margin-left: auto; color: var(--acento); font-variant-numeric: tabular-nums; }

.vivo-registro {
  list-style: none;
  margin: 0;
  font-size: 0.84rem;
  color: var(--texto-2);
}

.vivo-registro li.nuevo { animation: entra-linea 0.5s ease both; }

@keyframes entra-linea {
  from { opacity: 0; transform: translateY(-6px); background: var(--acento-suave); }
  to   { opacity: 1; transform: none; background: transparent; }
}

.vivo-registro time {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 550;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.vivo-registro b { color: var(--texto); font-weight: 600; }

.vivo-pie {
  padding: 0.6rem 1rem 0.75rem;
  border-top: 1px solid var(--borde-fino);
  font-size: 0.76rem;
  color: var(--texto-3);
}

/* --- Chips y estados ------------------------------------------------------ */

.chip {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 100px;
  background: var(--tarjeta-2);
  color: var(--texto-2);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chip-obra { background: var(--acento-suave); color: var(--acento); }
.chip-camion { background: var(--espera-suave); color: var(--espera); }
.chip-aviso { background: var(--urgente-suave); color: var(--urgente); }
.chip-bien { background: var(--bien-suave); color: var(--bien); }

/* El chip de un producto (en kontrolin.com): toma el color de su clase .p-<clave>. */
.chip-producto { background: var(--p-suave); color: var(--p-texto); }
.oscuro .chip-producto { background: var(--p-suave-oscuro); color: var(--p-texto-oscuro); }

/* Lo lejos que está un producto de poder usarse. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.estado::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.estado-uso { color: var(--bien); }
.estado-preparacion { color: var(--espera); }
.estado-desarrollo { color: var(--texto-3); }

.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: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- 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: 650;
  letter-spacing: 0.08em;
  color: var(--acento);
  padding-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.prosa { display: flex; flex-direction: column; gap: 1rem; }
.prosa .creditos { padding: 0.25rem 0; }
.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); }
.subtitulo { font-size: 1.15rem; margin-top: 0.5rem; }

.destacado {
  font-family: var(--f-titulo);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--tracking-titulo);
  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 --------------------------------------------------------------- */

.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); } }

/* Tres: 3 o 1 por fila. */
.rejilla-3 { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }

.rejilla-2 {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  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 a { color: var(--acento); }

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

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

/* --- Listas ------------------------------------------------------------------ */

.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;
  color: var(--texto-3);
}

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

/* --- Fichas de ejemplo (la «pantalla» de un programa) ------------------------ */

.ficha-activos {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.88rem;
  box-shadow: 0 16px 30px -24px rgba(16, 13, 12, 0.45);
}

.fa-cabeza, .fa-fila, .fa-pie {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.9rem;
}

.fa-cabeza {
  grid-template-columns: 1fr auto;
  background: var(--tinta);
  color: #FFFFFF;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fa-cabeza .serial { color: var(--acento-oscuro); }
.fa-fila { border-top: 1px solid var(--borde-fino); }
.fa-fila code { font-weight: 650; font-size: 0.82rem; color: var(--texto); }
.fa-fila span:not(.chip) { color: var(--texto-2); min-width: 0; }

.fa-pie {
  display: block;
  border-top: 1px solid var(--borde-fino);
  background: var(--fondo-2);
  font-size: 0.82rem;
  color: var(--texto-2);
}

.fa-pie b { color: var(--acento); }

@media (max-width: 520px) {
  .fa-fila { grid-template-columns: 1fr auto; }
  .fa-fila span:not(.chip) { grid-column: 1 / -1; grid-row: 2; font-size: 0.82rem; }
}

/* Una ficha dentro de la tarjeta oscura de la portada: sin marco propio. */
.vivo .ficha-en-vivo { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.vivo .ficha-en-vivo .fa-fila:first-child { border-top: 0; }

/* --- Lista numerada (lo que preguntamos, los pasos…) ------------------------- */

.preguntas-lista {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  counter-reset: q;
}

.preguntas-lista li {
  counter-increment: q;
  position: relative;
  padding: 0.7rem 0 0.7rem 2.6rem;
  border-top: 1px solid var(--borde-fino);
  color: var(--texto-2);
  font-size: 0.96rem;
}

.preguntas-lista li:first-child { border-top: 0; }

.preguntas-lista li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.78rem;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.preguntas-lista b { color: var(--texto); font-family: var(--f-titulo); font-weight: 600; letter-spacing: var(--tracking-titulo); }

/* --- Pestañas (las mueve js/kontrol.js) ------------------------------------- */

.pestanas {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.pestanas [role="tab"] {
  all: unset;
  cursor: pointer;
  padding: 0.55rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--borde);
  font-family: var(--f-titulo);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--texto-2);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pestanas [role="tab"]:hover { border-color: var(--texto); color: var(--texto); }
.pestanas [role="tab"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.pestanas [role="tab"][aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }

.panel-activo {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 3.5vw, 2rem);
}

.panel-activo[hidden] { display: none; }
.panel-activo:not([hidden]) { animation: entra-panel 0.35s ease both; }

@keyframes entra-panel {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.panel-activo h3 { font-size: 1.25rem; }

/* --- Cifras (la franja de cuatro debajo de la portada) ----------------------- */

.cifras { border-bottom: 1px solid var(--borde-fino); }

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

.cifra {
  padding: clamp(1.75rem, 4vw, 2.5rem) 1.5rem clamp(1.5rem, 3vw, 2rem) 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cifra + .cifra { padding-left: 1.5rem; border-left: 1px solid var(--borde-fino); }

@media (max-width: 1000px) {
  .cifra + .cifra { border-left: 0; padding-left: 0; }
  .cifra { border-top: 1px solid var(--borde-fino); }
  .cifra:first-child { border-top: 0; }
}

.cifra b {
  font-family: var(--f-titulo);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-titulo);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.cifra h3 { font-size: 1rem; }
.cifra p { font-size: 0.92rem; 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; letter-spacing: var(--tracking-titulo); }
.faq-item span { font-size: 0.96rem; color: var(--texto-2); }

/* --- Cifras sueltas (3 copias, 2 sitios…) ----------------------------------- */

.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(--acento);
  line-height: 1;
}

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

/* --- La banda de la videollamada (y cualquier banda texto + dibujo) --------- */

.portal {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: center;
}

.portal h2 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); }
.portal .sutil { font-size: 0.9rem; }

/* --- 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(--marca);
  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: 650;
  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(--marca); }

/* --- 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 { height: 34px; width: auto; }
.pie-marca p { color: var(--texto-3); max-width: 36ch; }

.pie h2 {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 650;
  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; }

/* La familia, en el pie de cada web: los logotipos pequeños, cada uno a su web. */
.pie-familia { display: flex; flex-wrap: wrap; gap: 0.9rem 1.6rem; align-items: center; }
.pie-familia a { color: var(--texto); line-height: 0; opacity: 0.85; transition: opacity 0.15s ease; }
.pie-familia a:hover { opacity: 1; }
.pie-familia .marca { height: 18px; width: auto; }

.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.03em; }
.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: 650;
  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; }
}

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

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: 650;
  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); }

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

/* --- Lo que aparece al bajar ------------------------------------------------ */
/* Solo con guion (clase con-js en <html>) y solo lo que no estaba ya a la vista al cargar. */

.con-js .aparece:not(.visto) { opacity: 0; transform: translateY(18px); }
.aparece.visto { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.15s ease, box-shadow 0.15s ease; }

/* --- 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 ------------------------------------------------------------- */

@media print {
  .oscuro {
    --fondo: #FFFFFF; --fondo-2: #F7F6F4; --tarjeta: #FFFFFF; --tarjeta-2: #F3F2EF;
    --texto: #100D0C; --texto-2: #3E3B38; --texto-3: #6B6762;
    --borde: #D6D3CD; --borde-fino: #E7E4DF; --raya: #100D0C;
    --acento: var(--acento-claro); --acento-suave: color-mix(in srgb, var(--marca) 12%, #FFFFFF);
  }

  @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, .botonera, .vivo, .pie-enlace-boton { display: none !important; }
  .solo-impresion { display: block !important; }

  .tarjeta, .ficha-activos, .contacto, .copia, .faq-item { break-inside: avoid; }
  h2, h3, .titulo-seccion { break-after: avoid; }
  thead { display: table-header-group; }
  tr, img, figure { break-inside: avoid; }
  table { min-width: 0; }
  .marco-scroll { overflow: visible !important; }

  * { box-shadow: none !important; }
  .aparece { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; color: inherit; }
  .pie { margin-top: 2rem; }
}