/* =========================================================================
   INVENTARIO — sólo lo específico de la página.
   El resto (tokens, header, .unidad-card, footer-cine, botones) viene de
   ../Landing/css/estilos.css, que se carga antes que este archivo.
========================================================================= */

/* El header del landing es fixed sobre el hero; aquí no hay hero, así que
   lo dejamos pegado (sticky) en su estado azul, sin ocultarse al scrollear. */
.encabezado-sitio{ position:sticky; }
.encabezado-sitio.header-oculto{ opacity:1; transform:none; pointer-events:auto; }

/* El eslogan del landing se oculta fuera del hero; en inventario lo dejamos
   visible en escritorio para no dejar el header tan vacío. */
@media (min-width:900px){
  .encabezado-sitio .slogan-marca{ display:block; }
}

.inventario-main{ display:block; }

/* ---- Encabezado de la página ---- */
/* En escritorio .seccion trae padding:84px; aquí no hay hero encima, así que
   se recorta el aire superior y el hueco hasta la ubicación/filtros. */
.inventario-intro{ padding-top:44px; padding-bottom:0; }
/* El subtítulo va como "strip": una sola línea a lo ancho de la columna
   (sin el max-width:640px de .encabezado-seccion), con la ubicación
   alineada a la derecha en el mismo renglón. */
.inventario-intro .encabezado-seccion{ margin-bottom:22px; max-width:none; }
.inventario-intro .subtitulo{ font-size:.95rem; }
.inventario-headrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px 28px; flex-wrap:wrap;
}
.inventario-headrow .subtitulo{ flex:1 1 420px; min-width:0; }
.inventario-headrow .inventario-loc{ margin:0; flex:0 0 auto; }
.inventario-intro .encabezado-seccion h1{
  margin:0 0 8px;
  font-weight:800; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(30px, 5vw, 46px); color:var(--text-main);
}
/* Badge de ubicación con el mismo fondo azul del strip "Por qué elegir
   Tru Iron México" del landing (.conf-kicker-strip). */
.inventario-loc{
  display:inline-flex; align-items:center; gap:8px;
  margin:14px 0 0; font-weight:700; font-size:.86rem;
  padding:7px 14px; border-radius:999px; color:#fff;
  background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}
.inventario-loc .ico{ width:13px; height:15px; color:#fff; }

/* ---- Filtro de categorías ---- */
.inventario-cats{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:26px; padding-top:22px; border-top:1px solid var(--border);
}
/* "Todo" separada del resto, pegada a la derecha. */
.inventario-cat[data-cat="todo"]{ margin-left:auto; }
.inventario-cat{
  all:unset; box-sizing:border-box; cursor:pointer;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg-card);
  font-size:.82rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:var(--text-muted);
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.inventario-cat:hover{ background:var(--bg-alt); border-color:#c7ccd6; color:var(--text-main); }
/* Seleccionada: mismo gris pizarra que el botón "Ver inventario completo"
   del landing en hover (.btn-outline-dark:hover -> #374151). */
.inventario-cat.is-active{
  background:#374151; border-color:#374151; color:#fff; cursor:default;
}
.inventario-cat:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }

/* ---- Rejilla de unidades (listado completo, no carrusel) ---- */
.inventario-listado{ padding-top:34px; }
.inventario-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:26px;
}
/* En rejilla las .unidad-card no necesitan el sizing flex del carrusel. */
.inventario-grid .unidad-card{ flex:initial; scroll-snap-align:none; }

.inventario-vacio{
  margin:40px auto 0; max-width:520px; text-align:center;
  color:var(--text-muted); font-size:.98rem; line-height:1.6;
}

@media (max-width:560px){
  .inventario-grid{ grid-template-columns:1fr; gap:20px; }
  /* Encabezado más compacto: menos aire entre título, ubicación y filtros. */
  .inventario-intro{ padding-top:40px; }
  .inventario-intro .encabezado-seccion{ margin-bottom:16px; }
  .inventario-loc{ margin-top:4px; font-size:.86rem; }
  /* Chips de categoría: área de toque más alta y que quepan 2 por fila. */
  .inventario-cats{ gap:8px; margin-top:20px; padding-top:18px; }
  .inventario-cat{ flex:1 1 calc(50% - 4px); padding:12px 14px; text-align:center; }
  .inventario-cat[data-cat="todo"]{ margin-left:0; }
  .inventario-listado{ padding-top:26px; }
}

/* ---- Ajustes al footer-cine importado ---- */
/* El marquee del landing arranca oculto y se revela con un observer que aquí
   no existe; lo dejamos visible y en marcha. */
.footer-cine-marquee{ opacity:1; }
.footer-cine-marquee-track{ animation-play-state:running; }