/* ═══════════════════════════════════════════════════════════════
   SECCIONES DE /car/ · hoja propia de la página

   No toca el hero (car-hero.css) ni nada global. Sale toda de las
   variables que ya existen en prode.css.
   ═══════════════════════════════════════════════════════════════ */


/* ── Tarjetas de infraestructura flexible ───────────────────────
   Sin fotografía: los renders que hay son todos exteriores. Fondo
   navy, ícono de línea arriba y el texto debajo. Cuando lleguen los
   interiores se convierten a imagen de fondo con el título encima. */
.car-flex{
  display:grid;gap:1px;background:var(--linea-fuerte);
  border:1px solid var(--linea-fuerte);border-radius:var(--radio);overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:900px){ .car-flex{grid-template-columns:repeat(4,1fr)} }
.car-flex > article,
.car-flex > .car-flex-ficha{
  background:var(--navy);color:#fff;
  padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;gap:10px;
  transition:background-color var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .car-flex > article:hover,
  .car-flex > .car-flex-ficha:hover{background:var(--navy-hondo)}
  .car-flex > .car-flex-ficha:hover .car-flex-ver{color:var(--naranja)}
}
.car-flex .car-flex-ico{width:26px;height:26px;color:var(--naranja);flex:0 0 auto}
.car-flex h3{
  font-family:var(--cuerpo);font-weight:650;
  font-size:16.5px;line-height:1.2;letter-spacing:-.01em;color:#fff;
}
/* La ficha es un enlace: sin `color:inherit` el navegador la pinta de
   azul y le pone subrayado dentro del panel navy. */
.car-flex > .car-flex-ficha{text-decoration:none;color:#fff}
.car-flex p{font-size:14.5px;line-height:1.5;color:var(--sobre-navy);margin:0}
/* El rótulo se apoya en el borde de abajo, así todas las fichas lo
   alinean aunque sus textos midan distinto. */
.car-flex-ver{
  margin-top:auto;padding-top:14px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--sobre-navy-2);
  transition:color var(--t-ui) var(--sal);
}
.car-flex-ver::after{content:' \2192'}



/* ── Los tres pilares: tarjetas que se acomodan al scrollear ──────
   Entran escalonadas —cada una más abajo que la anterior— y se van
   alineando a medida que la sección sube. Lo maneja
   `animation-timeline: view()`, que corre en el compositor: no hay
   JavaScript ni listener de scroll.

   No usan `.malla`: ese componente une las celdas con una hairline
   compartida, y si las celdas se mueven por separado el marco se
   queda quieto y se ve roto. Acá cada tarjeta es independiente. */
/* ═══════════════════════════════════════════════════════════════
   DEL PLANO A LA REALIDAD

   Dos columnas: el texto vive sobre crema sólido y NUNCA se superpone
   al dibujo. Antes iba encima de la zona más densa —autos y palmeras—
   y no había color de letra que lo salvara.

   El plano y el render comparten encuadre, así que van con el MISMO
   object-fit y el MISMO object-position. Si se recortan distinto,
   aparece el doble contorno.

   Todo el revelado cuelga de una sola custom property, `--bp`.
   ═══════════════════════════════════════════════════════════════ */
.car-bp{
  --bp:0;
  --bp-rev: clamp(0, calc((var(--bp) - .05) / .90), 1);   /* .05→.95 baja el revelado */
  position:relative;height:200vh;
  background:var(--tinte);
  padding:0;
}
.car-bp-fijo{
  position:sticky;top:var(--header-h);
  height:calc(100svh - var(--header-h));
  overflow:hidden;
  display:grid;grid-template-columns:1fr minmax(380px,44%);
}

/* ── La columna del dibujo, a la izquierda ── */
.car-bp-media{position:relative;overflow:hidden;background:var(--tinte)}
.car-bp-capa{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 50%;
  display:block;
}
.car-bp-plano{z-index:1}
/* El render entra en manchas, no con un borde recto.
   El mapa de revelado mide tres veces el alto del cuadro y se
   desplaza en vertical: el frente distorsionado con ruido hace que el
   render aparezca por parches y no en línea.

   La máscara viene con ALFA, no en escala de grises. `mask-mode` no
   está en todos lados, y con una imagen opaca el enmascarado por alfa
   —que es el que sí está en todos— mostraría el render entero desde
   el primer fotograma. La conversión se hace al generar el .webp.

   Va volteada respecto del original: sin voltear, el blanco queda
   abajo y el revelado sube desde el pie. Volteada, entra de arriba
   hacia abajo, que es como se lee la sección. */
