/* ==========================================================================
   METIS Transportation Solutions — hoja de estilos principal

   Escala fluida: los tamaños se calculan con clamp() y vw, así el sitio
   se achica solo en pantallas chicas en vez de quedar fijo a 1920.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  --negro:        #0A0A0A;
  --negro-panel:  #0D0D0D;
  --negro-caja:   #131313;
  --negro-carta:  #1A1A1A;
  --blanco:       #F5F4F2;
  --gris-claro:   #C9C7C4;
  --gris:         #A8A6A2;
  --gris-medio:   #8E8C89;
  --gris-oscuro:  #6E6E6E;
  --amarillo:     #FFC51C;

  --linea:        rgba(255, 255, 255, .08);
  --linea-media:  rgba(255, 255, 255, .16);

  --fuente-titulo: Raleway, "Helvetica Neue", Arial, sans-serif;
  --fuente-texto:  Montserrat, "Helvetica Neue", Arial, sans-serif;

  /* Espaciado fluido */
  --margen:   clamp(20px, 4.2vw, 72px);
  --aire:     clamp(56px, 6.5vw, 104px);   /* separación entre secciones */
  --aire-mid: clamp(28px, 3vw, 48px);

  /* Escala tipográfica fluida */
  --t-hero:     clamp(30px, 4.1vw, 62px);
  --t-seccion:  clamp(22px, 2.3vw, 34px);
  --t-grande:   clamp(20px, 1.9vw, 27px);
  --t-cuerpo:   clamp(13.5px, .92vw, 15px);
  --t-chico:    clamp(12px, .8vw, 13px);
  --t-micro:    clamp(10px, .68vw, 11px);

  --transicion: .24s ease;
  --curva: cubic-bezier(.4, 0, .2, 1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fuente-titulo); line-height: 1.06; letter-spacing: -.03em; }

a { color: inherit; text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--amarillo); }

button { font-family: inherit; cursor: pointer; }

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

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--amarillo); color: var(--negro);
  padding: 12px 20px;
  font-size: var(--t-chico); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.saltar:focus { left: 0; }

/* --- 3. Utilidades ------------------------------------------------------- */
.contenedor { padding-left: var(--margen); padding-right: var(--margen); }

.titulo-seccion {
  font-size: var(--t-seccion);
  font-weight: 800; text-transform: uppercase;
}
/* acento: raya amarilla debajo del título */
.titulo-seccion::after,
.contacto__titulo::after {
  content: "";
  display: block;
  width: clamp(48px, 5vw, 78px);
  height: 3px;
  background: var(--amarillo);
  margin-top: clamp(14px, 1.6vw, 22px);
}

.encabezado-seccion {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--aire-mid);
  margin-bottom: var(--aire-mid);
}

.encabezado-seccion--centrado {
  flex-direction: column; align-items: center; text-align: center;
  gap: 0;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}
.encabezado-seccion--centrado .titulo-seccion::after { margin-left: auto; margin-right: auto; }
.encabezado-seccion--centrado .parrafo { margin-top: 10px; max-width: 40em; }

.parrafo { font-size: var(--t-cuerpo); font-weight: 400; color: var(--gris-claro); }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-chico); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris-claro);
  transition: color var(--transicion), gap var(--transicion);
}
.enlace-flecha:hover { color: var(--amarillo); gap: 14px; }
.enlace-flecha:hover svg path { stroke: var(--amarillo); }

/* --- 4. Botones ---------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  border-radius: 999px;
  padding: 15px 34px;
  min-height: 48px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: var(--t-chico); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), box-shadow var(--transicion),
              transform var(--transicion);
}
/* El "led": halo amarillo alrededor de la pastilla. */
.boton--solido {
  background: var(--amarillo); color: var(--negro);
  box-shadow: 0 0 0 1px rgba(255,197,28,.45), 0 6px 22px -6px rgba(255,197,28,.55);
}
.boton--solido:hover {
  background: #FFD34F; color: var(--negro);
  box-shadow: 0 0 0 1px rgba(255,197,28,.75), 0 0 26px rgba(255,197,28,.55), 0 10px 30px -8px rgba(255,197,28,.7);
  transform: translateY(-1px);
}
.boton--contorno {
  border-color: rgba(255,197,28,.45); color: var(--amarillo); font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255,197,28,.14);
}
/* al pasar el cursor se rellena de amarillo, como el sólido */
.boton--contorno:hover {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--negro);
  box-shadow: 0 0 0 1px rgba(255,197,28,.75), 0 0 26px rgba(255,197,28,.55), 0 10px 30px -8px rgba(255,197,28,.7);
  transform: translateY(-1px);
}
.boton--bloque { width: 100%; min-height: 44px; padding: 13px 30px; }
.boton--chico  { padding: 11px 24px; min-height: 0; font-size: var(--t-micro); font-weight: 800; gap: 8px; }
.boton--grande { padding: 18px 44px; min-height: 56px; font-weight: 800; letter-spacing: .20em; }

/* --- 5. Cabecera --------------------------------------------------------- */
.cabecera {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(16px, 1.9vw, 26px) var(--margen);
  transition: background var(--transicion), padding var(--transicion);
}
.cabecera.fija {
  position: fixed;
  padding-top: 12px; padding-bottom: 12px;
  background: rgba(10,10,10,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo:hover { color: inherit; }
.logo img { display: block; height: clamp(32px, 2.9vw, 42px); width: auto; }

.menu { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 34px); }
.menu a {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-claro); white-space: nowrap;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--amarillo); }

/* --- Servicios: desplegable --- */
.menu__servicios { position: relative; }
.menu__boton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none;
  font-family: inherit;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-claro); white-space: nowrap;
  transition: color var(--transicion);
}
.menu__boton svg { transition: transform var(--transicion); }
.menu__boton:hover,
.menu__servicios--activo .menu__boton,
.menu__boton[aria-expanded="true"] { color: var(--amarillo); }
.menu__boton[aria-expanded="true"] svg { transform: rotate(180deg); }

.menu__lista {
  position: absolute; z-index: 60;
  top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  margin: 0; padding: 8px;
  min-width: 232px;
  list-style: none;
  background: rgba(12,12,12,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,197,28,.4);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255,197,28,.12), 0 0 30px -8px rgba(255,197,28,.45), 0 24px 48px -22px rgba(0,0,0,.95);
}
/* puentecito invisible para que no se cierre al bajar el cursor */
.menu__lista::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.menu__lista[hidden] { display: none; }
.menu__lista a {
  display: block;
  padding: 11px 16px;
  border-radius: 999px;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--amarillo);
  transition: background var(--transicion), color var(--transicion);
}
.menu__lista a:hover,
.menu__lista a[aria-current="page"] { background: var(--blanco); color: var(--negro); }

.cabecera__acciones { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); flex-shrink: 0; }
.cabecera__tel { font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; color: var(--gris-claro); white-space: nowrap; }

.hamburguesa {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
}

/* --- 6. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 58% 46%; }

/* Los velos son lo que hace legible el titular sobre cualquier fotograma
   del video. No quitarlos. */
.hero__velo--diagonal {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(10,10,10,.95) 0%, rgba(10,10,10,.82) 32%,
    rgba(10,10,10,.28) 66%, rgba(10,10,10,.55) 100%);
}
/* la foto se corre a la derecha: el texto queda sobre el negro y no tapa nada */
.hero--imagen-derecha .hero__media { left: clamp(180px, 26%, 560px); }
/* llena el bloque de punta a punta: sin franjas negras arriba ni abajo */
.hero--imagen-derecha .hero__media img { object-fit: cover; object-position: 100% 32%; }
/* cada foto tiene su punto de interés: se ajusta por página */
.hero--foco-alto  .hero__media img { object-position: 100% 24%; }
.hero--foco-medio .hero__media img { object-position: 100% 44%; }
.hero--imagen-derecha .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--negro) 0%, rgba(10,10,10,.6) 10%, transparent 32%);
  pointer-events: none;
}
.hero--imagen-derecha .hero__velo--diagonal {
  background: linear-gradient(100deg,
    rgba(8,8,8,.98) 0%, rgba(8,8,8,.70) 26%,
    rgba(8,8,8,.18) 52%, rgba(8,8,8,.42) 100%);
}

/* cuando la foto ya trae mucha luz propia, el velo pisa un poco más */
.hero--foto-fuerte .hero__velo--diagonal {
  background: linear-gradient(100deg,
    rgba(8,8,8,.97) 0%, rgba(8,8,8,.88) 34%,
    rgba(8,8,8,.42) 70%, rgba(8,8,8,.62) 100%);
}
.hero__velo--vertical {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(10,10,10,.72) 0%, rgba(10,10,10,0) 24%,
    rgba(10,10,10,0) 66%, rgba(10,10,10,.85) 100%);
}

.hero__contenido {
  position: relative; z-index: 2;
  max-width: 46em;
  padding: clamp(110px, 12vw, 170px) var(--margen) clamp(80px, 9vw, 130px);
}

.hero__volanta { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 1.9vw, 28px); }
.hero__volanta span { font-size: var(--t-micro); font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--amarillo); }
.hero__volanta::before { content: ""; width: clamp(30px, 3vw, 46px); height: 1px; background: var(--amarillo); }

.hero__titulo { font-size: var(--t-hero); font-weight: 900; line-height: .98; text-transform: uppercase; }
.hero__titulo em { font-style: normal; color: var(--amarillo); }

.hero__bajada { margin-top: clamp(22px, 2.4vw, 34px); max-width: 34em; }
.hero__bajada p { font-size: clamp(13.5px, 1vw, 16px); font-weight: 300; color: #DEDCD9; line-height: 1.75; }
.hero__bajada strong { color: var(--blanco); font-weight: 500; }

.hero__acciones { margin-top: clamp(24px, 2.8vw, 40px); display: flex; gap: 12px; flex-wrap: wrap; }

.hero__video-aviso {
  position: absolute; z-index: 2;
  right: var(--margen); top: clamp(88px, 9vw, 124px);
  display: flex; align-items: center; gap: 10px;
  background: rgba(20,20,20,.6);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 8px 18px 8px 10px;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gris-claro);
}
.hero__video-aviso svg { width: 20px; height: 20px; }

.hero__scroll {
  position: absolute; z-index: 2;
  left: var(--margen); bottom: clamp(20px, 2.4vw, 36px);
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gris-oscuro);
}

/* Hero de páginas interiores */
.hero--interior { min-height: 100svh; }
.miga { font-size: var(--t-micro); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris-medio); margin-bottom: 20px; }
.miga [aria-current] { color: var(--amarillo); }

/* --- 7. Banda de datos (negra con reborde neón) -------------------------- */
.banda {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #0d0d0d;
  color: var(--blanco);
  border-top: 2px solid var(--amarillo);
  border-bottom: 2px solid var(--amarillo);
  box-shadow:
    0 0 26px -4px rgba(255,197,28,.55),
    inset 0 0 60px -30px rgba(255,197,28,.55);
}
.banda--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* resplandor interno, más fuerte en los bordes */
.banda::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,197,28,.13) 0%, transparent 22%),
    linear-gradient(0deg,   rgba(255,197,28,.13) 0%, transparent 22%);
}

.banda__celda {
  position: relative; overflow: hidden;
  padding: clamp(24px, 2.6vw, 40px) clamp(18px, 2.2vw, 34px);
  transition: background var(--transicion);
}
/* separador neón entre celdas */
.banda__celda + .banda__celda::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: rgba(255,197,28,.42);
  box-shadow: 0 0 10px rgba(255,197,28,.5);
}
/* al pasar el cursor la celda se enciende */
.banda__celda::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(120% 90% at 50% 100%, rgba(255,197,28,.20) 0%, transparent 68%);
  transition: opacity var(--transicion);
}
.banda__celda:hover::after { opacity: 1; }
.banda__celda:hover .banda__valor {
  color: var(--amarillo);
  text-shadow: 0 0 22px rgba(255,197,28,.55);
}
.banda__celda:hover .banda__rotulo::before { width: 30px; }
.banda__celda > * { position: relative; z-index: 1; }
.banda__celda:first-child { padding-left: var(--margen); }
.banda__celda:last-child  { padding-right: var(--margen); }

.banda__rotulo {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--amarillo);
}
.banda__rotulo::before {
  content: ""; flex: none; width: 18px; height: 2px;
  background: var(--amarillo);
  box-shadow: 0 0 8px rgba(255,197,28,.8);
  transition: width var(--transicion);
}
.banda__valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(28px, 3.2vw, 50px); font-weight: 900; line-height: .98;
  letter-spacing: -.035em; margin-top: clamp(12px, 1.4vw, 18px);
  color: var(--blanco);
  transition: color var(--transicion), text-shadow var(--transicion);
}
.banda__detalle {
  font-size: var(--t-chico); font-weight: 400; line-height: 1.55;
  color: var(--gris-claro); margin-top: 10px; max-width: 26ch;
}

/* --- 8. Carrusel de servicios -------------------------------------------- */
/* Todas las tarjetas miden lo mismo de alto y se solapan. Al pasar el cursor
   la tarjeta se ensancha y recupera color: nada más. La ficha de detalle
   vive en la página del servicio, no acá. */
.servicios { background: var(--negro-panel); padding: var(--aire) 0; }
.servicios__interior { display: flex; align-items: stretch; gap: clamp(36px, 5vw, 88px); padding: 0 var(--margen); }

.servicios__texto {
  width: clamp(240px, 22vw, 340px); flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}

.carrusel {
  display: flex;
  align-items: center;             /* la abierta sobresale arriba y abajo */
  height: clamp(420px, 42vw, 580px);
  flex: 1;
  min-width: 0;
  padding-left: 0;
}

