/* ================================================================
   PORTADA «MOSAICO» — elegida por Seven el 2026-11-03 entre tres
   propuestas (/_propuestas/, rama feat/portadas-propuestas-y-ajustes).
   La franja de hechos y la banda de marcas son las de css/styles.css.
   Reglas del dueño: sobrio, naranja #FF6600, Barlow Condensed +
   Archivo, velos solo negro a transparente, nada con «reducir movimiento».
   ================================================================ */

.portada--p2 {
  --p-sombra: 0 2px 14px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.55);
  --p-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================================================================
   MOSAICO
   Como una tienda grande: el video en un recuadro grande con el
   titulo y, al lado, las cuatro categorias que mas se buscan, cada
   una con la foto de un producto real, la cantidad y las marcas (las
   copia propuestas.js de la grilla de categorias del inicio). Los
   recuadros de categoria son claros en los dos temas: las fotos del
   catalogo vienen con fondo blanco.
   ================================================================ */
.portada--p2 .p2-escena {
  align-items: stretch;
  padding: calc(var(--header-clearance) + 0.25rem) var(--portada-borde) clamp(0.75rem, 2.4vh, 1.5rem);
  background: var(--portada-base);
}

/* Proporciones: la columna de categorias mide lo mismo que el alto del
   mosaico, asi cada recuadro queda casi cuadrado en cualquier pantalla (en
   un monitor alto se estiraban hacia arriba). El alto del mosaico es la
   pantalla menos el header, la franja de hechos y las marcas (~250 px). En
   pantallas anchas el mosaico usa hasta 1800 px en vez de los 1400 del sitio. */
.portada--p2 {
  --p2-alto: calc(min(100svh, 1200px) - 250px);
}

.portada--p2 .p2-escena {
  padding-inline: max(clamp(1rem, 5vw, 4rem), calc((100% - 1800px) / 2));
}

.p2-mosaico {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(50%, var(--p2-alto));
  gap: clamp(0.6rem, 1vw, 0.9rem);
  width: 100%;
}

.p2-video {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: clamp(1.25rem, 3vw, 2.75rem);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-surface);
  background: #0E0E0F url("../assets/images/hero-poster.webp") center 40% / cover no-repeat;
  color: #FFFFFF;
}

.p2-video .portada-video {
  z-index: -2;
}

/* Negro desde abajo, donde va el texto. Sin color. */
.p2-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg,
    rgba(10, 10, 11, 0.9) 0%,
    rgba(10, 10, 11, 0.55) 38%,
    rgba(10, 10, 11, 0) 70%);
  pointer-events: none;
}

/* La columna mide lo que el titulo (sus dos renglones): el renglon chico
   y la bajada no suman ancho (width 0 + min-width 100 %), solo lo toman. */
.p2-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: max-content;
  max-width: 100%;
  min-height: 0;
}

.p2-texto .portada-kicker,
.portada--p2 .p2-sub {
  width: 0;
  min-width: 100%;
}

.p2-linea {
  display: block;
  white-space: nowrap;
}

.p2-p {
  display: inline-block;
}

/* El renglon chico cae a veces sobre el cielo claro del video. */
.portada--p2 .portada-kicker {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
}

.p2-grande {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: min(clamp(2.4rem, 1rem + 3.6vw, 5.2rem), 9.5vh);
  line-height: 0.92;
  text-transform: uppercase;
}

.p2-acento {
  white-space: nowrap;
  color: var(--orange-primary);
}

.portada--p2 .p2-sub {
  margin-top: clamp(0.6rem, 1.6vh, 1rem);
}

.portada--p2 .portada-cta {
  margin-top: clamp(0.9rem, 2.4vh, 1.6rem);
}

.p2-categorias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: inherit;
  min-height: 0;
}

.p2-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: clamp(0.75rem, 1.4vw, 1.15rem);
  overflow: hidden;
  border-radius: var(--radius-surface);
  background: #F1F0EC;
  color: #0E0E0F;
  text-decoration: none;
}

.p2-cat:focus-visible {
  outline: 2px solid var(--orange-primary);
  outline-offset: 3px;
}

