/* deriva de design/home/ELEGIDA.md sha256:7e257919431470eb
   Sistema «Madrugada». Sale de design/home/Madrugada.dc.html; desde el 2026-09-20 la fuente
   es ESTE fichero. Todo color es un token de :root: fuera de :root no hay ni un color literal. */
/* ===========================================================================
   MADRUGADA — dirección de arte para la home de GesTempro
   Todos los colores viven en :root. Fuera de :root no hay ni un color literal.
   =========================================================================== */
:root{
  /* --- plano noche --- */
  --noche:#141110;
  --superficie:#1E1916;
  --superficie-alta:#251F1B;
  --tinta:#F0E9E1;
  --tinta-70:#B3A99E;
  --acero:#8FA6B5;
  --ambar:#F2A63B;
  /* --- plano papel --- */
  --papel:#F6F2EC;
  --papel-hondo:#EDE6DC;
  --tinta-papel:#191512;
  --tinta-papel-60:#5B534B;
  --acero-hondo:#4A5C68;

  /* --- derivados con alfa (se declaran aquí para no dejar rgba() suelto) --- */
  --noche-92:color-mix(in srgb, var(--noche) 92%, transparent);
  --noche-84:color-mix(in srgb, var(--noche) 84%, transparent);
  --noche-72:color-mix(in srgb, var(--noche) 72%, transparent);
  --noche-55:color-mix(in srgb, var(--noche) 55%, transparent);
  --noche-25:color-mix(in srgb, var(--noche) 25%, transparent);
  --noche-00:color-mix(in srgb, var(--noche) 0%, transparent);
  --acero-60:color-mix(in srgb, var(--acero) 60%, transparent);
  --acero-40:color-mix(in srgb, var(--acero) 40%, transparent);
  --acero-25:color-mix(in srgb, var(--acero) 25%, transparent);
  --acero-14:color-mix(in srgb, var(--acero) 14%, transparent);
  --acero-08:color-mix(in srgb, var(--acero) 8%, transparent);
  --ambar-40:color-mix(in srgb, var(--ambar) 40%, transparent);
  --ambar-25:color-mix(in srgb, var(--ambar) 25%, transparent);
  --ambar-12:color-mix(in srgb, var(--ambar) 12%, transparent);
  --acero-hondo-28:color-mix(in srgb, var(--acero-hondo) 28%, transparent);
  --acero-hondo-10:color-mix(in srgb, var(--acero-hondo) 10%, transparent);
  --tinta-12:color-mix(in srgb, var(--tinta) 12%, transparent);
  --linea-papel:color-mix(in srgb, var(--tinta-papel) 14%, transparent);
  --linea-papel-suave:color-mix(in srgb, var(--tinta-papel) 8%, transparent);
  --papel-50:color-mix(in srgb, var(--papel) 50%, transparent);

  /* --- velos --- */
  --velo-hero:linear-gradient(100deg, var(--noche) 0%, var(--noche-84) 44%, var(--noche-25) 100%);
  --velo-hero-base:linear-gradient(to top, var(--noche) 0%, var(--noche-00) 38%);
  --velo-noche:linear-gradient(to bottom, var(--noche-92) 0%, var(--noche-55) 45%, var(--noche-72) 100%);
  --velo-tarjeta:linear-gradient(to top, var(--superficie) 0%, var(--noche-00) 32%);
  --velo-madrugada:linear-gradient(to bottom, var(--noche-92) 0%, var(--noche-84) 42%, var(--noche-72) 64%, var(--noche-84) 100%);
  --velo-madrugada-izq:linear-gradient(100deg, var(--noche-84) 0%, var(--noche-25) 58%, var(--noche-00) 82%);

  /* --- tramas (imagen, no gradiente: refuerzan rejilla y papel) --- */
  --trama-rejilla:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2740%27%20height%3D%2740%27%3E%3Cpath%20d%3D%27M40%200H0v40%27%20fill%3D%27none%27%20stroke%3D%27%238FA6B5%27%20stroke-opacity%3D%27.13%27%20stroke-width%3D%271%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --trama-papel:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%279%27%20height%3D%279%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%27.65%27%20fill%3D%27%23191512%27%20fill-opacity%3D%27.07%27%3E%3C%2Fcircle%3E%3C%2Fsvg%3E");

  /* --- tipografía --- */
  --display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --cuerpo:"Newsreader",Georgia,"Times New Roman",serif;
  --dato:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* --- medidas --- */
  --env:1320px;
  --gut:60px;
  --pad-sec:clamp(76px,7vw,132px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noche);color:var(--tinta);
  font-family:var(--cuerpo);font-size:18px;line-height:1.65;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.02em;line-height:1.02}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:2px}
.papel :focus-visible{outline-color:var(--tinta-papel)}
.banda-ambar :focus-visible{outline-color:var(--noche)}

.saltar{
  position:absolute;left:16px;top:-64px;z-index:200;
  background:var(--ambar);color:var(--noche);padding:12px 20px;
  font-family:var(--dato);font-size:13px;text-decoration:none;transition:top .18s;
}
.saltar:focus{top:16px}

/* un solo raíl de contenido en toda la página: lo demás es sangre completa */
.env,.env-ancho{width:min(var(--env),100% - 2*var(--gut));margin-inline:auto}

/* --- rótulos, títulos, pies --------------------------------------------- */
.rotulo{
  font-family:var(--dato);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acero);display:flex;align-items:center;gap:12px;
}
.rotulo::before{content:"";width:26px;height:1px;background:var(--acero-40);flex:none}
.papel .rotulo{color:var(--acero-hondo)}
.papel .rotulo::before{background:var(--acero-hondo);opacity:.45}

h2{font-size:clamp(31px,3.35vw,50px);font-weight:700}
h3{font-size:clamp(19px,1.5vw,24px);font-weight:700;letter-spacing:-.015em}
.entradilla{font-size:clamp(18px,1.35vw,21px);line-height:1.6;color:var(--tinta-70);max-width:62ch}
.papel .entradilla{color:var(--tinta-papel-60)}
.cab{display:grid;gap:18px;margin-bottom:clamp(38px,3.6vw,60px);max-width:74ch}
.cab h2{margin-top:2px}

.pie-fuente{
  font-family:var(--cuerpo);font-style:italic;font-size:14.5px;line-height:1.6;color:var(--acero);
  margin-top:26px;max-width:84ch;
}
.pie-fuente .dato{font-family:var(--dato);font-style:normal;font-size:12.5px;letter-spacing:.01em}
.papel .pie-fuente{color:var(--acero-hondo)}

