/* =========================================================================
   SCALAR — landing page
   partner-page.css — subpáginas propias de cada proveedor (audaces.html,
   vesto.html), a las que llevan los botones de "Proveedores oficiales de"
   en "La solución" (ver css/solucion.css y el HTML de esas 2 páginas).

   Antes esto era un modal (ver historial): un solo <div> que se rellenaba
   por JS con el resumen de cada empresa. Se cambió a 2 páginas propias
   porque el pedido fue "más detallado, con fotos" — un modal chico no daba
   el espacio para eso, y una página propia además queda con URL compartible
   (audaces.html / vesto.html) en vez de un estado que sólo existe adentro
   de "/".

   Cada página reusa navbar.css/footer.css/cta-final.css tal cual (mismas
   clases, mismo HTML que index.html para esas 3 piezas) y hero.css sólo por
   .btn-primary/.btn-link (no se usa nada del resto de ese archivo, no hay
   <section class="hero"> real acá — ver el HTML: navbar.js ya contempla que
   no exista y no rompe, ver el segundo IIFE de ese archivo). Este archivo
   cubre las 3 piezas nuevas y propias de estas páginas:
     1. .partner-hero    — intro oscura (mismo rol que el hero real de "/",
                            ver comentario ahí abajo sobre por qué oscura)
     2. .partner-offer   — grid de "qué ofrece", fondo claro
     3. .partner-gallery — 2 fotos reales del catálogo del hero de "/"
   ========================================================================= */

/* ---------- 1. Partner hero ----------
   Oscura (var(--bg)) a propósito, no clara: el navbar es una tarjeta de
   vidrio oscuro (ver navbar.css) pensada para flotar sobre algo oscuro
   arriba de todo (.nav-scrim, el mismo recurso que usa el hero real de "/")
   — sobre un fondo claro esa franja se ve como una barra oscura pegada
   sin motivo. Al arrancar oscura acá, el mismo .nav-scrim que ya existe en
   el HTML (ver index.html) vuelve a tener sentido, sin inventar una versión
   nueva sólo para estas páginas. */
/* min-height + flex/align-items:center (no display:flex normal, ver
   .partner-hero-inner): el h1 de Audaces ocupa 2 líneas ("Maquinaria y
   software textil de Audaces") y el de Vesto 1 ("ERP para tu producción
   con Vesto"), así que sin esto el hero de cada página tenía una altura
   distinta (673px vs 598px, medido) — pasar de una a la otra hacía que el
   resto de la página saltara de golpe (pedido puntual: "el cambio es muy
   brusco de tamaño"). Con las 2 páginas a la MISMA altura de hero (el
   contenido más corto de Vesto queda centrado dentro del mismo alto que
   el de Audaces, no pegado arriba) ese salto desaparece de raíz, en vez
   de sólo disimularlo con una animación. El valor (680px) sale de la
   altura real medida del hero de Audaces (el más alto de los 2) más un
   pequeño margen. Se resetea en mobile (ver responsive.css): ahí cada
   hero ya es angosto y apilado, una franja vacía grande se vería peor que
   el salto que soluciona en desktop. */
.partner-hero{
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  padding: 168px 64px 96px;
  min-height: 680px;
  display: flex;
  align-items: center;
}

/* Mismo wash de color radial que .solucion::after (ver solucion.css), acá
   en la paleta oscura: reusa el lenguaje visual del sitio en vez de un
   fondo plano sin textura. Siempre corriendo (a diferencia de la versión
   con .is-bg-visible de las secciones de "/"): estas páginas no tienen el
   IntersectionObserver que pausa/retoma esa animación (ver problema-
   carousel.js, bloque que no se linkea acá), así que se deja simple. */
.partner-hero::before{
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(59,107,245,0.22) 0%, transparent 60%),
    radial-gradient(circle, rgba(111,149,255,0.14) 0%, transparent 65%);
  background-repeat: no-repeat;
  background-size: 45% 65%, 38% 55%;
  background-position: 15% 20%, 85% 80%;
  filter: blur(70px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .partner-hero::before{ /* ya no anima, la regla queda por si en algún momento se le agrega animation */ }
}

/* Se probó alineado a la izquierda, como el hero de "/" (ver historial) —
   pero ahí funciona porque tiene la foto ocupando la mitad derecha de
   contrapeso; acá, de una sola columna, el texto pegado a la izquierda
   dejaba un vacío enorme del lado derecho y se sentía descolgado, no
   compositivo. Centrado (como .pqe-title en por-que-elegirnos.css) es lo
   que corresponde para un hero de una sola columna sin ese contrapeso. */
.partner-hero-inner{
  position: relative;
  z-index: 1;
  /* width:100% porque .partner-hero ahora es flex (ver arriba, para el
     min-height): un item de flex se encoge a su contenido por defecto,
     sin esto perdía el ancho completo que necesita para que margin:auto +
     max-width lo sigan centrando como antes. */
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  /* Entrada suave al cargar la página (fundido + sube 16px): funciona en
     TODOS los navegadores, a diferencia del crossfade de @view-transition
     (ver shared.css), que sólo corren los que soportan cross-document view
     transitions — esta es la que garantiza que SIEMPRE haya animación al
     entrar a audaces.html/vesto.html, sin importar el navegador. "both"
     para que se quede en el estado "from" (opacity:0) antes de arrancar,
     no en el estilo final sin animar durante ese primer instante. Usa
     @keyframes heroContentIn de shared.css (mismo recurso que .hero-copy
     en hero.css, ver ahí) en vez de uno propio — mismo criterio de "una
     animación de entrada consistente" en toda página con hero, no una
     por sección. */
  animation: heroContentIn .7s var(--ease-smooth) both;
}
@media (prefers-reduced-motion: reduce){
  .partner-hero-inner{ animation: none; }
}

