/* ============================================================
   MTC — Transportes Especializados
   Hoja de estilos principal

   Sistema de diseño tomado de palletizedtrucking.com, con la marca de MTC:

     Tipografía   Oswald para titulares (700, sin versalitas) + Inter para texto.
                  Es la misma pareja de la referencia.
     Fondos       Tinta #0E1B36 — misma familia de tono que el marino del
                  logotipo, pero lo bastante oscuro para foto y texto encima.
     Acento       Amarillo #FCC206, el del rombo del logotipo. Ocupa el papel
                  que en la referencia tiene el #F5C400.
     Blanco       Las secciones claras son blanco puro o #F5F5F5.

   Geometría de la referencia: tarjetas de 12 px de radio, botones de 4 px,
   iconos en cuadro amarillo de 8 px, elevación al pasar el cursor.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap");

/* ---------- 1. Tokens ---------- */
:root{
  /* Tinta — fondos oscuros */
  --tinta:#0E1B36;         /* encabezado, hero, tarjetas grandes */
  --tinta-2:#0A1428;       /* tira de datos y pie */
  --marino:#163470;        /* marino de marca */

  /* Acento */
  --amarillo:#FCC206;
  --amarillo-osc:#E3AE00;  /* hover */
  --amarillo-txt:#8A6200;  /* texto amarillo sobre blanco — 5.5:1 */

  /* Rojo — el mismo `#C8102E` que la referencia lleva como color secundario.
     Tiene UN SOLO papel: filete que cierra una banda oscura. No se usa para
     texto, ni para botones, ni para iconos. Si el rojo apareciera además como
     color de acción competiría con el ámbar y los dos perderían fuerza. */
  --rojo:#C8102E;

  /* Neutros */
  --blanco:#FFFFFF;
  --gris-050:#F5F5F5;      /* fondo de sección */
  --gris-200:#E5E7EB;      /* bordes */
  --gris-500:#6B7280;      /* texto secundario claro */
  --gris-600:#4B5563;      /* texto de párrafo */
  --gris-900:#111827;

  --f-tit:"Oswald","Bahnschrift","DIN Alternate","Arial Narrow",system-ui,sans-serif;
  --f-txt:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --ancho:1280px;
  --gutter:clamp(16px,3vw,32px);
  --radio:4px;             /* botones */
  --radio-tarjeta:12px;
  --radio-icono:8px;
  --alto-enc:80px;

  --sombra-md:0 1px 3px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.1);
  --sombra-xl:0 1px 3px rgba(0,0,0,.1), 0 8px 10px -1px rgba(0,0,0,.1);
  --sombra-2xl:0 10px 15px -3px rgba(0,0,0,.14), 0 25px 50px -12px rgba(0,0,0,.28);
  /* Misma geometría a opacidad 0: `box-shadow` no se anima desde `none`. */
  --sombra-nula:0 1px 3px rgba(0,0,0,0), 0 8px 10px -1px rgba(0,0,0,0);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
/* `overflow-x:clip` es una RED DE SEGURIDAD, no el arreglo. Las causas reales
   del desbordamiento horizontal están corregidas una por una (ver el README);
   esto sólo garantiza que ningún contenido futuro pueda sacar la barra lateral.
   Se usa `clip` y NO `hidden` a propósito: `hidden` crea un contenedor de
   desplazamiento y rompería el `position:sticky` del encabezado. `clip` no. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip;}
body{
  margin:0; background:var(--blanco); color:var(--gris-600);
  font-family:var(--f-txt); font-size:16px; line-height:1.625;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto;}
a{color:var(--marino); text-decoration:none; transition:color .2s ease, background-color .2s ease, gap .2s ease;}
a:hover{color:var(--tinta);}
:focus-visible{outline:3px solid var(--amarillo); outline-offset:2px;}
h1,h2,h3,h4{
  font-family:var(--f-tit); font-weight:700; color:var(--tinta);
  line-height:1.15; margin:0; text-wrap:balance;
}
p{margin:0;}
ul{margin:0;}

[id]{scroll-margin-top:calc(var(--alto-enc) + 16px);}

.contenedor{max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter);}
.seccion{padding-block:clamp(64px,8vw,112px);}
.seccion--gris{background:var(--gris-050);}
.seccion--tinta{background:var(--tinta); color:rgba(255,255,255,.65);}
.seccion--tinta h2,.seccion--tinta h3,.seccion--tinta h4{color:#fff;}

.salta{position:absolute; left:-9999px; top:0; background:var(--amarillo); color:var(--tinta); padding:12px 20px; z-index:300; font-weight:700;}
.salta:focus{left:8px; top:8px;}

/* ---------- 3. Aparición al hacer scroll ---------- */
html.js .revelar{
  opacity:0; transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .5s cubic-bezier(.22,.61,.36,1),
             box-shadow .3s ease, border-color .3s ease;
}
html.js .revelar.visible{opacity:1; transform:none;}
html.js .revelar.d1{transition-delay:.08s;}
html.js .revelar.d2{transition-delay:.16s;}
html.js .revelar.d3{transition-delay:.24s;}

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