/* --- botones ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;
  min-height:56px;padding:13px 28px;border-radius:999px;border:1px solid transparent;
  font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1.3;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.btn--ambar{background:var(--ambar);color:var(--noche)}
.btn--ambar:hover{background:var(--tinta);transform:translateY(-1px)}
.btn--linea{background:none;border-color:var(--acero-40);color:var(--tinta)}
.btn--linea:hover{border-color:var(--acero);background:var(--acero-08)}
.btn--noche{background:var(--noche);color:var(--ambar)}
.btn--noche:hover{background:var(--superficie);transform:translateY(-1px)}
.btn--papel{background:var(--tinta-papel);color:var(--papel)}
.btn--papel:hover{background:var(--acero-hondo)}
.btn .num{font-family:var(--dato);font-weight:700;font-size:15.5px;letter-spacing:.01em;white-space:nowrap}
.enlace{
  color:var(--acero);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;font-size:16px;
}
.enlace:hover{color:var(--ambar)}

/* --- chips / badges ------------------------------------------------------ */
.chip{
  display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--acero-25);font-family:var(--dato);font-size:11.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-70);white-space:nowrap;
}
.chip .punto{width:7px;height:7px;border-radius:999px;background:var(--ambar);flex:none}
.chip--ambar{border-color:var(--ambar-40);color:var(--ambar)}
.chip--papel{border-color:var(--linea-papel);color:var(--tinta-papel-60)}
.badge-nivel{
  display:block;font-family:var(--dato);font-size:12px;line-height:1.55;
  font-weight:500;letter-spacing:.05em;color:var(--acero);
  border-top:1px solid var(--acero-25);padding-top:14px;margin-top:16px;width:100%;
}
.badge-nivel b{color:var(--tinta);font-weight:700;white-space:nowrap}

/* ===========================================================================
   CABECERA
   =========================================================================== */
.cabecera{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .25s,border-color .25s,backdrop-filter .25s;
  border-bottom:1px solid transparent;
}
.cabecera.pegada{background:var(--noche-92);border-bottom-color:var(--acero-14);backdrop-filter:blur(10px)}
.cabecera .env-ancho{display:flex;align-items:center;gap:28px;height:86px}
.marca{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
.marca .glifo{width:28px;height:28px;flex:none}
.marca .nombre{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.035em;color:var(--tinta)}
.marca .nombre em{font-style:normal;color:var(--ambar)}
.marca .sub{
  display:block;font-family:var(--dato);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acero);margin-top:-2px;
}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  text-decoration:none;font-family:var(--display);font-weight:600;font-size:14.5px;
  color:var(--tinta-70);padding:12px 11px;border-radius:2px;line-height:1.3;white-space:nowrap;
  display:flex;align-items:center;min-height:44px;transition:color .16s;
}
.nav a:hover{color:var(--ambar)}
.cab-tel{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;
  text-decoration:none;color:var(--tinta);white-space:nowrap;
  font-family:var(--dato);font-size:14px;font-weight:500;padding:8px 0 8px 18px;min-height:44px;
  border-left:1px solid var(--acero-25);margin-left:14px;
}
.cab-tel span{color:var(--acero);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;display:block;line-height:1.2}
.cab-tel:hover{color:var(--ambar)}
.cab-cta{min-height:48px;padding:0 20px;font-size:15px;flex:none;margin-left:18px;flex-wrap:nowrap}
.hamb{
  display:none;width:48px;height:48px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--acero-25);border-radius:2px;cursor:pointer;margin-left:auto;
}
.hamb i{display:block;width:20px;height:1.5px;background:var(--tinta);position:relative}
.hamb i::before,.hamb i::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--tinta)}
.hamb i::before{top:-6px}.hamb i::after{top:6px}
.panel-movil{display:none}

/* ===========================================================================
   1 · HERO
   =========================================================================== */
#hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
#hero .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 22%;z-index:-2}
#hero .velo{position:absolute;inset:0;z-index:-1;background:var(--velo-hero)}
#hero .velo2{position:absolute;inset:0;z-index:-1;background:var(--velo-hero-base)}
.hero-cuerpo{padding-block:clamp(120px,13vw,168px) 0}
.hero-txt{max-width:780px}
#hero h1{
  font-size:clamp(40px,5.45vw,80px);font-weight:800;line-height:.96;letter-spacing:-.028em;
  margin:26px 0 24px;
}
#hero h1 .l2{color:var(--ambar)}
#hero .entradilla{max-width:52ch;color:var(--tinta);font-size:clamp(18px,1.4vw,20px)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn--dos .t::after{content:",\00a0"}
.hero-pie{
  display:flex;align-items:center;gap:16px;margin-top:clamp(40px,5vw,74px);
  padding-block:20px;border-top:1px solid var(--acero-25);
  font-family:var(--dato);font-size:12.5px;letter-spacing:.05em;color:var(--acero);
  flex-wrap:wrap;
}
.hero-pie .marca-ambar{width:34px;height:5px;background:var(--ambar);flex:none}
.hero-pie .sep{color:var(--acero-60)}

/* ===========================================================================
   2 · CUADRANTE
   =========================================================================== */
#cuadrante{background:var(--superficie);background-image:var(--trama-rejilla);padding-block:clamp(64px,5.4vw,96px)}
.cuadrante-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:40px}
.cuadrante-cab h2{max-width:16ch;font-size:clamp(28px,2.9vw,44px)}
.cuadrante-leyenda{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.ley{display:flex;align-items:center;gap:10px;font-family:var(--dato);font-size:12px;color:var(--acero);letter-spacing:.04em}
.ley .caja{width:34px;height:18px;border:1px dashed var(--acero-40);flex:none}
.ley .caja.on{background:var(--ambar);border:1px solid var(--ambar)}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.horario-cuadro{min-width:760px;border:1px solid var(--acero-25)}
.horario-cuadro th,.horario-cuadro td{border:1px solid var(--acero-25);padding:0}
.horario-cuadro thead th{
  background:var(--noche);padding:16px 18px;text-align:left;
  font-family:var(--dato);font-size:11.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acero);
}
.horario-cuadro tbody th{
  background:var(--noche);padding:18px;text-align:left;width:210px;vertical-align:middle;font-weight:400;
}
.horario-cuadro tbody th .h{font-family:var(--dato);font-size:15px;font-weight:700;color:var(--tinta);display:block;letter-spacing:.02em}
.horario-cuadro tbody th .n{font-size:15px;font-style:italic;color:var(--tinta-70);display:block;margin-top:2px}
.horario-cuadro td{height:78px;vertical-align:middle;text-align:center;background:var(--noche)}
.celda{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:132px;height:38px;padding:0 14px;
  font-family:var(--dato);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
}
/* el sello ámbar es una marca, no un relleno: si todo fuera ámbar, el ámbar no diría nada */
.celda.on{background:var(--ambar);color:var(--noche);font-weight:700}
.celda.off{color:var(--acero);border:1px dashed var(--acero-40)}
.horario-cuadro tr.madrugada th,.horario-cuadro tr.madrugada td{background:var(--superficie-alta)}
.horario-cuadro tr.madrugada th{border-left:3px solid var(--ambar)}
.horario-cuadro tr.madrugada th .h{color:var(--ambar)}
.horario-cuadro tr.madrugada th .n{color:var(--tinta)}
.scroll-pista{display:none;font-family:var(--dato);font-size:11.5px;color:var(--acero);margin-top:12px;letter-spacing:.06em}

