/* ═══════════════════════════════════════════════════════════
   RECOLECT · Recolectora Ambiental del Norte
   Dirección: hoja de operación impresa. Base clara, tinta,
   naranja de marca como color estructural y verde institucional.
   ═══════════════════════════════════════════════════════════ */

:root{
  --papel:#FFFFFF;
  --papel-2:#EFF1EE;
  --papel-3:#E2E6E1;
  --linea:#D3D8D2;

  --tinta:#14171A;
  --gris:#616B65;
  --gris-2:#8C948E;

  /* Un solo naranja. Regla: sobre fondo claro va como bloque o trazo,
     nunca como color de letra; sobre fondo oscuro sí puede ser texto. */
  --naranja:#F2700A;
  --naranja-o:#C85A00;        /* mismo naranja, estado presionado */
  --naranja-s:#FDE3CC;        /* lavado para rellenos de plano */

  --verde:#005E33;            /* verde del logo */
  --verde-o:#004626;

  --acero:#16201D;
  --acero-2:#22302B;
  --acero-3:#33443D;

  --disp:'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --texto:'Barlow', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --env:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
::selection{background:var(--naranja);color:var(--tinta)}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--naranja-o);
  outline-offset:2px;
}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--verde);color:#fff;padding:.8rem 1.2rem;
  font-family:var(--mono);font-size:.8rem;
}
.saltar:focus{left:0}

.env{width:min(100% - 2.4rem, var(--env));margin-inline:auto}

/* ── Tipografía compartida ───────────────────────────────── */
.ojo{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--verde);
  margin:0 0 1rem;
}
.ojo--centro{text-align:center;color:var(--gris-2)}

.sec-tit{
  font-family:var(--disp);
  font-stretch:115%;
  font-weight:800;
  font-size:clamp(2rem,4.3vw,3.3rem);
  line-height:1;
  letter-spacing:-.022em;
  margin:0 0 1.1rem;
  text-wrap:balance;
}
.sec-tit em{font-style:normal}

.traza__rej .sec-tit,
.cobertura__rej .sec-tit,
.cotizar__rej .sec-tit{font-size:clamp(1.9rem,3.2vw,2.75rem)}

.sec-txt{font-size:1.08rem;color:var(--gris);max-width:56ch;margin:0}

.nota{
  font-family:var(--mono);font-size:.735rem;line-height:1.65;
  color:var(--gris);margin:1.6rem 0 0;
}

.seccion{padding:clamp(4.2rem,8.5vw,7rem) 0}
.sec-enc{margin-bottom:clamp(2.4rem,4.6vw,3.6rem);max-width:44rem}

/* ── Botones ─────────────────────────────────────────────── */
.btn{
  --bg:transparent;--fg:var(--tinta);--bd:currentColor;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--bg);color:var(--fg);
  border:2px solid var(--bd);
  padding:.7rem 1.35rem;
  font-family:var(--mono);
  font-size:.755rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn--g{padding:.95rem 1.85rem;font-size:.79rem}
.btn--pleno{width:100%}

