/* ============================================================
   TRANSPORTES COYOTE — v4
   Industrial redesign · burgundy #8C3226 + black + warm white
   Inspired by structural rhythm of Equita
   ============================================================ */
/* Tipografías servidas desde el propio sitio (24-sep-2026). Antes venían de Google Fonts: una hoja
   externa que bloqueaba el primer pintado ~1 s en celular. Son fuentes variables (un archivo por
   familia cubre todos los pesos), subconjunto "latin" de Google Fonts: Montserrat v31 e Inter v20,
   licencia SIL OFL. Ese subconjunto cubre todo el texto del sitio (verificado carácter por carácter). */
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --c-red: #8C3226;
  --c-red-b: #8C3226;
  --c-red-deep: #6B2419;
  --c-red-dark: #471811;
  --c-black: #0A0A0A;
  --c-black-pure: #000000;
  --c-charcoal: #161616;
  --c-graphite: #222222;
  --c-text: #1A1A1A;
  --c-text-mid: #4A4A4A;
  --c-muted: #7A7A7A;
  --c-line: rgba(0,0,0,0.1);
  --c-line-white: rgba(255,255,255,0.08);
  --c-brick: #8C3226;
  --c-brick-deep: #61221A;
  --c-sand: #F3EFEA;
  --c-sand-soft: #F8F5F1;
  --c-white: #FFFFFF;
  /* Los mismos colores en R,G,B para usarlos con transparencia: rgba(var(--c-red-rgb),.4).
     Así el editor de colores del panel cambia también velos y sombras (26-sep-2026). */
  --c-red-rgb: 140,50,38;
  --c-black-rgb: 10,10,10;
  --c-sand-rgb: 243,239,234;

  --f-head: 'Montserrat', -apple-system, sans-serif;
  --f-body: 'Inter', -apple-system, sans-serif;

  --t-fast: 0.25s ease-out;
  --t: 0.4s cubic-bezier(0.22,0.61,0.36,1);
  --t-slow: 0.7s cubic-bezier(0.22,0.61,0.36,1);

  --container: 1600px;
  --gutter: 28px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:150px}
body{
  font-family:var(--f-body);
  font-size:15px;
  color:var(--c-text);
  line-height:1.65;
  background:var(--c-sand);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
/* Texto corrido justificado en todo el sitio; los títulos y etiquetas
   conservan su alineación natural para no abrir huecos entre palabras. */
p,.lead,li,blockquote,.hero-sub,dd{
  text-align:justify;text-justify:inter-word;
  hyphens:auto;hyphenate-limit-chars:8 4 4;   /* corta solo palabras largas */
}
h1,h2,h3,h4,h5,h6,.eyebrow,.btn,.num,.big,.stat-v4,.cap-badge,
.svc-num,.num-tag,.col-title,.vert-label,.bcrumb,th,.tag{text-align:left;hyphens:none}
.inner-head.center p,.section-head.center p,.tagline-block blockquote,
.ribbon-quote blockquote,.stat-v4 .label,.hero-stat .lbl,.hero-stat .sub{text-align:center;hyphens:none}
.inner-head.center h2,.section-head.center h2{text-align:center}
.inner-head.center p{margin-left:auto;margin-right:auto}
a{text-decoration:none;color:inherit}
button{font-family:inherit;border:0;cursor:pointer}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* Type scale */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-head);font-weight:700;font-size:11px;
  letter-spacing:0.24em;text-transform:uppercase;color:var(--c-red);
  margin-bottom:20px;
}
.eyebrow::before{
  content:'';width:36px;height:2px;background:var(--c-red);display:inline-block;
}
.eyebrow.light{color:rgba(255,255,255,0.7)}
.eyebrow.light::before{background:var(--c-red-b)}
h1,h2,h3,h4{
  font-family:var(--f-head);font-weight:800;
  color:var(--c-text);letter-spacing:-0.02em;line-height:1.02;
}
.h-display{
  font-weight:900;font-size:clamp(32px,4.2vw,62px);
  line-height:1.02;letter-spacing:-0.025em;
  text-transform:uppercase;
}
.h-xl{font-size:clamp(26px,3vw,44px);line-height:1.1;text-transform:uppercase;font-weight:900;letter-spacing:-0.018em}
.h-lg{font-size:clamp(22px,2.4vw,34px);line-height:1.18;font-weight:800;letter-spacing:-0.014em}
.h-md{font-size:clamp(18px,1.8vw,24px);line-height:1.25;font-weight:700}
.h-sm{font-size:16px;font-weight:700}
.lead{font-size:15.5px;line-height:1.7;color:var(--c-text-mid);max-width:58ch}
.lead.white{color:rgba(255,255,255,0.78)}
.text-white{color:#fff !important}
.text-red{color:var(--c-red) !important}
.serif-italic{font-style:italic;font-weight:500}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-head);font-weight:700;font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:14px 28px;border-radius:0;cursor:pointer;
  transition:var(--t);position:relative;overflow:hidden;
  border:2px solid transparent;
}
.btn svg{width:14px;height:14px;transition:var(--t)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--c-red);color:#fff}
.btn-primary:hover{background:var(--c-red-deep);box-shadow:0 14px 34px rgba(var(--c-red-rgb),0.4)}
.btn-dark{background:var(--c-black);color:#fff}
.btn-dark:hover{background:var(--c-red)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,0.28)}
.btn-outline-white:hover{background:#fff;color:var(--c-black);border-color:#fff}
.btn-ghost{background:transparent;color:var(--c-text);padding:16px 0}
.btn-ghost::after{
  content:'';position:absolute;left:0;right:0;bottom:10px;height:2px;
  background:currentColor;transform:scaleX(0.4);transform-origin:left;transition:var(--t);
}
.btn-ghost:hover::after{transform:scaleX(1)}

/* =====================================================
   HEADER / NAV
   ===================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(var(--c-black-rgb),0.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--c-line-white);
  transition:var(--t);
}
.site-header.scrolled{background:rgba(var(--c-black-rgb),0.94)}
.site-header>.container{
  display:flex;align-items:center;justify-content:space-between;
  height:128px;gap:28px;
}
.site-logo{
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-head);color:#fff;
  font-weight:800;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;
}
.site-logo-mark{
  width:36px;height:36px;border-radius:50%;
  background:var(--c-red);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px rgba(var(--c-red-rgb),0.2);
  transition:var(--t);
}
.site-logo:hover .site-logo-mark{transform:rotate(-8deg);box-shadow:0 0 0 4px rgba(var(--c-red-rgb),0.3)}
.site-logo-mark svg{width:22px;height:22px}
.site-logo-text{display:flex;flex-direction:column;line-height:1.15}
.site-logo-text small{
  font-weight:400;font-size:9px;letter-spacing:0.16em;
  color:rgba(255,255,255,0.5);text-transform:uppercase;margin-top:2px;
}
.site-logo-img{height:114px;width:auto;display:block;transition:var(--t)}
.site-logo:hover .site-logo-img{transform:scale(1.04)}
.footer-v4 .brand .site-logo-img{height:124px}
.site-nav{display:flex;align-items:center;gap:6px}
.site-nav a{
  position:relative;
  padding:12px 14px;
  font-family:var(--f-head);font-size:12.5px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.7);
  transition:var(--t-fast);
}
.site-nav a:hover{color:#fff}
.site-nav a.active{color:#fff}
.site-nav a.active::after{
  content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--c-red);
}
.site-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--c-red);color:#fff;
  padding:14px 24px;line-height:1;
  font-family:var(--f-head);font-size:12px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  transition:var(--t);
}
.site-cta svg{flex:0 0 auto}
.site-cta:hover{background:var(--c-red-deep);transform:translateY(-2px)}
.site-cta svg{width:14px;height:14px}
.hamburger{display:none;width:44px;height:44px;background:transparent;color:#fff;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.hamburger span{width:22px;height:2px;background:#fff;transition:var(--t)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  position:fixed;top:96px;left:0;right:0;bottom:0;background:var(--c-black);
  z-index:95;padding:40px var(--gutter);
  transform:translateX(100%);transition:var(--t);
  display:flex;flex-direction:column;gap:4px;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{
  display:block;padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.08);
  font-family:var(--f-head);font-size:20px;font-weight:700;color:#fff;
  letter-spacing:0.04em;text-transform:uppercase;
}
.mobile-menu .mobile-cta{background:var(--c-red);text-align:center;border:0;margin-top:20px;padding:22px}

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative;background:var(--c-black);color:#fff;
  padding:180px 0 0;overflow:hidden;
  background-image:
    linear-gradient(90deg, rgba(var(--c-black-rgb),0.94) 0%, rgba(var(--c-black-rgb),0.85) 32%, rgba(var(--c-black-rgb),0.52) 54%, rgba(var(--c-black-rgb),0.10) 78%, rgba(var(--c-black-rgb),0) 100%),
    var(--hero-img, url('../assets/07-Fotos-Jul17/IMG_2220.webp'));
  background-size:cover;background-position:var(--hero-pos, center);
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  /* background:radial-gradient(ellipse at 80% 100%, rgba(var(--c-red-rgb),0.26), transparent 62%); */
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;
  padding-bottom:70px;
}
.hero-content{max-width:730px}
.hero-eyebrow-row{
  display:flex;align-items:center;gap:16px;margin-bottom:36px;
  font-family:var(--f-head);font-size:11px;font-weight:700;
  letter-spacing:0.24em;text-transform:uppercase;
}
.hero-eyebrow-row .pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  border:1px solid var(--c-red);border-radius:100px;color:#fff;
}
.hero-eyebrow-row .pill::before{
  content:'';width:8px;height:8px;border-radius:50%;background:var(--c-red);
  animation:pulse 2s ease-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--c-red-rgb),0.6)}
  50%{opacity:.9;box-shadow:0 0 0 8px rgba(var(--c-red-rgb),0)}
}
.hero-eyebrow-row .sep{color:rgba(255,255,255,0.3)}
.hero-eyebrow-row .since{color:rgba(255,255,255,0.65)}