/* ===========================================================================
   3 · URGENCIA
   =========================================================================== */
.banda-ambar{background:var(--ambar);color:var(--noche);padding-block:clamp(44px,4vw,60px)}
.banda-ambar .env{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.banda-ambar h2{font-size:clamp(28px,3vw,44px);color:var(--noche);letter-spacing:-.025em}
.banda-ambar p{max-width:46ch;margin-top:12px;font-size:18px;color:var(--noche)}
.banda-ambar .lado{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.banda-ambar .enlace{color:var(--noche);opacity:.78;font-family:var(--dato);font-size:14px;display:inline-flex;align-items:center;min-height:44px}
.banda-ambar .enlace:hover{opacity:1;color:var(--noche)}

/* ===========================================================================
   4 · PUESTOS
   =========================================================================== */
#puestos{padding-block:var(--pad-sec)}
.rejilla-puestos{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.puesto{display:flex;flex-direction:column;background:var(--superficie);border-radius:2px;overflow:hidden}
.puesto .marco{position:relative;aspect-ratio:4/5;overflow:hidden}
.puesto .marco img{width:100%;height:100%;object-fit:cover}
.puesto .marco::after{content:"";position:absolute;inset:0;background:var(--velo-tarjeta)}
.puesto .cuerpo{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.puesto h3{margin-bottom:12px}
.puesto p{font-size:16.5px;line-height:1.62;color:var(--tinta-70)}
.puesto .nota{font-size:14.5px;font-style:italic;color:var(--acero);margin-top:12px}
.puesto .nota b{font-family:var(--dato);font-style:normal;font-size:13.5px;color:var(--tinta);font-weight:700}
.puesto .badge-nivel{margin-top:0}
.puesto .ficha{
  margin-top:auto;padding-top:14px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--acero);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;
}
.puesto .ficha:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:4px}

/* ===========================================================================
   5 · CÓMO FUNCIONA
   =========================================================================== */
#como{padding-block:var(--pad-sec);border-top:1px solid var(--acero-14)}
.pasos{display:grid}
.paso{display:grid;grid-template-columns:130px 1fr 260px;gap:44px;padding-block:40px;border-top:1px solid var(--acero-25);align-items:start}
.paso:first-child{border-top:none;padding-top:8px}
.paso .cifra{font-family:var(--dato);font-size:clamp(38px,3.6vw,56px);font-weight:700;color:var(--acero-60);line-height:1;letter-spacing:-.03em}
.paso h3{margin-bottom:12px}
.paso p{font-size:18px;line-height:1.68;color:var(--tinta-70);max-width:62ch}
.paso p b{color:var(--tinta);font-weight:600}
.paso .apunte{
  font-family:var(--dato);font-size:11.5px;line-height:1.85;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acero);border-top:1px solid var(--acero-25);padding-top:14px;
}

/* ===========================================================================
   6 · MADRUGADA — el momento
   =========================================================================== */
#madrugada{position:relative;min-height:100vh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
#madrugada .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-2}
#madrugada .velo{position:absolute;inset:0;z-index:-1;background:var(--velo-madrugada)}
#madrugada .velo2{position:absolute;inset:0 0 34% 0;z-index:-1;background:var(--velo-madrugada-izq)}
/* la ventana: el único trozo de fotografía a plena luz. Se APOYA en el tramo ámbar de la regla (que corre de
   12:00 a 12:00 para que 02-06 caiga en el 58-75 % del ancho: la mano que emplata, lejos de la columna de texto) */
#madrugada .ventana{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  clip-path:inset(30% calc(100% - 58.34%) 34% 58.34%);
  transition:clip-path .95s cubic-bezier(.22,.7,.2,1);
}
#madrugada.on .ventana{clip-path:inset(30% calc(100% - 75%) 34% 58.34%)}
#madrugada .ventana img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#madrugada .ventana-marco{
  position:absolute;left:58.34%;width:16.66%;top:30%;bottom:34%;z-index:1;pointer-events:none;
  border:1px solid var(--ambar-40);border-bottom:none;
  transform:scaleX(0);transform-origin:left center;transition:transform .95s cubic-bezier(.22,.7,.2,1);
}
#madrugada.on .ventana-marco{transform:scaleX(1)}
.madrugada-txt{padding-top:clamp(88px,9vw,132px);max-width:min(640px,50vw)}
.madrugada-txt h2{margin:22px 0 22px;font-size:clamp(34px,4.1vw,60px);line-height:.98}
.madrugada-txt p{color:var(--tinta);font-size:clamp(17px,1.3vw,19.5px);line-height:1.66;max-width:54ch}
.madrugada-txt p + p{margin-top:16px}
.madrugada-txt p b{color:var(--ambar);font-weight:600}
.horario-24{position:absolute;left:0;right:0;top:66%;z-index:2}
.horario-24 .linea{height:1px;background:var(--acero-40)}
.horario-24 .tramo{
  position:absolute;left:58.34%;width:16.66%;top:-3px;height:6px;background:var(--ambar);
  transform:scaleX(0);transform-origin:left center;transition:transform .95s cubic-bezier(.22,.7,.2,1);
}
#madrugada.on .horario-24 .tramo{transform:scaleX(1)}
.horario-24 .ticks{position:relative;height:30px}
.horario-24 .tk{position:absolute;top:0;transform:translateX(-50%);text-align:center}
.horario-24 .tk::before{content:"";display:block;width:1px;height:8px;background:var(--acero-40);margin:0 auto}
.horario-24 .tk time{font-family:var(--dato);font-size:11px;color:var(--tinta-70);letter-spacing:.06em;display:block;margin-top:5px}
.horario-24 .tk.viva::before{background:var(--ambar);height:12px}
.horario-24 .tk.viva time{color:var(--ambar);font-weight:700}
.horario-24 .jornada{
  font-family:var(--dato);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-70);text-align:right;margin-top:12px;
}
.madrugada-pie{
  margin-top:auto;padding-bottom:clamp(30px,3vw,44px);position:relative;z-index:3;
  display:flex;align-items:flex-end;justify-content:flex-start;gap:clamp(28px,3vw,56px);flex-wrap:wrap;
}
.madrugada-pie .cartel{
  border-left:3px solid var(--ambar);padding-left:18px;max-width:38ch;
  font-family:var(--cuerpo);font-size:15.5px;line-height:1.6;color:var(--tinta);
  background:var(--noche-72);padding-block:12px;padding-right:16px;
}
.madrugada-pie .cartel b{font-family:var(--dato);color:var(--ambar);font-weight:700;display:block;font-size:14px;letter-spacing:.09em;margin-bottom:4px}

/* ===========================================================================
   PLANO PAPEL (7 y 8)
   =========================================================================== */
