/* ============================================================================
 * TRANSPORTES EJECUTIVOS GÁMEZ · hoja de estilo
 * ----------------------------------------------------------------------------
 * DOS TEMAS, UNA SOLA HOJA
 * Ningún color está escrito a mano fuera del bloque de variables. Cada uno
 * tiene un NOMBRE POR SU PAPEL, no por su color: --fondo, --texto, --tinta.
 * Así el tema claro es sólo otra lista de valores y no una segunda hoja que
 * mantener. Si escribes un #hex más abajo, rompes el tema claro.
 *
 * La paleta sigue siendo gris, blanco y negro, y eso vale para la INTERFAZ.
 * Las FOTOS van a color: es como se ven las unidades de verdad.
 *
 * El único color cálido de la interfaz es el dorado que ya trae el escudo
 * dentro de su propia imagen. Si además se pintaran botones dorados, el logo
 * dejaría de destacar.
 *
 * MOVIMIENTO: hay mucho, a propósito. Todo respeta prefers-reduced-motion al
 * final del archivo, que lo apaga de golpe para quien lo pida en su sistema.
 *
 * ORDEN DEL ARCHIVO
 *   1. Variables, los dos temas y la base
 *   2. Utilidades: contenedor, títulos, botones, revelados
 *   3. Pantalla de carga
 *   4. Geometría de fondo
 *   5. Barra superior y los dos interruptores
 *   6. Portada
 *   7. Cinta de zonas
 *   8. Pilares
 *   9. Flota y recorridos (la tarjeta) · 9b. El carrusel 3D
 *  10. Empresa
 *  11. Zonas
 *  12. Pasos
 *  13. Galería
 *  14. Contacto y pie
 *  15. Modal
 *  16. Botón flotante
 *  17. Tableta y celular
 *  18. Menos movimiento
 * ========================================================================== */

/* ==========================================================================
   1 · VARIABLES, LOS DOS TEMAS Y LA BASE
   ========================================================================== */

:root {
  /* --- Tipografía y medidas: iguales en los dos temas ------------------- */
  --serif: 'Cormorant Garamond', 'Didot', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ancho: 1240px;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --curva-elastica: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* La del carrusel. La --curva de la casa es un frenazo: se come el 90% del
     camino en la cuarta parte del tiempo y luego se arrastra, y en una fila
     de tarjetas eso se lee como un tirón seguido de un renqueo. Ésta reparte
     el movimiento y llega entera. */
  --curva-cover: cubic-bezier(0.25, 0.85, 0.28, 1);

  /* --- TEMA OSCURO (el de fábrica) -------------------------------------- */
  --fondo:        #08080a;
  --fondo-2:      #0c0c10;
  --superficie:   rgba(255, 255, 255, 0.035);
  --superficie-2: #121217;
  --superficie-3: #17171d;

  --texto:   #f4f4f6;
  --texto-2: #a4a4ae;
  --texto-3: #6b6b76;

  --linea:      rgba(255, 255, 255, 0.09);
  --linea-viva: rgba(255, 255, 255, 0.22);

  /* El relleno de los botones principales y el texto que va encima. */
  --tinta:       #f4f4f6;
  --sobre-tinta: #08080a;

  /* La luz: brillos, halos y reflejos. En claro se vuelve sombra. */
  --luz:      rgba(255, 255, 255, 0.5);
  --luz-suave: rgba(255, 255, 255, 0.12);
  --geo:      rgba(255, 255, 255, 0.075);
  --geo-flojo: rgba(255, 255, 255, 0.05);
  --grano: 0.5;

  /* El degradado que va sobre las fotos para que se lea el texto blanco de
     encima. Es oscuro en los DOS temas: el texto sobre foto siempre es
     blanco, porque la foto puede ser de cualquier color. */
  --velo-foto: rgba(6, 6, 9, 0.92);

  --sombra-alta: 0 26px 60px rgba(0, 0, 0, 0.55);
  --sombra-baja: 0 10px 26px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* --- TEMA CLARO -----------------------------------------------------------
   No es "el oscuro con los colores al revés". Un blanco puro cansa la vista y
   deja los filetes invisibles, así que el fondo es un hueso muy tenue, las
   líneas suben de opacidad -sobre blanco hace falta más contraste para que se
   vean- y el grano casi se apaga, porque sobre claro se nota como suciedad.
   -------------------------------------------------------------------------- */
:root[data-tema="claro"] {
  --fondo:        #f4f4f2;
  --fondo-2:      #ececea;
  --superficie:   rgba(12, 12, 16, 0.028);
  --superficie-2: #ffffff;
  --superficie-3: #fbfbfa;

  --texto:   #0d0d11;
  --texto-2: #55555f;
  --texto-3: #86868f;

  --linea:      rgba(12, 12, 16, 0.13);
  --linea-viva: rgba(12, 12, 16, 0.32);

  --tinta:       #0d0d11;
  --sobre-tinta: #f7f7f5;

  --luz:      rgba(12, 12, 16, 0.28);
  --luz-suave: rgba(12, 12, 16, 0.07);
  --geo:      rgba(12, 12, 16, 0.08);
  --geo-flojo: rgba(12, 12, 16, 0.05);
  --grano: 0.12;

  --sombra-alta: 0 26px 60px rgba(20, 20, 30, 0.14);
  --sombra-baja: 0 10px 26px rgba(20, 20, 30, 0.1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Que la página no se pueda correr de lado NUNCA. El overflow-x del body ya
     lo impedía en el escritorio, pero en el teléfono no siempre: basta con
     que algo se salga un poco por un costado para que el dedo pueda pasear la
     página, y al bajar en diagonal -que es como se baja con el pulgar- se va
     de lado. Se pone aquí ADEMÁS de en el body, y con 'clip' y no 'hidden'
     para no convertir la raíz en un contenedor con scroll propio. */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* La barra fija mide unos 80px: sin esto, al saltar a una sección el título
     se queda escondido debajo de ella. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto-2);
  font-family: var(--sans);
  font-weight: 300;
  /* 17px y no 16: en celular es la diferencia entre leer y entrecerrar los
     ojos, y en pantalla grande no se nota de más. */
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.004em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Mientras la pantalla de carga -o el cuadro de cotizar- está puesta, la
   página de atrás no se puede mover. */
body.quieto { overflow: hidden; }

/* El cambio de tema se anima SOLO en el momento de tocar el botón. Dejar una
   transición de color permanente en todo haría que cada hover arrastrara. El
   JS pone esta clase medio segundo y la quita. */
html.cambiando-tema,
html.cambiando-tema * {
  transition: background-color 0.5s var(--curva-suave),
              color 0.5s var(--curva-suave),
              border-color 0.5s var(--curva-suave),
              fill 0.5s var(--curva-suave) !important;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; }
p { margin: 0 0 1.1em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--tinta); color: var(--sobre-tinta); }

:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Barra de progreso de lectura, pegada arriba del todo. */
.progreso {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 0;
  z-index: 90;
  background: linear-gradient(90deg, transparent, var(--texto));
  box-shadow: 0 0 18px var(--luz-suave);
  transition: width 0.1s linear;
}

/* ==========================================================================
   2 · UTILIDADES
   ========================================================================== */

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.seccion {
  position: relative;
  padding: clamp(4.5rem, 10vw, 9.5rem) 0;
}

/* Filete horizontal entre secciones. */
.seccion::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linea) 22%, var(--linea) 78%, transparent);
}

.antetitulo {
  margin: 0 0 1.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--texto-3);
  display: flex;
  /* flex-start y no center: cuando el antetítulo ocupa dos o tres líneas -en
     celular pasa siempre-, con center el guioncito se iba a media altura. */
  align-items: flex-start;
  gap: 0.9rem;
}

.antetitulo::before {
  content: '';
  width: 0;
  height: 1px;
  flex: none;
  margin-top: 0.85em;
  background: var(--linea-viva);
  transition: width 1s var(--curva) 0.15s;
}
.antetitulo.visible::before,
.visible .antetitulo::before { width: 48px; }

.titulo-seccion { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* El bloque del título NO usa el revelado genérico: si el conjunto se
   difuminara a la vez que las palabras suben, las dos animaciones se pisarían
   y se vería sucio. Aquí sube cada pieza por su cuenta. */
.titulo-seccion[data-revelar] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* Cada palabra vive en una cajita con el desbordamiento oculto, y su interior
   sube desde fuera. Es lo que hace que las letras parezcan salir de debajo de
   una línea en vez de aparecer sin más. */
.pal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  font-style: inherit;
}
.pal > span,
.pal-entera {
  display: inline-block;
  opacity: 0;
  transform: translateY(105%) rotate(3deg);
}
.titulo-seccion.visible .pal > span,
.titulo-seccion.visible .pal-entera,
.contacto__titulo.visible .pal > span,
.contacto__titulo.visible .pal-entera {
  animation: palabraSube 0.95s var(--curva) forwards;
  animation-delay: calc(var(--i, 0) * 85ms);
}
@keyframes palabraSube {
  to { opacity: 1; transform: none; }
}

/* El antetítulo y el pie del título entran por su cuenta, un poco después. */
.titulo-seccion .antetitulo,
.titulo-seccion__pie {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--curva), transform 0.8s var(--curva);
}
.titulo-seccion.visible .antetitulo { opacity: 1; transform: none; }
.titulo-seccion.visible .titulo-seccion__pie {
  opacity: 1;
  transform: none;
  transition-delay: 0.35s;
}