.hero h1{
  color:#fff;margin-bottom:28px;
  font-size:clamp(26px,3.2vw,46px);
  line-height:1.08;letter-spacing:-0.02em;
}
.hero h1 .accent{color:var(--c-red-b);display:inline}
.hero-sub{font-size:15px;color:rgba(255,255,255,0.72);max-width:500px;margin-bottom:34px;line-height:1.7}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* Hero — fila de features (mockup cliente) */
.hero .bcrumb{margin-bottom:18px}
.hero-features{display:flex;flex-wrap:wrap;max-width:500px;margin:32px 0 30px;border-top:1px solid var(--c-line-white);border-bottom:1px solid var(--c-line-white)}
.hero-feature{display:flex;align-items:center;gap:8px;padding:13px 10px 13px 0;margin-right:10px;border-right:1px solid var(--c-line-white)}
.hero-feature:last-child{border-right:0;margin-right:0}
.hero-feature .ico{width:24px;height:24px;color:var(--c-red-b);flex-shrink:0}
.hero-feature .ico svg{width:100%;height:100%}
.hero-feature .t strong{display:block;font-family:var(--f-head);font-size:10.5px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:#fff;line-height:1.25}
.hero-feature .t span{font-size:10px;color:rgba(255,255,255,0.55);line-height:1.3;white-space:nowrap}

/* Hero — barra de números de impacto (mockup cliente) */
.hero-stats-bar{position:relative;z-index:2;border-top:1px solid var(--c-line-white);background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-stats-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.hero-stat{padding:24px 26px;border-right:1px solid var(--c-line-white)}
.hero-stat:last-child{border-right:0}
.hero-stat .num{font-family:var(--f-head);font-weight:900;font-size:clamp(24px,2.2vw,34px);line-height:1;letter-spacing:-0.02em;color:#fff;margin-bottom:6px}
.hero-stat .num .plus{color:var(--c-red-b)}
.hero-stat .lbl{font-family:var(--f-head);font-size:10.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.85)}
.hero-stat .sub{font-size:11px;color:rgba(255,255,255,0.45);margin-top:2px}

/* Hero — variante para páginas internas (mismo estilo que Inicio) */
.hero.hero-inner{padding:168px 0 0;min-height:730px;display:flex;align-items:flex-end}
.hero.hero-inner > .container{width:100%}
.hero.hero-inner .hero-grid{padding-bottom:64px;grid-template-columns:1.15fr 0.85fr}
.hero.hero-inner .hero-photo{min-height:220px}
.hero.hero-inner h1{font-size:clamp(26px,3vw,44px)}

/* ── Hero partido (Nosotros · Flota · Seguridad · Contacto) · sep-2026 ──
   El cliente reportó que las fotos de estas páginas se veían tapadas por el texto o recortadas.
   Aquí la foto vive en su propia columna a 3:2 EXACTO (el ratio de las fotos que entregó), sin velo ni recorte,
   y el texto con su botón van en un panel negro a la izquierda. Pensado para 1920×1080:
   header 128 + foto 768 = 896 px, cabe en la primera pantalla. La columna de la foto se acota con 100svh
   para que en pantallas más bajas la foto siga entrando completa debajo del header.
   La foto conserva data-img: el encuadre del panel sigue funcionando (solo actúa si la foto no es 3:2). */
.hero.hero-split{
  --hero-below:0px; /* alto de lo que cuelgue bajo la foto dentro del hero (hoy nada; queda para el futuro) */
  display:grid;align-items:start;
  /* header fijo = 128 px + 1 px de borde: la foto arranca exactamente donde termina.
     La columna se acota para que foto + lo que cuelga debajo quepan en la primera pantalla. */
  grid-template-columns:minmax(0,1fr) min(60%, calc((100vh - 129px - var(--hero-below)) * 1.5));
  grid-template-columns:minmax(0,1fr) min(60%, calc((100svh - 129px - var(--hero-below)) * 1.5));
  padding:129px 0 0;min-height:0;
  background:var(--c-black);background-image:none;
}
/* Panel de texto: bloque centrado en su columna (márgenes iguales) y textura fotográfica muy tenue:
   la foto de --hero-tex (distinta por página) va bajo un velo negro al 97 % (se ve al 3 %); cada una es un slot del panel ("Hero · textura"). */
.hero.hero-split .hero-panel{
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:48px clamp(28px, 4vw, 72px);
  background:linear-gradient(rgba(var(--c-black-rgb),0.97), rgba(var(--c-black-rgb),0.97)), var(--hero-tex, none) center/cover no-repeat var(--c-black);
}
.hero.hero-split .hero-panel-in{width:100%;max-width:560px}
.hero.hero-split h1{font-size:clamp(28px,2.3vw,44px);margin-bottom:26px}
.hero.hero-split .hero-sub{margin-bottom:30px}
.hero.hero-split .hero-media{position:relative;margin:0;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--c-black)}
.hero.hero-split .hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,50% 50%)}
@media (max-width:1279px){
  /* En pantallas angostas la foto va arriba a todo lo ancho (sigue completa) y el texto debajo */
  .hero.hero-split{grid-template-columns:1fr}
  .hero.hero-split .hero-media{order:-1}
  .hero.hero-split .hero-panel{padding:44px var(--gutter) 60px}
}
@media (max-width:960px){
  /* En celular la textura del panel (al 3 %) no se aprecia y, al ser el bloque más grande de la
     primera pantalla, era el elemento LCP de las páginas internas. Se deja el negro liso. */
  .hero.hero-split .hero-panel{background:var(--c-black)}
}

/* Marquee de credenciales como sección propia */
.marquee-strip{background:var(--c-black)}

/* Stats grid de 5 columnas (Valor Agregado) */
.stats-grid.cols-5{grid-template-columns:repeat(5,1fr);gap:24px}

.hero-side{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:20px}
.hero-photo{
  position:relative;min-height:340px;
  background:transparent;
}
.hero-photo svg, .hero-photo-label{display:none}

.hero-stat-card{
  position:absolute;bottom:20px;right:20px;z-index:2;
  background:var(--c-red);padding:16px 20px;color:#fff;
  border-left:3px solid var(--c-white);
  box-shadow:0 16px 38px rgba(0,0,0,0.5);
  max-width:200px;
}
.hero-stat-card .num{
  font-family:var(--f-head);font-size:32px;font-weight:900;line-height:1;
  letter-spacing:-0.025em;
}
.hero-stat-card .label{
  font-family:var(--f-head);font-size:10px;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  margin-top:6px;color:rgba(255,255,255,0.85);
}

.hero-marquee-bar{
  position:relative;z-index:2;border-top:1px solid var(--c-line-white);
  border-bottom:1px solid var(--c-line-white);
  background:rgba(0,0,0,0.4);
  overflow:hidden;white-space:nowrap;
  padding:22px 0;
}
.hero-marquee-track{display:inline-flex;gap:60px;animation:marquee 40s linear infinite;padding-right:60px}
.hero-marquee-track span{
  display:inline-flex;align-items:center;gap:16px;
  font-family:var(--f-head);font-size:13px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.55);
  flex-shrink:0;
}
.hero-marquee-track span svg{width:14px;height:14px;color:var(--c-red-b)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =====================================================
   SECTIONS COMMON
   ===================================================== */
.section{padding:80px 0;position:relative}
.section-dark{background:var(--c-black);color:#fff}
.section-sand{background:var(--c-sand)}
.section-sand-soft{background:var(--c-sand-soft)}
.section-white{background:var(--c-sand)}

.section-head{max-width:680px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin-bottom:20px}

/* =====================================================
   ABOUT SPLIT
   ===================================================== */
.about-split{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--c-black);color:#fff;
  position:relative;
}
.about-split .col{padding:80px 48px}
.about-split .col:first-child{
  background:linear-gradient(135deg, var(--c-brick) 0%, var(--c-brick-deep) 52%, var(--c-black) 100%);
  position:relative;overflow:hidden;
}
.about-split .col:first-child::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 20% 85%, rgba(0,0,0,0.25), transparent 55%);
}
.about-split .col:first-child .inner{position:relative;z-index:2}
/* La barra del eyebrow acompaña al texto en el mismo blanco translúcido */
.about-split .eyebrow.light::before{background:currentColor}
.since-numeral{
  display:flex;align-items:flex-start;gap:16px;
  font-family:var(--f-head);color:#fff;margin-bottom:24px;
}
.since-numeral .big{font-size:clamp(54px,5vw,80px);font-weight:900;line-height:0.9;letter-spacing:-0.03em}
.since-numeral .tag{
  font-size:11px;font-weight:700;letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(255,255,255,0.8);margin-top:10px;writing-mode:vertical-rl;transform:rotate(180deg);
}
.about-split h2{color:#fff}
.about-split p{color:rgba(255,255,255,0.82);margin-bottom:18px;font-size:16.5px;line-height:1.8}

.about-split .right{
  background:var(--c-charcoal);
  display:flex;flex-direction:column;gap:24px;justify-content:center;
}
.metric-row{
  display:flex;align-items:baseline;gap:20px;
  padding:26px 0;border-bottom:1px solid rgba(255,255,255,0.08);
}
.metric-row:last-child{border-bottom:0}
.metric-row .big{
  font-family:var(--f-head);font-weight:900;font-size:clamp(28px,2.8vw,42px);
  color:#fff;line-height:1;letter-spacing:-0.025em;min-width:130px;
}
.metric-row .big .unit{color:var(--c-red-b);font-size:0.5em}
.metric-row .desc{color:rgba(255,255,255,0.65);font-size:15px;line-height:1.6}
.metric-row .desc strong{color:#fff;font-weight:700;display:block;font-family:var(--f-head);font-size:13px;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:4px}

/* =====================================================
   SERVICES NUMBERED
   ===================================================== */
.svc-block-head{
  display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;
  margin-bottom:72px;
}
.svc-block-head h2{max-width:520px}
.svc-block-head p{align-self:end}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--c-line)}
.svc-item{
  position:relative;padding:42px 28px 36px;
  border-right:1px solid var(--c-line);
  background:transparent;cursor:pointer;
  transition:var(--t);overflow:hidden;
}
.svc-item:last-child{border-right:0}
.svc-item::before{
  content:'';position:absolute;inset:auto 0 0 0;height:0;background:var(--c-red);
  transition:height 0.45s cubic-bezier(0.22,0.61,0.36,1);z-index:0;
}
.svc-item>*{position:relative;z-index:1}
.svc-item:hover::before{height:100%}
.svc-item:hover *{color:#fff !important}
.svc-item:hover .svc-num{color:rgba(255,255,255,0.8) !important}
.svc-item:hover .svc-arrow{background:#fff}
.svc-item:hover .svc-arrow svg,
.svc-item:hover .svc-arrow svg *{color:var(--c-red) !important}
.svc-num{
  font-family:var(--f-head);font-weight:900;font-size:13px;
  color:var(--c-red);letter-spacing:0.1em;margin-bottom:30px;
  display:flex;align-items:center;gap:10px;
}
.svc-num::before{content:'';width:20px;height:2px;background:currentColor}
.svc-icon{width:42px;height:42px;margin-bottom:22px;color:var(--c-red)}
.svc-icon svg{width:100%;height:100%}
.svc-item h3{font-size:18px;line-height:1.25;font-weight:800;margin-bottom:12px;color:var(--c-text)}
.svc-item p{font-size:13.5px;line-height:1.6;color:var(--c-text-mid);margin-bottom:32px}
.svc-arrow{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-black);color:#fff;
  transition:var(--t);
}
.svc-arrow svg{width:16px;height:16px}

/* =====================================================
   RIBBON (full-bleed photo strip)
   ===================================================== */
.ribbon{
  position:relative;padding:110px 0;
  background:var(--c-brick);
  color:#fff;overflow:hidden;
}
.ribbon::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.22) 88%);
  pointer-events:none;
}
.ribbon .container{position:relative;z-index:2}
.ribbon-quote{max-width:960px;margin:0 auto;text-align:center}
.ribbon-quote .mark{
  font-family:var(--f-head);font-weight:900;font-size:72px;line-height:0.6;
  color:rgba(255,255,255,0.9);margin-bottom:-8px;display:block;
}
.ribbon-quote blockquote{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(18px,1.8vw,26px);line-height:1.4;
  color:#fff;margin-bottom:26px;letter-spacing:-0.005em;
}
.ribbon-quote blockquote em{color:var(--c-sand);font-style:italic}
.ribbon-quote cite{
  font-family:var(--f-head);font-style:normal;
  font-size:11px;font-weight:700;letter-spacing:0.24em;
  text-transform:uppercase;color:rgba(255,255,255,0.6);
}