.papel{background:var(--papel);background-image:var(--trama-papel);color:var(--tinta-papel)}
.papel h2,.papel h3{color:var(--tinta-papel)}
#responsabilidades{padding-block:var(--pad-sec) clamp(46px,4vw,70px)}
#convenio{padding-block:clamp(46px,4vw,70px) var(--pad-sec)}
.reparto{border-top:2px solid var(--tinta-papel)}
.reparto thead th{
  text-align:left;padding:20px 22px 18px;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.35vw,21px);letter-spacing:-.01em;width:50%;vertical-align:bottom;
}
.reparto thead th:first-child{border-right:1px solid var(--linea-papel)}
.reparto thead th .q{
  display:block;font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acero-hondo);font-weight:500;margin-bottom:8px;
}
.reparto tbody td{
  padding:19px 22px;border-top:1px solid var(--linea-papel);vertical-align:top;
  font-size:17px;line-height:1.55;width:50%;
}
.reparto tbody td:first-child{border-right:1px solid var(--linea-papel)}
.reparto tbody tr:hover td{background:var(--papel-hondo)}
.reparto .mk{display:inline-block;width:18px;font-family:var(--dato);font-size:13px;color:var(--acero-hondo)}
.reparto td:first-child .mk{color:var(--tinta-papel)}
.reparto .grave{background:var(--acero-hondo-10)}
.reparto .grave b{font-weight:600;box-shadow:inset 0 -.5em 0 var(--acero-hondo-28)}
.aviso-solidaria{
  margin-top:26px;border-left:4px solid var(--acero-hondo);padding:16px 20px;background:var(--papel-hondo);
  font-size:16.5px;line-height:1.6;max-width:78ch;
}
.aviso-solidaria .q{
  font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acero-hondo);display:block;margin-bottom:6px;
}
.barra-tabla{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--linea-papel);margin-bottom:0;
}
.barra-tabla .k{
  font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acero-hondo);
}
.tarifas-convenio{border-top:none}
.tarifas-convenio th,.tarifas-convenio td{padding:15px 18px;text-align:left;border-top:1px solid var(--linea-papel)}
.tarifas-convenio thead th{
  border-top:none;font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acero-hondo);font-weight:500;padding-top:16px;padding-bottom:12px;
}
.tarifas-convenio tbody tr:hover{background:var(--papel-hondo)}
.tarifas-convenio td{font-size:17px}
.tarifas-convenio .concepto{font-weight:600;width:40%}
.tarifas-convenio .nivel{color:var(--tinta-papel-60);font-size:16px;width:24%}
.tarifas-convenio .imp{
  font-family:var(--dato);font-weight:700;font-size:17px;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;width:18%;
}
.tarifas-convenio .per{font-family:var(--dato);font-size:12.5px;color:var(--acero-hondo);text-align:right;width:18%;letter-spacing:.02em}
.ultra{
  margin-top:28px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  border:1px solid var(--linea-papel);padding:20px 24px;max-width:88ch;
}
.ultra .q{
  font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--papel);background:var(--tinta-papel);padding:6px 10px;white-space:nowrap;
}
.ultra p{font-size:16.5px;line-height:1.6}

/* ===========================================================================
   9 · CLIENTES
   =========================================================================== */
#clientes{padding-block:var(--pad-sec)}
.rejilla-casas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--acero-25);border:1px solid var(--acero-25)}
.casa{background:var(--superficie);padding:32px 28px 34px;display:flex;flex-direction:column}
.casa svg{width:52px;height:52px;margin-bottom:24px}
.casa h3{margin-bottom:12px;font-size:20px}
.casa p{font-size:16.5px;line-height:1.6;color:var(--tinta-70)}

/* ===========================================================================
   10 · ZONAS
   =========================================================================== */
#zonas{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}
/* las dos columnas cierran a la misma altura: la nota de la izquierda se ancla abajo (H3) */
.zonas-grid{display:grid;grid-template-columns:420px 1fr;gap:clamp(40px,4.5vw,72px);align-items:stretch}
.zonas-izq{display:flex;flex-direction:column}
.zonas-izq .zona-panel{margin-bottom:26px}
.zonas-izq .zonas-fuera{margin-top:auto}
.zonas-tabs{display:flex;flex-direction:column;gap:2px;margin-top:30px;border-top:1px solid var(--acero-25)}
.zonas-tabs button{
  background:none;border:none;border-bottom:1px solid var(--acero-25);text-align:left;
  padding:16px 14px;min-height:56px;cursor:pointer;display:flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--tinta-70);transition:color .16s,background .16s;
}
.zonas-tabs button .pt{width:9px;height:9px;border-radius:999px;border:1px solid var(--acero);flex:none}
.zonas-tabs button:hover{color:var(--tinta);background:var(--acero-08)}
.zonas-tabs button[aria-selected="true"]{color:var(--ambar);background:var(--ambar-12)}
.zonas-tabs button[aria-selected="true"] .pt{background:var(--ambar);border-color:var(--ambar)}
.zonas-tabs button .qt{margin-left:auto;font-family:var(--dato);font-size:11.5px;letter-spacing:.06em;color:var(--acero)}
.map{position:relative;background:var(--noche);border:1px solid var(--acero-25);padding:26px}
.map svg{width:100%;height:auto;display:block}
.zona-panel{margin-top:22px;border-top:1px solid var(--acero-25);padding-top:20px;min-height:96px}
.zona-panel h3{font-size:22px;margin-bottom:8px}
.zona-panel p{color:var(--tinta-70);font-size:17px;max-width:58ch}
.zona-panel .dd{font-family:var(--dato);font-size:12px;color:var(--acero);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.zonas-fuera{margin-top:26px;font-size:17px;color:var(--tinta);border-left:3px solid var(--acero);padding-left:18px;max-width:52ch}
.mp-anillo{fill:none;stroke:var(--acero-60);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.mp-via{fill:none;stroke:var(--acero-25);stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
.mp-via--anillo{stroke:var(--acero-40);stroke-width:1.2}
.mp-escala{fill:none;stroke:var(--acero-60);stroke-width:1}
.mp-norte{fill:var(--acero-60)}
/* rótulo SOBRE un trazo: el contorno del color del fondo abre hueco en la línea que pisa */
.mp-eje--halo{paint-order:stroke;stroke:var(--noche);stroke-width:4px;stroke-linejoin:round}
.mp-pt{fill:var(--ambar);transition:fill .2s}
/* zona no elegida: círculo HUECO en acero. El ámbar solo lo lleva la que está encendida */
.mp-pt.mp-pt-off{fill:var(--noche);stroke:var(--acero);stroke-width:1.5}
/* el halo se apaga con una CLASE: el atributo opacity="0" del SVG pierde contra cualquier regla CSS */
.mp-halo{fill:none;stroke:var(--acero);stroke-width:1.5;opacity:0;transition:opacity .2s}
.mp-halo.on{stroke:var(--ambar);opacity:.65}
.mp-txt{font-family:var(--dato);font-size:11px;fill:var(--acero);letter-spacing:.06em}
.mp-txt.mp-txt-on{fill:var(--ambar);font-weight:700}
.mp-eje{font-family:var(--dato);font-size:9.5px;fill:var(--acero-60);letter-spacing:.14em}
.mp-of{fill:none;stroke:var(--tinta);stroke-width:1.5}
.mp-of-txt{font-family:var(--dato);font-size:10.5px;fill:var(--tinta-70);letter-spacing:.09em}

/* ===========================================================================
   11 · CIFRAS
   =========================================================================== */
#cifras{padding-block:var(--pad-sec)}
.rejilla-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--acero-25)}
.stat{padding:34px 30px 32px;border-bottom:1px solid var(--acero-25);border-right:1px solid var(--acero-25)}
.stat:nth-child(2),.stat:nth-child(5){border-right:none}
/* «32 años» manda: dos columnas, con la regla 1994-2026 (32 divisiones) ocupando el ancho que gana */
.stat--ancha{grid-column:span 2;display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,64px);align-items:end}
.stat.stat--ancha .v{font-size:clamp(64px,7.6vw,116px)}
.regla-anios{display:flex;align-items:center;gap:14px;font-family:var(--dato);font-size:12px;letter-spacing:.1em;color:var(--acero);padding-bottom:6px}
.regla-anios i{flex:1;height:10px;border-right:1px solid var(--acero-40);
  background:repeating-linear-gradient(90deg,var(--acero-40) 0 1px,transparent 1px calc(100% / 32))}