.tarjeta {
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 13vw, 200px);
  height: clamp(290px, 29vw, 400px);
  margin-right: -20px;
  border-radius: 6px;
  overflow: hidden;
  border: 0; padding: 0; background: none;
  text-align: left; color: inherit;
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
  transition: width .5s var(--curva), height .5s var(--curva),
              margin .5s var(--curva), box-shadow .5s ease;
}
/* La abierta cancela el solapamiento de la anterior (los 20px negativos)
   y suma su propio aire, para que ningún título quede cortado. */
.tarjeta.abierta,
.carrusel:hover .tarjeta:hover {
  width: clamp(300px, 27vw, 420px);
  height: clamp(420px, 42vw, 580px);
  margin-left: 34px;
  margin-right: 14px;
  z-index: 30;
  box-shadow: 0 30px 64px rgba(0,0,0,.75);
}
.carrusel:hover .tarjeta.abierta:not(:hover) {
  width: clamp(150px, 13vw, 200px);
  height: clamp(290px, 29vw, 400px);
  margin-right: -20px;
  margin-left: 0;
  z-index: 1;
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
}

.tarjeta__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale(.6) brightness(.38);
  transition: filter .5s ease;
}
/* cada foto necesita su propio encuadre dentro de la tarjeta vertical */
.tarjeta__foto--transporte { object-position: 84% 50%; }
.tarjeta__foto--rentacar   { object-position: 86% 50%; }
.tarjeta.abierta .tarjeta__foto,
.carrusel:hover .tarjeta:hover .tarjeta__foto { filter: grayscale(0) brightness(.6); }
.carrusel:hover .tarjeta.abierta:not(:hover) .tarjeta__foto { filter: grayscale(.6) brightness(.38); }

.tarjeta__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.30) 0%, rgba(10,10,10,.10) 42%, rgba(10,10,10,.92) 100%);
}
.tarjeta__cuerpo {
  position: absolute; inset: 0;
  padding: clamp(16px, 1.5vw, 24px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.tarjeta__indice {
  position: absolute;
  top: clamp(16px, 1.5vw, 24px); right: clamp(16px, 1.5vw, 24px);
  font-family: var(--fuente-titulo);
  font-size: clamp(13px, 1.05vw, 16px); font-weight: 800;
  letter-spacing: .06em; color: var(--amarillo);
}
.tarjeta__titulo { font-size: clamp(15px, 1.25vw, 19px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.12; transition: color .3s ease; }
.carrusel:hover .tarjeta:hover .tarjeta__titulo { color: var(--amarillo); }
.tarjeta__bajada {
  font-size: var(--t-chico); color: var(--gris); margin-top: 7px;
  opacity: 0; transition: opacity .3s ease .06s;
}
.tarjeta.abierta .tarjeta__bajada,
.carrusel:hover .tarjeta:hover .tarjeta__bajada { opacity: 1; }
.carrusel:hover .tarjeta.abierta:not(:hover) .tarjeta__bajada { opacity: 0; }

/* el "Ver detalle" sólo aparece en la tarjeta abierta */
.tarjeta__mas {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--amarillo);
  opacity: 0; transform: translateY(8px);
  transition: opacity .32s ease .1s, transform .32s ease .1s;
}
.tarjeta.abierta .tarjeta__mas,
.carrusel:hover .tarjeta:hover .tarjeta__mas { opacity: 1; transform: none; }
.carrusel:hover .tarjeta.abierta:not(:hover) .tarjeta__mas { opacity: 0; transform: translateY(8px); }

.flecha {
  width: 42px; height: 42px;
  border-radius: 8px; border: 0;
  background: #1F1F1F;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transicion);
}
.flecha:hover { background: var(--amarillo); }
.flecha:hover path { stroke: var(--negro); }
.flecha path { transition: stroke var(--transicion); }
.flecha[disabled] { opacity: .3; cursor: default; }
.flecha[disabled]:hover { background: #1F1F1F; }
.flecha[disabled]:hover path { stroke: var(--blanco); }

.servicios__flechas { display: flex; gap: 10px; }

/* --- 9. Noticias --------------------------------------------------------- */
/* Fila centrada: la elegida se agranda y las demás quedan chicas, todas
   del mismo tamaño, como en la referencia.                                */
.noticias { padding: clamp(38px, 4.4vw, 68px) 0; }

:root {
  --sep-notas: clamp(12px, 1.3vw, 20px);
  --nota-ancho: clamp(140px, 13vw, 200px);
  --nota-alto:  clamp(180px, 17vw, 250px);
  --nota-ancho-activa: clamp(250px, 24vw, 350px);
  --nota-alto-activa:  clamp(270px, 26vw, 390px);
}

.noticias__marco { position: relative; }
/* las cuatro noticias ocupan el ancho completo, de un borde al otro */
.noticias__pista { padding: 26px var(--sep-notas); }
.noticias__fila {
  display: flex;
  align-items: center;
  gap: var(--sep-notas);
}

.nota {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,197,28,.45);
  transition: flex-grow .55s var(--curva), box-shadow .45s var(--curva);
}
.nota:hover { color: inherit; }
.nota__enlace { display: block; position: relative; height: var(--nota-alto); transition: height .55s var(--curva); }

.nota__figura { margin: 0; position: absolute; inset: 0; overflow: hidden; }
.nota__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.nota__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,.95) 0%, rgba(8,8,8,.75) 34%, rgba(8,8,8,.12) 68%, rgba(8,8,8,0) 100%);
  opacity: 0; transition: opacity .45s var(--curva);
}

/* el texto aparece solo en la elegida */
.nota__cuerpo {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(14px, 1.5vw, 22px);
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--curva), transform .45s var(--curva);
  pointer-events: none;
}
.nota__meta { display: flex; align-items: center; gap: 10px; }
.nota__categoria { font-size: var(--t-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--amarillo); }
.nota__punto { width: 3px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.45); }
.nota__fecha { font-size: var(--t-micro); color: var(--gris-claro); }
.nota__titulo {
  font-size: clamp(15px, 1.25vw, 19px); font-weight: 800; line-height: 1.28;
  letter-spacing: -.01em; margin-top: 8px; color: var(--blanco);
}
.nota__extracto { font-size: var(--t-micro); font-weight: 400; line-height: 1.6; color: var(--gris-claro); margin-top: 7px; }

/* la elegida */
.nota.activa {
  flex-grow: 2.6;
  box-shadow: 0 0 0 2px var(--amarillo), 0 0 40px -6px rgba(255,197,28,.7), 0 28px 54px -30px rgba(0,0,0,.9);
}
.nota.activa .nota__enlace { height: var(--nota-alto-activa); }
.nota.activa .nota__velo { opacity: 1; }
.nota.activa .nota__cuerpo { opacity: 1; transform: none; pointer-events: auto; }

/* --- indicador del carrusel --- */
.noticias__pie {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 1.3vw, 18px);
  margin-top: clamp(18px, 2vw, 28px);
}
.noticias__indicadores { display: flex; align-items: center; gap: 8px; }
.indicador {
  width: 26px; height: 8px;
  padding: 0; border-radius: 999px; cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255,197,28,.55);
  transition: background var(--transicion), width var(--transicion),
              border-color var(--transicion), box-shadow var(--transicion);
}
.indicador:hover { border-color: var(--amarillo); background: rgba(255,197,28,.25); }
.indicador.activo {
  width: 40px;
  background: var(--amarillo);
  border-color: var(--amarillo);
  box-shadow: 0 0 16px -3px rgba(255,197,28,.85);
}

/* --- 10. Contacto y formulario ------------------------------------------- */
/* Pensado para entrar completo en una pantalla. */
.contacto { padding: clamp(22px, 2.3vw, 36px) 0; }
.contacto__interior {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3.2vw, 56px);
  align-items: center;
  padding: 0 var(--margen);
}

.contacto__titulo { font-size: clamp(22px, 2.5vw, 36px); font-weight: 900; text-transform: uppercase; }
.contacto__bajada { font-size: var(--t-chico); font-weight: 400; color: var(--gris-claro); margin-top: 12px; max-width: 32em; }

