/* Proute · web pública. El costado de un semirremolque de ganado rotulado. */

@font-face{font-family:"Archivo Rotulo";src:url(fuentes/archivo-900-italica.woff2) format("woff2");font-weight:900;font-style:italic;font-stretch:125%;font-display:swap}
@font-face{font-family:"Archivo";src:url(fuentes/archivo-800.woff2) format("woff2");font-weight:800;font-style:normal;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Barlow";src:url(fuentes/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fuentes/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(fuentes/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url(fuentes/barlow-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --azul:#1f5fbf; --azul-oscuro:#174a96; --amarillo:#ffb81c; --amarillo-oscuro:#e9a100;
  --neumatico:#1b1e22; --asfalto:#2b2f33; --blanco:#f7f7f4; --patio:#e4e6e8;
  --alu:#cdd2d6; --alu-claro:#e1e4e7; --alu-oscuro:#9aa2a9; --ranura:#59616a;
  --tinta:#1b1e22; --tinta-2:#4a4f55; --tinta-3:#5b6066; --linea:#c5cacf;
  --rotulo:"Archivo Rotulo","Arial Black",sans-serif;
  --titulo:"Archivo","Arial Black",sans-serif;
  --texto:"Barlow",system-ui,sans-serif;
  --sale:cubic-bezier(.23,1,.32,1); --mueve:cubic-bezier(.77,0,.175,1);
  --borde:clamp(16px,3vw,40px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--patio);color:var(--tinta);font:400 17px/1.5 var(--texto);
  font-variant-numeric:tabular-nums;accent-color:var(--azul);caret-color:var(--azul)}
::selection{background:var(--amarillo);color:var(--neumatico)}
a{color:var(--azul);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;line-height:1.05}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;background:var(--neumatico);color:#fff;padding:10px 14px;border-radius:8px;z-index:10}
.saltar:focus{top:12px}

/* ---------- botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;
  font:700 17px/1 var(--texto);letter-spacing:.01em;padding:16px 22px;text-decoration:none;cursor:pointer;
  transition:transform 160ms var(--sale),background-color 160ms ease,box-shadow 160ms ease}
.boton:active{transform:scale(.97)}
.boton-amarillo{background:var(--amarillo);color:var(--neumatico)}
@media (hover:hover) and (pointer:fine){.boton-amarillo:hover{background:#ffc540}}
.boton-amarillo:focus-visible{outline-color:var(--neumatico)}
.boton-chico{padding:11px 16px;font-size:15px}
.boton-ancho{width:100%}
.boton[disabled]{opacity:.6;cursor:default;transform:none}
.boton-texto{transition:filter 200ms ease,opacity 200ms ease}
.boton.cargando .boton-texto{filter:blur(2px);opacity:.6}

/* ---------- cabecera de la web ---------- */
.cabecera{display:flex;align-items:center;gap:24px;padding:18px var(--borde);max-width:1440px;margin:0 auto}
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--neumatico)}
.marca-icono{width:36px;height:36px;display:block}
.marca span{font:900 italic 25px/1 var(--rotulo);font-stretch:125%;letter-spacing:-.01em}
.menu{display:flex;gap:22px;margin-left:auto}
.menu a{color:var(--tinta-2);text-decoration:none;font-weight:600;font-size:15px}
@media (hover:hover) and (pointer:fine){.menu a:hover{color:var(--azul)}}
@media (max-width:820px){.menu{display:none}.cabecera .boton-chico{margin-left:auto}}

/* ---------- portada: el camión ---------- */
.portada{padding:10px var(--borde) 0;max-width:1440px;margin:0 auto}
.camion{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,30vw,400px);gap:0 14px;
  padding-bottom:58px;animation:llega 600ms var(--sale) both}
@keyframes llega{from{transform:translateX(-2%)}}