.stat .v{
  font-family:var(--dato);font-weight:700;font-size:clamp(42px,5vw,72px);line-height:.92;
  letter-spacing:-.045em;color:var(--tinta);font-variant-numeric:tabular-nums;display:block;
}
.stat--reg .v{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.03em}
.stat .u{
  font-family:var(--dato);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acero);display:block;margin-top:16px;
}
.stat .d{font-size:16px;line-height:1.55;color:var(--tinta-70);margin-top:10px;max-width:38ch}

/* ===========================================================================
   12 · CONFIANZA (sustituye a los testimonios: no hay reseñas)
   =========================================================================== */
#confianza{padding-block:var(--pad-sec);background:var(--superficie);border-block:1px solid var(--acero-14)}
.rejilla-pruebas{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.prueba{
  background:var(--noche);border:1px solid var(--acero-25);padding:28px 28px 26px;
  display:flex;flex-direction:column;grid-column:span 2;
}
.prueba--ancha{grid-column:span 4}
.prueba--todo{grid-column:span 6}
.prueba .q{
  font-family:var(--dato);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acero);display:flex;align-items:center;gap:10px;
}
.prueba .q::before{content:"";width:8px;height:8px;background:var(--acero);flex:none}
.prueba .v{
  font-family:var(--display);font-weight:700;font-size:clamp(23px,2vw,30px);letter-spacing:-.02em;
  margin:18px 0 12px;line-height:1.08;color:var(--tinta);
}
.prueba--ancha .v{font-size:clamp(30px,3.2vw,46px)}
.prueba .v.v--falta{color:var(--acero);font-weight:600}
.prueba .v.mono{font-family:var(--dato);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.prueba p{font-size:16.5px;line-height:1.6;color:var(--tinta-70)}
.prueba .fu{
  font-family:var(--dato);font-size:11.5px;line-height:1.6;color:var(--acero);letter-spacing:.03em;
  margin-top:auto;padding-top:18px;border-top:1px solid var(--acero-25);
}
.prueba--todo{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
/* aquí el rótulo, la cifra y la fuente van dentro de un <div>, no son hijos del flex de .prueba:
   sin esto se quedaban en línea y el filete de la fuente pisaba el último renglón del párrafo */
.prueba--todo > div{display:flex;flex-direction:column;max-width:62ch}
.prueba--todo .fu{margin-top:18px}
.franjas-chips{display:flex;flex-wrap:wrap;gap:10px}
.aviso-sin-opiniones{
  border:1px solid var(--acero-25);border-left:4px solid var(--acero);padding:18px 22px;margin-bottom:34px;
  max-width:84ch;font-size:17px;line-height:1.6;color:var(--tinta);
}
.aviso-sin-opiniones .q{
  font-family:var(--dato);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acero);display:block;margin-bottom:7px;
}

/* ===========================================================================
   13 · GALERÍA
   =========================================================================== */
#galeria{padding-block:var(--pad-sec) 0}
.gal-ancha{position:relative;margin-top:8px}
.gal-ancha img{width:100%;aspect-ratio:21/9;object-fit:cover}
.gal-par{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.gal-par img{width:100%;aspect-ratio:5/4;object-fit:cover}
figure{margin:0}
figcaption{
  font-family:var(--cuerpo);font-style:italic;font-size:15.5px;color:var(--tinta-70);
  padding-top:12px;line-height:1.55;
}
.gal-ancha figcaption{max-width:82ch}

/* ===========================================================================
   14 · FAQ
   =========================================================================== */
#faq{padding-block:var(--pad-sec)}
.faq-grid{display:grid;grid-template-columns:360px 1fr;gap:clamp(40px,5vw,88px);align-items:start}
.faq-lado{position:sticky;top:120px}
.faq-lado .cab{margin-bottom:26px}
.faq-lado .apoyo{
  border-top:1px solid var(--acero-25);padding-top:22px;display:grid;gap:16px;justify-items:start;
}
.faq-lado .apoyo p{font-size:16.5px;color:var(--tinta-70);max-width:30ch;line-height:1.55}
/* M1: la regla de arriba le ganaba a .pie-fuente y la nota salía a 16,5 px solo aquí */
.faq-lado .apoyo p.pie-fuente{font-size:14.5px;line-height:1.6;color:var(--acero);max-width:34ch}
.faq-lista{margin-top:-14px}
.faq-lista details{border-top:1px solid var(--acero-25)}
.faq-lista details:last-child{border-bottom:1px solid var(--acero-25)}
.faq-lista summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:24px;
  padding:22px 4px;min-height:56px;font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.4vw,21px);letter-spacing:-.015em;color:var(--tinta);transition:color .16s;
}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary:hover{color:var(--ambar)}
.faq-lista .mas{position:relative;width:16px;height:16px;flex:none;margin-left:auto;transition:transform .22s}
.faq-lista .mas::before,.faq-lista .mas::after{content:"";position:absolute;background:var(--acero)}
.faq-lista .mas::before{left:0;top:7.5px;width:16px;height:1.5px}
.faq-lista .mas::after{top:0;left:7.5px;height:16px;width:1.5px}
.faq-lista details[open] .mas{transform:rotate(45deg)}
.faq-lista details[open] summary{color:var(--ambar)}
.faq-lista details[open] .mas::before,.faq-lista details[open] .mas::after{background:var(--ambar)}
.faq-lista .resp{padding:0 46px 26px 4px;max-width:68ch;color:var(--tinta-70);font-size:17.5px;line-height:1.68}

