/* =============================================================================
   FICHA DE SERVICIO · Camarero/a de extras — capa propia sobre public/estilos.css
   -----------------------------------------------------------------------------
   Aquí NO se declara ningún token: todos salen del bloque :root de estilos.css,
   que es la fuente de verdad del sistema «Madrugada». Sin bloque :root y sin un
   solo color literal; cualquier transparencia nueva se compone con color-mix
   sobre un token que ya existe.
   Solo vive aquí lo que la home no necesitaba: el hero de ficha, el cuadrante
   filtrado a un puesto, los bloques de riesgos y uniformidad, la comparación de
   escalas del convenio y los dos bloques de dato pendiente, que van en acero.
   ============================================================================= */

/* --- la cabecera compartida se salía del documento por debajo de 360 px -------
   El rótulo «E.T.T. · HOSTELERÍA · MADRID» mide más que el raíl a 320 px y
   arrastraba la página entera de lado. Se corrige solo en ese tramo para no
   tocar el aspecto que ya tiene a 390 px, que es el móvil real. */
@media (max-width:360px)
{
  .cabecera .env-ancho{gap:14px}
  .marca{gap:10px}
  .marca .nombre{font-size:20px}
  .marca .sub{font-size:8px;letter-spacing:.07em}
}

/* =============================================================================
   1 · HERO DE FICHA
   El bloque interior reusa el componente #hero de la home tal cual (foto a
   sangre, velos, 92vh). Aquí solo cambian el encuadre de la foto y las migas.
   ============================================================================= */
#hero-puesto{position:relative}
#hero .foto{object-position:54% 36%}

.migas{
  font-family:var(--dato);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acero);line-height:2.1;margin:0 0 18px;
}
.migas a{color:var(--acero);text-decoration:none;padding-block:7px;border-bottom:1px solid var(--acero-40)}
.migas a:hover{color:var(--ambar);border-bottom-color:var(--ambar)}
.migas .sep{color:var(--acero-60);padding-inline:6px}
.migas .aqui{color:var(--tinta-70)}

.hero-pie .dato{color:var(--tinta-70)}

/* =============================================================================
   2 · QUÉ HACE
   ============================================================================= */
#que-hace{padding-block:var(--pad-sec);border-top:1px solid var(--acero-14)}
.qh-grid{display:grid;grid-template-columns:1fr 420px;gap:clamp(40px,4.4vw,72px);align-items:start}
.qh-txt p{font-size:18px;line-height:1.68;color:var(--tinta-70);max-width:58ch}
.qh-txt p + p{margin-top:18px}
.qh-txt p b{color:var(--tinta);font-weight:600}
.qh-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:52% 32%}
.qh-foto figcaption{max-width:44ch}

.tareas{margin-top:clamp(34px,3vw,46px);border-top:1px solid var(--acero-25)}
.tareas li{
  display:grid;grid-template-columns:98px 1fr;gap:20px;align-items:baseline;
  padding:17px 4px;border-bottom:1px solid var(--acero-25);
}
.tareas .n{
  font-family:var(--dato);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acero);
}
.tareas .t{font-size:17.5px;line-height:1.5;color:var(--tinta)}

/* =============================================================================
   3 · TURNOS — la franja propia, sobre foto a sangre
   ============================================================================= */
#turnos{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(150px,12vw,205px)}
#turnos .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;z-index:-2}
#turnos .velo{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,
    var(--noche-72) 0, var(--noche-25) 42px, var(--noche-92) 150px,
    var(--noche-92) calc(100% - 165px), var(--noche-25) calc(100% - 45px), var(--noche-72) 100%);
}
#turnos .cab{max-width:62ch}
#turnos .entradilla{color:var(--tinta)}

/* la regla de 24 h de la home, aquí en flujo normal: el tramo encendido no
   depende de JavaScript porque en esta página no hay sección #madrugada que
   reciba la clase que lo despliega. */
#turnos .horario-24{position:relative;top:auto;margin-block:clamp(38px,3.6vw,56px) clamp(34px,3vw,48px)}
#turnos .horario-24 .tramo{transform:scaleX(1)}
#turnos .horario-24 .jornada{margin-top:14px}