.titulo-seccion h2,
.contacto__titulo {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--texto);
}

/* La palabra en cursiva es el acento de cada título: serif, más grande que el
   resto de la línea y con un degradado que la hace ver metálica. */
.titulo-seccion h2 em,
.contacto__titulo em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.16em;
  /* El último tono es --texto-2 y no --texto-3: con el más flojo, en
     tema claro las últimas letras de la palabra se perdían contra el
     hueso del fondo. */
  background: linear-gradient(100deg, var(--texto), var(--texto-2) 42%, var(--texto) 68%, var(--texto-2));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: metal 9s ease-in-out infinite;
}

@keyframes metal {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.titulo-seccion__pie {
  margin-top: 1.4rem;
  max-width: 56ch;
  color: var(--texto-2);
  font-size: 1.02rem;
}

/* ---------------------------------------------------------------- Botones */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  /* 52px de alto mínimo: es la medida que recomienda cualquier guía táctil y
     la diferencia entre acertarle al botón con el pulgar o no. */
  min-height: 52px;
  padding: 0.95rem 2rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--linea-viva);
  transition: color 0.4s var(--curva-suave),
              border-color 0.4s var(--curva-suave),
              transform 0.35s var(--curva-suave);
}

.btn--grande { min-height: 60px; padding: 1.2rem 2.6rem; font-size: 0.8rem; }

/* El relleno entra desde abajo en vez de cambiar de golpe: es lo que da la
   sensación de material y no de "botón de formulario". */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform 0.55s var(--curva);
}

.btn--tinta { color: var(--sobre-tinta); border-color: var(--tinta); }
.btn--tinta::before { background: var(--tinta); transform: translateY(0); }
.btn--tinta:hover { color: var(--texto); }
.btn--tinta:hover::before { transform: translateY(-101%); }

.btn--fantasma { color: var(--texto-2); }
.btn--fantasma::before { background: var(--tinta); }
.btn--fantasma:hover { color: var(--sobre-tinta); border-color: var(--tinta); }
.btn--fantasma:hover::before { transform: translateY(0); }

/* El brillo que cruza el botón al pasar el dedo o el ratón. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, var(--luz), transparent);
  transform: skewX(-20deg);
  opacity: 0;
}
.btn:hover::after { animation: brillo 0.9s var(--curva-suave); }

@keyframes brillo {
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: 0.9; }
  100% { left: 130%; opacity: 0; }
}

/* Botón imantado: el JS escribe --ix/--iy con cuánto se ha acercado el cursor
   y el botón se inclina hacia él. Sólo con ratón; en celular no hay hover que
   valga y las variables se quedan en cero. */
.btn--iman {
  --ix: 0px;
  --iy: 0px;
  transform: translate3d(var(--ix), var(--iy), 0);
}
.btn--iman:hover { transform: translate3d(var(--ix), calc(var(--iy) - 2px), 0); }
.btn:not(.btn--iman):hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

/* ------------------------------------------------------------- Revelados */
[data-revelar] {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition: opacity 0.9s var(--curva),
              transform 0.9s var(--curva),
              filter 0.9s var(--curva);
}
[data-revelar].visible { opacity: 1; transform: none; filter: none; }

/* ==========================================================================
   3 · PANTALLA DE CARGA
   ========================================================================== */

.carga {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: var(--fondo);
  transition: visibility 0s linear 1.1s;
}

.carga__telon {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.2%;
  background: var(--fondo);
  transition: transform 1s var(--curva);
}
.carga__telon--arriba { top: 0; }
.carga__telon--abajo  { bottom: 0; }

.carga.fuera { visibility: hidden; pointer-events: none; }
.carga.fuera .carga__telon--arriba { transform: translateY(-100%); }
.carga.fuera .carga__telon--abajo  { transform: translateY(100%); }
.carga.fuera .carga__centro,
.carga.fuera .carga__nombre,
.carga.fuera .carga__lema,
.carga.fuera .carga__barra {
  opacity: 0;
  transform: translateY(-18px) scale(0.96);
  transition: opacity 0.45s ease, transform 0.6s var(--curva);
}

.carga__centro {
  position: relative;
  z-index: 2;
  width: min(58vw, 260px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  /* El barrido de luz es una franja mucho más ancha que el escudo: sin este
     recorte se le veía el rabo saliendo por un lado de la pantalla. */
  overflow: hidden;
}

.carga__anillo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  fill: none;
}
.carga__anillo-base  { stroke: var(--linea); stroke-width: 1; }
.carga__anillo-traza {
  stroke: var(--texto);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 704;
  stroke-dashoffset: 704;
  animation: trazar 2.1s var(--curva) 0.25s forwards;
}
.carga__anillo-punto {
  stroke: var(--linea-viva);
  stroke-width: 1;
  stroke-dasharray: 2 12;
  transform-origin: 120px 120px;
  animation: girar 14s linear infinite;
}

@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes girar  { to { transform: rotate(360deg); } }

.carga__marco { position: absolute; inset: 8%; }
.esquina {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0;
  animation: esquinaEntra 0.7s var(--curva) forwards;
}
.esquina::before, .esquina::after {
  content: '';
  position: absolute;
  background: var(--linea-viva);
}
.esquina::before { width: 100%; height: 1px; }
.esquina::after  { width: 1px; height: 100%; }

.esquina--si { top: 0; left: 0; animation-delay: 0.35s; }
.esquina--sd { top: 0; right: 0; animation-delay: 0.45s; }
.esquina--sd::after { right: 0; }
.esquina--ii { bottom: 0; left: 0; animation-delay: 0.55s; }
.esquina--ii::before { bottom: 0; }
.esquina--id { bottom: 0; right: 0; animation-delay: 0.65s; }
.esquina--id::before { bottom: 0; }
.esquina--id::after  { right: 0; }

@keyframes esquinaEntra {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

.carga__logo {
  position: relative;
  z-index: 2;
  width: 66%;
  opacity: 0;
  transform: scale(0.72);
  filter: drop-shadow(var(--sombra-alta));
  animation: logoEntra 1.5s var(--curva) 0.35s forwards,
             logoLatido 4.5s ease-in-out 2s infinite;
}

@keyframes logoEntra {
  0%   { opacity: 0; transform: scale(0.72) rotate(-8deg); filter: blur(14px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
@keyframes logoLatido {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.035) translateY(-5px); }
}

.carga__brillo {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, var(--luz-suave) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: barrido 2.6s var(--curva-suave) 1.1s infinite;
}
@keyframes barrido {
  0%        { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

.carga__nombre {
  position: relative;
  z-index: 2;
  margin: 1.6rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--texto);
  text-align: center;
  display: flex;
  gap: 0.02em;
}
.carga__nombre .letra {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  animation: letraEntra 0.6s var(--curva) forwards;
}
.carga__nombre .espacio { width: 0.45em; }

@keyframes letraEntra { to { opacity: 1; transform: none; } }

.carga__lema {
  position: relative;
  z-index: 2;
  margin: 0.7rem 0 0;
  font-size: 0.64rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--texto-3);
  text-align: center;
  padding-inline: 1.5rem;
  opacity: 0;
  animation: aparecer 0.9s ease 1.6s forwards;
}
@keyframes aparecer { to { opacity: 1; } }

.carga__barra {
  position: relative;
  z-index: 2;
  margin-top: 2.4rem;
  width: min(56vw, 240px);
  height: 1px;
  background: var(--linea);
  overflow: hidden;
}
.carga__barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--texto);
  transition: width 0.3s var(--curva-suave);
}

/* ==========================================================================
   4 · GEOMETRÍA DE FONDO
   ========================================================================== */

.geo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.geo__rejilla {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(var(--geo-flojo) 1px, transparent 1px),
    linear-gradient(90deg, var(--geo-flojo) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
  animation: derivar 40s linear infinite;
}
@keyframes derivar { to { transform: translate3d(74px, 74px, 0); } }

.geo__trazos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--geo);
  stroke-width: 1;
}

.geo__circulo { transform-origin: center; }
.geo__circulo--1 { animation: flotarGeo 22s ease-in-out infinite; }
.geo__circulo--2 { animation: flotarGeo 30s ease-in-out infinite reverse; stroke-dasharray: 3 14; }
.geo__circulo--3 { animation: pulsarGeo 12s ease-in-out infinite; }

.geo__poli { stroke: var(--geo-flojo); transform-origin: center; }
.geo__poli--1 { animation: rotarGeo 60s linear infinite; }
.geo__poli--2 { animation: rotarGeo 44s linear infinite reverse; }

.geo__cuadro {
  stroke: var(--geo-flojo);
  transform-origin: 910px 520px;
  animation: rotarGeo 38s linear infinite;
}

.geo__linea { stroke: var(--geo-flojo); }
.geo__linea--2 { stroke-dasharray: 5 18; animation: correrGuion 30s linear infinite; }

@keyframes flotarGeo {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-26px) scale(1.04); }
}
@keyframes pulsarGeo {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.12); }
}
@keyframes rotarGeo { to { transform: rotate(360deg); } }
@keyframes correrGuion { to { stroke-dashoffset: -460; } }