/* acción principal: naranja de marca */
.btn--accion{--bg:var(--naranja);--fg:var(--tinta);--bd:var(--naranja)}
.btn--accion:hover{--bg:var(--naranja-o);--bd:var(--naranja-o);--fg:#fff}

.btn--verde{--bg:var(--verde);--fg:#fff;--bd:var(--verde)}
.btn--verde:hover{--bg:var(--verde-o);--bd:var(--verde-o)}

.btn--linea{--bg:transparent;--fg:var(--tinta);--bd:var(--linea)}
.btn--linea:hover{--bd:var(--tinta)}

.btn--wa{--bg:transparent;--fg:var(--tinta);--bd:var(--tinta)}
.btn--wa:hover{--bg:var(--tinta);--fg:#fff}

/* ═══ CABECERA ═══════════════════════════════════════════ */
.cabecera{
  position:fixed;inset:0 0 auto;z-index:100;
  background:var(--papel);
  border-bottom:1px solid var(--linea);
}
.cabecera__int{
  width:min(100% - 2.4rem, var(--env));margin-inline:auto;
  display:flex;align-items:center;gap:1.1rem;
  height:78px;
  transition:height .25s var(--ease);
}
.cabecera.pegada .cabecera__int{height:66px}

.marca{flex:none;display:flex;align-items:center}
.marca img{width:152px;height:auto}
.marca__claro{display:none}

.nav{display:flex;gap:1.15rem;margin-left:auto;white-space:nowrap}
.nav a{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;color:var(--gris);
  padding-block:.35rem;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--tinta);border-bottom-color:var(--naranja)}

.cabecera__acc{display:flex;gap:.6rem;flex:none}

.menu-btn{
  display:none;flex-direction:column;gap:5px;justify-content:center;
  width:44px;height:44px;margin-left:auto;
  background:none;border:0;cursor:pointer;padding:0;
}
.menu-btn span{display:block;height:2px;width:24px;background:var(--tinta);margin-inline:auto;transition:transform .28s var(--ease),opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-movil{
  display:none;
  background:var(--papel);
  border-top:1px solid var(--linea);
  padding:.6rem 1.2rem 1.4rem;
  flex-direction:column;
}
@media (max-width:1040px){.menu-movil:not([hidden]){display:flex}}
.menu-movil a{
  color:var(--tinta);text-decoration:none;padding:.95rem .1rem;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--linea);
}
.menu-movil__cta{
  margin-top:1.1rem;background:var(--naranja);border:0;
  text-align:center;padding:1.05rem;
}

/* ═══ HERO ═══════════════════════════════════════════════ */
.hero{background:var(--papel);position:relative}
.hero__rej{
  width:min(100% - 2.4rem, var(--env));margin-inline:auto;
  display:grid;grid-template-columns:1fr .76fr;
  gap:clamp(1.8rem,3.5vw,3.2rem);
  align-items:center;
  min-height:min(86svh,800px);
  padding:142px 0 clamp(2.4rem,4vw,3.4rem);
}
.hero__int{position:relative}
.hero__ojo{color:var(--verde);font-weight:600}

.hero__titulo{
  font-family:var(--disp);
  font-stretch:120%;
  font-weight:900;
  font-size:clamp(2.2rem,4.5vw,4rem);
  line-height:.96;
  letter-spacing:-.032em;
  text-transform:uppercase;
  margin:0 0 1.5rem;
}
.hero__titulo .l{display:block}
.hero__titulo .l > *{display:block}


.hero__texto{
  font-size:clamp(1.02rem,1.5vw,1.14rem);
  color:var(--gris);max-width:50ch;margin:0 0 2.1rem;
}
.hero__botones{display:flex;gap:.8rem;flex-wrap:wrap}

.hero__foto{position:relative;align-self:stretch;min-height:340px;background:var(--papel-2)}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:44% 42%}
.hero__placa{
  position:absolute;left:0;bottom:0;z-index:2;
  margin:0;padding:.7rem 1rem;
  background:var(--naranja);
  display:flex;flex-direction:column;gap:.05rem;
}
.hero__placa span{
  font-family:var(--mono);font-size:.605rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--verde-o);
}
.hero__placa b{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.03em;color:var(--tinta);
}

