/* ==========================================================================
   ASG MINING — sistema visual, noviembre 2026
   --------------------------------------------------------------------------
   Direccion: "plancha de faena". El navy del logo como campo, la linea tecnica
   del mundo minero como grafica (curvas de nivel del rajo, la pertiga con su
   banderola, la rampa de acarreo) y el naranja del logo como SENAL: boton,
   banderola, rampa, faena en el mapa. Nunca como adorno.

   Tipografia: Big Shoulders (rotulacion industrial) para titulos, su version
   esténcil para las cifras grandes —como el numero pintado en un equipo—,
   Archivo para leer y DM Mono para todo dato y rotulo.

   Un solo tema a proposito: es la web de una marca y se ve igual para todos.
   ========================================================================== */
:root{
  color-scheme:light;

  /* marca */
  --navy:#2B2E80;          /* color exacto del logo; 10:1 sobre papel */
  --navy-deep:#161A3D;     /* campos oscuros */
  --night:#0E1130;         /* lo mas profundo: barra superior, hero, pie */
  --orange:#E2712C;        /* relleno o filete. Como texto, SOLO sobre navy (5,5:1) */
  --orange-hi:#F08A47;
  --orange-ink:#A24A12;    /* naranja escribible sobre papel: 5,3:1 */

  /* neutros con sesgo al navy */
  --paper:#F3F4F7;
  --plate:#FFFFFF;
  --inset:#E9EBF1;
  --ink:#14173A;           /* 15:1 */
  --ink-2:#4A4F6B;         /* 7:1 */
  --line:#D5D8E2;
  --line-strong:#7C8199;   /* bordes de control: 3,4:1 */
  --on-dark:#EEF0F8;
  --on-dark-2:#A9AECF;     /* 7,5:1 sobre navy-deep */
  --line-dark:rgba(238,240,248,.16);

  /* tipografia */
  --f-disp:'Big Shoulders','Arial Narrow','Roboto Condensed',sans-serif;
  --f-sten:'Big Shoulders Stencil','Big Shoulders','Arial Narrow',sans-serif;
  --f-text:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'DM Mono',ui-monospace,'Consolas',monospace;

  /* ritmo */
  --max:1320px;
  --gut:clamp(20px,4vw,48px);
  --pad:clamp(72px,9vw,128px);
  --corte:22px;            /* la esquina cortada de toda plancha */
  --ease:cubic-bezier(.215,.61,.355,1);

  /* iconos de linea, dibujados una vez */
  --flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%230E1130' stroke-width='1.6'/%3E%3C/svg%3E");
  --flecha-navy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%232B2E80' stroke-width='1.6'/%3E%3C/svg%3E");
  --flecha-clara:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23EEF0F8' stroke-width='1.6'/%3E%3C/svg%3E");
  /* la pertiga: mastil y banderola, como la del vehiculo */
  --pertiga:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22'%3E%3Cpath d='M1.5 1v21' stroke='%232B2E80' stroke-width='1.5'/%3E%3Cpath d='M2.2 1.2 11 4.6 2.2 8z' fill='%23E2712C'/%3E%3C/svg%3E");
  --pertiga-clara:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22'%3E%3Cpath d='M1.5 1v21' stroke='%23A9AECF' stroke-width='1.5'/%3E%3Cpath d='M2.2 1.2 11 4.6 2.2 8z' fill='%23E2712C'/%3E%3C/svg%3E");
}

/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:104px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 var(--f-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* La franja del notch, cuando la hay, del color de la barra superior. */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);
  z-index:90;background:var(--night)}
img,svg{display:block;max-width:100%}
img{height:auto}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
a{color:inherit}
strong{font-weight:650}
h1,h2,h3{margin:0;font-family:var(--f-disp);font-weight:800;text-transform:uppercase;
  text-wrap:balance;letter-spacing:.005em;font-optical-sizing:auto}
h1{font-size:clamp(46px,6.2vw,96px);line-height:.9}
h2{font-size:clamp(38px,4.4vw,64px);line-height:.94}
h3{font-size:clamp(22px,1.8vw,27px);line-height:1.02;font-weight:750}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.oscuro :focus-visible,.hero :focus-visible,.evid :focus-visible,.top :focus-visible,
.util :focus-visible,.pie :focus-visible,.cab-interna :focus-visible,
.fl-caja :focus-visible{outline-color:var(--orange)}

.saltar{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 16px;background:var(--orange);
  color:var(--night);font-weight:600;text-decoration:none}
.saltar:focus{top:12px}

.env{width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));
  padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.sec{padding-block:var(--pad);position:relative}
.tono{background:var(--inset)}
.oscuro{background:var(--navy-deep);color:var(--on-dark)}
section[id]{scroll-margin-top:104px}