/* ===========================================================================
   15 · ÁREAS
   =========================================================================== */
#areas{padding-block:var(--pad-sec);border-top:1px solid var(--acero-14)}
.rejilla-areas{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--acero-25);border:1px solid var(--acero-25)}
.area{
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;
  background:var(--superficie);padding:44px 40px 46px;
}
.area svg{width:44px;height:44px;flex:none}
.area h3{margin-bottom:10px}
.area p{color:var(--tinta-70);font-size:16.5px;margin-bottom:20px}
.area .btn{min-height:48px;font-size:15px;padding:0 22px}

/* ===========================================================================
   16 · PEDIR
   =========================================================================== */
#pedir{background:var(--superficie);padding-block:var(--pad-sec)}
.pedir-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,5vw,84px);align-items:start}
.ficha-contacto{margin-top:34px;border-top:1px solid var(--acero-25);padding-top:26px;display:grid;gap:22px}
.ficha-contacto .fila{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:baseline}
.ficha-contacto .k{font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acero)}
.ficha-contacto .v{font-size:17px;line-height:1.5}
.ficha-contacto .v a{font-family:var(--dato);font-size:16px;text-decoration:none;color:var(--tinta)}
.ficha-contacto .v a:hover{color:var(--ambar)}
.ficha-contacto .fila--tel{align-items:start}
.ficha-contacto .fila--tel .v{display:flex;flex-wrap:wrap;gap:10px}
.ficha-contacto .fila--tel .v a{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 18px;
  border:1px solid var(--acero-25);border-radius:999px;transition:border-color .16s,color .16s}
.ficha-contacto .fila--tel .v a:hover{border-color:var(--acero)}
.ficha-contacto .fila--tel .et{font-family:var(--cuerpo);font-size:15px;color:var(--tinta-70)}
.ficha-contacto .v .coord{font-family:var(--dato);font-size:13px;color:var(--acero);display:block;margin-top:5px;letter-spacing:.02em}
.mini-map{margin-top:28px;border:1px solid var(--acero-25);background:var(--noche);padding:18px}
.mini-map svg{width:100%;height:auto;display:block}
.mini-map + .pie-fuente{margin-top:14px}
.mm-fina,.mm-media,.mm-gorda{fill:none;stroke-linejoin:round;stroke-linecap:round}
.mm-fina{stroke:var(--acero-25);stroke-width:1}
.mm-media{stroke:var(--acero-40);stroke-width:2.2}
.mm-gorda{stroke:var(--acero-40);stroke-width:5}
.mm-metro{fill:var(--noche);stroke:var(--acero);stroke-width:1.5}
.mm-metro-txt{fill:var(--acero)}
.mm-of{fill:var(--tinta)}
.mm-of-halo{fill:none;stroke:var(--tinta);stroke-width:1.5;opacity:.45}
.mini-map .mm-of-txt{fill:var(--tinta);font-weight:700;font-size:12.5px}
.mini-map .mm-of-sub{font-weight:400;fill:var(--tinta-70);font-size:10.5px}
.formulario{background:var(--noche);border:1px solid var(--acero-25);padding:clamp(26px,2.6vw,40px)}
.formulario .filas{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo--ancho{grid-column:1/-1}
.campo label{font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acero)}
.campo input,.campo select,.campo textarea{
  height:52px;background:var(--superficie);border:1px solid var(--acero-25);border-radius:2px;
  color:var(--tinta);font-family:var(--cuerpo);font-size:17px;padding:0 15px;width:100%;
  transition:border-color .16s,box-shadow .16s;
}
.campo textarea{height:auto;min-height:104px;padding:13px 15px;line-height:1.5;resize:vertical;display:block}
.campo label .opc{letter-spacing:.06em;text-transform:none}
.campo select{appearance:none;background-image:none;padding-right:42px;cursor:pointer}
.sel{position:relative}
.sel::after{
  content:"";position:absolute;right:18px;top:24px;width:8px;height:8px;pointer-events:none;
  border-right:1.5px solid var(--acero);border-bottom:1.5px solid var(--acero);transform:rotate(45deg) translateY(-2px);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--ambar);box-shadow:0 0 0 3px var(--ambar-25);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--acero);opacity:1}
.form-pie{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.form-pie .btn{width:100%}
.form-nota{
  font-family:var(--cuerpo);font-style:italic;font-size:14.5px;line-height:1.6;color:var(--acero);
  border-left:2px solid var(--acero-40);padding-left:14px;
}

/* ===========================================================================
   PIE
   =========================================================================== */
.pie{background:var(--noche);border-top:1px solid var(--acero-25);padding-block:clamp(56px,5vw,84px) 0}
.pie-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,3vw,64px)}
.pie .pie-tit{
  font-family:var(--dato);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acero);font-weight:500;margin-bottom:18px;
}
.pie .marca{margin-bottom:18px}
.pie .desc{font-size:16px;color:var(--tinta-70);max-width:34ch;line-height:1.6}
.pie .lista{display:grid;gap:11px}
.pie .lista a,.pie .lista span{font-size:16px;color:var(--tinta-70);text-decoration:none;line-height:1.45;display:block}
.pie .lista a:hover{color:var(--ambar)}
.pie .lista .mono{font-family:var(--dato);font-size:15.5px;color:var(--tinta)}
.pie .lista .mono:hover{color:var(--ambar)}
.pendiente{
  margin-top:clamp(44px,4vw,66px);border:1px solid var(--acero-25);border-left:3px solid var(--acero);
  padding:26px 30px;display:grid;grid-template-columns:230px 1fr 280px;gap:34px;align-items:start;
}
.pendiente .q{font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acero);display:block;line-height:1.7}
.pendiente ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.pendiente li{font-family:var(--cuerpo);font-size:15px;color:var(--tinta-70);display:flex;gap:10px;line-height:1.5}
.pendiente li::before{content:"—";color:var(--acero-60);flex:none}
.pendiente p{font-size:14.5px;font-style:italic;color:var(--acero);line-height:1.55}
.pie-bajo{
  margin-top:clamp(46px,4vw,70px);border-top:1px solid var(--acero-25);padding-block:26px 34px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:var(--dato);font-size:12px;color:var(--acero);letter-spacing:.03em;
}
.pie-bajo a{color:var(--acero);text-decoration:underline;text-underline-offset:3px}
.pie-bajo a:hover{color:var(--ambar)}

