/* =============================================================================
   PORTADA "VITRINA" (29-jul-2026)
   Sustituye al hero de constelación WebGL. El cambio de fondo es este:

     ANTES  marca primero → el visitante bajaba para ver un producto.
     AHORA  producto primero → entra y ya tiene delante el estuche, su precio
            y el botón de comprar.

   El hero anterior era una sección MÁS ALTA que la pantalla a propósito: ese
   sobrante era la "pista de scroll" que necesitaba la constelación para
   descender. En el móvil no había nada que descender y ese sobrante se veía
   como un hueco blanco enorme bajo el hero. Al no existir ya la constelación,
   la sección mide exactamente su contenido y el hueco desaparece por completo.

   El fondo (.showcase__sky) son los propios logos del catálogo flotando en
   perspectiva. Es CSS puro —ni WebGL ni canvas—, así que se ve igual en el
   celular más humilde y no puede "fallar y dejar el hero vacío" como pasaba
   con el 3D. Reutiliza las mismas imágenes de la tira de marcas, o sea que el
   navegador ya las tiene en caché.

   Esta sección es SIEMPRE oscura, en tema claro y en oscuro. Por eso define
   sus propios colores (--sc-*) en vez de usar --ink/--surface: esos cambian
   con el tema y aquí el fondo no cambia nunca.
   ============================================================================= */

.showcase {
  --sc-ink: oklch(0.971 0.004 236);
  /* AA sobre el fondo del escenario: contraste 6.1:1 */
  --sc-dim: oklch(0.78 0.015 236);
  --sc-line: oklch(1 0 0 / 0.14);
  --sc-tile: oklch(0.235 0.022 245);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1.25rem, 3.5vw, 2.5rem) 0;
  color: var(--sc-ink);
  background:
    radial-gradient(125% 88% at 50% 2%, oklch(0.255 0.042 198) 0%, transparent 60%),
    radial-gradient(88% 58% at 50% 104%, oklch(0.315 0.058 178 / 0.5) 0%, transparent 72%),
    oklch(0.174 0.017 245);
}

/* ---------------------------------------------------------------- EL CIELO --
   Logos del catálogo flotando al fondo. Van con opacidad baja y desenfoque
   suave: tienen que leerse como textura, no competir con el estuche central.
   La máscara radial los apaga justo donde va el texto — sin ella el titular
   quedaba picado de siluetas y se leía mal (el error del hero anterior). */
.showcase__sky {
  position: absolute;
  inset: -8% -6%;
  z-index: 0;
  pointer-events: none;
  perspective: 900px;
  transform-style: preserve-3d;
  -webkit-mask-image: radial-gradient(62% 52% at 50% 46%, transparent 0%, #000 76%);
  mask-image: radial-gradient(62% 52% at 50% 46%, transparent 0%, #000 76%);
}

/* Cada logo lleva su posición, tamaño, duración y desfase en variables inline
   (index.html). Así el patrón se retoca sin tocar CSS y ninguno va sincronizado
   con otro: si compartieran ritmo se vería un latido colectivo, muy artificial. */
/* Dos movimientos a la vez, y por eso son dos elementos: el contenedor hace el
   vaivén (ida y vuelta) y la imagen de dentro da la vuelta completa. En un solo
   elemento no se puede: dos animaciones que tocan `transform` se pisan y solo
   sobrevive la última. */
.sky__app {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  opacity: 0.19;
  transform-style: preserve-3d;   /* deja pasar la perspectiva a la imagen */
  animation: sky-float var(--d, 6s) var(--t, 0s) ease-in-out infinite alternate;
  will-change: transform;
}

.sky__app img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Giro completo sobre el eje vertical: la pieza se pone de canto a mitad de
     vuelta, que es lo que la hace leer como un objeto con volumen y no como
     una calcomanía girando. */
  animation: sky-spin var(--r, 13s) var(--t, 0s) linear infinite;
  will-change: transform;
  filter: drop-shadow(0 20px 34px oklch(0 0 0 / 0.55)) saturate(0.85);
}

@keyframes sky-float {
  from { transform: translate3d(0, 18px, -90px) scale(0.94); }
  to   { transform: translate3d(0, -30px, 70px) scale(1.09); }
}

@keyframes sky-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Los cuatro archivos más pesados (Adobe, CorelDRAW, Claude, AutoCAD suman
   ~700 KB) solo se piden en pantalla grande. En el celular el fondo se arma
   con los ligeros: el mismo efecto por un tercio de la descarga. */
@media (max-width: 900px) {
  .sky__app--hd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sky__app,
  .sky__app img { animation: none; }
}

/* ------------------------------------------------------------- CONTENIDO -- */
.showcase__in {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
}

.showcase__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.86 0.158 178);
}