.cuadro-puesto{min-width:700px}
.cuadro-puesto thead th:last-child,.cuadro-puesto tbody td.det{text-align:left}
.cuadro-puesto td.det{
  height:auto;padding:18px 22px;font-size:16.5px;line-height:1.55;color:var(--tinta-70);
}
.cuadro-puesto tr.madrugada td.det{color:var(--tinta)}
#turnos .madrugada-pie{margin-top:clamp(34px,3vw,48px);padding-bottom:0}
#turnos .madrugada-pie .cartel{max-width:58ch}

/* =============================================================================
   4 · FICHA DE DATOS
   ============================================================================= */
#ficha-datos{padding-block:var(--pad-sec)}
#ficha-datos .stat:nth-child(3n){border-right:none}
#ficha-datos .stat:last-child{border-right:none}
.stat--horquilla .v{font-size:clamp(26px,3.1vw,45px);letter-spacing:-.035em;line-height:1.08}
@media (max-width:1080px)
{
  #ficha-datos .stat:nth-child(3n){border-right:1px solid var(--acero-25)}
  #ficha-datos .stat:nth-child(2n){border-right:none}
}
@media (max-width:760px)
{
  #ficha-datos .stat:nth-child(n){border-right:none}
}

/* =============================================================================
   5 · QUÉ APORTA GESTEMPRO
   ============================================================================= */
#aporta{padding-block:var(--pad-sec);border-top:1px solid var(--acero-14)}

/* =============================================================================
   6 · QUÉ NECESITAMOS DE TI  (plano papel 1 de 2)
   ============================================================================= */
#necesitas{padding-block:var(--pad-sec)}
.reparto .por{color:var(--tinta-papel-60)}

/* =============================================================================
   7 · PROCESO
   ============================================================================= */
#proceso{padding-block:var(--pad-sec);border-top:1px solid var(--acero-14)}

/* =============================================================================
   8 · TIEMPOS — el bloque sin número, con su centinela en ACERO
   Lo que falta no puede ir del color de lo resuelto: el ámbar aquí no entra.
   ============================================================================= */
#tiempos{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}
.tiempos-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,5vw,84px);align-items:start}
.tiempos-grid .declaracion{
  font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.12;
  font-size:clamp(23px,2.35vw,34px);color:var(--tinta);max-width:20ch;margin-bottom:24px;
}
.tiempos-grid p{font-size:17.5px;line-height:1.66;color:var(--tinta-70);max-width:56ch}
.tiempos-grid p + p{margin-top:16px}
.tiempos-grid p b{color:var(--tinta);font-weight:600}

.pendiente-acero{
  border:1px solid var(--acero-40);border-left:3px solid var(--acero);
  background:var(--noche);padding:clamp(22px,2.2vw,30px);
}
.pendiente-acero .q{
  font-family:var(--dato);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acero);display:block;margin-bottom:10px;
}
.pendiente-acero p{font-size:16.5px;line-height:1.62;color:var(--tinta-70);max-width:44ch}

.lista-marcada{margin-top:26px;border-top:1px solid var(--acero-25)}
.lista-marcada li{
  display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:baseline;
  padding:14px 2px;border-bottom:1px solid var(--acero-25);
  font-size:16.5px;line-height:1.5;color:var(--tinta);
}
.lista-marcada li::before{content:"—";color:var(--acero);font-family:var(--dato);font-size:13px}

/* =============================================================================
   9 · UNIFORMIDAD
   ============================================================================= */
#uniformidad{padding-block:var(--pad-sec)}
.unif-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,4.4vw,76px);align-items:start}
.unif-grid p{font-size:18px;line-height:1.68;color:var(--tinta-70);max-width:56ch}
.unif-grid p + p{margin-top:18px}
.hoja{border:1px solid var(--acero-25);background:var(--superficie);padding:clamp(24px,2.4vw,34px)}
.hoja .k{
  font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acero);display:block;
}
.hoja svg{width:100%;height:auto;display:block;margin:24px 0 2px}
.unif-grid .lista-marcada li:last-child{border-bottom:none}

/* =============================================================================
   10 · PREVENCIÓN
   ============================================================================= */