/* --- llamada fija -------------------------------------------------------- */
.cta-sticky{
  position:fixed;right:24px;bottom:24px;z-index:90;
  display:flex;align-items:center;gap:14px;background:var(--ambar);color:var(--noche);
  padding:12px 20px 12px 16px;border-radius:999px;text-decoration:none;
  box-shadow:0 0 0 1px var(--noche);
  transform:translateY(160%);opacity:0;pointer-events:none;
  transition:transform .32s cubic-bezier(.22,.7,.2,1),opacity .32s;
}
.cta-sticky.on{transform:translateY(0);opacity:1;pointer-events:auto}
.cta-sticky .t{font-family:var(--display);font-weight:700;font-size:14.5px;line-height:1.15;display:block}
.cta-sticky .n{font-family:var(--dato);font-weight:700;font-size:15.5px;letter-spacing:.01em;display:block}
.cta-sticky .ic{width:38px;height:38px;border-radius:999px;background:var(--noche);display:flex;align-items:center;justify-content:center;flex:none}
.cta-sticky .ic svg{width:18px;height:18px}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:1320px){
  :root{--gut:36px}
  .nav a{padding:12px 9px;font-size:14px}
  .cab-tel{font-size:13.5px}
  .zonas-grid{grid-template-columns:350px 1fr}
  .faq-grid{grid-template-columns:300px 1fr}
  .paso{grid-template-columns:110px 1fr 220px;gap:32px}
  .pendiente{grid-template-columns:200px 1fr;gap:26px}
  .pendiente p{grid-column:2}
}
@media (max-width:1080px){
  :root{--gut:24px}
  .faq-grid{grid-template-columns:1fr;gap:34px}
  .faq-lado{position:static}
  .faq-lado .apoyo{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .faq-lado .apoyo p{max-width:46ch}
  .paso{grid-template-columns:110px 1fr;gap:28px}
  .paso .apunte{grid-column:2;border-top:none;padding-top:0;margin-top:14px}
  .pendiente{grid-template-columns:1fr;gap:20px}
  .pendiente p{grid-column:1}
  .nav,.cab-tel,.cab-cta{display:none}
  .hamb{display:flex}
  .rejilla-puestos{grid-template-columns:repeat(2,1fr)}
  .rejilla-casas{grid-template-columns:repeat(2,1fr)}
  .zonas-grid{display:flex;flex-direction:column;gap:0}
  .zonas-izq,.zonas-der{display:contents}
  .zonas-izq .cab{order:1}
  .zonas-der .map{order:2;margin-top:30px}
  .zonas-izq .zonas-tabs{order:3;margin-top:22px}
  .zonas-izq .zona-panel{order:4}
  .zonas-izq .zonas-fuera{order:5;margin-top:26px}
  .zonas-der .pie-fuente{order:6}
  .pedir-grid{grid-template-columns:1fr;gap:44px}
  .pie-grid{grid-template-columns:1fr 1fr;row-gap:44px}
  .rejilla-pruebas{grid-template-columns:repeat(4,1fr)}
  .prueba--ancha{grid-column:span 4}
  .prueba--todo{grid-column:span 4}
  .rejilla-stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(n){border-right:1px solid var(--acero-25)}
  .stat:nth-child(1),.stat:nth-child(3),.stat:nth-child(5){border-right:none}
  .panel-movil{
    display:block;max-height:0;overflow:hidden;background:var(--superficie);
    border-top:1px solid var(--acero-25);visibility:hidden;
    transition:max-height .3s ease,visibility 0s linear .3s;
  }
  /* visibility saca los enlaces del foco y del lector mientras está cerrado; el retardo deja ver el cierre */
  /* abierto no puede medir más que la pantalla menos la barra (86 px): en un móvil apaisado los
     teléfonos del final quedaban fuera, y una cabecera fija no se desplaza con el documento */
  .panel-movil.abierto{
    max-height:min(640px,calc(100vh - 86px));max-height:min(640px,calc(100dvh - 86px));
    overflow-y:auto;overscroll-behavior:contain;visibility:visible;transition:max-height .3s ease,visibility 0s;
  }
  .panel-movil .in{padding:22px var(--gut) 28px;display:grid;gap:4px}
  .panel-movil a.nv{
    text-decoration:none;color:var(--tinta);font-family:var(--display);font-weight:600;font-size:17px;
    padding:14px 0;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--acero-14);
  }
  .panel-movil .tels{display:grid;gap:12px;margin-top:20px}
  .panel-movil .btn{width:100%}
}
/* el cuadrante mide 760px: en cuanto el rail baja de ahi hay arrastre y hay que avisarlo,
   y eso pasa antes (≈824px) del corte de movil */