.ventajas { list-style: none; margin: clamp(14px, 1.5vw, 20px) 0 0; padding: clamp(14px, 1.5vw, 20px) 0 0; border-top: 1px solid rgba(255,255,255,.10); display: grid; gap: clamp(9px, 1vw, 13px); }
.ventajas__item { display: flex; align-items: flex-start; gap: 14px; }
.ventajas__icono {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,197,28,.12);
  box-shadow: 0 0 0 1px rgba(255,197,28,.35), 0 0 14px -2px rgba(255,197,28,.45);
}
.ventajas__icono svg { width: 12px; height: 12px; fill: none; stroke: var(--amarillo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ventajas__texto { font-size: var(--t-micro); font-weight: 400; color: var(--gris-claro); line-height: 1.55; }
.ventajas__texto strong { display: block; font-size: var(--t-chico); font-weight: 600; color: var(--blanco); margin-bottom: 1px; }

.datos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: clamp(14px, 1.5vw, 20px);
  padding-top: clamp(14px, 1.5vw, 20px);
  border-top: 1px solid rgba(255,255,255,.10);
}
.datos__item { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.datos__item:hover { color: inherit; }
.datos__icono {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--amarillo);
  box-shadow: 0 0 0 1px rgba(255,197,28,.5), 0 0 16px -2px rgba(255,197,28,.6);
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.datos__icono svg { width: 14px; height: 14px; fill: none; stroke: var(--negro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.datos__item:hover .datos__icono { box-shadow: 0 0 0 1px var(--amarillo), 0 0 22px rgba(255,197,28,.75); transform: translateY(-1px); }
.datos__texto { font-size: var(--t-micro); font-weight: 400; color: var(--gris-claro); line-height: 1.55; min-width: 0; }
.datos__texto strong {
  display: block; font-size: var(--t-chico); font-weight: 600;
  color: var(--blanco); margin-bottom: 1px;
  overflow-wrap: anywhere;
  transition: color var(--transicion);
}
.datos__item:hover .datos__texto strong { color: var(--amarillo); }

.caja-formulario {
  position: relative;
  background: var(--negro-caja);
  border: 1px solid rgba(255,197,28,.16);
  border-radius: clamp(16px, 1.6vw, 22px);
  padding: clamp(15px, 1.5vw, 22px);
  box-shadow: 0 0 0 1px rgba(255,197,28,.05), 0 24px 60px -30px rgba(255,197,28,.35);
}
.caja-formulario__rotulo {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--amarillo);
}
.caja-formulario__bajada {
  font-family: var(--fuente-titulo);
  font-size: clamp(16px, 1.35vw, 21px); font-weight: 800;
  letter-spacing: -.02em; color: var(--blanco);
  margin: 4px 0 clamp(10px, 1.1vw, 15px);
}

.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(7px, .7vw, 10px) clamp(10px, 1vw, 15px); }
.campo { display: flex; flex-direction: column; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo__rotulo {
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris-medio); margin-bottom: 4px;
}

.campo__control {
  width: 100%;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--blanco);
  font-family: inherit; font-size: var(--t-cuerpo); font-weight: 300;
  padding: 0 18px;
  min-height: clamp(33px, 2.7vw, 39px);
  transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.campo__control::placeholder { color: var(--gris-oscuro); }
.campo__control:hover { border-color: rgba(255,197,28,.35); }
.campo__control:focus {
  outline: none;
  background: rgba(255,197,28,.05);
  border-color: var(--amarillo);
  box-shadow: 0 0 0 3px rgba(255,197,28,.16), 0 0 18px -2px rgba(255,197,28,.45);
}

textarea.campo__control {
  border-radius: clamp(14px, 1.4vw, 20px);
  resize: vertical;
  min-height: clamp(48px, 4.4vw, 62px);
  padding: 10px 18px;
  line-height: 1.55;
}

/* --- lista de servicios (propia, no la del sistema) --- */
.lista { position: relative; }
.lista__oculto {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; bottom: 8px; left: 18px;
}
.lista__boton {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  text-align: left; cursor: pointer;
  font-weight: 300; color: var(--gris-oscuro);
}
.lista__boton.elegido { color: var(--blanco); }
.lista__punta { color: var(--amarillo); flex-shrink: 0; transition: transform var(--transicion); }
.lista__boton[aria-expanded="true"] .lista__punta { transform: rotate(180deg); }

.lista__opciones {
  position: absolute; z-index: 40;
  top: calc(100% + 8px); left: 0; right: 0;
  margin: 0; padding: 6px;
  list-style: none;
  background: var(--negro);
  border: 1px solid var(--amarillo);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255,197,28,.25), 0 0 26px -6px rgba(255,197,28,.5), 0 22px 44px -20px rgba(0,0,0,.95);
  max-height: 260px; overflow-y: auto;
}
.lista__opcion {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: var(--t-cuerpo); font-weight: 400;
  color: var(--amarillo);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.lista__opcion:focus { outline: none; }
.lista__opcion:hover,
.lista__opcion.marcada { background: var(--blanco); color: var(--negro); }
.lista__opcion[aria-selected="true"] { background: var(--blanco); color: var(--negro); font-weight: 600; }

.formulario__pie {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: clamp(4px, .5vw, 7px);
}
.formulario__nota { font-size: var(--t-micro); font-weight: 300; color: var(--gris-oscuro); text-align: center; max-width: 34em; }

/* Aviso de error y panel de confirmación del formulario */
.formulario__aviso {
  font-size: var(--t-chico); font-weight: 500; color: #FFB4A8;
  text-align: center; max-width: 34em; margin: 0 0 4px;
}
.formulario-ok {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; outline: none;
  padding: clamp(28px, 3.2vw, 48px) clamp(20px, 2.5vw, 40px);
  border: 1px solid var(--linea-media); background: var(--negro-caja);
}
.formulario-ok__tilde { width: 46px; height: 46px; color: var(--amarillo); }
.formulario-ok__titulo {
  font-family: var(--fuente-titulo); font-size: clamp(15px, 1.2vw, 18px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--blanco); margin: 0;
}
.formulario-ok__texto {
  font-size: var(--t-chico); font-weight: 300; color: var(--gris-claro);
  max-width: 34em; margin: 0;
}
.formulario-ok__volver { margin-top: 6px; }
.formulario[hidden],
.formulario-ok[hidden] { display: none; }

/* --- 11. Artículos ------------------------------------------------------- */
.articulo { max-width: 54em; margin: 0 auto; padding: 0 var(--margen); }
.articulo__cuerpo p { font-size: clamp(14px, 1.05vw, 16px); font-weight: 300; color: #E4E2DF; margin-bottom: 20px; }
.articulo__cuerpo h2 { font-size: var(--t-grande); font-weight: 800; text-transform: uppercase; margin: 36px 0 16px; }
.articulo__cuerpo strong { font-weight: 600; color: var(--blanco); }

/* --- 11b. Bloques de páginas interiores ---------------------------------- */
.bloque { padding: clamp(38px, 4.4vw, 68px) 0; }
.bloque__interior {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.bloque__texto .parrafo { margin-top: 16px; }
.bloque__texto strong { color: var(--blanco); font-weight: 600; }

.fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.1vw, 16px); }
.ficha {
  position: relative;
  padding: clamp(16px, 1.7vw, 24px) clamp(18px, 1.9vw, 28px);
  border: 1px solid rgba(255,197,28,.35);
  border-radius: 14px;
  background: rgba(255,197,28,.03);
  transition: border-color var(--transicion), background var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.ficha:hover {
  border-color: var(--amarillo);
  background: rgba(255,197,28,.07);
  box-shadow: 0 0 0 1px rgba(255,197,28,.35), 0 0 26px -6px rgba(255,197,28,.6);
  transform: translateY(-2px);
}
.ficha__icono {
  display: flex; align-items: center; justify-content: center;
  width: clamp(46px, 4.4vw, 58px); height: clamp(46px, 4.4vw, 58px); border-radius: 999px;
  background: rgba(255,197,28,.12);
  box-shadow: 0 0 0 1px rgba(255,197,28,.4), 0 0 16px -4px rgba(255,197,28,.5);
  margin-bottom: 12px;
  transition: background var(--transicion), box-shadow var(--transicion);
}
.ficha__icono svg { width: clamp(23px, 2.2vw, 29px); height: clamp(23px, 2.2vw, 29px); fill: none; stroke: var(--amarillo); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ficha:hover .ficha__icono { background: var(--amarillo); box-shadow: 0 0 0 1px var(--amarillo), 0 0 22px -2px rgba(255,197,28,.8); }
.ficha:hover .ficha__icono svg { stroke: var(--negro); }

/* el texto va al lado del ícono, así la caja queda baja */
.ficha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 1.5vw, 22px);
  align-items: center;
}
.ficha__icono { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; align-self: center; }
.ficha__indice { grid-column: 2; grid-row: 1; align-self: end; }
.ficha__titulo { grid-column: 2; grid-row: 2; }
.ficha__bajada { grid-column: 2; grid-row: 3; align-self: start; }
.ficha__indice {
  font-family: var(--fuente-titulo); font-weight: 800;
  font-size: var(--t-chico); color: var(--amarillo); letter-spacing: .06em;
}
.ficha__titulo { font-size: clamp(16px, 1.35vw, 21px); font-weight: 800; text-transform: uppercase; margin-top: 6px; }
.ficha__titulo a::after { content: ""; position: absolute; inset: 0; }
.ficha:hover .ficha__titulo { color: var(--amarillo); }
.ficha__bajada { font-size: var(--t-chico); font-weight: 400; color: var(--gris-claro); margin-top: 6px; }

.dupla { padding: clamp(30px, 3.4vw, 52px) 0; }
.dupla__interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.dupla--invertida .dupla__figura { order: 2; }
.dupla__figura { margin: 0; border-radius: 16px; overflow: hidden; }
.dupla__figura img { width: 100%; height: clamp(230px, 26vw, 380px); object-fit: cover; display: block; }
.dupla__texto .parrafo { margin-top: 16px; }
.dupla__texto strong { color: var(--blanco); font-weight: 600; }
.dupla__texto .enlace-flecha { margin-top: clamp(16px, 1.8vw, 24px); }

/* fila de iconos debajo del texto */
.puntos {
  list-style: none; margin: clamp(18px, 2vw, 28px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 30px);
}
.punto { display: flex; align-items: center; gap: 13px; }
.punto__icono {
  flex-shrink: 0;
  width: clamp(44px, 4.2vw, 54px); height: clamp(44px, 4.2vw, 54px); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,197,28,.12);
  box-shadow: 0 0 0 1px rgba(255,197,28,.4), 0 0 16px -4px rgba(255,197,28,.5);
  transition: background var(--transicion), box-shadow var(--transicion);
}
.punto__icono svg { width: clamp(22px, 2.1vw, 27px); height: clamp(22px, 2.1vw, 27px); fill: none; stroke: var(--amarillo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.punto:hover .punto__icono { background: var(--amarillo); box-shadow: 0 0 0 1px var(--amarillo), 0 0 22px -2px rgba(255,197,28,.8); }
.punto:hover .punto__icono svg { stroke: var(--negro); }
.punto__texto { font-size: var(--t-chico); font-weight: 600; letter-spacing: .02em; color: var(--gris-claro); }

/* --- 11c. Desplegable "Ver más" ------------------------------------------ */
/* --- 11c. Aparición al bajar --------------------------------------------- */
/* solo se esconde si el JS está corriendo: sin JS se ve todo igual */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
}
.js [data-revelar].visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-revelar] { opacity: 1; transform: none; transition: none; }
}

/* --- 11d. Bloques de las páginas de servicio ----------------------------- */
.bloque-simple { padding: clamp(34px, 3.8vw, 60px) 0; }
.bloque-simple .parrafo { max-width: 62em; margin-top: 16px; }
.bloque-simple .parrafo strong { color: var(--blanco); font-weight: 600; }
.subtitulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(15px, 1.25vw, 19px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  margin-top: clamp(22px, 2.4vw, 34px);
}

.destacado {
  border-left: 2px solid var(--amarillo);
  padding-left: clamp(14px, 1.5vw, 20px);
  margin-top: clamp(18px, 2vw, 26px);
}
.destacado a { color: var(--amarillo); font-weight: 600; }

.lista-check { list-style: none; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0; display: grid; gap: clamp(9px, 1vw, 13px); }
.check { display: flex; align-items: flex-start; gap: 12px; }
.check__icono {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,197,28,.12);
  box-shadow: 0 0 0 1px rgba(255,197,28,.35), 0 0 14px -2px rgba(255,197,28,.45);
}
.check__icono svg { width: 12px; height: 12px; fill: none; stroke: var(--amarillo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.check > span:last-child { font-size: var(--t-chico); font-weight: 400; color: var(--gris-claro); line-height: 1.6; max-width: 62em; }

.puntos--rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 20vw, 270px), 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(230px, 22vw, 300px), 1fr));
  gap: clamp(12px, 1.3vw, 18px);
  margin-top: clamp(20px, 2.2vw, 30px);
}
.tarjeta-dato {
  padding: clamp(16px, 1.7vw, 24px) clamp(18px, 1.9vw, 26px);
  border: 1px solid rgba(255,197,28,.35);
  border-radius: 14px;
  background: rgba(255,197,28,.03);
  transition: border-color var(--transicion), background var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta-dato:hover {
  border-color: var(--amarillo);
  background: rgba(255,197,28,.07);
  box-shadow: 0 0 0 1px rgba(255,197,28,.35), 0 0 26px -6px rgba(255,197,28,.6);
  transform: translateY(-2px);
}
.tarjeta-dato__icono {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255,197,28,.12);
  box-shadow: 0 0 0 1px rgba(255,197,28,.4), 0 0 16px -4px rgba(255,197,28,.5);
  margin-bottom: 12px;
  transition: background var(--transicion), box-shadow var(--transicion);
}
.tarjeta-dato__icono svg { width: 20px; height: 20px; fill: none; stroke: var(--amarillo); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta-dato:hover .tarjeta-dato__icono { background: var(--amarillo); }
.tarjeta-dato:hover .tarjeta-dato__icono svg { stroke: var(--negro); }
.tarjeta-dato__titulo { font-size: clamp(14px, 1.15vw, 17px); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }

.lista-punteada { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.lista-punteada li {
  position: relative; padding-left: 15px;
  font-size: var(--t-micro); font-weight: 400; line-height: 1.6; color: var(--gris-claro);
}
.lista-punteada li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 999px; background: var(--amarillo);
}

/* --- 11e. Listado de noticias y notas ------------------------------------ */
.hero--listado { min-height: 100svh; }
.hero--nota { min-height: 100svh; }
.hero__titulo--nota { font-size: clamp(24px, 3.1vw, 46px); max-width: 20em; }
.hero--nota .nota__meta { margin-bottom: clamp(14px, 1.6vw, 22px); }

.listado { padding: clamp(34px, 3.8vw, 60px) 0 clamp(20px, 2.2vw, 32px); }
.listado__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 26vw, 340px), 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.nota-lista {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,197,28,.45);
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.nota-lista:hover {
  box-shadow: 0 0 0 2px var(--amarillo), 0 0 34px -8px rgba(255,197,28,.6);
  transform: translateY(-3px);
}
.nota-lista__enlace { display: block; color: inherit; }
.nota-lista__figura { margin: 0; overflow: hidden; }
.nota-lista__figura img { width: 100%; height: clamp(160px, 16vw, 220px); object-fit: cover; display: block; transition: transform .6s var(--curva); }
.nota-lista:hover .nota-lista__figura img { transform: scale(1.05); }
.nota-lista__cuerpo { padding: clamp(14px, 1.5vw, 22px); }
.nota-lista__titulo { font-size: clamp(15px, 1.2vw, 18px); font-weight: 800; line-height: 1.3; margin-top: 10px; transition: color var(--transicion); }
.nota-lista:hover .nota-lista__titulo { color: var(--amarillo); }
.nota-lista__extracto { font-size: var(--t-micro); font-weight: 400; line-height: 1.6; color: var(--gris-claro); margin-top: 8px; }
.nota-lista__cuerpo .enlace-flecha { margin-top: clamp(12px, 1.3vw, 18px); }

.articulo { padding: clamp(34px, 3.8vw, 60px) var(--margen); }
.articulo__cuerpo h2 { font-size: clamp(17px, 1.5vw, 23px); }
.lista-punteada--articulo { margin: 0 0 20px; gap: 9px; }
.lista-punteada--articulo li { font-size: clamp(13.5px, 1vw, 15px); line-height: 1.55; padding-left: 17px; color: #DEDCD9; }
.articulo__cierre { font-size: var(--t-cuerpo); font-weight: 600; color: var(--blanco); margin-top: 26px; }
.articulo__accion { margin-top: 14px; }
.articulo__volver { max-width: 54em; margin: clamp(26px, 3vw, 40px) auto 0; }

/* --- 11f. Secciones con niveles de lectura -------------------------------- */
/* título grande · bajada mediana · cuerpo chico                            */
.seccion { padding: clamp(46px, 5.4vw, 92px) 0; }

.seccion__cabeza { max-width: 46em; }
.seccion__cabeza--centro { margin-left: auto; margin-right: auto; text-align: center; }
.seccion__cabeza--centro .titulo-seccion::after { margin-left: auto; margin-right: auto; }
.bajada-seccion {
  font-size: clamp(15px, 1.25vw, 19px); font-weight: 300; line-height: 1.65;
  color: var(--gris-claro); margin-top: clamp(14px, 1.6vw, 22px);
}
.bajada-seccion strong { color: var(--blanco); font-weight: 600; }
.seccion__cuerpo { margin-top: clamp(28px, 3.2vw, 48px); }
.seccion__acciones { margin-top: clamp(20px, 2.2vw, 30px); }

.aviso {
  margin-top: clamp(16px, 1.8vw, 26px);
  padding: clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 26px);
  border-left: 2px solid var(--amarillo);
  background: rgba(255,197,28,.05);
  border-radius: 0 12px 12px 0;
}
.aviso p { font-size: var(--t-chico); font-weight: 400; line-height: 1.65; color: var(--gris-claro); }

