/* Las dos variables, subset latino, bajadas de Google Fonts y servidas desde
   acá: sin CDN el sitio no depende de un tercero para renderizar texto.
   Archivo va con eje de ANCHO además del de peso — el diseño usa wdth 110,
   115 y 125, y sin ese eje los títulos salen en la anchura equivocada. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62.5% 125%;font-display:swap;src:url(/assets/fonts/archivo-var.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/publicsans-var.woff2) format('woff2')}

/* ════════════════════════════════════════════════════════════════════════════
   USA TAG & TITLE — hoja de estilos del sitio publicado.

   ESTE ARCHIVO ES LA MAQUETA APROBADA, no una reinterpretación: el bloque que
   sigue sale tal cual de usatng-mockups/public/r2-red/, la variante que
   eligieron Zuf y Barbara (tipografía Archivo, chapa recta, hero rojo). Si hay
   que cambiar el diseño, se cambia allá y se vuelve a traer — así la maqueta
   nunca queda mintiendo respecto del sitio.

   Al final, después del bloque de la maqueta, están los COMPONENTES QUE LA
   MAQUETA NO TIENE porque el sitio real sí: menú de celular, barra fija de
   llamada, estados del formulario, páginas internas, mapas y texto legal.
   Están escritos con los mismos tokens y las mismas reglas.

   Las dos fuentes son variables y van self-hosted (nada de CDN): Archivo con
   eje de ancho —el diseño usa wdth 110/115/125— y Public Sans para el texto.
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   DIRECCIÓN 1 — LA CHAPA

   Idea: la patente de Florida deja de ser un badge decorativo y pasa a ser EL
   sistema. Tres cosas la componen y las tres vienen del logo:

     · el doble filete rojo   → es el divisor de TODA sección
     · la estrella            → es la única viñeta y el único separador
     · la letra ancha grabada → es la tipografía de los títulos

   El objeto-chapa aparece UNA sola vez, en el hero, dibujado en CSS (cero
   fotos). Si apareciera dos veces dejaría de ser firma y sería papel tapiz.

   Fondo navy profundo: los seis competidores del rubro son claros, con foto de
   autopista. La superficie oscura sola ya nos saca del montón.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --navy-deep:#0F1124;   /* campo oscuro de la página */
  --navy:#282A5B;        /* navy de marca */
  --navy-2:#1C1E42;
  --navy-line:#33366B;
  --plate:#F4F2EA;       /* la cara de la chapa: blanco cálido, no blanco puro */
  --red:#ED1B24;         /* SOLO relleno: filetes, fondo de botón */
  --red-hero:#E01319;    /* el campo del hero — el rojo llamativo que pidió Zuf */
  --red-ink:#C4292D;     /* texto/ícono rojo — 5.67:1 sobre blanco */
  --ink:#14162B;
  --body:#4B5468;
  --muted:#5B647C;
  --line:#E4E7EE;
  --wash:#F4F5F9;
  --on-dark:#B9BEE0;
  --on-dark-2:rgba(255,255,255,.14);

  --shell:1220px;
  --gut:clamp(20px,4vw,44px);
  --pad:clamp(66px,7.5vw,124px);

  --t-hero:clamp(2.7rem,6.4vw,5.1rem);
  --t-h2:clamp(1.9rem,3.6vw,3rem);
  --t-h3:clamp(1.1rem,1.4vw,1.28rem);
  --t-lead:clamp(1.1rem,1.3vw,1.28rem);
  --t-body:clamp(1.0625rem,1vw,1.12rem);

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--navy-deep); color:var(--body);
  font:400 var(--t-body)/1.62 "Public Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3,h4{
  font-family:Archivo, system-ui, sans-serif; color:var(--ink); margin:0;
  font-variation-settings:"wdth" 110; font-weight:800;
  line-height:1.03; letter-spacing:-.03em; text-wrap:balance;
}
h1{font-size:var(--t-hero); font-variation-settings:"wdth" 115; letter-spacing:-.042em}
h2{font-size:var(--t-h2); letter-spacing:-.035em}
h3{font-size:var(--t-h3); line-height:1.22; letter-spacing:-.02em}

/* VARIANTE 1 — LA CLÁSICA. Todos los títulos en Archivo: elegante y neutra.
   Es la que Francisco describió como "muy clásica, muy elegante". */
/* En esta variante no se usa: los títulos van todos en Archivo. */
p{margin:0 0 1.05em}