/* el costado: aluminio con montantes y rejillas de ventilación en dos pisos */
.remolque{position:relative;border-radius:14px 10px 10px 14px;overflow:hidden;min-height:clamp(440px,62vh,600px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 12%,rgba(0,0,0,0) 88%,rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg,transparent 0 92px,rgba(27,30,34,.16) 92px 94px,rgba(255,255,255,.55) 94px 95px,transparent 95px 96px),
    linear-gradient(180deg,var(--alu-claro),var(--alu));
  box-shadow:inset 0 0 0 2px var(--alu-oscuro)}
/* rejillas: una franja de ranuras arriba de cada piso */
.remolque::before,.remolque::after{content:"";position:absolute;left:18px;right:18px;height:18px;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--ranura) 0 30px,transparent 30px 40px);opacity:.85}
.remolque::before{top:18px}
.remolque::after{top:calc(50% + 12px)}
.deck{position:absolute;left:0;right:0;top:50%;height:4px;background:var(--alu-oscuro);box-shadow:0 1px 0 rgba(255,255,255,.6)}

.rotulo{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:56px clamp(22px,4vw,64px) 48px}
.rotulo h1{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vw,22px)}
.rotulo-nombre{font:900 italic clamp(84px,13.5vw,212px)/.82 var(--rotulo);font-stretch:125%;letter-spacing:-.025em;
  color:var(--azul);-webkit-text-stroke:.055em var(--blanco);paint-order:stroke fill;
  text-shadow:.06em .06em 0 var(--neumatico);padding:0 .08em .06em 0}
/* franja pintada del costado: azul con filete amarillo */
.rotulo-franja{display:block;max-width:22ch;background:var(--azul);color:var(--blanco);
  font:800 clamp(20px,2.3vw,32px)/1.12 var(--titulo);font-stretch:112%;letter-spacing:-.01em;
  padding:.5em .7em .55em;border-radius:6px;box-shadow:0 0 0 3px var(--blanco),0 0 0 5px var(--neumatico);margin-left:.15em}
.rotulo-pie{margin-top:clamp(18px,2.4vw,28px);max-width:52ch;font-weight:500;font-size:clamp(16px,1.3vw,19px);
  color:var(--neumatico);background:var(--blanco);border:2px solid var(--alu-oscuro);padding:12px 30px 12px 16px;border-radius:3px;
  align-self:flex-start;position:relative}