/* tira de datos clave */
.datos-clave {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(170px, 16vw, 215px), 1fr));
  gap: clamp(12px, 1.3vw, 18px);
}
.dos-columnas .datos-clave { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dato-clave {
  padding: clamp(20px, 2.2vw, 32px) clamp(18px, 2vw, 28px);
  border: 1px solid rgba(255,197,28,.3);
  border-radius: 16px;
  background: rgba(255,197,28,.03);
  transition: border-color var(--transicion), background var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.dato-clave:hover {
  border-color: var(--amarillo); background: rgba(255,197,28,.07);
  box-shadow: 0 0 0 1px rgba(255,197,28,.35), 0 0 30px -8px rgba(255,197,28,.6);
  transform: translateY(-3px);
}
.dato-clave__valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(24px, 2.3vw, 34px);
  white-space: nowrap; font-weight: 900; line-height: 1;
  letter-spacing: -.02em; color: var(--amarillo);
}
.dato-clave__rotulo { font-size: var(--t-chico); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-top: 12px; }
.dato-clave__detalle { font-size: var(--t-micro); font-weight: 400; line-height: 1.6; color: var(--gris-claro); margin-top: 7px; }

/* tarjetón: icono grande, título y lista */
.rejilla-tarjetones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(215px, 20vw, 275px), 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.dos-columnas .rejilla-tarjetones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarjeton {
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
  transition: border-color var(--transicion), background var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.tarjeton:hover {
  border-color: rgba(255,197,28,.75);
  box-shadow: 0 0 0 1px rgba(255,197,28,.3), 0 0 34px -10px rgba(255,197,28,.6);
  transform: translateY(-3px);
}
.tarjeton__icono {
  display: flex; align-items: center; justify-content: center;
  width: clamp(52px, 5vw, 68px); height: clamp(52px, 5vw, 68px);
  border-radius: 18px;
  background: rgba(255,197,28,.12);
  box-shadow: 0 0 0 1px rgba(255,197,28,.35), 0 0 22px -6px rgba(255,197,28,.55);
  margin-bottom: clamp(16px, 1.8vw, 24px);
  transition: background var(--transicion), box-shadow var(--transicion);
}
.tarjeton__icono svg { width: clamp(26px, 2.5vw, 34px); height: clamp(26px, 2.5vw, 34px); fill: none; stroke: var(--amarillo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tarjeton:hover .tarjeton__icono { background: var(--amarillo); box-shadow: 0 0 0 1px var(--amarillo), 0 0 30px -4px rgba(255,197,28,.8); }
.tarjeton:hover .tarjeton__icono svg { stroke: var(--negro); }
.tarjeton__titulo { font-size: clamp(16px, 1.35vw, 21px); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.25; }
.tarjeton__texto { font-size: var(--t-chico); font-weight: 400; line-height: 1.65; color: var(--gris-claro); margin-top: 10px; }
.tarjeton .lista-punteada { margin-top: 14px; gap: 9px; }
.tarjeton .lista-punteada li { font-size: var(--t-chico); }

/* dos columnas: título pegado a la izquierda, contenido a la derecha */
.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}
.dos-columnas--invertida { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.dos-columnas--invertida .seccion__cabeza { order: 2; }
.dos-columnas .seccion__cabeza { max-width: none; }
.dos-columnas .seccion__cuerpo { margin-top: 0; }

/* --- 11g. Bloques con foto ------------------------------------------------ */
.mixto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 64px);
  align-items: center;
}
.mixto--derecha .mixto__figura { order: 2; }
.mixto__figura {
  margin: 0; position: relative;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,197,28,.35), 0 30px 60px -34px rgba(0,0,0,.9);
}
.mixto__figura img { width: 100%; height: clamp(260px, 30vw, 440px); object-fit: cover; display: block; }
.mixto__texto .bajada-seccion { margin-top: clamp(12px, 1.4vw, 18px); }
.mixto__texto .seccion__cabeza { max-width: none; }
.mixto__texto .lista-punteada { margin-top: clamp(18px, 2vw, 26px); }

/* números sueltos en línea, sin caja */
.cifras {
  display: flex; flex-wrap: wrap;
  gap: clamp(20px, 2.6vw, 44px);
  margin-top: clamp(22px, 2.6vw, 34px);
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid rgba(255,255,255,.10);
}
.cifra__valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(24px, 2.4vw, 36px); font-weight: 900; line-height: 1;
  letter-spacing: -.02em; color: var(--amarillo); white-space: nowrap;
}
.cifra__rotulo { font-size: var(--t-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-claro); margin-top: 9px; }

/* franja de foto de punta a punta con una frase encima */
.banda-foto { position: relative; overflow: hidden; }
.banda-foto img { width: 100%; height: clamp(220px, 26vw, 380px); object-fit: cover; display: block; }
.banda-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.7) 45%, rgba(8,8,8,.25) 100%);
}
.banda-foto__texto {
  position: absolute; z-index: 2; top: 50%; left: 0; transform: translateY(-50%);
  padding: 0 var(--margen); max-width: 34em;
}
.banda-foto__frase {
  font-family: var(--fuente-titulo);
  font-size: clamp(20px, 2.4vw, 36px); font-weight: 900;
  text-transform: uppercase; line-height: 1.1; letter-spacing: -.02em;
}
.banda-foto__frase em { font-style: normal; color: var(--amarillo); }
.banda-foto__pie { font-size: var(--t-chico); font-weight: 400; color: var(--gris-claro); margin-top: clamp(10px, 1.2vw, 16px); }

/* tarjeta con foto arriba */
.rejilla-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(230px, 22vw, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.tarjeta-foto {
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta-foto:hover {
  border-color: rgba(255,197,28,.75);
  box-shadow: 0 0 0 1px rgba(255,197,28,.3), 0 0 34px -10px rgba(255,197,28,.6);
  transform: translateY(-3px);
}
.tarjeta-foto__figura { margin: 0; position: relative; overflow: visible; }
.tarjeta-foto__figura img { width: 100%; height: clamp(140px, 14vw, 190px); object-fit: cover; display: block; transition: transform .6s var(--curva); }
.tarjeta-foto:hover .tarjeta-foto__figura img { transform: scale(1.06); }
.tarjeta-foto__icono {
  position: absolute; left: clamp(14px, 1.5vw, 20px); bottom: clamp(-29px, -2.6vw, -23px);
  display: flex; align-items: center; justify-content: center;
  width: clamp(46px, 4.4vw, 58px); height: clamp(46px, 4.4vw, 58px);
  border-radius: 16px;
  background: var(--amarillo);
  box-shadow: 0 0 0 1px rgba(255,197,28,.6), 0 0 24px -6px rgba(255,197,28,.8);
}
.tarjeta-foto__icono svg { width: clamp(22px, 2.1vw, 28px); height: clamp(22px, 2.1vw, 28px); fill: none; stroke: var(--negro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta-foto__cuerpo { padding: clamp(36px, 3.6vw, 48px) clamp(18px, 1.9vw, 26px) clamp(20px, 2.1vw, 28px); }
.tarjeta-foto__titulo { font-size: clamp(15px, 1.25vw, 19px); font-weight: 800; text-transform: uppercase; line-height: 1.25; }
.tarjeta-foto__texto { font-size: var(--t-chico); font-weight: 400; line-height: 1.65; color: var(--gris-claro); margin-top: 9px; }

/* pasos numerados */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 19vw, 260px), 1fr));
  gap: clamp(16px, 1.9vw, 30px);
}
.paso { position: relative; padding-top: clamp(16px, 1.8vw, 24px); border-top: 2px solid rgba(255,197,28,.35); transition: border-color var(--transicion); }
.paso:hover { border-top-color: var(--amarillo); }
.paso__numero {
  font-family: var(--fuente-titulo);
  font-size: clamp(30px, 3.2vw, 48px); font-weight: 900; line-height: 1;
  color: rgba(255,197,28,.35); letter-spacing: -.03em;
  transition: color var(--transicion);
}
.paso:hover .paso__numero { color: var(--amarillo); }
.paso__titulo { font-size: clamp(14px, 1.15vw, 17px); font-weight: 800; text-transform: uppercase; margin-top: clamp(10px, 1.2vw, 16px); }
.paso__texto { font-size: var(--t-chico); font-weight: 400; line-height: 1.65; color: var(--gris-claro); margin-top: 8px; }

/* --- 11h. Ficha del auto -------------------------------------------------- */
/* La foto entra por la derecha y se difumina sobre el fondo.               */
/* sin recuadro: el auto y el texto se apoyan directo sobre el fondo */
.ficha-auto {
  position: relative;
  display: block;
  min-height: clamp(380px, 36vw, 520px);
}
/* el auto viene recortado: no hace falta máscara dura, solo un desvanecido
   suave del lado izquierdo para que se funda con el panel                  */
/* la foto ocupa toda la mitad derecha y se desvanece hacia el texto */
.ficha-auto__foto {
  position: absolute; top: 0; bottom: 0;
  right: calc(var(--margen) * -1);   /* sangra hasta el borde de la pantalla */
  width: clamp(340px, 60%, 900px); height: 100%;
  object-fit: cover; object-position: 50% 50%;
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(to left, #000 46%, rgba(0,0,0,.55) 76%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:
    linear-gradient(to left, #000 46%, rgba(0,0,0,.55) 76%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* resplandor detrás del auto */
.ficha-auto::after {
  content: ""; position: absolute; z-index: 0;
  right: 2%; top: 50%; transform: translateY(-50%);
  width: 44%; height: 76%;
  background: radial-gradient(ellipse at center, rgba(255,197,28,.16) 0%, transparent 68%);
  pointer-events: none;
}
.ficha-auto__cuerpo {
  position: relative; z-index: 1;
  max-width: clamp(300px, 48%, 580px);
  padding: clamp(10px, 1.4vw, 22px) 0;
}
.ficha-auto__cuerpo .bajada-seccion { max-width: 30em; }
.ficha-auto__marca {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--amarillo);
}
.ficha-auto__modelo {
  font-size: clamp(22px, 2.6vw, 40px); font-weight: 900;
  text-transform: uppercase; line-height: 1.05; letter-spacing: -.02em;
  margin-top: clamp(8px, 1vw, 14px);
}
.ficha-auto__modelo em { font-style: normal; color: var(--amarillo); }

.ficha-auto__datos { margin: clamp(20px, 2.4vw, 32px) 0 0; }
.ficha-auto__fila {
  display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(8px, .9vw, 11px) 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ficha-auto__fila:last-child { border-bottom: 0; }
.ficha-auto__fila dt { font-size: var(--t-chico); font-weight: 500; color: var(--gris-medio); }
.ficha-auto__fila dd { margin: 0; font-size: var(--t-chico); font-weight: 600; color: var(--blanco); }

.ficha-auto__precios { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 2vw, 26px); }
.pastilla-dato {
  display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris-claro);
}
.pastilla-dato--fuerte {
  border-color: rgba(255,197,28,.55);
  background: rgba(255,197,28,.10);
  color: var(--amarillo);
  font-family: var(--fuente-titulo); font-weight: 800; letter-spacing: .06em;
}

.ficha-auto__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.2vw, 30px); }
.ficha-auto__acciones .boton { padding: 13px 28px; min-height: 46px; }

/* grupos con encabezado propio */
.seccion__cuerpo .puntos--rejilla + .grupos { margin-top: clamp(18px, 2vw, 28px); }
.grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 28vw, 400px), 1fr));
  gap: clamp(16px, 2vw, 32px);
}
.grupo {
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.grupo:hover { border-color: rgba(255,197,28,.7); box-shadow: 0 0 0 1px rgba(255,197,28,.25), 0 0 32px -10px rgba(255,197,28,.6); }
.grupo__icono {
  display: flex; align-items: center; justify-content: center;
  width: clamp(46px, 4.4vw, 58px); height: clamp(46px, 4.4vw, 58px);
  border-radius: 16px; background: rgba(255,197,28,.12);
  box-shadow: 0 0 0 1px rgba(255,197,28,.4);
  margin-bottom: clamp(14px, 1.6vw, 20px);
  transition: background var(--transicion);
}
.grupo__icono svg { width: clamp(22px, 2.2vw, 28px); height: clamp(22px, 2.2vw, 28px); fill: none; stroke: var(--amarillo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--transicion); }
.grupo:hover .grupo__icono { background: var(--amarillo); }
.grupo:hover .grupo__icono svg { stroke: var(--negro); }
.grupo__titulo { font-size: clamp(16px, 1.35vw, 21px); font-weight: 800; text-transform: uppercase; }
.grupo__lista { margin: clamp(14px, 1.6vw, 20px) 0 0; padding: 0; list-style: none; display: grid; gap: clamp(10px, 1.2vw, 15px); }
.grupo__lista li {
  font-size: var(--t-chico); font-weight: 400; line-height: 1.6; color: var(--gris-claro);
  padding-top: clamp(10px, 1.2vw, 15px); border-top: 1px solid rgba(255,255,255,.07);
}
.grupo__lista li:first-child { padding-top: 0; border-top: 0; }
.grupo__lista span {
  display: block;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blanco); margin-bottom: 4px;
}
.seccion__acciones--centro { display: flex; justify-content: center; }

/* --- 11i. Bloques con foco (gestión de flotas) --------------------------- */
/* Hero centrado con el vehículo bajo un cono de luz.                       */
.hero-foco {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  padding: clamp(110px, 12vw, 170px) var(--margen) clamp(20px, 3vw, 50px);
  text-align: center;
}
.hero-foco::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: min(150%, 1500px); height: 130%;
  background: radial-gradient(ellipse at center, rgba(255,197,28,.20) 0%, rgba(255,197,28,.07) 34%, transparent 68%);
  pointer-events: none;
}
.hero-foco__contenido { position: relative; z-index: 2; max-width: 44em; margin: 0 auto; }
.hero-foco__titulo {
  font-size: var(--t-hero); font-weight: 900;
  text-transform: uppercase; line-height: 1.04; letter-spacing: -.02em;
}
.hero-foco__titulo em { font-style: normal; color: var(--amarillo); }
.hero-foco__bajada {
  font-size: clamp(14px, 1.1vw, 17px); font-weight: 300; line-height: 1.7;
  color: var(--gris-claro); margin: clamp(14px, 1.6vw, 22px) auto 0; max-width: 42em;
}
.hero-foco__acciones { margin-top: clamp(20px, 2.4vw, 32px); }

