/* =============================================================
   tacografo.app — hoja de la web pública
   =============================================================

   Por qué existe aparte de `estilos.css`
   --------------------------------------
   El aula son 49 páginas que cuelgan de `estilos.css` y que están bien
   como están. La web pública tiene otro trabajo y otras dos pegas, así
   que tiene su propia hoja y no se tocan entre ellas.

   Las dos pegas, que mandan sobre todo lo demás
   ---------------------------------------------
   1. **Esta página se proyecta en un aula con las luces dadas.** Y un
      proyector no sabe hacer negro: lo que pinta es un gris sucio. Sobre
      ese gris, un texto secundario gris se evapora. Por eso aquí el fondo
      es papel y la tinta es tinta, al revés que en el aula, y por eso no
      hay ningún texto por debajo de 16 px ni ningún gris flojo.
   2. **Sobraba texto.** La portada tenía 980 palabras. El remedio es
      editorial, no tipográfico, pero la hoja ayuda: una idea por banda,
      líneas de 62 caracteres y nada de rellenar el ancho porque lo haya.

   De qué va el color
   ------------------
   Los tres colores de actividad no son decoración: son la leyenda de la
   banda de 24 horas, que es la pieza alrededor de la cual se montó todo.
   Ámbar es conducir, verde es descansar, pizarra es trabajar sin conducir,
   y el rojo aparece solo cuando un límite se ha pasado. Si algún día se
   usa uno de esos colores para otra cosa, la banda deja de leerse.

   El ámbar de la marca (#FFB020) está pensado para fondo oscuro y sobre
   papel se queda en 2,8:1, así que aquí vive en dos tonos: el de relleno
   para bloques grandes y uno más oscuro para cuando tiene que ser texto.

   Lo que se ha quitado a propósito
   --------------------------------
   Rótulos en versalitas encima de cada titular, cadenas de datos unidas
   con puntos medios, monoespaciada para etiquetas pequeñas, la flecha
   pegada al texto del botón y las tarjetas todas iguales. Estaban bien
   hechas una por una; juntas eran el uniforme que lleva media web.
   ============================================================= */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('marca/fuentes/figtree-variable.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('marca/fuentes/archivo-variable.woff2') format('woff2'); }

:root {
  color-scheme: light;

  --papel:      #E7E9E6;   /* rollo de tacógrafo: gris templado, no crema */
  --papel-alto: #F3F4F1;   /* lo que se levanta del papel */
  --papel-hond: #DBDEDA;   /* lo que se hunde */
  --tinta:      #15191A;
  --tinta-2:    #3F4A49;   /* 7,9:1 sobre papel: sigue siendo texto, no un susurro */
  --linea:      #C2C6C0;
  --linea-viva: #9AA09A;

  --conducir:      #C8761C;
  --conducir-leer: #8C4F0B;   /* el mismo ámbar cuando tiene que ser texto */
  --trabajo:       #5E6B69;
  --descanso:      #2F6B55;
  --pasado:        #A8322A;

  --texto-f: 'Figtree', system-ui, -apple-system, sans-serif;
  --display: 'Archivo', 'Figtree', system-ui, sans-serif;

  --ancho: 1180px;
  --lectura: 62ch;
  --barra-alto: 68px;
  --suave: cubic-bezier(.22, .61, .36, 1);
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --papel:      #14181A;
  --papel-alto: #1D2325;
  --papel-hond: #0E1113;
  --tinta:      #EDEFEC;
  --tinta-2:    #A8B3B1;
  --linea:      #2C3437;
  --linea-viva: #44504F;
  --conducir:      #F0A23C;
  --conducir-leer: #F7B860;
  --trabajo:       #8E9C9A;
  --descanso:      #5CB38E;
  --pasado:        #F2705F;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto-f);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1100px) { body { font-size: 20px; } }

img, svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 7.2vw, 88px); }
h2 { font-size: clamp(30px, 4.4vw, 50px); }
h3 { font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -.018em; }

p { margin: 0 0 1em; max-width: var(--lectura); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--conducir-leer);
  outline-offset: 3px;
  border-radius: 2px;
}