.car-bp-render{
  z-index:2;
  -webkit-mask-image:url(/assets/reveal-mask.webp);
          mask-image:url(/assets/reveal-mask.webp);
  -webkit-mask-size:100% 300%;
          mask-size:100% 300%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:center calc((1 - var(--bp-rev)) * 100%);
          mask-position:center calc((1 - var(--bp-rev)) * 100%);
  will-change:mask-position;
}

/* ── La columna de texto, a la derecha ──
   Una línea vertical fina la separa del dibujo. Todo se dimensiona
   contra el ALTO de la ventana —no contra el ancho—: es lo único que
   garantiza que la columna entre entera en una pantalla baja mientras
   la sección está pineada.

   El orden es de arriba hacia abajo y el aire va en el medio: el
   bloque de aliados se apoya en el borde inferior con `margin-top`
   automático del separador, así que cuando sobra alto crece el hueco
   y no las tipografías. */
.car-bp-texto{
  position:relative;z-index:2;
  background:var(--tinte);
  border-left:1px solid var(--linea);
  padding:clamp(18px,3.2vh,40px) clamp(22px,2.4vw,44px);
  display:flex;flex-direction:column;
  gap:clamp(10px,1.7vh,20px);
  overflow:hidden;
}
.car-bp-claim{
  margin:0;
  font-family:var(--cuerpo);font-weight:700;
  text-transform:uppercase;color:var(--texto);
  font-size:clamp(15px,3.05vh,34px);
  line-height:1.08;letter-spacing:-.005em;
}
/* El botón: borde fino, sin relleno, y el naranja entra al pasar el
   mouse. La flecha va detrás de un separador vertical que hereda el
   color de la tinta, para que siga viéndose sobre el naranja. */
.car-bp-cta{
  align-self:flex-start;
  display:inline-flex;align-items:stretch;
  border:1px solid var(--texto);
  color:var(--texto);text-decoration:none;
  font-family:var(--cuerpo);font-weight:600;
  font-size:clamp(12px,1.55vh,14.5px);letter-spacing:.02em;
  background:transparent;
  transition:background-color var(--t-ui) var(--sal),
             border-color var(--t-ui) var(--sal);
}
.car-bp-cta > span:first-child{
  display:flex;align-items:center;
  padding:clamp(10px,1.5vh,15px) clamp(14px,1.4vw,22px);
}
.car-bp-cta-fl{
  display:flex;align-items:center;
  padding-inline:clamp(10px,1vw,16px);
  border-left:1px solid currentColor;
}
.car-bp-cta-fl svg{width:16px;height:16px;display:block}

/* El hueco del medio. Es el que absorbe la altura sobrante. */
.car-bp-aire{flex:1 1 clamp(14px,6vh,140px);min-height:14px}

/* ── Bloque de aliados ── */
.car-bp-aliados{
  border-top:1px solid var(--linea);
  padding-top:clamp(11px,1.9vh,22px);
}
.car-bp-cab{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:clamp(8px,1.3vh,15px);
}
.car-bp-aliados .rot{
  display:block;font-size:clamp(9.5px,1.25vh,11px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--naranja-texto);font-weight:600;
  margin:0;
}
.car-bp-mandos{display:flex}
.car-bp-flecha{
  width:clamp(27px,3.5vh,34px);aspect-ratio:1;
  display:grid;place-items:center;
  border:1px solid var(--linea-fuerte);background:transparent;
  color:var(--texto);cursor:pointer;padding:0;
  transition:background-color var(--t-ui) var(--sal),
             border-color var(--t-ui) var(--sal);
}
.car-bp-flecha + .car-bp-flecha{margin-left:-1px}
.car-bp-flecha svg{width:14px;height:14px;display:block}