.foco-vehiculo { position: relative; z-index: 1; margin-top: clamp(-10px, -1vw, 0px); }
.foco-vehiculo img {
  width: min(78%, 860px); height: auto; margin: 0 auto;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.85));
}
/* el reflejo del piso */
.foco-vehiculo::after {
  content: ""; position: absolute; left: 50%; bottom: clamp(-14px, -1.4vw, -8px);
  transform: translateX(-50%);
  width: min(76%, 820px); height: clamp(26px, 3vw, 46px);
  background: radial-gradient(ellipse at center, rgba(255,197,28,.35) 0%, rgba(255,197,28,.10) 45%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}

/* título grande a la izquierda, texto a la derecha */
.dupla-titulo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 80px);
  align-items: start;
}
.dupla-titulo__titulo {
  font-size: clamp(26px, 3.4vw, 52px); font-weight: 900;
  text-transform: uppercase; line-height: 1.05; letter-spacing: -.02em;
}
.dupla-titulo__texto p { font-size: var(--t-cuerpo); font-weight: 400; line-height: 1.75; color: var(--gris-claro); }
.dupla-titulo__texto p + p { margin-top: clamp(12px, 1.4vw, 18px); }
.dupla-titulo__texto strong { color: var(--blanco); font-weight: 600; }
.dupla-titulo__texto .boton { margin-top: clamp(18px, 2vw, 26px); }

/* tarjeta amarilla que cierra la grilla */
.tarjeton--cta {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--negro);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 0 0 1px rgba(255,197,28,.5), 0 0 40px -10px rgba(255,197,28,.8);
}
.tarjeton--cta:hover { background: #FFD34F; border-color: #FFD34F; transform: translateY(-3px); }
.tarjeton--cta .tarjeton__titulo { color: var(--negro); }
.tarjeton--cta .tarjeton__texto { color: rgba(10,10,10,.75); }
.tarjeton--cta .boton {
  align-self: flex-start; margin-top: clamp(18px, 2vw, 26px);
  background: var(--negro); color: var(--amarillo);
  box-shadow: none; border-color: transparent;
}
.tarjeton--cta .boton:hover { background: #1C1C1C; color: var(--amarillo); box-shadow: none; transform: none; }

/* cierre centrado con vehículos bajo el foco */
.cierre-foco { position: relative; overflow: hidden; padding: clamp(46px, 5.4vw, 92px) 0 0; text-align: center; }
.cierre-foco::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: -10%; transform: translateX(-50%);
  width: min(150%, 1400px); height: 90%;
  background: radial-gradient(ellipse at center, rgba(255,197,28,.16) 0%, transparent 66%);
  pointer-events: none;
}
.cierre-foco__contenido { position: relative; z-index: 2; padding: 0 var(--margen); max-width: 44em; margin: 0 auto; }

/* --- 12. Listados y tabla comparativa ------------------------------------ */
.incluye { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.incluye li {
  padding: clamp(14px, 1.5vw, 22px) clamp(16px, 1.8vw, 28px);
  border-bottom: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
  font-size: var(--t-cuerpo); font-weight: 300; color: #D6D4D1;
  transition: color var(--transicion);
}
.incluye li:hover { color: var(--amarillo); }
.incluye li:nth-child(3n) { border-right: 0; }

.tabla-caja {
  max-width: clamp(600px, 76vw, 1000px);
  margin: 0 auto;
  border: 1px solid rgba(255,197,28,.4);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
  box-shadow: 0 0 0 1px rgba(255,197,28,.12), 0 0 44px -14px rgba(255,197,28,.5), 0 30px 60px -34px rgba(0,0,0,.9);
  overflow: hidden;
}
.comparativa-envoltorio { overflow-x: auto; }
.comparativa { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }

.comparativa thead th {
  padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.5vw, 22px);
  background: rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,197,28,.35);
  vertical-align: bottom;
}
.comparativa__rotulo {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--blanco);
}
.comparativa__marca {
  font-family: var(--fuente-titulo);
  font-size: clamp(13px, 1.05vw, 16px); font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--amarillo);
}

.comparativa th[scope="row"] {
  padding: clamp(12px, 1.3vw, 17px) clamp(14px, 1.5vw, 22px);
  font-size: var(--t-chico); font-weight: 600; color: var(--blanco);
}
.comparativa td {
  padding: clamp(12px, 1.3vw, 17px) clamp(14px, 1.5vw, 22px);
  font-size: var(--t-chico); font-weight: 400; color: var(--gris-claro);
}
.comparativa tbody tr { border-top: 1px solid rgba(255,255,255,.06); transition: background var(--transicion); }
.comparativa tbody tr:hover { background: rgba(255,197,28,.05); }

/* la columna de METIS queda resaltada de arriba abajo */
.comparativa .es-metis { background: rgba(255,197,28,.06); box-shadow: inset 1px 0 0 rgba(255,197,28,.2), inset -1px 0 0 rgba(255,197,28,.2); }
.comparativa tbody tr:hover .es-metis { background: rgba(255,197,28,.11); }

.marca { display: inline-flex; align-items: center; gap: 9px; }
.marca svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.marca--si  { color: var(--blanco); font-weight: 600; }
.marca--si svg  { stroke: var(--amarillo); }
.marca--no  { color: var(--gris-medio); }
.marca--no svg  { stroke: #6E6E6E; }
.marca--neutra { color: var(--gris-claro); }

/* --- 13. Pie (amarillo) --------------------------------------------------- */
.pie {
  background: var(--amarillo);
  color: var(--negro);
  padding: clamp(14px, 1.4vw, 20px) var(--margen);
  text-align: center;
}
.pie__redes {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(7px, .8vw, 11px);
  flex-wrap: wrap;
  margin-bottom: clamp(7px, .75vw, 10px);
}
.pie__red {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--negro);
  color: var(--amarillo);
  transition: background var(--transicion), color var(--transicion),
              transform var(--transicion), box-shadow var(--transicion);
}
.pie__red:hover {
  background: #1F1F1F; color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(10,10,10,.55);
}
.pie__red svg { width: 15px; height: 15px; fill: currentColor; }
.pie__red--linea svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pie__datos {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 1.4vw, 22px);
  flex-wrap: wrap;
  font-size: var(--t-chico); font-weight: 500;
}
.pie__datos a { color: var(--negro); }
.pie__datos a:hover { color: var(--negro); text-decoration: underline; }
.pie__separador { width: 3px; height: 3px; border-radius: 999px; background: rgba(10,10,10,.35); }
.pie__legal { font-size: var(--t-micro); color: rgba(10,10,10,.62); margin-top: clamp(5px, .55vw, 8px); }

/* --- 14. Responsive ------------------------------------------------------ */

/* La cabecera necesita cortar temprano: son seis ítems más teléfono y botón. */
@media (max-width: 1180px) {
  .menu, .cabecera__tel, .cabecera .boton { display: none; }
  /* en el menú desplegado los servicios quedan siempre a la vista */
  .menu__servicios { width: 100%; }
  .menu__boton {
    pointer-events: none;
    width: 100%; padding: 15px 0; min-height: 50px;
    border-bottom: 1px solid var(--linea);
    font-size: var(--t-chico); color: var(--gris-oscuro);
  }
  .menu__boton svg { display: none; }
  .menu__lista {
    position: static; transform: none;
    display: grid; gap: 2px;
    background: none; border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0; min-width: 0;
  }
  .menu__lista[hidden] { display: grid !important; }
  .menu__lista a { padding: 15px 0 15px 18px; min-height: 50px; display: flex; align-items: center; border-bottom: 1px solid var(--linea); font-size: var(--t-chico); color: var(--gris-claro); }
  .menu__lista a:hover, .menu__lista a[aria-current="page"] { background: none; color: var(--amarillo); }
  .hamburguesa { display: flex; }

  .cabecera.abierta { background: var(--negro); }
  .cabecera.abierta .menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--negro);
    border-bottom: 1px solid var(--linea);
    padding: 0 var(--margen) 16px;
  }
  .cabecera.abierta .menu a {
    padding: 15px 0; min-height: 50px;
    display: flex; align-items: center;
    border-bottom: 1px solid var(--linea);
    font-size: var(--t-chico);
  }
}

@media (max-width: 1000px) {
  .banda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banda__celda:nth-child(2) { padding-right: var(--margen); }
  .banda__celda:nth-child(3) { padding-left: var(--margen); }

  .servicios__interior { flex-direction: column; gap: 22px; }
  .servicios__texto { width: auto; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; }
  .carrusel { padding-left: 0; }

  /* en pantallas angostas la foto vuelve a ocupar todo el hero */
  .hero--imagen-derecha .hero__media { left: 0; }
  .hero--imagen-derecha .hero__media img { object-fit: cover; object-position: 73% 50%; }
  .hero--imagen-derecha .hero__media::after {
    background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.25) 45%, rgba(10,10,10,.75) 100%);
  }

  .contacto__interior { grid-template-columns: 1fr; gap: 32px; }
  .bloque__interior, .dupla__interior, .dos-columnas, .dos-columnas--invertida, .mixto, .dupla-titulo { grid-template-columns: 1fr; gap: 28px; }
  .foco-vehiculo img { width: 92%; }
  .dos-columnas--invertida .seccion__cabeza { order: 0; }
  .mixto--derecha .mixto__figura { order: 0; }
  .dupla--invertida .dupla__figura { order: 0; }
  .datos { grid-template-columns: 1fr; gap: 12px; }

  .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incluye li:nth-child(3n) { border-right: 1px solid var(--linea); }
  .incluye li:nth-child(2n) { border-right: 0; }
}

@media (max-width: 700px) {
  .hero__contenido { padding-top: 100px; }
  .hero__video-aviso { top: auto; bottom: 16px; right: var(--margen); }
  .hero__scroll { display: none; }
  .hero__acciones .boton { width: 100%; }

  .banda { grid-template-columns: 1fr; }
  .banda__celda {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 16px var(--margen) !important;
  }
  .banda__valor { font-size: 22px; margin-top: 0; }
  .banda__detalle { display: none; }

  /* En mobile no hay cursor: el carrusel pasa a lista que se arrastra */
  .carrusel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0 var(--margen) 6px;
    -webkit-overflow-scrolling: touch;
  }
  .tarjeta, .tarjeta.abierta,
  .carrusel:hover .tarjeta:hover,
  .carrusel:hover .tarjeta.abierta:not(:hover) {
    width: 74vw; height: 340px;
    margin: 0; scroll-snap-align: start;
  }
  .tarjeta__foto, .tarjeta.abierta .tarjeta__foto { filter: grayscale(0) brightness(.5); }
  .tarjeta__mas, .tarjeta.abierta .tarjeta__mas { opacity: 1; transform: none; }
  .servicios__texto { flex-direction: column; align-items: flex-start; gap: 14px; }
  .servicios__flechas { display: none; }


  .encabezado-seccion { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* en mobile las cuatro no entran: pasa a lista que se arrastra */
  .noticias__pista { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .nota { flex: 0 0 76vw; scroll-snap-align: center; }
  .nota.activa { flex: 0 0 76vw; }
  :root { --nota-alto: 62vw; --nota-alto-activa: 62vw; }
  .nota__velo, .nota__cuerpo { opacity: 1; transform: none; }

  .bloque__interior, .dupla__interior, .dos-columnas, .dos-columnas--invertida, .mixto, .dupla-titulo { grid-template-columns: 1fr; gap: 24px; }
  .foco-vehiculo img { width: 96%; }
  /* en mobile la foto pasa al fondo, tenue, y el texto ocupa todo */
  .ficha-auto__foto {
    position: relative; top: auto; right: auto; bottom: auto; transform: none;
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    margin: 0 0 clamp(12px, 2vw, 20px);
    -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .ficha-auto { min-height: 0; }
  .ficha-auto::after { display: none; }
  .ficha-auto__cuerpo { max-width: none; padding: 0; }
  .ficha-auto__acciones .boton { width: 100%; }
  .dos-columnas--invertida .seccion__cabeza { order: 0; }
  .mixto--derecha .mixto__figura { order: 0; }
  .dupla--invertida .dupla__figura { order: 0; }

  .formulario { grid-template-columns: 1fr; }
  .formulario__pie { align-items: stretch; }

  .incluye { grid-template-columns: 1fr; }
  .incluye li { border-right: 0 !important; padding: 16px 0; }
}

/* --- 15. Preferencias del usuario ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero__media video { display: none; }
}

@media print {
  .cabecera, .hero__media, .hero__velo--diagonal, .hero__velo--vertical,
  .hamburguesa, .flecha, .hero__scroll { display: none; }
  body { background: #fff; color: #000; }
}

/* --- gestión de flotas: bloques nuevos --- */
.datos-clave--texto .dato-clave__valor {
  font-size: clamp(17px, 1.5vw, 22px);
  white-space: normal; letter-spacing: 0;
}
.datos-clave--texto .dato-clave__detalle { margin-top: 10px; }
.aviso p + p { margin-top: clamp(10px, 1.1vw, 14px); }
.aviso strong { color: var(--blanco); font-weight: 600; }
.mixto__texto .cifras { margin-top: clamp(22px, 2.4vw, 32px); }
.mixto__texto .seccion__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) {
  .mixto { grid-template-columns: minmax(0, 1fr); }
  .mixto--derecha .mixto__figura { order: 0; }
}
.pasos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pasos--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pasos--tres { grid-template-columns: minmax(0, 1fr); } }

