/* nomadcode.es: hoja compartida.
   Paleta derivada de los dos extremos del propio logo: #120C0C → #D1242B.
   Un solo rojo en tres intensidades, un verde de apoyo y nada más. */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --papel:#FBFAF7; --sup:#F2F0E9; --linea:#DCD8CC; --linea2:#BEB8A6;
  --tinta:#171614; --tinta2:#57564F; --tinta3:#8B8880;
  --rojo:#D1242B; --rojo-hondo:#A3232A; --rojo-velo:rgba(209,36,43,.16);
  --verde:#2F4A44; --sombrio:#5E1E20;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Inter Tight',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

@font-face{font-family:'Newsreader';src:url('fonts/Newsreader-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/Newsreader-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/Newsreader-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('fonts/InterTight-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('fonts/InterTight-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

html{scroll-behavior:smooth}
body{background:var(--papel);color:var(--tinta);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
.contenedor{max-width:80rem;margin:0 auto;padding:0 32px}
a{color:inherit}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}

/* ── cabecera ── */
header{border-bottom:1px solid var(--linea)}
/* Ojo: .barra va en el MISMO elemento que .contenedor. Con el atajo
   padding:20px 0 se pisaba el padding:0 32px del contenedor y el logo
   quedaba pegado al borde. Solo vertical, para no tocar el lateral. */
.barra{display:flex;justify-content:space-between;align-items:center;
       padding-top:20px;padding-bottom:20px;gap:24px}
.barra picture,.barra img{width:196px;height:auto;display:block}
nav{display:flex;gap:26px;align-items:center;font-size:14px;color:var(--tinta2)}
nav a{color:inherit;text-decoration:none}
nav a:hover{color:var(--tinta)}
nav a.dest{color:var(--rojo);border-bottom:1px solid rgba(209,36,43,.35);padding-bottom:2px}
nav a[aria-current]{color:var(--tinta);font-weight:500}

/* ── piezas comunes ── */
.boton{display:inline-block;font-size:14.5px;font-weight:500;padding:13px 24px;
       background:var(--tinta);color:var(--papel);text-decoration:none;border:0;cursor:pointer;
       font-family:inherit}
.boton:hover{background:var(--rojo-hondo)}
.enlace{font-size:14.5px;color:var(--rojo);text-decoration:none;
        border-bottom:1px solid rgba(209,36,43,.3);padding-bottom:2px}
.campo{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta3)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rojo)}
.acciones{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* ── migas ── */
.migas{padding:16px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
       text-transform:uppercase;color:var(--tinta3)}
.migas a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linea)}
.migas a:hover{color:var(--tinta)}

/* ── portada de puesto: la ficha ── */
.ficha-puesto{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;padding:44px 0 40px;align-items:start}
.ficha-puesto h1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.2vw,56px);
                 line-height:1.02;letter-spacing:-.03em;margin-bottom:14px}
.ficha-puesto h1 em{font-style:italic;color:var(--rojo)}
.ficha-puesto .rol{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
                   text-transform:uppercase;color:var(--tinta3);margin-bottom:22px}
.ficha-puesto .entrada{font-size:17px;line-height:1.68;color:var(--tinta2);max-width:52ch;margin-bottom:26px}
.datos{border-top:1px solid var(--linea2)}
.datos div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--linea)}
.datos dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
          color:var(--tinta3);padding-top:3px}
.datos dd{font-size:15px;line-height:1.5}

/* ── secciones ── */
.seccion{padding:44px 0;border-top:1px solid var(--linea)}
.seccion > h2{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.02em;margin-bottom:8px}
.seccion > .sub{font-size:15.5px;line-height:1.6;color:var(--tinta2);max-width:66ch;margin-bottom:26px}

/* lista de funciones, numerada y con reglas */
.funciones{border-top:1px solid var(--linea2)}
.funciones li{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:baseline;
              padding:14px 0;border-bottom:1px solid var(--linea);list-style:none}
.funciones .n{font-family:var(--mono);font-size:11px;color:var(--rojo)}
.funciones p{font-size:16px;line-height:1.6}
.funciones b{font-weight:600}

/* lo que NO hace: el bloque que nadie pone en su web */
.limites{background:var(--sup);border-top:2px solid var(--tinta);padding:30px 32px;margin-top:30px}
.limites h3{font-family:var(--serif);font-weight:400;font-size:23px;margin-bottom:6px}
.limites > p{font-size:15px;color:var(--tinta2);line-height:1.6;max-width:64ch;margin-bottom:18px}
.limites ul{list-style:none}
.limites li{padding:10px 0 10px 26px;border-bottom:1px solid var(--linea);position:relative;
            font-size:15.5px;line-height:1.6}
.limites li:last-child{border-bottom:0}
.limites li::before{content:"-";content:"-" / "";position:absolute;left:0;color:var(--rojo);font-family:var(--mono)}