/* =====================================================
   FILOSOFIA OPERATIVA (Inicio) — retrato de la compania + regla editorial
   Sustituye al bloque .ribbon (que medía 554px para una sola frase).
   La foto es 1960x846 (ratio 2.317). El contenedor usa ESE MISMO ratio para
   no recortar ni de lado ni de arriba: en esta toma los ganchos estan al 8.2%
   del borde superior y las gruas exteriores a solo 9% de los bordes laterales,
   asi que cualquier recorte se las come. El anclaje abajo aplica solo cuando
   entra el max-height, por encima de ~2040px de ancho.
   ===================================================== */
.filo-foto{
  position:relative;width:100%;margin:0;overflow:hidden;
  background:var(--c-black);
  aspect-ratio:1920/686;max-height:880px;
}
.filo-foto img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
}
.filo-regla{
  background:var(--c-brick);color:#fff;
  border-top:3px solid var(--c-red-deep);
  padding:48px 0;min-height:250px;
  display:flex;align-items:center;   /* contenido centrado verticalmente en la banda */
}
.filo-regla .container{
  width:100%;text-align:center;      /* frase arriba, firma abajo, ambas centradas */
}
.filo-regla blockquote{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(17px,1.7vw,24px);line-height:1.35;
  color:#fff;letter-spacing:-0.005em;
  margin:0 auto 18px;max-width:52ch;
  text-align:center;hyphens:none;    /* gana al justificado global */
}
/* Enfasis en arena sobre ladrillo (7.06:1), igual que el ribbon original. */
.filo-regla blockquote em{color:var(--c-sand);font-style:italic}
.filo-regla cite{
  font-family:var(--f-head);font-style:normal;
  font-size:10.5px;font-weight:700;letter-spacing:0.22em;
  /* 78% y no 55%: sobre ladrillo el 55% da 3.56:1 y no pasa */
  text-transform:uppercase;color:rgba(255,255,255,0.78);
  display:block;text-align:center;
}
@media (max-width:900px){
  /* En pantalla angosta la banda 2.28:1 dejaria la foto como una rebanada */
  .filo-foto{aspect-ratio:12/5}
}
@media (max-width:760px){
  .filo-regla{min-height:210px;padding:38px 0}
  .filo-regla blockquote{font-size:17px;margin-bottom:14px}
}

/* =====================================================
   STATS STRIP
   ===================================================== */
.stats-strip{
  background:var(--c-black);color:#fff;
  padding:64px 0;position:relative;overflow:hidden;
  border-top:1px solid var(--c-line-white);
  border-bottom:1px solid var(--c-line-white);
}
.stats-strip::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 85% 50%, rgba(var(--c-red-rgb),0.25), transparent 50%);
}
.stats-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;align-items:center;
}
.stat-v4{padding:20px 0;border-left:3px solid var(--c-red);padding-left:24px}
.stat-v4 .num{
  font-family:var(--f-head);font-weight:900;
  font-size:clamp(34px,3.4vw,52px);line-height:1;letter-spacing:-0.025em;
  color:#fff;margin-bottom:8px;
}
.stat-v4 .num .plus,.stat-v4 .num .slash{color:var(--c-red-b)}
/* Números de impacto que cuentan (main.js, 26-sep-2026): el hueco invisible lleva el valor final y
   reserva su ancho; el valor que cuenta va encima, alineado a la derecha junto al "+". */
.contar{position:relative;display:inline-block}
.contar-hueco{visibility:hidden}
.contar-valor{position:absolute;top:0;right:0;white-space:nowrap}
.stat-v4 .label{
  font-family:var(--f-head);font-size:12px;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.65);
}

/* =====================================================
   WHY / CAPABILITIES (zigzag)
   ===================================================== */
.why-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:80px;align-items:start}
.why-sticky{position:sticky;top:152px}
.why-list{display:flex;flex-direction:column;gap:0}
.why-item{
  display:grid;grid-template-columns:64px 1fr auto;gap:28px;align-items:start;
  padding:36px 0;border-bottom:1px solid var(--c-line);
  transition:var(--t);
}
.why-item:last-child{border-bottom:0}
.why-num{
  font-family:var(--f-head);font-weight:900;font-size:28px;line-height:1;
  color:var(--c-red);
}
.why-item h3{font-size:18px;line-height:1.3;margin-bottom:8px}
.why-item p{color:var(--c-text-mid);font-size:14px;line-height:1.65;max-width:58ch}
.why-icon{
  width:46px;height:46px;border-radius:50%;background:var(--c-black);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:var(--t);
}
.why-icon svg{width:18px;height:18px}
.why-item:hover .why-icon{background:var(--c-red)}

/* =====================================================
   FLEET PREVIEW HORIZONTAL
   ===================================================== */
.fleet-strip{background:var(--c-sand);padding:90px 0}
.fleet-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:64px;
}
.fleet-head h2{max-width:600px}
.fleet-head .nav-arrows{display:flex;gap:10px}
.fleet-head .nav-arrows button{
  width:52px;height:52px;border:2px solid var(--c-black);background:transparent;
  color:var(--c-black);display:flex;align-items:center;justify-content:center;
  transition:var(--t);
}
.fleet-head .nav-arrows button:hover{background:var(--c-black);color:#fff}
.fleet-head .nav-arrows button svg{width:18px;height:18px}
.fleet-scroll{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(340px,1fr);gap:24px;
  overflow-x:auto;padding:2px 2px 40px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--c-red) var(--c-sand-soft);
}
.fleet-scroll::-webkit-scrollbar{height:6px}
.fleet-scroll::-webkit-scrollbar-track{background:var(--c-sand-soft)}
.fleet-scroll::-webkit-scrollbar-thumb{background:var(--c-red)}
.fleet-card-v4{
  scroll-snap-align:start;
  background:#fff;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  border:1px solid var(--c-line);
  transition:var(--t);
}
.fleet-card-v4:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,0.12)}
.fleet-card-v4 .img{
  height:200px;position:relative;
  background:
    linear-gradient(135deg, var(--c-charcoal), var(--c-black)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 14px);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.3);overflow:hidden;
}
.fleet-card-v4 .img svg{width:68px;height:68px;position:relative;z-index:1}
.fleet-card-v4 .cap-badge{
  position:absolute;top:20px;left:20px;z-index:2;
  background:var(--c-red);color:#fff;
  padding:8px 14px;
  font-family:var(--f-head);font-size:12px;font-weight:800;
  letter-spacing:0.12em;text-transform:uppercase;
}
.fleet-card-v4 .body{padding:24px 22px 28px;flex:1;display:flex;flex-direction:column}
.fleet-card-v4 h3{font-size:17px;margin-bottom:8px;line-height:1.3}
.fleet-card-v4 p{font-size:13.5px;color:var(--c-text-mid);line-height:1.6;margin-bottom:20px;flex:1}
.fleet-card-v4 .view-link{
  font-family:var(--f-head);font-size:12px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--c-red);
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding-bottom:6px;border-bottom:2px solid var(--c-red);
  transition:var(--t);
}
.fleet-card-v4 .view-link:hover{gap:14px}
.fleet-card-v4 .view-link svg{width:14px;height:14px}