/* ---------- 4. Titulares y texto ---------- */
/* La referencia no pone versalitas en los titulares: Oswald ya es condensada. */
.titulo{font-size:clamp(28px,3.6vw,48px); line-height:1.1;}
.titulo--chico{font-size:clamp(24px,2.6vw,36px);}
.entrada{margin-top:20px; color:var(--gris-600); font-size:clamp(16px,1.4vw,18px); max-width:60ch;}
.seccion--tinta .entrada{color:rgba(255,255,255,.65);}
.centrado{text-align:center;}
.centrado .entrada,.centrado .titulo{margin-inline:auto;}

/* Rótulo amarillo sobre la sección */
.rotulo{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amarillo-txt); margin-bottom:14px;
}
.seccion--tinta .rotulo,.rotulo--claro{color:var(--amarillo);}

/* Enlace «conocer más» con flecha que se separa al pasar el cursor */
.mas{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--amarillo-txt);
}
.mas svg{width:16px; height:16px;}
.mas:hover{gap:12px; color:var(--amarillo-txt);}
.mas--claro{color:var(--amarillo);}
.mas--claro:hover{color:var(--amarillo);}

/* ---------- 5. Botones ---------- */
/* Los botones van en versalitas, igual que el menú. Con mayúsculas el cuerpo
   baja de 16 a 15 px: si no, crecen de ancho y en la barra del encabezado los
   dos botones no caben junto al menú antes de que entre la hamburguesa. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-txt); font-size:15px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  padding:16px 30px; border-radius:var(--radio); border:2px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease, transform .1s ease;
}
.btn svg{width:18px; height:18px;}
.btn:active{transform:scale(.97);}
/* El color se repite en :hover a propósito: si no, la regla general `a:hover`
   gana por especificidad y deja el texto del mismo tono que su fondo. */