.p2-cat-foto {
  position: absolute;
  /* Abajo deja lugar al nombre y a las dos lineas de la descripcion. */
  inset: clamp(0.6rem, 1.2vw, 1rem) clamp(0.6rem, 1.2vw, 1rem) calc(clamp(0.75rem, 1.4vw, 1.15rem) + 4.4rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.p2-cat-foto img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* El fondo blanco de la foto se funde con el del recuadro. */
  mix-blend-mode: multiply;
  transition: transform 0.45s var(--p-curva);
}

.p2-cat:hover .p2-cat-foto img {
  transform: scale(1.05);
}

.p2-cat-nombre {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 0.8rem + 0.9vw, 1.7rem);
  line-height: 1;
  text-transform: uppercase;
}

.p2-cat-ir {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  color: var(--orange-primary);
  transition: transform 0.3s var(--p-curva);
}

.p2-cat:hover .p2-cat-ir {
  transform: translateX(3px);
}

.p2-cat-desc {
  position: relative;
  display: -webkit-box;
  margin-top: 0.3rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* Siempre dos lineas de alto: los nombres quedan a la misma altura. */
  min-height: 2.7em;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #55514E;
}

/* Entrada, una sola vez al cargar (~1,5 s en total):
   1. el recuadro del video se acerca desde un poco mas grande y aparece;
   2. el titulo se barre palabra por palabra; despues la bajada y el boton;
   3. las categorias suben una por una, la foto se acomoda y la flecha corre. */
@media (prefers-reduced-motion: no-preference) {
  .p2-video { animation: p2-acerca 1.1s var(--p-curva) backwards; }
  .p2-video .portada-video { animation: p2-zoom 1.8s var(--p-curva) backwards; }
  .portada--p2 .portada-kicker { animation: pt-aparece 0.5s var(--p-curva) 0.4s backwards; }
  .p2-p { animation: pt-barrido 0.55s var(--p-curva) calc(0.48s + var(--i) * 0.08s) backwards; }
  .portada--p2 .portada-sub { animation: pt-aparece 0.5s var(--p-curva) 0.9s backwards; }
  .portada--p2 .portada-cta { animation: pt-aparece 0.5s var(--p-curva) 1s backwards; }

  .p2-cat { animation: p2-sube 0.7s var(--p-curva) backwards; }
  .p2-cat:nth-child(1) { animation-delay: 0.3s; }
  .p2-cat:nth-child(2) { animation-delay: 0.4s; }
  .p2-cat:nth-child(3) { animation-delay: 0.5s; }
  .p2-cat:nth-child(4) { animation-delay: 0.6s; }
  .p2-cat-foto { animation: p2-foto 0.8s var(--p-curva) backwards; }
  .p2-cat:nth-child(1) .p2-cat-foto { animation-delay: 0.45s; }
  .p2-cat:nth-child(2) .p2-cat-foto { animation-delay: 0.55s; }
  .p2-cat:nth-child(3) .p2-cat-foto { animation-delay: 0.65s; }
  .p2-cat:nth-child(4) .p2-cat-foto { animation-delay: 0.75s; }
  .p2-cat-ir { animation: p2-flecha 0.5s var(--p-curva) 1.1s backwards; }

  .portada--p2 .portada-hechos { animation-delay: 0.9s; }
  .portada--p2 .portada-marcas { animation-delay: 1.05s; }
}

@keyframes p2-acerca {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: none; }
}

@keyframes p2-zoom {
  from { transform: scale(1.12); }
  to { transform: none; }
}

@keyframes p2-sube {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes p2-foto {
  from { opacity: 0; transform: scale(0.88) translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes p2-flecha {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .portada--p2 .p2-escena {
    padding: calc(var(--header-clearance) + 0.5rem) var(--portada-borde) 1rem;
  }
  .p2-mosaico {
    grid-template-columns: minmax(0, 1fr);
  }
  .p2-video {
    min-height: 54svh;
  }
  .p2-cat {
    min-height: 168px;
  }
  .p2-cat-foto {
    inset: 0.6rem 0.6rem 4.9rem;
  }
}

@media (max-width: 600px) {
  .p2-grande { font-size: clamp(2.3rem, 1.2rem + 6vw, 3rem); }
  .portada--p2 .portada-cta { width: 100%; display: flex; }
  .p2-cat-desc { font-size: 0.74rem; }
}