/* =====================================================
   SECTORS MARQUEE
   ===================================================== */
.sectors-strip{
  background:var(--c-sand);padding:72px 0;position:relative;overflow:hidden;
  border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
}
.sectors-track{
  display:inline-flex;gap:56px;align-items:center;
  animation:marquee 45s linear infinite;
  white-space:nowrap;padding-right:56px;
}
.sectors-track .item{
  display:inline-flex;align-items:center;gap:18px;flex-shrink:0;
  font-family:var(--f-head);font-weight:900;
  font-size:clamp(18px,1.8vw,28px);letter-spacing:0.01em;line-height:1;
  color:var(--c-text);text-transform:uppercase;
  paint-order:stroke fill;
}
.sectors-track .item .ast{
  color:var(--c-red);display:inline-flex;align-items:center;
  width:14px;height:14px;flex-shrink:0;
}
.sectors-track .item .ast svg{width:100%;height:100%}
.sectors-track .item.outline{
  color:var(--c-red);
}

/* =====================================================
   COVERAGE PREVIEW
   ===================================================== */
.coverage-preview{
  background:var(--c-black);color:#fff;padding:0;position:relative;overflow:hidden;
}
.coverage-preview-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:480px}
.coverage-preview-grid .text{padding:70px 48px;display:flex;flex-direction:column;justify-content:center}
.coverage-preview-grid h2{color:#fff}
.coverage-preview-grid p{color:rgba(255,255,255,0.72);margin-bottom:32px}
.coverage-preview-grid .map{
  position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px);
  background-color:var(--c-charcoal);
  display:flex;align-items:center;justify-content:center;
}
@keyframes pulse-ring{
  0%{transform:scale(0.6);opacity:0.8}
  100%{transform:scale(1.4);opacity:0}
}
.coverage-preview-grid .map svg{width:110px;height:110px;color:var(--c-red-b);position:relative;z-index:2;filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5))}
.coverage-preview-grid .map .city-label{
  position:absolute;z-index:3;
  font-family:var(--f-head);font-size:10px;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.8);
  display:flex;align-items:center;gap:8px;
}
.coverage-preview-grid .map .city-label::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c-red-b);box-shadow:0 0 0 3px rgba(var(--c-red-rgb),0.3)}
.coverage-preview-grid .map .city-1{top:38%;left:28%}
.coverage-preview-grid .map .city-2{top:58%;right:20%}
.coverage-preview-grid .map .city-3{bottom:24%;left:36%}

/* =====================================================
   CREDIBILITY STRIP
   ===================================================== */
.cred-strip-v4{
  border-top:1px solid var(--c-line);overflow:hidden;
}
.cred-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;align-items:stretch;min-height:360px;
}
.cred-item-v4{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:32px 20px;
  background-size:cover;background-position:center;
  transition:var(--t);overflow:hidden;
}
.cred-item-v4::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(var(--c-black-rgb),0.25) 0%, rgba(var(--c-black-rgb),0.72) 100%);
  transition:var(--t);
}
.cred-item-v4:hover::before{background:linear-gradient(180deg, rgba(var(--c-red-rgb),0.35) 0%, rgba(var(--c-red-rgb),0.78) 100%)}
.cred-item-v4 .check{
  position:relative;z-index:2;
  width:44px;height:44px;border-radius:50%;background:var(--c-red);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:12px;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.cred-item-v4 .check svg{width:20px;height:20px;stroke-width:3}
.cred-item-v4 .text{
  position:relative;z-index:2;
  font-family:var(--f-head);font-size:12px;font-weight:700;
  letter-spacing:0.08em;line-height:1.3;color:#fff;text-transform:uppercase;text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
}

/* =====================================================
   CTA DIAGONAL BLOCK
   ===================================================== */
/* La foto queda limpia en la mitad superior; el velo neutro solo aparece
   abajo, donde vive el texto. Sin tinte de color: el rojo sobre la imagen
   era lo que la hacía leerse "de baja resolución". */
.cta-block-v4{
    position:relative;overflow:hidden;color:#fff;background-color:var(--c-black);
    /* El bloque toma la relación de su foto (--cta-ratio inline; main.js la ajusta si cambian la foto desde el panel):
       la imagen se ve COMPLETA, sin recorte. El texto va al pie y el velo solo cubre esa franja (medido en px desde abajo). */
    aspect-ratio:var(--cta-ratio, 2000/1069);
    display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 76px;
    background-image:
      linear-gradient(180deg,
        rgba(var(--c-black-rgb),0.00) 0%,
        rgba(var(--c-black-rgb),0.00) calc(100% - 340px),
        rgba(var(--c-black-rgb),0.55) calc(100% - 230px),
        rgba(var(--c-black-rgb),0.88) calc(100% - 110px),
        rgba(var(--c-black-rgb),0.95) 100%),
      var(--cta-img, url('../assets/07-Fotos-Jul17/IMG_2189.webp'));
    background-size:cover;background-position:center;
  }
.cta-block-v4 .container{position:relative;z-index:2}
.cta-block-v4-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.cta-block-v4 h2{color:#fff;margin-bottom:26px}
.cta-block-v4 p{color:rgba(255,255,255,0.88);font-size:16px;line-height:1.75;margin-bottom:0;max-width:56ch}
/* Botones bajo el título y párrafo en la columna derecha, ambos
   alineados al pie del bloque (estructura del boceto del cliente). */
.cta-block-v4 .cta-actions,
.inner-cta .cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.cta-texto{padding-bottom:6px}
.cta-texto p{margin-bottom:0}

/* =====================================================
   AVISO DE PRIVACIDAD MODAL
   ===================================================== */
.aviso-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(4px);
  align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;
}
.aviso-overlay.open{display:flex}
.aviso-modal{
  background:#fff;max-width:760px;width:100%;padding:56px;position:relative;
  box-shadow:0 40px 100px rgba(0,0,0,0.4);
  animation:fadeUp 0.3s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.aviso-modal-close{
  position:absolute;top:18px;right:18px;width:36px;height:36px;
  background:var(--c-charcoal);color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;
}
.aviso-modal-close:hover{background:var(--c-red)}
/* Legales: el título es el <h1> de la página y cada apartado un <h2> (antes h2 y h3; se
   corrigió el salto de nivel el 24-sep-2026 conservando el mismo aspecto). */
.aviso-modal h1{
  font-family:var(--f-head);font-weight:900;font-size:22px;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--c-text);margin-bottom:6px;
}
.aviso-modal .aviso-date{
  font-family:var(--f-head);font-size:10px;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--c-muted);margin-bottom:32px;
}
.aviso-modal h2{
  font-family:var(--f-head);font-weight:800;font-size:13px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--c-red);margin:28px 0 10px;
}
.aviso-modal p{font-size:14px;color:var(--c-text-mid);line-height:1.75;margin-bottom:10px}
.aviso-modal ul{margin:8px 0 10px 18px}
.aviso-modal ul li{font-size:14px;color:var(--c-text-mid);line-height:1.7;margin-bottom:4px}

/* =====================================================
   FOOTER
   ===================================================== */