.geo__halo {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--luz-suave), transparent 70%);
}
.geo__halo--1 {
  width: 52vw; height: 52vw;
  top: -16vw; right: -12vw;
  animation: flotarGeo 26s ease-in-out infinite;
}
.geo__halo--2 {
  width: 44vw; height: 44vw;
  bottom: -14vw; left: -10vw;
  animation: flotarGeo 34s ease-in-out infinite reverse;
}

/* Grano finísimo en SVG: sin él los degradados grandes se ven a bandas. */
.geo__grano {
  position: absolute;
  inset: 0;
  opacity: var(--grano);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.barra, main, .pie, .modal, .flotante, .cinta { position: relative; z-index: 2; }

/* ==========================================================================
   5 · BARRA SUPERIOR
   ========================================================================== */

.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.05rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid transparent;
  transition: padding 0.5s var(--curva), background 0.5s var(--curva-suave),
              border-color 0.5s var(--curva-suave);
}

.barra.pegada {
  padding-block: 0.6rem;
  background: color-mix(in srgb, var(--fondo) 84%, transparent);
  /* OJO CON ESTA LÍNEA: es la más cara de toda la hoja.
     La barra está fija encima de todo, así que el navegador tiene que volver
     a difuminar lo que hay detrás CADA VEZ que algo se mueve debajo: en cada
     fotograma del scroll y en cada fotograma del carrusel. Se bajó el radio y
     se quitó el saturate -que es una segunda pasada de filtro-, y en el
     teléfono se apaga del todo un poco más abajo. */
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border-bottom-color: var(--linea);
}

.barra__marca { display: flex; align-items: center; gap: 0.8rem; margin-right: auto; }

.barra__logo {
  width: 46px;
  filter: drop-shadow(var(--sombra-baja));
  transition: transform 0.6s var(--curva);
}
.barra__marca:hover .barra__logo { transform: rotate(-6deg) scale(1.09); }

.barra__texto { display: flex; flex-direction: column; line-height: 1.1; }
.barra__texto strong {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.barra__texto em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--texto);
}

.barra__nav { display: flex; gap: 1.7rem; }

/* Cuando se va la pantalla de carga, el JS pone .entrada en el body y la barra
   se monta pieza a pieza en vez de estar ya puesta. Dura menos de un segundo y
   es lo primero que ve el visitante despues del logo. */
body.entrada .barra__marca,
body.entrada .barra__nav a,
body.entrada .mandos,
body.entrada .barra__cta,
body.entrada .barra__menu {
  animation: barraEntra 0.7s var(--curva) backwards;
}
body.entrada .barra__marca      { animation-delay: 0.05s; }
body.entrada .barra__nav a:nth-child(1) { animation-delay: 0.16s; }
body.entrada .barra__nav a:nth-child(2) { animation-delay: 0.22s; }
body.entrada .barra__nav a:nth-child(3) { animation-delay: 0.28s; }
body.entrada .barra__nav a:nth-child(4) { animation-delay: 0.34s; }
body.entrada .barra__nav a:nth-child(5) { animation-delay: 0.40s; }
body.entrada .barra__nav a:nth-child(6) { animation-delay: 0.46s; }
body.entrada .mandos            { animation-delay: 0.54s; }
body.entrada .barra__cta        { animation-delay: 0.62s; }
body.entrada .barra__menu       { animation-delay: 0.54s; }

@keyframes barraEntra {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
.barra__nav a {
  position: relative;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding-block: 0.35rem;
  transition: color 0.35s var(--curva-suave);
}
.barra__nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--texto);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--curva);
}
.barra__nav a:hover { color: var(--texto); }
.barra__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.barra__nav a.activo { color: var(--texto); }
.barra__nav a.activo::after { transform: scaleX(1); }

/* ----------------------------------------- Los dos interruptores (mandos) */

.mandos { display: flex; align-items: center; gap: 0.5rem; }

.mando {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linea);
  color: var(--texto-2);
  overflow: hidden;
  transition: color 0.35s, border-color 0.35s, transform 0.4s var(--curva-elastica);
}
.mando:hover { color: var(--texto); border-color: var(--linea-viva); transform: translateY(-2px); }
.mando:active { transform: scale(0.92); }

.mando svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* El de idioma lleva el globo y las dos letras encima del globo, no al lado:
   así los dos mandos miden lo mismo y la barra no baila al cambiar de EN a
   ES. */
.mando--idioma svg { position: absolute; opacity: 0.4; }
.mando--idioma span {
  position: relative;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* El sol y la luna están los dos en el DOM y sólo se cruzan girando. */
.mando--tema .mando__sol,
.mando--tema .mando__luna {
  position: absolute;
  display: grid;
  place-items: center;
  transition: transform 0.6s var(--curva), opacity 0.4s var(--curva-suave);
}
.mando--tema .mando__sol  { transform: rotate(0deg)   scale(1);   opacity: 1; }
.mando--tema .mando__luna { transform: rotate(-90deg) scale(0.4); opacity: 0; }

:root[data-tema="claro"] .mando--tema .mando__sol  { transform: rotate(90deg) scale(0.4); opacity: 0; }
:root[data-tema="claro"] .mando--tema .mando__luna { transform: rotate(0deg)  scale(1);   opacity: 1; }

.barra__cta { min-height: 44px; padding: 0.7rem 1.4rem; font-size: 0.64rem; }

.barra__menu {
  display: none;
  width: 46px; height: 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--linea);
}
.barra__menu span {
  display: block;
  width: 20px; height: 1px;
  background: var(--texto);
  transition: transform 0.45s var(--curva), opacity 0.3s;
}
.barra__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.barra__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.barra__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   6 · PORTADA
   ========================================================================== */

.portada {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 7.2rem clamp(1.25rem, 4vw, 2.5rem) 4.2rem;
  overflow: hidden;
  /* El JS escribe aquí --sy: cuánto se ha bajado la página, de 0 a 1.
     Las capas de la portada lo leen y cada una se mueve a distinta velocidad;
     eso, y no otra cosa, es el parallax. Vive en la SECCIÓN y no en la foto
     para que el texto también pueda leerlo. */
  --sy: 0;
}

/* --- La foto -------------------------------------------------------------
   Ocupa la pantalla entera y hace dos cosas a la vez:

     · se acerca despacio y para siempre (Ken Burns), un 8%; más que eso se
       nota como un vídeo y marea
     · se desplaza con el scroll, y MÁS que el texto que lleva encima

   Ese desfase es lo que da la sensación de profundidad: el fondo queda atrás.
   Las tres capas van a 110px, 60px y -46px por pantalla de scroll. */
.portada__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.portada__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 62% y no 50%: la camioneta está en la mitad de abajo del encuadre. */
  object-position: 50% 62%;
  transform: translate3d(0, calc(var(--sy) * 110px), 0);
  animation: acercar 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes acercar {
  from { scale: 1.03; }
  to   { scale: 1.11; }
}

/* EL OSCURECIDO, QUE AQUÍ ES LO QUE MÁS TRABAJA
   La camioneta es BLANCA y está sobre una pared iluminada: si se deja la foto
   como viene, no hay texto blanco que se lea encima. Son tres capas y cada
   una tiene su encargo:

     de lado    abre el flanco donde va el texto y deja limpio el de la foto
     de arriba  tapa por detrás de la barra y funde el pie con el fondo de la
                página, para que no se vea el corte entre portada y sección
     viñeta     cierra las esquinas y concentra la vista en el centro

   Fundir con var(--fondo) y no con negro es lo que hace que la costura
   tampoco se vea en el tema claro. */
.portada__velo {
  position: absolute;
  inset: 0;
  transform: translate3d(0, calc(var(--sy) * 60px), 0);
  background:
    linear-gradient(96deg,
      rgba(3, 3, 6, 0.93) 0%, rgba(3, 3, 6, 0.74) 40%,
      rgba(3, 3, 6, 0.24) 74%, rgba(3, 3, 6, 0.46) 100%),
    linear-gradient(180deg,
      rgba(3, 3, 6, 0.9) 0%, rgba(3, 3, 6, 0.12) 28%,
      rgba(3, 3, 6, 0.34) 62%, var(--fondo) 100%);
}
.portada__vineta {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 86% 76% at 46% 54%, transparent 32%, rgba(2, 2, 4, 0.7) 100%);
}

/* --- Geometría propia de la portada -------------------------------------- */
.portada__geo { position: absolute; inset: 0; pointer-events: none; }

.anillo { position: absolute; border-radius: 50%; border: 1px solid var(--linea); }
.anillo--a {
  width: 58vmax; height: 58vmax;
  top: -14vmax; right: -18vmax;
  border-style: dashed;
  animation: rotarGeo 90s linear infinite;
}
.anillo--b {
  width: 34vmax; height: 34vmax;
  bottom: -12vmax; right: 6vmax;
  animation: rotarGeo 60s linear infinite reverse;
}
.anillo--c { width: 30vmax; height: 30vmax; top: -8vmax; left: -10vmax; border-style: dashed; animation: rotarGeo 70s linear infinite; }
.anillo--d { width: 20vmax; height: 20vmax; bottom: -8vmax; right: -6vmax; animation: rotarGeo 50s linear infinite reverse; }