/* dos columnas de texto */
.doble{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.doble p{font-size:16px;line-height:1.68;color:var(--tinta2);margin-bottom:14px}
.doble h3{font-family:var(--serif);font-weight:400;font-size:21px;margin-bottom:10px}

/* fichas de los otros puestos */
.otros{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
       border:1px solid var(--linea)}
.otros a{background:var(--papel);padding:20px 20px 22px;text-decoration:none;display:block}
.otros a:hover{background:var(--sup)}
.otros .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--rojo);display:block;margin-bottom:7px}
.otros b{display:block;font-family:var(--serif);font-size:20px;font-weight:400;margin-bottom:5px}
.otros span{font-size:14px;color:var(--tinta2);line-height:1.5}

/* remate de pagina */
.remate{border-top:1px solid var(--linea2);background:var(--sup);margin-top:46px}
.remate .contenedor{display:flex;justify-content:space-between;align-items:center;
                    gap:28px;flex-wrap:wrap;padding-top:28px;padding-bottom:28px}
.remate p{font-size:16px;line-height:1.6;color:var(--tinta2);max-width:60ch}
.remate b{color:var(--tinta);font-weight:600}

/* pie */
footer{border-top:1px solid var(--linea);padding:34px 0 44px;font-size:13.5px;color:var(--tinta2)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:26px}
footer h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
          color:var(--tinta3);margin-bottom:11px;font-weight:500}
footer ul{list-style:none}
footer li{margin-bottom:7px}
footer a{text-decoration:none;color:var(--tinta2)}
footer a:hover{color:var(--tinta)}
footer .legal{border-top:1px solid var(--linea);padding-top:18px;font-size:12.5px;color:var(--tinta3);
              display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.nota{padding:18px 0 0;font-size:12.5px;color:var(--tinta3);line-height:1.6;max-width:78ch}

@media(max-width:900px){
  .contenedor{padding:0 20px}
  .barra{flex-wrap:wrap;gap:14px}
  nav{gap:16px;font-size:13px;flex-wrap:wrap}
  .ficha-puesto{grid-template-columns:1fr;gap:30px;padding:26px 0}
  .doble{grid-template-columns:1fr;gap:22px}
  .otros{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr;gap:24px}
  .limites{padding:22px 20px}
  .datos div{grid-template-columns:1fr;gap:3px}
}

/* ── formulario ── */
form{border-top:1px solid var(--linea2);padding-top:22px}
.etq{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
     text-transform:uppercase;color:var(--tinta3);margin:16px 0 6px}
.ctrl{width:100%;font-family:inherit;font-size:15.5px;color:var(--tinta);background:var(--papel);
      border:0;border-bottom:1px solid var(--linea2);padding:9px 2px;border-radius:0}
.ctrl:focus{outline:0;border-bottom-color:var(--rojo)}
select.ctrl{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinta3) 50%),
            linear-gradient(135deg,var(--tinta3) 50%,transparent 50%);
            background-position:calc(100% - 13px) 18px,calc(100% - 8px) 18px;
            background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}
textarea.ctrl{resize:vertical;line-height:1.6}
.miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.marca-conforme{display:flex;gap:11px;align-items:flex-start;margin-top:22px;
                font-size:14px;line-height:1.55;color:var(--tinta2)}
.marca-conforme input{margin-top:3px;accent-color:var(--rojo);flex:none}

/* ── textos legales ── */
.legal-texto{max-width:74ch;padding:26px 0 46px}
.legal-texto h1{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,46px);
                line-height:1.06;letter-spacing:-.028em;margin-bottom:14px}
.legal-texto h2{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.02em;
                margin:38px 0 10px;padding-top:20px;border-top:1px solid var(--linea)}
.legal-texto h3{font-family:var(--serif);font-weight:400;font-size:20px;margin:24px 0 8px}
.legal-texto h4{font-size:15px;font-weight:600;margin:18px 0 6px}
.legal-texto p{font-size:16px;line-height:1.72;color:var(--tinta2);margin-bottom:14px}
.legal-texto ul,.legal-texto ol{margin:0 0 16px 20px}
.legal-texto li{font-size:16px;line-height:1.7;color:var(--tinta2);margin-bottom:8px}
.legal-texto strong,.legal-texto b{color:var(--tinta);font-weight:600}
.legal-texto a{color:var(--rojo);text-decoration:none;border-bottom:1px solid rgba(209,36,43,.3)}
.legal-texto table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:14.5px;display:block;overflow-x:auto}
.legal-texto th,.legal-texto td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--linea);
                                vertical-align:top;line-height:1.55}
.legal-texto th{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
                color:var(--tinta3);font-weight:500;border-bottom-color:var(--linea2)}
.legal-texto hr{border:0;border-top:1px solid var(--linea);margin:30px 0}

/* ── portada: hero y cuadrante de 24 horas ──────────────────────────
   Estas reglas vivían incrustadas en la portada. Al pasar la web a hoja
   compartida se quedaron fuera y la home salió sin maquetar. */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;padding:54px 0 38px;align-items:end}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.4vw,60px);
         line-height:1.02;letter-spacing:-.03em}
.hero h1 em{font-style:italic;color:var(--rojo)}
.hero .col p{font-size:16px;line-height:1.68;color:var(--tinta2);max-width:48ch;margin-bottom:22px}

.cuadrante{padding-bottom:10px}
.rotulo-eje{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
            color:var(--tinta3);align-self:end;padding-bottom:6px}
