/* =====================================================================
 * Brajoa IA · estilos propios de la página del comparador de catálogos
 * (catalogos.html)
 *
 * El recorrido de pantallas y el visor son una COPIA de los de
 * deposito.css con el prefijo cambiado (`dep-` → `cat-`), igual que hizo
 * transporte.css con `tms-`. Si se arregla un bug del recorrido acá, hay
 * que llevarlo a las otras dos: no hay un archivo compartido todavía, y
 * extraerlo tocaría dos páginas publicadas.
 *
 * ⚠ TODO lo de acá sale de las variables de tokens.css. Ni un hex suelto.
 * ⚠ Y va en un archivo, no en un <style>: la CSP de `_headers` es
 * `style-src 'self'` sin unsafe-inline. Un bloque inline no se aplica.
 * ===================================================================== */

/* ---------- el color que NO está en tokens.css, y por qué ----------
   Es el mismo caso que en deposito.css: tinta oscura sobre los botones
   dorados. Blanco sobre oro da 1,54:1 medido y no pasa AA; esta da
   10,25:1. No es una paleta paralela: el kit no cubre texto SOBRE oro. */
:root{
  --sobre-oro:#2a220c;      /* 10,25:1 sobre --gold */
}

/* ---------- hero ---------- */
.cat-hero{ padding-top:var(--sp-7) }
.cat-hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;      /* la misma que /deposito */
  gap:var(--sp-8); align-items:center;
}
.cat-hero-txt{ display:flex; flex-direction:column; gap:var(--sp-4); align-items:flex-start }
.cat-oro{ color:var(--gold) }
.cat-bajada{ color:var(--muted); font-size:var(--fs-xl); max-width:46ch }
.cat-acciones{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin-top:var(--sp-2) }
.cat-intro{ color:var(--muted); margin-top:var(--sp-3) }
.seccion h2 + .cat-intro{ margin-top:var(--sp-3) }

/* ---------- la tarjeta del mostrador del hero ----------
   Es lo que se ve con el cliente adelante: la pieza, el precio de venta
   grande y quién la tiene. Los números son los de las capturas. */
.cat-hero-obj{ display:flex; flex-direction:column; align-items:center }
.cat-tarjeta{
  inline-size:100%; max-inline-size:400px;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:var(--sp-5); box-shadow:0 18px 50px -18px rgba(0,0,0,.75);   /* la sombra de la etiqueta de /deposito */
}
.cat-tarj-pieza{ font-family:var(--tit); font-weight:700; font-size:var(--fs-lg); line-height:1.25 }
.cat-tarj-oem{ font-size:var(--fs-sm); color:var(--subtle); margin-top:2px }
.cat-tarj-rot{
  font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--subtle); margin-top:var(--sp-5);
}
.cat-tarj-venta{
  font-family:var(--tit); font-weight:800; font-size:var(--fs-4xl); line-height:1.05;
  color:var(--gold); letter-spacing:-.01em;
}
.cat-tarj-provs{ list-style:none; margin-top:var(--sp-5); border-top:1px solid var(--line) }
.cat-tarj-provs li{
  display:flex; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-2) 0; border-bottom:1px solid var(--line);
  font-size:var(--fs-md); color:var(--muted);
}
.cat-tarj-provs .num{ font-variant-numeric:tabular-nums }
.cat-tarj-mejor{ color:var(--ink) }
.cat-tarj-mejor .num{ color:var(--ok); font-weight:700 }
.cat-pie-obj{
  font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--subtle); margin-top:var(--sp-3);
}

/* ---------- el problema: tres columnas, sin tarjetas ---------- */
.cat-tres{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); margin-top:var(--sp-6) }
.cat-problema{ border-top:2px solid var(--gold); padding-top:var(--sp-4) }
.cat-problema h3{ margin-bottom:var(--sp-2) }
.cat-problema p{ color:var(--muted); font-size:var(--fs-md) }

/* ---------- recorrido de pantallas (copia del de deposito.css) ---------- */
.cat-tour-cabeza{ display:flex; align-items:center; gap:var(--sp-5); margin:var(--sp-6) 0 var(--sp-4); flex-wrap:wrap }
.cat-modos{ display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; flex:none }
.cat-modo{
  font-family:var(--cuerpo); font-size:var(--fs-md); font-weight:700;
  padding:var(--sp-2) var(--sp-4); border:0; background:transparent; color:var(--muted);
  cursor:pointer; min-height:44px; transition:background var(--ease), color var(--ease);
}
.cat-modo + .cat-modo{ border-left:1px solid var(--line-2) }
.cat-modo:hover{ color:var(--ink) }
.cat-modo.activo{ background:var(--gold); color:var(--sobre-oro) }