.btn--amarillo{background:var(--amarillo); color:#000;}
.btn--amarillo:hover{filter:brightness(1.1); color:#000;}
.btn--contorno{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
.btn--contorno:hover{border-color:rgba(255,255,255,.8); background:rgba(255,255,255,.1); color:#fff;}
.btn--tinta{background:var(--tinta); color:#fff;}
.btn--tinta:hover{background:var(--marino); color:#fff;}
.btn--linea{background:transparent; color:var(--tinta); border-color:var(--gris-200);}
.btn--linea:hover{border-color:var(--tinta); background:var(--gris-050); color:var(--tinta);}
.btn--chico{padding:10px 16px; font-size:12.5px; letter-spacing:.06em;}
/* En pantallas muy angostas el `nowrap` de arriba hacía que rótulos largos como
   «LLAMAR AL (81) 8385 1456» ensancharan la página. Por debajo de 480 px el
   botón puede partir el texto en dos líneas antes que desbordar. */
@media (max-width:479px){
  .btn{white-space:normal; text-align:center; max-width:100%; padding-inline:22px;}
}

/* ---------- 6. Barra superior ---------- */
/* En la referencia es una franja de 32 px alineada a la derecha, con el teléfono
   y un distintivo. Desaparece en móvil. */
.barra-mini{background:var(--tinta); border-bottom:1px solid rgba(255,255,255,.1);}
.barra-mini .contenedor{
  display:flex; justify-content:flex-end; align-items:center; gap:24px;
  height:32px; font-size:12px; color:rgba(255,255,255,.6);
}
.barra-mini a{display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.6);}
.barra-mini a:hover{color:var(--amarillo);}
.barra-mini svg{width:11px; height:11px;}
.barra-mini .div{color:rgba(255,255,255,.2);}
@media (max-width:767px){ .barra-mini{display:none;} }

/* ---------- 7. Encabezado ---------- */
/* Mismo filete rojo al pie de la barra: cierra el encabezado igual que cierra el
   pie, y de paso separa la barra de la fotografía de la portada. */
.encabezado{position:sticky; top:0; z-index:50; background:var(--tinta); border-bottom:2px solid var(--rojo);}
.encabezado > .contenedor{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--alto-enc);
}
.marca{flex-shrink:0; display:flex; align-items:center;}
.marca img{height:52px; width:auto; object-fit:contain;}
@media (max-width:600px){ .marca img{height:40px;} }

.nav-principal{flex:1; display:flex; justify-content:center;}
.menu{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0;}
.menu > li{position:relative;}
/* Menú en versalitas. Con mayúsculas hace falta bajar el cuerpo, subir el peso
   y abrir el espaciado, o las palabras se apelmazan y la barra se desborda. */
.menu > li > a,
.menu > li > .abre{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--f-txt); font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em;
  color:rgba(255,255,255,.8); padding:8px 13px; border-radius:var(--radio);
  background:none; border:0; cursor:pointer;
  transition:color .2s ease, background-color .2s ease;
}
.menu > li > a:hover,.menu > li > .abre:hover{color:#fff; background:rgba(255,255,255,.06);}
/* Página actual: en la referencia se marca en amarillo y negrita, sin subrayado. */
.menu > li > a[aria-current="page"]{color:var(--amarillo); font-weight:700;}
.menu .flecha{width:14px; height:14px; transition:transform .2s ease;}
.tiene-hijos.abierto .flecha{transform:rotate(180deg);}

/* Acciones a la derecha */
.acciones-enc{display:flex; align-items:center; gap:12px; flex-shrink:0;}
@media (max-width:1179px){ .nav-principal,.acciones-enc{display:none;} }

/* Submenú */
.submenu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:280px;
  list-style:none; margin:0; padding:8px;
  background:#fff; border:1px solid var(--gris-200);
  border-radius:var(--radio-tarjeta); box-shadow:var(--sombra-2xl);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:10;
}
.tiene-hijos:hover > .submenu,
.tiene-hijos:focus-within > .submenu,
.tiene-hijos.abierto > .submenu{opacity:1; visibility:visible; transform:none;}
/* Puente invisible: sin él, al bajar el cursor se pierde el :hover un instante
   y el panel parpadea a medio camino. */
.tiene-hijos > .submenu::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px;}
.submenu a{
  display:block; padding:10px 14px; border-radius:var(--radio);
  font-size:14px; font-weight:600; color:var(--tinta);
}
.submenu a:hover{background:var(--gris-050); color:var(--marino);}
.submenu .desc{display:block; font-size:12px; font-weight:400; color:var(--gris-500); margin-top:2px;}
.submenu a[data-ac="peligro"]:hover{background:#FFF8E1; color:var(--amarillo-txt);}

/* Hamburguesa */
.hamburguesa{
  display:none; width:40px; height:40px; padding:9px;
  flex-direction:column; justify-content:center; gap:5px;
  background:none; border:0; cursor:pointer;
}
.hamburguesa span{display:block; height:2px; background:rgba(255,255,255,.8); border-radius:2px; transition:transform .22s ease, opacity .22s ease;}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:1179px){ .hamburguesa{display:flex;} }

/* Panel móvil */
.panel{
  display:none; background:var(--tinta); border-top:1px solid rgba(255,255,255,.1);
  max-height:0; overflow:hidden; transition:max-height .34s cubic-bezier(.4,0,.2,1);
}
@media (max-width:1179px){ .panel{display:block;} }
.encabezado.abierta .panel{max-height:80vh; overflow-y:auto;}
.panel ul{list-style:none; margin:0; padding:0;}
.panel > .contenedor{padding-block:12px 20px;}
.panel a{display:block; padding:12px 0; font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.08);}
.panel a:hover{color:var(--amarillo);}
.panel a[aria-current="page"]{color:var(--amarillo);}
.panel .sub{padding-left:16px; border-left:2px solid rgba(255,255,255,.15); margin:4px 0 8px;}
/* Los enlaces del submenú se quedan en caja baja: la versalita es sólo para el
   nivel principal, si no el panel se convierte en un bloque de mayúsculas. */
.panel .sub a{font-size:14px; font-weight:400; text-transform:none; letter-spacing:0; color:rgba(255,255,255,.6); border-bottom:0; padding:8px 0;}
/* Los dos botones necesitan aire entre ellos: apilados y con el mismo ancho se
   leían como un solo bloque partido. También se separan de la última opción del
   menú, que es un enlace de texto y no debe confundirse con ellos. */
.panel .acciones{display:flex; flex-direction:column; gap:14px; margin-top:28px;}
.panel .acciones .btn{width:100%;}

/* ---------- 8. Hero ----------
   A sangre como en la referencia: foto al 100 %, degradado diagonal de 105°
   que va de .88 a .45, y el texto en una columna estrecha a la izquierda. */
/* La referencia lleva una foto apaisada de 1920×1080 y la puede dejar casi
   limpia a todo lo ancho. Las de MTC son VERTICALES de 533 px: estiradas a 1440
   se amplían 2.7× y dejan de ser una escena para volverse textura —que es
   exactamente como se veía—.

   La solución no es bajarle la opacidad, es usarlas a su tamaño. La foto ocupa
   una columna de ~520 px, donde se amplía apenas 1.16× y se ve nítida y entera,
   y sangra hasta el borde derecho. El resto de la banda es tinta con el rombo de
   la marca al fondo. Se conserva todo lo demás de la referencia: banda oscura,
   titular Oswald enorme a la izquierda, párrafo y dos botones. */
/* La portada va a sangre, como en la referencia: la fotografía cubre todo el
   ancho y el texto se lee encima, a la izquierda.

   La foto NO es una de las cinco originales: es `hero-inicio.jpg`, compuesta a
   1920×760 a partir de `operador.webp` (ver el README). Trae el degradado ya
   incorporado, de manera que el lado del texto es prácticamente azul sólido y
   el operador queda nítido a la derecha. Por eso aquí no hace falta un velo
   denso: el de abajo sólo asegura el contraste en anchos extremos. */
.heroe{position:relative; overflow:hidden; background:var(--tinta); display:flex; align-items:center; min-height:640px;}
.heroe__foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center;}
/* Velo UNIFORME, casi negro y bastante transparente: cubre toda la fotografía
   por igual en vez de oscurecer sólo el lado del texto. El titular es Oswald 700
   a 72 px, así que con este nivel el contraste sobre la parte más clara de la
   imagen —el costado del remolque— queda en torno a 5:1. */
.heroe__velo{position:absolute; inset:0; background:rgba(6,11,22,.68);}
.heroe__rejilla{
  position:relative; z-index:1; width:100%;
  max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter);
}
.heroe__texto{padding-block:clamp(72px,9vw,110px); max-width:34rem;}
@media (max-width:900px){
  .heroe{min-height:0;}
  .heroe__foto{object-position:center center;}
  /* En vertical el texto ocupa casi todo el ancho, así que el velo sube un poco. */
  .heroe__velo{background:rgba(6,11,22,.62);}
  .heroe__texto{padding-block:clamp(48px,8vw,72px); max-width:none;}
}
/* Con el velo uniforme y transparente, parte del texto cae sobre el costado
   blanco del remolque. La sombra suave —no un recuadro— es lo que mantiene la
   legibilidad sin volver a oscurecer la fotografía. */
