/* ==========================================================================
   CATALOGO HOME V2 — CONCEPTO 5 / CATALOGO PREMIUM
   Obsidian -> respiracion corta -> cabecera + filtros + grid editorial 2 col.

   Sustituye por completo a la V1 (silencio largo + un coche fullscreen).
   Ocupa solo la seccion #continuacion, que usa class="catalog" para que
   NINGUNA regla de style.css la alcance.

   NO modifica app.js, style.css, hero.css, hero.js ni los 8 PNG del Hero.
   ========================================================================== */

:root{
  /* Ancho de contenido del sitio. Nace aqui porque aqui se decidio, pero ya
     NO es privado del catalogo: header.css consume esta misma variable para
     alinearse exactamente con la cabecera, los filtros y el grid.
     El valor es identico al que tenia .cat-wrap. */
  --site-container: min(92vw, 1680px);

  /* ---- CALIBRACION ----
     Respiracion entre el final del naranja y la cabecera del catalogo.
     22svh: suficiente para que no golpee, corto para que no parezca vacio.
     Con este valor la cabecera + filtros + las dos fotografias de la primera
     fila caben en el primer viewport en 1920, 1440 y 1280. */
  --cat-breathe: 22svh;

  /* Paleta corporativa. Sobre #080808 el gris #8A8A86 da ~5,7:1 y por fin
     cumple su papel de secundario (sobre el naranja del Hero daba 1,7:1). */
  --cat-obsidian: #080808;
  --cat-ink: #F4F2ED;
  --cat-muted: #8A8A86;

  /* Manrope entra sola en cuanto exista localmente. Sin fuentes remotas. */
  --cat-font: 'Manrope', 'Segoe UI Variable Display', 'Segoe UI',
              system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --cat-col-gap: clamp(24px, 3vw, 56px);
  --cat-row-gap: clamp(72px, 12vh, 140px);
  /* Asimetria: la columna derecha cae un poco. Editorial, no cuadricula. */
  --cat-stagger: clamp(24px, 4vh, 56px);
}

/* ==========================================================================
   1. SECCION
   Entra desde abajo durante la salida natural del Hero. El obsidian entra
   porque entra ella: sin overlay, sin fade to black, sin segunda superficie.
   ========================================================================== */
.catalog{
  position:relative;
  background:var(--cat-obsidian);
  color:var(--cat-ink);
  font-family:var(--cat-font);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  padding-bottom:clamp(80px, 14vh, 180px);
}
.cat-breathe{height:var(--cat-breathe);pointer-events:none}

/* Container amplio, sin tocar los bordes. */
.cat-wrap{width:var(--site-container);margin:0 auto}

/* ==========================================================================
   2. CABECERA
   Encabezado de coleccion comercial, no titulo de pelicula: la escala queda
   muy por debajo del REVUELTO del Hero, que usa clamp(44px,5vw,86px).
   ========================================================================== */
.cat-head{margin-bottom:clamp(36px, 5.5vh, 72px)}
.cat-title{
  margin:0;
  font-size:clamp(26px, 2.6vw, 44px);
  font-weight:300;
  line-height:1.05;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cat-lede{
  margin:14px 0 0;
  font-size:clamp(12px, .95vw, 15px);
  font-weight:400;
  letter-spacing:.04em;
  color:var(--cat-muted);
}

/* ---- Filtros: texto + linea. Sin pill, sin capsule, sin fondo ---- */
.cat-filters{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(18px, 2vw, 34px);
  margin-top:clamp(24px, 3.4vh, 44px);
  padding-top:clamp(16px, 2vh, 26px);
  border-top:1px solid rgba(244,242,237,.12);
}
.cat-filter{
  position:relative;
  appearance:none;
  border:0;
  background:none;
  margin:0;
  padding:10px 0;
  min-height:44px;
  color:var(--cat-muted);
  font:inherit;
  font-size:clamp(11px, .82vw, 13px);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
}
.cat-filter::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:9px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.cat-filter:hover{color:var(--cat-ink)}
.cat-filter[aria-pressed="true"]{color:var(--cat-ink)}
.cat-filter[aria-pressed="true"]::after{transform:scaleX(1)}
.cat-filter:focus-visible{outline:2px solid var(--cat-ink);outline-offset:6px}

/* ==========================================================================
   3. GRID EDITORIAL — 2 COLUMNAS
   La fotografia es la masa visual. Sin card, sin borde, sin sombra,
   sin panel, sin radio, sin badge.
   ========================================================================== */
/* V3 PROTOTIPO: 3 columnas. El objetivo ya no es editorial sino INVENTARIO:
   varios coches simultaneos para que se lea "esto es stock" de un vistazo.
   Se retira el stagger: con 3 columnas desalinea la retícula y, sobre todo,
   movería el destino de aterrizaje de la transferencia del Revuelto. */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:var(--cat-col-gap);
  row-gap:var(--cat-row-gap);
  align-items:start;
}
.cat-item{margin:0}
.cat-item[hidden]{display:none}

/* Los cuatro masters comparten 1672x941, asi que el contenedor usa esa misma
   relacion: cover no recorta absolutamente nada. Coche entero, ruedas enteras,
   frontal entero, y misma escala aparente y mismo horizonte en los cuatro. */
.cat-shot{
  position:relative;
  aspect-ratio:1672 / 941;
  overflow:hidden;
  background:#0d0d0d;
}
.cat-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  user-select:none;
}