.rotulo-pie::before,.rotulo-pie::after{content:"";position:absolute;right:9px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#8d959c 60%);box-shadow:0 0 0 1px #7b838a}
.rotulo-pie::before{top:9px}.rotulo-pie::after{bottom:9px}
.placa-animales{position:absolute;right:18px;bottom:44px;z-index:1;background:#f28c00;color:var(--neumatico);
  font:800 12px/1 var(--titulo);font-stretch:112%;text-transform:uppercase;letter-spacing:.08em;padding:8px 10px;border-radius:3px;
  box-shadow:0 0 0 2px var(--neumatico)}

/* la cabina, con la puerta como formulario */
.cabina{position:relative;display:flex;flex-direction:column;background:var(--blanco);border-radius:26px 14px 10px 10px;
  box-shadow:inset 0 0 0 2px #cfd3d7;overflow:hidden;scroll-margin-top:16px}
.ventanilla{height:clamp(54px,8vh,82px);margin:14px 14px 0 30px;border-radius:16px 8px 4px 4px;
  background:linear-gradient(160deg,#2a3542 0 58%,#36434f 58% 68%,#2a3542 68%)}
.puerta{flex:1;margin:12px 14px 26px;border:2px solid #d3d7db;border-radius:8px;padding:20px 20px 18px;position:relative}
.puerta::after{content:"";position:absolute;right:3px;top:33%;width:12px;height:30px;border-radius:4px;background:#b9bec4;box-shadow:inset 0 0 0 1px #9aa1a8}
.cabina::before{content:"";position:absolute;left:9px;top:18%;bottom:30px;width:2px;border-radius:1px;background:#d3d7db}
.cabina::after{content:"";position:absolute;left:24px;right:24px;bottom:8px;height:9px;border-radius:3px;background:var(--neumatico)}
.formulario{display:flex;flex-direction:column;gap:14px}
.formulario[hidden]{display:none}
.formulario-titulo{font:900 italic 26px/1 var(--rotulo);font-stretch:125%;letter-spacing:-.015em;color:var(--neumatico)}
.elige{border:0;margin:0;padding:3px;display:grid;grid-template-columns:1fr 1fr;background:#e2e5e8;border-radius:10px}
.elige label{position:relative}
.elige input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.elige span{display:block;text-align:center;padding:9px 6px;border-radius:8px;font-weight:600;font-size:15px;color:var(--tinta-2);
  transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease}
.elige input:checked+span{background:#fff;color:var(--neumatico);box-shadow:0 1px 2px rgba(27,30,34,.18)}
.elige input:focus-visible+span{outline:3px solid var(--azul);outline-offset:1px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.campo{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:var(--tinta-2)}
.campo:nth-child(-n+2){grid-column:1/-1}
.campo em{font-style:normal;font-weight:400;color:var(--tinta-3)}
.campo input{font:500 16px/1.2 var(--texto);color:var(--neumatico);padding:11px 12px;border:1.5px solid #c3c8cd;border-radius:8px;
  background:#fff;width:100%;transition:border-color 160ms ease,box-shadow 160ms ease}
.campo input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(31,95,191,.2)}
.campo input[aria-invalid=true]{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.campo-corto input{max-width:120px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.acepto{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.4;color:var(--tinta-2)}
.acepto input{width:18px;height:18px;margin:1px 0 0;flex-shrink:0}
.formulario-aviso{font-size:14px;color:#b3261e;min-height:0}
.formulario-aviso:empty{display:none}
.recibido{display:flex;flex-direction:column;gap:8px;justify-content:center;height:100%;font-size:17px}
.recibido[hidden]{display:none}
.recibido-titulo{font:900 italic 34px/1 var(--rotulo);font-stretch:125%;color:var(--azul)}
.recibido:focus{outline:none}

/* ruedas y carretera */
.ruedas{position:absolute;left:0;right:0;bottom:0;height:86px;display:flex;align-items:flex-end;gap:10px;padding:0 6% 0 9%;pointer-events:none}
.ruedas::before{content:"";position:absolute;left:1.5%;right:1.5%;top:6px;height:12px;border-radius:3px;background:var(--neumatico)}
.ejes{position:relative;display:flex;gap:10px;isolation:isolate}
.ejes::before{content:"";position:absolute;z-index:-1;left:-10px;right:-10px;top:-12px;height:58%;border-radius:60px 60px 6px 6px;background:var(--neumatico)}
.rueda{width:86px;height:86px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle,#d9dcdf 0 16%,#7d848b 17% 30%,#c4c8cc 31% 40%,var(--neumatico) 41%);
  box-shadow:inset 0 0 0 6px #111;animation:gira 600ms var(--sale) both}
.rueda::after{content:"";display:block;width:100%;height:100%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 40deg,rgba(255,255,255,.18) 40deg 50deg,transparent 50deg 160deg,rgba(255,255,255,.18) 160deg 170deg,transparent 170deg 280deg,rgba(255,255,255,.18) 280deg 290deg,transparent 290deg)}
.hueco{flex:1}
.ejes-delantero{margin-left:clamp(60px,9vw,150px)}
@keyframes gira{from{transform:rotate(-200deg)}}
.carretera{height:30px;margin:0 calc(var(--borde) * -1);background:
  linear-gradient(90deg,transparent 0 20px,rgba(247,247,244,.9) 20px 64px,transparent 64px) 0 50%/84px 4px repeat-x,var(--asfalto)}
.portada{overflow:hidden}

@media (prefers-reduced-motion:reduce){.camion,.rueda{animation:none}}

/* móvil: costado arriba, puerta a todo lo ancho debajo */
@media (max-width:820px){
  .camion{grid-template-columns:1fr;gap:12px;padding-bottom:50px}
  .remolque{min-height:0}
  .rotulo{padding:52px 18px 96px}
  .rotulo-nombre{font-size:clamp(56px,18.5vw,110px)}
  .rotulo-franja{max-width:none}
  .remolque::after,.deck{display:none}
  .remolque{order:1}
  .ruedas{position:relative;order:2;height:50px;margin-top:-34px;padding:0 6%;gap:6px;
    background:linear-gradient(var(--asfalto),var(--asfalto)) 0 100%/100% 8px no-repeat}
  .ruedas::before{top:2px;height:9px}
  .cabina{order:3;margin-top:4px}
  .rueda{width:44px;height:44px;box-shadow:inset 0 0 0 4px #111}
  .ejes{gap:6px}
  .ejes:nth-child(3),.ejes-delantero{display:none}
  .hueco{display:none}
  .ejes:first-child{margin-right:auto}
  .camion{padding-bottom:0}
  .portada .carretera{display:none}
  .campos{grid-template-columns:1fr}
}

/* ---------- secciones ---------- */
.seccion{max-width:1240px;margin:0 auto;padding:clamp(72px,10vw,128px) var(--borde) 0}
.seccion-cabeza{max-width:60ch;margin-bottom:clamp(28px,4vw,44px)}
.seccion-cabeza h2{font:800 clamp(34px,4.6vw,58px)/1 var(--titulo);font-stretch:112%;letter-spacing:-.025em;margin-bottom:16px;color:var(--neumatico)}
.seccion-cabeza p{font-size:clamp(17px,1.4vw,20px);color:var(--tinta-2);max-width:56ch}

/* demostración: la semana */
.tablero{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:18px;align-items:start}
.sueltos{background:#fff;border-radius:12px;padding:16px;box-shadow:inset 0 0 0 1.5px var(--linea)}
.tablero-rotulo{font:800 13px/1 var(--titulo);font-stretch:112%;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-2);margin-bottom:12px;display:flex;justify-content:space-between}
.tablero-rotulo b{color:var(--neumatico)}
.lista-viajes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:60px}
.viaje{background:#fff;border:1.5px dashed #9aa1a8;border-radius:8px;padding:8px 10px;font-size:14px;line-height:1.3;
  display:grid;grid-template-columns:44px 1fr;gap:1px 10px;transition:border-color 200ms ease,background-color 200ms ease}
.viaje b{font-family:var(--titulo);font-weight:800;font-stretch:100%;font-size:12px;color:var(--tinta-2);grid-row:span 3;align-self:center}
.viaje .ruta{display:flex;flex-direction:column;min-width:0}
.viaje .g{font-weight:600;color:var(--neumatico)}
.viaje .m{color:var(--tinta-2)}
.viaje .flecha{color:var(--azul)}
.viaje small{color:var(--tinta-3);font-size:12px}
.lista-viajes:empty::after{content:"Todo repartido.";color:var(--tinta-3);font-size:14px;padding:6px 2px}
.viaje.puesto{border-style:solid;border-color:var(--azul);background:#f2f6fd}
.semana{background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--linea);overflow:hidden}
.semana-fila{display:grid;grid-template-columns:120px repeat(6,minmax(0,1fr));border-top:1px solid #dde1e5}
.semana-cabeza{border-top:0;background:#eef0f2}
.semana-cabeza span{font:800 12px/1 var(--titulo);font-stretch:112%;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2);padding:12px 8px}
.semana-fila>.nombre{padding:10px;font-weight:600;font-size:15px;border-right:1px solid #dde1e5;display:flex;flex-direction:column;justify-content:center}
.semana-fila>.nombre small{font-weight:400;color:var(--tinta-3);font-size:12px}
.celda{padding:6px;min-height:84px;border-left:1px solid #e9ecef}
.celda .viaje{grid-template-columns:1fr;font-size:12px;padding:6px 7px;gap:2px}
.celda .viaje b{grid-row:auto;font-size:11px}
.celda .viaje .ruta,.celda .viaje small{display:none}
.celda .viaje::after{content:attr(data-corto);color:var(--neumatico);line-height:1.25;font-weight:500}
.tablero-pie{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:18px}
.tablero-estado{font-weight:600}
.nota-ejemplo{flex-basis:100%;font-size:14px;color:var(--tinta-3)}
@media (max-width:980px){
  .tablero{grid-template-columns:1fr}
}
@media (max-width:600px){
  .semana-fila{grid-template-columns:76px repeat(6,minmax(0,1fr))}
  .semana-cabeza span{font-size:0;padding:10px 0;text-align:center}
  .semana-cabeza span::after{content:attr(data-c);font-size:12px}
  .semana-cabeza span:first-child{text-align:left;padding-left:8px}
  .semana-cabeza span:first-child::after{content:"Chófer"}
  .semana-fila>.nombre{padding:8px;font-size:13px}
  .celda{padding:3px;min-height:64px}
  .celda .viaje{padding:4px 2px;text-align:center}
  .celda .viaje b{font-size:10px}
  .celda .viaje::after{display:none}
}

/* qué vigila: placa de características atornillada */
.placa{margin:0;background:var(--alu-claro);border-radius:12px;padding:8px clamp(16px,3vw,32px);
  box-shadow:inset 0 0 0 2px var(--alu-oscuro);position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,56px)}
.placa::before,.placa::after{content:"";position:absolute;top:12px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#8d959c 60%);box-shadow:0 0 0 1px #7b838a}
.placa::before{left:12px}.placa::after{right:12px}
.placa>div{display:grid;grid-template-columns:1fr;gap:6px;padding:18px 0;border-bottom:1px solid rgba(27,30,34,.14)}
.placa>div:nth-last-child(-n+2){border-bottom:0}
.placa dt{font:900 italic 19px/1.1 var(--rotulo);font-stretch:125%;color:var(--azul);letter-spacing:-.01em}
.placa dd{margin:0;color:var(--tinta)}
@media (max-width:820px){.placa{grid-template-columns:1fr}.placa>div{grid-template-columns:1fr;gap:4px}}

/* cómo se empieza: hitos kilométricos sobre la carretera */
.hitos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,32px);position:relative}
.hitos::before{content:"";position:absolute;left:0;right:0;top:44px;height:14px;border-radius:7px;
  background:linear-gradient(90deg,transparent 0 14px,rgba(247,247,244,.85) 14px 44px,transparent 44px) 0 50%/58px 3px repeat-x,var(--asfalto)}
.hitos li{position:relative}
.hito{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:54px;height:96px;
  background:var(--blanco);border-radius:27px 27px 4px 4px;box-shadow:inset 0 0 0 2px #c8cdd2;margin-bottom:18px;overflow:hidden}
.hito::before{content:"";position:absolute;top:0;left:0;right:0;height:30px;background:#c8102e}
.hito b{font:800 26px/1 var(--titulo);font-stretch:112%;margin-bottom:16px;color:var(--neumatico)}
.hitos h3{font:800 21px/1.15 var(--titulo);font-stretch:112%;letter-spacing:-.01em;margin-bottom:6px}
.hitos p{color:var(--tinta-2)}
@media (max-width:820px){
  .hitos{grid-template-columns:1fr;gap:0}
  .hitos::before{left:20px;right:auto;top:0;bottom:0;width:14px;height:auto;
    background:linear-gradient(180deg,transparent 0 10px,rgba(247,247,244,.85) 10px 34px,transparent 34px) 50% 0/3px 44px repeat-y,var(--asfalto)}
  .hitos li{display:grid;grid-template-columns:54px 1fr;column-gap:18px;padding-bottom:26px}
  .hito{grid-row:span 2;margin:0}
  .hitos h3{align-self:end}
}

/* cierre */
.cierre{max-width:1240px;margin:clamp(80px,10vw,128px) auto 0;padding:0 var(--borde);display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px}
.cierre h2{font:800 clamp(30px,3.8vw,48px)/1.05 var(--titulo);font-stretch:112%;letter-spacing:-.02em;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em}
.rotulo-nombre-chico{font-size:1.5em;line-height:1}

/* pie */
.pie{max-width:1240px;margin:clamp(72px,9vw,112px) auto 0;padding:28px var(--borde) 40px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;color:var(--tinta-2);font-size:15px}
.pie .marca span{font-size:20px}
.pie a:last-child{margin-left:auto}