#prevencion{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}
.prev-grid{display:grid;grid-template-columns:540px 1fr;gap:clamp(40px,4.4vw,76px);align-items:start}
.prev-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 46%}
.prev-foto figcaption{max-width:40ch}
.riesgos{border-top:1px solid var(--acero-25)}
.riesgos li{
  display:grid;grid-template-columns:34px 1fr;gap:20px;align-items:start;
  padding:20px 2px;border-bottom:1px solid var(--acero-25);
}
.riesgos svg{width:28px;height:28px;flex:none}
.riesgos h3{font-size:18.5px;margin-bottom:6px}
.riesgos p{font-size:16.5px;line-height:1.55;color:var(--tinta-70);max-width:52ch}

/* =============================================================================
   11 · CONVENIO DE LA CATEGORÍA  (plano papel 2 de 2)
   ============================================================================= */
#convenio-cat{padding-block:var(--pad-sec)}
.escalas{margin-top:clamp(34px,3.2vw,50px);border:1px solid var(--linea-papel);padding:clamp(22px,2.2vw,32px)}
.escalas .k{
  font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acero-hondo);display:block;
}
.escalas .aviso-escalas{font-size:16px;line-height:1.55;color:var(--tinta-papel-60);margin-top:10px;max-width:74ch}
.escala{margin-top:26px}
.escala + .escala{margin-top:30px;padding-top:26px;border-top:1px solid var(--linea-papel)}
.barras{margin-top:16px;display:grid;gap:14px}
.barra{display:grid;grid-template-columns:minmax(0,230px) 1fr auto;gap:18px;align-items:center}
.barra .nm{font-size:16.5px;line-height:1.35}
.barra .pista{height:14px;background:var(--papel-hondo);position:relative;border-radius:2px;overflow:hidden}
.barra .relleno{position:absolute;inset:0 auto 0 0;background:var(--acero-hondo);border-radius:2px}
.barra--propia .relleno{background:var(--tinta-papel-60)}
.barra .vv{
  font-family:var(--dato);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;
  white-space:nowrap;min-width:84px;text-align:right;
}

/* =============================================================================
   12 · ZONAS
   ============================================================================= */
#zonas-puesto{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}

/* =============================================================================
   13 · CASOS — vacío a propósito, y en acero
   ============================================================================= */
#casos{padding-block:var(--pad-sec)}
.vacio{
  border:1px solid var(--acero-25);border-left:3px solid var(--acero);background:var(--superficie);
  padding:clamp(28px,2.8vw,46px);display:grid;grid-template-columns:1fr 330px;
  gap:clamp(30px,3vw,60px);align-items:start;
}
.vacio .q{
  font-family:var(--dato);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acero);display:block;margin-bottom:14px;
}
.vacio .titular{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.14;
  font-size:clamp(21px,1.9vw,27px);color:var(--tinta);margin-bottom:14px;max-width:24ch;
}
.vacio p{font-size:17px;line-height:1.62;color:var(--tinta-70);max-width:58ch}
.vacio p + p{margin-top:14px}
.falta{border-top:1px solid var(--acero-25)}
.falta li{
  font-family:var(--dato);font-size:12.5px;line-height:1.5;letter-spacing:.03em;color:var(--tinta-70);
  padding:13px 0;border-bottom:1px solid var(--acero-25);display:grid;
  grid-template-columns:20px 1fr;gap:10px;
}
.falta li::before{content:"—";color:var(--acero-60)}

/* =============================================================================
   14 · PUESTOS RELACIONADOS
   ============================================================================= */
#relacionados{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}
.rejilla-relacionados{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#relacionados .puesto{background:var(--superficie-alta)}
#relacionados .puesto .marco::after{
  background:linear-gradient(to top,var(--superficie-alta) 0%,var(--noche-00) 32%);
}
.otro-puesto{
  margin-top:clamp(28px,2.6vw,40px);font-size:17px;line-height:1.6;color:var(--tinta);
  border-left:3px solid var(--acero);padding-left:18px;max-width:60ch;
}

/* =============================================================================
   15 · FAQ DEL PUESTO
   ============================================================================= */
#faq-puesto{padding-block:var(--pad-sec)}