.heroe h1{
  font-size:clamp(38px,6vw,72px); color:#fff; line-height:1.08; margin-bottom:24px;
  text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
.heroe h1 em{font-style:normal; color:var(--amarillo);}
.heroe p{
  font-size:clamp(17px,1.7vw,20px); color:rgba(255,255,255,.94); line-height:1.65;
  max-width:42rem; margin-bottom:40px;
  text-shadow:0 1px 14px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.5);
}
.heroe__acciones{display:flex; flex-wrap:wrap; gap:16px;}
/* Filete que insinúa que hay más abajo, como en la referencia. */
.heroe__hilo{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  width:1px; height:48px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.3));
}
@media (max-width:640px){ .heroe{min-height:0; padding-block:24px;} }

/* Cabecera de página interior ----------
   AZUL SÓLIDO, sin fotografía detrás del texto. Se probó con la foto al 20 % —
   como hace la referencia— y con estas imágenes el titular quedaba compitiendo
   contra la silueta de una cara: costaba leerlo. Aquí el contraste es siempre
   el mismo, en todas las páginas, y el acento lo pone el rombo de la marca. */
.cabecera{position:relative; overflow:hidden; background:var(--tinta); display:block; min-height:0; text-align:center;}
.cabecera .heroe__cuerpo{position:relative; z-index:1; padding-block:clamp(64px,9vw,120px); width:100%;}
/* Dos rombos en filete, uno a cada lado, como marca de agua. */
.cabecera::before,
.cabecera::after{
  content:""; position:absolute; z-index:0; width:380px; height:380px;
  transform:rotate(45deg); border:2px solid rgba(252,194,6,.10);
}
.cabecera::before{left:-150px; top:-120px;}
.cabecera::after{right:-150px; bottom:-140px; border-color:rgba(255,255,255,.06);}
.cabecera h1{font-size:clamp(32px,4.6vw,56px); color:#fff; margin-bottom:16px;}
.cabecera p{font-size:clamp(16px,1.5vw,18px); color:rgba(255,255,255,.7); max-width:42rem; margin:0 auto;}
.miga{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:16px;}
.miga a{color:var(--amarillo);}
.miga a:hover{color:#fff;}

/* Epígrafe: filete – texto – filete. Abre las secciones centradas. */
.epigrafe{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px;}
.epigrafe::before,.epigrafe::after{content:""; width:24px; height:2px; background:var(--amarillo); flex:none;}
.epigrafe span{font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--amarillo-txt);}
.cabecera .epigrafe span,.seccion--tinta .epigrafe span{color:var(--amarillo);}

/* ---------- 9. Tira de datos ----------
   Cuatro celdas separadas por filete, con el dato en Oswald y la glosa debajo. */
.tira{background:var(--tinta-2);}
.tira__rejilla{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding-block:20px;}
.tira__dato{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:12px 16px; border-left:1px solid rgba(255,255,255,.1);
}
.tira__dato:first-child{border-left:0;}
.tira__dato b{font-family:var(--f-tit); font-weight:700; font-size:clamp(18px,1.9vw,24px); color:#fff; line-height:1;}
/* Cadenas sin espacios —correos, sobre todo— que no pueden ensanchar su celda.
   Sin esto, `servicio@mtctransportes.com` en la tira de Contacto empujaba la
   página entera y aparecía la barra horizontal en el teléfono. */
.tira__dato b,.tira__dato span,.pie__dir,.dato p,.dato address{overflow-wrap:anywhere;}
.tira__dato span{font-size:12px; color:rgba(255,255,255,.5); margin-top:6px; line-height:1.45;}
.tira__dato a{color:rgba(255,255,255,.5);}
.tira__dato a:hover{color:var(--amarillo);}
@media (max-width:768px){
  .tira__rejilla{grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 0;}
  .tira__dato:nth-child(odd){border-left:0;}
}

/* ---------- 10. Mosaico de servicios ----------
   La referencia mezcla dos tarjetas grandes oscuras con una columna de tarjetas
   blancas más chicas. La jerarquía la da el tamaño y el fondo, no el color del
   texto: todas las tarjetas llevan el mismo icono amarillo. */
.mosaico{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:48px;}
@media (max-width:1024px){ .mosaico{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .mosaico{grid-template-columns:1fr;} }
.mosaico__col{display:flex; flex-direction:column; gap:16px;}
.mosaico__col > *{flex:1;}

.tarjeta{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  background:#fff; border:1px solid var(--gris-200); border-radius:var(--radio-tarjeta);
  padding:24px; overflow:hidden; box-shadow:var(--sombra-nula);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tarjeta:hover{transform:translateY(-4px); box-shadow:var(--sombra-xl);}
.tarjeta h3{font-size:19px; margin-bottom:8px;}
.tarjeta p{font-size:14px; color:var(--gris-500); line-height:1.6;}
.tarjeta .mas{margin-top:16px;}

/* Variante grande y oscura */
.tarjeta--grande{
  background:var(--tinta); border-color:transparent; padding:32px; min-height:260px;
}
.tarjeta--grande:hover{box-shadow:var(--sombra-2xl);}
.tarjeta--grande h3{font-size:22px; color:#fff; margin-bottom:12px;}
.tarjeta--grande p{font-size:15px; color:rgba(255,255,255,.6);}
.tarjeta--grande .mas{color:var(--amarillo); margin-top:24px;}
/* Lavado amarillo al pasar el cursor, igual que en la referencia. */
.tarjeta--grande::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(252,194,6,.14) 0%, transparent 60%);
  transition:opacity .3s ease;
}
.tarjeta--grande:hover::before{opacity:1;}
.tarjeta--grande > *{position:relative;}

/* Icono en cuadro amarillo */
.icono{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; border-radius:var(--radio-icono);
  background:var(--amarillo); color:#000; margin-bottom:16px;
}
.icono svg{width:24px; height:24px;}
.tarjeta--grande .icono{width:48px; height:48px; margin-bottom:20px;}
.tarjeta--grande .icono svg{width:28px; height:28px;}

/* Lista dentro de tarjeta */
.tarjeta ul{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:6px;}
.tarjeta li{font-size:14px; color:var(--gris-500); display:flex; gap:10px; align-items:baseline;}
.tarjeta li::before{content:""; width:6px; height:6px; flex:none; background:var(--amarillo); transform:rotate(45deg);}
.tarjeta--grande li{color:rgba(255,255,255,.6);}

/* Capacidad y ficha técnica dentro de una tarjeta de unidad */
.cap{
  display:block; font-family:var(--f-tit); font-weight:700;
  font-size:clamp(28px,3vw,38px); line-height:1; color:var(--tinta);
}
.cap small{display:block; font-family:var(--f-txt); font-size:12px; font-weight:400; color:var(--gris-500); margin-top:8px;}
.tarjeta--grande .cap{color:var(--amarillo);}
.tarjeta--grande .cap small{color:rgba(255,255,255,.5);}
.ficha-tec{margin:18px 0 0; padding-top:14px; border-top:1px solid var(--gris-200); display:flex; flex-direction:column; gap:8px;}
.ficha-tec > div{display:flex; justify-content:space-between; gap:12px; font-size:13px;}
.ficha-tec dt{color:var(--gris-500);}
.ficha-tec dd{margin:0; color:var(--tinta); font-weight:600; text-align:right;}
.tarjeta--grande .ficha-tec{border-top-color:rgba(255,255,255,.15);}
.tarjeta--grande .ficha-tec dt{color:rgba(255,255,255,.5);}
.tarjeta--grande .ficha-tec dd{color:#fff;}

/* ---------- 10b. Fila de equipo ----------
   El molde de la página de flota de la referencia: una tarjeta ancha con dos
   columnas que se alternan de lado en lado. A la izquierda el icono en cuadro
   amarillo pálido, el nombre, la descripción y una rejilla de dos columnas con
   las características palomeadas; a la derecha la fotografía. */
.filas-equipo{display:flex; flex-direction:column; gap:32px; margin-top:56px;}
.fila-equipo{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px); align-items:center;
  background:#fff; border:1px solid var(--gris-200); border-radius:16px;
  padding:clamp(24px,3vw,32px); box-shadow:var(--sombra-md);
}
.fila-equipo--inv .fila-equipo__texto{order:2;}
@media (max-width:900px){
  .fila-equipo{grid-template-columns:1fr;}
  .fila-equipo--inv .fila-equipo__texto{order:0;}
}
.fila-equipo__cab{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.fila-equipo__cab h3{font-size:22px;}
/* Cuadro amarillo pálido, no saturado: en la referencia el icono de la ficha de
   equipo es más suave que el de las tarjetas de servicio. */
.icono--suave{background:#FEF3C7; color:var(--tinta); margin-bottom:0;}
.fila-equipo p{color:var(--gris-600); font-size:15.5px; line-height:1.65;}
.fila-equipo__foto{
  border-radius:12px; overflow:hidden; background:var(--gris-050);
  aspect-ratio:4/3; position:relative;
}
.fila-equipo__foto img{width:100%; height:100%; object-fit:cover;}

/* Panel sin fotografía. La referencia resuelve así todo su equipo: recuadro
   neutro con el icono y el nombre. Aquí lleva además el rombo de la marca. */
.marco{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  height:100%; background:var(--gris-050);
  background-image:
    linear-gradient(135deg, rgba(252,194,6,.10) 0%, transparent 55%),
    repeating-linear-gradient(45deg, rgba(14,27,54,.035) 0 10px, transparent 10px 20px);
}
.marco__rombo{
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--amarillo); background:#fff; transform:rotate(45deg);
}
.marco__rombo svg{width:30px; height:30px; transform:rotate(-45deg); color:var(--tinta);}
.marco b{font-family:var(--f-tit); font-weight:700; font-size:16px; color:var(--tinta);}
.marco span{font-size:12px; color:var(--gris-500);}

/* Características palomeadas */
.especs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; margin-top:24px; list-style:none; padding:0;}
@media (max-width:520px){ .especs{grid-template-columns:1fr;} }
.especs li{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--gris-600);}
.especs svg{width:16px; height:16px; flex:none; color:var(--amarillo-txt);}

/* ---------- 10c. Bloque de dos columnas con foto ----------
   Las fotos de MTC son verticales, así que el panel es 4/5 y las usa casi a su
   tamaño en vez de recortarlas a una franja apaisada. */
.dos-col{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,72px); align-items:center;}
@media (max-width:900px){ .dos-col{grid-template-columns:1fr;} }
.dos-col__foto{border-radius:var(--radio-tarjeta); overflow:hidden; aspect-ratio:4/5; background:var(--gris-050);}
.dos-col__foto img{width:100%; height:100%; object-fit:cover;}
@media (max-width:900px){ .dos-col__foto{aspect-ratio:4/3;} }

/* ---------- 11. Rejilla simple de tarjetas ---------- */
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:16px; margin-top:48px;}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));}