.shell{max-width:var(--shell); margin:0 auto; padding:0 var(--gut)}
section{padding:var(--pad) 0}
.dark{background:var(--navy-deep); color:var(--on-dark)}
.dark h2,.dark h3{color:#fff}
.light{background:#fff; color:var(--body)}
.cream{background:var(--plate); color:var(--body)}

/* ════ LA FIRMA: EL DOBLE FILETE ═════════════════════════════════════════════
   Los dos filetes rojos que la chapa tiene arriba y abajo. Acá separan
   secciones. Es lo único decorativo del sitio y está en el logo. */
.rule{height:0; border-top:4px solid var(--red); position:relative; z-index:2}
.rule::after{
  content:""; position:absolute; left:0; right:0; top:7px; height:4px; background:var(--red);
}
.rule-thin{height:0; border-top:1px solid var(--line)}

/* La estrella del logo, dibujada. Única viñeta del sitio. */
.star{
  display:inline-block; width:1em; height:1em; background:currentColor; flex:none;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* ── grano ────────────────────────────────────────────────────────────────
   Textura mínima sobre el navy para que no lea como un color plano de CSS.
   Un solo SVG inline, sin peticiones. */
.grain{position:relative; isolation:isolate}
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.grain > *{position:relative; z-index:1}

/* ── botones ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 110; font-weight:700;
  font-size:.94rem; letter-spacing:.02em; text-transform:uppercase;
  padding:16px 28px; min-height:54px; border:2px solid transparent; border-radius:2px;
  text-decoration:none; cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn-red{background:var(--red-ink); color:#fff}
.btn-red:hover{background:#A8211F}
.btn-line{border-color:var(--navy-line); color:#fff; background:transparent}
.btn-line:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{border-color:#C9CEDC; color:var(--ink); background:#fff}
.btn-ghost:hover{border-color:var(--navy)}

/* ── header ──────────────────────────────────────────────────────────────────
   CLARO a propósito. El logo tiene la letra en navy y el interior transparente:
   sobre fondo oscuro "USA" y "&TITLE" desaparecen. Sobre claro se lee entero y
   además el corte con el hero navy le da un borde limpio a la página. */
.hdr{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(12px) saturate(1.4); border-bottom:1px solid var(--line)}
.hdr .in{display:flex; align-items:center; gap:30px; height:80px}
/* La marca sin el marco: sólo la tipografía, la estrella y los filetes. */
.hdr .mark{display:flex; align-items:center; flex:none}
.hdr .mark img{height:48px; width:auto}
.hdr nav{display:flex; gap:26px; margin-left:auto}
.hdr nav a{
  font-family:Archivo,sans-serif; font-weight:600; font-size:.86rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; padding:6px 0; position:relative;
}
.hdr nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
}
.hdr nav a:hover::after,.hdr nav a[aria-current]::after{transform:scaleX(1)}
.hdr nav a[aria-current]{color:var(--red-ink)}
.hdr .end{display:flex; align-items:center; gap:18px; flex:none}
.hdr .tel{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 110; font-weight:700;
  font-size:.95rem; color:var(--navy); text-decoration:none; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.hdr .tel:hover{color:var(--red-ink)}

/* ════ HERO — LA BANDERA ═════════════════════════════════════════════════════
   El logo ya es una bandera desarmada: la estrella sobre el bloque navy es el
   cantón, y los dos filetes rojos son las barras. Acá se usan a escala grande
   y sin pudor.

   Que sea llamativo no lo hace descontrolado: son DOS piezas —campo de
   estrellas y barras rojas— y las dos salen del logo. No hay una tercera.

   Reglas para que no se vuelva un carnaval:
   · las estrellas van al 100 % detrás del texto y nunca lo cruzan con contraste
   · las barras viven en la mitad derecha, inclinadas al mismo ángulo que la
     chapa, y pasan POR DETRÁS de ella: la chapa siempre gana
   · el corte inferior del hero deja de ser un filete y pasa a ser la banda
     completa de barras */
.hero{padding:clamp(56px,6.6vw,104px) 0 clamp(44px,5vw,78px); position:relative; overflow:hidden}
.hero .grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(36px,5vw,74px); align-items:center; position:relative; z-index:2}

.flag{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}

/* ── el cantón: campo de estrellas ───────────────────────────────────────── */
.flag .stars{
  position:absolute; left:calc(-1 * var(--gut)); top:-6%; width:min(56%,720px); height:86%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74'%3E%3Cpath fill='%23ffffff' d='M37 8l6.2 12.6L57 22.6l-10 9.7 2.4 13.8L37 39.6 24.6 46.1 27 32.3l-10-9.7 13.8-2z'/%3E%3C/svg%3E");
  background-size:clamp(46px,5vw,66px) clamp(46px,5vw,66px);
  opacity:.085;
  /* se desvanece hacia adentro para que nunca compita con el titular */
  -webkit-mask-image:linear-gradient(115deg, #000 0%, rgba(0,0,0,.55) 42%, transparent 74%);
          mask-image:linear-gradient(115deg, #000 0%, rgba(0,0,0,.55) 42%, transparent 74%);
}

/* ── las barras ──────────────────────────────────────────────────────────── */
.flag .bars{
  position:absolute; right:-12%; top:50%; width:78%;
  transform:translateY(-50%) rotate(-2.4deg);    /* el ángulo vive acá, no en la chapa */
  display:grid; gap:clamp(13px,1.5vw,22px);
  /* Se apagan del lado del texto con una MÁSCARA, no con un degradado encima:
     un degradado pintado sobre el fondo dejaba ver su propio rectángulo. */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 16%, #000 34%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 16%, #000 34%);
}
.flag .bars i{
  display:block; height:clamp(9px,1.05vw,15px); background:var(--red); border-radius:1px;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
/* Escalonadas: las de los extremos entran menos. Da movimiento sin animar. */
.flag .bars i:nth-child(1){width:74%}
.flag .bars i:nth-child(2){width:92%}
.flag .bars i:nth-child(3){width:100%}
.flag .bars i:nth-child(4){width:88%}
.flag .bars i:nth-child(5){width:68%}
/* El corte del hero usa el MISMO doble filete que el resto de la página:
   una banda de cuatro o cinco barras cortaba la lectura como una pared. */
.hero h1{color:#fff; margin:0 0 22px}
.hero h1 em{font-style:normal; color:var(--red)}
.hero .lede{font-size:var(--t-lead); color:var(--on-dark); max-width:33ch; margin-bottom:30px; line-height:1.5}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.hero .fine{font-size:.92rem; color:#8F95BE; max-width:42ch; margin:0}

/* ════ EL OBJETO: EL LOGO, COMO CHAPA ════════════════════════════════════════
   No se inventa ninguna chapa: el logo de la marca YA es una chapa. Se usa tal
   cual, sin retocarle nada.

   VA RECTO: Zuf vio la versión inclinada y pidió el texto derecho. El gesto
   diagonal no se pierde — se mudó a las barras rojas del fondo, que siguen
   inclinadas y ahora son las únicas que lo hacen.

   Detalle técnico que manda todo lo demás: el archivo del logo tiene el
   INTERIOR TRANSPARENTE. Sobre el navy del hero, "USA" y "&TITLE" —que son
   navy— desaparecerían. Por eso va montado sobre una base clara del tamaño
   exacto del marco: la base no se ve, sólo hace de cara de la chapa. */
.plate{
  width:100%; max-width:520px; margin-inline:auto; position:relative;
  transform:none;                                 /* RECTA — pedido de Zuf */
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.55)) drop-shadow(0 3px 0 rgba(0,0,0,.45));
}
/* La cara. Radio y recorte calcados del marco del propio logo. */
.plate::before{
  content:""; position:absolute; inset:1.1% 0.9%;
  background:linear-gradient(176deg,#FDFCF8 0%,#F7F5EE 42%,#ECE9DE 80%,#E0DCCE 100%);
  border-radius:5.3%/11.4%;
  box-shadow:
    inset 0 3px 2px rgba(255,255,255,.95),        /* bisel: luz arriba */
    inset 0 -3px 3px rgba(20,22,43,.13),          /* bisel: sombra abajo */
    inset 0 -22px 34px -18px rgba(20,22,43,.15);
}
.plate img{position:relative; z-index:1; width:100%; height:auto}

/* ════ FRANJA DE DATOS ═══════════════════════════════════════════════════════
   Los números se componen como el serial de una chapa: anchos y tabulares. */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,4vw,56px); padding:clamp(40px,4.4vw,60px) 0 0}
.stats .n{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 125; font-weight:800;
  font-size:clamp(2.2rem,4.2vw,3.3rem); line-height:1; letter-spacing:-.02em; color:#fff;
  font-variant-numeric:tabular-nums; margin-bottom:9px;
}
.stats .t{font-size:.94rem; color:var(--on-dark); line-height:1.45; max-width:24ch}
.stats .item + .item{border-left:1px solid var(--on-dark-2); padding-left:clamp(22px,4vw,56px)}

/* ── banda de las dos oficinas ─────────────────────────────────────────────────────
   Sin calendario 3D. El dato es el titular, y al lado va el muscle car.

   POR QUÉ EL AUTO VA ACÁ Y SOBRE BLANCO PURO: el archivo original tiene el
   bajo del chasis y la sombra de apoyo horneados como UNA SOLA MASA OPACA
   —medido: a la altura y=502 el bloque opaco va de x=82 a x=812, gomas y
   sombra pegadas—. No hay silueta que recortar con reglas de alfa; cualquier
   intento deja una losa gris o rebana las gomas.
   La imagen fue hecha para fondo blanco, así que sobre blanco su fondo
   desaparece solo y no hace falta recortar nada. */
.band{background:#fff}
.band .in{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,60px); align-items:center}
.band h2{color:var(--ink); max-width:16ch}
.band p{margin:18px 0 0; max-width:44ch; color:var(--body)}
.band .car{width:min(560px,100%); margin-inline:auto; display:block}

/* ════ SERVICIOS — registro numerado ═════════════════════════════════════════
   No son seis tarjetas iguales con foto de chapa ajena. Es un registro: número
   de serie, título, descripción. Los dos primeros son el negocio central y
   ocupan el doble. La jerarquía la decide el negocio, no la grilla. */
.svc-head{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; margin-bottom:14px}
.svc-head p{margin:14px 0 0; max-width:46ch}
.svc{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:44px; border-top:1px solid var(--line)}
.svc .row{
  padding:34px 0 32px; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2.4vw,30px); align-items:start;
  transition:background .2s var(--ease);
}
.svc .row:nth-child(odd){padding-right:clamp(24px,3vw,48px); border-right:1px solid var(--line)}
.svc .row:nth-child(even){padding-left:clamp(24px,3vw,48px)}
.svc .num{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 125; font-weight:800;
  font-size:1.05rem; color:var(--red-ink); font-variant-numeric:tabular-nums;
  letter-spacing:.04em; padding-top:2px;
}
.svc h3{color:var(--navy); margin-bottom:9px}
.svc p{margin:0; font-size:.98rem; color:var(--body)}
/* Los dos destacados ocupan la fila entera y suben de cuerpo. */
.svc .row.lead{grid-column:1/-1; border-right:0; padding-left:0; padding-right:0; padding-block:38px 36px}
.svc .row.lead h3{font-size:clamp(1.45rem,2.5vw,2.05rem); font-variation-settings:"wdth" 115; letter-spacing:-.03em}
.svc .row.lead p{font-size:var(--t-lead); max-width:62ch; line-height:1.5}
.svc .row.lead .num{font-size:1.3rem}

/* ════ QUÉ TITULAMOS — la única grilla de fotos del sitio ════════════════════
   El copy de este bloque ya enumera "cars, trucks, motorcycles, boats, jet
   skis, scooters, trailers, mobile homes, and RVs". La tira le pone imagen a
   esa enumeración y contesta la pregunta real del cliente: "¿hacen lo mío?".

   Cada foto va ETIQUETADA. Un bote sin rótulo es decoración; con el rótulo
   "Boats & jet skis" es información — y así pasa la regla del impuesto al
   elemento.

   Todas las fotos del sitio pasan por LA MISMA gradación: saturación al 66 %,
   contraste +8 % y sombras viradas al navy de marca. Eso es lo que hace que
   fotos de bancos distintos dejen de leerse como un collage de stock. */
.fleet{
  list-style:none; margin:40px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:2px;
}
.fleet li{position:relative; overflow:hidden; background:var(--navy-2)}
/* Retrato, no miniatura apaisada: con seis columnas el 4/5 le da presencia a
   cada vehículo en vez de dejar seis fotitos alargadas. */
.fleet img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.fleet li:hover img{transform:scale(1.045)}
.fleet span{
  position:absolute; left:0; right:0; bottom:0; padding:26px 11px 11px;
  font-family:Archivo,sans-serif; font-weight:700; font-size:.71rem;
  letter-spacing:.09em; text-transform:uppercase; color:#fff;
  background:linear-gradient(to top, rgba(9,11,26,.94) 30%, rgba(9,11,26,0));
}

/* ── bloque "por qué nosotros" ───────────────────────────────────────────── */
.why{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:start}
.why h2{color:#fff}
.why > .txt p{color:var(--on-dark); margin-top:20px; max-width:46ch}
.reasons{list-style:none; margin:0; padding:0; display:grid; gap:0}
.reasons li{padding:26px 0; border-top:1px solid var(--on-dark-2); display:grid; grid-template-columns:auto 1fr; gap:16px}
.reasons li:first-child{border-top:0; padding-top:0}
.reasons .star{color:var(--red); width:.85em; height:.85em; margin-top:.35em}
.reasons b{
  display:block; font-family:Archivo,sans-serif; font-variation-settings:"wdth" 110;
  font-weight:700; color:#fff; font-size:1.06rem; margin-bottom:6px; letter-spacing:-.01em;
}
.reasons span{color:var(--on-dark); font-size:.97rem}

/* ── las 6 cajas del original ────────────────────────────────────────────── */
.boxes{list-style:none; margin:46px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:38px 40px}
.boxes li h3{padding-top:16px; border-top:3px solid var(--red); font-size:1.02rem; line-height:1.28}
.boxes li p{margin:10px 0 0; font-size:.95rem; color:var(--on-dark)}

/* ── formulario ──────────────────────────────────────────────────────────── */
.contact{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,4.5vw,68px); align-items:start}
.info{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:24px}
.info dt{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.info dd{margin:0; font-size:1.05rem; color:var(--ink); line-height:1.5}
.info dd a{color:var(--navy); text-decoration:none; font-weight:600}
.form{border:1px solid var(--line); border-top:3px solid var(--red); padding:clamp(24px,3.2vw,38px); background:#fff}
.field{margin-bottom:16px}
.field label{
  display:block; font-family:Archivo,sans-serif; font-weight:600; font-size:.85rem;
  color:var(--ink); margin-bottom:7px;
}
.field .req{color:var(--red-ink)}
.field input,.field textarea{
  width:100%; font:400 16px/1.5 "Public Sans",sans-serif; color:var(--ink);
  padding:14px 15px; border:1px solid #C9CEDC; border-radius:2px; background:#fff; min-height:52px;
}
.field textarea{min-height:118px; resize:vertical}
.consent{display:flex; gap:11px; align-items:flex-start; margin-bottom:14px; padding-left:12px; border-left:2px solid var(--line)}
.consent input{margin:3px 0 0; width:17px; height:17px; flex:none; accent-color:var(--navy)}
.consent span{font-size:.79rem; line-height:1.5; color:var(--muted)}

/* ── ciudades: lista de cobertura, no muro de chips ──────────────────────── */
.cities{columns:4; column-gap:34px; margin-top:34px; padding:0; list-style:none}
.cities li{
  break-inside:avoid; padding:9px 0; border-bottom:1px solid var(--line);
  font-size:.95rem; color:var(--body);
}
.cities li::marker{content:""}

/* ════ BANDA DE BROWARD ══════════════════════════════════════════════════════
   Foto real de una calle comercial de Broward County (Fort Lauderdale), a
   veinte minutos del local. Va acá y NO en "let's meet in person" por una
   razón de honestidad: el texto de esta sección habla del CONDADO, no de la
   oficina. Una foto de otro edificio al lado de la dirección se leería como si
   fuera el local. El bloque de la oficina se queda con el mapa, que es el dato
   verdadero. */
.strip-foto{
  position:relative; min-height:clamp(300px,34vw,460px); display:flex; align-items:flex-end;
  background:var(--navy-deep); overflow:hidden; padding:0;
}
.strip-foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
/* Degradado, no velo plano: arriba se ve la foto, abajo entra el texto. */
.strip-foto::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(15,17,36,.96) 6%, rgba(15,17,36,.72) 42%, rgba(15,17,36,.22) 100%);
}
.strip-foto .in{position:relative; z-index:2; width:100%; padding:clamp(34px,4.4vw,64px) 0}
.strip-foto h2{color:#fff; max-width:20ch}
.strip-foto .cap{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8F95BE; margin:0 0 16px;
}

/* ── CTA final ───────────────────────────────────────────────────────────── */
.endcta{text-align:center}
.endcta h2{color:#fff; max-width:16ch; margin:0 auto}
.endcta p{color:var(--on-dark); max-width:50ch; margin:20px auto 32px; font-size:var(--t-lead)}
.endcta .btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}


/* ── footer ──────────────────────────────────────────────────────────────── */
.ftr{background:#090B1A; color:#8F95BE; padding:60px 0 30px; font-size:.94rem}
.ftr a{color:#D6DAF0; text-decoration:none}
.ftr .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px; margin-bottom:38px}
.ftr h4{color:#fff; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 16px; font-family:Archivo,sans-serif}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
/* En el pie el fondo es casi negro y el logo tiene la letra en navy: va en
   blanco calado, que es el uso monocromo estándar de la marca. */
.ftr .mark img{height:34px; width:auto; margin-bottom:16px; filter:brightness(0) invert(1); opacity:.9}
.ftr .bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.84rem}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .hero .grid,.band .in,.why,.contact{grid-template-columns:1fr}
  .hero-media{order:-1}
  .stats{grid-template-columns:1fr}
  .stats .item + .item{border-left:0; border-top:1px solid var(--on-dark-2); padding-left:0; padding-top:24px}
  .boxes{grid-template-columns:repeat(2,1fr)}
  .fleet{grid-template-columns:repeat(3,1fr)}
  .cities{columns:3}
  .svc{grid-template-columns:1fr}
  .svc .row:nth-child(odd){border-right:0; padding-right:0}
  .svc .row:nth-child(even){padding-left:0}
}
@media (max-width:720px){
  .hdr nav,.hdr .tel{display:none}
  .boxes,.ftr .cols{grid-template-columns:1fr}
  .fleet{grid-template-columns:repeat(2,1fr)}
  .cities{columns:2}
  /* En celular el texto y las barras comparten el mismo ancho: si van a full
     le pasan por encima al botón. Se bajan, no se sacan. */
  .flag .bars{opacity:.45; width:110%; right:-30%}
  .flag .stars{opacity:.06}
}

/* ════ RONDA 2 — DOS OFICINAS ════════════════════════════════════════════════
   Todo lo que sigue existe por una sola razón: el sitio tenía una dirección,
   un teléfono y "open 7 days". La empresa tiene dos oficinas, dos teléfonos y
   abre de lunes a viernes. La estructura sigue a los hechos. */

/* ── los dos teléfonos del encabezado ────────────────────────────────────────
   Dos números sin etiqueta serían un acertijo. La etiqueta es el dato. */
.hdr .tels{display:flex; gap:20px}
.hdr .tel{display:grid; gap:1px; line-height:1.12}
.hdr .tel span{
  font-family:Archivo,sans-serif; font-weight:600; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

/* ── las dos llamadas del hero ───────────────────────────────────────────────
   Reemplazan al botón de teléfono único. Que sean dos y estén etiquetadas es,
   en sí mismo, el mensaje: hay dos oficinas. */
.calls{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 26px}
.calls a{
  display:grid; gap:3px; text-decoration:none; padding:12px 20px; min-height:54px;
  border:2px solid var(--navy-line); border-radius:2px; align-content:center;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.calls a:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.calls span{
  font-family:Archivo,sans-serif; font-weight:600; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark);
}
.calls b{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 110; font-weight:700;
  font-size:1.06rem; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.01em;
}

/* ── las dos oficinas en el bloque de contacto ───────────────────────────── */
.offices{display:grid; grid-template-columns:1fr 1fr; gap:0; margin:30px 0 0; border-top:1px solid var(--line)}
.offices .office{padding:22px 24px 22px 0; border-bottom:1px solid var(--line)}
.offices .office + .office{border-left:1px solid var(--line); padding-left:24px}
.offices h3{font-size:1.06rem; margin-bottom:10px}
.offices h3::before{
  content:""; display:block; width:26px; height:3px; background:var(--red); margin-bottom:10px;
}
.offices p{margin:0 0 8px; font-size:.99rem; color:var(--body)}
.offices a{color:var(--navy); text-decoration:none; font-weight:600; font-variant-numeric:tabular-nums}
.offices a:hover{color:var(--red-ink)}

/* ── preferred location: el campo que pidió Zuf ──────────────────────────────
   No es cosmético. Ese dato es el que después rutea el lead a la oficina que
   corresponde: SMS, empleado asignado, pipeline y reporte salen de acá. */
.choice{border:0; margin:0 0 16px; padding:0}
.choice legend{
  font-family:Archivo,sans-serif; font-weight:600; font-size:.85rem;
  color:var(--ink); margin-bottom:7px; padding:0;
}
.choice .opts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.choice label{
  display:flex; align-items:center; gap:10px; min-height:52px; padding:12px 15px;
  border:1px solid #C9CEDC; border-radius:2px; cursor:pointer; background:#fff;
  font-size:1rem; color:var(--ink); transition:border-color .16s var(--ease);
}
.choice label:hover{border-color:var(--navy)}
.choice input{width:18px; height:18px; flex:none; accent-color:var(--red-ink)}
.choice input:checked + span{font-weight:600}

/* ── las dos fichas de "let's meet" ──────────────────────────────────────── */
.locs{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); margin:34px 0 30px; text-align:left}
.loc{background:#fff; border:1px solid var(--line); border-top:3px solid var(--red); padding:clamp(24px,2.8vw,34px)}
.loc h3{font-size:1.22rem; margin-bottom:18px}
.loc dl{margin:0; display:grid; gap:16px}
.loc dt{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.loc dd{margin:0; font-size:1.02rem; color:var(--ink); line-height:1.5}
.loc dd a{color:var(--navy); text-decoration:none; font-weight:600; font-variant-numeric:tabular-nums}
.loc dd a:hover{color:var(--red-ink)}
.loc .btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}
.loc .btn{font-size:.84rem; padding:13px 20px; min-height:48px}

/* ── cobertura en dos condados ───────────────────────────────────────────── */
.county{
  font-family:Archivo,sans-serif;
  font-family:Archivo,sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin:34px 0 0; padding-top:26px;
  border-top:1px solid var(--line);
}
.county:first-of-type{border-top:0; padding-top:0}

@media (max-width:1000px){
  .offices,.locs,.choice .opts{grid-template-columns:1fr}
  .offices .office + .office{border-left:0; padding-left:0}
}
@media (max-width:720px){
  .hdr .tels{display:none}
  .calls{width:100%}
  /* Las barras del fondo pasan justo por acá: sin un fondo propio, los dos
     números quedan leyéndose sobre las rayas. */
  .calls a{flex:1 1 100%; background:rgba(0,0,0,.22)}
}


/* ════ EL HERO EN ROJO ═══════════════════════════════════════════════════════
   Único cambio contra la versión azul: esta sección. El rojo es #E01319 —el de
   la marca, apenas bajado para que el blanco encima llegue a 4,9:1— y no el
   rojo profundo de la prueba anterior, que a página completa terminaba en
   bordó. Todo lo que abajo cambia de color, cambia por una sola razón: sobre
   rojo brillante, el rojo deja de ser un color disponible. */
.hero{background:var(--red-hero)}
/* El grano oscurece: sobre el navy sumaba textura, sobre el rojo lo apaga. */
.hero.grain::before{opacity:.16}
.hero .lede{color:rgba(255,255,255,.95)}
.hero .fine{color:rgba(255,255,255,.82)}
/* El "!" era rojo. Pasa a tinta navy: único guiño frío del hero, y es el que
   ata esta sección con el resto de la página, que sigue siendo azul. */
.hero h1 em{color:var(--ink)}
/* Las barras eran rojas y desaparecían. En crema son la barra BLANCA de la
   bandera: sobre el rojo son lo más llamativo que tiene la página. */
.flag .bars i{background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.10)}
/* Y sin desvanecido: el original apagaba la barra sobre media pantalla, y una
   barra blanca a media opacidad sobre rojo no lee como barra, lee como humo.
   Entra opaca de una; sólo se corta el arranque para que no choque con el
   texto. */
.flag .bars{
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 7%);
          mask-image:linear-gradient(to right, transparent 0%, #000 7%);
}
.flag .stars{opacity:.14}
/* Botón principal: navy macizo. Oscuro sobre rojo brillante — el contraste
   que faltaba cuando todo era rojo. */
.hero .btn-red{background:var(--navy); color:#fff; border-color:var(--navy)}
.hero .btn-red:hover{background:var(--ink); border-color:var(--ink)}
/* Los dos teléfonos, claramente en segundo plano: contorno blanco, sin relleno. */
.calls a{border-color:rgba(255,255,255,.5)}
.calls a:hover{border-color:#fff; background:rgba(255,255,255,.14)}
.calls span{color:rgba(255,255,255,.86)}
/* La franja de datos vive dentro del hero: su gris azulado sobre rojo ensucia. */
.hero .stats .t{color:rgba(255,255,255,.9)}
.hero .stats .item + .item{border-left-color:rgba(255,255,255,.3)}
.hero :focus-visible{outline-color:#fff}
/* En celular las barras bajan al 45% para no tapar los teléfonos. Blanco al
   45% sobre rojo es rosa: como los teléfonos ya tienen fondo propio, suben. */
@media (max-width:720px){ .flag .bars{opacity:.62} }
/* El botón del encabezado está pegado al hero: en rojo quedaban dos rojos
   distintos uno al lado del otro. Va en navy, como el resto de la página. */
.hdr .btn-red{background:var(--navy); border-color:var(--navy)}
.hdr .btn-red:hover{background:var(--ink); border-color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important}}
:focus-visible{outline:3px solid var(--red); outline-offset:3px}

/* ════════════════════════════════════════════════════════════════════════════
   LO QUE LA MAQUETA NO TIENE

   La maqueta es una sola página estática. El sitio publicado tiene siete, un
   formulario que habla con GHL, y se usa mayoritariamente desde el celular.
   Todo lo que sigue es eso, escrito con los mismos tokens: nada de colores
   nuevos, nada de radios nuevos, el mismo doble filete como firma.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── menú de celular ─────────────────────────────────────────────────────────
   La maqueta directamente esconde el menú abajo de 720px porque no tiene otras
   páginas. Acá hay siete, así que hace falta. El panel se despliega debajo del
   encabezado y empuja nada: va absoluto, para que no salte el hero. */
.burger{
  display:none; margin-left:auto; width:46px; height:46px; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:2px;
  align-items:center; justify-content:center; cursor:pointer;
}
.burger span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
  transition:transform .2s var(--ease), top .2s var(--ease);
}
.burger span::before{top:-6px} .burger span::after{top:6px}
.hdr.open .burger span{background:transparent}
.hdr.open .burger span::before{top:0; transform:rotate(45deg)}
.hdr.open .burger span::after{top:0; transform:rotate(-45deg)}

/* ── barra fija de llamada ───────────────────────────────────────────────────
   Sólo en celular. Dos oficinas, dos botones: con un solo "Call now" habría que
   elegir un número por el visitante, que es exactamente el problema que este
   rediseño vino a arreglar. */
.callbar{display:none}
.callbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; min-height:58px; text-decoration:none; font-family:Archivo,sans-serif;
  font-weight:700; font-size:.95rem; color:#fff; background:var(--navy);
  font-variant-numeric:tabular-nums;
}
.callbar a small{
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.75);
}
.callbar a.primary{background:var(--red-ink)}
.callbar a.primary small{color:rgba(255,255,255,.85)}

/* ── estados del formulario ─────────────────────────────────────────────────
   El formulario de la maqueta es decorativo; éste entrega leads. Necesita
   decir qué pasó: campo inválido, envío en curso, entregado o caído. */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red-ink)}
/* La oficina es un grupo de radios: el aviso va en el grupo entero, no en un
   radio suelto, porque lo que falta es la elección, no un campo. */
.choice[aria-invalid="true"] label{border-color:var(--red-ink)}
.choice[aria-invalid="true"] legend{color:var(--red-ink)}
.field input:focus,.field textarea:focus{border-color:var(--navy); outline:2px solid rgba(40,42,91,.18); outline-offset:0}
.notice{padding:14px 16px; margin-bottom:16px; font-size:.95rem; line-height:1.5; border-left:3px solid}
.notice.ok{background:#F1F6F1; border-color:#2E7D32; color:#1E4620}
.notice.err{background:#FDF2F2; border-color:var(--red-ink); color:#8E1C20}
.form-legal{font-size:.79rem; color:var(--muted); margin:14px 0 0}
.form-legal a{color:var(--navy)}
/* Trampa para bots: invisible para la persona, presente para el que rellena
   todo lo que encuentra. Si viene con texto, el lead se descarta en silencio. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
button[disabled]{opacity:.6; cursor:progress}

/* ── encabezado de las páginas internas ─────────────────────────────────────
   El hero de la home es rojo; el de las otras páginas también, en versión
   corta. Es lo que hace que las siete páginas se lean como un solo sitio y no
   como una home linda con seis páginas heredadas. */
.phead{
  background:var(--red-hero, #E01319); color:#fff; position:relative; overflow:hidden;
  padding:clamp(46px,5.4vw,86px) 0;
}
.phead::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74'%3E%3Cpath fill='%23ffffff' d='M37 8l6.2 12.6L57 22.6l-10 9.7 2.4 13.8L37 39.6 24.6 46.1 27 32.3l-10-9.7 13.8-2z'/%3E%3C/svg%3E");
  background-size:clamp(46px,5vw,66px) clamp(46px,5vw,66px);
  -webkit-mask-image:linear-gradient(100deg,#000 0%,transparent 62%);
          mask-image:linear-gradient(100deg,#000 0%,transparent 62%);
}
.phead .shell{position:relative; z-index:1}
.phead h1{color:#fff; max-width:20ch}
.phead p{color:rgba(255,255,255,.9); margin:16px 0 0; max-width:56ch; font-size:var(--t-lead)}

/* ── texto legal ─────────────────────────────────────────────────────────────
   Privacy y Terms son texto corrido y largo. Medida corta, jerarquía clara y
   nada más: acá no hay diseño que aportar, sólo lectura. */
.prose{max-width:74ch}
.prose h2{margin:1.9em 0 .5em; font-size:clamp(1.3rem,2vw,1.6rem)}
.prose h3{margin:1.6em 0 .4em; font-size:1.08rem; color:var(--navy)}
.prose ul,.prose ol{padding-left:22px; margin:0 0 1.1em}
.prose li{margin-bottom:.5em}
.prose a{color:var(--navy)}
.prose p:first-child{margin-top:0}

/* ── mapas ───────────────────────────────────────────────────────────────────
   Uno por oficina, dentro de su ficha. La saturación baja un punto para que el
   mapa no le gane en color a la página. */
.loc .map{margin:22px 0 0; border:1px solid var(--line); overflow:hidden; background:var(--wash)}
.loc .map iframe{display:block; width:100%; height:280px; border:0; filter:saturate(.9)}

/* ── ajustes de las secciones reutilizadas en páginas internas ────────────── */
.narrow{max-width:820px; margin:0 auto}
.wash{background:var(--wash)}
.center{text-align:center}
.stack{display:grid; gap:18px}

/* El menú pasa a hamburguesa a los 1100px, no a los 900: con cinco entradas,
   los dos teléfonos y el botón, arriba de esa medida el encabezado se desborda
   —medido: a 1024px el documento se iba a 1093px de ancho—. */
@media (max-width:1100px){
  .hdr .tels{display:none}
  .burger{display:flex}
  .hdr nav{
    display:none; position:absolute; left:0; right:0; top:80px; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:0 18px 30px -20px rgba(20,22,43,.35);
    flex-direction:column; gap:0; padding:6px 0;
  }
  .hdr.open nav{display:flex}
  .hdr nav a{padding:15px var(--gut); border-top:1px solid var(--line)}
  .hdr nav a:first-child{border-top:0}
  .hdr nav a::after{display:none}
}
/* En pantallas chicas el botón del encabezado ya no entra al lado del logo y
   del menú. No se pierde nada: la barra fija de abajo tiene las dos llamadas y
   el menú tiene Contact. */
@media (max-width:520px){
  .hdr .end{display:none}
  .hdr .in{gap:14px}
}
@media (max-width:720px){
  /* La barra de llamada tapa el pie: se le devuelve el espacio al documento. */
  body{padding-bottom:58px}
  .callbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80;
    box-shadow:0 -6px 20px -12px rgba(0,0,0,.5);
  }
  .loc .map iframe{height:220px}
}