/* =========================================================================
   SCALAR — landing page
   catalogo.css — sección "Catálogo completo" de audaces.html y vesto.html.

   Compartido por las 2 páginas de partner (mismas clases/markup en las 2,
   sólo cambian los datos: categorías de filtro, cantidad de tarjetas, texto
   e ícono de cada una). Linkeado después de partner-page.css en el <head>
   de cada página — ver el comentario de orden de carga en ese archivo, acá
   va justo a continuación por ser otra pieza propia de las páginas de
   partner, no de "/".

   Va justo después de .partner-offer ("Qué ofrece", 4 destacados, fondo
   claro) y antes de .cta-final — a diferencia de .partner-offer, ACÁ es
   fondo oscuro (var(--bg), pedido puntual: "separado de 'Soluciones
   Audaces', esa queda en blanco como ahora"). El propio cambio de color de
   punta a punta ya separa las 2 secciones, sin necesidad de una línea
   divisoria aparte — mismo criterio que usa el resto del sitio para pasar
   de una sección clara a una oscura (ver solucion.css → que-hacemos.css).

   .partner-gallery (las 2 fotos reales que vivían acá debajo) se sacó del
   HTML a pedido puntual — su CSS queda sin usar en partner-page.css/
   responsive.css, no se borró (mismo criterio que .solucion-visual en
   solucion.css, ver ese archivo) por si se la vuelve a pedir más adelante. */

.catalogo{
  background: var(--bg);
  color: var(--text);
  padding: 88px 64px;
}
.catalogo-inner{
  max-width: 1100px;
  margin: 0 auto;
}

.catalogo-eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.catalogo-eyebrow .divider-line{ width: 20px; }
.catalogo-eyebrow .divider-line{ background: var(--blue-light); }
.catalogo-eyebrow span:not(.divider-line){
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-light);
}

.catalogo-title{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 14px;
}
.catalogo-title span{ color: var(--blue-light) !important; } /* pisa el color inline (var(--blue)) que trae el <span> del título en el HTML, pensado para fondo claro */
.catalogo-lead{
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-dim);
  text-align: center;
  max-width: 540px;
  margin: 0 auto 40px;
}

/* ---------- Filtros ---------- */
/* Botones reales (no <a>), toggleados por js/catalogo.js — ver ese archivo.
   Sin aria-selected/role=tablist: no se comportan como pestañas exclusivas
   de un solo panel (cada filtro sólo muestra/oculta tarjetas en el MISMO
   grid), así que semánticamente son más cerca de un grupo de botones que
   de pestañas; aria-pressed en cada uno alcanza. */