/* =============================================================================
   16 · GALERÍA
   estilos.css deja #galeria sin aire abajo porque en la home le sigue una
   sección con su propio padding; aquí le sigue el cierre y hay que ponerlo.
   ============================================================================= */
#galeria{padding-bottom:var(--pad-sec)}

/* =============================================================================
   17 · CIERRE
   ============================================================================= */
#cta{background:var(--superficie);padding-block:var(--pad-sec)}

/* --- pie: el titular de columna va en h3 para no saltarse un nivel de
   encabezado después del h2 del cierre. Se pinta igual que el h4 de la home. */
.pie h3{
  font-family:var(--dato);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acero);font-weight:500;margin-bottom:18px;line-height:1.3;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width:1320px)
{
  .qh-grid{grid-template-columns:1fr 340px}
  .prev-grid{grid-template-columns:420px 1fr}
  .vacio{grid-template-columns:1fr 280px}
}
@media (max-width:1080px)
{
  .qh-grid{grid-template-columns:1fr;gap:38px}
  .qh-foto img{aspect-ratio:16/10;object-position:52% 34%}
  .tiempos-grid{grid-template-columns:1fr;gap:38px}
  .unif-grid{grid-template-columns:1fr;gap:36px}
  .prev-grid{grid-template-columns:1fr;gap:36px}
  .prev-foto img{aspect-ratio:16/10}
  .vacio{grid-template-columns:1fr;gap:30px}
  .rejilla-relacionados{grid-template-columns:repeat(2,1fr)}
  .barra{grid-template-columns:minmax(0,190px) 1fr auto;gap:14px}
}
@media (max-width:760px)
{
  .migas{line-height:2.3}
  .cuadro-puesto{min-width:620px}
  .cuadro-puesto td.det{padding:14px 16px;font-size:15.5px}
  .tareas li{grid-template-columns:1fr;gap:5px;padding:15px 2px}
  .rejilla-relacionados{grid-template-columns:1fr;gap:18px}
  #relacionados .puesto .marco{aspect-ratio:16/10}
  .barra{grid-template-columns:1fr auto;gap:6px 14px}
  .barra .nm{grid-area:1/1/2/3;font-size:16px}
  .barra .pista{grid-area:2/1}
  .barra .vv{grid-area:2/2;font-size:16px;min-width:0}
  .escalas{padding:20px 18px}
  .vacio{padding:26px 22px}
  .tiempos-grid .declaracion{font-size:clamp(21px,5.6vw,26px);max-width:none}
  #turnos .madrugada-pie{gap:22px}
}

/* =============================================================================
   PÁGINA DE CAPTACIÓN · /trabajo-camarero-madrid/
   -----------------------------------------------------------------------------
   Misma regla que arriba: aquí no se declara ningún token. Todo color sale del
   :root de estilos.css. Solo vive aquí lo que ni la home ni la ficha de servicio
   necesitaban: la regla de 24 h con el tramo de la oferta abierta (06:00–14:00,
   no la madrugada), las citas de ley en blockquote sobre papel, el panel de la
   oferta en línea, y los grupos de casillas y la capa de privacidad del registro.
   ============================================================================= */

/* --- 1 · hero del candidato ---------------------------------------------- */
#hero-candidato{position:relative}
#hero-candidato #hero .foto{object-position:50% 42%}
#hero-candidato #hero h1{font-size:clamp(38px,4.6vw,68px);max-width:15ch}

/* --- 2 · para quién ------------------------------------------------------- */
#para-quien{padding-block:var(--pad-sec);border-top:1px solid var(--acero-14)}
#para-quien .puesto .nota{margin-top:10px}
/* la ficha de la home cierra la tarjeta con un enlace que lleva el margin-top:auto;
   aquí la última pieza es el badge, así que el empujón al fondo va en él o las
   cuatro reglas de separación quedan a cuatro alturas distintas */
#para-quien .puesto .badge-nivel{margin-top:auto}

/* --- 3 · lo que hay abierto ----------------------------------------------- */
#puestos-abiertos{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}
/* rejilla de datos propia: la .rejilla-stats de la home trae los bordes cosidos a
   la posición de sus seis celdas y aquí son tres */