/* El carrusel. La pista la mueve el JS con `transform`, en bucle: los
   ítems están duplicados y al completar un juego el desplazamiento
   vuelve a cero sin que se note el salto. */
.car-bp-carrusel{position:relative;overflow:hidden}
.car-bp-pista{display:flex;will-change:transform}
.car-bp-esp{
  flex:0 0 clamp(108px,31%,170px);
  display:flex;flex-direction:column;
  gap:clamp(3px,.7vh,9px);
  padding:clamp(9px,1.6vh,18px) clamp(11px,1.2vw,18px);
  border-left:1px dashed var(--linea-fuerte);
}
.car-bp-num{
  font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(15px,2.2vh,23px);line-height:1;
  color:var(--naranja);
}
.car-bp-disp{
  font-family:var(--cuerpo);font-weight:400;
  font-size:clamp(10px,1.3vh,12.5px);line-height:1.2;
  color:var(--gris);
}
.car-bp-esp img{width:100%;height:auto;max-height:38px;object-fit:contain;object-position:left center}
.car-bp-nota{
  margin:clamp(9px,1.4vh,16px) 0 0;
  border-top:1px solid var(--linea);
  padding-top:clamp(9px,1.4vh,16px);
  font-size:clamp(9px,1.15vh,10.5px);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.6;color:var(--gris);
}

@media (hover:hover) and (pointer:fine){
  .car-bp-cta:hover{background:var(--naranja);border-color:var(--naranja)}
  .car-bp-flecha:hover{background:var(--naranja);border-color:var(--naranja)}
}

/* ── Una columna: móvil y reduced-motion ──
   Primero la imagen con el render fijo, después el titular, el botón
   y el carrusel a ancho completo. El orden del documento ya es ese:
   no hace falta `order`. */
@media (max-width:767px), (prefers-reduced-motion:reduce){
  .car-bp{height:auto}
  .car-bp-fijo{position:static;height:auto;display:flex;flex-direction:column}
  .car-bp-media{min-height:46svh}
  .car-bp-plano{display:none}
  .car-bp-render{-webkit-mask-image:none;mask-image:none}
  .car-bp-texto{
    border-left:0;border-top:1px solid var(--linea);
    overflow:visible;padding:clamp(24px,5vw,34px);
  }
  .car-bp-aire{flex:0 0 clamp(20px,5vw,38px)}
}
@media (max-width:767px){
  .car-bp-claim{font-size:clamp(20px,6.1vw,30px)}
  .car-bp-esp{flex-basis:clamp(118px,37%,168px)}
  .car-bp-cta{width:100%}
  .car-bp-cta > span:first-child{flex:1;justify-content:center}
  .car-bp-nota{font-size:11px}
}

/* ═══════════════════════════════════════════════════════════════
   CENTRO DE ALTO RENDIMIENTO · dos columnas

   Sin tarjetas con foto pendiente: molestaban más de lo que sumaban
   mientras no haya imágenes. Los tres ejes bajan a una fila fina.
   ═══════════════════════════════════════════════════════════════ */