.envoltorio { width: min(100% - 48px, var(--ancho)); margin-inline: auto; }
@media (max-width: 620px) { .envoltorio { width: calc(100% - 32px); } }

.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- barra */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--suave);
}
.barra[data-desplazada="si"] { border-bottom-color: var(--linea); }
.barra__fila { display: flex; align-items: center; gap: 28px; height: var(--barra-alto); }
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 800; font-size: 20px;
  letter-spacing: -.025em; text-decoration: none;
}
.marca svg { width: 28px; height: 28px; }
.marca .dominio { color: var(--tinta-2); }
.barra__enlaces { display: flex; gap: 22px; margin-left: auto; }
.barra__enlaces a {
  text-decoration: none; font-size: 16.5px; color: var(--tinta-2);
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .15s var(--suave), border-color .15s var(--suave);
}
.barra__enlaces a:hover { color: var(--tinta); border-bottom-color: var(--conducir); }
.tema {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: none; border: 1px solid var(--linea); border-radius: 50%;
  color: var(--tinta-2); cursor: pointer;
}
.tema:hover { color: var(--tinta); border-color: var(--linea-viva); }
.tema .sol { display: none; }
:root[data-tema="oscuro"] .tema .sol { display: block; }
:root[data-tema="oscuro"] .tema .luna { display: none; }
@media (max-width: 900px) { .barra__enlaces { display: none; } }

/* El fallo que tenía la página: al saltar a un ancla, la barra fija se
   comía el titular. Se reserva su alto más aire. */