/* banda de cifras: aquí el naranja entra a toda página */
.tablero{background:var(--naranja);color:var(--tinta)}
.tablero__int{
  width:min(100% - 2.4rem, var(--env));margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.tablero__d{
  padding:1.7rem 1.4rem 1.8rem;
  border-left:1px solid rgba(20,23,26,.17);
  display:flex;flex-direction:column;gap:.2rem;
}
.tablero__d:first-child{border-left:0;padding-left:0}
.tablero__d b{
  font-family:var(--disp);font-stretch:112%;font-weight:800;
  font-size:clamp(2rem,3.5vw,2.9rem);line-height:1;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}
.tablero__d span{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(20,23,26,.72);line-height:1.55;
}

/* ═══ CLIENTES ═══════════════════════════════════════════ */
.clientes{background:var(--papel-2);padding:3rem 0 2.8rem}
.clientes__fila{
  list-style:none;margin:1.3rem 0 0;padding:0;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(2rem,6vw,4.5rem);flex-wrap:wrap;
}
.clientes__fila img{
  height:clamp(20px,2.5vw,28px);width:auto;
  filter:grayscale(1);opacity:.5;
  transition:filter .25s,opacity .25s;
}
.clientes__fila li:hover img{filter:none;opacity:1}

/* ═══ OPERACIÓN ══════════════════════════════════════════ */
.operacion{background:var(--papel)}
.pasos{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  border-top:2px solid var(--tinta);
}
.paso{
  padding:1.7rem 1.5rem 1.9rem 0;
  border-right:1px solid var(--linea);
  padding-right:1.5rem;
  position:relative;
}
.paso::before{                 /* la marca naranja de cada paso */
  content:"";position:absolute;left:0;top:-2px;
  width:38px;height:4px;background:var(--naranja);
}
.paso:last-child{border-right:0}
.paso__n{
  font-family:var(--disp);font-stretch:112%;font-weight:800;
  font-size:1.7rem;line-height:1;letter-spacing:-.02em;
  color:var(--tinta);display:block;margin-bottom:1.2rem;
  font-variant-numeric:tabular-nums;
}
.paso h3{
  font-family:var(--disp);font-stretch:108%;font-weight:700;
  font-size:1.14rem;line-height:1.16;letter-spacing:-.01em;margin:0 0 .55rem;
}
.paso p{margin:0;font-size:.95rem;color:var(--gris);line-height:1.58}

/* ═══ EQUIPOS · plano técnico ════════════════════════════ */
.equipos{background:var(--papel-2)}
.comp{
  display:grid;
  grid-template-columns:1fr minmax(296px,340px);
  grid-template-areas:"sel ficha" "escena ficha";
  border:2px solid var(--tinta);
  background:var(--papel);
}
.comp__sel{
  grid-area:sel;
  display:flex;gap:2.2rem;flex-wrap:wrap;
  padding:1.3rem 1.6rem;
  border-bottom:1px solid var(--linea);
}
.comp__grupo{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.comp__grupo-t{
  font-family:var(--mono);font-size:.635rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-2);margin:0 .35rem 0 0;
}
.chip{
  background:var(--papel);color:var(--gris);
  border:1.5px solid var(--linea);
  padding:.44rem .85rem;
  font-family:var(--mono);font-size:.755rem;font-weight:500;letter-spacing:.03em;
  cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.chip:hover{border-color:var(--tinta);color:var(--tinta)}
.chip--on{background:var(--naranja);border-color:var(--naranja);color:var(--tinta);font-weight:600}

.comp__escena{grid-area:escena;padding:1.4rem 1.6rem 1.6rem;display:flex;align-items:flex-end}
/* Al reducirse el lienzo, el texto del plano se agranda en unidades
   del SVG para conservar su tamaño real en pantalla. */
.comp__svg--chico .comp__malla text{font-size:15px}
.comp__svg--chico .comp__ref text{font-size:15px}
.comp__svg--chico .comp__cota-t{font-size:17px}
.comp__svg--chico .comp__cuerpo{stroke-width:3.5}
.comp__svg--chico .comp__cotas path{stroke-width:2}
.comp__svg--chico .comp__ref line{stroke-width:2}
.comp__svg{width:100%;height:auto}

/* retícula métrica: la escala se lee del papel, no de una figura */
.comp__malla line{stroke:var(--linea);stroke-width:1}
.comp__malla .m5{stroke:var(--papel-3);stroke-width:1.5}
.comp__malla text{
  fill:var(--gris-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-anchor:middle;
}
.comp__piso{stroke:var(--tinta);stroke-width:2}

/* referencia de estatura, acotada y sin dibujo figurativo */
.comp__ref line{stroke:var(--verde);stroke-width:1.5;stroke-dasharray:6 4}
.comp__ref text{
  fill:var(--verde);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.05em;
}

.comp__cuerpo{
  fill:var(--naranja-s);stroke:var(--naranja);stroke-width:2.5;stroke-linejoin:round;
  transition:d .5s var(--ease);
}
.comp__detalle{fill:none;stroke:var(--naranja);stroke-width:1.3;opacity:.6;transition:d .5s var(--ease)}
.comp__cotas path{stroke:var(--tinta);stroke-width:1.3;fill:none;transition:d .42s var(--ease)}
.comp__cota-t{
  fill:var(--tinta);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  transition:x .42s var(--ease), y .42s var(--ease);
}
.comp__cota-t--w{text-anchor:middle}
.comp__cota-t--h{text-anchor:end}

.comp__ficha{
  grid-area:ficha;
  border-left:1px solid var(--linea);
  padding:1.6rem;
  display:flex;flex-direction:column;
  background:var(--papel-2);
}
.comp__ficha-tipo{
  font-family:var(--mono);font-size:.665rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--verde);margin:0 0 .25rem;
}
.comp__ficha-vol{
  font-family:var(--disp);font-stretch:115%;font-weight:800;
  font-size:2.9rem;line-height:1;letter-spacing:-.03em;margin:0 0 1.2rem;
}
.comp__ficha-vol b{font-weight:inherit;font-variant-numeric:tabular-nums}
.comp__datos{
  margin:0 0 1.2rem;padding:1.05rem 0;
  border-block:1px solid var(--linea);
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem;
}
.comp__datos div{display:flex;flex-direction:column;gap:.08rem}
.comp__datos dt{
  font-family:var(--mono);font-size:.615rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2);
}
.comp__datos dd{margin:0;font-family:var(--mono);font-size:.92rem;font-variant-numeric:tabular-nums}
.comp__ficha-uso{font-size:.94rem;color:var(--gris);margin:0 0 1rem;line-height:1.55}
.comp__ficha-para{font-size:.86rem;margin:0 0 1.4rem;line-height:1.45}
.comp__ficha-para span{
  display:block;font-family:var(--mono);font-size:.615rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2);margin-bottom:.15rem;
}
.comp__ficha .btn{margin-top:auto}