.car-q{
  padding:0;
  /* El titular ya no queda debajo del menú fijo al llegar scrolleando. */
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.car-q-duo{
  display:grid;align-items:stretch;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .car-q-duo{grid-template-columns:1.02fr .98fr} }

/* ── Columna negra ── */
.car-q-texto{
  background:var(--carbon);
  padding:clamp(26px,3.4vw,58px) clamp(24px,4vw,64px);
  display:flex;flex-direction:column;justify-content:center;
}
.car-q-texto .ante{
  display:block;font-family:var(--cuerpo);font-weight:600;
  font-size:clamp(10.5px,.85vw,12px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:clamp(14px,1.9vw,26px);
}
.car-q-texto .acento{
  display:block;font-family:var(--cuerpo);font-weight:700;
  /* Ya no es una palabra suelta sino una frase: al tamaño anterior
     partía en dos renglones y competía con el titular. */
  font-size:clamp(14.5px,1.5vw,22px);line-height:1.1;letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--naranja);margin-bottom:clamp(5px,.7vw,12px);
}
.car-q-texto h2{
  font-family:var(--cuerpo);font-weight:800;
  font-size:clamp(28px,3.7vw,58px);line-height:1;letter-spacing:-.025em;
  color:var(--blanco);margin:0;
}
.car-q-texto p{
  margin:clamp(16px,1.8vw,24px) 0 0;max-width:52ch;
  font-size:clamp(13.5px,1vw,16px);line-height:1.55;
  color:var(--blanco);opacity:.75;
}

/* ── Columna de la imagen, con la silueta asomada ── */
.car-q-media{
  position:relative;
  padding:clamp(22px,3vw,52px);
  display:grid;place-items:center;
}
.car-q-marco{position:relative;width:100%}
/* La silueta: la misma forma, corrida hacia arriba y a la derecha */
.car-q-marco::before{
  content:'';position:absolute;
  inset:-14px -14px 14px 14px;
  background:var(--naranja);
  border-radius:var(--radio-l);
  z-index:0;
}
.car-q-marco img{
  position:relative;z-index:1;
  display:block;width:100%;height:100%;
  aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radio-l);
}

/* ── Los tres ejes, en una fila fina ── */
/* Los tres ejes van en fila, uno al lado del otro. Apilados a ancho
   completo se leían bien pero la sección medía una pantalla y media:
   el bloque entero pasó a no entrar de una sola mirada. */
.car-q-ejes{
  background:var(--tinte);
  display:grid;gap:clamp(20px,3vw,46px);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  padding:clamp(22px,2.6vw,40px) clamp(24px,4vw,72px);
  border-top:1px solid var(--linea);
}
.car-q-eje{display:flex;flex-direction:column;gap:clamp(6px,.7vw,11px)}
.car-q-eje-n{
  font-family:var(--cuerpo);font-weight:800;
  font-size:clamp(26px,2.6vw,40px);line-height:.9;
  letter-spacing:-.03em;color:var(--naranja);
}
.car-q-ejes h3{
  font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(15.5px,1.25vw,19px);line-height:1.2;letter-spacing:-.01em;
  color:var(--tinta);margin:0;
}
.car-q-ejes p{
  font-size:clamp(13px,1vw,15px);line-height:1.5;
  color:var(--gris);margin:0;max-width:42ch;
}

@media (max-width:899px){
  /* Una columna: texto, imagen y los ejes apilados. */
  .car-q-media{order:2;padding:clamp(20px,6vw,32px)}
  .car-q-texto{order:1}
  .car-q-eje{gap:clamp(12px,4vw,22px)}
  .car-q-eje-n{min-width:clamp(40px,11vw,58px)}
}

/* ═══ Compactado de la página ═══
   Estas reglas pisan a las del sistema, pero SÓLO acá: car.css lo
   carga únicamente /car/. La página tiene cuatro secciones de
   contenido seguidas y con los cuerpos del resto del sitio ninguna
   entraba en una pantalla de portátil: había que scrollear dos veces
   para ver una grilla completa.

   Se recorta primero el AIRE y después la tipografía, y la
   tipografía nunca baja del piso de lectura: 13 px de cuerpo en
   escritorio, 12.5 en móvil. */
.car-sec .t-seccion{font-size:clamp(28px,4vw,58px);line-height:.94}
.car-sec .bajada{font-size:clamp(16px,1.5vw,21px);line-height:1.4;max-width:40ch}
.car-sec .parrafo{font-size:clamp(15px,1.2vw,17.5px);line-height:1.6;max-width:min(760px,100%)}
.car-sec .mt-56{margin-top:clamp(24px,2.8vw,34px)}
.car-sec .mt-40{margin-top:clamp(18px,2vw,26px)}
.car-sec .mt-24{margin-top:clamp(12px,1.4vw,18px)}

/* Las ocho fichas de eventos */
.car-sec .car-flex > article,
.car-sec .car-flex > .car-flex-ficha{padding:clamp(16px,1.7vw,22px);gap:7px}
.car-sec .car-flex h3{font-size:15px}
.car-sec .car-flex p{font-size:13.5px;line-height:1.45}
.car-sec .car-flex-ico{width:22px;height:22px}
.car-sec .car-flex-ver{font-size:11.5px;padding-top:10px}