.footer-v4{background:var(--c-black-pure);color:#fff;padding:70px 0 32px;position:relative}
.footer-v4::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg, var(--c-red) 0%, var(--c-red-deep) 50%, var(--c-red) 100%);
}
.footer-top{display:grid;grid-template-columns:1.35fr 0.95fr 0.95fr 1.25fr;gap:48px;padding-bottom:56px;border-bottom:1px solid var(--c-line-white);align-items:start}
.footer-v4 .brand .site-logo{color:#fff;margin-bottom:18px;margin-top:-24px}
.footer-v4 .brand p{color:rgba(255,255,255,0.5);font-size:14px;line-height:1.7;margin-bottom:22px;max-width:36ch}
.footer-v4 .brand .social{display:flex;gap:10px}
.footer-v4 .brand .social a{
  width:40px;height:40px;border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.6);
  display:flex;align-items:center;justify-content:center;transition:var(--t);
}
.footer-v4 .brand .social a:hover{background:var(--c-red);border-color:var(--c-red);color:#fff}
.footer-v4 .brand .social svg{width:16px;height:16px}
.footer-v4 .col-title{
  font-family:var(--f-head);font-size:11px;font-weight:700;letter-spacing:0.22em;
  text-transform:uppercase;color:#fff;margin-bottom:24px;
  display:flex;align-items:center;gap:10px;
}
.footer-v4 .col-title::before{content:'';width:24px;height:2px;background:var(--c-red)}
.footer-v4 .col a{
  display:block;padding:8px 0;color:rgba(255,255,255,0.55);font-size:14.5px;
  transition:var(--t-fast);
}
.footer-v4 .col a:hover{color:var(--c-red-b);padding-left:6px}
.footer-v4 .contact-col .row{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.footer-v4 .contact-col .row .ico{width:32px;height:32px;background:var(--c-red);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.footer-v4 .contact-col .row .ico svg{width:14px;height:14px}
.footer-v4 .contact-col .row .txt{color:rgba(255,255,255,0.7);font-size:14px;line-height:1.5}
/* 24 px de alto por enlace (mínimo táctil WCAG 2.5.8): los dos teléfonos van uno bajo otro y a 17 px se estorbaban */
.footer-v4 .contact-col .row .txt a{color:rgba(255,255,255,0.7);padding:1.5px 0;display:inline-block}
.footer-v4 .contact-col .row .txt a:hover{color:#fff;padding-left:0}
.footer-bottom{
  padding-top:32px;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px;
}
.footer-bottom .legal{color:rgba(255,255,255,0.55);font-size:12.5px}
.footer-bottom .mini-links{display:flex;gap:24px}
.footer-bottom .mini-links a{color:rgba(255,255,255,0.55);font-size:12.5px;text-transform:uppercase;letter-spacing:0.08em;font-family:var(--f-head);font-weight:600}
.footer-bottom .mini-links a:hover{color:#fff}
.footer-bottom .credit{color:rgba(255,255,255,0.45);font-size:12.5px}
.footer-bottom .credit a{color:inherit;transition:var(--t-fast)}
.footer-bottom .credit a:hover{color:#fff;text-decoration:underline}

/* =====================================================
   PAGE CONTAINERS
   ===================================================== */
.page{display:none}
.page.active{display:block;animation:fade-in 0.4s ease-out}
@keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* =====================================================
   INNER PAGE HEROES (5A & 5B)
   ===================================================== */
.v-stripe{
  background:var(--c-red);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.v-stripe::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 24px,rgba(255,255,255,0.05) 24px 25px);
}
.vert-label{
  font-family:var(--f-head);font-weight:900;font-size:12px;letter-spacing:0.32em;text-transform:uppercase;
  color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);
  position:relative;z-index:2;display:flex;align-items:center;gap:24px;
}
.vert-label::before,.vert-label::after{content:'';width:1px;height:36px;background:rgba(255,255,255,0.4)}
.bcrumb{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-head);font-size:11px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--c-muted);margin-bottom:18px;
}
.bcrumb a{color:var(--c-muted);transition:color 0.2s;cursor:pointer}
.bcrumb a:hover{color:var(--c-red)}
.bcrumb .sep{color:var(--c-line);font-weight:400}
.bcrumb .here{color:var(--c-text)}
.bcrumb.light{color:rgba(255,255,255,0.5)}
.bcrumb.light a{color:rgba(255,255,255,0.5)}
.bcrumb.light .sep{color:rgba(255,255,255,0.2)}
.bcrumb.light .here{color:#fff}

/* HERO 5A — stripe + body + photo (used: nosotros, servicios, flota, cobertura, seguridad) */
.page-hero-a{
  margin-top:68px;
  display:grid;grid-template-columns:120px 1.1fr 0.9fr;min-height:480px;
  background:#fff;border-bottom:1px solid var(--c-line);
}
.page-hero-a .body{
  padding:80px 56px;display:flex;flex-direction:column;justify-content:center;
  background:var(--c-sand);position:relative;
}
.page-hero-a h1{
  font-family:var(--f-head);font-weight:900;font-size:clamp(32px,3.6vw,52px);
  line-height:1.06;letter-spacing:-0.022em;text-transform:uppercase;
  margin-bottom:18px;max-width:18ch;
}
.page-hero-a h1 .accent{color:var(--c-red)}
.page-hero-a .lead{font-size:15.5px;line-height:1.7;color:var(--c-text-mid);max-width:54ch}
.page-hero-a .photo-col{position:relative;overflow:hidden}
.page-hero-a .photo-col .img-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg,rgba(var(--c-red-rgb),0.4),rgba(var(--c-black-rgb),0.85)),
    repeating-linear-gradient(45deg,rgba(255,255,255,0.025) 0 1px,transparent 1px 14px);
  background-color:var(--c-charcoal);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.3);
}
.page-hero-a .photo-col .img-bg svg{width:64px;height:64px}
.page-hero-a .photo-col .label{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:var(--f-head);font-size:9px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.92);
  background:rgba(var(--c-black-rgb),0.45);padding:5px 10px;backdrop-filter:blur(4px);
}
.page-hero-a .photo-col .label::before{content:'//';color:var(--c-red-b);margin-right:6px}
.page-hero-a .photo-col .stat-card{
  position:absolute;bottom:20px;left:20px;z-index:2;
  background:var(--c-red);padding:14px 18px;color:#fff;border-left:3px solid #fff;
  box-shadow:0 14px 32px rgba(0,0,0,0.4);
}
.page-hero-a .photo-col .stat-card .num{font-family:var(--f-head);font-size:26px;font-weight:900;line-height:1;letter-spacing:-0.02em}
.page-hero-a .photo-col .stat-card .lbl{font-family:var(--f-head);font-size:9px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.85);margin-top:4px}

/* HERO 5B — stripe + dark body with overlay (used: contacto) */
.page-hero-b{
  margin-top:68px;
  display:grid;grid-template-columns:120px 1fr;min-height:520px;
  background:#fff;border-bottom:1px solid var(--c-line);
}
.page-hero-b .body{
  padding:90px 60px;display:flex;flex-direction:column;justify-content:center;
  position:relative;color:#fff;overflow:hidden;
  background-color:var(--c-black);
  background-image:
    linear-gradient(110deg, rgba(var(--c-black-rgb),0.9) 0%, rgba(var(--c-black-rgb),0.78) 35%, rgba(var(--c-black-rgb),0.42) 62%, rgba(var(--c-black-rgb),0.12) 100%),
    url('../assets/07-Fotos-Jul17/IMG_2220.webp');
  background-size:cover;background-position:center 85%;
}
.page-hero-b h1, .page-hero-b .lead, .page-hero-b .bcrumb{text-shadow:0 2px 12px rgba(0,0,0,0.55)}
.page-hero-b .body .content{position:relative;z-index:2;max-width:680px}
.page-hero-b h1{
  font-family:var(--f-head);font-weight:900;font-size:clamp(32px,3.6vw,52px);
  line-height:1.06;letter-spacing:-0.022em;text-transform:uppercase;
  color:#fff;margin-bottom:18px;
}
.page-hero-b h1 .accent{color:var(--c-red-b)}
.page-hero-b .lead{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,0.78);max-width:60ch;margin-top:14px}
.page-hero-b .ico-wm{
  position:absolute;right:48px;bottom:48px;z-index:2;
  width:140px;height:140px;color:rgba(255,255,255,0.08);
}

/* =====================================================
   INNER PAGE — REUSABLE COMPONENTS
   ===================================================== */
.inner-section{padding:80px 0;position:relative}
.inner-section.dark{background:var(--c-black);color:#fff}
.inner-section.sand{background:var(--c-sand)}
.inner-section.sand-soft{background:var(--c-sand-soft)}
.inner-section.white{background:var(--c-sand)}
.inner-head{margin-bottom:48px;max-width:680px}
.inner-head.wide{max-width:1020px}
.inner-head.center{margin-left:auto;margin-right:auto;text-align:center}
.inner-head h2{
  font-family:var(--f-head);font-weight:900;font-size:clamp(26px,3vw,42px);
  line-height:1.1;letter-spacing:-0.018em;text-transform:uppercase;margin-bottom:14px;
}
.inner-head h2 .accent{color:var(--c-red)}
.inner-head .text-white{color:#fff}
.inner-head p{font-size:16px;color:var(--c-text-mid);line-height:1.7;max-width:60ch}
.inner-head.center p{margin-left:auto;margin-right:auto}
.inner-head p.light{color:rgba(255,255,255,0.78)}

/* Pillar cards (Confianza/Crecimiento, Tranquilidad/Eficiencia, Comunicación/Condiciones, Protocolos/Documentación) */
.pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.pillar-card{
  background:#fff;border:1px solid var(--c-line);padding:36px 32px;position:relative;
  transition:var(--t);
}
.pillar-card:hover{border-color:var(--c-red);transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,0.08)}
.pillar-card.red{background:var(--c-red);border-color:var(--c-red);color:#fff}
.pillar-card.dark{background:var(--c-charcoal);border-color:rgba(255,255,255,0.08);color:#fff}
.pillar-card .pillar-icon{
  width:48px;height:48px;border-radius:50%;background:var(--c-red);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.pillar-card.red .pillar-icon{background:#fff;color:var(--c-red)}
.pillar-card.dark .pillar-icon{background:var(--c-red)}
.pillar-card .pillar-icon svg{width:20px;height:20px}
.pillar-card h3{
  font-family:var(--f-head);font-weight:800;font-size:18px;line-height:1.25;letter-spacing:-0.01em;
  color:var(--c-text);margin-bottom:14px;text-transform:uppercase;
}
.pillar-card.red h3,.pillar-card.dark h3{color:#fff}
.pillar-card .check-list{list-style:none}
.pillar-card .check-list li{
  position:relative;padding:8px 0 8px 28px;font-size:14.5px;line-height:1.5;color:var(--c-text-mid);
  border-bottom:1px solid var(--c-line);
}
.pillar-card .check-list li:last-child{border-bottom:0}
.pillar-card.red .check-list li{color:rgba(255,255,255,0.92);border-color:rgba(255,255,255,0.15)}
.pillar-card.dark .check-list li{color:rgba(255,255,255,0.78);border-color:rgba(255,255,255,0.08)}
.pillar-card .check-list li::before{
  content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--c-red);
}
.pillar-card.red .check-list li::before{background:#fff}
.pillar-card.dark .check-list li::before{background:var(--c-red-b)}

/* Listas numeradas: sustituyen a los bullets en Seguridad, con el mismo
   lenguaje de numeral grande que los números de impacto. */
.num-list{list-style:none;counter-reset:nl}
.num-list li{
  counter-increment:nl;
  display:grid;grid-template-columns:38px 1fr;gap:16px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--c-line);
  font-size:15px;line-height:1.45;color:var(--c-text);text-align:left;
}
.num-list li:last-child{border-bottom:0}
.num-list li::before{
  content:counter(nl,decimal-leading-zero);
  font-family:var(--f-head);font-weight:900;font-size:21px;line-height:1;
  letter-spacing:-0.02em;color:var(--c-red);
}
.pillar-card.dark .num-list li{color:rgba(255,255,255,0.86);border-bottom-color:rgba(255,255,255,0.1)}
.pillar-card.dark .num-list li::before{color:var(--c-red-b)}
.pillar-card.red .num-list li{color:rgba(255,255,255,0.94);border-bottom-color:rgba(255,255,255,0.18)}
.pillar-card.red .num-list li::before{color:#fff}

/* Differentiators · 4-up cards ladrillo; la foto solo se revela en hover (Nosotros · Visión Estratégica) */
.diff-grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.diff-card-v4{
  background:var(--c-red);color:#fff;padding:36px 32px 30px;position:relative;overflow:hidden;
  background-size:cover;background-position:center;min-height:280px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:var(--t);
}
.diff-card-v4:hover{box-shadow:0 22px 50px rgba(0,0,0,0.45)}
.diff-card-v4::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--c-red);
  transition:var(--t);
}
.diff-card-v4:hover::before{background:rgba(var(--c-black-rgb),0.58)}
.diff-card-v4 > *{position:relative;z-index:1}
.diff-card-v4 .icn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.15);border-radius:8px;margin-bottom:18px;color:#fff;
}
.diff-card-v4 .icn svg{width:20px;height:20px}
.diff-card-v4 h3{
  font-family:var(--f-head);font-weight:800;font-size:17px;line-height:1.3;
  letter-spacing:-0.005em;margin-bottom:10px;color:#fff;text-transform:uppercase;
}
.diff-card-v4 p{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.85)}

/* Mercado / Sectores grid (5 cards from PDF p.8) — flex w/ center for last row */
.mercado-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.mercado-card{flex:0 1 calc((100% - 44px)/3);min-width:0}
.mercado-card{
  background:var(--c-sand-soft);border:1px solid var(--c-line);padding:30px 28px;
  transition:var(--t);
}
.mercado-card:hover{border-color:var(--c-red);background:#fff;transform:translateY(-3px)}
.mercado-card .icn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--c-text);color:#fff;margin-bottom:18px;
}
.mercado-card .icn svg{width:16px;height:16px}
.mercado-card h3{font-family:var(--f-head);font-weight:800;font-size:15px;line-height:1.25;color:var(--c-text);margin-bottom:10px;text-transform:uppercase;letter-spacing:-0.005em}
.mercado-card p{font-size:13.5px;line-height:1.6;color:var(--c-text-mid)}