.cat-barras{ display:flex; gap:5px; flex:1 1 220px; min-width:160px }
.cat-barra{ flex:1; height:3px; background:var(--line); border-radius:2px; overflow:hidden; cursor:pointer }
.cat-barra i{ display:block; height:100%; width:0; background:var(--gold) }
.cat-barra.hecha i{ width:100% }
.cat-barra.activa i{ width:100%; transition:width var(--tour-dur,5s) linear }
.cat-barra.activa.quieta i{ transition:none }

.cat-escena{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--panel) }
.cat-marco-barra{ display:flex; align-items:center; gap:var(--sp-1); padding:var(--sp-2) var(--sp-4); background:var(--panel-2); border-bottom:1px solid var(--line) }
.cat-marco-barra i{ width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:none }
.cat-marco-barra span{ font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.1em; color:var(--subtle); margin-left:var(--sp-2) }
/* ⚠ El alto del marco sale del mismo presupuesto medido que en
   deposito.css (cabecera + barra del marco + pie = 221 → 240): el pie de
   esta página tiene la misma forma. Si se le agrega algo al pie o a la
   cabecera, este número hay que volver a MEDIRLO. */
.cat-marco{
  aspect-ratio:16/10;   /* el de las capturas: 1440x900 */
  max-height:clamp(300px, calc(100vh - 240px), 720px);
  background:var(--navy); display:grid; place-items:center;
  cursor:zoom-in;
}
.cat-marco img{ width:100%; height:100%; object-fit:contain; object-position:center }

.cat-tour-pie{ display:flex; gap:var(--sp-5); align-items:flex-start; justify-content:space-between; padding-top:var(--sp-4); flex-wrap:wrap }
.cat-tour-txt{ max-width:58ch }
.cat-paso{ font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--subtle); margin-bottom:var(--sp-1) }
.cat-tour-txt h3{ margin-bottom:var(--sp-1) }
.cat-tour-txt p{ color:var(--muted); font-size:var(--fs-md) }
.cat-mandos{ display:flex; gap:var(--sp-2); flex:none }
.cat-btn-mando{
  width:44px; height:44px; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--panel); color:var(--ink); cursor:pointer; font-size:var(--fs-lg);
  display:grid; place-items:center; transition:border-color var(--ease), background var(--ease);
}
.cat-btn-mando:hover{ border-color:var(--muted); background:var(--panel-2) }
.cat-btn-play{ background:var(--gold); border-color:var(--gold); color:var(--sobre-oro); font-size:var(--fs-sm) }
.cat-btn-play:hover{ background:var(--gold-1); border-color:var(--gold-1) }

/* ---------- grilla de pantallas ---------- */
.cat-grilla{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5) }
.cat-cap{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); overflow:hidden }
.cat-cap-btn{
  display:block; line-height:0; inline-size:100%;
  padding:0; border:0; background:transparent; cursor:zoom-in;
}
.cat-cap img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center }
.cat-cap figcaption{ padding:var(--sp-3) var(--sp-4) var(--sp-4); font-size:var(--fs-sm); color:var(--muted) }
.cat-cap figcaption strong{ display:block; color:var(--ink); font-family:var(--tit); font-size:var(--fs-lg); margin-bottom:2px }

/* ---------- módulos ---------- */
.cat-modulos{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--sp-6); margin-top:var(--sp-6) }
.cat-modulo{ padding:var(--sp-4) 0; border-top:1px solid var(--line) }
.cat-modulo h3{ font-size:var(--fs-lg) }
.cat-modulo p{ font-size:var(--fs-md); color:var(--muted); margin-top:var(--sp-1) }

/* ---------- pasos ---------- */
.cat-pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); margin-top:var(--sp-6) }
.cat-paso-caja p{ font-size:var(--fs-md); color:var(--muted) }
.cat-paso-cabeza{ display:flex; align-items:baseline; gap:var(--sp-2); border-bottom:2px solid var(--gold); padding-bottom:var(--sp-2); margin-bottom:var(--sp-3) }
.cat-paso-n{ font-family:var(--baj); font-weight:700; font-size:var(--fs-sm); color:var(--gold) }