/* --- checklist enmarcado (gestión de flotas) --- */
.chequeo {
  list-style: none; margin: 0; padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 36px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px) clamp(24px, 3vw, 54px);
}
.chequeo__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 12px; align-items: start;
  font-size: var(--t-chico); font-weight: 400; line-height: 1.6; color: var(--gris-claro);
  padding-bottom: clamp(12px, 1.4vw, 18px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.chequeo__item svg {
  width: 17px; height: 17px; margin-top: 2px; flex: none;
  fill: none; stroke: var(--amarillo); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.chequeo__item:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 760px) {
  .chequeo { grid-template-columns: minmax(0, 1fr); }
  .chequeo__item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: clamp(12px, 1.4vw, 18px); }
  .chequeo__item:last-child { border-bottom: 0; padding-bottom: 0; }
}
.dato-clave__lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.dato-clave__lista li {
  position: relative; padding-left: 14px;
  font-size: var(--t-micro); font-weight: 400; line-height: 1.6; color: var(--gris-claro);
}
.dato-clave__lista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--amarillo);
}

/* --- Rent a car: bloque de reserva ------------------------------------- */
.reserva {
  margin-top: clamp(20px, 2.2vw, 30px);
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 28px);
  border: 1px solid rgba(255,197,28,.32);
  border-radius: 18px;
  background: rgba(255,197,28,.04);
  box-shadow: 0 0 0 1px rgba(255,197,28,.08), 0 0 34px -14px rgba(255,197,28,.5);
  max-width: 640px;
}
.reserva__titulo {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--amarillo);
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.reserva__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.reserva .campo--ancho { grid-column: 1 / -1; }
.reserva .campo__control { width: 100%; }
.reserva__aviso {
  margin-top: 12px; font-size: var(--t-chico); font-weight: 500; color: var(--amarillo);
}
.reserva__acciones {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(16px, 1.8vw, 22px);
}
@media (max-width: 620px) {
  .reserva__campos { grid-template-columns: minmax(0, 1fr); }
  .reserva__acciones .boton { width: 100%; }
}

.reserva__acciones .boton { min-width: 220px; }

/* --- Calendario propio -------------------------------------------------- */
.fecha { position: relative; }
.fecha__boton {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  color: var(--gris-medio);
}
.fecha--elegida .fecha__boton { color: var(--blanco); }
.fecha__icono {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--amarillo); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.fecha__panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0;
  min-width: 274px;
  border: 1px solid rgba(255,197,28,.4);
  border-radius: 16px;
  background: #0d0d0d;
  box-shadow: 0 0 0 1px rgba(255,197,28,.12), 0 26px 60px -22px rgba(0,0,0,.95);
  padding: 14px;
}
.calendario__cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.calendario__mes {
  font-family: var(--fuente-titulo); font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--blanco);
}
.calendario__flecha {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
  background: transparent; color: var(--blanco); cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.calendario__flecha svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.calendario__flecha:hover:not([disabled]) { border-color: var(--amarillo); color: var(--amarillo); }
.calendario__flecha[disabled] { opacity: .25; cursor: default; }
.calendario__semana, .calendario__dias {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.calendario__semana span {
  text-align: center; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gris-medio);
  padding-bottom: 6px;
}
.calendario__hueco { height: 34px; }
.calendario__dia {
  height: 34px; border: 0; border-radius: 9px;
  background: transparent; color: var(--gris-claro);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--transicion), color var(--transicion), box-shadow var(--transicion);
}
.calendario__dia:hover:not([disabled]) { background: rgba(255,197,28,.14); color: var(--blanco); }
.calendario__dia[disabled] { color: rgba(255,255,255,.18); cursor: default; }
.calendario__dia.es-hoy { box-shadow: inset 0 0 0 1px rgba(255,197,28,.55); color: var(--amarillo); }
.calendario__dia.es-elegida {
  background: var(--amarillo); color: var(--negro); font-weight: 800;
  box-shadow: 0 0 18px -4px rgba(255,197,28,.8);
}
@media (max-width: 620px) {
  .fecha__panel { left: 50%; transform: translateX(-50%); }
}

/* --- Zócalo de reserva (rent a car) ------------------------------------- */
.zocalo-reserva {
  position: relative; z-index: 20;
  background: #0d0d0d;
  border-top: 2px solid var(--amarillo);
  border-bottom: 2px solid var(--amarillo);
  box-shadow:
    0 0 26px -4px rgba(255,197,28,.55),
    inset 0 0 60px -30px rgba(255,197,28,.55);
}
.zocalo-reserva::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,197,28,.13) 0%, transparent 22%),
    linear-gradient(0deg,   rgba(255,197,28,.13) 0%, transparent 22%);
}
.zocalo-reserva .reserva {
  position: relative; z-index: 1;
  margin: 0; max-width: none;
  padding: clamp(22px, 2.4vw, 34px) var(--margen);
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.zocalo-reserva .reserva__titulo { margin-bottom: clamp(16px, 1.8vw, 22px); }
.zocalo-reserva .reserva__campos {
  grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.65fr) minmax(0, 1.1fr) auto;
  align-items: end;
  gap: clamp(14px, 1.8vw, 26px);
}
.zocalo-reserva .campo--ancho { grid-column: auto; }
.zocalo-reserva .reserva__acciones { margin: 0; }
.zocalo-reserva .reserva__acciones .boton { min-width: 0; white-space: nowrap; }
.zocalo-reserva .reserva__aviso { margin-top: 10px; }
@media (max-width: 1100px) {
  .zocalo-reserva .reserva__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zocalo-reserva .reserva__acciones { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .zocalo-reserva .reserva__campos { grid-template-columns: minmax(0, 1fr); }
}
.zocalo-reserva .campo__rotulo { color: var(--blanco); }

/* en rent a car el subtexto va más pegado al título */
.hero--reserva .hero__bajada,
.hero--listado .hero__bajada { margin-top: clamp(10px, 1.1vw, 15px); }



/* --- Cobertura: mapa del país por provincia (home) ----------------------- */
.mapa-cobertura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.mapa-cobertura__texto .parrafo { margin-top: clamp(14px, 1.6vw, 20px); }
.mapa-cobertura__figura {
  margin: 0; display: grid; place-items: center; position: relative;
}
.mapa-cobertura__figura::before {
  content: ""; position: absolute; width: 66%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,197,28,.14) 0%, transparent 68%);
  filter: blur(16px);
}
.mapa {
  position: relative;
  width: auto; height: clamp(360px, 46vw, 620px);
  overflow: visible;
}
.mapa__prov {
  fill: rgba(255,197,28,.06);
  stroke: rgba(255,197,28,.34);
  stroke-width: .7;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .28s ease, stroke .28s ease;
}
/* al marcar una zona, sus provincias se encienden y el resto se apaga */
.mapa-cobertura[data-activa] .mapa__prov { fill: rgba(255,197,28,.03); stroke: rgba(255,197,28,.16); }
.mapa-cobertura[data-activa="norte"]   .mapa__prov[data-zona="norte"],
.mapa-cobertura[data-activa="sur"]     .mapa__prov[data-zona="sur"],
.mapa-cobertura[data-activa="litoral"] .mapa__prov[data-zona="litoral"],
.mapa-cobertura[data-activa="amba"]    .mapa__prov[data-zona="amba"] {
  fill: rgba(255,197,28,.34);
  stroke: var(--amarillo);
  stroke-width: 1;
}

/* panel que cambia según la zona */
.zona {
  margin-top: clamp(20px, 2.2vw, 30px);
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px);
  border-left: 2px solid rgba(255,197,28,.55);
  border-radius: 0 14px 14px 0;
  background: rgba(255,197,28,.045);
  min-height: clamp(140px, 13vw, 168px);
}
.zona__rotulo {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--amarillo);
}
.zona__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(16px, 1.4vw, 21px); font-weight: 800;
  text-transform: uppercase; color: var(--blanco); margin-top: 10px;
}
.zona__texto {
  font-size: var(--t-chico); font-weight: 400; line-height: 1.7;
  color: var(--gris-claro); margin-top: 10px;
}

.zona__llaves { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 1.8vw, 22px); }
.llave {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--linea); background: transparent;
  color: var(--gris-claro); cursor: pointer;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.llave span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,197,28,.4); transition: background var(--transicion), box-shadow var(--transicion);
}
.llave:hover, .llave.activa {
  border-color: var(--amarillo); color: var(--blanco);
  background: rgba(255,197,28,.08);
}
.llave:hover span, .llave.activa span {
  background: var(--amarillo); box-shadow: 0 0 10px rgba(255,197,28,.9);
}

@media (max-width: 900px) {
  .mapa-cobertura { grid-template-columns: minmax(0, 1fr); }
  .mapa-cobertura__figura { order: -1; }
  .mapa { height: clamp(300px, 62vw, 420px); }
}

/* la M de METIS sobre el AMBA */
.mapa__marca { pointer-events: none; }
.mapa__marca-halo {
  fill: rgba(255,197,28,.18);
  animation: marca-late 3.2s ease-in-out infinite;
}
.mapa__marca-aro {
  fill: #0d0d0d;
  stroke: var(--amarillo); stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(255,197,28,.95));
}
.mapa__marca-m polygon { fill: var(--blanco); }
.mapa-cobertura[data-activa="amba"] .mapa__marca-halo { fill: rgba(255,197,28,.34); }
@keyframes marca-late {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .mapa__marca-halo { animation: none; } }

/* cabecera un poco más alta y con led amarillo al fijarse */
.cabecera { padding-top: clamp(20px, 2.3vw, 32px); padding-bottom: clamp(20px, 2.3vw, 32px); }
.cabecera.fija {
  padding-top: 18px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,197,28,.55);
  box-shadow: 0 0 22px -2px rgba(255,197,28,.45), 0 14px 40px -22px rgba(0,0,0,.95);
}

/* el punto de retiro entra en una sola línea */
.zocalo-reserva .lista__boton [data-lista-texto],
.zocalo-reserva .lista__opcion { white-space: nowrap; }
.zocalo-reserva .lista__opciones { min-width: 100%; width: max-content; max-width: 380px; }
@media (max-width: 1100px) {
  .zocalo-reserva .reserva__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Noticias: nota destacada ------------------------------------------- */
.nota-destacada {
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,197,28,.45);
  transition: box-shadow var(--transicion), transform var(--transicion);
  margin-bottom: clamp(34px, 4vw, 62px);
}
.nota-destacada:hover {
  box-shadow: 0 0 0 2px var(--amarillo), 0 0 40px -8px rgba(255,197,28,.6);
  transform: translateY(-3px);
}
.nota-destacada__enlace {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  color: inherit;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,197,28,.07) 0%, transparent 60%),
    #101010;
}
.nota-destacada__figura { margin: 0; overflow: hidden; }
.nota-destacada__figura img {
  width: 100%; height: 100%; min-height: clamp(240px, 26vw, 360px);
  object-fit: cover; display: block;
  transition: transform .6s var(--curva);
}
.nota-destacada:hover .nota-destacada__figura img { transform: scale(1.04); }
.nota-destacada__cuerpo {
  padding: clamp(24px, 3vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.nota__categoria--fuerte { color: var(--amarillo); }
.nota-destacada__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(20px, 2.1vw, 32px); font-weight: 800; line-height: 1.18;
  margin-top: clamp(12px, 1.4vw, 18px);
  transition: color var(--transicion);
}
.nota-destacada:hover .nota-destacada__titulo { color: var(--amarillo); }
.nota-destacada__extracto {
  font-size: var(--t-chico); font-weight: 400; line-height: 1.7;
  color: var(--gris-claro); margin-top: clamp(10px, 1.2vw, 16px);
}
.nota-destacada__cuerpo .boton { margin-top: clamp(18px, 2vw, 28px); align-self: start; }
.listado .seccion__cabeza { margin-bottom: clamp(18px, 2vw, 28px); }
@media (max-width: 860px) {
  .nota-destacada__enlace { grid-template-columns: minmax(0, 1fr); }
}

/* --- Notas: niveles de lectura ------------------------------------------ */
.articulo__cuerpo p { font-size: clamp(14.5px, 1.1vw, 17px); line-height: 1.65; margin-bottom: 14px; }

/* el primer párrafo funciona como bajada */
.articulo__cuerpo > p:first-child {
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 400; line-height: 1.5; color: var(--blanco);
  padding-left: clamp(16px, 1.8vw, 24px);
  border-left: 2px solid var(--amarillo);
  margin-bottom: clamp(20px, 2.2vw, 28px);
}

.articulo__cuerpo h2 { margin: clamp(26px, 2.8vw, 40px) 0 0; line-height: 1.15; }
.articulo__cuerpo h2::after {
  content: ""; display: block;
  width: clamp(36px, 3.4vw, 52px); height: 3px;
  background: var(--amarillo);
  margin: 9px 0 12px;
}

/* las listas largas van a dos columnas en pantallas anchas */
@media (min-width: 820px) {
  .lista-punteada--articulo {
    display: block;
    columns: 2; column-gap: clamp(28px, 3.2vw, 52px);
  }
  .lista-punteada--articulo li { break-inside: avoid; margin-bottom: 8px; }
}
.articulo__cierre {
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px);
  border-left: 2px solid var(--amarillo);
  border-radius: 0 14px 14px 0;
  background: rgba(255,197,28,.05);
  margin-top: clamp(30px, 3.4vw, 46px);
}

/* la foto de "Un respaldo integral" muestra el taller completo */
.mixto__figura img { height: clamp(300px, 34vw, 520px); object-position: 50% 42%; }

/* --- Nota: columna lateral con la ficha ---------------------------------- */
.nota-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
  max-width: 1120px; margin: 0 auto;
  padding-top: clamp(34px, 3.8vw, 60px);
}
.nota-cuerpo .articulo { max-width: none; margin: 0; padding: 0; }
.nota-cuerpo .articulo__volver { max-width: none; }