@media (max-width:860px){
  .scroll-pista{display:block}
}
@media (max-width:760px){
  body{font-size:17px}
  .cabecera .env-ancho{height:72px}
  .marca .nombre{font-size:22px}
  #hero{min-height:auto}
  .hero-cuerpo{padding-block:120px 44px}
  #hero .velo{background:linear-gradient(to bottom,var(--noche-72) 0%,var(--noche-55) 40%,var(--noche-84) 82%,var(--noche) 100%)}
  #hero .foto{object-position:64% 38%}
  .pendiente ul{grid-template-columns:1fr}
  .horario-cuadro{min-width:580px}
  /* máscara: solo cuenta el alfa, así que vale cualquier color opaco del sistema. Solo en la tabla que de
     verdad se desplaza (el cuadrante): en las que se apilan se comía el final de cada línea de texto */
  .tabla-scroll:has(.horario-cuadro){-webkit-mask-image:linear-gradient(to right,var(--noche) 86%,transparent);mask-image:linear-gradient(to right,var(--noche) 86%,transparent)}
  .horario-cuadro tbody th{width:150px;padding:16px 14px}
  .horario-cuadro thead th{padding:14px}
  .celda{min-width:96px;font-size:10.5px;padding:0 8px}
  .hero-ctas .btn{width:100%}
  .btn--dos{flex-direction:column;gap:2px;line-height:1.2;padding-block:10px}
  .btn--dos .t::after{content:none}
  #hero .chip{white-space:normal;letter-spacing:.05em;font-size:10.5px;line-height:1.5;padding:9px 14px}
  .hero-pie{font-size:11.5px;gap:8px;line-height:1.6}
  .hero-pie .sep{display:none}
  .cuadrante-cab{gap:22px}
  .banda-ambar .env{flex-direction:column;align-items:flex-start}
  .banda-ambar .lado{align-items:flex-start;width:100%}
  .banda-ambar .lado .btn{width:100%}
  .rejilla-puestos{grid-template-columns:1fr;gap:18px}
  .puesto .marco{aspect-ratio:16/10}
  .rejilla-casas{grid-template-columns:1fr}
  .paso{grid-template-columns:1fr;gap:12px;padding-block:28px}
  /* el grid-column:2 del tramo de 1080 seguía vivo aquí y abría una segunda columna implícita */
  .paso .apunte{grid-column:auto}
  .paso .cifra{font-size:32px}
  #madrugada{min-height:auto}
  .madrugada-txt{padding-top:100px;padding-bottom:40px}
  #madrugada .velo{background:linear-gradient(to bottom,var(--noche-92) 0%,var(--noche-72) 50%,var(--noche-92) 100%)}
  #madrugada .ventana,#madrugada .ventana-marco{display:none}
  #madrugada .velo2{display:none}
  .horario-24{position:relative;top:auto;margin-block:14px 30px}
  .horario-24 .jornada{text-align:left;font-size:11.5px;letter-spacing:.08em}
  .horario-24 .tk time{font-size:9.5px}
  .horario-24 .tk.oculta-movil{display:none}
  .madrugada-pie{padding-bottom:56px}
  .madrugada-pie .cartel{max-width:none}
  .reparto,.reparto thead,.reparto tbody,.reparto tr,.reparto th,.reparto td{display:block;width:100%}
  /* misma especificidad que el width:50% de escritorio: sin repetirlo aquí ganaba el 50 % */
  .reparto thead th,.reparto tbody td{width:100%}
  .reparto thead th{border-right:none;padding:18px 0 12px}
  .reparto thead th:first-child{border-right:none;border-bottom:1px solid var(--linea-papel)}
  .reparto tbody td{border-right:none;padding:15px 0}
  .reparto tbody td:first-child{border-right:none}
  /* apilada, la tabla perdía QUIÉN responde de cada cosa: cada celda lo lleva escrito encima */
  #responsabilidades .reparto tbody td::before{
    display:block;margin-bottom:6px;font-family:var(--dato);font-size:11px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--acero-hondo);
  }
  /* la cabecera sigue para el lector de pantalla, pero a la vista sobraría: cada celda ya la repite */
  #responsabilidades .reparto thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #responsabilidades .reparto tbody tr:first-child td:first-child{border-top:none}
  #responsabilidades .reparto tbody td:first-child::before{content:"Responde GesTempro"}
  #responsabilidades .reparto tbody td:last-child::before{content:"Responde tu empresa"}
  #responsabilidades .reparto tbody td:last-child{border-top:none;padding-top:0}
  #responsabilidades .reparto tbody td.grave{padding:12px 14px 15px;margin-bottom:15px}
  .conv-cab{gap:18px}
  .rejilla-pruebas{grid-template-columns:1fr}
  .prueba,.prueba--ancha,.prueba--todo{grid-column:span 1}
  .prueba--todo{grid-template-columns:1fr;gap:20px}
  .rejilla-stats{grid-template-columns:1fr}
  .stat:nth-child(n){grid-column:span 1;border-right:none;padding:26px 0}
  .stat--ancha{grid-template-columns:1fr;gap:20px}
  .gal-par{grid-template-columns:1fr;gap:20px}
  .gal-ancha img{aspect-ratio:4/3}
  .gal-par img{aspect-ratio:4/3}
  .rejilla-areas{grid-template-columns:1fr}
  .area{grid-template-columns:1fr;gap:18px;padding:30px 24px 34px}
  .formulario .filas{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr;row-gap:38px}
  .ficha-contacto .fila{grid-template-columns:1fr;gap:6px}
  .faq-lista .resp{padding-right:0}
  .cta-sticky{
    left:0;right:0;bottom:0;border-radius:0;justify-content:center;
    padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 26px var(--noche-72);
  }
  /* la barra fija mide 66 px: el pie reserva ese hueco para que su último enlace no quede debajo */
  .pie{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .cta-sticky.on{transform:translateY(0)}
  /* la tabla del convenio no cabe en 390: cada fila pasa a ficha de dos lineas,
     asi el importe sigue a la vista en vez de irse fuera del scroll horizontal */
  .tarifas-convenio thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tarifas-convenio tbody tr{
    display:grid;grid-template-columns:1fr auto;gap:2px 14px;
    padding:14px 0;border-top:1px solid var(--linea-papel);
  }
  .tarifas-convenio tbody tr:first-child{border-top:none}
  .tarifas-convenio td{display:block;border-top:none;padding:0;width:auto}
  .tarifas-convenio .concepto{grid-area:1/1;width:auto;font-size:17px}
  .tarifas-convenio .imp{grid-area:1/2;width:auto;text-align:right;font-size:17px}
  .tarifas-convenio .nivel{grid-area:2/1;width:auto;font-size:15px}
  .tarifas-convenio .per{grid-area:2/2;width:auto;text-align:right;font-size:11.5px;white-space:nowrap}
  /* los dos mapas son SVG con viewBox: al encogerse a 390 el texto se va a 5-6 px.
     Se suben las medidas en unidades de usuario para que el rotulo siga leyendose. */
  .map{padding:10px}
  .mini-map{padding:10px}
  .map .mp-txt{font-size:22px;letter-spacing:.02em}
  .map .mp-eje{font-size:17px;letter-spacing:.06em}
  .map .mp-eje--radial{display:none}
  .map .mp-of-txt{font-size:18px;letter-spacing:.03em}
  .map .mp-eje--halo{stroke-width:7px}
  .map .mp-pt{r:9}
  .map .mp-halo{stroke-width:2.5;r:19}
  .mini-map .mp-eje{font-size:15px;letter-spacing:.04em}
  .mini-map .mm-of-txt{font-size:19px}
  .mini-map .mm-of-sub{display:none}
  .mini-map .mp-eje--halo{stroke-width:6px}
  .ultra{grid-template-columns:1fr;gap:14px}
  .ultra .q{justify-self:start}
}
@media (max-width:420px){
  :root{--gut:18px}
  .madrugada-txt{padding-top:92px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  #madrugada .ventana{clip-path:inset(30% calc(100% - 75%) 34% 58.34%)}
  .horario-24 .tramo,#madrugada .ventana-marco{transform:scaleX(1)}
}

/* --- móviles estrechos: la marca no empuja el menú fuera (el documento medía 326 en 320) --- */
@media (max-width:520px){
  .marca .sub{display:none}
}
@media (max-width:380px){
  .cabecera .env-ancho{gap:12px}
  .marca{gap:10px;min-width:0}
  .marca .nombre{font-size:20px}
  .marca .sub{display:none}
  /* un chip largo no cabe en una línea a 320: que parta en vez de ensanchar el documento */
  .chip{white-space:normal;border-radius:18px;max-width:100%}
}
.tabla-scroll:focus-visible{outline-offset:-2px}

/* --- primera capa de protección de datos dentro de un formulario -------------
   La lleva el formulario de candidatos (ficha.css) y ahora también los dos de
   «pedir personal», y uno de ellos está en la HOME, que no carga ficha.css: por
   eso el componente vive aquí, en la hoja que cargan todas las páginas. Mismos
   valores que la copia de ficha.css, así que en una ficha —donde se cargan las
   dos— el resultado es idéntico. Ningún token nuevo: todo sale de :root. */
.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)}

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

@media (max-width:760px){
  .privacidad dl{grid-template-columns:1fr;gap:4px}
  .privacidad dt{margin-top:12px}
  .privacidad dt:first-child{margin-top:0}
}