/* ---- Informacion comercial ----
   Ritmo apretado a proposito. Con 2 columnas la fotografia medía 360px y el
   bloque de datos 196: la imagen dominaba con holgura. Al pasar a 3 columnas
   la fotografia bajo a 232 y el bloque de datos no se movio, asi que el texto
   paso a competir con el coche (ratio 1.19 a 1440, 1.11 a 1280).
   Se corrigen SOLO las separaciones, nunca los tamanos de letra. */
.cat-meta{padding-top:clamp(14px, 1.7vh, 22px)}
.cat-brand{
  margin:0 0 7px;
  font-size:clamp(10px, .75vw, 12px);
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  /* La jerarquia del eyebrow va en el color, no en opacity, para que el
     reset de reduced-motion (opacity:1 !important) no la aplane. */
  color:rgba(244,242,237,.68);
}
.cat-model{
  margin:0 0 10px;
  font-size:clamp(22px, 2vw, 34px);
  font-weight:300;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.cat-specs{
  margin:0 0 6px;
  font-size:clamp(11px, .82vw, 13px);
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cat-muted);
}
.cat-price{
  margin:0 0 14px;
  font-size:clamp(17px, 1.35vw, 22px);
  font-weight:400;
  line-height:1;
  letter-spacing:.01em;
}

/* CTA editorial: texto + flecha + linea. No es un boton relleno. */
.cat-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 0 8px;
  margin:0;
  border:0;
  border-bottom:1px solid rgba(244,242,237,.34);
  background:none;
  color:inherit;
  font:inherit;
  font-size:clamp(11px, .82vw, 13px);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
}
.cat-cta .cat-cta-arrow{display:inline-block;transition:transform .22s ease}
.cat-cta:hover{border-bottom-color:rgba(244,242,237,.82)}
.cat-cta:hover .cat-cta-arrow{transform:translateX(5px)}
.cat-cta:focus-visible{outline:2px solid var(--cat-ink);outline-offset:8px}

/* ==========================================================================
   4. MOVIMIENTO
   Muy poco. El unico movimiento continuo es el reveal de entrada; el resto
   solo responde al hover, nunca al scroll.
   ========================================================================== */
@media (hover:hover){
  .cat-photo{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
  .cat-item:hover .cat-photo{transform:scale(1.01)}
}

/* Estado base VISIBLE: sin JS o con reduced-motion el catalogo se lee entero.
   catalog.js solo esconde lo que va a animar, y solo cuando procede. */
[data-cat-reveal]{will-change:opacity, transform}

@media (prefers-reduced-motion: reduce){
  [data-cat-reveal]{opacity:1 !important;transform:none !important}
  .cat-photo,
  .cat-cta .cat-cta-arrow,
  .cat-filter::after{transition:none}
  .cat-item:hover .cat-photo{transform:none}
}

/* ==========================================================================
   4b. TRANSITION SYSTEM V1.2 — EDGE DISSOLVE (frontera Hero -> catalogo)
   La luz naranja del suelo se extingue hasta convertirse en obsidian.
   Franja larga (38svh) pegada al borde INFERIOR del stage del Hero, de
   transparente a #080808 (--cat-obsidian, en rgba por el canal alfa).
   Su ultima fila es SIEMPRE obsidian: no hay rampa de opacidad. Lo que
   crece es su LONGITUD, via scaleY desde abajo: catalog.js escribe
   --cat-edge-a (0..1) en .stage. Sin variable = scaleY(0) = no existe, asi
   que mientras el Hero esta formado no se pinta nada.
   Perfil alfa = smoothstep(t)^1.5: arranque muy largo y suave (el primer
   30% no pasa de .10) y hombro suave al final, sin banda plana.
   z-index 2: por debajo de la UI comercial (3), que se retira con su propio
   fundido. Absolute: no ocupa layout.
   bottom:-4px: la franja sobresale 4px por debajo del stage (overflow
   hidden los recorta). Con un alto fraccional (38svh) escalado, el borde
   inferior de la capa se rasteriza con antialias y dejaba ver una linea de
   1px de naranja en el limite fisico; asi la ultima fila VISIBLE es
   siempre interior a la franja.
   ========================================================================== */
#reveal .stage::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:38vh;
  height:38svh;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(8,8,8,0) 0%,
    rgba(8,8,8,.015) 15%,
    rgba(8,8,8,.100) 30%,
    rgba(8,8,8,.277) 45%,
    rgba(8,8,8,.522) 60%,
    rgba(8,8,8,.694) 70%,
    rgba(8,8,8,.848) 80%,
    rgba(8,8,8,.958) 90%,
    #080808 100%);
  transform-origin:50% 100%;
  transform:scaleY(var(--cat-edge-a, 0));
}
@media (prefers-reduced-motion: reduce){
  #reveal .stage::after{display:none}
}

/* ==========================================================================
   5. RESPONSIVE — solo proteccion estructural. Mobile NO esta disenado.
   Las dos columnas se mantienen hasta bien por debajo de 1280.
   ========================================================================== */
@media (max-width:1100px){
  .cat-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:760px){
  .cat-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(48px,8vh,80px)}
  /* Mismo valor de siempre, expresado en la variable compartida para que el
     header no se desalinee del catalogo tampoco aqui. */
  :root{--site-container:88vw}
}