.barra-diagonal {
  position: absolute;
  top: 0; left: 46%;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--linea-viva) 40%, transparent);
  transform: rotate(14deg);
  transform-origin: top;
  animation: respirarLinea 8s ease-in-out infinite;
}
@keyframes respirarLinea {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.punto {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.8);
}
.punto--1 { top: 22%; left: 40%; animation: flotarGeo 9s ease-in-out infinite; }
.punto--2 { top: 68%; left: 12%; animation: flotarGeo 13s ease-in-out infinite reverse; }
.punto--3 { top: 38%; right: 14%; animation: pulsarGeo 6s ease-in-out infinite; }

/* --- El contenido --------------------------------------------------------
   Va SIEMPRE en claro, en los dos temas: está encima de una foto nocturna, y
   ahí el blanco es lo único que se lee. Por eso estos colores son de los
   pocos escritos a mano en toda la hoja. */
.portada__contenido {
  position: relative;
  z-index: 3;
  width: min(100%, var(--ancho));
  margin-inline: auto;
  max-width: 720px;
  margin-right: auto;
  color: #dcdce2;
  /* Se mueve en sentido CONTRARIO a la foto y menos: es la capa de delante. */
  transform: translate3d(0, calc(var(--sy) * -46px), 0);
}
.portada__contenido .antetitulo { color: #b6b6c0; }
.portada__contenido .antetitulo::before { background: rgba(255, 255, 255, 0.5); }

/* Aquí iba un segundo escudo, encima del antetítulo. Se quitó: el de la barra
   está a la vista en esta misma pantalla y los dos juntos se leían como un
   error de montaje. No queda hueco -el elemento ya no existe- y el antetítulo
   arranca arriba del todo. */

.portada__titulo {
  font-size: clamp(2.9rem, 7.4vw, 5.6rem);
  font-weight: 200;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 1.15rem;
}
.portada__titulo .linea { display: block; overflow: hidden; }

.portada__titulo .linea--serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  padding-left: 0.04em;
}

/* La tercera línea NO se parte en letras sueltas: el relleno se consigue
   recortando un degradado con el texto entero, y si cada letra fuera su
   propia caja, cada una tendría su propio degradado y se vería a parches. */
/* ---------------------------------------------------------------------
   LA ENTRADA DE LA PORTADA
   Estas animaciones colgaban del CARGAR la página, con retrasos de 0,9 a
   1,5 segundos. Pero la pantalla de carga dura como mínimo 2,3 segundos: para
   cuando se abría el telón ya habían terminado todas detrás de él, y la
   portada aparecía entera y de golpe.

   Ahora cuelgan de .entrada -la clase que pone app.js justo al abrirse el
   telón- y los tiempos se cuentan desde ahí, escalonados: primero el
   antetítulo, después el nombre, el lema, los botones y por último las
   cifras. Es el mismo escalonado que ya tenía la barra de arriba.
   --------------------------------------------------------------------- */
.portada__contenido .antetitulo,
.portada__lema,
.portada__botones,
.portada .cifras,
.portada__bajar { opacity: 0; }

body.entrada .portada__contenido .antetitulo {
  animation: subirSuave 0.9s var(--curva) 0.08s forwards;
}
body.entrada .portada__lema {
  animation: subirSuave 0.9s var(--curva) 0.78s forwards;
}
body.entrada .portada__botones {
  animation: subirSuave 0.9s var(--curva) 0.96s forwards;
}
body.entrada .portada .cifras {
  animation: subirSuave 0.9s var(--curva) 1.14s forwards;
}
body.entrada .portada__bajar {
  animation: aparecer 1s ease 1.5s forwards;
}

.portada__titulo .linea--relleno {
  background: linear-gradient(100deg, #ffffff, #9d9da8 40%, #ffffff 62%, #75757f);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
}
/* La tercera línea del nombre entra después de las dos que se parten en
   letras: app.js las arranca a los 0,2 y 0,36 segundos. */
body.entrada .portada__titulo .linea--relleno {
  animation: subirSuave 0.9s var(--curva) 0.56s forwards,
             metal 8s ease-in-out 2.4s infinite;
}

.portada__titulo .letra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.9em) rotate(6deg);
  animation: letraSube 1s var(--curva) forwards;
}
@keyframes letraSube { to { opacity: 1; transform: none; } }

.portada__lema {
  max-width: 46ch;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  /* Tres líneas: el párrafo entero se lee en "La empresa", aquí sólo engancha
     -y cada línea de más empuja las cifras fuera de la primera pantalla-. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #c2c2cc;
}

.portada__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.9rem;
}
/* Sobre la foto los botones tienen su propio par de colores, fijo. */
.portada__botones .btn--tinta { color: #08080a; border-color: #fff; }
.portada__botones .btn--tinta::before { background: #fff; }
.portada__botones .btn--tinta:hover { color: #fff; }
.portada__botones .btn--fantasma { color: #e6e6ec; border-color: rgba(255, 255, 255, 0.4); }
.portada__botones .btn--fantasma::before { background: #fff; }
.portada__botones .btn--fantasma:hover { color: #08080a; border-color: #fff; }

@keyframes subirSuave {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* --- Las cifras -----------------------------------------------------------
   Antes eran cuatro cajas sueltas con su propio recuadro y parecian una tabla
   de Excel. Ahora son UN solo panel de vidrio partido por filetes finos: es la
   diferencia entre cuatro datos y una ficha tecnica.

   El numero va en serif y grande; el sufijo -/7, %- en una etiqueta aparte,
   mas chico y mas claro, como el volado de una cifra de reloj. Y debajo, un
   filete que se estira solo al entrar en pantalla.
   -------------------------------------------------------------------------- */
.cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(6, 6, 9, 0.55);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.cifras li {
  position: relative;
  padding: 1.2rem 1.15rem 1.15rem;
  transition: background 0.5s var(--curva-suave);
}
.cifras li:hover { background: rgba(255, 255, 255, 0.06); }

/* El filete que separa una cifra de la siguiente. No llega a los bordes: un
   separador de altura completa cierra la caja y la vuelve tabla otra vez. */
.cifras li + li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.cifras b {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  padding-bottom: 0.62rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 500;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.01em;
}
.cifra__sufijo {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #b9b9c4;
  transform: translateY(-0.55em);
}

/* El filete de debajo del numero. Se dibuja solo al arrancar la pagina, uno
   detras de otro, y se estira al pasar el raton.

   OJO CON EL REPARTO: la ENTRADA usa transform y el hover usa width. No es
   capricho: una animacion con fill forwards gana siempre sobre cualquier regla
   declarativa, asi que si las dos tocaran la misma propiedad el hover no haria
   nada. Cada una con la suya, y conviven. */
.cifras b::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 34px;
  background: linear-gradient(90deg, #fff, transparent);
  transform: scaleX(0);
  transform-origin: left;
  animation: fileteEntra 0.9s var(--curva) forwards;
  animation-delay: calc(1.9s + var(--i, 0) * 0.12s);
  transition: width 0.5s var(--curva);
}
@keyframes fileteEntra { to { transform: scaleX(1); } }
.cifras li:hover b::after { width: 58px; }

.cifra__pie {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9c9ca6;
  line-height: 1.45;
}

/* --- La flecha de bajada --------------------------------------------------- */
.portada__bajar {
  position: absolute;
  z-index: 3;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.portada__bajar-linea {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, transparent, #fff);
  animation: bajarLinea 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes bajarLinea {
  0%, 100% { transform: scaleY(0.25); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}
.portada__bajar-texto {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #9c9ca6;
}

/* ==========================================================================
   7 · CINTA DE ZONAS
   OJO CON EL ANCHO: la pista es una tira mucho más ancha que la pantalla. Si
   estuviera en flujo normal le daría su ancho al contenedor y la página se
   iría de lado. Por eso la cinta recorta con overflow y la pista va dentro.
   ========================================================================== */

.cinta {
  overflow: hidden;
  border-block: 1px solid var(--linea);
  padding-block: 1.05rem;
  background: var(--superficie);
  /* Se difumina en los dos extremos: cortada en seco, la cinta se lee como un
     texto truncado; desvanecida, como algo que sigue. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.cinta__pista {
  display: flex;
  gap: 3rem;
  width: max-content;
  /* El JS duplica la lista; por eso mover el 50% deja el bucle sin costura. */
  animation: correrCinta 34s linear infinite;
}
.cinta:hover .cinta__pista { animation-play-state: paused; }

@keyframes correrCinta { to { transform: translateX(-50%); } }

.cinta__pieza {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--texto-3);
  white-space: nowrap;
}
.cinta__pieza::after {
  content: '';
  width: 5px; height: 5px;
  border: 1px solid var(--linea-viva);
  transform: rotate(45deg);
}
.cinta__pieza:nth-child(3n+1) { color: var(--texto); }

/* ==========================================================================
   8 · PILARES
   ========================================================================== */

.pilares__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}

.pilar {
  position: relative;
  padding: clamp(1.7rem, 3.4vw, 2.8rem);
  background: var(--fondo);
  overflow: hidden;
  transition: background 0.6s var(--curva-suave);
}
.pilar:hover { background: var(--superficie-2); }

/* El resplandor que sigue al cursor: el JS escribe --mx y --my. */
.pilar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--luz-suave), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.pilar:hover::before { opacity: 1; }

/* El numero del pilar: grande, en la esquina y HUECO -sólo el contorno-.
   Relleno competiria con el titulo; vacío se lee como una marca de agua y deja
   que el ojo vaya al texto. Al acercarse se llena un poco y se levanta. */
.pilar__numero {
  position: absolute;
  top: 0.4rem;
  right: 1.1rem;
  font-family: var(--serif);
  font-size: clamp(3.6rem, 7vw, 5.2rem);
  font-weight: 500;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--linea-viva);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.5s var(--curva-suave),
              color 0.5s var(--curva-suave),
              transform 0.7s var(--curva);
}
.pilar:hover .pilar__numero {
  color: var(--superficie);
  -webkit-text-stroke-color: var(--texto-3);
  transform: translateY(-6px) scale(1.06);
}

.pilar h3 {
  position: relative;
  margin-top: 3.4rem;      /* el hueco que deja el número de la esquina */
  font-size: 1.42rem;
  font-weight: 500;
  color: var(--texto);
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}
.pilar p { position: relative; margin: 0; font-size: 0.96rem; color: var(--texto-2); }

.pilar::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--texto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--curva);
}
.pilar:hover::after { transform: scaleX(1); }

/* ==========================================================================
   9 · FLOTA Y RECORRIDOS
   Ya no hay rejilla: en todas las pantallas es el mismo carrusel 3D. La
   tarjeta del centro viene al frente y las de al lado se quedan atrás,
   giradas y en penumbra, medio asomadas por los costados. El estilo de la
   TARJETA es el de siempre; lo del carrusel empieza más abajo, en 9b.
   ========================================================================== */

.unidad {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--superficie), transparent);
  border: 1px solid var(--linea);
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(40px);
  transition: border-color 0.5s var(--curva-suave),
              transform 0.7s var(--curva),
              opacity 0.7s var(--curva),
              box-shadow 0.5s var(--curva-suave),
              background 0.5s;
}
.unidad.visible { opacity: 1; transform: none; }

/* TODO LO DE PASAR EL RATÓN VA DETRÁS DE ESTA PUERTA.
   En un teléfono no hay ratón, pero al tocar una tarjeta el navegador le deja
   el :hover puesto hasta que se toca otra cosa. Y este :hover mueve la foto,
   le cambia el filtro, enciende la franja de luz y agranda la esquina: una
   tarjeta grande repintándose entera mientras el dedo arrastra. Era otra de
   las cosas que trababan el carrusel. */
@media (hover: hover) and (pointer: fine) {
  .unidad:hover {
    border-color: var(--linea-viva);
    background: var(--superficie-2);
    box-shadow: var(--sombra-alta);
    transform: translateY(-6px);
    transition: border-color 0.4s, background 0.4s, box-shadow 0.4s, transform 0.25s ease-out;
  }
}

/* Esquina recortada: el detalle geométrico que se repite en toda la página. */
.unidad::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 34px; height: 34px;
  background: linear-gradient(225deg, var(--fondo) 50%, transparent 50%);
  border-left: 1px solid var(--linea);
  transform: translate(1px, -1px);
  pointer-events: none;
  transition: width 0.5s var(--curva), height 0.5s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .unidad:hover::after { width: 54px; height: 54px; }
}

.unidad__foto {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--superficie-3);
}
.unidad__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* La foto no aparece: se DESCUBRE de abajo a arriba, como una cortina. Es lo
     que hace que la rejilla se sienta montada y no cargada de golpe. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--curva), filter 0.7s var(--curva-suave), transform 1.1s var(--curva);
  /* A COLOR. Sólo se baja un punto el brillo para que el precio y el nombre,
     que van encima del degradado, se lean sobre cualquier foto. */
  filter: contrast(1.06) saturate(1.06) brightness(0.9);
  transform: scale(1.04);
}
.unidad.visible .unidad__foto img { clip-path: inset(0 0 0 0); }
@media (hover: hover) and (pointer: fine) {
  .unidad:hover .unidad__foto img {
    filter: contrast(1.08) saturate(1.12) brightness(1.02);
    transform: scale(1.11);
  }
}