/* Las nueve celdas del equipamiento */
.car-sec .malla > .celda{padding:clamp(16px,1.7vw,22px)}
.car-sec .celda-icono{margin-bottom:10px}
.car-sec .malla > .celda h3{font-size:16px;line-height:1.2}
.car-sec .malla > .celda p{font-size:13.5px;line-height:1.45;margin-top:5px}

/* ═══ Hueco del logo en las tarjetas de aliados ═══
   Alto fijo y `object-fit:contain`: los logos vienen en proporciones
   distintas y sin un alto común las tres tarjetas arrancarían su
   texto a alturas distintas. */
.car-logo{
  height:clamp(44px,4.4vw,62px);
  display:flex;align-items:center;
  margin-bottom:clamp(14px,1.6vw,20px);
}
.car-logo img{max-height:100%;width:auto;max-width:70%;object-fit:contain;object-position:left center;display:block}
.car-logo span{
  display:inline-flex;align-items:center;height:100%;padding:0 14px;
  border:1px dashed var(--linea-fuerte);border-radius:var(--radio-chico);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-suave);
}

/* ── Piso de lectura y blanco táctil en móvil ──
   Los rótulos de esta página nacen entre 10.5 y 11.5 px: en un
   teléfono no se leen. Va al final para ganarle a sus propias
   definiciones. */
@media (max-width:900px){
  .ante, .car-flex-ver, .car-bp-disp, .car-bp-nota,
  .car-logo span, .car-q-texto .ante, .car-bp-aliados .rot{font-size:12.5px !important}
  .car-bp-flecha{min-width:42px;min-height:42px}
}

/* Las tres tarjetas de «Quiénes lo hicieron posible»: TRES columnas o
   UNA, nunca dos. Con `auto-fit` y un mínimo de 360px, a 1280 entraban
   dos y la tercera celda quedaba vacía: un bloque gris del ancho de
   media sección, porque `.malla` pinta una caja con divisiones y el
   hueco se ve. Tres no divide en dos. */
.car-posible{grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){ .car-posible{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Las fichas de «Infraestructura flexible», apagadas: llevan a
   consultar por un espacio que todavía no se alquila. Se siguen
   leyendo —es lo que el Centro va a ofrecer— pero no se tocan.
   El `data-href` guarda el destino: volver a encenderlas es
   mecánico. */
/* La tarjeta NO se apaga: es contenido y tiene que leerse igual. Lo
   que se apaga es su llamada a la acción, que lleva a consultar por
   un espacio que todavía no se alquila.

   Queda sin flecha —la flecha es una promesa de que algo pasa al
   tocarla— y sin el hover de la tarjeta, por lo mismo. */
.car-flex-ficha.car-off{cursor:default}
.car-flex-ficha.car-off .car-flex-ver{
  color:var(--sobre-navy-2);
}
.car-flex-ficha.car-off .car-flex-ver::after{content:''}
@media (hover:hover) and (pointer:fine){
  .car-flex > .car-flex-ficha.car-off:hover{background:inherit}
  .car-flex > .car-flex-ficha.car-off:hover .car-flex-ver{color:var(--sobre-navy-2)}
}

/* ══ El mosaico de infraestructura ════════════════════════════════
   Sale de `Infraestructura flexible y modular.pdf`: ocho baldosas en
   cuatro columnas, con dos alturas distintas dentro de cada columna.

   Van en CUATRO COLUMNAS FLEX y no en una grilla, y no es un
   capricho: en una grilla las filas se comparten entre columnas, así
   que la baldosa corta de la primera columna impondría su alto a las
   cuatro y el escalonado de la lámina se perdería. Con una columna
   flex por cada una, cada par tiene sus propias proporciones y —lo
   que importa acá— una baldosa puede CRECER al abrirse sin mover a
   las de al lado. */
/* `align-items:stretch` y las baldosas con `flex`: las cuatro
   columnas miden lo mismo, así que el mosaico queda a ras por
   arriba, por abajo y por los dos costados. El escalonado de la
   lámina lo siguen dando los tres `min-height` distintos, que son
   los que reparten el alto dentro de cada columna. Con
   `align-items:start` cada columna medía lo que medía su contenido y
   los bordes de abajo quedaban desparejos. */
.car-mosaico{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.1vw,16px);
  align-items:stretch;
}
.car-col{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,16px);height:100%}