/* ═══ RESIDUOS ═══════════════════════════════════════════ */
.residuos{background:var(--papel)}
.corrientes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  border-top:2px solid var(--tinta);
}
.corriente{
  padding:1.7rem 1.5rem 1.9rem 0;
  border-right:1px solid var(--linea);
  position:relative;
}
.corriente:last-child{border-right:0}
.corriente::before{
  content:"";position:absolute;left:0;top:-2px;width:38px;height:4px;background:var(--naranja);
}
.corriente h3{
  font-family:var(--disp);font-stretch:108%;font-weight:700;
  font-size:1.14rem;line-height:1.16;letter-spacing:-.01em;margin:0 0 .5rem;
}
.corriente > p{margin:0 0 1rem;font-size:.94rem;color:var(--gris);line-height:1.55}
.corriente ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.corriente li{
  font-family:var(--mono);font-size:.735rem;line-height:1.45;
  color:var(--gris);padding:.6rem 0;border-bottom:1px solid var(--linea);
}
@media (max-width:1040px){
  .corriente{border-right:0;border-bottom:1px solid var(--linea);padding-right:0}
  .corrientes{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 2.4rem}
}

/* ═══ TRAZABILIDAD ═══════════════════════════════════════ */
.traza{background:var(--papel)}
.traza__rej{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,4.5vw,4rem);align-items:center}
.lista{list-style:none;margin:1.8rem 0 2.1rem;padding:0;display:grid;gap:.75rem}
.lista li{
  position:relative;padding-left:1.5rem;font-size:1rem;color:var(--gris);line-height:1.55;
}
.lista li::before{
  content:"";position:absolute;left:0;top:.56em;
  width:8px;height:8px;background:var(--naranja);
}
.lista b{color:var(--tinta);font-weight:600}

/* reporte de ruta: una tabla, no una ventana de aplicación */
.panel{border:2px solid var(--tinta);background:var(--papel)}
.panel__barra{
  display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  padding:.85rem 1.1rem;background:var(--tinta);
}
.panel__barra p{
  margin:0 0 0 auto;font-family:var(--mono);font-size:.65rem;
  letter-spacing:.06em;color:rgba(255,255,255,.55);
}
.panel__ruta{
  margin:0;font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);
}
.panel__cuerpo{padding:.4rem 1.1rem 1.1rem}
.panel__lista{list-style:none;margin:0;padding:0}
.panel__lista li{
  display:grid;grid-template-columns:1fr auto 9rem;align-items:center;gap:.7rem;
  padding:.8rem .1rem;
  border-bottom:1px solid var(--linea);
  font-family:var(--mono);font-size:.735rem;
}
.panel__lista .pt{font-weight:500}
.panel__lista .hr{color:var(--gris);font-variant-numeric:tabular-nums}
.panel__lista .et{
  text-align:right;font-size:.655rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.panel__lista .ok .et{color:var(--verde)}
.panel__lista .inc .et{background:var(--naranja);color:var(--tinta);padding:.16em .5em}
.panel__lista .cur{color:var(--gris-2)}
.panel__lista .cur .et,.panel__lista .cur .hr{color:var(--gris-2)}
.panel__pie{
  font-family:var(--mono);font-size:.635rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2);margin:1rem 0 0;
}