.fila{display:grid;grid-template-columns:190px 1fr;align-items:stretch}
.regla{position:relative;height:26px;border-bottom:1px solid var(--linea2)}
.regla span{position:absolute;bottom:5px;transform:translateX(-50%);font-family:var(--mono);
            font-size:9.5px;color:var(--tinta3);letter-spacing:.06em}
.regla span:first-of-type{transform:none}
.regla span:last-of-type{transform:translateX(-100%)}
.etq{padding:13px 16px 13px 0;border-bottom:1px solid var(--linea);
     display:flex;flex-direction:column;justify-content:center}
.etq b{font-size:14px;font-weight:600;letter-spacing:-.005em;line-height:1.2}
.etq a{text-decoration:none}
.etq a:hover b{color:var(--rojo)}
.etq i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
       color:var(--tinta3);margin-top:3px}
.pista{position:relative;min-height:54px;border-bottom:1px solid var(--linea)}
.oficina{position:absolute;top:0;bottom:0;background:rgba(23,22,20,.05);
         border-left:1px dashed var(--linea2);border-right:1px dashed var(--linea2)}
.carril{position:absolute;inset:12px 0 12px 0}
.blq{position:absolute;top:0;bottom:0}
.blq b{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-family:var(--mono);
       font-size:9px;letter-spacing:.1em;font-weight:500;white-space:nowrap}
.blq.continuo{background:var(--rojo-hondo)} .blq.continuo b{color:var(--papel)}
.blq.reactivo{background:var(--rojo-velo)}  .blq.reactivo b{color:var(--tinta2)}
.blq.hito{background:var(--tinta)}          .blq.hito b{color:var(--papel)}
.blq.programado{background:var(--verde)}    .blq.programado b{color:var(--papel)}
.blq.continuado{background:rgba(47,74,68,.16);border-top:1px solid rgba(47,74,68,.4);
                border-bottom:1px solid rgba(47,74,68,.4)}
.blq.continuado b{color:var(--tinta2)}
.corchete{position:relative;height:28px}
.marca-of{position:absolute;top:0;bottom:10px;border-left:1px dashed var(--linea2);
          border-right:1px dashed var(--linea2);border-bottom:1px dashed var(--linea2)}
.marca-of span{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);background:var(--papel);
     padding:0 9px;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
     color:var(--tinta3);text-transform:uppercase;white-space:nowrap}
.leyenda{display:flex;gap:20px;flex-wrap:wrap;padding-top:16px;padding-bottom:4px;
         font-size:11.5px;color:var(--tinta3);line-height:1.7}
.leyenda i{display:inline-block;width:22px;height:9px;margin-right:7px;vertical-align:-1px;font-style:normal}
.aviso-scroll{display:none}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:26px;padding:32px 0 26px}
  /* El cuadrante no se apila: se lee de lado. Apilarlo destruye la comparación
     entre carriles, que es lo único que el gráfico existe para enseñar. */
  .cuadrante{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:14px}
  .fila{min-width:640px;grid-template-columns:124px 1fr}
  .etq{padding-right:10px}
  .etq b{font-size:12.5px} .etq i{font-size:8px;letter-spacing:.1em}
  .leyenda{gap:14px;font-size:11px}
  .aviso-scroll{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
                text-transform:uppercase;color:var(--tinta3);padding-bottom:8px}
}

/* Los rótulos de bloque se recortan en su propio bloque en vez de derramarse
   sobre los de al lado, que es lo que pasaba en el carril del comercial. */
.blq{overflow:hidden}

/* ── preguntas frecuentes ──
   <details> nativo: se abre y se cierra sin JavaScript, que la CSP prohíbe.
   El contenido cerrado sigue en el HTML, así que el buscador lo lee igual. */
.preguntas{border-top:1px solid var(--linea2);max-width:78ch}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas summary{display:grid;grid-template-columns:1fr 20px;gap:18px;align-items:baseline;
                   padding:16px 0;cursor:pointer;list-style:none;font-size:16.5px;font-weight:600;
                   line-height:1.45}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";font-family:var(--mono);font-size:16px;color:var(--rojo);text-align:right}
.preguntas details[open] summary::after{content:"\2212"}
.preguntas summary:hover{color:var(--rojo-hondo)}
.preguntas .resp{padding:0 38px 20px 0}
.preguntas .resp p{font-size:15.5px;line-height:1.68;color:var(--tinta2)}
.preguntas .resp p + p{margin-top:10px}
.preguntas .resp a{color:var(--rojo);text-decoration:none;border-bottom:1px solid rgba(209,36,43,.3)}

@media(max-width:900px){
  .preguntas summary{font-size:16px}
  .preguntas .resp{padding-right:0}
}

@media(max-width:900px){
  /* Objetivo táctil mínimo de 44px: con 37 el dedo falla más de lo que parece.
     También 16px de fuente en los campos, o iOS hace zoom al enfocarlos. */
  .ctrl{padding:12px 2px;font-size:16px}
  .boton{padding:15px 24px}
  .marca-conforme input{width:20px;height:20px}
  nav{gap:14px 18px}
}