.nota-lateral { position: sticky; top: clamp(96px, 10vw, 120px); display: grid; gap: clamp(16px, 1.8vw, 24px); }
.nota-lateral__ficha {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: #101010;
}
.nota-lateral__rotulo {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amarillo);
}
.nota-lateral__rotulo + .nota-lateral__dato { margin-top: 7px; }
.nota-lateral__dato {
  font-size: var(--t-chico); font-weight: 500; color: var(--blanco);
  padding-bottom: clamp(12px, 1.3vw, 16px);
  margin-bottom: clamp(12px, 1.3vw, 16px);
  border-bottom: 1px solid var(--linea);
}
.nota-lateral__dato:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.nota-lateral__cta {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(255,197,28,.35);
  border-radius: 16px;
  background: rgba(255,197,28,.05);
}
.nota-lateral__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(15px, 1.25vw, 19px); font-weight: 800;
  text-transform: uppercase; color: var(--blanco);
}
.nota-lateral__texto {
  font-size: var(--t-micro); font-weight: 400; line-height: 1.6;
  color: var(--gris-claro); margin-top: 9px;
}
.nota-lateral__cta .boton { margin-top: clamp(14px, 1.6vw, 20px); width: 100%; text-align: center; }

@media (max-width: 980px) {
  .nota-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .nota-lateral { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .nota-lateral { grid-template-columns: minmax(0, 1fr); }
}

/* el hero de la nota va centrado */
.hero--nota .hero__contenido { max-width: 58em; margin-inline: auto; text-align: center; }
.hero--nota .nota__meta { justify-content: center; }
.hero__titulo--nota { max-width: 22em; margin-inline: auto; }

/* --- Assistance 24 hs (gestión de flotas) -------------------------------- */
.assistance { position: relative; }
.assistance__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.assistance__volanta {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--amarillo);
  margin-bottom: clamp(10px, 1.2vw, 16px);
}
.assistance__reloj {
  display: flex; align-items: baseline; gap: clamp(8px, 1vw, 14px);
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 32px);
  border: 1px solid rgba(255,197,28,.4);
  border-radius: 999px;
  background: rgba(255,197,28,.05);
  box-shadow: 0 0 0 1px rgba(255,197,28,.1), 0 0 34px -12px rgba(255,197,28,.7);
  white-space: nowrap;
}
.assistance__reloj-valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(26px, 3vw, 46px); font-weight: 900; line-height: 1;
  letter-spacing: -.03em; color: var(--amarillo);
}
.assistance__reloj-rotulo {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gris-claro);
}
.assistance__reloj-linea { width: 1px; height: clamp(24px, 2.6vw, 38px); background: rgba(255,197,28,.4); align-self: center; }

.auxilios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.auxilio {
  position: relative; overflow: hidden;
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.2vw, 30px);
  border: 1px solid rgba(255,197,28,.25);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,197,28,.07) 0%, transparent 62%),
    #101010;
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.auxilio:hover {
  border-color: var(--amarillo);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255,197,28,.35), 0 26px 50px -26px rgba(255,197,28,.65);
}
.auxilio__numero {
  position: absolute; top: clamp(14px, 1.6vw, 20px); right: clamp(18px, 2vw, 26px);
  font-family: var(--fuente-titulo); font-weight: 900;
  font-size: clamp(26px, 3vw, 44px); line-height: 1;
  color: rgba(255,197,28,.14);
  transition: color var(--transicion);
}
.auxilio:hover .auxilio__numero { color: rgba(255,197,28,.32); }
.auxilio__icono {
  display: grid; place-items: center;
  width: clamp(46px, 4vw, 58px); height: clamp(46px, 4vw, 58px);
  border-radius: 50%;
  border: 1px solid rgba(255,197,28,.45);
  background: rgba(255,197,28,.06);
  margin-bottom: clamp(16px, 1.8vw, 24px);
  transition: background var(--transicion), box-shadow var(--transicion);
}
.auxilio:hover .auxilio__icono {
  background: var(--amarillo);
  box-shadow: 0 0 22px -4px rgba(255,197,28,.9);
}
.auxilio__icono svg {
  width: 46%; height: 46%;
  fill: none; stroke: var(--amarillo); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--transicion);
}
.auxilio:hover .auxilio__icono svg { stroke: var(--negro); }
.auxilio__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(15px, 1.3vw, 20px); font-weight: 800;
  text-transform: uppercase; line-height: 1.2;
}
.grupos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seccion__cuerpo .auxilios + .grupos { margin-top: clamp(14px, 1.6vw, 22px); }

@media (max-width: 900px) {
  .assistance__cabeza { grid-template-columns: minmax(0, 1fr); }
  .auxilios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grupos--dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .auxilios { grid-template-columns: minmax(0, 1fr); } }

/* --- Nota: preguntas frecuentes ------------------------------------------ */
.faq {
  margin-top: clamp(34px, 3.8vw, 56px);
  padding-top: clamp(26px, 2.8vw, 40px);
  border-top: 1px solid var(--linea);
}
.faq__rotulo {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amarillo);
}
.faq__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(17px, 1.5vw, 23px); font-weight: 800;
  text-transform: uppercase; line-height: 1.15;
  margin: 8px 0 clamp(16px, 1.8vw, 24px);
}
.faq__lista { display: grid; gap: 10px; }
.faq__item {
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: #101010;
  transition: border-color var(--transicion);
}
.faq__item[open] { border-color: rgba(255,197,28,.35); }
.faq__pregunta {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(14px, 1.5vw, 18px) clamp(16px, 1.8vw, 22px);
  font-size: clamp(14px, 1.05vw, 16px); font-weight: 600; line-height: 1.4;
  color: var(--blanco);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after {
  content: "+"; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--linea-media);
  font-size: 17px; font-weight: 400; line-height: 1; color: var(--amarillo);
  transition: transform var(--transicion), background var(--transicion), color var(--transicion);
}
.faq__item[open] .faq__pregunta::after { transform: rotate(45deg); background: var(--amarillo); color: var(--negro); border-color: var(--amarillo); }
.faq__pregunta:hover { color: var(--amarillo); }
.faq__pregunta:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; border-radius: 14px; }
.faq__respuesta { padding: 0 clamp(16px, 1.8vw, 22px) clamp(14px, 1.6vw, 20px); }
.faq__respuesta p {
  font-size: clamp(13.5px, 1vw, 15px); font-weight: 300; line-height: 1.6;
  color: #DEDCD9; margin: 0;
}
.faq__respuesta a { color: var(--amarillo); text-decoration: underline; text-underline-offset: 3px; }
.articulo__cuerpo a:not(.boton) { color: var(--amarillo); text-decoration: underline; text-underline-offset: 3px; }
.articulo__cuerpo a strong { color: inherit; }
.nota-lateral__dato a { color: inherit; }
.nota-lateral__dato a:hover { color: var(--amarillo); }

/* --- Nota: subtítulos de tercer nivel ------------------------------------ */
.articulo__cuerpo h3 {
  font-family: var(--fuente-titulo);
  font-size: clamp(15px, 1.2vw, 18px); font-weight: 700; line-height: 1.25;
  color: var(--blanco);
  margin: clamp(18px, 2vw, 26px) 0 10px;
}

/* --- Pie: enlace a la ficha para IA -------------------------------------- */
.pie__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- Ajuste v122: títulos del hero un poco más chicos -------------------- */
.hero__titulo { font-size: clamp(26px, 3.4vw, 50px); }
.hero__titulo--nota { font-size: clamp(21px, 2.6vw, 38px); }

/* --- Ajuste v122: "Ver todas las notas" como pastilla amarilla centrada --- */
.listado__mas { text-align: center; margin-top: clamp(24px, 2.6vw, 36px); }
.listado__mas .enlace-flecha {
  justify-content: center;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--amarillo);
  color: var(--negro);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255,197,28,.45), 0 6px 22px -6px rgba(255,197,28,.55);
  transition: background var(--transicion), gap var(--transicion), transform var(--transicion);
}
.listado__mas .enlace-flecha svg path { stroke: var(--negro); }
.listado__mas .enlace-flecha:hover { background: #FFD34F; color: var(--negro); transform: translateY(-1px); }
.listado__mas .enlace-flecha:hover svg path { stroke: var(--negro); }

/* --- Ajuste v123: en rent a car el zócalo de reserva va sobre el hero ----- */
@media (min-width: 1101px) {
  .hero--reserva { --alto-zocalo: clamp(147px, calc(72.3px + 6.78vw), 173.3px); padding-bottom: var(--alto-zocalo); }
  .hero--reserva + .zocalo-reserva {
    margin-top: calc(-1 * clamp(147px, calc(72.3px + 6.78vw), 173.3px));
    background: rgba(13,13,13,.80);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
}

/* --- Ajuste v123: C.A.B.A y G.B.A primero en el mapa del home ------------ */
.zona__llaves .llave[data-zona-boton="amba"] { order: -1; }

/* --- Ajuste v123: botón flotante de WhatsApp ----------------------------- */
.wa-flotante {
  position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366;
  box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.wa-flotante svg { width: 32px; height: 32px; fill: #fff; }
.wa-flotante:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12); }
.wa-flotante:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 3px; }
@media (max-width: 620px) {
  .wa-flotante { width: 52px; height: 52px; }
  .wa-flotante svg { width: 28px; height: 28px; }
}
@media print { .wa-flotante { display: none; } }

/* --- Ajuste v124: el botón de WhatsApp no tapa "Consultar disponibilidad" - */
@media (min-width: 1101px) {
  .zocalo-reserva .reserva { padding-right: calc(var(--margen) + 72px); }
}

/* --- Ajuste v125: rent a car — el formulario sube un poco y las fechas no se cortan */
@media (min-width: 1101px) {
  .hero--reserva { min-height: calc(100svh - 24px); }
  .zocalo-reserva .reserva__campos {
    grid-template-columns: minmax(152px, 1fr) minmax(152px, 1fr) minmax(0, 1.35fr) minmax(0, 1.15fr) auto;
  }
  .zocalo-reserva .fecha__boton [data-fecha-texto],
  .zocalo-reserva .lista__boton [data-lista-texto] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* entre 1101 y 1279 px el formulario no entra en una fila: va debajo del hero, en dos columnas */
@media (min-width: 1101px) and (max-width: 1279px) {
  .hero--reserva { padding-bottom: 0; min-height: 100svh; }
  .hero--reserva + .zocalo-reserva { margin-top: 0; background: #0d0d0d; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .zocalo-reserva .reserva { padding-right: var(--margen); }
  .zocalo-reserva .reserva__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zocalo-reserva .reserva__acciones { grid-column: 1 / -1; }
}

/* --- Ajuste v126: rent a car — el formulario queda completo en la primera pantalla
       también en pantallas bajas (notebooks) ------------------------------- */
@media (min-width: 1280px) {
  .hero--reserva { min-height: 100svh; }
  .hero--reserva .hero__contenido {
    padding-top: clamp(96px, 13vh, 170px);
    padding-bottom: clamp(20px, 5vh, 70px);
  }
}
/* alto fijo del zócalo = lo que sube sobre el hero, así la línea amarilla termina justo en el borde de la pantalla */
@media (min-width: 1280px) {
  .hero--reserva { --alto-zocalo: clamp(152px, calc(77px + 6.78vw), 178px); padding-bottom: var(--alto-zocalo); }
  .hero--reserva + .zocalo-reserva {
    height: clamp(152px, calc(77px + 6.78vw), 178px);
    margin-top: calc(-1 * clamp(152px, calc(77px + 6.78vw), 178px));
    display: flex; align-items: center;
  }
  .hero--reserva + .zocalo-reserva .reserva { width: 100%; padding-top: 0; padding-bottom: 0; }
}


/* =========================================================================
   Página de telemetría — estética de tablero de control
   Todo va dentro de .pagina-tablero, así no afecta al resto del sitio.
   ========================================================================= */
.pagina-tablero .seccion {
  position: relative;
}
.pagina-tablero .seccion > .contenedor { position: relative; z-index: 1; }

/* --- banda de indicadores ------------------------------------------------ */
.tele-banda .banda__valor { font-size: clamp(20px, 2vw, 30px); letter-spacing: .01em; }
.tele-banda .banda__rotulo { color: var(--amarillo); }

/* --- tarjetas con mini gráfico ------------------------------------------- */
.pagina-tablero .grupo { position: relative; overflow: hidden; }
.tele-mini {
  display: block; width: 100%; max-width: 190px;
  margin: clamp(10px, 1.2vw, 16px) 0 clamp(12px, 1.4vw, 18px);
}
.tele-mini svg { width: 100%; height: auto; display: block; }
.tele-mini__linea { fill: none; stroke: var(--amarillo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tele-mini__area { fill: rgba(255,197,28,.14); stroke: none; }
.tele-mini__punto { fill: var(--amarillo); }
.tele-mini__barra { fill: rgba(255,255,255,.18); }
.tele-mini__barra--fuerte { fill: var(--amarillo); }
.tele-mini__arco { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3; stroke-linecap: round; }
.tele-mini__arco--fuerte { stroke: var(--amarillo); }
.tele-mini__aguja { stroke: var(--blanco); stroke-width: 2.4; stroke-linecap: round; }

/* --- panel con barra superior -------------------------------------------- */
.tele-panel { padding: 0; overflow: hidden; }
.tele-panel__barra {
  display: flex; align-items: center; gap: 14px;
  padding: 12px clamp(16px, 1.8vw, 24px);
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(180deg, rgba(255,197,28,.10) 0%, rgba(255,197,28,0) 100%);
}
.tele-panel__luces { display: inline-flex; gap: 6px; }
.tele-panel__luces i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.tele-panel__luces i:first-child { background: var(--amarillo); }
.tele-panel__titulo {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blanco);
}
.tele-panel__estado {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amarillo);
}
.tele-panel__estado::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amarillo); box-shadow: 0 0 0 4px rgba(255,197,28,.18);
}
.tele-panel .comparativa-envoltorio,
.tele-panel .chequeo { padding: clamp(18px, 2vw, 28px) clamp(16px, 1.8vw, 26px); }
.chequeo--panel .chequeo__item {
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: rgba(255,255,255,.022);
  transition: border-color var(--transicion), background var(--transicion);
}
.chequeo--panel .chequeo__item:hover { border-color: rgba(255,197,28,.5); background: rgba(255,197,28,.05); }

/* --- pasos como flujo del dato ------------------------------------------- */
.tele-flujo { position: relative; }
.tele-flujo .paso { position: relative; }
.tele-flujo .paso__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(64px, 5.6vw, 84px); height: clamp(64px, 5.6vw, 84px);
  padding: 0; box-sizing: border-box;
  font-size: clamp(24px, 2.3vw, 34px); letter-spacing: 0;
  border: 1px solid rgba(255,197,28,.45); border-radius: 50%;
  background: rgba(255,197,28,.10);
  color: var(--amarillo);
  line-height: 1;
}