/* Service number block (servicios page) */
.svc-block{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  padding:64px 0;border-bottom:1px solid var(--c-line);
}
.svc-block:last-child{border-bottom:0}
.svc-block.reverse{grid-template-columns:1fr 1fr;direction:rtl}
.svc-block.reverse > *{direction:ltr}
.svc-block .num-tag{
  font-family:var(--f-head);font-weight:900;font-size:13px;color:var(--c-red);
  letter-spacing:0.16em;margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.svc-block .num-tag::before{content:'';width:24px;height:2px;background:currentColor}
.svc-block h3{
  font-family:var(--f-head);font-weight:900;font-size:clamp(24px,2.6vw,36px);
  line-height:1.12;letter-spacing:-0.018em;margin-bottom:18px;text-transform:uppercase;
}
.svc-block p{font-size:15.5px;color:var(--c-text-mid);line-height:1.7;margin-bottom:22px}
.svc-block ul.checks{list-style:none;margin-bottom:24px}
.svc-block ul.checks li{
  padding:9px 0 9px 28px;position:relative;font-size:14.5px;color:var(--c-text);
  border-bottom:1px solid var(--c-line);
}
.svc-block ul.checks li:last-child{border-bottom:0}
.svc-block ul.checks li::before{
  content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--c-red);
}
.inner-section .container > .svc-block:only-child{padding:0;border-bottom:0}
.inner-section.dark .svc-block h3{color:#fff}
.inner-section.dark .svc-block .num-tag{color:var(--c-red-b)}
.inner-section.dark .svc-block p{color:rgba(255,255,255,0.75)}
.inner-section.dark .svc-block ul.checks li{color:rgba(255,255,255,0.88);border-bottom-color:rgba(255,255,255,0.12)}
.inner-section.dark .svc-block ul.checks li::before{background:var(--c-red-b)}
.svc-block .visual{
  height:340px;position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(var(--c-red-rgb),0.4),rgba(var(--c-black-rgb),0.85)),
    repeating-linear-gradient(45deg,rgba(255,255,255,0.025) 0 1px,transparent 1px 14px);
  background-color:var(--c-charcoal);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.3);
}
.svc-block .visual svg{width:80px;height:80px}
.svc-block .visual .label{
  position:absolute;top:18px;left:18px;
  font-family:var(--f-head);font-size:9px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.5);
}
.svc-block .visual .label::before{content:'//';color:var(--c-red-b);margin-right:6px}

/* Service block image carousel */
.svc-carousel{
  height:340px;position:relative;overflow:hidden;background:var(--c-charcoal);
}
.svc-carousel-track{
  display:flex;height:100%;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.svc-carousel-slide{
  flex:0 0 100%;height:100%;background-size:cover;background-position:center;
}
.svc-carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:36px;height:36px;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.2);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--t);
}
.svc-carousel-btn:hover{background:var(--c-red)}
.svc-carousel-btn svg{width:16px;height:16px}
.svc-carousel-btn.prev{left:12px}
.svc-carousel-btn.next{right:12px}
.svc-carousel-dots{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:3;
}
.svc-carousel-dot{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.4);
  cursor:pointer;transition:var(--t);
}
.svc-carousel-dot.active{background:var(--c-red-b);width:18px;border-radius:3px}
.svc-carousel .label{
  position:absolute;top:18px;left:18px;z-index:3;
  font-family:var(--f-head);font-size:9px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:#fff;
  background:rgba(var(--c-black-rgb),0.55);padding:6px 12px;backdrop-filter:blur(4px);
}
.svc-carousel .label::before{content:'//';color:var(--c-red-b);margin-right:6px}

/* =====================================================
   SERVICIOS · Especialidad energética (intro)
   ===================================================== */
.energia-bloque{
  display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:center;
  background:var(--c-black);color:#fff;padding:44px 48px;margin-top:48px;
  border-left:5px solid var(--c-red);
}
.energia-bloque .eyebrow{color:var(--c-red-b);margin-bottom:12px}
.energia-bloque .eyebrow::before{background:currentColor}
.energia-bloque h3{
  font-family:var(--f-head);font-weight:900;font-size:clamp(22px,2.4vw,32px);
  line-height:1.1;letter-spacing:-0.018em;text-transform:uppercase;color:#fff;margin-bottom:14px;
}
.energia-bloque p{color:rgba(255,255,255,0.8);font-size:15.5px;line-height:1.75;margin:0}
.energia-tags{display:flex;flex-wrap:wrap;gap:9px;align-content:center}
.energia-tags span{
  font-family:var(--f-head);font-size:11px;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.22);padding:8px 14px;
}

/* Sliders de Servicios — esquinas redondeadas + mayor altura */
.svc-block .visual,.svc-block .svc-carousel{height:430px;border-radius:15px;overflow:hidden}

/* Fleet card grid for /flota */
.fleet-grid-v4{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fleet-card-page{
  background:#fff;border:1px solid var(--c-line);overflow:hidden;
  display:flex;flex-direction:column;transition:var(--t);
}
.fleet-card-page:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,0.1);border-color:transparent}
.fleet-card-page .svc-carousel{height:300px}
.fleet-card-page .img{
  height:300px;position:relative;
  background:
    linear-gradient(135deg,var(--c-charcoal),var(--c-black)),
    repeating-linear-gradient(45deg,rgba(255,255,255,0.02) 0 12px,transparent 12px 14px);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.3);
}
.fleet-card-page .img svg{width:60px;height:60px;position:relative;z-index:1}
.fleet-card-page .cap{
  position:absolute;top:18px;left:18px;z-index:2;
  background:var(--c-red);color:#fff;padding:6px 12px;
  font-family:var(--f-head);font-size:11px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
}
.fleet-card-page .body{padding:24px 22px 28px;flex:1}
.fleet-card-page h3{font-family:var(--f-head);font-weight:800;font-size:16px;line-height:1.3;color:var(--c-text);margin-bottom:8px;text-transform:uppercase}
.fleet-card-page p{font-size:13.5px;color:var(--c-text-mid);line-height:1.6;margin-bottom:14px}
.fleet-card-page .tags{display:flex;gap:6px;flex-wrap:wrap}
.fleet-card-page .tag{
  font-family:var(--f-head);font-size:9px;font-weight:700;letter-spacing:0.06em;
  color:var(--c-red);border:1.5px solid var(--c-red);padding:3px 9px;text-transform:uppercase;
}

/* Capacity table */
.cap-table-wrap{background:#fff;border:1px solid var(--c-line);overflow-x:auto}
.cap-table{width:100%;border-collapse:collapse;min-width:560px}
.cap-table thead th{
  background:var(--c-black);color:#fff;font-family:var(--f-head);font-size:11px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;padding:14px 20px;text-align:left;
}
.cap-table tbody td{
  padding:14px 20px;font-size:14px;color:var(--c-text);border-bottom:1px solid var(--c-line);
}
.cap-table tbody tr:last-child td{border-bottom:0}
.cap-table tbody tr:nth-child(even) td{background:var(--c-sand-soft)}
.cap-table .cap-val{font-family:var(--f-head);font-weight:800;color:var(--c-red);font-size:14.5px}
.inner-section.dark .cap-table-wrap{background:var(--c-charcoal);border-color:rgba(255,255,255,0.12)}
.inner-section.dark .cap-table thead th{background:var(--c-red)}
.inner-section.dark .cap-table tbody td{color:rgba(255,255,255,0.88);border-bottom-color:rgba(255,255,255,0.08)}
.inner-section.dark .cap-table tbody tr:nth-child(even) td{background:rgba(255,255,255,0.045)}
.inner-section.dark .cap-table .cap-val{color:var(--c-red-b)}

/* Map block */
.map-block{
  height:420px;position:relative;border:1px solid var(--c-line);overflow:hidden;
  background:
    linear-gradient(135deg,rgba(var(--c-red-rgb),0.4),rgba(var(--c-black-rgb),0.6)),
    repeating-linear-gradient(0deg,rgba(255,255,255,0.04) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,rgba(255,255,255,0.04) 0 1px,transparent 1px 40px);
  background-color:var(--c-charcoal);
  display:flex;align-items:center;justify-content:center;
}
.map-block::before{
  content:'';position:absolute;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--c-red-rgb),0.5),transparent 60%);
  animation:pulse-ring 3s ease-out infinite;
}
.map-block svg{width:90px;height:90px;color:var(--c-red-b);position:relative;z-index:2;filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5))}
.map-block .city-tag{
  position:absolute;z-index:3;
  font-family:var(--f-head);font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.8);
  display:flex;align-items:center;gap:8px;
}
.map-block .city-tag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c-red-b);box-shadow:0 0 0 3px rgba(var(--c-red-rgb),0.3)}
.map-block .c1{top:32%;left:24%}
.map-block .c2{top:48%;right:18%}
.map-block .c3{bottom:22%;left:38%}
.map-block .c4{top:62%;left:18%}