.unidad__foto::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, transparent, var(--velo-foto));
  pointer-events: none;
}

/* Una franja de luz cruza la foto al pasar el raton. Va en su propia etiqueta
   y no en un ::before porque la figura ya gasta el ::after en el degradado. */
.unidad__brillo {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .unidad:hover .unidad__brillo { animation: brillo 1.1s var(--curva-suave); }
}

.unidad__etiqueta {
  position: absolute;
  z-index: 2;
  top: 0.95rem; left: 0.95rem;
  padding: 0.36rem 0.72rem;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sobre-tinta);
  background: var(--tinta);
}

.unidad__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
}

.unidad__nombre {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 500;
  color: var(--texto);
  margin-bottom: 0.3rem;
  letter-spacing: -0.015em;
}

.unidad__capacidad {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 1rem;
}

.unidad__texto {
  font-size: 0.94rem;
  color: var(--texto-2);
  margin-bottom: 1.2rem;
  /* Cuatro líneas: la descripción completa la lee quien abra el cuadro, y así
     ninguna tarjeta se estira más que sus vecinas. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.unidad__rasgos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.4rem; }
.unidad__rasgos li {
  padding: 0.32rem 0.72rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
  border: 1px solid var(--linea);
}

.unidad__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
}

.unidad__precio b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.3rem);
  font-weight: 500;
  color: var(--texto);
  line-height: 1;
}
/* MXN o USD. Los dos idiomas usan el signo $, y sin el código "$1,000" y
   "$55" parecen la misma escala. Va en volado, como el sufijo de las cifras
   de la portada. */
.unidad__precio b i {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--texto-3);
  margin-left: 0.5em;
  vertical-align: 0.62em;
}

.unidad__precio span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.unidad__accion {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto);
  white-space: nowrap;
}
.unidad__accion i {
  width: 26px; height: 1px;
  background: var(--texto);
  transition: width 0.5s var(--curva);
}
.unidad:hover .unidad__accion i { width: 44px; }

/* ==========================================================================
   9b · EL CARRUSEL
   --------------------------------------------------------------------------
   PLANO, Y LO MUEVE EL NAVEGADOR.

   Aquí hubo un carrusel en 3D: las de al lado giraban hacia el centro, se
   encogían y se metían por debajo de la del medio. Se veía bien en una
   computadora y en un teléfono nunca acabó de andar, así que se fue entero.
   Lo que queda es una FILA: tarjetas del mismo tamaño, una junto a otra,
   separadas por un hueco de verdad. Sin giros, sin escalas, sin solaparse.

   De ahí salen las dos cosas que hacían falta:

   1. AVANZA. El paso de una tarjeta a la siguiente es su ancho más el
      hueco, y nada más. Sin márgenes negativos, el ancho de la fila es una
      suma honesta y la última tarjeta se centra igual de bien que la
      primera. El imán del scroll-snap para en el centro de cada una.

   2. NO SE TRABA. Mientras el dedo arrastra no cambia de forma ni de sitio
      NADA: lo único que se mueve al pasar de una tarjeta a otra es la
      opacidad de las de al lado, que es de lo poco que un teléfono anima
      sin tener que volver a dibujar la tarjeta.
   ========================================================================== */

.cover {
  /* El ancho de la tarjeta manda: de él salen el hueco de los costados y el
     paso del carrusel. */
  --cover-w: clamp(300px, 30vw, 400px);
  --cover-hueco: 1.4rem;
  position: relative;
}

.cover__escena {
  /* LA CAJA QUE SE DESPLAZA, Y TAMBIÉN LA FILA.
     Las tarjetas cuelgan directamente de aquí; la pista de dentro ya no
     dibuja nada. Cuando la fila era la pista, con ancho max-content, detrás
     de la última tarjeta quedaba un hueco vacío: ese ancho no descontaba los
     márgenes negativos con los que se solapaban. Ya no hay márgenes
     negativos que descontar, pero la fila se queda aquí igual, que es donde
     el ancho no se calcula sino que se mide. */
  display: flex;
  align-items: stretch;      /* todas del alto de la más alta, gratis */
  gap: var(--cover-hueco);
  overflow-x: auto;
  /* OJO: aquí NO va scroll-behavior: smooth.
     Estando puesto, un salto que el guión pide "seco" -al arrancar, o al
     girar el teléfono- sale suave igualmente, porque pedir el viaje con
     behavior: 'auto' significa "como diga la hoja de estilo", no "de golpe".
     El resultado era un carrusel que al aparecer se iba solo de lado. Lo
     suave lo pide ahora irA() cuando toca, y sólo cuando toca. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Dos cosas de una: que el arrastre horizontal no se lleve la página
     detrás, y que deslizar hacia la derecha estando en la primera tarjeta no
     dispare el "atrás" del navegador. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Medio hueco a cada lado, para que la primera y la última también puedan
     quedarse centradas. */
  padding-inline: calc(50% - var(--cover-w) / 2);
  /* Sitio de sobra arriba y abajo para el anillo del foco y para la sombra
     de la tarjeta que se levanta al pasar el ratón: con overflow quedarían
     cortados. El margen negativo lo descuenta. */
  padding-block: 26px;
  margin-block: -26px;
}
.cover__escena::-webkit-scrollbar { display: none; }