.cifras-oferta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--acero-25);border:1px solid var(--acero-25);
  margin-top:clamp(30px,3vw,44px);
}
.cifras-oferta .stat{background:var(--noche);border:none;padding:30px 28px 32px}
.cifras-oferta .stat .v{font-size:clamp(30px,3.4vw,50px);letter-spacing:-.03em}
.cifras-oferta .stat:not(.stat--reg) .v{font-size:clamp(38px,4.4vw,64px);letter-spacing:-.04em}
.oferta{
  margin-top:clamp(30px,3vw,44px);background:var(--noche);
  border:1px solid var(--acero-25);border-left:3px solid var(--ambar);
  padding:clamp(26px,2.6vw,40px);
}
.oferta .q{
  font-family:var(--dato);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acero);display:block;
}
.oferta .titular{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(21px,2vw,29px);color:var(--tinta);margin:16px 0 4px;max-width:30ch;
}
.oferta .lista-marcada li:last-child{border-bottom:none}
.oferta .nota-oferta{
  margin-top:20px;font-family:var(--cuerpo);font-style:italic;font-size:15.5px;
  line-height:1.6;color:var(--acero);max-width:72ch;
}

/* --- 4 · dónde se trabaja -------------------------------------------------- */
#donde-se-trabaja{padding-block:var(--pad-sec)}
.rejilla-casas--tres{grid-template-columns:repeat(3,1fr)}
.zonas-lista{
  margin-top:clamp(34px,3.2vw,50px);border-top:1px solid var(--acero-25);
  padding-top:26px;display:grid;gap:16px;
}
.zonas-lista .k{
  font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acero);
}
.zonas-lista p{font-size:17px;line-height:1.6;color:var(--tinta-70);max-width:72ch}

/* --- 5 · turnos ----------------------------------------------------------- */
#turnos-candidato{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(150px,12vw,205px)}
#turnos-candidato .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;z-index:-2}
#turnos-candidato .velo{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,
    var(--noche-72) 0, var(--noche-25) 42px, var(--noche-92) 150px,
    var(--noche-92) calc(100% - 165px), var(--noche-25) calc(100% - 45px), var(--noche-72) 100%);
}
#turnos-candidato .cab{max-width:64ch}
#turnos-candidato .entradilla{color:var(--tinta)}
/* la única franja con fuente es una frase de la oferta abierta, y se enseña tal cual: una regla
   de 24 horas con un tramo encendido obligaba a inventarle hora de entrada y de salida */
#turnos-candidato .cita-oferta{margin:clamp(38px,3.6vw,56px) 0 0;max-width:64ch;border-left:3px solid var(--acero);padding-left:20px}
#turnos-candidato .cita-oferta p{font-family:var(--cuerpo);font-style:italic;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--tinta)}
.turnos-grid{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,5vw,84px);
  align-items:start;margin-top:clamp(34px,3vw,48px);
}
.turnos-grid .declaracion{
  font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.12;
  font-size:clamp(23px,2.35vw,34px);color:var(--tinta);max-width:22ch;margin-bottom:24px;
}
.turnos-grid p:not(.declaracion){font-size:17.5px;line-height:1.66;color:var(--tinta-70);max-width:56ch}
.turnos-grid p + p{margin-top:16px}

/* --- 6 y 7 · los dos planos de papel seguidos ------------------------------ */
#cuanto-se-cobra{padding-block:var(--pad-sec) clamp(46px,4vw,70px)}
#tus-derechos{padding-block:clamp(46px,4vw,70px) var(--pad-sec)}
#cuanto-se-cobra .aviso-solidaria{margin-top:26px}

.derechos{border-top:1px solid var(--linea-papel)}
.derecho{padding-block:clamp(24px,2.4vw,34px);border-bottom:1px solid var(--linea-papel)}
.derecho h3{margin-bottom:10px}
.derecho .sentido p{font-size:17px;line-height:1.6;color:var(--tinta-papel-60);max-width:70ch}
.derecho .letra{margin-top:18px}
blockquote{margin:0}
.derecho blockquote{border-left:3px solid var(--acero-hondo);padding-left:20px;max-width:80ch}
.derecho blockquote p{
  font-family:var(--cuerpo);font-style:italic;font-size:16.5px;line-height:1.6;color:var(--tinta-papel);
}
/* el rótulo del artículo: acero sobre noche, acero hondo sobre papel. Nunca al revés:
   acero hondo sobre noche no llega al contraste mínimo */