/* --- rotulo mono: la voz de instrumento --- */
.eti{font:500 12px/1.25 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2)}
.oscuro .eti{color:var(--on-dark-2)}
.dato{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* --- cabecera de seccion: banderola + titulo --- */
.cab{display:grid;gap:22px;max-width:880px;margin-bottom:clamp(40px,5vw,64px)}
.cab > .eti{display:flex;align-items:center;gap:12px}
.cab > .eti::before{content:"";width:12px;height:22px;flex:none;background:var(--pertiga) no-repeat;
  transform:translateY(-3px)}
.oscuro .cab > .eti::before,.cab-interna .eti::before{background-image:var(--pertiga-clara)}
.cab .lead,.lead{font-size:clamp(18px,1.45vw,20px);line-height:1.55;color:var(--ink-2);max-width:62ch}
.oscuro .lead{color:var(--on-dark-2)}

/* --- controles --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;
  padding:0 26px;border:0;border-radius:2px;cursor:pointer;text-decoration:none;
  font:600 15.5px/1 var(--f-text);letter-spacing:.01em;
  background:var(--orange);color:var(--night);
  transition:background-color .15s linear}
.btn::after{content:"";width:16px;height:10px;flex:none;background:var(--flecha) no-repeat center/contain;
  transition:transform .25s var(--ease)}
.btn:hover{background:var(--orange-hi)}
.btn:hover::after{transform:translateX(4px)}
.btn-cat{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;
  padding:0 24px;border:1.5px solid currentColor;border-radius:2px;text-decoration:none;
  font:600 15.5px/1 var(--f-text);color:var(--navy);background:transparent;
  transition:background-color .15s linear,color .15s linear}
.btn-cat:hover{background:var(--navy);color:var(--plate);border-color:var(--navy)}
.oscuro .btn-cat,.hero .btn-cat,.top .btn-cat,.cab-interna .btn-cat{color:var(--on-dark)}
.oscuro .btn-cat:hover,.hero .btn-cat:hover,.top .btn-cat:hover,.cab-interna .btn-cat:hover{
  background:var(--on-dark);color:var(--night);border-color:var(--on-dark)}
.btn-ancho{display:flex;width:100%;margin-top:24px}
.enlace{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;transition:text-decoration-thickness .15s linear}
.enlace:hover{text-decoration-thickness:2px}

/* --- dato por confirmar: discreto para el cliente, visible al revisar --- */
.pend{border-bottom:1px dotted var(--line-strong);cursor:help}
body.rev .pend{background:#FFE9B8;border-bottom-color:var(--orange-ink);box-shadow:0 0 0 2px #FFE9B8;color:#151833}
.oscuro .pend,.pie .pend,.util .pend{border-bottom-color:var(--on-dark-2)}

/* --- revelado: el HTML nace visible; el JS opta por animar, solo opacidad --- */
body.anim .rv{opacity:0;transition:opacity .5s var(--ease)}
body.anim .rv.on{opacity:1}

/* --- progreso de lectura --- */
.prog{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;z-index:95;pointer-events:none}
.prog i{display:block;height:100%;width:0;background:var(--orange)}

/* ===== barra de instrumentos ===== */
.util{background:var(--night);color:var(--on-dark-2);
  font:500 12px/1 var(--f-mono);letter-spacing:.08em}
.util .env{display:flex;align-items:stretch;min-height:38px}
.util a,.util .der{display:flex;align-items:center;padding:0 16px;text-decoration:none;
  border-right:1px solid var(--line-dark)}
.util a:first-child{padding-left:0}
.util a:hover{color:var(--on-dark)}
.util .der{margin-left:auto;border-right:0;border-left:1px solid var(--line-dark);padding-right:0;
  font:inherit;letter-spacing:.14em;color:var(--on-dark-2)}

/* ===== cabecera ===== */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:80;background:var(--navy-deep);
  color:var(--on-dark);border-bottom:1px solid var(--line-dark)}
.top .env{display:flex;align-items:center;gap:30px;min-height:78px}
.marca{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none}
.marca .iso{width:62px}
.marca .pal{width:148px}
.nav{display:flex;gap:28px}
.nav a{font:500 15px/1 var(--f-text);color:var(--on-dark);text-decoration:none;
  padding:10px 0;border-bottom:2px solid transparent;transition:border-color .15s linear}
.nav a:hover{border-bottom-color:var(--on-dark-2)}
.nav a[aria-current]{border-bottom-color:var(--orange)}
.top .btn,.top .btn-cat{min-height:46px;font-size:14.5px;padding:0 20px}
.top .btn::after{display:none}
.top .btn-cat.es-activo{background:var(--on-dark);color:var(--night)}
.top.pegado{box-shadow:0 10px 30px rgba(6,8,26,.35)}

.menu-btn{display:none;align-items:center;gap:10px;min-height:46px;padding:0 14px;
  background:none;border:1.5px solid var(--line-dark);border-radius:2px;color:var(--on-dark);
  font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.menu-rayas{display:grid;gap:4px;width:18px}
.menu-rayas i{display:block;height:2px;background:currentColor;transition:transform .2s var(--ease),opacity .2s}
.menu-btn[aria-expanded="true"] .menu-rayas i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-rayas i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-rayas i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-movil{display:none;flex-direction:column;background:var(--navy-deep);
  border-top:1px solid var(--line-dark);
  padding:8px max(var(--gut),env(safe-area-inset-right,0px)) 20px max(var(--gut),env(safe-area-inset-left,0px))}
.menu-movil[data-abierto]{display:flex}
.menu-movil a{display:flex;align-items:center;min-height:54px;text-decoration:none;
  font:800 24px/1 var(--f-disp);text-transform:uppercase;letter-spacing:.01em;color:var(--on-dark);
  border-bottom:1px solid var(--line-dark)}
.menu-movil a[aria-current]{color:var(--orange)}
.menu-movil .mm-tel{font:500 15px/1 var(--f-mono);letter-spacing:.06em;border-bottom:0;color:var(--on-dark-2)}

@media(max-width:1180px){
  .nav,.top .btn-cat{display:none}
  .menu-btn{display:inline-flex}
}
@media(max-width:640px){
  .util .der{display:none}
  .top .env{gap:12px;min-height:66px}
  .marca .iso{width:48px}
  .marca .pal{width:112px}
  .top .btn{display:none}
}

/* ==========================================================================
   HERO — PRIMERA VISTA COMPLETA. Mide el alto de la pantalla menos la
   cabecera y trae las cifras al pie: al abrir la pagina se ve todo, nada
   queda cortado. La foto del rajo va en sus colores reales y solo a la
   derecha; el navy queda bajo el texto.
   ========================================================================== */
:root{--alto-cab:117px}                    /* barra 38 + cabecera 78 + filete 1 */
@media(max-width:640px){:root{--alto-cab:105px}}
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  min-height:calc(100vh - var(--alto-cab));min-height:calc(100svh - var(--alto-cab));
  background:var(--night);color:var(--on-dark)}
.hero-foto{position:absolute;inset:0 0 0 30%;z-index:-1;background:#3B2E28}
.hero-foto img,.hero-traza{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-foto img{filter:saturate(.92) contrast(1.04)}
/* El navy entra desde la izquierda y se apaga antes de la mitad de la foto. */
.hero-foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--night) 0%,rgba(14,17,48,.78) 18%,rgba(14,17,48,.26) 42%,rgba(14,17,48,0) 62%)}
.hero-traza{z-index:2;overflow:visible}
.tz-halo{fill:none;stroke:rgba(14,17,48,.5);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.tz-camino{fill:none;stroke:var(--orange);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.tz-anillo{fill:rgba(14,17,48,.35);stroke:var(--orange);stroke-width:2.5}
.tz-punto{fill:var(--orange)}
.tz-txt{font:500 19px/1 var(--f-mono);letter-spacing:.14em;fill:#FFFFFF;
  paint-order:stroke;stroke:rgba(14,17,48,.8);stroke-width:5px;stroke-linejoin:round}
.tz-txt-2{fill:var(--on-dark);font-size:16px}
.tz-linea{stroke:#FFFFFF;stroke-width:1.4;opacity:.8}

.hero-cont{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(28px,6vh,72px)}
.hero-cont .eti{display:flex;align-items:center;gap:12px;color:var(--on-dark-2)}
.hero-cont .eti::before{content:"";width:12px;height:22px;flex:none;background:var(--pertiga-clara) no-repeat;transform:translateY(-3px)}
/* El titular se ajusta al ALTO disponible, no solo al ancho: tres lineas que
   caben hasta en un notebook de 768 de alto. */
.hero h1{max-width:12.6em;margin:clamp(14px,2.4vh,24px) 0 clamp(16px,2.8vh,28px);color:#FFFFFF;
  font-size:clamp(36px,min(5.2vw,8.6vh),88px)}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lead{max-width:58ch;color:var(--on-dark-2);font-size:clamp(16px,min(1.35vw,2.3vh),20px)}
.hero-acc{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(20px,3.6vh,38px)}
.hero-serv{margin-top:clamp(14px,2.4vh,26px);font-size:12.5px;letter-spacing:.1em;color:var(--on-dark-2)}
.hero-serv a{color:var(--on-dark);text-decoration:none}
.hero-serv a:hover{color:var(--orange)}

@media (prefers-reduced-motion:no-preference){
  .tz-camino,.tz-halo{stroke-dasharray:1;stroke-dashoffset:1;animation:trazo 2.2s .35s cubic-bezier(.45,0,.2,1) forwards}
  .tz-anillo,.tz-punto,.tz-etiqueta{opacity:0;animation:aparece .5s 2.3s ease-out forwards}
}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes aparece{to{opacity:1}}

/* --- cifras: tablero al pie de la primera vista, sobre la foto --- */
.evid{position:relative;background:rgba(14,17,48,.86);border-top:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.evid .env{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.evid .env > div{display:flex;align-items:center;gap:16px;padding:16px 20px;border-left:1px solid var(--line-dark)}
.evid .env > div:first-child{border-left:0;padding-left:0}
.evid .n{flex:none;font:800 clamp(34px,3.1vw,46px)/.85 var(--f-sten);color:#FFFFFF;font-variant-numeric:tabular-nums}
.evid .e{color:var(--on-dark);font-size:11px;letter-spacing:.13em}
.evid .f{margin-top:3px;font-size:13px;line-height:1.35;color:var(--on-dark-2)}

@media(max-width:900px){
  /* En angosto la foto va DETRAS del texto: arriba se ve y abajo se apaga. El
     trazo cruzaria el texto, asi que se omite. */
  .hero-foto{inset:0}
  .hero-foto::after{background:linear-gradient(180deg,rgba(14,17,48,.12) 0%,rgba(14,17,48,.62) 34%,rgba(14,17,48,.9) 58%,var(--night) 80%)}
  .hero-cont .eti,.hero h1{text-shadow:0 1px 14px rgba(14,17,48,.55)}
  .hero-traza{display:none}
  .evid .env{grid-template-columns:1fr 1fr}
  .evid .env > div{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 12px 12px 14px}
  .evid .env > div:nth-child(3){border-left:0;padding-left:0}
  .evid .env > div:nth-child(n+3){border-top:1px solid var(--line-dark)}
  .evid .f{display:none}
}
@media(max-width:640px){
  .hero-cont{padding-block:clamp(20px,4vh,40px)}
  .hero h1{font-size:clamp(32px,10vw,44px)}
  .hero-acc .btn,.hero-acc .btn-cat{min-height:50px;padding:0 16px;font-size:15px}
  .hero-acc .btn::after{display:none}
  .hero-serv{display:none}
}
/* Telefonos bajos (360x740 y similares): un poco menos de todo, para que la
   primera vista siga entrando entera. */
@media(max-width:640px) and (max-height:780px){
  .hero-cont{padding-block:18px}
  .hero h1{font-size:32px}
  .hero .lead{font-size:15px;line-height:1.5}
}
@media(max-width:640px) and (max-height:700px){
  .hero h1{font-size:29px;margin-block:10px 12px}
  .evid .env > div{padding-block:8px}
  .evid .n{font-size:30px}
}

/* ==========================================================================
   FLOTA — cada equipo es una plancha: foto real, placa con su cifra esténcil
   ========================================================================== */
.v-rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
@media(max-width:1180px){.v-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.v-rejilla{grid-template-columns:1fr}}
.v-tarj{display:flex;flex-direction:column;background:var(--plate);border:1px solid var(--line);
  transition:border-color .2s var(--ease)}
.v-tarj:hover{border-color:var(--navy)}
.v-foto{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--inset);
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.v-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.v-tarj:hover .v-foto img{transform:scale(1.04)}
.v-placa{position:absolute;left:0;bottom:0;display:grid;gap:6px;padding:12px 22px 12px 16px;
  background:var(--navy-deep);color:#FFFFFF;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.v-placa b{font:800 36px/.86 var(--f-sten);letter-spacing:.01em}
.v-placa span{font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.v-cuerpo{display:flex;flex-direction:column;flex:1;padding:20px 22px 0}
.v-cab{display:flex;justify-content:space-between;gap:12px;
  font:500 11px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.v-modelo{color:var(--orange-ink)}
.v-tarj h3{margin:14px 0 0;font-size:clamp(24px,1.9vw,28px)}
.v-tarj h3 a{text-decoration:none}
.v-nota{margin-top:8px;font:500 11.5px/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)}
.v-venta{margin:12px 0 22px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.v-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:auto -22px 0;border-top:1px solid var(--line)}
.v-specs > div{padding:13px 8px 14px 14px;border-left:1px solid var(--line);min-width:0}
.v-specs > div:first-child{border-left:0;padding-left:22px}
.v-specs dt{font:500 9.5px/1.2 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.v-specs dd{margin-top:6px;font:650 14.5px/1.2 var(--f-text);color:var(--ink);overflow-wrap:anywhere}
.v-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -22px;
  padding:0 22px;min-height:52px;border-top:1px solid var(--line);
  font:600 14.5px/1 var(--f-text);color:var(--navy);text-decoration:none;
  transition:background-color .15s linear,color .15s linear}
.v-cta::after{content:"";width:16px;height:10px;background:var(--flecha-navy) no-repeat center/contain;transition:transform .25s var(--ease)}
.v-cta:hover{background:var(--navy-deep);color:#FFFFFF}
.v-cta:hover::after{background-image:var(--flecha-clara);transform:translateX(4px)}
.v-pie{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:40px;
  padding-top:28px;border-top:1px solid var(--line);color:var(--ink-2);font-size:15.5px}
.v-pie + .v-pie{margin-top:16px;padding-top:0;border-top:0}
.v-pie a:not(.btn-cat){color:var(--navy);font-weight:600;text-underline-offset:4px}

/* ==========================================================================
   UNIDAD ANOTADA — la camioneta real, con lo que mira la garita
   ========================================================================== */
.anot{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.anot-foto{position:relative;clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.anot-foto img{width:100%;aspect-ratio:1900/985;object-fit:cover}
.anot-m{position:absolute;left:var(--x);top:var(--y);width:34px;height:34px;margin:-17px 0 0 -17px;
  display:grid;place-items:center;border-radius:50%;background:var(--orange);color:var(--night);
  font:500 14px/1 var(--f-mono);box-shadow:0 0 0 5px rgba(226,113,44,.28),0 0 0 6px rgba(14,17,48,.5)}
.anot-lista{list-style:none;display:grid;border-top:1px solid var(--line)}
.anot-lista li{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.anot-lista .n{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--orange);font:500 12.5px/1 var(--f-mono);color:var(--ink)}
.anot-lista b{display:block;font:750 21px/1.05 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
.anot-lista span{display:block;margin-top:5px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.anot-pie{margin-top:24px}
.anot-cap{position:absolute;left:0;bottom:0;padding:9px 16px;background:var(--night);color:var(--on-dark);
  font:500 11px/1.2 var(--f-mono);letter-spacing:.14em}
@media(max-width:1000px){.anot{grid-template-columns:1fr}}
@media(max-width:640px){.anot-m{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:12px}}

/* ==========================================================================
   POR QUE / RAZONES
   ========================================================================== */
.razones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.rz{padding:30px 28px 34px;border-left:1px solid var(--line)}
.rz:first-child{border-left:0;padding-left:0}
.rz-n{display:block;margin-bottom:18px;font:500 11.5px/1 var(--f-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-ink)}
.rz h3{margin-bottom:14px}
.rz p{font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.oscuro .razones,.oscuro .rz{border-color:var(--line-dark)}
.oscuro .rz-n{color:var(--orange)}
.oscuro .rz p{color:var(--on-dark-2)}
@media(max-width:1000px){
  .razones{grid-template-columns:1fr 1fr}
  .rz:nth-child(3){border-left:0;padding-left:0}
  .rz:nth-child(n+3){border-top:1px solid var(--line)}
  .oscuro .rz:nth-child(n+3){border-top-color:var(--line-dark)}
}
@media(max-width:640px){
  .razones{grid-template-columns:1fr}
  .rz{border-left:0;padding-left:0;padding-right:0}
  .rz + .rz{border-top:1px solid var(--line)}
  .oscuro .rz + .rz{border-top-color:var(--line-dark)}
}
/* En filas: para listas largas, que no dejan una columna huerfana */
.razones.filas{grid-template-columns:1fr}
.razones.filas .rz{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.35fr);gap:12px 40px;
  padding:30px 0;border-left:0;border-bottom:1px solid var(--line)}
.razones.filas .rz + .rz{border-top:0}
.razones.filas .rz-n{margin:6px 0 0}
@media(max-width:900px){.razones.filas .rz{grid-template-columns:1fr;gap:10px}}

/* --- secciones oscuras con el rajo de fondo --- */
.con-curvas{overflow:hidden;isolation:isolate}
.con-curvas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("img/curvas-oscuro.svg") no-repeat right -160px top -220px/min(1100px,110%) auto;
  -webkit-mask-image:radial-gradient(ellipse 48% 62% at 84% 18%,#000 35%,transparent 72%);
  mask-image:radial-gradient(ellipse 48% 62% at 84% 18%,#000 35%,transparent 72%)}

/* ==========================================================================
   COBERTURA — mapa a escala con relieve (mapa.py) + regla de la Ruta 5.
   El fondo es papel tibio: el relieve se funde en sus bordes, sin rectangulo.
   ========================================================================== */
.sec-mapa{background:#ECE9E3}
.mapa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:start}
.mapa-lado{position:sticky;top:120px}
.mapa-wrap{overflow:visible}
.mapa-svg{width:100%;height:auto;font-family:var(--f-text)}
@media(max-width:900px){
  .mapa-grid{grid-template-columns:1fr;gap:28px}
  .mapa-lado{position:static}
}
.mapa-fuente{margin-top:10px;font:400 11px/1.5 var(--f-mono);color:#7A7568}
.m-salares path{stroke:#9A9384;stroke-width:.8;stroke-dasharray:2.5 2}
.m-salares .en-chile{fill:#FBFAF6}
.m-salares .fuera{fill:#F6F4EF;opacity:.7}
.m-limreg path{fill:none;stroke:#2B2E80;stroke-width:1.1;stroke-dasharray:5 3.5;opacity:.5}
.m-costa{fill:none;stroke:#3C4168;stroke-width:1;stroke-linejoin:round;opacity:.6}
.m-frontera{fill:none;stroke:#3C4168;stroke-width:1.3;stroke-dasharray:7 3 1.6 3;stroke-linejoin:round;opacity:.55}
.m-ruta5 path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.m-ruta5 .borde{stroke:#FFFFFF;stroke-width:4.8;opacity:.9}
.m-ruta5 path:not(.borde){stroke:var(--navy-deep);stroke-width:2.1}
.m-ruta5 text{font:500 10.5px var(--f-mono);letter-spacing:.22em;fill:var(--navy-deep);
  paint-order:stroke;stroke:#F2ECE1;stroke-width:3px;stroke-linejoin:round}
.m-limite path,.m-limite line{fill:none;stroke:#C2561A;stroke-width:2.2;stroke-dasharray:7 5}
.m-limite line{stroke-width:1.2;opacity:.75}
.m-limite text{font:500 11.5px var(--f-mono);letter-spacing:.1em;fill:var(--orange-ink)}
.m-region text{font-family:var(--f-mono);font-weight:500;letter-spacing:.24em;fill:var(--navy);opacity:.6}
.m-region text.chico{letter-spacing:.14em}
.m-pais text{font:500 12px var(--f-mono);letter-spacing:.34em;fill:#77726A}
.m-pais .m-mar{fill:#5E6E8C;opacity:.75;letter-spacing:.5em}
.m-otras path{fill:var(--orange);stroke:#FFFFFF;stroke-width:.9}
.m-otras-ciu circle{fill:var(--navy);opacity:.45}
.m-faena polyline,.m-ciudad polyline{fill:none;stroke:#3C4168;stroke-width:.8;opacity:.6}
.m-faena path{fill:var(--orange);stroke:#FFFFFF;stroke-width:1.4}
.m-faena text{font-weight:600;fill:#2A2D45;paint-order:stroke;stroke:#F2EEE7;stroke-width:3.5px;stroke-linejoin:round}
.m-ciudad circle,.m-ciudad rect{fill:var(--navy-deep);stroke:#FFFFFF;stroke-width:1.8}
.m-ciudad text{font-weight:650;fill:var(--ink);paint-order:stroke;stroke:#F2EEE7;stroke-width:3.5px;stroke-linejoin:round}
.m-escala rect{stroke:#3C4168;stroke-width:1}
.m-escala .lleno{fill:#3C4168}
.m-escala .vacio{fill:#FFFFFF}
.m-escala text{font:500 10.5px var(--f-mono);fill:var(--ink-2)}
/* Dos juegos de rotulos: el completo, y uno con menos nombres y letra mas
   grande para el telefono, donde el mapa entero mide unos 350 px. */
.solo-angosto{display:none}
@media(max-width:640px){.solo-ancho{display:none}.solo-angosto{display:inline}}
/* Al pasar el cursor, la faena se destaca y el resto baja: el titulo dice de
   quien es y que extrae (lo lee igual el lector de pantalla). */
.m-faena,.m-otras path{transition:opacity .2s var(--ease)}
.mapa-svg:hover .m-faena,.mapa-svg:hover .m-otras path{opacity:.45}
.mapa-svg .m-faena:hover,.mapa-svg .m-otras path:hover{opacity:1}
.mapa-svg .m-faena:hover path{fill:#B4530F}
.mapa-svg .m-faena:hover text{fill:var(--ink)}
.mapa-leyenda{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;padding-top:18px;
  border-top:1px solid rgba(20,23,58,.16);font:500 12px/1.3 var(--f-mono);letter-spacing:.04em;color:var(--ink-2)}
.mapa-leyenda span{display:inline-flex;align-items:center;gap:8px}
.mapa-leyenda i{width:11px;height:11px;flex:none}
.mapa-leyenda .l-ciu{background:var(--navy-deep);border-radius:50%}
.mapa-leyenda .l-fae{background:var(--orange);transform:rotate(45deg) scale(.85)}
.mapa-leyenda .l-sal{background:#FBFAF6;border:1px dashed #9A9384}
.mapa-leyenda .l-r5{width:22px;height:2px;background:var(--navy-deep);box-shadow:0 0 0 1.5px #FFFFFF}
.mapa-leyenda .l-lim{width:22px;height:0;border-top:2px dashed #C2561A}
.mapa-pie{margin-top:18px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ciudades{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 20px;margin-top:30px;
  border-top:1px solid rgba(20,23,58,.16)}
.ciudades a{display:grid;gap:5px;padding:14px 0;border-bottom:1px solid rgba(20,23,58,.16);text-decoration:none}
.ciudades strong{font:800 19px/1 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
.ciudades span{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;color:var(--ink-2)}
.ciudades a:hover strong{color:var(--navy);text-decoration:underline;text-underline-offset:4px}

/* --- la regla: kilometros por carretera desde Santiago --- */
.regla{margin-top:clamp(48px,6vw,80px);padding-top:26px;border-top:1px solid rgba(20,23,58,.16)}
.sec-regla{padding-top:0}
.sec-regla .regla{margin-top:0}
.regla-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-bottom:6px}
.regla-cab .eti{color:var(--ink)}
.regla-cab small{font:400 13px/1.4 var(--f-mono);color:var(--ink-2)}
.regla svg{width:100%;height:auto;overflow:visible}
.rg-tick{stroke:var(--line-strong);stroke-width:1}
.rg-tick.mayor{stroke:var(--ink-2)}
.rg-cob{stroke:var(--orange);stroke-width:5}
.rg-ciu circle{fill:var(--plate);stroke:var(--navy);stroke-width:2.5}
.rg-ciu.origen circle{fill:var(--navy)}
.rg-ciu text{font-family:var(--f-mono);fill:var(--ink)}
.rg-ciu .nom{font-size:13px;font-weight:500;letter-spacing:.12em}
.rg-ciu .km{font-size:12px;fill:var(--ink-2)}
.rg-ciu line{stroke:var(--line-strong);stroke-width:1}
.regla-lista{display:none;list-style:none;border-top:1px solid rgba(20,23,58,.16)}
.regla-lista li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(20,23,58,.16);
  font:500 13px/1.2 var(--f-mono);letter-spacing:.06em}
.regla-lista li span{color:var(--ink-2)}
@media(max-width:760px){
  .regla svg{display:none}
  .regla-lista{display:block}
}

/* ==========================================================================
   PROCESO — tres paradas en el mismo camino
   ========================================================================== */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);
  position:relative;padding-top:34px}
.pasos::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:2px dashed rgba(226,113,44,.65)}
.pasos li{position:relative;padding-top:26px}
.pasos li::before{content:"";position:absolute;left:0;top:-35px;width:16px;height:16px;border-radius:50%;
  background:var(--navy-deep);border:2px solid var(--orange)}
.pasos .n{font:800 clamp(64px,7vw,104px)/.8 var(--f-sten);color:var(--orange);margin-bottom:22px}
.pasos h3{margin-bottom:14px;color:#FFFFFF}
.pasos p{color:var(--on-dark-2);max-width:44ch}
@media(max-width:900px){
  .pasos{grid-template-columns:1fr;padding-top:0;padding-left:34px;gap:40px}
  .pasos::before{left:7px;right:auto;top:8px;bottom:8px;border-top:0;border-left:2px dashed rgba(226,113,44,.65)}
  .pasos li{padding-top:0}
  .pasos li::before{left:-34px;top:6px}
}

/* ==========================================================================
   BLOQUES DE CONTENIDO
   ========================================================================== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.med{position:relative;clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.med img{width:100%;height:100%;object-fit:cover}

.lista-norma{list-style:none;border-top:1px solid var(--line)}
.lista-norma li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:6px 18px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--line)}
.lista-norma .i{font:500 12px/1 var(--f-mono);color:var(--orange-ink);letter-spacing:.08em}
.lista-norma .t{font-weight:600}
.lista-norma .s{font:400 13px/1.35 var(--f-mono);color:var(--ink-2);text-align:right}
.oscuro .lista-norma,.oscuro .lista-norma li{border-color:var(--line-dark)}
.oscuro .lista-norma .i,.oscuro .lista-norma .s{color:var(--on-dark-2)}
@media(max-width:640px){
  .lista-norma li{grid-template-columns:34px minmax(0,1fr)}
  .lista-norma .s{grid-column:2;text-align:left}
}
.pie-t{margin-top:22px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:72ch}
.oscuro .pie-t{color:var(--on-dark-2)}

.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:64px}
.trio img{width:100%;aspect-ratio:1/1;object-fit:cover;
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.trio figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font:500 12px/1.45 var(--f-mono);letter-spacing:.04em;color:var(--ink-2)}
@media(max-width:760px){.trio{grid-template-columns:1fr}.trio img{aspect-ratio:16/10}}

/* --- acordeones --- */
.detalles{margin-top:64px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px;
  padding:20px 0;cursor:pointer;list-style:none;font-weight:600;font-size:18px;line-height:1.35}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:28px;height:28px;border:1.5px solid var(--line-strong);border-radius:50%;
  background:linear-gradient(var(--navy),var(--navy)) center/11px 1.6px no-repeat,
             linear-gradient(var(--navy),var(--navy)) center/1.6px 11px no-repeat;transition:transform .25s var(--ease)}
details[open] > summary::after{transform:rotate(45deg)}
summary:hover{color:var(--navy)}
.detalles summary{font:800 clamp(19px,1.7vw,23px)/1.05 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
details > p{padding-bottom:24px;color:var(--ink-2);max-width:70ch}
.det-cuerpo{padding-bottom:32px}
.det-nota{margin-bottom:22px;color:var(--ink-2);max-width:68ch}

/* --- tablas --- */
.tabla-env{overflow-x:auto;border:1px solid var(--line);background:var(--plate)}
table{border-collapse:collapse;width:100%;min-width:780px;font-size:15px}
th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark);background:var(--navy-deep);position:sticky;top:0;z-index:2}
tbody tr:hover{background:#F6F7FA}
th[scope=row]{font-weight:600;position:sticky;left:0;background:var(--plate);border-right:1px solid var(--line);min-width:190px}
tbody tr:hover th[scope=row]{background:#F6F7FA}
td .v{font-family:var(--f-mono);font-size:13.5px;font-variant-numeric:tabular-nums}
td .eti{font-size:10.5px;letter-spacing:.1em}
.choca{box-shadow:inset 0 -2px 0 var(--orange)}
.swatch{display:inline-block;width:9px;height:9px;margin-right:7px;border:1px solid rgba(0,0,0,.25)}

/* --- entrega: compromisos + esquema --- */
.compro{list-style:none;display:grid;border-top:1px solid var(--line-dark)}
.compro li{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line-dark)}
.compro .t{font:800 22px/1.05 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
.compro .d{color:var(--on-dark-2);font-size:15.5px;line-height:1.5;max-width:52ch}
.norma{margin-top:22px;padding-left:14px;border-left:2px solid var(--orange);
  font:400 13px/1.55 var(--f-mono);color:var(--on-dark-2)}
.captura{border:1px solid var(--line-dark);background:var(--night);padding:14px;
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.captura .rot{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;
  font:500 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.captura .lienzo{position:relative;aspect-ratio:16/10;background:#0B0E26;overflow:hidden}
.captura img{width:100%;height:100%;object-fit:cover;opacity:.45;filter:grayscale(.4)}
.captura svg{position:absolute;inset:0;width:100%;height:100%}

/* ==========================================================================
   PAGINAS INTERNAS
   ========================================================================== */
.cab-interna{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-deep);color:var(--on-dark);
  border-bottom:3px solid var(--orange)}
.cab-interna::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("img/curvas-oscuro.svg") no-repeat right -120px center/min(1100px,100%) auto;
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 70%);mask-image:linear-gradient(100deg,transparent 30%,#000 70%)}
.eq-cab::before{content:none}   /* aca la grafica es la unidad real */
.cab-interna .env{padding-block:clamp(48px,6vw,88px) clamp(52px,6vw,92px)}
.cab-interna h1{margin:22px 0;max-width:15ch;color:#FFFFFF;font-size:clamp(46px,6vw,92px)}
.cab-interna .lead{color:var(--on-dark-2);max-width:60ch}
.miga{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 12px/1.3 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}
.miga a{text-decoration:none}
.miga a:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}

/* --- ficha de equipo: titular a la izquierda, la unidad real a la derecha --- */
.eq-cab .env{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
.eq-cab h1{max-width:none;font-size:clamp(42px,4.8vw,76px)}
.eq-cab .hero-acc{margin-top:32px}
.eq-cab .v-placa b{font-size:clamp(40px,4vw,60px)}
@media(max-width:1000px){.eq-cab .env{grid-template-columns:1fr}}

.eq-ficha .split{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
@media(max-width:900px){.eq-ficha .split{grid-template-columns:1fr}}
.eq-plancha{position:sticky;top:120px;background:var(--plate);border:1px solid var(--line);padding:26px 26px 8px;
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.eq-specs{display:grid;margin-top:16px}
.eq-specs > div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 0;border-top:1px solid var(--line)}
.eq-specs dt{font:500 11px/1.2 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.eq-specs dd{text-align:right;font-weight:650}
.eq-plancha .btn{width:100%;margin:18px 0}
.eq-intro{font-size:17.5px;line-height:1.72;color:var(--ink);max-width:68ch}
@media(max-width:900px){.eq-plancha{position:static}}
.rev-lista li.rev-detalle{border-bottom:1px solid var(--line);padding-top:0;padding-bottom:20px}
.rev-lista li.rev-detalle .t{font-weight:400;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:86ch}
.rev-lista li:not(.rev-detalle){border-bottom:0;padding-bottom:6px}
.rev-lista li:not(.rev-detalle) .t{font:800 21px/1.1 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
@media(max-width:640px){
  .rev-lista li.rev-detalle{grid-template-columns:1fr}
  .rev-lista li.rev-detalle .i{display:none}
}

/* ==========================================================================
   COTIZACION
   ========================================================================== */
.form-caja{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,3.2vw,48px);align-items:start}
.campos-caja{background:var(--plate);border:1px solid var(--line);padding:clamp(22px,2.8vw,38px);
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.campo{display:grid;gap:7px;min-width:0}
.campo.ancho{grid-column:1/-1}
label{font:500 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
input,select,textarea{width:100%;min-height:48px;padding:12px 14px;font:400 16px/1.4 var(--f-text);color:var(--ink);
  background:var(--plate);border:1px solid var(--line-strong);border-radius:2px;
  transition:border-color .15s linear,box-shadow .15s linear}
input:hover,select:hover,textarea:hover{border-color:var(--navy)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(43,46,128,.18)}
textarea{min-height:92px;resize:vertical}
.req{color:var(--orange-ink)}
.form-nota{margin-top:14px;font-size:13.5px;color:var(--ink-2)}
/* La trampa para bots: fuera de la vista y del teclado; una persona no la llena. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Si el envio no se confirma, se dice: y se ofrece WhatsApp con los datos. */
.envio-fallo{display:grid;gap:12px;justify-items:start;margin-top:16px;padding:16px 18px;
  border-left:3px solid var(--orange);background:#FFF4EC;color:var(--ink);font-size:15px}
.form-lado{display:grid;gap:16px;position:sticky;top:120px}
.fl-caja{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-deep);color:var(--on-dark);padding:28px 26px}
.fl-caja::before{content:"";position:absolute;inset:0;z-index:-1;background:url("img/curvas-oscuro.svg") no-repeat right -260px bottom -200px/640px auto;opacity:.75}
.fl-eti{margin:0 0 12px;font:500 11px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.fl-tel{display:block;margin-bottom:20px;font:800 clamp(34px,3vw,44px)/1 var(--f-disp);letter-spacing:.01em;
  color:#FFFFFF;text-decoration:none;font-variant-numeric:tabular-nums}
.fl-tel:hover{color:var(--orange)}
.fl-wa{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:2px;
  background:#25D366;color:#0B2E18;font-weight:700;font-size:14.5px;text-decoration:none;transition:background-color .15s linear}
.fl-wa svg{width:20px;height:20px;flex:none}
.fl-wa:hover{background:#1FB356}
.fl-nota{margin-top:14px;font-size:14px;color:var(--on-dark-2)}
.fl-pasos{background:var(--inset);padding:24px 26px}
.fl-pasos .fl-eti{color:var(--ink-2)}
.fl-pasos ol{list-style:none;display:grid;gap:14px}
.fl-pasos li{display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.fl-pasos li span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:var(--orange);color:var(--night);font:500 11px/1 var(--f-mono)}
.fl-pie{display:grid;gap:6px;font-size:13.5px;color:var(--ink-2)}
@media(max-width:1000px){.form-caja{grid-template-columns:1fr}.form-lado{position:static}}
@media(max-width:640px){.campos{grid-template-columns:1fr}}

/* --- comprobante que reemplaza al formulario --- */
.recibo{background:var(--plate);border:1px solid var(--line);border-top:3px solid var(--orange);padding:clamp(22px,2.8vw,38px)}
.recibo .fila{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid var(--line)}
.recibo .fila span{font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.recibo .fila b{text-align:right;font-weight:650}
.recibo .comp{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink-2);font-size:15px}

/* ==========================================================================
   CIERRE: banda de ruta + pie
   ========================================================================== */
.banda{position:relative;background:var(--night)}
.banda img{width:100%;height:clamp(240px,30vw,400px);object-fit:cover}
.banda::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,17,48,.85),rgba(14,17,48,0) 55%)}
.banda .cita{position:absolute;z-index:1;left:0;right:0;bottom:0}
.banda .cita span{display:block;max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;
  padding:0 max(var(--gut),env(safe-area-inset-right,0px)) 26px max(var(--gut),env(safe-area-inset-left,0px));
  font:500 12px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark)}

.pie{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:var(--on-dark);
  padding-block:clamp(64px,7vw,96px) calc(36px + env(safe-area-inset-bottom,0px))}
.pie::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("img/curvas-oscuro.svg") no-repeat right -220px top -180px/min(1000px,100%) auto;opacity:.7;
  -webkit-mask-image:linear-gradient(100deg,transparent 45%,#000 85%);mask-image:linear-gradient(100deg,transparent 45%,#000 85%)}
.pie-g{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:48px}
.logo-pie{width:150px}
.lema{margin-top:22px;font:500 12px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.datos{margin-top:12px;font-size:14px;line-height:1.6;color:var(--on-dark-2)}
.pie h2{margin:6px 0 18px;font:500 12px/1 var(--f-mono);letter-spacing:.16em;color:var(--on-dark-2)}
.pie ul{list-style:none;display:grid;gap:12px}
.pie li{font-size:15.5px}
.pie a{text-decoration:none}
.pie a:hover{color:var(--orange)}
.legal{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:64px;padding-top:24px;border-top:1px solid var(--line-dark);
  font:400 12px/1.6 var(--f-mono);letter-spacing:.02em;color:var(--on-dark-2)}
@media(max-width:900px){.pie-g{grid-template-columns:1fr 1fr}.pie-g > div:first-child{grid-column:1/-1}}
@media(max-width:520px){.pie-g{grid-template-columns:1fr}}

/* --- flotantes --- */
.wa{position:fixed;z-index:85;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#25D366;color:#FFFFFF;
  box-shadow:0 8px 24px rgba(6,8,26,.3);transition:transform .2s var(--ease)}
.wa svg{width:28px;height:28px}
.wa:hover{transform:scale(1.06)}
.rev-btn{position:fixed;z-index:85;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));
  min-height:40px;padding:0 16px;border:1px solid var(--line-dark);border-radius:2px;background:var(--night);color:var(--on-dark);
  font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.rev-btn[aria-pressed="true"]{background:#FFE9B8;color:#151833;border-color:#FFE9B8}
.rev-btn{transition:opacity .2s linear,visibility .2s linear}
/* Aparecen al bajar: en la primera vista de la portada tapaban las cifras. La
   cotizacion y el telefono ya estan a la vista arriba. */
.wa{transition:transform .2s var(--ease),opacity .2s linear,visibility .2s linear}
body:not(.abajo) .rev-btn,body:has(.hero):not(.abajo) .wa{opacity:0;visibility:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-delay:0s !important}
}