.catalogo-filters{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.catalogo-filter{
  font: inherit;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.catalogo-filter:hover{ border-color: var(--blue-light); color: var(--text); }
.catalogo-filter.is-active{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ---------- Grid de tarjetas ---------- */
/* 2 columnas fijas (no auto-fill): mismo criterio que .partner-offer-grid
   en esta misma página (ver partner-page.css) — tarjetas más anchas, con
   más aire para la imagen-placeholder y el copy, en vez de 3 más chicas. */
.catalogo-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* .is-hidden la agrega/saca js/catalogo.js según el filtro activo (ver ese
   archivo) — display:none directo. La transición de entrada/salida al
   cambiar de filtro la hace .is-fading (más abajo), en 2 pasos: primero
   se desvanece, recién con la tarjeta ya invisible se le cambia el
   display, así el display:none nunca se ve "en seco". */
.catalogo-item.is-hidden{ display: none; }
.catalogo-item.is-fading{ opacity: 0; transform: scale(.97) !important; }

/* Mismo lenguaje de "vidrio" que .que-hacemos-card (fondo blanco muy tenue
   + borde sutil), en vez de la tarjeta blanca sólida de antes — acá ya no
   hay contraste de fondo que la separe sola, así que necesita su propio
   borde/fondo para no perderse contra var(--bg). */
.catalogo-item{
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden; /* recorta .catalogo-item-media a las esquinas redondeadas */
  opacity: 1;
  transition: transform .25s var(--ease-smooth), border-color .25s ease, background .25s ease, opacity .18s ease;
}
@media (hover: hover) and (pointer: fine){
  .catalogo-item:hover{
    transform: translateY(-4px);
    border-color: rgba(111,149,255,0.4);
    background: rgba(255,255,255,0.05);
  }
}

/* Imagen con fallback automático al ícono-placeholder: el <img> de cada
   tarjeta trae data-base (no src, ver js/catalogo.js) con la ruta esperada
   en img/catalogo/audaces|vesto/ — el JS prueba .jpg/.webp/.png en ese
   orden y, si ninguna existe todavía, saca el <img> del DOM entero. Sin el
   <img> ahí (o mientras carga), queda abajo el ícono de la tarjeta
   agrandado sobre un fondo con textura sutil, en vez de un rectángulo
   vacío/gris sin diseño — por eso la foto real (position:absolute, cubre
   todo el bloque) y el ícono (centrado, position estática) conviven en el
   mismo .catalogo-item-media sin que uno dependa del otro. Apenas se
   suelta un archivo con el nombre correcto en esa carpeta (ver los
   léeme.txt ahí) se ve solo, sin tocar este HTML/CSS. */
.catalogo-item-media{
  position: relative;
  aspect-ratio: 16 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(111,149,255,0.07) 0px, rgba(111,149,255,0.07) 2px, transparent 2px, transparent 14px),
    rgba(255,255,255,0.03);
  color: var(--blue-light);
  flex: none;
}
.catalogo-item-media svg{ width: 44px; height: 44px; opacity: 0.7; }
.catalogo-item-media img{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pastilla de tipo/categoría, flotando sobre la esquina de la imagen —
   lenguaje de ecommerce (ej. "Nuevo"/"Oferta"), acá informa tipo de
   producto (Software/Hardware) en audaces.html o el módulo en vesto.html.
   z-index explícito, más alto que el de .catalogo-item-media img (ver más
   arriba): un z-index numérico siempre pinta por encima de uno "auto" sin
   importar el orden en el DOM — sin esto, el día que haya foto real,
   taparía la pastilla en vez de quedar debajo. */
.catalogo-item-tag{
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.catalogo-item-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 22px;
}
.catalogo-item-body h3{
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 8px;
}
.catalogo-item-body p{
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  flex: 1; /* empuja el CTA al fondo, para que las tarjetas de copy más corto/largo terminen el link a la misma altura */
}

/* Fila de acciones: "Ver más" (abre el modal, texto más apagado — acción
   secundaria) a la izquierda, "Solicitar información" a la derecha —
   pedido puntual, antes "Solicitar información" vivía solo y a la
   izquierda. */
.catalogo-item-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.catalogo-item-more{
  font: inherit;
  cursor: pointer;
  background: rgba(111,149,255,0.1);
  border: 1.5px solid rgba(111,149,255,0.4);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-light);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.catalogo-item-more:hover{
  background: rgba(111,149,255,0.18);
  border-color: var(--blue-light);
  color: var(--text);
}

.catalogo-item-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-light);
  text-decoration: none;
}
.catalogo-item-cta svg{ width: 14px; height: 14px; transition: transform .2s var(--ease-smooth); }
.catalogo-item-cta:hover svg{ transform: translateX(3px); }

/* ---------- Modal "Ver más" ----------
   Un solo overlay compartido por página (ver el final del HTML, fuera de
   .catalogo-grid): js/catalogo.js clona el <template> de la tarjeta
   clickeada adentro de .catalogo-modal-content en vez de que cada tarjeta
   tenga su propio overlay — 16/9 tarjetas repitiendo un overlay fixed
   entero sería trabajo de layout de más sin necesidad, con uno solo
   alcanza. [hidden] ya lo saca del flujo/accesibilidad sin pelear con
   display:flex (el atributo HTML gana por especificidad de "no mostrado
   en absoluto" hasta que JS lo saca).

   El overlay (no la tarjeta) es el ÚNICO scroll posible mientras está
   abierto, a propósito — mismo motivo que documenta js/navbar.js para el
   menú mobile: overflow:hidden en <body> NO alcanza a bloquear el scroll
   de fondo acá (html, no body, es quien realmente scrollea la página,
   ver css/base.css), así que el fondo seguía moviéndose con la rueda del
   mouse aunque el overlay estuviera encima tapándolo. La solución no es
   repetir ese parche (bloquear eventos a mano): como el overlay cubre
   SIEMPRE el 100% de la pantalla (fixed, inset:0) mientras está abierto,
   cualquier evento de rueda/touch cae adentro suyo, nunca "atraviesa" al
   fondo — alcanza con que el propio overlay sea scrolleable
   (overflow-y:auto) para que la rueda del mouse lo mueva A ÉL en vez de
   buscar el próximo ancestro con scroll (la página de fondo). Esto
   también saca la scrollbar propia que tenía la tarjeta (max-height+
   overflow-y acá abajo, pedido puntual: "no quiero scroll interno") --
   ahora hay un solo scroll (el del overlay), no dos anidados. margin:auto
   en .catalogo-modal-box (no align-items:center acá) centra la tarjeta
   cuando entra entera y YA sigue dejando scrollear hasta ver el principio
   del contenido cuando no entra -- con align-items:center en cambio el
   contenido que se pasa del alto de pantalla queda recortado por igual
   arriba y abajo sin poder scrollear para ver el principio (bug conocido
   de flexbox + overflow). */
.catalogo-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain; /* sin esto, al llegar al final del scroll del overlay la rueda "se derrama" y sigue scrolleando la página de fondo (scroll chaining por defecto del navegador) */
  padding: 24px;
  background: rgba(6,10,20,0.78);
  backdrop-filter: blur(3px);
}
.catalogo-modal-overlay[hidden]{ display: none; }

.catalogo-modal-box{
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: auto;
  flex: none;
  background: #0b1120;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.catalogo-modal-close{
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,10,20,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
}
.catalogo-modal-close:hover{ background: rgba(6,10,20,0.85); }

.catalogo-modal-media{
  position: relative;
  aspect-ratio: 16 / 7;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(111,149,255,0.07) 0px, rgba(111,149,255,0.07) 2px, transparent 2px, transparent 14px),
    rgba(255,255,255,0.03);
  color: var(--blue-light);
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}
.catalogo-modal-media svg{ width: 44px; height: 44px; opacity: 0.7; }
.catalogo-modal-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalogo-modal-content{ padding: 26px 28px 30px; }
.catalogo-modal-content .catalogo-item-tag{
  position: static;
  display: inline-block;
  margin-bottom: 14px;
}
.catalogo-modal-content h3{
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}
.catalogo-modal-content > p{
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.catalogo-modal-content h4{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 10px;
}
.catalogo-modal-content ul{
  list-style: none;
  margin-bottom: 22px;
}
.catalogo-modal-content ul li{
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.catalogo-modal-content ul li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--blue-light);
}
.catalogo-modal-content .btn-primary{ font-size: 14px; padding: 13px 22px; }