.fuente-ley{
  font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acero);display:block;margin-top:12px;
}
.papel .fuente-ley{color:var(--acero-hondo)}

/* De 1081 px para arriba el derecho se lee en dos columnas: a la izquierda qué
   significa, a la derecha la letra literal del boletín. En una sola columna son
   seis bloques iguales ocupando media pantalla y la otra media en blanco. */
@media (min-width:1081px){
  .derecho{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut);align-items:start}
  .derecho .sentido p{max-width:42ch}
  .derecho .letra{margin-top:0}
  .derecho blockquote{max-width:none}
}

/* --- 8 · no cuesta nada ---------------------------------------------------- */
#no-cuesta-nada{padding-block:var(--pad-sec)}
.destacado-ley{
  border:1px solid var(--acero-25);border-left:3px solid var(--acero);
  background:var(--superficie);padding:clamp(28px,2.8vw,46px);max-width:92ch;
}
.destacado-ley blockquote p{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.18;
  font-size:clamp(20px,2.1vw,31px);color:var(--tinta);max-width:32ch;
}
.destacado-ley .fuente-ley{margin-top:16px}
.destacado-ley > p{margin-top:24px;font-size:17.5px;line-height:1.66;color:var(--tinta-70);max-width:62ch}

/* --- 9 · proceso ----------------------------------------------------------- */
#proceso-candidato{padding-block:var(--pad-sec);border-top:1px solid var(--acero-14)}

/* --- 10 · formación --------------------------------------------------------- */
#formacion{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}
.form-grid{display:grid;grid-template-columns:500px 1fr;gap:clamp(40px,4.4vw,76px);align-items:start}
.form-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 46%}
.form-foto figcaption{max-width:40ch}
.form-grid p:not(.pie-fuente){font-size:18px;line-height:1.68;color:var(--tinta-70);max-width:58ch}
.form-grid p + p{margin-top:18px}
.form-grid .lista-marcada li:last-child{border-bottom:none}

/* --- 11 · requisitos --------------------------------------------------------- */
#requisitos{padding-block:var(--pad-sec)}
.requisitos-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,4.5vw,76px);align-items:start}
.requisitos-grid .tareas{margin-top:0}
.requisitos-grid .tareas .t b{font-family:var(--dato);font-size:15.5px;font-weight:700;color:var(--tinta)}
.requisitos-grid .pendiente-acero p{max-width:52ch}

/* --- 12 · uniformidad -------------------------------------------------------- */
#uniformidad-candidato{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}
.unif-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%}
.unif-foto figcaption{max-width:40ch}
/* .unif-grid p gana por orden a .pendiente-acero p: se devuelve el tamaño del bloque en acero */
#uniformidad-candidato .pendiente-acero p{font-size:16.5px;line-height:1.62;max-width:56ch}
#uniformidad-candidato .pendiente-acero .lista-marcada{margin-top:18px}
#uniformidad-candidato .pendiente-acero .lista-marcada li:last-child{border-bottom:none}
#uniformidad-candidato .pendiente-acero .lista-marcada + p{margin-top:18px}

/* --- 13 · antes de empezar ---------------------------------------------------- */
#antes-de-empezar{padding-block:var(--pad-sec)}
#antes-de-empezar .casa .badge-nivel{margin-top:auto;padding-top:16px}
.nota-ley{
  margin-top:clamp(28px,2.6vw,40px);border:1px solid var(--acero-25);border-left:3px solid var(--acero);
  padding:20px 24px;max-width:88ch;
}
.nota-ley .q{
  font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acero);display:block;margin-bottom:8px;
}
.nota-ley p{font-size:16.5px;line-height:1.62;color:var(--tinta-70)}
.nota-ley p b{color:var(--tinta);font-weight:600}

/* --- 14 · fin de contrato ------------------------------------------------------ */
#fin-de-contrato{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}

/* --- 15 · quién es Gestempro ---------------------------------------------------- */
#quien-es-gestempro{padding-block:var(--pad-sec)}
#quien-es-gestempro .ficha-contacto{margin-top:0;max-width:80ch}

