/* PromoPrint · «Soluciones comerciales» (entre la franja de marcas y el catálogo).
   Dos fotografías a todo el ancho que se leen como una sola escena: la derecha se superpone a
   la izquierda y aparece con un degradado progresivo, así la unión no deja línea ni franja.
   Arriba y abajo la escena se funde con el negro de la página. Tokens de hero.css. */

.sol {
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --x0: var(--edge-x); /* borde editorial del sitio (hero.css) */
  --ov: 12vw;                                                      /* ancho de la unión (vw: misma medida para posiciones y máscara) */

  position: relative;
  background: var(--ink);
  padding: 0;
}

.sol__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Como el hero, la escena ocupa siempre todo el ancho. En pantallas muy anchas el alto se
     limita por la altura de la ventana (no por un tope fijo), así las fotos no se recortan de más
     y la sección nunca supera una pantalla. */
  height: clamp(640px, 58vw, max(980px, 92svh));
  /* Rejilla con el eje del sitio: encabezado arriba y las dos escenas abajo, cada una en su
     mitad del contenedor y alineadas por arriba, como columnas de una misma sección. */
  display: grid;
  grid-template-columns: var(--x0) minmax(0, 1fr) minmax(0, 1fr) var(--x0);
  grid-template-rows: auto 1fr auto;
  padding: clamp(28px, 3vw, 44px) 0 clamp(28px, 3.4vw, 52px);
  box-sizing: border-box;
}

/* ── Fotografías ──────────────────────────────────────── */

/* Las fotos ocupan la franja central: el encabezado solo pisa su fundido superior (estantes) y
   abajo, sobre el fundido de la mesa, van los textos. Así ningún texto pisa el termo, el bolso ni sus logos. */
.sol__media {
  position: absolute;
  /* Márgenes acotados: en pantallas muy altas el encabezado y los textos siguen pegados a la foto. */
  inset: clamp(90px, 12%, 230px) 0 clamp(150px, 20%, 240px);
  z-index: -2;
  transform-origin: 50% 50%; /* ambas escalan desde el centro: la unión no se mueve */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.4) 6%, rgba(0, 0, 0, 0.85) 12%, #000 17%, #000 90%, rgba(0, 0, 0, 0.5) 95%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.4) 6%, rgba(0, 0, 0, 0.85) 12%, #000 17%, #000 90%, rgba(0, 0, 0, 0.5) 95%, transparent 100%);
}

.sol__img {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0;
  overflow: hidden;
}
.sol__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Izquierda: opaca hasta su borde, debajo de la unión. Encuadre: mano y termo. */
.sol__img--expres { left: 0; width: calc(50% + var(--ov) / 2); }
.sol__img--expres img { object-position: 18% 50%; }

/* Derecha: encima, entra con un degradado suavizado sobre la izquierda (fundido cruzado, sin
   oscurecer el centro). Encuadre: el bolso principal y la mano. */
.sol__img--mayorista {
  left: calc(50% - var(--ov) / 2);
  right: 0;
  --seam: linear-gradient(90deg,
    transparent 0, rgba(0, 0, 0, 0.08) calc(var(--ov) * 0.15), rgba(0, 0, 0, 0.3) calc(var(--ov) * 0.35),
    rgba(0, 0, 0, 0.62) calc(var(--ov) * 0.6), rgba(0, 0, 0, 0.88) calc(var(--ov) * 0.82), #000 var(--ov));
  -webkit-mask-image: var(--seam);
          mask-image: var(--seam);
}
.sol__img--mayorista img { object-position: 100% 50%; }

/* Sombras localizadas: solo detrás de los textos, nunca sobre el termo ni el bolso. */
.sol__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 0% 0%, rgba(11, 11, 12, 0.82), rgba(11, 11, 12, 0.4) 55%, transparent 100%),
    radial-gradient(36% 44% at 0% 100%, rgba(11, 11, 12, 0.86), rgba(11, 11, 12, 0.45) 55%, transparent 100%),
    radial-gradient(30% 40% at 56% 100%, rgba(11, 11, 12, 0.8), rgba(11, 11, 12, 0.4) 55%, transparent 100%);
}

/* ── Textos: misma jerarquía que el resto del sitio (etiqueta, título, descripción) ── */

/* Título centrado sobre la escena: ocupa todo el ancho del contenedor. */
.sol__head { grid-column: 1 / -1; grid-row: 1; text-align: center; }

.sol__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  font: 600 12.5px/1.2 var(--font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.7);
}
.sol__eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand);
}

.sol__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.1rem, 1rem + 2.4vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--paper);
}
.sol__line { display: block; }
.sol__title em { font-style: normal; color: var(--brand); }

/* Cada escena abre con una línea fina con un tramo naranja: las dos columnas se leen como
   partes de la misma sección y no como etiquetas sueltas sobre la foto. */