/* El guión la pone mientras lleva el carrusel de una tarjeta a otra: durante
   ese viaje el imán estorba en vez de ayudar. Ver irA() en app.js. */
.cover__escena--sin-iman { scroll-snap-type: none; }

/* La pista desaparece de la composición -sigue en el HTML, que es donde el
   guión escribe las tarjetas- y sus tarjetas pasan a ser hijas de la caja.
   Aquí NO va -webkit-overflow-scrolling: touch: es de iOS viejo, y sobre un
   carrusel con scroll-snap es justamente lo que lo deja pegado. */
.cover__pista { display: contents; }

/* --- Las tarjetas, dentro del carrusel -----------------------------------
   Tres estados y una sola propiedad que se mueve. El guión cambia la clase
   cuando cambia la tarjeta centrada -una vez por tarjeta, no sesenta veces
   por segundo- y esto hace el resto. */
.cover__pista .unidad {
  flex: 0 0 var(--cover-w);
  scroll-snap-align: center;
  /* OPACA. Por debajo de la fila se ve la trama del fondo, y a través de una
     tarjeta translúcida el texto se ensucia. */
  background: linear-gradient(160deg, var(--superficie), transparent), var(--fondo);
  /* Las de más allá, en penumbra. */
  opacity: 0.3;
  transition: opacity 0.4s var(--curva-cover),
              border-color 0.4s var(--curva-suave);
}
/* Las de al lado: a medio encender, que es lo que invita a seguir. */
.cover__pista .unidad.cover__pieza--izq,
.cover__pista .unidad.cover__pieza--der { opacity: 0.55; }
/* La del centro: entera, y con el filo del borde encendido. */
.cover__pista .unidad.cover__pieza--activa {
  opacity: 1;
  border-color: var(--linea-viva);
}

/* Sólo la del centro se levanta al pasar el ratón; las de al lado están a
   medio apagar y realzarlas sólo confunde. Y todo esto, detrás de la puerta
   del ratón: en el teléfono no debe quedar nada pegado al tocar. */
@media (hover: hover) and (pointer: fine) {
  .cover__pista .unidad.cover__pieza--activa:hover {
    transform: translateY(-6px);
    transition: transform 0.25s ease-out, border-color 0.4s;
  }
  .cover__pista .unidad:not(.cover__pieza--activa):hover {
    box-shadow: none;
    border-color: var(--linea);
  }
  /* El acercamiento de la foto y la franja de luz se quedan para la del
     centro: en las de al lado no se aprecian y en cambio se repintan fotos
     grandes. */
  .cover__pista .unidad:not(.cover__pieza--activa):hover .unidad__foto img {
    filter: contrast(1.06) saturate(1.06) brightness(0.9);
    transform: scale(1.04);
  }
  .cover__pista .unidad:not(.cover__pieza--activa):hover .unidad__brillo { animation: none; }
}

/* --- Los mandos de abajo: flecha · cuenta y puntos · flecha ---------------
   Van debajo y no encima de la escena a propósito: encima taparían justo la
   esquina de las tarjetas de al lado, que es lo que hay que ver. */
.cover__pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 4vw, 2.6rem);
  width: min(100% - 2.5rem, var(--ancho));
  margin: 1.8rem auto 0;
}

.cover__flecha {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linea);
  transition: border-color 0.4s, background 0.4s, opacity 0.4s,
              transform 0.4s var(--curva);
}
.cover__flecha svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cover__flecha:hover:not(:disabled) {
  border-color: var(--linea-viva);
  background: var(--superficie-2);
  transform: scale(1.07);
}
.cover__flecha:active:not(:disabled) { transform: scale(0.96); }
/* Apagada, no escondida: una flecha que desaparece y vuelve movería toda la
   fila de mandos. */
.cover__flecha:disabled { opacity: 0.25; cursor: default; }

.cover__medio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.cover__cuenta {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

/* Se envuelven si hacen falta: la flota son nueve tarjetas y en una pantalla
   estrecha nueve filetes en una fila no entran al lado de las flechas. */
.cover__puntos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
}
/* El botón es alto y estrecho: el filete se ve fino pero se toca con el pulgar
   sin apuntar. */
.cover__punto { padding: 0.55rem 0.15rem; line-height: 0; }
.cover__punto i {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--linea-viva);
  transition: width 0.55s var(--curva), background 0.4s;
}
.cover__punto:hover i { background: var(--texto-2); }
.cover__punto.activo i { width: 46px; background: var(--texto); }

.cover__nota {
  width: min(100% - 2.5rem, var(--ancho));
  margin: 1rem auto 0;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Con una sola tarjeta no hay carrusel que manejar. */
.cover--solo .cover__pie,
.cover--solo .cover__nota { display: none; }

/* ==========================================================================
   10 · EMPRESA
   ========================================================================== */

.empresa__caja {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.empresa__texto p { color: var(--texto-2); font-size: 1.03rem; max-width: 56ch; }
.empresa__texto h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  font-weight: 300;
  color: var(--texto);
  margin-bottom: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.empresa__texto h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.14em;
  color: var(--texto-2);
}
.empresa__texto .btn { margin-top: 1rem; }

.empresa__foto { position: relative; margin: 0; transition-delay: 0.15s; }
.empresa__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05) brightness(0.94);
  clip-path: inset(0 100% 0 0);
  transition: filter 0.8s var(--curva-suave), transform 1.2s var(--curva),
              clip-path 1.2s var(--curva) 0.15s;
}
/* Ésta se descubre de izquierda a derecha, no de abajo a arriba: al lado tiene
   una columna de texto y el barrido horizontal acompaña la lectura. */
.empresa__foto.visible img { clip-path: inset(0 0 0 0); }
.empresa__foto:hover img { filter: contrast(1.06) saturate(1.1) brightness(1.02); transform: scale(1.03); }

.empresa__marco {
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid var(--linea-viva);
  pointer-events: none;
  transition: inset 0.7s var(--curva);
}
.empresa__foto:hover .empresa__marco { inset: 14px -14px -14px 14px; }

.empresa__foto figcaption {
  margin-top: 1.1rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* ==========================================================================
   11 · ZONAS
   ========================================================================== */

.zonas__lista { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 2.4rem; }

.zonas__lista li {
  opacity: 0;
  transform: translateY(20px) scale(0.94);
  transition: opacity 0.6s var(--curva), transform 0.6s var(--curva-elastica),
              border-color 0.4s, color 0.4s, background 0.4s;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--linea);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.zonas__lista li.visible { opacity: 1; transform: none; }
.zonas__lista li:hover {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--sobre-tinta);
  transform: translateY(-3px);
}

.zonas__extra { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ==========================================================================
   12 · PASOS
   ========================================================================== */

.pasos {
  background-image:
    linear-gradient(180deg, var(--fondo) 0%, color-mix(in srgb, var(--fondo) 88%, transparent) 35%,
                    color-mix(in srgb, var(--fondo) 94%, transparent) 70%, var(--fondo) 100%),
    url("https://img-servicios.prismstudio.com.mx/transporte/gamez/imagenes/fondo.89fc5b0c.webp");
  background-size: cover, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat, no-repeat;
}

.pasos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
}

.paso {
  position: relative;
  padding: 2rem 1.5rem 1.8rem;
  border-top: 1px solid var(--linea);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
.paso.visible { opacity: 1; transform: none; }

/* La línea de arriba se dibuja de izquierda a derecha al aparecer. */
.paso::before {
  content: '';
  position: absolute;
  inset: -1px auto auto 0;
  height: 1px;
  width: 0;
  background: var(--texto);
  transition: width 1.1s var(--curva) 0.2s;
}
.paso.visible::before { width: 100%; }

/* El numero del paso va dentro de un circulo con un anillo punteado que gira
   despacio: se lee como una secuencia -uno, dos, tres- y no como cuatro
   numeros sueltos. El anillo sólo gira cuando el paso ya entro en pantalla. */
.paso__numero {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  border: 1px solid var(--linea);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--texto-2);
  transition: color 0.5s, border-color 0.5s, transform 0.6s var(--curva-elastica);
}
.paso__numero::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed var(--linea);
  opacity: 0;
  transition: opacity 0.6s var(--curva-suave);
}
.paso.visible .paso__numero::before {
  opacity: 1;
  animation: girar 22s linear infinite;
}
.paso:hover .paso__numero {
  color: var(--texto);
  border-color: var(--linea-viva);
  transform: scale(1.07);
}

/* El hilo que une un paso con el siguiente. Sale del circulo y se dibuja solo.
   En una sola columna -celular- no tiene sentido y se apaga. */
.paso::after {
  content: '';
  position: absolute;
  top: calc(2rem + 33px);
  left: calc(1.5rem + 74px);
  right: 0.6rem;
  height: 1px;
  background: linear-gradient(90deg, var(--linea-viva), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--curva) 0.5s;
}
.paso.visible::after { transform: scaleX(1); }
.paso:last-child::after { display: none; }

.paso h3 { font-size: 1.2rem; font-weight: 500; color: var(--texto); margin-bottom: 0.6rem; }
.paso p { margin: 0; font-size: 0.94rem; color: var(--texto-2); }

/* ==========================================================================
   13 · GALERÍA
   ========================================================================== */

.galeria__rejilla { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.4rem; }