.showcase__eyebrow .he-line {
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.showcase__title {
  margin: 0.6rem 0 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 5.6vw, 3.35rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--sc-ink);
  text-wrap: balance;
}

.showcase__title em {
  font-style: normal;
  color: oklch(0.86 0.158 178);
}

/* Sellos de confianza en una sola línea, discretos: refuerzan sin robar
   protagonismo al estuche, que es lo que tiene que mirar el visitante. */
.showcase__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.9rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.showcase__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sc-dim);
}

.showcase__trust svg {
  width: 0.9rem;
  height: 0.9rem;
  color: oklch(0.86 0.158 178);
}

/* -------------------------------------------------- LA VITRINA EN OSCURO --
   El carrusel (commerce.css) nace con pedestal blanco, borde y overflow oculto
   porque allí vive dentro de una sección clara. Aquí el escenario ES la
   portada: el pedestal sobra y los estuches tienen que flotar sueltos sobre el
   fondo. overflow:visible deja que las cajas laterales se salgan del marco —
   .showcase ya recorta por fuera, así que no hay desbordamiento lateral. */
.showcase .deck {
  width: 100%;
  margin: clamp(0.75rem, 2.5vw, 1.5rem) 0 0;
}

.showcase .deck__stage {
  --deck-box: clamp(142px, 40vw, 245px);
  height: calc(var(--deck-box) + 4.5rem);
  background: transparent;
  border: 0;
  overflow: visible;
}

/* Fuera la cuadrícula técnica del pedestal claro */
.showcase .deck__stage::before { display: none; }

/* El halo bajo el estuche central sí se queda, y más marcado: sobre fondo
   oscuro es lo que despega el producto activo del resto. */
.showcase .deck__stage::after {
  width: calc(var(--deck-box) * 2.1);
  background: radial-gradient(closest-side, oklch(0.72 0.132 178 / 0.3), transparent 74%);
}

.showcase .deck__box {
  background: var(--sc-tile);
  border-color: var(--sc-line);
}

.showcase .deck__box.is-center {
  border-color: oklch(0.72 0.132 178 / 0.55);
  box-shadow:
    0 30px 64px oklch(0 0 0 / 0.55),
    0 0 0 1px oklch(0.72 0.132 178 / 0.4),
    0 0 54px oklch(0.72 0.132 178 / 0.32);
}