[id] { scroll-margin-top: calc(var(--barra-alto) + 26px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --------------------------------------------------------------- bandas */
/* Una idea por banda, y la banda se distingue por el papel, no por una
   línea decorativa. */
.banda { padding: clamp(56px, 8vw, 104px) 0; }
.banda--hundida { background: var(--papel-hond); }
.banda__cabeza { max-width: 20ch; margin-bottom: 14px; }
.banda__entrada { font-size: clamp(19px, 2.1vw, 23px); color: var(--tinta-2); max-width: 54ch; }

/* ---------------------------------------------------------------- botón */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: 3px; border: 2px solid var(--tinta);
  font-family: var(--display); font-weight: 700; font-size: 18px;
  letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: background .15s var(--suave), color .15s var(--suave);
}
.btn--principal { background: var(--tinta); color: var(--papel); }
.btn--principal:hover { background: var(--conducir-leer); border-color: var(--conducir-leer); }
.btn--linea { background: none; color: var(--tinta); }
.btn--linea:hover { background: var(--tinta); color: var(--papel); }

/* ======================= LA BANDA DE 24 HORAS ==========================
   La pieza. Es la tira que el conductor ya conoce del tique y de la
   pantalla del aparato: el día entero de izquierda a derecha, con cada
   actividad de su color y la hora actual avanzando. Se eligió horizontal
   y grande porque tiene que leerse desde el fondo de un aula.
   ===================================================================== */
.jornada { margin-top: clamp(32px, 5vw, 52px); }
.jornada__lienzo { display: block; width: 100%; height: auto; }

.tira-fondo { fill: var(--papel-hond); }
.tira--conducir { fill: var(--conducir); }
.tira--trabajo  { fill: var(--trabajo); }
.tira--descanso { fill: var(--descanso); }

.tira-regla { stroke: var(--linea-viva); stroke-width: 1; }
.tira-hora {
  fill: var(--tinta-2); font-family: var(--texto-f); font-size: 17px;
  font-weight: 600; text-anchor: middle;
}
.tira-ahora { stroke: var(--tinta); stroke-width: 3; }
.tira-ahora-punta { fill: var(--tinta); }

.tira-umbral { stroke: var(--pasado); stroke-width: 2.5; stroke-dasharray: 7 5; }
.tira-umbral-txt {
  fill: var(--pasado); font-family: var(--texto-f); font-size: 17px; font-weight: 700;
}

/* El velo del futuro: el día está pintado entero y esto tapa lo que
   todavía no ha pasado. Es papel translúcido, no un gris nuevo, para que
   la tira siga leyéndose debajo. */
.tira-velo { fill: var(--papel); opacity: .52; }

/* El estado, que es la frase que vende la app: lo que el conductor
   querría saber sin mirar el aparato. */
.jornada__linea { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.jornada__estado {
  margin: 0; max-width: none;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 3.1vw, 34px); letter-spacing: -.02em;
}
.jornada__estado b { font-weight: 800; }
.jornada__estado[data-aviso="si"] { color: var(--pasado); }
.jornada__reloj {
  margin: 0; font-variant-numeric: tabular-nums; color: var(--tinta-2);
  font-size: clamp(18px, 2vw, 22px); font-weight: 600;
}

.leyenda { display: flex; gap: 26px; flex-wrap: wrap; margin: 20px 0 0; padding: 0; list-style: none; }
.leyenda li { display: flex; align-items: center; gap: 9px; font-size: 16.5px; color: var(--tinta-2); }
.leyenda i { width: 20px; height: 20px; border-radius: 2px; flex: none; }
.leyenda .c-conducir { background: var(--conducir); }
.leyenda .c-trabajo  { background: var(--trabajo); }
.leyenda .c-descanso { background: var(--descanso); }

.jornada__pie { margin-top: 16px; font-size: 16.5px; color: var(--tinta-2); max-width: 58ch; }
.jornada__pie button {
  background: none; border: none; padding: 0; font: inherit; color: var(--conducir-leer);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* --------------------------------------------------------------- portada */
.portada { padding: clamp(40px, 6vw, 72px) 0 clamp(52px, 7vw, 86px); }
.portada h1 { max-width: 15ch; }
.portada__sub {
  margin: 22px 0 0; font-size: clamp(19px, 2.2vw, 24px);
  color: var(--tinta-2); max-width: 46ch;
}
.portada__acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ---------------------------------------------------- los cuatro símbolos */
/* No son tarjetas: son los cuatro botones del aparato, y por eso se
   pintan como botones de aparato y en el mismo orden que allí. */
.simbolos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 38px; }
.simbolo {
  padding: 22px 20px 20px; background: var(--papel-alto);
  border: 1px solid var(--linea); border-top: 5px solid var(--borde-propio, var(--linea-viva));
}
.simbolo--conducir { --borde-propio: var(--conducir); }
.simbolo--trabajo  { --borde-propio: var(--trabajo); }
.simbolo--espera   { --borde-propio: var(--linea-viva); }
.simbolo--descanso { --borde-propio: var(--descanso); }
.simbolo svg { width: 34px; height: 34px; color: var(--tinta); }
.simbolo h3 { margin: 12px 0 6px; }
.simbolo p { font-size: 17px; color: var(--tinta-2); margin: 0; }
@media (max-width: 860px) { .simbolos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .simbolos { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- límites */
/* Las cifras son el contenido, así que son el tamaño. El texto que las
   acompaña es una frase, no un párrafo. */
.limites { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px;
  border-top: 2px solid var(--tinta); }
.limite { padding: 26px 22px 24px; border-right: 1px solid var(--linea); }
.limite:last-child { border-right: none; }
.limite b {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(38px, 5vw, 58px); line-height: .95; letter-spacing: -.04em;
  color: var(--conducir-leer); font-variant-numeric: tabular-nums;
}
.limite span { display: block; margin-top: 10px; font-weight: 700; font-size: 17.5px; }
.limite p { margin: 8px 0 0; font-size: 16.5px; color: var(--tinta-2); }
@media (max-width: 900px) {
  .limites { grid-template-columns: repeat(2, 1fr); }
  .limite:nth-child(2) { border-right: none; }
  .limite:nth-child(-n+2) { border-bottom: 1px solid var(--linea); }
}
@media (max-width: 480px) {
  .limites { grid-template-columns: 1fr; }
  .limite { border-right: none; border-bottom: 1px solid var(--linea); }
  .limite:last-child { border-bottom: none; }
}

/* ------------------------------------------------------------- lo que no */
/* Cada línea empieza por lo que la app NO hace. La raya roja a la
   izquierda es la que dice de qué va la lista sin tener que rotularla. */
.noes { margin: 36px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.noes li {
  padding: 16px 20px; background: var(--papel-alto);
  border-left: 4px solid var(--pasado);
}
.noes b { font-weight: 700; }
.noes span { color: var(--tinta-2); }

/* ------------------------------------------------------------ privacidad */
.guardado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 38px; }
.guardado div { padding: 22px 20px; background: var(--papel-alto); border-top: 4px solid var(--descanso); }
.guardado h3 { margin-bottom: 7px; }
.guardado p { font-size: 17px; color: var(--tinta-2); margin: 0; }
@media (max-width: 800px) { .guardado { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- descarga */
.descarga { display: flex; gap: 40px; align-items: start; flex-wrap: wrap; margin-top: 34px; }
.descarga__texto { flex: 1 1 380px; }
.aviso-tienda {
  flex: 1 1 300px; padding: 22px 24px;
  background: var(--papel-alto); border: 2px solid var(--tinta);
}
.aviso-tienda p { font-size: 17px; margin-bottom: 0; }
.aviso-tienda strong { display: block; font-family: var(--display); font-size: 21px; margin-bottom: 8px; }

/* -------------------------------------------------------------- formación */
.formacion-cierre { background: var(--tinta); color: var(--papel); }
.formacion-cierre h2 { color: var(--papel); }
.formacion-cierre p { color: color-mix(in srgb, var(--papel) 78%, var(--tinta)); }
.formacion-cierre .btn { border-color: var(--papel); color: var(--papel); }
.formacion-cierre .btn:hover { background: var(--papel); color: var(--tinta); }
.formacion-cierre .btn--principal { background: var(--papel); color: var(--tinta); }
.formacion-cierre .btn--principal:hover { background: var(--conducir); border-color: var(--conducir); color: var(--tinta); }

/* -------------------------------------------------------------------- pie */
.pie { border-top: 1px solid var(--linea); padding: 44px 0 56px; font-size: 17px; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.pie h4 { margin: 0 0 12px; font-family: var(--display); font-size: 17px; font-weight: 800; }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pie a { color: var(--tinta-2); text-decoration: none; }
.pie a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.pie__nota { margin: 36px 0 0; color: var(--tinta-2); max-width: 70ch; font-size: 16.5px; }
@media (max-width: 800px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .pie__rejilla { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ legal */
/* Aviso legal y privacidad: una columna, a leer. */
.legal { padding: clamp(40px, 6vw, 72px) 0 80px; }
.legal h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 10px; }
.legal h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 44px 0 12px; }
.legal h3 { margin: 26px 0 8px; }
.legal__fecha { color: var(--tinta-2); font-size: 17px; }
.legal ul, .legal ol { max-width: var(--lectura); padding-left: 1.2em; }
.legal li { margin-bottom: .5em; }
.legal table { border-collapse: collapse; width: 100%; max-width: 860px; margin: 18px 0; font-size: 17px; }
.legal th, .legal td { border: 1px solid var(--linea); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal th { background: var(--papel-hond); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ===================== Formación para empresas ==========================
   La página de venta. Mismo lenguaje que la portada: una idea por banda,
   las cifras grandes porque son el contenido, y la fuente legal citada al
   pie de la banda que la necesita en vez de flotando en un recuadro.
   ===================================================================== */
.envoltorio--estrecho { width: min(100% - 48px, 860px); }
@media (max-width: 620px) { .envoltorio--estrecho { width: calc(100% - 32px); } }

.grande { font-size: clamp(19px, 2.2vw, 24px); color: var(--tinta-2); max-width: 54ch; }

/* Las tres cifras del «por qué en la empresa». No son tarjetas: son tres
   columnas separadas por un filete, como una tabla de datos. */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px;
  border-top: 2px solid var(--tinta); }
.cifra { padding: 26px 24px 24px; border-right: 1px solid var(--linea); }
.cifra:last-child { border-right: none; }
.cifra__num {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(29px, 3.5vw, 40px); line-height: 1; letter-spacing: -.03em;
  color: var(--conducir-leer); text-wrap: balance;
}
.cifra__que { display: block; margin-top: 10px; font-weight: 700; font-size: 17.5px; }
.cifra__pie { margin: 10px 0 0; font-size: 16.5px; color: var(--tinta-2); }
@media (max-width: 860px) {
  .cifras { grid-template-columns: 1fr; }
  .cifra { border-right: none; border-bottom: 1px solid var(--linea); }
  .cifra:last-child { border-bottom: none; }
}

/* La cita legal: pegada a lo que justifica, en pequeño pero legible. */
.fuente {
  margin: 18px 0 0; font-size: 16.5px; color: var(--tinta-2);
  padding-left: 14px; border-left: 3px solid var(--linea-viva); max-width: 60ch;
}

/* Los cursos, en lista con filete. El grupo manda sobre el curso, así que
   el grupo es el que lleva el color. */
.beta { display: grid; gap: 2px; margin-top: 30px; }
.ficha { padding: 20px 22px; background: var(--papel-alto); border-left: 4px solid var(--conducir); }
.ficha h3 { margin: 0 0 7px; }
.ficha p { margin: 0; font-size: 17px; color: var(--tinta-2); }

.lista-ves { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.lista-ves li { padding: 15px 20px; background: var(--papel-alto); border-left: 4px solid var(--descanso); }

.aviso-piloto {
  margin: 30px 0 0; padding: 18px 22px; background: var(--papel-alto);
  border: 2px solid var(--pasado); max-width: 62ch;
}
.aviso-piloto strong { font-family: var(--display); }

.cierre { background: var(--tinta); color: var(--papel); }
.cierre h2, .cierre h1 { color: var(--papel); }
.cierre p, .cierre li { color: color-mix(in srgb, var(--papel) 84%, var(--tinta)); }
.cierre .fuente { border-left-color: color-mix(in srgb, var(--papel) 45%, var(--tinta)); }
.cierre .btn { border-color: var(--papel); color: var(--papel); }
.cierre .btn--principal { background: var(--papel); color: var(--tinta); }
.cierre .btn--principal:hover { background: var(--conducir); border-color: var(--conducir); color: var(--tinta); }
.cierre .btn--linea:hover { background: var(--papel); color: var(--tinta); }

.legal__volver { display: inline-block; margin-bottom: 22px; font-size: 17px; color: var(--tinta-2); }
.legal__volver:hover { color: var(--tinta); }

/* ---------- Los cuatro símbolos, para que lo toque quien mira ----------- */
/* Son los mismos cuatro del aparato y en el mismo orden. Se pintan como
   botones de máquina, no como botones de web: cuadrados, con el símbolo
   grande y el nombre debajo, porque es así como se ven en el tacógrafo y
   la idea es que no haya nada nuevo que aprender. */
.jornada__invita {
  margin: 22px 0 10px; font-weight: 700;
  font-family: var(--display); font-size: clamp(17px, 1.9vw, 20px);
}
.simbolos-botones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.simbolo-boton {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px; cursor: pointer;
  background: var(--papel-alto); color: var(--tinta);
  border: 1px solid var(--linea); border-bottom: 4px solid var(--linea-viva);
  font-family: var(--texto-f); font-size: 16px; font-weight: 600;
  transition: border-color .12s var(--suave), background .12s var(--suave);
}
.simbolo-boton svg { width: 30px; height: 30px; }
.simbolo-boton:hover { background: var(--papel); }
.simbolo-boton--conducir { border-bottom-color: var(--conducir); }
.simbolo-boton--trabajo, .simbolo-boton--espera { border-bottom-color: var(--trabajo); }
.simbolo-boton--descanso { border-bottom-color: var(--descanso); }
/* El que está marcado se hunde, como una tecla pulsada. */
.simbolo-boton[aria-pressed="true"] {
  background: var(--tinta); color: var(--papel); border-color: var(--tinta);
}
@media (max-width: 620px) {
  .simbolos-botones { grid-template-columns: repeat(2, 1fr); }
  .simbolo-boton { font-size: 15px; padding: 13px 8px; }
}