/* "← Volver al inicio": no usa .btn-link (esa flecha apunta a la derecha,
   pensada para "seguir avanzando" — acá es al revés, volver). Estilo propio,
   chico y discreto, arriba del todo del bloque.

   Sólo en mobile (display:none acá, ver el override en responsive.css):
   en desktop/tablet el navbar ya tiene el link "Inicio" a la vista todo
   el tiempo, así que este es redundante ahí — sólo hace falta en mobile,
   donde el navbar está colapsado detrás del botón hamburguesa. */
.partner-back{
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 32px;
  transition: color .2s ease, gap .2s ease;
}
.partner-back:hover{ color: var(--text); gap: 12px; }
.partner-back svg{ width: 16px; height: 16px; flex: none; }

/* Usa .problema-eyebrow/.que-hacemos-eyebrow como base conceptual (línea +
   texto en mayúsculas), pero centrado como .pqe-eyebrow — clase propia
   porque ninguna de las existentes combina "centrado" + paleta oscura.
   Va ANTES que .partner-badge en el HTML (antes era al revés, ver
   historial): así el tamaño de cada pieza va de menor a mayor sin
   alternar (back-link chico → eyebrow chico → insignia mediana → h1
   grande), en vez de chico-GRANDE-chico-GRANDE, que era el salto que se
   sentía raro. */
.partner-eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}
.partner-eyebrow .divider-line{ width: 20px; background: var(--blue-light); }
.partner-eyebrow span:not(.divider-line){
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-light);
}

/* Antes esto era un recuadro blanco sólido con sombra (ver historial): el
   logo de Audaces/Vesto no está pensado para fondo oscuro (mismo motivo
   por el que en "La solución" van sobre fondo claro, ver solucion.css),
   así que en vez de pelearla se le daba su propio recuadro blanco — pero
   quedaba como un sticker despegado del resto del bloque (pedido puntual:
   "ese recuadro blanco no me gusta").

   Ahora el logo va suelto, directo sobre el fondo oscuro, vía un filtro
   CSS que lo pasa a blanco sólido (brightness(0) lo deja todo negro sin
   tocar el canal alfa, invert(1) lo da vuelta a blanco) — funciona con
   cualquier logo sin importar su color original (el ícono de Audaces
   pierde su celeste propio, por ejemplo), a partir del mismo archivo a
   color que ya se usa en "La solución" (img/audaces.svg / img/vesto.svg —
   antes .png, cambiados a SVG porque el borde de los logos se veía
   "cerruchado" incluso re-muestreando el PNG: el logo original tenía el
   canal alfa binario, sin antialiasing, algo que un archivo vectorial no
   sufre en ningún tamaño), sin necesidad de subir una versión en blanco
   aparte. Probado y
   confirmado ("me gusta como queda así todo blanco, dejemoslo así con ese
   filtro") — queda como solución final, no como parche a reemplazar.
   Bastante más grande que la versión con tarjeta (26px adentro de la
   caja) porque ahora es un elemento suelto, no algo metido en una caja
   chica. */
.partner-badge{
  height: 58px;
  width: auto;
  display: block;
  margin: 0 auto 32px;
  filter: brightness(0) invert(1);
}

.partner-hero h1{
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.partner-hero h1 .accent{ color: var(--blue-light); }

.partner-hero-lead{
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 560px;
  margin: 0 auto 36px;
}

.partner-hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* ---------- 2. Qué ofrece ---------- */

/* Mismo #f5f7fb + mismo padding vertical (88px) que .por-que-elegirnos —
   consistencia con el resto del sitio en vez de un tono nuevo. */
.partner-offer{
  background: #f5f7fb;
  padding: 88px 64px;
}
.partner-offer-inner{
  max-width: 1100px;
  margin: 0 auto;
}
.partner-offer-title{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 56px;
}

.partner-offer-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 48px;
}

/* Ítem simple: ícono circular (mismo lenguaje que .pqe-icon/.problema-icon,
   ver por-que-elegirnos.css) + título + bajada corta, sin tarjeta propia
   (mismo criterio que se terminó usando para los logos de partners en
   "La solución": no todo necesita ir en una caja con sombra). */
.partner-offer-item{
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.partner-offer-icon{
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--icon-bg);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-offer-icon svg{ width: 22px; height: 22px; }
.partner-offer-item h3{
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.partner-offer-item p{
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- 3. Galería ---------- */

/* Fondo blanco, para diferenciarse del gris de "Qué ofrece" arriba (mismo
   criterio de alternar tonos claros que ya usan "El problema" #fdfdfd vs
   "La solución" #f5f7fb). */
.partner-gallery{
  background: #fff;
  padding: 8px 64px 96px;
}
.partner-gallery-inner{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.partner-gallery-item{
  border-radius: 20px;
  overflow: hidden;
  background: var(--icon-bg);
  border: 1px solid var(--surface-border);
}
.partner-gallery-item img{
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}
/* Fotos del catálogo real del hero de "/" (ver el HTML de cada página) en
   vez de fotos genéricas de stock: ya existen y ya muestran producto real
   de cada proveedor (ver los comentarios de `positions`/`captions` en
   js/hero-carousel.js) — reusarlas evita subir fotos de archivo sin
   relación real con Audaces/Vesto. object-position propio por imagen,
   mismo criterio que hero-carousel.js, para no cortar el sujeto principal. */
.partner-gallery-caption{
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: #fff;
}