.sol__copy {
  /* Anclado desde arriba, a una distancia fija sobre el borde inferior de las fotos: si un texto
     crece (otra línea, el botón) el título no se mueve; el bloque solo crece hacia abajo.
     Sin grid-row, el bloque absoluto usa su columna como ancho y el escenario como alto. */
  position: absolute;
  top: calc(100% - clamp(150px, 20%, 240px) - 90px);
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
}
.sol__copy--expres { grid-column: 2 / 3; padding-right: clamp(24px, 3vw, 48px); }
.sol__copy--mayorista { grid-column: 3 / 4; padding-left: clamp(24px, 3vw, 48px); }
.sol__copy::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(4px, 0.5vw, 8px);
  /* Filete corto y centrado sobre el título, con una marca naranja en su borde izquierdo. */
  width: min(100%, 260px);
  margin-inline: auto;
  background:
    linear-gradient(var(--brand), var(--brand)) 0 0 / 34px 1px no-repeat,
    linear-gradient(rgb(var(--paper-rgb) / 0.3), rgb(var(--paper-rgb) / 0.3)) 0 0 / 100% 1px no-repeat;
}

.sol__name {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.6rem, 0.95rem + 1.3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--paper);
}

.sol__lead {
  margin: 10px auto 0;
  max-width: 34ch;
  font: 400 clamp(1rem, 0.9rem + 0.3vw, 1.2rem)/1.45 var(--font);
  color: rgb(var(--paper-rgb) / 0.78);
}

.sol__note {
  margin: 6px auto 0;
  font: 400 13px/1.45 var(--font);
  color: rgb(var(--paper-rgb) / 0.52);
}

.sol__link {
  /* Mismo botón que el del banner (píldora, medidas y tipografía), aquí en naranja sobre negro. */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  height: 52px;
  margin-top: 16px;
  padding: 0 22px 0 28px;
  font: 600 16px/1 var(--font);
  color: var(--ink);
  background: var(--brand);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgba(253, 87, 0, 0.55);
}
.sol__link svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 320ms var(--ease-ui);
}
.sol__link:hover { background-color: #ff6a1f; }
.sol__link:hover svg { transform: translate(2px, -2px); }
.sol__link:active { transform: scale(0.98); }
.sol__link:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; border-radius: 999px; }

/* ── Entrada (la activa soluciones.js una sola vez; sin JS todo queda visible) ── */

.sol.js-reveal .sol__media {
  transform: scale(1.035);
  transition: transform 1400ms var(--reveal-ease);
}
.sol.js-reveal [data-sol-text] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 800ms var(--reveal-ease) var(--delay, 0ms),
    transform 800ms var(--reveal-ease) var(--delay, 0ms);
}
.sol.js-reveal .is-in,
.sol.js-reveal .is-in [data-sol-text] { opacity: 1; transform: none; }
.sol.js-reveal .sol__media.is-in { transform: none; }

/* ── Tablet: unión algo más ancha y textos más estrechos ── */

@media (max-width: 1099px) {
  .sol { --ov: 14vw; }
  /* Más aire arriba: con el título en su tamaño mínimo, la tapa del termo no queda debajo. */
  .sol__stage { height: clamp(660px, 70vw, 760px); }
  .sol__media { inset: 15% 0 24%; }
  .sol__copy { top: calc(76% - 40px); }
  .sol__img--expres img { object-position: 10% 50%; }
}

/* ── Móvil: escenas apiladas, cada una con su texto; la unión pasa a ser vertical ── */

@media (max-width: 767px) {
  .sol { padding-top: 8px; }
  .sol__stage {
    height: auto;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "s1" "c1" "s2" "c2";
    padding: 0;
  }
  .sol__stage::after { display: none; }

  .sol__head {
    position: static;
    grid-area: head;
    padding: 8px var(--edge-x) 0;
  }

  .sol__media { display: contents; }
  .sol__img {
    position: relative;
    inset: auto;
    width: auto;
    aspect-ratio: 1 / 1.02;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.5) 6%, #000 14%, #000 84%, rgba(0, 0, 0, 0.5) 93%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.5) 6%, #000 14%, #000 84%, rgba(0, 0, 0, 0.5) 93%, transparent 100%);
  }
  .sol__img--expres { grid-area: s1; left: auto; }
  .sol__img--mayorista { grid-area: s2; left: auto; right: auto; margin-top: 8px; }
  .sol__img--expres img { object-position: 46% 50%; }
  .sol__img--mayorista img { object-position: 74% 50%; }

  /* Cada texto va bajo su foto y apenas entra en el fundido de la mesa, sin pisar el producto. */
  .sol__copy {
    position: relative;
    top: -24px;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    max-width: none;
    margin-top: -36px;
    padding: 0 var(--edge-x) 24px;
  }
  .sol__copy--expres { grid-area: c1; width: auto; margin-left: 0; justify-self: stretch; }
  .sol__copy--mayorista { grid-area: c2; padding-bottom: 8px; width: auto; margin-left: 0; justify-self: stretch; }
  .sol__copy--expres, .sol__copy--mayorista { left: auto; }

  /* En una columna cada foto escala sola (no hay unión lateral que mantener). */
  .sol.js-reveal .sol__img img {
    transform: scale(1.035);
    transition: transform 1400ms var(--reveal-ease);
  }
  .sol.js-reveal .sol__img.is-in img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sol.js-reveal .sol__media,
  .sol.js-reveal .sol__img img,
  .sol.js-reveal [data-sol-text] { transform: none; opacity: 1; transition: none; }
  .sol__link svg { transition: none; }
}