.galeria__pieza {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--linea);
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.9s var(--curva), transform 0.9s var(--curva), border-color 0.5s;
}
.galeria__pieza.visible { opacity: 1; transform: none; }
.galeria__pieza:hover { border-color: var(--linea-viva); }

.galeria__pieza {
  --p: 0;   /* lo escribe el JS: de -0.5 a 0.5 según lo cerca que esté del centro */
}
.galeria__pieza img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  clip-path: inset(0 0 100% 0);
  filter: contrast(1.05) saturate(1.06) brightness(0.88);
  /* La foto se mueve DENTRO de su marco al pasar por delante. Va escalada al
     112% para que ese desplazamiento no descubra un borde vacío. */
  transform: scale(1.12) translateY(calc(var(--p) * 30px));
  transition: filter 0.8s var(--curva-suave), clip-path 1.1s var(--curva);
}
.galeria__pieza.visible img { clip-path: inset(0 0 0 0); }
.galeria__pieza:hover img { filter: contrast(1.06) saturate(1.12) brightness(1); }

.galeria__pieza figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.6rem 1.5rem;
  background: linear-gradient(180deg, transparent, var(--velo-foto));
}
.galeria__pieza figcaption strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.3rem;
}
.galeria__pieza figcaption span { font-size: 0.88rem; color: #c3c3cc; }

/* ==========================================================================
   14 · CONTACTO Y PIE
   ========================================================================== */

.contacto { overflow: hidden; }

/* El recuadro de contacto lleva una luz que le da la vuelta al borde, muy
   despacio. Se hace con un degradado cónico recortado en forma de marco: el
   truco de las dos máscaras que se restan deja ver sólo el filete de 1px.

   Necesita @property para poder animar un ángulo -sin registrarlo, el
   navegador no sabe interpolar una variable-. Donde no exista, la luz
   simplemente se queda quieta y el borde se ve normal. */
@property --vuelta {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0turn;
}

.contacto__caja {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.3rem, 5vw, 4rem);
  border: 1px solid var(--linea);
  background: linear-gradient(160deg, var(--superficie), transparent);
}
.contacto__caja::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  background: conic-gradient(from var(--vuelta),
              transparent 0turn, var(--linea-viva) 0.08turn, transparent 0.22turn,
              transparent 0.5turn, var(--linea-viva) 0.58turn, transparent 0.72turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: vueltaBorde 9s linear infinite;
  pointer-events: none;
}
@keyframes vueltaBorde { to { --vuelta: 1turn; } }
.contacto__geo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.contacto .antetitulo { justify-content: center; }
.contacto__texto { max-width: 52ch; margin-inline: auto; color: var(--texto-2); }
/* Más chico que los títulos de sección. Aquí el peso lo tienen que llevar el
   número de teléfono y el botón, no la pregunta: con los 5rem de un título de
   sección, "¿A dónde vamos?" se comía la tarjeta entera. */
.contacto__titulo {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  margin-bottom: 1.2rem;
}

.contacto__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin: 2rem 0 2.6rem;
}

.contacto__redes { display: flex; justify-content: center; gap: 2.2rem; flex-wrap: wrap; }
.contacto__redes a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-width: 64px;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-3);
  transition: color 0.4s, transform 0.5s var(--curva-elastica);
}
.contacto__redes svg { width: 26px; height: 26px; fill: currentColor; }
.contacto__redes a:hover { color: var(--texto); transform: translateY(-5px); }

.pie { border-top: 1px solid var(--linea); padding: 2.6rem 0; }
.pie__caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}
.pie__marca { display: flex; align-items: center; gap: 1rem; }
.pie__marca img { width: 52px; }
.pie__marca strong { display: block; font-size: 0.85rem; font-weight: 500; color: var(--texto); }
.pie__marca span { font-size: 0.7rem; color: var(--texto-3); letter-spacing: 0.08em; }
.pie__legal { margin: 0; font-size: 0.7rem; color: var(--texto-3); max-width: 46ch; }

/* ==========================================================================
   15 · MODAL · "¿por hora o traslado?"
   ========================================================================== */

.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 1.1rem; }
.modal[hidden] { display: none; }

.modal__fondo {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--fondo) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.45s var(--curva-suave);
}
.modal.abierto .modal__fondo { opacity: 1; }

.modal__caja {
  position: relative;
  width: min(100%, 520px);
  max-height: 88svh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background: var(--superficie-2);
  border: 1px solid var(--linea-viva);
  box-shadow: var(--sombra-alta);
  opacity: 0;
  transform: translateY(34px) scale(0.96);
  transition: opacity 0.5s var(--curva), transform 0.6s var(--curva);
}
.modal.abierto .modal__caja { opacity: 1; transform: none; }

.modal__cerrar {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  background: var(--superficie-2);
  transition: border-color 0.4s, transform 0.5s var(--curva);
}
.modal__cerrar svg { width: 16px; height: 16px; fill: none; stroke: var(--texto); stroke-width: 1.5; }
.modal__cerrar:hover { border-color: var(--tinta); transform: rotate(90deg); }

.modal__foto { margin: 0 0 1.4rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--superficie-3); }
.modal__foto img { width: 100%; height: 100%; object-fit: cover; }

.modal__caja h3 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 500;
  color: var(--texto);
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}

.modal__precio { margin-bottom: 1.6rem; }
.modal__precio strong { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; color: var(--texto); }
.modal__precio strong i {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.34em;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--texto-3);
  margin-left: 0.5em;
  vertical-align: 0.62em;
}
.modal__precio span {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-left: 0.5rem;
}

.modal__pregunta {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 0.9rem;
}

.modal__opciones { display: grid; gap: 0.7rem; margin-bottom: 1.6rem; }

.opcion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem 1.2rem;
  border: 1px solid var(--linea);
  transition: border-color 0.35s, background 0.35s, transform 0.4s var(--curva);
}
.opcion:hover { border-color: var(--linea-viva); transform: translateX(4px); }
.opcion strong { display: block; font-size: 0.98rem; font-weight: 600; color: var(--texto); margin-bottom: 0.2rem; }
.opcion span { font-size: 0.86rem; color: var(--texto-3); }

.opcion.elegida { border-color: var(--tinta); background: var(--superficie); }
.opcion.elegida span { color: var(--texto-2); }