/* ---------- 12. Carteles de material peligroso ----------
   Son señalética reglamentaria: van a color y a tamaño parejo. */
.clases{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr)); gap:16px; margin-top:48px;}
.clase{
  background:#fff; border:1px solid var(--gris-200); border-radius:var(--radio-tarjeta);
  padding:24px 18px; text-align:center; box-shadow:var(--sombra-nula);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.clase:hover{transform:translateY(-4px); box-shadow:var(--sombra-xl); border-color:var(--amarillo);}
.clase img{width:104px; height:104px; object-fit:contain; margin:0 auto 16px;}
.clase b{display:block; font-family:var(--f-tit); font-weight:700; font-size:20px; color:var(--tinta);}
.clase span{display:block; margin-top:6px; font-size:14px; color:var(--gris-500); line-height:1.5;}

/* ---------- 13. Banda partida ---------- */
.partido{display:grid; grid-template-columns:1fr 1fr; align-items:stretch;}
.partido__foto{position:relative; min-height:clamp(320px,38vw,540px); background:var(--gris-050);}
.partido__foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%;}
.partido__panel{
  padding:clamp(48px,6vw,96px) clamp(24px,4vw,72px);
  display:flex; flex-direction:column; justify-content:center;
}
.partido__panel p{margin-top:18px; color:var(--gris-600); max-width:46rem;}
.partido--tinta .partido__panel{background:var(--tinta); color:rgba(255,255,255,.65);}
.partido--tinta .partido__panel h2{color:#fff;}
.partido--tinta .partido__panel p{color:rgba(255,255,255,.65);}
.partido--gris .partido__panel{background:var(--gris-050);}
@media (max-width:900px){
  /* `.partido--inv` se declara después, así que con la misma especificidad
     ganaba y la banda seguía en dos columnas en el teléfono. */
  .partido,.partido--inv{grid-template-columns:1fr;}
  .partido--inv .partido__foto{order:-1;}
  .partido__foto{min-height:0; aspect-ratio:16/10;}
  .partido__foto img{position:static; height:100%;}
}
.cita{
  margin-top:26px; padding:20px 24px; border-left:4px solid var(--amarillo);
  background:var(--gris-050); font-size:17px; font-style:italic; color:var(--tinta); line-height:1.6;
}
.partido--tinta .cita,.seccion--tinta .cita{background:rgba(255,255,255,.05); color:#fff;}

/* ---------- 14. Testimonios ----------
   Un testimonio a la vez, centrado, con las cinco estrellas arriba y la comilla
   grande en amarillo translúcido. Los puntos cambian de testimonio. */
.testimonios{background:var(--tinta); padding-block:clamp(64px,8vw,112px);}
.carrusel{max-width:46rem; margin-inline:auto; text-align:center; position:relative;}
/* Sólo se oculta si el JS arrancó. Sin script se leen los cinco apilados en
   lugar de quedar la sección vacía. */
html.js .testimonio{display:none;}
html.js .testimonio.activo{display:block;}
.testimonio + .testimonio{margin-top:48px;}
html:not(.js) .carrusel__mando{display:none;}
.estrellas{display:flex; justify-content:center; gap:4px; margin-bottom:24px;}
.estrellas svg{width:18px; height:18px; fill:var(--amarillo); color:var(--amarillo);}
.comilla{font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:110px; line-height:.55; color:var(--amarillo); opacity:.35; margin-bottom:8px;}
.testimonio p{font-size:clamp(17px,1.8vw,20px); font-style:italic; color:rgba(255,255,255,.85); line-height:1.65; margin-bottom:32px;}
.testimonio cite{display:block; font-style:normal; font-family:var(--f-tit); font-weight:700; font-size:18px; color:#fff;}
.testimonio .de{display:block; font-family:var(--f-txt); font-size:14px; font-weight:400; color:rgba(255,255,255,.5); margin-top:2px;}
.carrusel__mando{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:40px;}
.carrusel__mando button{
  width:36px; height:36px; border-radius:50%; background:none;
  border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.carrusel__mando button:hover{color:#fff; border-color:rgba(255,255,255,.5);}
.carrusel__mando svg{width:16px; height:16px;}
.puntos{display:flex; gap:8px;}
.puntos button{
  width:8px; height:8px; border-radius:99px; border:0; padding:0;
  background:rgba(255,255,255,.3); cursor:pointer;
  transition:width .2s ease, background-color .2s ease;
}
.puntos button[aria-current="true"]{width:24px; background:var(--amarillo);}

/* ---------- 14b. Plazas y zonas ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin-top:40px;}
.chips li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-tit); font-weight:500; font-size:15px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  padding:9px 16px; border-radius:99px;
  transition:border-color .2s ease, background-color .2s ease;
}
.chips li::before{content:""; width:7px; height:7px; flex:none; background:var(--amarillo); transform:rotate(45deg);}
.chips li:hover{border-color:var(--amarillo); background:rgba(252,194,6,.08);}
/* Sobre fondo claro */
.chips--claro li{color:var(--tinta); background:#fff; border-color:var(--gris-200);}
.chips--claro li:hover{border-color:var(--amarillo); background:#FFFDF5;}

/* ---------- 14c. Mapa de la República con las plazas ----------
   La silueta es `mapa-rutas.svg`, el mapa que ya usaba MTC. Viene coloreado por
   estados en ámbar y marino, lo que competiría con los badges, así que se
   aplana a una sola forma blanca con `brightness(0) invert(1)` y se baja la
   opacidad: queda como marca de agua y los badges mandan.

   Las coordenadas de cada plaza salen de su latitud y longitud reales, llevadas
   al recuadro del mapa con un ajuste lineal calibrado sobre tres puntos
   (Tijuana, Chetumal y Salina Cruz). El error es de unos 12 px sobre 1200: se
   nota en la plaza, no en el estado. */
.mapa-mx{position:relative; margin-top:clamp(32px,4vw,56px); aspect-ratio:879 / 574;}
.mapa-mx__silueta{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.17;
}
.mapa-mx__pins{position:absolute; inset:0; list-style:none; margin:0; padding:0;}
.mapa-mx__pins li{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.mapa-mx__pins li::before{
  content:""; flex:none; width:9px; height:9px; background:var(--amarillo);
  transform:rotate(45deg); box-shadow:0 0 0 4px rgba(252,194,6,.16);
}
.mapa-mx__pins span{
  font-family:var(--f-tit); font-size:13px; font-weight:500; letter-spacing:.02em;
  color:#fff; background:rgba(10,20,40,.78); border:1px solid rgba(255,255,255,.16);
  padding:3px 9px; border-radius:99px;
}
/* La base de operaciones se distingue del resto de plazas. */
.mapa-mx__pins li.base::before{background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.22);}
.mapa-mx__pins li.base span{background:var(--amarillo); color:var(--tinta); border-color:transparent; font-weight:700;}
/* Los que quedan en el borde derecho se etiquetan hacia la izquierda. */
.mapa-mx__pins li.izq{flex-direction:row-reverse;}

/* En móvil el mapa SE QUEDA. Lo que no cabe son las etiquetas: veintiuna
   pastillas de texto en 390 px se encimarían hasta ser ilegibles. Así que por
   debajo de 900 px los pines se reducen a sus rombos —el mapa sigue enseñando
   la extensión de la cobertura, que es su trabajo— y la lista de plazas pasa a
   funcionar de leyenda justo debajo. */
.mapa-lista{display:none;}
@media (max-width:900px){
  .mapa-lista{display:flex; margin-top:24px;}
  .mapa-mx__pins span{display:none;}
  .mapa-mx__pins li::before{width:7px; height:7px; box-shadow:0 0 0 3px rgba(252,194,6,.20);}
  /* La base de operaciones conserva su etiqueta: es una sola y es la que ubica
     a la empresa en el mapa. */
  .mapa-mx__pins li.base span{display:block; font-size:11px; padding:2px 7px;}
  .mapa-mx__pins li.base::before{width:9px; height:9px;}
}
@media (min-width:901px){
  .mapa-lista{display:none;}
}

.zona{background:#fff; border:1px solid var(--gris-200); border-radius:var(--radio-tarjeta); padding:24px;}
.zona h3{font-size:20px; margin-bottom:14px;}
.zona ul{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.zona li{font-size:13px; color:var(--gris-500); background:var(--gris-050); border:1px solid var(--gris-200); padding:5px 11px; border-radius:99px;}

/* ---------- 15. Clientes ---------- */
.clientes{display:flex; flex-wrap:wrap; justify-content:center; gap:32px 40px; margin-top:48px;}
/* OJO: los diez logotipos son BLANCOS sobre transparente —así los sirve el sitio
   de MTC, que los muestra sobre banda oscura—. Sobre esta sección blanca eran
   literalmente invisibles. `invert(1)` los pasa a negro conservando el alfa, que
   es lo que necesita un muro de marcas sobre fondo claro. Si algún día llegan
   logotipos a color, hay que quitar este filtro. */
.clientes img{
  width:140px; height:60px; object-fit:contain;
  filter:invert(1); opacity:.5;
  transition:opacity .25s ease;
}
.clientes img:hover{opacity:.85;}

/* ---------- 16. Llamada a la acción ----------
   Fotografía a sangre con un velo plano —no degradado— y todo centrado. */
/* Tercer y último uso del rojo: abre la banda de llamada a la acción. */
.llamada{position:relative; overflow:hidden; padding-block:clamp(72px,9vw,96px); border-top:2px solid var(--rojo);}
.llamada img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.llamada__velo{position:absolute; inset:0; background:rgba(14,27,54,.9);}
.llamada .contenedor{position:relative; z-index:1; text-align:center;}
.llamada h2{font-size:clamp(28px,4vw,48px); color:#fff; margin-bottom:16px;}
.llamada p{font-size:18px; color:rgba(255,255,255,.65); max-width:36rem; margin:0 auto 40px;}
.llamada__acciones{display:flex; flex-wrap:wrap; gap:16px; justify-content:center;}

/* ---------- 17. Preguntas ---------- */
.faq{max-width:46rem; margin:48px auto 0;}
.faq details{background:#fff; border:1px solid var(--gris-200); border-radius:var(--radio-tarjeta); margin-bottom:12px;}
.faq details[open]{border-color:var(--amarillo);}
.faq summary{
  display:flex; align-items:flex-start; gap:16px; cursor:pointer; list-style:none;
  padding:20px 24px; font-size:16px; font-weight:600; color:var(--tinta); line-height:1.5;
}
.faq summary::-webkit-details-marker{display:none;}
/* Dos barras en vez de cambiar «+» por «−»: `content` no se anima, girar sí. */
.faq-icono{position:relative; flex:none; width:16px; height:16px; margin-top:.3em;}
.faq-icono::before,.faq-icono::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--gris-500); border-radius:1px;
  transition:transform .34s cubic-bezier(.34,1.3,.5,1), background-color .2s ease;
}
.faq-icono::before{width:16px; height:2px;}
.faq-icono::after{width:2px; height:16px;}
.faq details[open] .faq-icono::after{transform:rotate(90deg);}
.faq details[open] .faq-icono::before,
.faq details[open] .faq-icono::after{background:var(--amarillo-txt);}
.faq summary:hover{color:var(--marino);}
.faq p{padding:0 24px 22px 56px; font-size:15px; color:var(--gris-500); line-height:1.65;}
@supports (interpolate-size: allow-keywords){ :root{interpolate-size:allow-keywords;} }
@supports selector(::details-content) and (interpolate-size: allow-keywords){
  .faq details::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .34s cubic-bezier(.4,0,.2,1), content-visibility .34s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto;}
}

/* ---------- 18. Formulario ---------- */
.form-rejilla{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(32px,4vw,64px); margin-top:48px; align-items:start;}
@media (max-width:900px){ .form-rejilla{grid-template-columns:1fr;} }
.formulario{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px;}
@media (max-width:560px){ .formulario{grid-template-columns:1fr;} }
.campo{display:flex; flex-direction:column; gap:7px;}
.campo--ancho{grid-column:1 / -1;}
.campo label{font-size:13px; font-weight:600; color:var(--tinta);}
.campo label .req{color:var(--amarillo-txt);}
.campo input,.campo select,.campo textarea{
  font-family:inherit; font-size:15px; color:var(--gris-900);
  background:#fff; border:1px solid var(--gris-200); border-radius:var(--radio);
  padding:12px 14px; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.campo textarea{resize:vertical; min-height:120px;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0; border-color:var(--marino); box-shadow:0 0 0 3px rgba(22,52,112,.12);
}
.campo .ayuda{font-size:12.5px; color:var(--gris-500);}
.formulario .acciones{grid-column:1 / -1; display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:6px;}
.formulario .nota{font-size:13px; color:var(--gris-500); max-width:42ch;}
/* Trampa para robots: invisible para las personas, atractiva para los bots. */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Panel de datos de contacto */
.datos{
  display:flex; flex-direction:column; gap:26px;
  background:var(--tinta); border-radius:var(--radio-tarjeta); padding:32px 28px;
}
.dato h3{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amarillo); margin-bottom:10px;}
.dato p,.dato address{font-style:normal; font-size:15px; color:rgba(255,255,255,.65); line-height:1.65;}
.dato a{color:rgba(255,255,255,.85);}
.dato a:hover{color:var(--amarillo);}
.dato .grande{display:block; font-family:var(--f-tit); font-weight:700; font-size:24px; color:#fff;}
.dato .grande:hover{color:var(--amarillo);}

/* ---------- 19. Pie ---------- */
.pie{background:var(--tinta-2); color:rgba(255,255,255,.55); font-size:14px; overflow:hidden;}
.pie > .contenedor{padding-block:64px 0;}
.pie__cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px;}
@media (max-width:1024px){ .pie__cols{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .pie__cols{grid-template-columns:1fr;} }
.pie h3{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amarillo); margin-bottom:20px;}
.pie ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:10px;}
.pie a{color:rgba(255,255,255,.55);}
.pie a:hover{color:#fff;}
.pie__marca img{height:60px; width:auto; object-fit:contain; margin-bottom:20px;}
.pie__marca p{line-height:1.65; margin-bottom:24px;}
.pie__dir{font-style:normal; line-height:1.9;}
/* Filete rojo sobre la línea legal, como en la referencia. Va de borde a borde
   de la ventana, no sólo del contenedor: por eso el `::before` con `100vw` en
   vez de un `border-top`. `.pie` lleva `overflow:hidden` para que ese ancho no
   provoque desplazamiento horizontal. */
.pie__legal{
  position:relative;
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center;
  margin-top:56px; padding-block:24px;
  font-size:13px; color:rgba(255,255,255,.4);
}
.pie__legal::before{
  content:""; position:absolute; top:0; left:calc(50% - 50vw);
  width:100vw; height:2px; background:var(--rojo);
}
.pie__legal .der{margin-left:auto;}
.pie__legal b{color:rgba(255,255,255,.6);}
@media (max-width:760px){ .pie__legal .der{margin-left:0;} }