/* --- preguntas frecuentes dentro del tablero ----------------------------- */
.faq--pagina { border-top: 0; padding-top: 0; }

/* telemetría: bajada y párrafo del bloque Geotab, mismo tamaño */
.pagina-tablero .mixto .bajada-seccion {
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: 1.75;
}

/* volanta de sección (industrias y sustentabilidad) */
.rotulo {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: clamp(10px, 1.1vw, 16px);
}
.seccion__cabeza--centro .rotulo { text-align: center; }

/* --- Industrias dentro del desplegable de servicios ---------------------- */
.menu__grupo { margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255,197,28,.22); }
.menu__grupo-titulo {
  display: block; padding: 8px 16px 4px;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-claro);
}
.menu__sublista { margin: 0; padding: 0; list-style: none; }
.menu__sublista a { padding-left: 28px; }
@media (max-width: 1180px) {
  .menu__grupo { margin-top: 0; padding-top: 0; border-top: 0; }
  .menu__grupo-titulo { padding: 14px 0 6px 18px; color: var(--gris-medio); }
  .menu__sublista a { padding-left: 34px; }
}

/* Oil & Gas: corre la foto a la derecha y aclara el velo sobre la camioneta */
.hero__media img[src$="oil-and-gas-yacimiento.webp"] {
  object-position: right center;
  transform: translateX(14%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 16%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 16%);
}
.hero:has(img[src$="oil-and-gas-yacimiento.webp"]) .hero__velo--diagonal {
  background: linear-gradient(100deg,
    rgba(8,8,8,.95) 0%, rgba(8,8,8,.80) 30%,
    rgba(8,8,8,.24) 58%, rgba(8,8,8,.42) 100%);
}

/* Minería: corre la foto a la derecha y aclara el velo */
.hero__media img[src$="mineria-yacimiento.webp"] {
  object-position: right center;
  transform: translateX(13%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 15%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 15%);
}
.hero:has(img[src$="mineria-yacimiento.webp"]) .hero__velo--diagonal {
  background: linear-gradient(100deg,
    rgba(8,8,8,.95) 0%, rgba(8,8,8,.80) 30%,
    rgba(8,8,8,.24) 58%, rgba(8,8,8,.42) 100%);
}

/* cabecera de sección partida en dos columnas */
.seccion__cabeza--partida { max-width: none; }
.seccion__cabeza--partida .bajada-seccion { margin-top: 0; }
@media (min-width: 900px) {
  .seccion__cabeza--partida {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: end;
  }
}

/* --- Pilares con ícono (industrias) -------------------------------------- */
.pilares {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 54px);
}
.pilar { position: relative; padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid var(--linea); }
.pilar__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  border: 1px solid rgba(255,197,28,.4);
  background: rgba(255,197,28,.08);
}
.pilar__icono svg { width: 26px; height: 26px; fill: none; stroke: var(--amarillo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pilar__titulo { font-size: clamp(15px, 1.2vw, 18px); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-top: clamp(12px, 1.4vw, 18px); }
.pilar__texto { font-size: var(--t-chico); font-weight: 400; line-height: 1.65; color: var(--gris-claro); margin-top: 8px; }
@media (max-width: 900px) {
  .pilares { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 4vw, 28px); }
}

/* la raya amarilla queda centrada entre el título y el texto que sigue */
.titulo-seccion::after,
.contacto__titulo::after {
  margin-top: clamp(12px, 1.3vw, 18px);
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.titulo-seccion + .bajada-seccion,
.titulo-seccion + .parrafo,
.contacto__titulo + .contacto__bajada { margin-top: 0; }

/* la tarjeta entera del carrusel lleva al servicio */
.tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* tarjeta de industrias: dos botones en lugar de un solo destino */
.tarjeta__foto--industrias { object-position: 42% 50%; transform: scale(1.3); transform-origin: 42% 88%; }
.tarjeta__botones {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(12px, 1.2vw, 18px);
  position: relative; z-index: 3;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transicion);
}
.tarjeta--industrias.abierta .tarjeta__botones,
.carrusel:hover .tarjeta--industrias:hover .tarjeta__botones { opacity: 1; visibility: visible; }
.carrusel:hover .tarjeta--industrias.abierta:not(:hover) .tarjeta__botones { opacity: 0; visibility: hidden; }

/* el carrusel ahora tiene cinco tarjetas: entran todas en el ancho */
@media (min-width: 1181px) {
  .tarjeta { width: clamp(124px, 10.4vw, 158px); }
  .tarjeta.abierta,
  .carrusel:hover .tarjeta:hover { width: clamp(262px, 23vw, 356px); }
  .carrusel:hover .tarjeta.abierta:not(:hover) { width: clamp(124px, 10.4vw, 158px); }
}
@media (max-width: 1180px) {
  .tarjeta--industrias .tarjeta__botones { opacity: 1; visibility: visible; }
}
.tarjeta__botones .boton--contorno:focus-visible,
.tarjeta__botones .boton--contorno:active {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--negro);
}

/* ficha de industrias en Nosotros: dos destinos */
.ficha--industrias .ficha__icono { grid-row: 1 / span 4; }
.ficha__botones {
  grid-column: 2; grid-row: 4;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 14px;
}

/* telemetría: texto dentro de un panel */
.tele-panel__cuerpo { padding: clamp(20px, 2.2vw, 32px) clamp(18px, 2vw, 30px); }
.tele-panel__cuerpo .parrafo + .parrafo { margin-top: clamp(10px, 1.1vw, 16px); }
.tele-panel__cuerpo .titulo-seccion { max-width: 24em; }
.chequeo--dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(14px, 1.6vw, 26px); }
@media (max-width: 760px) {
  .chequeo--dos { grid-template-columns: minmax(0, 1fr); }
}
.mixto__texto .parrafo + .parrafo,
.seccion__cabeza .parrafo + .parrafo { margin-top: clamp(10px, 1.1vw, 16px); }


/* --- Telemetría: bloque con ícono grande ---------------------------------- */
.bloque-icono {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid var(--linea);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,197,28,.06) 0%, rgba(255,255,255,.01) 46%);
}
.bloque-icono__marca {
  display: flex; align-items: center; justify-content: center;
  width: clamp(64px, 6vw, 92px); height: clamp(64px, 6vw, 92px);
  border-radius: 22px;
  border: 1px solid rgba(255,197,28,.45);
  background: rgba(255,197,28,.1);
}
.bloque-icono__marca svg {
  width: 52%; height: 52%; fill: none; stroke: var(--amarillo);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 760px) {
  .bloque-icono { grid-template-columns: minmax(0, 1fr); }
}

/* --- Telemetría: etiquetas de eventos ------------------------------------ */
.etiquetas {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(10px, 1.1vw, 14px);
}
.etiqueta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: var(--t-chico); color: var(--gris-claro);
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.etiqueta:hover { border-color: rgba(255,197,28,.55); color: var(--blanco); background: rgba(255,197,28,.05); }
.etiqueta__icono { display: inline-flex; width: 22px; height: 22px; }
.etiqueta__icono svg { width: 100%; height: 100%; fill: none; stroke: var(--amarillo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.parrafo--cierre { margin-top: clamp(18px, 2vw, 28px); max-width: 52em; }

/* --- Telemetría: indicadores de Eco-Drive -------------------------------- */
.tele-kpis {
  list-style: none; margin: 0; padding: 0;
  columns: 3; column-gap: clamp(24px, 3vw, 56px);
}
.tele-kpi {
  break-inside: avoid;
  display: flex; align-items: baseline; gap: 12px;
  padding: clamp(11px, 1.2vw, 15px) 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-chico); color: var(--gris-claro);
  transition: color var(--transicion), border-color var(--transicion);
}
.tele-kpi:hover { color: var(--blanco); border-color: rgba(255,197,28,.45); }
.tele-kpi__n {
  font-family: var(--fuente-titulo); font-weight: 800;
  font-size: var(--t-micro); letter-spacing: .08em;
  color: var(--amarillo); flex: none;
}
@media (max-width: 1000px) { .tele-kpis { columns: 2; } }
@media (max-width: 620px)  { .tele-kpis { columns: 1; } }

/* --- Telemetría: grilla de valores con las dos últimas centradas --------- */
@media (min-width: 900px) {
  .tele-valores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tele-valores .grupo { grid-column: span 2; }
  .tele-valores .grupo:nth-child(4) { grid-column: 2 / span 2; }
}

/* --- Telemetría: dos columnas (texto + detalle) -------------------------- */
.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 4vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* --- Telemetría: línea de tiempo del mantenimiento ---------------------- */
.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo::before {
  content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px;
  width: 1px; background: linear-gradient(180deg, rgba(255,197,28,.5), rgba(255,197,28,.08));
}
.hito { position: relative; padding-left: 64px; }
.hito + .hito { margin-top: clamp(22px, 2.6vw, 36px); }
.hito__marca {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 43px; height: 43px; border-radius: 50%;
  border: 1px solid rgba(255,197,28,.45);
  background: var(--negro);
}
.hito__marca svg { width: 21px; height: 21px; fill: none; stroke: var(--amarillo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hito__titulo { font-size: clamp(15px, 1.2vw, 18px); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-top: 8px; }
.hito__texto { font-size: var(--t-chico); line-height: 1.7; color: var(--gris-claro); margin-top: 8px; }

/* --- Telemetría: listado de alertas ------------------------------------- */
.alertas {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
}
.alerta {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: clamp(13px, 1.4vw, 17px) clamp(16px, 1.7vw, 22px);
  transition: background var(--transicion);
}
.alerta + .alerta { border-top: 1px solid var(--linea); }
.alerta:hover { background: rgba(255,197,28,.05); }
.alerta__icono { display: inline-flex; width: 24px; height: 24px; }
.alerta__icono svg { width: 100%; height: 100%; fill: none; stroke: var(--amarillo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.alerta__nombre { font-size: var(--t-chico); color: var(--blanco); }
.alerta__tipo {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-medio);
  padding: 5px 11px; border: 1px solid var(--linea); border-radius: 999px;
}
.alerta:hover .alerta__tipo { color: var(--amarillo); border-color: rgba(255,197,28,.45); }
.dos-columnas__lado .parrafo + .parrafo { margin-top: clamp(10px, 1.1vw, 16px); }
.dos-columnas__lado .aviso { margin-top: clamp(18px, 2vw, 26px); }

/* --- Minería: foto a sangre con la información montada ------------------- */
.panel-foto {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(460px, 44vw, 620px);
  display: flex; align-items: center; justify-content: flex-end;
  border: 1px solid var(--linea);
}
.panel-foto__fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 50%;
}
.panel-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,.9) 72%);
}
.panel-foto__caja {
  position: relative; z-index: 2;
  width: min(100%, 540px);
  margin: clamp(22px, 3vw, 46px);
  padding: clamp(24px, 2.6vw, 38px);
  border: 1px solid rgba(255,197,28,.35);
  border-radius: 18px;
  background: rgba(10,10,10,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.panel-foto__caja .parrafo + .parrafo { margin-top: clamp(10px, 1.1vw, 16px); }
.panel-foto__caja .seccion__acciones { margin-top: clamp(18px, 2vw, 26px); }
@media (max-width: 760px) {
  .panel-foto { min-height: 0; flex-direction: column; }
  .panel-foto__fondo { position: relative; height: 240px; }
  .panel-foto::after { display: none; }
  .panel-foto__caja { width: auto; margin: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; }
}
.seccion--sin-aire { padding-left: 0; padding-right: 0; }
.panel-foto--ancho {
  border-radius: 0; border-left: 0; border-right: 0;
  min-height: clamp(520px, 56vw, 760px);
  padding-right: clamp(20px, 6vw, 96px);
}
.panel-foto--ancho .panel-foto__fondo { object-position: left center; }
.panel-foto--ancho::after {
  background: linear-gradient(90deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.2) 40%, rgba(10,10,10,.75) 62%);
}
@media (max-width: 760px) {
  .panel-foto--ancho { padding-right: 0; min-height: 0; }
  .panel-foto--ancho .panel-foto__caja { margin: 0 var(--margen) clamp(20px,5vw,32px); }
}
/* un poco más de aire entre las líneas del título del hero */
.hero__titulo { line-height: 1.12; }
/* el video del hero es decorativo: sin controles ni botón de play */
.hero__video { pointer-events: none; }
.hero__video::-webkit-media-controls { display: none !important; }
.hero__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* los títulos de tarjetón que enlazan mantienen el color del texto */
.tarjeton__titulo a { color: inherit; }
.tarjeton__titulo a:hover { color: var(--amarillo); }