.modal__enviar { width: 100%; }
.modal__enviar[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.modal__nota { margin: 0.9rem 0 0; font-size: 0.76rem; color: var(--texto-3); text-align: center; }

/* ==========================================================================
   16 · BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

.flotante {
  position: fixed;
  z-index: 100;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.3rem;
  background: var(--tinta);
  color: var(--sobre-tinta);
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  /* Empieza escondido: sale cuando el visitante ya bajó un poco, para que no
     tape la portada justo al abrir. */
  opacity: 0;
  transform: translateY(28px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.5s var(--curva), transform 0.6s var(--curva-elastica), background 0.4s;
}
.flotante.visible { opacity: 1; transform: none; pointer-events: auto; }
.flotante:hover { transform: translateY(-3px) scale(1.03); }

.flotante svg { width: 24px; height: 24px; fill: currentColor; position: relative; z-index: 2; }
.flotante__texto {
  position: relative;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.flotante__pulso {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid var(--tinta);
  animation: pulso 2.6s ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(1);    opacity: 0.8; }
  70%  { transform: scale(1.32); opacity: 0; }
  100% { transform: scale(1.32); opacity: 0; }
}

/* ==========================================================================
   17 · TABLETA Y CELULAR
   ========================================================================== */

@media (max-width: 1080px) {
  .empresa__caja { grid-template-columns: 1fr; }
  .galeria__rejilla { grid-template-columns: 1fr; }
  .portada__contenido { max-width: 620px; }
  .cover { --cover-w: clamp(300px, 42vw, 400px); --cover-hueco: 1.1rem; }
}

/* ------------------------------------------------------------- EL CELULAR
   Aquí no se "encoge" la versión de computadora: se rehace la composición.
   La portada deja de ser una foto a pantalla completa con el texto encima
   -en vertical la foto se recortaría a una tira y no se vería la camioneta- y
   pasa a ser un panel de foto arriba con el título debajo. El carrusel de la
   flota es el mismo de la computadora, sólo que más apretado y con la
   perspectiva más cerrada. Y todo el texto sube de tamaño.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {

  html { scroll-padding-top: 84px; }

  /* --- Menú --- */
  .barra { gap: 0.6rem; }
  .barra__nav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 5.8rem 1.5rem 2.4rem;
    background: color-mix(in srgb, var(--fondo) 97%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--linea);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.6s var(--curva), visibility 0s linear 0.6s;
  }
  .barra__nav.abierto { transform: none; visibility: visible; transition-delay: 0s; }
  .barra__nav a {
    padding-block: 1.1rem;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    border-bottom: 1px solid var(--linea);
  }
  /* Cada renglón del menú entra escalonado al abrirlo. */
  .barra__nav.abierto a { animation: menuEntra 0.5s var(--curva) backwards; }
  .barra__nav.abierto a:nth-child(1) { animation-delay: 0.08s; }
  .barra__nav.abierto a:nth-child(2) { animation-delay: 0.14s; }
  .barra__nav.abierto a:nth-child(3) { animation-delay: 0.20s; }
  .barra__nav.abierto a:nth-child(4) { animation-delay: 0.26s; }
  .barra__nav.abierto a:nth-child(5) { animation-delay: 0.32s; }
  .barra__nav.abierto a:nth-child(6) { animation-delay: 0.38s; }
  @keyframes menuEntra {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: none; }
  }

  .barra__menu { display: flex; z-index: 2; }
  .barra__cta { display: none; }
  .barra__texto strong { display: none; }
  .barra__texto em { font-size: 1.2rem; }
  .barra__logo { width: 40px; }
  .mando { width: 42px; height: 42px; }

  /* --- Portada: la foto SIGUE SIENDO EL FONDO y el texto va encima ---
     En vertical se recorta más de la mitad del ancho de la foto, así que el
     encuadre se corre para que quede el frente de la camioneta -que es lo que
     la hace reconocible de un vistazo- y el texto se apoya abajo, donde el
     degradado ya está casi cerrado.

     El texto sigue siendo blanco en los DOS temas, porque debajo hay una foto
     y no el fondo de la página. */
  .portada {
    min-height: 100svh;
    align-items: flex-end;
    /* Ajustado para que las cifras entren dentro de la primera pantalla en un
       teléfono normal. Cada rem de más las empuja fuera. */
    padding: 5.6rem 0 2.2rem;
  }
  .portada__foto img {
    /* 24% y no el centro: en vertical sólo entra un tercio del ancho, y
       centrado lo que quedaba detrás del título era el cofre BLANCO de la
       camioneta, o sea texto blanco sobre blanco. Corrido a la izquierda entra
       la parrilla, el arbol iluminado y la pared, que son oscuros. */
    object-position: 24% 54%;
    /* La foto se mueve menos que en pantalla grande: en un celular el scroll
       va mucho más rápido y con 110px la portada se despegaba de golpe. */
    transform: translate3d(0, calc(var(--sy) * 64px), 0);
  }
  /* El oscurecido cierra ANTES que en pantalla grande -desde el 30%- porque
     aquí el texto ocupa dos tercios de la pantalla y no un flanco. Arriba se
     deja abierto: es la única franja donde la camioneta se ve limpia. */
  .portada__velo {
    transform: translate3d(0, calc(var(--sy) * 34px), 0);
    background: linear-gradient(180deg,
      rgba(3, 3, 6, 0.82) 0%, rgba(3, 3, 6, 0.28) 16%, rgba(3, 3, 6, 0.62) 34%,
      rgba(3, 3, 6, 0.86) 52%, rgba(3, 3, 6, 0.95) 74%, var(--fondo) 100%);
  }
  .portada__vineta {
    background: radial-gradient(ellipse 120% 55% at 50% 26%, transparent 30%, rgba(2, 2, 4, 0.5) 100%);
  }
  .portada__geo { display: none; }

  .portada__contenido {
    padding-inline: 1.3rem;
    max-width: none;
    transform: translate3d(0, calc(var(--sy) * -22px), 0);
  }

  .portada__titulo {
    font-size: clamp(2.6rem, 12vw, 3.7rem);
    margin-bottom: 0.75rem;
  }
  .portada__lema {
    font-size: 1rem;
    /* Dos líneas y punto: el párrafo completo es de la sección "La empresa",
       aquí sólo tiene que enganchar, y cada línea de más empuja las cifras
       fuera de la pantalla. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .portada__botones { margin-bottom: 1.4rem; gap: 0.6rem; }
  .portada__botones .btn { flex: 1 1 100%; }

  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cifras li { padding: 0.95rem 1rem 0.9rem; }
  /* En dos columnas, la fila de abajo también necesita su filete. */
  .cifras li:nth-child(odd) + li::before { top: 22%; bottom: 22%; }
  .cifras li:nth-child(n+3)::after {
    content: ''; position: absolute; top: 0; left: 18%; right: 18%;
    height: 1px; background: rgba(255, 255, 255, 0.15);
  }

  .portada__bajar { display: none; }

  /* --- Flota: el mismo carrusel, más apretado ---
     Tarjeta más estrecha y hueco más corto, y esto es tan importante como
     todo lo demás: el PASO -lo que hay que recorrer para cambiar de
     tarjeta- se queda en unos setenta y tres de cada cien píxeles de
     pantalla. Con la tarjeta casi tan ancha como la pantalla, un desliz
     corto no llegaba a la mitad del camino y el imán devolvía la tarjeta a
     su sitio: parecía trabado cuando lo que pasaba es que no alcanzaba.
     Y de paso las de al lado asoman más, que es lo que dice que hay más. */
  .cover {
    --cover-w: min(70vw, 310px);
    --cover-hueco: 0.8rem;
  }

  /* SIN DIFUMINADOS DE FONDO EN EL TELÉFONO.
     Un backdrop-filter obliga a volver a difuminar todo lo que hay detrás
     cada vez que algo se mueve, y estos dos están en pantalla siempre: la
     barra fija arriba y las cifras en la primera pantalla. En un teléfono eso
     es lo que hace que el scroll y el carrusel vayan a tirones. Se cambian
     por un fondo casi opaco, que sobre una foto oscura se ve prácticamente
     igual y no cuesta nada. */
  .barra.pegada {
    background: color-mix(in srgb, var(--fondo) 96%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .cifras {
    background: rgba(6, 6, 9, 0.9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .cover__flecha { width: 48px; height: 48px; }
  .cover__pie { gap: 1rem; margin-top: 1.4rem; }
  /* Nueve filetes en una pantalla de teléfono: más cortos y más juntos. */
  .cover__puntos { gap: 0.3rem; }
  .cover__punto { padding: 0.5rem 0.1rem; }
  .cover__punto i { width: 14px; }
  .cover__punto.activo i { width: 26px; }

  .unidad__foto { aspect-ratio: 16 / 11; }
  .unidad__texto { -webkit-line-clamp: 3; }

  /* SIN CORTINA EN LAS FOTOS DEL CARRUSEL.
     La cortina -la foto que se descubre de abajo a arriba- se dibuja con
     clip-path, y eso no lo puede hacer la tarjeta gráfica: se repinta la foto
     entera en cada fotograma. Dentro del carrusel las nueve arrancan a la
     vez, y arrancan justo cuando la flota aparece en pantalla: un segundo
     largo de tirones con el dedo ya encima. Las de la galería y las de la
     empresa la conservan, que van de una en una. */
  .cover__pista .unidad__foto img,
  .cover__pista .unidad.visible .unidad__foto img {
    clip-path: none;
    transition: filter 0.7s var(--curva-suave), transform 1.1s var(--curva);
  }

  /* --- El resto --- */
  .titulo-seccion h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .contacto__titulo  { font-size: clamp(1.8rem, 7.6vw, 2.4rem); }
  .empresa__texto h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .pilares__rejilla { grid-template-columns: 1fr; }
  .pasos__lista { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .paso { padding: 1.5rem 1rem 1.4rem; }
  .paso__numero { width: 54px; height: 54px; font-size: 1.25rem; }
  /* El hilo une pasos que estan en la misma fila; en dos columnas engancharia
     el segundo con el borde y en una, con nada. */
  .paso::after { display: none; }
  .zonas__extra .btn { flex: 1 1 100%; }
  .contacto__botones .btn { flex: 1 1 100%; }
  .flotante__texto { display: none; }
  .flotante { padding: 1rem; }
}

@media (max-width: 520px) {
  body { font-size: 17px; }
  .antetitulo { font-size: 0.62rem; letter-spacing: 0.24em; gap: 0.7rem; }
  .pasos__lista { grid-template-columns: 1fr; }
  .contacto__redes { gap: 1.4rem; }
  .pie__caja { flex-direction: column; align-items: flex-start; }
  .cinta__pieza { font-size: 0.7rem; gap: 2rem; }
  .cinta__pista { gap: 2rem; }
}

/* ==========================================================================
   18 · MENOS MOVIMIENTO
   Quien lo pide en su sistema no ve NADA animado: ni la portada, ni la
   geometría, ni la cinta. La página sigue completa, sólo que quieta.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-revelar],
  .unidad, .paso, .zonas__lista li, .galeria__pieza,
  .portada__lema, .portada__botones, .cifras, .portada__contenido .antetitulo,
  .portada__titulo .linea--relleno,
  .carga__logo, .carga__lema, .portada__bajar,
  .portada__titulo .letra, .carga__nombre .letra {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .cinta__pista { animation: none !important; }
  .portada__foto img { scale: 1.02; }
  .pal > span, .pal-entera,
  .titulo-seccion .antetitulo, .titulo-seccion__pie { opacity: 1 !important; transform: none !important; }
  .unidad__foto img, .galeria__pieza img, .empresa__foto img { clip-path: none !important; }
  .cifras b::after { transform: scaleX(1) !important; }
  /* El carrusel es una fila normal y se queda tal cual; sólo se le quita el
     levantarse al pasar el ratón y el salto suave al cambiar de tarjeta. */
  .cover__pista .unidad,
  .cover__pista .unidad.cover__pieza--activa:hover {
    transform: none !important;
  }
  /* El salto suave al cambiar de tarjeta ya lo decide irA() mirando esta
     misma preferencia; esta regla se queda por si algún día vuelve a
     escribirse scroll-behavior en la hoja. */
  .cover__escena { scroll-behavior: auto !important; }
  .galeria__pieza img { transform: scale(1.03) !important; }
}