/* --- 16 · preguntas -------------------------------------------------------------- */
#faq-candidatos{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}

/* --- 17 · galería ---------------------------------------------------------------- */
#galeria-candidato{padding-block:var(--pad-sec)}

/* --- 18 · registro ----------------------------------------------------------------
   El formulario es maqueta: el botón nace `disabled` y `sitio.js` lo despierta solo
   para escribir el aviso. Las vías que sí llegan van al lado, no debajo. */
#registro{padding-block:var(--pad-sec);background:var(--superficie);border-top:1px solid var(--acero-14)}
#registro .pedir-grid{grid-template-columns:1.15fr 1fr;align-items:start}
#registro .formulario{background:var(--noche)}
.formulario fieldset.grupo{border:0;margin:0;padding:0;min-width:0;display:block}
.formulario .grupo legend{
  padding:0;font-family:var(--dato);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acero);margin-bottom:10px;
}
.casillas{display:flex;flex-wrap:wrap;gap:10px}
.casilla{
  display:flex;align-items:center;gap:11px;min-height:52px;padding:0 16px;
  border:1px solid var(--acero-25);border-radius:2px;background:var(--superficie);
}
.casilla input[type="checkbox"]{width:18px;height:18px;flex:none;margin:0;cursor:pointer;accent-color:var(--ambar)}
.casilla label{font-size:16.5px;line-height:1.35;color:var(--tinta);cursor:pointer}
.casilla--consent{align-items:flex-start;min-height:0;padding:16px;margin-top:20px}
.casilla--consent input[type="checkbox"]{margin-top:3px}
.casilla--consent label{font-size:15.5px;line-height:1.5;color:var(--tinta-70)}

.privacidad{margin-top:26px;border:1px solid var(--acero-25);background:var(--superficie);padding:20px 22px}
.privacidad .q{
  font-family:var(--dato);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acero);display:block;margin-bottom:14px;
}
.privacidad dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-items:baseline}
.privacidad dt{
  font-family:var(--dato);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta);white-space:nowrap;
}
.privacidad dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--tinta-70)}
.privacidad > p{margin-top:16px;font-size:15.5px;line-height:1.55;color:var(--tinta-70)}

.vias-reales{
  border:1px solid var(--acero-25);border-left:3px solid var(--acero);
  background:var(--noche);padding:clamp(26px,2.6vw,38px);
}
.vias-reales .q{
  font-family:var(--dato);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acero);display:block;
}
.vias-reales .titular{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(21px,1.9vw,27px);color:var(--tinta);margin:14px 0 0;max-width:22ch;
}
.vias-reales .ficha-contacto{margin-top:24px}
.vias-reales .ficha-contacto .fila{grid-template-columns:104px 1fr}
.vias-reales .fila--portal .v a{text-decoration:underline;text-decoration-color:var(--acero);text-underline-offset:5px}

/* --- 19 · cierre para empresas ------------------------------------------------------ */
#cta-empresa{padding-block:var(--pad-sec)}
#cta-empresa .hero-ctas{margin-top:0}

/* =============================================================================
   RESPONSIVE DE LA PÁGINA DE CAPTACIÓN
   ============================================================================= */