.showcase .deck__nav {
  background: oklch(1 0 0 / 0.09);
  border-color: var(--sc-line);
  color: var(--sc-ink);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.showcase .deck__nav:hover {
  background: oklch(0.86 0.158 178);
  border-color: oklch(0.86 0.158 178);
  color: #06181c;
}

.showcase .deck__info {
  gap: 0.65rem;
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.showcase .deck__tag {
  background: oklch(1 0 0 / 0.07);
  border-color: var(--sc-line);
  color: var(--sc-dim);
}

.showcase .deck__name { color: var(--sc-ink); }

/* El bloque de precio hereda tokens claros; aquí se reescribe entero. */
.showcase .price,
.showcase .price__now { color: var(--sc-ink); }
.showcase .price__old { color: oklch(0.68 0.012 236); }

/* --------------------------------------------------------------- PUNTITOS --
   La forma y el tamaño viven en commerce.css, junto al resto del carrusel,
   porque /productos también los usa y esa página no carga esta hoja. Aquí solo
   se repintan para el fondo oscuro. */
.showcase .deck__dot { background: oklch(1 0 0 / 0.26); }
.showcase .deck__dot:hover { background: oklch(1 0 0 / 0.45); }
.showcase .deck__dot.is-on { background: oklch(0.86 0.158 178); }

/* ------------------------------------------------------ BUSCADOR + PISTA --
   Va DEBAJO del producto, no encima: quien llega buscando algo concreto lo
   tiene a un golpe de vista, pero no se interpone entre el visitante y el
   estuche, que es lo que vende. Es un <form> GET a /productos, así que
   funciona aunque el JavaScript falle. */
.showcase__find {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  width: 100%;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.showcase__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--sc-dim);
}

.showcase__search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: min(100%, 520px);
  padding: 0.35rem 0.35rem 0.35rem 0.9rem;
  border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.07);
  border: 1px solid var(--sc-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color var(--t), background-color var(--t);
}

.showcase__search:focus-within {
  border-color: oklch(0.86 0.158 178 / 0.65);
  background: oklch(1 0 0 / 0.11);
}

.showcase__search > svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--sc-dim);
}

.showcase__search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0;
  border: 0;
  background: none;
  color: var(--sc-ink);
  font: inherit;
  font-size: 0.92rem;
}

.showcase__search input::placeholder { color: oklch(0.7 0.012 236); }
.showcase__search input:focus { outline: none; }

/* Quita la "x" nativa de los <input type=search> en Chrome: se pinta en
   oscuro sobre fondo oscuro y no se ve. */
.showcase__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.showcase__search .btn { flex: none; }

/* -------------------------------------------------------- BARRA DE PIE ----
   Cierra la portada con las cuatro garantías. Cuatro columnas en escritorio,
   dos en el celular: en una sola columna ocuparía media pantalla de scroll. */
.showcase__bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: clamp(1.5rem, 4vw, 2.75rem) 0 0;
  padding: clamp(1rem, 2.5vw, 1.35rem) 0;
  list-style: none;
  border-top: 1px solid var(--sc-line);
  background: oklch(0 0 0 / 0.22);
}

.showcase__bar li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sc-dim);
  text-align: left;
}

.showcase__bar svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: oklch(0.86 0.158 178);
}

@media (max-width: 720px) {
  .showcase__bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 0.75rem;
  }
  .showcase__bar li {
    justify-content: flex-start;
    font-size: 0.76rem;
  }
}

/* --------------------------------------------------------------- CELULAR -- */
@media (max-width: 560px) {
  .showcase {
    padding-block: 1rem 0;
  }

  /* Estuche más contenido: a 42vw el central se comía el ancho entero y los
     vecinos se salían de la pantalla. A 34vw caben los tres y se entiende de
     un vistazo que hay más productos a los lados. */
  .showcase .deck__stage {
    --deck-box: clamp(118px, 34vw, 158px);
  }

  /* Las flechas se pegan al borde para no comerse ancho del estuche */
  .showcase .deck__nav--prev { left: -0.25rem; }
  .showcase .deck__nav--next { right: -0.25rem; }

  .showcase__trust {
    gap: 0.3rem 0.75rem;
  }
  .showcase__trust li { font-size: 0.72rem; }
}

/* En pantallas muy bajas (portátiles de 13" con el navegador a pantalla
   completa) el conjunto no debe pasar del pliegue: se recorta el aire. */
@media (min-width: 961px) and (max-height: 820px) {
  .showcase .deck__stage { --deck-box: clamp(142px, 17vw, 195px); }
  .showcase__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
}