/* La baldosa entera es el disparador, no sólo el +. El control de
   verdad —el que ve el teclado y el lector de pantalla— sigue siendo
   el botón; el clic en la baldosa lo reenvía. Por eso lleva
   `cursor:pointer` y un rótulo «Ver más» a la vista: sin algo que lo
   diga, nadie sabe que se puede tocar. */
.car-tile{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--radio-m);
  padding:clamp(18px,1.9vw,28px);
  cursor:pointer;overflow:hidden;
  /* `flex:1 1 auto` sobre el `min-height` de cada tamaño: el sobrante
     de la columna se reparte y las dos baldosas llegan justo al
     borde de abajo. Al abrirse, el contenido manda y la baldosa
     crece. */
  flex:1 1 auto;
  transition:transform var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .car-tile:hover{transform:translateY(-3px)}
  .car-tile:hover .car-tile-mas{transform:scale(1.08)}
}
.car-tile:focus-within{outline:2px solid currentColor;outline-offset:3px}

/* El ícono, arriba a la izquierda, como la baldosa de la lámina que
   lo lleva. Son los ocho que ya estaban en las fichas viejas. */
.car-tile-ico{
  width:clamp(26px,2.4vw,34px);height:clamp(26px,2.4vw,34px);
  flex:0 0 auto;opacity:.9;
}

/* El rótulo que avisa que se puede tocar. Va al lado del +, arriba a
   la derecha, y cambia a «Ver menos» cuando la baldosa está
   abierta. */
.car-tile-pista{
  position:absolute;top:clamp(12px,1.2vw,18px);
  right:calc(clamp(12px,1.2vw,18px) + 42px);
  font-family:var(--cuerpo);font-weight:600;
  font-size:clamp(11px,.85vw,12.5px);letter-spacing:.08em;
  text-transform:uppercase;opacity:.72;line-height:34px;
  white-space:nowrap;pointer-events:none;
}
/* Las tres alturas de la lámina. Son mínimos: al abrirse la baldosa
   crece, que es lo que se busca. */
.car-tile-corta{min-height:clamp(120px,13vw,190px)}
.car-tile-media{min-height:clamp(200px,24vw,345px)}
.car-tile-larga{min-height:clamp(240px,33vw,470px)}

/* Los cuatro tonos salen de la paleta del sitio. La lámina traía
   además un carmín y un violeta; acá entran como carbón, porque el
   sitio tiene cinco colores y no siete. */
.car-tile-claro{background:var(--tinte);color:var(--tinta)}
.car-tile-navy{background:var(--navy);color:var(--blanco)}
.car-tile-naranja{background:var(--naranja);color:var(--tinta)}   /* tinta sobre naranja */
.car-tile-lima{background:var(--lima);color:var(--tinta)}         /* tinta sobre lima */
.car-tile-carbon{background:var(--carbon);color:var(--blanco)}

/* La baldosa con foto. La foto va de fondo, con un velo que baja de
   arriba hacia abajo: el título se apoya abajo y ahí tiene que haber
   tinta oscura pase lo que pase en la imagen. */
.car-tile-confoto{background:var(--carbon);color:var(--blanco)}
.car-tile-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.car-tile-confoto::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(10,10,11,.42) 0%,
             rgba(10,10,11,.30) 38%, rgba(10,10,11,.80) 100%);
}
/* Poner al contenido por encima de la foto y del velo se hace
   ELEMENTO POR ELEMENTO, y no con un `> *`. Ese atajo falló dos
   veces seguidas en la misma regla: primero le ganó el
   `position:absolute` a la propia foto —que quedó como un bloque en
   línea en medio de la baldosa— y después se lo sacó al rótulo «Ver
   más» y al +, que dejaron su esquina y cayeron al medio. Lo que va
   en el flujo necesita `position:relative`; lo que ya es absoluto
   sólo necesita el `z-index`. */