/* Cobertura · foto de unidad en ruta (sustituye al mapa) */
.cobertura-foto{position:relative;overflow:hidden;border-radius:15px;border:1px solid var(--c-line);margin:0}
.cobertura-foto img{width:100%;height:clamp(320px,42vw,520px);object-fit:cover;display:block}
.cobertura-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:64px 34px 26px;color:#fff;font-size:14.5px;line-height:1.6;
  background:linear-gradient(180deg,rgba(var(--c-black-rgb),0) 0%,rgba(var(--c-black-rgb),0.55) 45%,rgba(var(--c-black-rgb),0.9) 100%);
  text-align:left;
}
.cobertura-foto figcaption .et{
  display:block;font-family:var(--f-head);font-size:10px;font-weight:700;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--c-red-b);margin-bottom:6px;
}

/* Corredores cards */
.corredor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.corredor-card{
  background:#fff;border:1px solid var(--c-line);padding:32px 28px;
  border-top:3px solid var(--c-red);transition:var(--t);
}
.corredor-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,0,0,0.08)}
.corredor-card .icn{
  width:40px;height:40px;background:var(--c-text);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.corredor-card .icn svg{width:18px;height:18px}
.corredor-card h3{font-family:var(--f-head);font-weight:800;font-size:17px;line-height:1.25;color:var(--c-text);margin-bottom:12px;text-transform:uppercase}
.corredor-card p{font-size:14px;line-height:1.65;color:var(--c-text-mid)}

/* Contact form */
.contact-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:48px;align-items:start}
.contact-form-card{
  background:#fff;border:1px solid var(--c-line);padding:40px;
}
.contact-form-card h2{
  font-family:var(--f-head);font-weight:900;font-size:24px;line-height:1.15;
  letter-spacing:-0.012em;color:var(--c-text);margin-bottom:8px;text-transform:uppercase;
}
.contact-form-card .small-note{font-size:14px;color:var(--c-muted);margin-bottom:28px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-group{display:flex;flex-direction:column}
.cf-group.full{grid-column:1/-1}
.cf-group label{
  font-family:var(--f-head);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--c-text);margin-bottom:6px;
}
.cf-group label .req{color:var(--c-red)}
.cf-input,.cf-select,.cf-textarea{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--c-line);background:var(--c-sand-soft);
  font-family:var(--f-body);font-size:14.5px;color:var(--c-text);
  transition:var(--t-fast);
}
.cf-input:focus,.cf-select:focus,.cf-textarea:focus{
  outline:none;background:#fff;border-color:var(--c-red);box-shadow:0 0 0 3px rgba(var(--c-red-rgb),0.12);
}
.cf-textarea{min-height:110px;resize:vertical;font-family:var(--f-body)}
.cf-submit{
  width:100%;padding:16px;background:var(--c-red);color:#fff;border:0;cursor:pointer;
  font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  transition:var(--t);
}
.cf-submit:hover{background:var(--c-red-deep);box-shadow:0 14px 32px rgba(var(--c-red-rgb),0.4)}

/* Contact panel (right side of contact page) */
.contact-panel{display:flex;flex-direction:column;gap:24px}
.contact-person{
  background:var(--c-charcoal);color:#fff;padding:28px;position:relative;overflow:hidden;
}
.contact-person::before{
  content:'';position:absolute;top:0;left:0;width:5px;height:100%;background:var(--c-red);
}
.contact-person .role{
  font-family:var(--f-head);font-size:10px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--c-red-b);margin-bottom:8px;
}
.contact-person .name{font-family:var(--f-head);font-weight:900;font-size:22px;line-height:1.1;color:#fff;margin-bottom:14px;text-transform:uppercase;letter-spacing:-0.012em}
.contact-person .row{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,0.9);margin-bottom:6px}
.contact-person .row svg{width:14px;height:14px;color:var(--c-red-b)}
.contact-person .row a{color:#fff}
.contact-meta{
  background:var(--c-sand-soft);border:1px solid var(--c-line);padding:24px;
}
.contact-meta .row{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.contact-meta .row:last-child{margin-bottom:0}
.contact-meta .row .ico{width:32px;height:32px;background:var(--c-red);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-meta .row .ico svg{width:14px;height:14px}
.contact-meta .row .txt{font-size:14px;line-height:1.5;color:var(--c-text)}
.contact-meta .row .txt small{display:block;font-family:var(--f-head);font-size:9px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--c-muted);margin-bottom:3px}

/* Inner CTA block (smaller than home) */
/* Mismo criterio que el CTA de Inicio: foto limpia arriba, velo neutro
   abajo y nada de tinte rojo sobre la imagen. */
.inner-cta{
    color:#fff;background-color:var(--c-black);position:relative;overflow:hidden;
    /* Misma regla que .cta-block-v4: relación de la foto, texto al pie, velo solo donde vive el texto */
    aspect-ratio:var(--cta-ratio, 2000/978);
    display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 66px;
    background-image:
      linear-gradient(180deg,
        rgba(var(--c-black-rgb),0.00) 0%,
        rgba(var(--c-black-rgb),0.00) calc(100% - 340px),
        rgba(var(--c-black-rgb),0.55) calc(100% - 230px),
        rgba(var(--c-black-rgb),0.88) calc(100% - 110px),
        rgba(var(--c-black-rgb),0.95) 100%),
      var(--cta-img, url('../assets/02-Grua-Operacion/_Destacadas/IMG_1960.webp'));
    background-size:cover;background-position:center;
  }
.inner-cta .container{position:relative;z-index:2}
.inner-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.inner-cta h2{
  font-family:var(--f-head);font-weight:900;font-size:clamp(24px,2.6vw,36px);
  line-height:1.15;letter-spacing:-0.014em;color:#fff;margin-bottom:14px;text-transform:uppercase;
}
.inner-cta p{color:rgba(255,255,255,0.85);font-size:15px;line-height:1.7;max-width:54ch}

/* PDF-style closing tagline block */
.tagline-block{
  background:var(--c-brick);color:#fff;padding:56px 0;text-align:center;position:relative;overflow:hidden;
}
.tagline-block::before{
  content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.18) 92%);pointer-events:none;
}
.tagline-block .container{position:relative;z-index:2}
.tagline-block blockquote{
  font-family:var(--f-head);font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1.25;
  letter-spacing:-0.012em;color:#fff;max-width:24ch;margin:0 auto;
}
.tagline-block cite{display:block;font-style:normal;margin-top:14px;font-family:var(--f-head);font-size:11px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.7)}

/* =====================================================
   ANIMATIONS / REVEALS
   ===================================================== */
.tc-reveal{opacity:0;transform:translateY(32px);transition:opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22,0.61,0.36,1)}
.tc-reveal.in{opacity:1;transform:none}
.tc-reveal.d1{transition-delay:0.08s}
.tc-reveal.d2{transition-delay:0.16s}
.tc-reveal.d3{transition-delay:0.24s}
.tc-reveal.d4{transition-delay:0.32s}

/* Hero: la misma entrada, pero con animación de CSS que arranca con la página, sin esperar al JS.
   Con .tc-reveal el texto del hero seguía invisible hasta que bajaba y corría main.js: en celular
   eso retrasaba ~5 s el LCP (auditoría del 24-sep-2026). */
.hero-content,.hero-side,.hero.hero-split .hero-panel-in{animation:tc-hero-in 0.7s cubic-bezier(0.22,0.61,0.36,1) both}
.hero-side{animation-delay:0.16s}
@keyframes tc-hero-in{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .hero-content,.hero-side,.hero.hero-split .hero-panel-in{animation:none}
}

/* Fotos de fondo diferidas (auditoría del 24-sep-2026): la regla que las retiene NO vive aquí sino
   en un <style> del <head> de cada página, junto a la clase .js-bg. Chrome calcula estilos antes de
   que llegue esta hoja y, con la regla aquí, pedía las fotos de todos modos. Ver js/main.js. */

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1180px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-item{border-right:0;border-bottom:1px solid var(--c-line)}
  .svc-item:nth-child(2n){border-right:0}
  .svc-item:nth-child(odd){border-right:1px solid var(--c-line)}
  .cred-grid{grid-template-columns:repeat(3,1fr);min-height:auto}
  .cred-grid .cred-item-v4{min-height:220px}
  .mercado-card{flex-basis:calc((100% - 22px)/2)}
  .fleet-grid-v4{grid-template-columns:repeat(2,1fr)}
}
/* Movido aquí (2026-09-14): estaba DESPUÉS de los media queries y, con la misma especificidad, anulaba sus versiones móviles
   (Nosotros desbordaba 28 px en teléfono; la rejilla de procesos de Servicios se quedaba en 4 columnas). */
/* =====================================================
   GRIDS RESPONSIVOS (antes inline en HTML)
   ===================================================== */
.proc-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.split-2col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ema-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:center;background:var(--c-sand-soft);border:1px solid var(--c-line);border-left:5px solid var(--c-red);padding:48px}