/* ---------- preguntas ---------- */
.cat-faq{ margin-top:var(--sp-6); border-top:1px solid var(--line) }
.cat-faq details{ border-bottom:1px solid var(--line) }
.cat-faq summary{
  cursor:pointer; padding:var(--sp-4) 0; font-family:var(--tit); font-weight:700;
  font-size:var(--fs-lg); display:flex; justify-content:space-between; gap:var(--sp-5);
  align-items:center; list-style:none; min-height:44px;
}
.cat-faq summary::-webkit-details-marker{ display:none }
.cat-faq summary::after{ content:'+'; color:var(--gold); flex:none; font-size:var(--fs-xl); line-height:1 }
.cat-faq details[open] summary::after{ content:'–' }
.cat-faq details p{ padding-bottom:var(--sp-4); color:var(--muted); font-size:var(--fs-md) }

/* ---------- celular ---------- */
@media (max-width:900px){
  .cat-hero-grid{ grid-template-columns:1fr; gap:var(--sp-6) }
  .cat-tres{ grid-template-columns:1fr; gap:var(--sp-5) }
  .cat-pasos{ grid-template-columns:repeat(2,1fr) }
  .cat-modulos{ grid-template-columns:1fr }
  .cat-grilla{ grid-template-columns:1fr }
}
@media (max-width:600px){
  .cat-bajada{ font-size:var(--fs-lg) }
  .cat-pasos{ grid-template-columns:1fr }
  .cat-acciones .btn{ width:100%; justify-content:center }
  .cat-tarj-venta{ font-size:var(--fs-3xl) }
}


/* ---------- el visor a pantalla casi completa (copia del de deposito.css) ----------
 * En línea la captura entra al ~69% y los rótulos se adivinan más de lo que
 * se leen. El visor la muestra a 1:1 cuando la ventana da. Es un <dialog>
 * de verdad: el foco, el Esc y el fondo inerte los hace el navegador.
 */
.cat-ampliar{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:var(--sp-1);
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--muted); cursor:pointer;
  font-family:var(--cuerpo); font-size:var(--fs-sm); font-weight:700;
  padding:2px var(--sp-2); min-height:28px;
  transition:color var(--ease), border-color var(--ease);
}
.cat-ampliar:hover{ color:var(--ink); border-color:var(--muted) }

.cat-visor{
  border:0; padding:0; background:transparent;
  max-width:100vw; max-height:100vh; width:100%; height:100%;
  color:var(--ink);
}
.cat-visor::backdrop{ background:rgba(5,8,15,.94) }
.cat-visor-caja{
  block-size:100%; display:flex; flex-direction:column;
  gap:var(--sp-3); padding:var(--sp-4);
}
/* El `min-height:0` no es decorativo: sin él el hijo flex no se deja achicar. */
.cat-visor-marco{
  flex:1 1 auto; min-height:0; position:relative;
  background:var(--navy); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
}
/* Absoluta, no `max-height:100%` (referencia cíclica de alto; ver deposito.css).
   `scale-down` y no `contain`: no estira más allá de 1:1. */
.cat-visor-marco img{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%; object-fit:scale-down;
}
.cat-visor-pie{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5); flex-wrap:wrap;
}
.cat-visor-txt{ font-size:var(--fs-md); color:var(--muted); max-width:72ch }
.cat-visor-txt b{ color:var(--ink); font-family:var(--tit); font-weight:700 }
.cat-visor-mandos{ display:flex; align-items:center; gap:var(--sp-2); flex:none }
.cat-visor-n{ font-family:var(--baj); font-size:var(--fs-sm); letter-spacing:.1em; color:var(--subtle); padding-inline:var(--sp-2) }

/* ⚠ Va ANTES del media query: declarada después, `display:none` le ganaba al
   `display:block` del media por la misma especificidad (ver deposito.css). */
.cat-visor-pista{
  display:none; flex:1 1 100%; order:2;
  font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--subtle);
}

/* En celular la imagen va a TAMAÑO REAL y la caja se arrastra: «ampliar» una
   captura apaisada en 390px de ancho no sirve (entra al 26%). */
@media (max-width:700px){
  .cat-visor-caja{ padding:var(--sp-2) }
  .cat-visor-txt span{ display:none }
  .cat-visor-marco{ overflow:auto; -webkit-overflow-scrolling:touch }
  .cat-visor-marco img{
    position:static; inline-size:auto; block-size:auto;
    max-inline-size:none; max-block-size:none; object-fit:none;
  }
  .cat-visor-pista{ display:block }
}