.car-tile-confoto .car-tile-ico,
.car-tile-confoto .car-tile-t,
.car-tile-confoto .car-tile-panel{position:relative;z-index:1}
.car-tile-confoto .car-tile-pista,
.car-tile-confoto .car-tile-mas{z-index:1}

/* El título se apoya ABAJO, como en la lámina. */
.car-tile-t{
  margin:auto 0 0;font-family:var(--cuerpo);font-weight:400;
  font-size:clamp(16px,1.45vw,21px);line-height:1.18;letter-spacing:-.01em;
  max-width:14ch;
}
.car-tile-navy .car-tile-t{font-weight:700;text-transform:uppercase}

/* El + . Es un botón de verdad, no un adorno: lo anuncia un lector
   de pantalla como contraído o expandido y responde a Enter y a
   Espacio sin escribir una línea. */
.car-tile-mas{
  position:absolute;top:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:var(--tinta);color:var(--blanco);
  transition:transform var(--t-ui) var(--sal),background var(--t-ui) var(--sal);
}
.car-tile-mas svg{width:17px;height:17px}
.car-tile-navy .car-tile-mas,.car-tile-carbon .car-tile-mas{background:var(--blanco);color:var(--tinta)}
.car-tile-naranja .car-tile-mas{background:var(--blanco);color:var(--tinta)}
.car-tile-mas[aria-expanded="true"] svg{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){
  .car-tile-mas:hover{transform:scale(1.08)}
}

/* El panel. Arranca cerrado desde el JS —no desde el HTML— para que
   sin JavaScript el texto siga a la vista en vez de desaparecer. */
.car-tile-panel{margin-top:clamp(12px,1.4vw,20px)}
.car-tile-panel[hidden]{display:none}
.car-tile-panel p{
  margin:0;font-size:clamp(13px,1.05vw,15.5px);line-height:1.5;
  color:inherit;opacity:.88;
}
/* El botón de reserva. `white-space:normal` y `height:auto` porque
   `.btn` del sitio trae `white-space:nowrap`: con el rótulo largo
   el texto se salía de la caja en las baldosas angostas. */
.car-tile-btn{
  margin-top:clamp(12px,1.3vw,18px);width:100%;
  font-size:clamp(12px,.9vw,13.5px);padding:11px 12px;
  white-space:normal;line-height:1.25;text-align:center;height:auto;
}
/* Deshabilitado hasta que el Centro abra: se ve que está y se ve que
   todavía no. */
.car-tile-btn[disabled]{
  background:transparent;border:1.5px solid currentColor;
  color:inherit;opacity:.5;cursor:not-allowed;transform:none;
}

@media (max-width:1000px){
  .car-mosaico{grid-template-columns:repeat(2,minmax(0,1fr))}
  .car-tile-corta{min-height:130px}
  .car-tile-media{min-height:190px}
  .car-tile-larga{min-height:230px}
}
@media (max-width:620px){
  .car-mosaico{grid-template-columns:minmax(0,1fr)}
  .car-tile-corta,.car-tile-media,.car-tile-larga{min-height:118px}
  .car-tile-t{max-width:none;font-size:17px}
}


@media (max-width:900px){
  /* El + se ve igual pero recibe 44px de dedo, que es el mínimo del
     sitio para un control en táctil. */
  .car-tile-mas{
    width:44px;height:44px;
    top:clamp(8px,1.2vw,14px);right:clamp(8px,1.2vw,14px);
  }
}

/* ══ El carrusel de equipamiento ══════════════════════════════════
   Una diapositiva por espacio, y pasa sola.

   El desplazamiento es el NATIVO del navegador con `scroll-snap`, no
   un `transform` calculado a mano: así se arrastra con el dedo, se
   recorre con el teclado, y el guion sólo tiene que pedir un
   `scrollTo` cada tantos segundos. Es la misma decisión que ya está
   tomada para el riel de las escuelas. */