@media (max-width:1320px)
{
  .form-grid{grid-template-columns:420px 1fr}
  #registro .pedir-grid{grid-template-columns:1fr 1fr}
  .vias-reales .ficha-contacto .fila{grid-template-columns:1fr;gap:6px}
}
@media (max-width:1080px)
{
  .cifras-oferta{grid-template-columns:repeat(2,1fr)}
  .rejilla-casas--tres{grid-template-columns:repeat(2,1fr)}
  .turnos-grid{grid-template-columns:1fr;gap:38px}
  .form-grid{grid-template-columns:1fr;gap:36px}
  .form-foto img{aspect-ratio:16/10;object-position:50% 40%}
  .requisitos-grid{grid-template-columns:1fr;gap:36px}
  .unif-foto img{aspect-ratio:16/10}
  #registro .pedir-grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:760px)
{
  #hero-candidato #hero h1{max-width:none}
  .cifras-oferta{grid-template-columns:1fr}
  .cifras-oferta .stat{padding:26px 22px 28px}
  .rejilla-casas--tres{grid-template-columns:1fr}
  .oferta{padding:26px 20px}
  .destacado-ley{padding:26px 22px}
  .derecho blockquote{padding-left:16px}
  .privacidad dl{grid-template-columns:1fr;gap:4px}
  .privacidad dt{margin-top:12px}
  .privacidad dt:first-child{margin-top:0}
  .casillas{flex-direction:column;align-items:stretch}
  #turnos-candidato{padding-block:clamp(110px,22vw,150px)}
}

/* =============================================================================
   PÁGINAS LEGALES Y 404 · aviso legal, privacidad, cookies y ruta que no existe
   -----------------------------------------------------------------------------
   Son páginas de LECTURA, no fichas: una sola columna, medida corta y la misma
   escala tipográfica del resto. Aquí tampoco se declara ningún token: todo sale
   del bloque :root de estilos.css. Solo se añade lo que ninguna de las tres
   páginas anteriores necesitaba: el encabezado sin foto y el cuerpo de prosa.
   ============================================================================= */
.legal #legal-cab{padding-block:clamp(120px,11vw,176px) clamp(30px,3vw,48px)}
.legal #legal-cab h1{font-size:clamp(38px,4.8vw,70px);margin-top:16px}
.legal #legal-cab .entradilla{margin-top:22px;max-width:58ch}
.legal-sello{
  font-family:var(--dato);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acero);display:block;margin-top:26px;line-height:1.9;
}
/* el aviso de borrador: mismo bloque en acero de la ficha, con la medida de lectura */
.pendiente-acero--ancho{margin-top:clamp(28px,2.8vw,42px)}
.pendiente-acero--ancho p{max-width:68ch}
.pendiente-acero--ancho p + p{margin-top:12px}

.legal > section + section{border-top:1px solid var(--acero-14)}
.legal-bloque{padding-block:clamp(38px,3.8vw,60px)}
.legal-bloque h2{font-size:clamp(25px,2.5vw,37px);max-width:22ch}
.legal-texto{max-width:72ch;margin-top:20px}
.legal-texto p{font-size:17.5px;line-height:1.7;color:var(--tinta-70)}
.legal-texto > * + p,
.legal-texto > * + ul,
.legal-texto > * + .privacidad,
.legal-texto > * + .pendiente-acero{margin-top:18px}
.legal-texto h3{margin-top:30px;font-size:clamp(17px,1.35vw,21px)}
.legal-texto h3 + p{margin-top:10px}
.legal-texto ul{border-top:1px solid var(--acero-25)}
/* la raya va colgada y no en rejilla: un <li> con <strong> y texto suelto son DOS hijos, y en
   rejilla el texto caía a la columna de 20 px, una palabra por línea */
.legal-texto li{
  position:relative;
  padding:13px 2px 13px 34px;border-bottom:1px solid var(--acero-25);
  font-size:16.5px;line-height:1.55;color:var(--tinta-70);
}
.legal-texto li::before{content:"—";position:absolute;left:2px;top:13px;color:var(--acero);font-family:var(--dato);font-size:13px}
.legal-texto li strong{color:var(--tinta);font-weight:600}
.legal-texto .privacidad dd a{color:var(--acero)}

/* la ruta que no existe: una sola columna centrada, sin foto y sin sección de relleno */
.perdido{padding-block:clamp(130px,13vw,200px) clamp(70px,7vw,110px)}
.perdido h1{font-size:clamp(42px,5.4vw,78px);margin-top:16px;max-width:16ch}
.perdido .entradilla{margin-top:22px;max-width:52ch}
.perdido .hero-ctas{margin-top:clamp(30px,3vw,44px)}
.perdido h2{margin-top:clamp(46px,4.6vw,72px);font-size:clamp(23px,2.2vw,32px)}
.perdido .lista-marcada{max-width:62ch;margin-top:20px}

@media (max-width:760px)
{
  .legal-texto li{padding-left:26px}
  .legal #legal-cab{padding-block:clamp(104px,24vw,130px) 26px}
  .perdido{padding-block:clamp(110px,26vw,140px) 70px}
}