/* ═══ PLANTA ═════════════════════════════════════════════ */
.planta{background:var(--acero);color:#fff}
.planta .sec-tit{color:#fff}

.planta .sec-txt{color:rgba(255,255,255,.68)}
.planta .ojo{color:var(--naranja)}
.planta__foto{margin:0 0 2.4rem;position:relative}
.planta__foto figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--naranja);
  padding:.6rem 1rem;
  font-family:var(--mono);font-size:.65rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--tinta);
}
.planta__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid var(--acero-3)}
.planta__cols > div{padding:1.5rem 1.4rem 0 0;border-right:1px solid var(--acero-3);padding-right:1.4rem}
.planta__cols > div:last-child{border-right:0}
.planta__cols h3{
  font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--naranja);margin:0 0 .65rem;
}
.planta__cols p{margin:0;font-size:.94rem;color:rgba(255,255,255,.65);line-height:1.58}

/* ═══ COBERTURA ══════════════════════════════════════════ */
.cobertura{background:var(--papel-2)}
.cobertura__rej{display:grid;grid-template-columns:1fr .8fr;gap:clamp(2.2rem,4.5vw,4rem);align-items:center}
.zonas{list-style:none;margin:1.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.zonas li{
  font-family:var(--mono);font-size:.73rem;
  border:1.5px solid var(--linea);background:var(--papel);
  padding:.38rem .75rem;color:var(--gris);
  transition:border-color .2s,color .2s;
}
.zonas li:hover{border-color:var(--naranja);color:var(--tinta)}

.cerro{width:100%;height:auto}
.cerro__linea{
  fill:none;stroke:var(--naranja);stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;
}
.cobertura__pie{
  font-family:var(--mono);font-size:.685rem;color:var(--gris-2);
  margin:.9rem 0 0;text-align:center;
}

/* ═══ COTIZAR ════════════════════════════════════════════ */
.cotizar{background:var(--verde);color:#fff}
.cotizar .sec-tit{color:#fff}

.cotizar .sec-txt{color:rgba(255,255,255,.78)}
.cotizar .ojo{color:rgba(255,255,255,.82)}
.cotizar__rej{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,4.5vw,4rem);align-items:start}

.contacto{margin-top:2.2rem;border-top:1px solid rgba(255,255,255,.2)}
.contacto__f{
  padding:.95rem .1rem;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.2);
  display:flex;flex-direction:column;gap:.08rem;
  transition:padding-left .2s var(--ease);
}
a.contacto__f:hover{padding-left:.6rem}
.contacto__et{
  font-family:var(--mono);font-size:.615rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.contacto__v{font-family:var(--mono);font-size:.9rem;color:#fff;word-break:break-word}
a.contacto__f:hover .contacto__v{color:#fff;text-decoration:underline;text-underline-offset:.28em}

.form{background:var(--papel);color:var(--tinta);padding:clamp(1.5rem,3vw,2.1rem);display:grid;gap:.95rem}
.form__fila{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.campo{display:flex;flex-direction:column;gap:.35rem}
.campo > span{
  font-family:var(--mono);font-size:.635rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2);
}
.campo > span i{font-style:normal;text-transform:none;letter-spacing:.03em}
.campo input,.campo select,.campo textarea{
  font-family:var(--texto);font-size:.98rem;
  background:var(--papel-2);color:var(--tinta);
  border:1.5px solid var(--linea);
  padding:.7rem .85rem;width:100%;
  transition:border-color .18s,background .18s;
}
.campo textarea{resize:vertical;min-height:80px}
.campo input::placeholder,.campo textarea::placeholder{color:var(--gris-2)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--tinta);background:var(--papel)}
.campo select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:var(--naranja-o)}

.trampa{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}

.form__aviso{
  font-family:var(--mono);font-size:.63rem;line-height:1.6;
  color:var(--gris);margin:0;text-align:center;
}
.form__estado{margin:0;font-family:var(--mono);font-size:.78rem;letter-spacing:.03em}
.form__estado.ok{color:var(--verde)}
.form__estado.mal{color:var(--verde-o)}

/* ═══ PIE ════════════════════════════════════════════════ */
.pie{background:var(--acero);color:#fff;padding-top:clamp(2.8rem,5.5vw,4.2rem)}
.pie__rej{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.4rem;padding-bottom:2.8rem}
.pie__marca img{width:172px;margin-bottom:1rem}
.pie__marca .marca__oscuro{display:none}
.pie__marca p{margin:0;font-size:.92rem;color:rgba(255,255,255,.52);line-height:1.65}
.pie__col{display:flex;flex-direction:column;gap:.6rem}
.pie__t{
  font-family:var(--mono);font-size:.635rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--naranja);margin:0 0 .3rem;
}
.pie__col a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.92rem;width:fit-content;transition:color .2s}
.pie__col a:hover{color:var(--naranja)}
.pie__hr{margin:.35rem 0 0;font-family:var(--mono);font-size:.7rem;color:rgba(255,255,255,.45)}
.pie__base{border-top:1px solid var(--acero-3);padding:1.25rem 0}
.pie__base-int{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.665rem;color:rgba(255,255,255,.45);
}
.pie__base-int p{margin:0}

/* ═══ WHATSAPP FLOTANTE ══════════════════════════════════ */
.wa-flota{
  position:fixed;right:1.15rem;bottom:1.15rem;z-index:90;
  width:54px;height:54px;
  background:var(--verde);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 8px 22px -6px rgba(0,70,38,.5);
  opacity:0;pointer-events:none;
  transition:opacity .25s,background .2s;
}
.wa-flota.vista{opacity:1;pointer-events:auto}
.wa-flota:hover{background:var(--verde-o)}

/* ═══ REVELADO AL DESPLAZAR ══════════════════════════════ */
/* Sin animaciones de entrada ni de scroll: el contenido está desde el
   primer cuadro. Sólo quedan las transiciones de interfaz. */

/* ═══ RESPONSIVO ═════════════════════════════════════════ */
@media (max-width:1040px){
  .nav,.cabecera__acc{display:none}
  .menu-btn{display:flex}
  .comp{grid-template-columns:1fr;grid-template-areas:"sel" "escena" "ficha"}
  .comp__ficha{border-left:0;border-top:1px solid var(--linea)}
  .pie__rej{grid-template-columns:1fr 1fr;gap:2.2rem}
  .paso{border-right:0;border-bottom:1px solid var(--linea);padding-right:0}
  .pasos{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 2.4rem}
}
@media (max-width:900px){
  .hero__rej{grid-template-columns:1fr;min-height:0;padding-top:120px;gap:2rem}
  .hero__foto{min-height:0;height:clamp(230px,38svh,330px)}
}
@media (max-width:860px){
  .traza__rej,.cobertura__rej,.cotizar__rej{grid-template-columns:1fr}
  .traza__vis{order:-1}
  .cobertura__cerro{max-width:420px;margin-inline:auto}
  .tablero__int{grid-template-columns:1fr 1fr}
  .tablero__d{border-left:1px solid rgba(20,23,26,.17);padding:1.2rem 1rem}
  .tablero__d:nth-child(odd){border-left:0;padding-left:0}
  .tablero__d:nth-child(n+3){border-top:1px solid rgba(20,23,26,.17)}
  .planta__cols > div{border-right:0;border-bottom:1px solid var(--acero-3);padding-bottom:1.4rem}
  .planta__cols > div:last-child{border-bottom:0}
}
@media (max-width:620px){
  body{font-size:16px}
  .hero__rej{padding-top:108px}
  .hero__titulo{font-size:clamp(2.3rem,10.5vw,3.4rem)}
  .hero__botones .btn{flex:1 1 100%}
  .form__fila{grid-template-columns:1fr}
  .comp__datos{grid-template-columns:1fr 1fr}
  .comp__sel{gap:1.1rem;flex-direction:column;align-items:stretch}
  .comp__grupo{gap:.4rem}
  .comp__grupo-t{width:100%;margin:0 0 .15rem}
  .chip{flex:1 1 0;text-align:center}
  .comp__escena{padding:1.1rem 1rem 1.3rem}
  .pie__rej{grid-template-columns:1fr}
  .panel__lista li{grid-template-columns:1fr auto;row-gap:.15rem}
  .panel__lista .et{grid-column:1/-1;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ── Dirección en el pie ──────────────────────────────── */
.pie__dir{
  font-style:normal;margin:.9rem 0 0;
  font-family:var(--mono);font-size:.72rem;line-height:1.75;
  color:rgba(255,255,255,.45);
}
.pie__base-int a{color:inherit;text-decoration:underline;text-underline-offset:.25em}
.pie__base-int a:hover{color:var(--naranja)}

/* ═══ PÁGINAS LEGALES ════════════════════════════════════ */
.legal{background:var(--papel);padding:calc(78px + clamp(2.6rem,5vw,4rem)) 0 clamp(3.5rem,7vw,6rem)}
.legal__int{max-width:46rem}
.legal__tit{
  font-family:var(--disp);font-stretch:115%;font-weight:800;
  font-size:clamp(2rem,4.2vw,3rem);line-height:1;letter-spacing:-.022em;margin:0 0 1rem;
}
.legal__intro{font-size:1.06rem;color:var(--gris);margin:0 0 2.2rem}
.legal__ficha{
  margin:0 0 2.8rem;padding:1.3rem 0;
  border-block:2px solid var(--tinta);
  display:grid;gap:.85rem;
}
.legal__ficha div{display:grid;grid-template-columns:minmax(150px,11rem) 1fr;gap:.4rem 1.2rem}
.legal__ficha dt{
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris-2);padding-top:.15rem;
}
.legal__ficha dd{margin:0;font-size:.97rem}
.legal h2{
  font-family:var(--disp);font-stretch:110%;font-weight:700;
  font-size:1.3rem;line-height:1.2;letter-spacing:-.012em;
  margin:2.6rem 0 .9rem;padding-top:1.4rem;border-top:1px solid var(--linea);
}
.legal p{margin:0 0 1.1rem;color:var(--gris);line-height:1.72}
.legal p b,.legal li b{color:var(--tinta);font-weight:600}
.legal ul{margin:0 0 1.3rem;padding:0;list-style:none}
.legal li{
  position:relative;padding-left:1.4rem;margin-bottom:.7rem;
  color:var(--gris);line-height:1.68;
}
.legal li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--naranja)}
.legal a{color:var(--verde);text-decoration:underline;text-underline-offset:.22em}
.legal a:hover{color:var(--naranja-o)}
.legal__nota{
  font-family:var(--mono);font-size:.78rem;line-height:1.7;
  background:var(--papel-2);padding:1rem 1.2rem;border-left:4px solid var(--naranja);
}
.legal__cierre{
  margin-top:2.6rem;padding-top:1.6rem;border-top:2px solid var(--tinta);
  font-weight:500;color:var(--tinta);
}
@media (max-width:620px){
  .legal__ficha div{grid-template-columns:1fr}
}

/* ═══ PREGUNTAS FRECUENTES ═══════════════════════════════ */
.faq{background:var(--papel-2)}
.faq__rej{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;border-top:2px solid var(--tinta);
}
.faq__it{
  padding:1.7rem 2rem 1.9rem 0;
  border-bottom:1px solid var(--linea);
  position:relative;
}
.faq__it::before{
  content:"";position:absolute;left:0;top:-2px;width:38px;height:4px;background:var(--naranja);
}
.faq__it:nth-child(-n+2)::before{display:block}
.faq__it h3{
  font-family:var(--disp);font-stretch:108%;font-weight:700;
  font-size:1.1rem;line-height:1.22;letter-spacing:-.01em;margin:0 0 .6rem;
}
.faq__it p{margin:0;font-size:.97rem;color:var(--gris);line-height:1.62}
@media (min-width:1041px){
  .faq__it:nth-child(odd){padding-right:3rem;border-right:1px solid var(--linea)}
  .faq__it:nth-child(even){padding-left:3rem}
  .faq__it::before{display:none}
  .faq__it:nth-child(even)::before{left:3rem}
}
@media (max-width:860px){
  .faq__rej{grid-template-columns:1fr}
  .faq__it{padding-right:0}
}