.car-carrusel{position:relative}
.car-slides{
  list-style:none;margin:0;padding:0;
  display:flex;gap:clamp(12px,1.4vw,20px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  border-radius:var(--radio-m);
}
.car-slides::-webkit-scrollbar{display:none}
.car-slides:focus-visible{outline:2px solid var(--naranja);outline-offset:4px}

.car-slide{
  flex:0 0 100%;scroll-snap-align:center;
  border-radius:var(--radio-m);
  padding:clamp(26px,3.4vw,56px);
  min-height:clamp(230px,24vw,330px);
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(12px,1.4vw,20px);
}
/* Un tono por diapositiva, rotando los cinco de la paleta. El
   cuerpo hereda la tinta de la diapositiva en vez de fijar un gris:
   así sirve igual sobre claro y sobre oscuro, que es lo que permite
   que el carrusel cambie de color sin una regla por tono. */
.car-slide-tinte  {background:var(--tinte); color:var(--tinta)}
.car-slide-navy   {background:var(--navy);  color:var(--blanco)}
.car-slide-naranja{background:var(--naranja);color:var(--tinta)}   /* tinta sobre naranja */
.car-slide-lima   {background:var(--lima);  color:var(--tinta)}    /* tinta sobre lima */
.car-slide-carbon {background:var(--carbon);color:var(--blanco)}

.car-slide-ico{
  width:clamp(32px,3.2vw,46px);height:clamp(32px,3.2vw,46px);
  flex:0 0 auto;color:currentColor;opacity:.92;
}
/* Sobre los dos claros neutros el ícono va en naranja, que es donde
   se destaca; sobre naranja y lima iría contra su propio fondo. */
.car-slide-tinte .car-slide-ico{color:var(--naranja-texto);opacity:1}
.car-slide-t{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(23px,2.9vw,44px);line-height:1.04;letter-spacing:-.02em;
  max-width:18ch;
}
.car-slide-p{
  margin:0;font-size:clamp(14.5px,1.25vw,19px);line-height:1.5;
  color:inherit;opacity:.82;max-width:48ch;
}

/* Los mandos. El punto activo se marca con `aria-current`, que es lo
   que lee un lector de pantalla, y no con una clase. */
.car-mandos{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.4vw,20px);margin-top:clamp(16px,1.8vw,26px);
}
.car-nav{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--linea-fuerte);background:transparent;
  color:var(--tinta);display:grid;place-items:center;cursor:pointer;
  transition:border-color var(--t-ui) var(--sal),color var(--t-ui) var(--sal);
}
.car-nav svg{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){
  .car-nav:hover{border-color:var(--naranja);color:var(--naranja-texto)}
}
/* El hueco es 17 y no 9, y el número sale de una cuenta: el blanco
   táctil de cada punto lo da un pseudoelemento que sobresale 8px por
   lado, o sea 25px de ancho. Con 9 de hueco el paso entre puntos era
   18 y los blancos SE PISABAN: apuntabas al quinto y tocabas el
   sexto. Con 17 el paso es 26 y ninguno invade al vecino. */
.car-puntos{display:flex;gap:17px;align-items:center}
.car-punto{
  width:9px;height:9px;border-radius:50%;padding:0;border:0;cursor:pointer;
  background:var(--linea-fuerte);
  transition:background var(--t-ui) var(--sal),width var(--t-ui) var(--sal);
}
.car-punto[aria-current="true"]{background:var(--naranja);width:26px;border-radius:99px}

/* El punto es de 9px y eso no se toca con el dedo: el blanco táctil
   lo da un pseudoelemento de 44, que no ocupa lugar en la fila. */
.car-punto{position:relative}
.car-punto::after{content:"";position:absolute;inset:-16px -8px}

@media (max-width:620px){
  .car-slide{min-height:200px;padding:22px 20px}
  .car-slide-t{max-width:none}
}

/* Con «reducir movimiento» no pasa sola —lo apaga el guion— y el
   encaje deja de ser obligatorio para que se pueda recorrer a mano
   sin que el navegador tire de vuelta. */
@media (prefers-reduced-motion:reduce){
  .car-slides{scroll-snap-type:x proximity;scroll-behavior:auto}
  .car-nav,.car-punto{transition:none}
}