@media (max-width: 960px){
  :root{--gutter:24px}
  .site-nav,.site-cta{display:none}
  .hamburger{display:flex}
  .site-header>.container{height:96px}
  .site-logo-img{height:82px}
  .hero,.hero.hero-inner{min-height:auto;padding:130px 0 0}
  .hero.hero-inner{display:block}
  .legal-page{padding:150px 0 70px}
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-bottom:80px}
  .hero-photo{min-height:340px}
  .hero.hero-split{padding:97px 0 0}
  .section{padding:90px 0}
  .about-split{grid-template-columns:1fr}
  .about-split .col{padding:80px 32px}
  .svc-grid{grid-template-columns:1fr}
  .svc-item{border-right:0 !important}
  .svc-block-head{grid-template-columns:1fr;gap:20px;margin-bottom:40px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .why-grid{grid-template-columns:1fr;gap:32px}
  .why-sticky{position:static}
  .fleet-head{flex-direction:column;align-items:flex-start}
  .coverage-preview-grid{grid-template-columns:1fr}
  .coverage-preview-grid .map{min-height:400px}
  .coverage-preview-grid .text{padding:72px 24px}
  .cred-grid{grid-template-columns:1fr 1fr;min-height:auto}
  .cred-grid .cred-item-v4:last-child{grid-column:1/-1}
  .cred-grid .cred-item-v4{min-height:200px}
  .cta-block-v4-grid{grid-template-columns:1fr;gap:26px}
  .cta-block-v4{padding:190px 0 56px}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  /* Inner pages */
  .page-hero-a,.page-hero-b{grid-template-columns:1fr;min-height:auto}
  .page-hero-a .v-stripe,.page-hero-b .v-stripe{min-height:60px;padding:18px 0}
  .page-hero-a .vert-label,.page-hero-b .vert-label{writing-mode:horizontal-tb;transform:none}
  .page-hero-a .body,.page-hero-b .body{padding:60px 28px}
  .page-hero-a .photo-col{min-height:240px}
  .page-hero-b .ico-wm{display:none}
  .pillar-grid,.diff-grid-4,.fleet-grid-v4,.corredor-grid{grid-template-columns:1fr}
  .mercado-card{flex-basis:100%}
  .svc-block{grid-template-columns:1fr;gap:32px;padding:48px 0}
  .svc-block.reverse{direction:ltr;grid-template-columns:1fr}
  .proc-grid-4{grid-template-columns:1fr 1fr}
  .split-2col{grid-template-columns:1fr;gap:32px}
  .energia-bloque{grid-template-columns:1fr;gap:24px}
  .energia-tags span{white-space:normal}
  .ema-grid{grid-template-columns:1fr;gap:28px;padding:32px 24px}
  .svc-carousel-btn{width:44px;height:44px}
  .svc-block .visual,.svc-block .svc-carousel{height:300px;order:-1}
  .hero-stats-grid{grid-template-columns:repeat(2,1fr)}
  .hero-stat{padding:18px 20px}
  .hero-stat:nth-child(5){grid-column:1/-1}
  .hero-feature{padding:12px 18px 12px 0;margin-right:18px}
  .stats-grid.cols-5{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .inner-cta-grid{grid-template-columns:1fr;gap:24px}
  .inner-cta,.cta-block-v4{aspect-ratio:auto;padding:170px 0 52px}
  .inner-section{padding:60px 0}
  .ribbon{padding:100px 0}
  .ribbon-quote .mark{font-size:100px}
}
@media (max-width: 560px){
  .cf-grid{grid-template-columns:1fr}
  .proc-grid-4{grid-template-columns:1fr}
  .hero-stat-card{position:static;margin-top:20px;max-width:none}
  .stats-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .metric-row{flex-direction:column;gap:10px}
  .metric-row .big{min-width:auto}
}


/* =====================================================
   PÁGINAS LEGALES (aviso / términos como página propia)
   ===================================================== */
.legal-page{background:var(--c-sand-soft);padding:196px 0 90px;min-height:70vh}
.legal-page .aviso-modal{position:static;margin:0 auto;animation:none;box-shadow:0 20px 60px rgba(0,0,0,0.08)}

/* ── R6: Nosotros + Seguridad ── */
/* Cómo Trabajamos: foto casi invisible detrás de las pillar-cards.
   Velo al color de fondo real de cada variante (blanca y ladrillo). */
.pillar-card[data-img]{position:relative;background-size:cover;background-position:center;overflow:hidden}
.pillar-card[data-img]::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.93)}
.pillar-card.red[data-img]::after{background:rgba(var(--c-red-rgb),0.94)}
.pillar-card[data-img] > *{position:relative;z-index:1}

/* Seguridad · Diferenciadores Clave: franja de 4 columnas pegadas con foto,
   aire arriba y contenido anclado abajo (patrón de .cred-strip-v4 de Inicio). */
.dif-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;min-height:460px;border:1px solid var(--c-line)}
.dif-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 26px;background-size:cover;background-position:center;overflow:hidden}
.dif-col::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(var(--c-black-rgb),0) 0%, rgba(var(--c-black-rgb),0.2) 48%, rgba(var(--c-black-rgb),0.92) 100%);transition:var(--t)}
.dif-col:hover::before{background:linear-gradient(180deg, rgba(var(--c-red-rgb),0.12) 0%, rgba(var(--c-red-rgb),0.85) 100%)}
.dif-col > *{position:relative;z-index:1}
.dif-col .icn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--c-red);color:#fff;margin-bottom:14px}
.dif-col .icn svg{width:20px;height:20px}
.dif-col h3{font-family:var(--f-head);font-weight:800;font-size:15px;line-height:1.3;letter-spacing:0.01em;margin-bottom:8px;color:#fff;text-transform:uppercase}
.dif-col p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,0.85);margin:0}

/* Nosotros · Filosofía Operativa: eyebrow claro + pilares con separadores. */
.tagline-block.filosofia{padding:72px 0}
.tagline-block.filosofia .eyebrow.light::before{background:rgba(255,255,255,0.5)}
.filosofia-pilares{display:flex;justify-content:center;gap:0;margin-top:30px;padding-top:26px;position:relative}
.filosofia-pilares::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:140px;height:1px;background:rgba(255,255,255,0.25)}
.filosofia-pilares span{font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.85);padding:0 24px}
.filosofia-pilares span+span{border-left:1px solid rgba(255,255,255,0.3)}

/* Responsive R6 */
@media (max-width: 1180px){
  .dif-strip{grid-template-columns:repeat(2,1fr);min-height:0}
  .dif-col{min-height:380px}
}
@media (max-width: 640px){
  .dif-strip{grid-template-columns:1fr}
  .dif-col{min-height:300px}
  .filosofia-pilares{flex-direction:column;align-items:center}
  .filosofia-pilares span{padding:12px 0}
  .filosofia-pilares span+span{border-left:0;border-top:1px solid rgba(255,255,255,0.3)}
}
#cotizar{scroll-margin-top:129px}

/* ══ Optimización para celular (2026-09-15, tras QA móvil con números) ══ */
@media (max-width: 960px){
  /* CTA del pie: en móvil el texto se apila y mide 250–500 px, así que el velo se ancla desde ARRIBA:
     la foto queda limpia en los primeros 70 px y el texto (que arranca a 160 px) cae siempre sobre ≥0.85 */
  .inner-cta,.cta-block-v4{
    padding:160px 0 52px;
    background-image:
      linear-gradient(180deg, rgba(var(--c-black-rgb),0) 0, rgba(var(--c-black-rgb),0) 70px, rgba(var(--c-black-rgb),0.85) 150px, rgba(var(--c-black-rgb),0.94) 230px, rgba(var(--c-black-rgb),0.96) 100%),
      var(--cta-img, none);
  }
  /* Formulario: 16 px evita el zoom automático de iOS al enfocar; 44 px de alto táctil */
  .cf-input,.cf-select,.cf-textarea{font-size:16px;min-height:44px}
  .cf-group label{font-size:12px}
  .contact-person .row a{display:inline-flex;align-items:center;min-height:44px}
  /* Objetivos táctiles ≥44 px en pie y tarjetas */
  .footer-v4 .col a{display:inline-block;padding:11px 0}
  .footer-v4 .brand .social a{width:44px;height:44px}
  .footer-v4 .contact-col .row .txt a{display:inline-block;padding:12px 0}
  .footer-v4 .mini-links a{display:inline-block;padding:11px 0}
  .fleet-card-v4 .view-link{min-height:44px;align-items:center}
  .bcrumb a{display:inline-block;padding:8px 0}
  /* Menú móvil: que se pueda desplazar en pantallas bajas (apaisado, 640 px) */
  .mobile-menu{overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Hero de Inicio: la columna vacía de la foto dejaba 340 px muertos entre los botones y los números */
  .hero .hero-side{display:none}
  .hero-features{max-width:none}
  .hero-feature{width:100%;border-right:0;margin-right:0;padding:12px 0;border-bottom:1px solid var(--c-line-white)}
  .hero-feature:last-child{border-bottom:0}
  /* Textos funcionales de 9 px → 10–11 px */
  .svc-carousel .label,.fleet-card-page .tag{font-size:10px}
  .contact-meta .row .txt small{font-size:11px}
  /* Anclas bajo el header móvil de 97 px */
  section[id],#cotizar{scroll-margin-top:110px}
}
@media (max-width: 400px){
  .hero.hero-split h1{font-size:26px}
}

/* Formulario de cotización: trampa anti-spam y aviso de resultado (2026-09-17) */
.cf-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-aviso{grid-column:1/-1;margin:14px 0 0;padding:14px 16px;font-size:14.5px;line-height:1.55;border-left:4px solid}
.cf-aviso.ok{background:rgba(30,58,95,0.06);border-color:#1E3A5F;color:#1E3A5F}
.cf-aviso.error{background:rgba(var(--c-red-rgb),0.07);border-color:var(--c-red);color:var(--c-red-deep)}

/* Mapa de cobertura con Google Maps (2026-09-20). El contenedor ya trae altura
   por .coverage-preview-grid .map; el lienzo solo tiene que llenarlo. */
.mapa-cobertura-lienzo{position:absolute;inset:0;width:100%;height:100%;min-height:480px}
@media (max-width:960px){ .mapa-cobertura-lienzo{min-height:400px} }