/* =========================================================
   PUN CORE — front-page.css
   Ajustes específicos de la página de inicio (Fase 1).
   ========================================================= */

/* ---------- MICROANIMACIONES (discretas, respetan prefers-reduced-motion
   vía la regla global en main.css) ---------- */
.pun-reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 600ms ease, transform 600ms ease;
}
.pun-reveal.is-visible{ opacity:1; transform:translateY(0); }
.pun-reveal--delay-1{ transition-delay:120ms; }
.pun-reveal--delay-2{ transition-delay:240ms; }

/* ---------- 1. HERO ---------- */
.pun-front .pun-hero--home{
  min-height:auto;
  padding-top:var(--pun-space-7);
  padding-bottom:var(--pun-space-5);
  display:block;
}
.pun-hero__media{
  margin-top:var(--pun-space-6);
  aspect-ratio:21/9;
  border-radius:var(--pun-radius-lg);
  overflow:hidden;
  background:linear-gradient(135deg,var(--pun-gray-100) 0%,var(--pun-gray-300) 55%,var(--pun-gray-100) 100%);
}
.pun-hero__media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){
  .pun-hero__media{ aspect-ratio:4/3; }
}

/* ---------- 2. CATEGORÍAS PRINCIPALES ---------- */
.pun-categories{ padding-block:var(--pun-space-7); }
.pun-categories__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--pun-space-4);
}
/* .pun-cat-card y derivados: estilos compartidos, ver assets/css/main.css */
@media (max-width:640px){
  .pun-categories__grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- 3. SELECCIÓN PUN (5 productos, 5 columnas en escritorio) ---------- */
.pun-selection{ padding-block:var(--pun-space-6); }
.pun-selection ul.products{ grid-template-columns:repeat(5,1fr) !important; }
@media (max-width:1200px){ .pun-selection ul.products{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:880px){ .pun-selection ul.products{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:520px){ .pun-selection ul.products{ grid-template-columns:1fr !important; } }

/* ---------- 4. MARCAS ---------- */
.pun-brands{
  padding-block:var(--pun-space-6);
  border-top:1px solid var(--pun-gray-100);
  border-bottom:1px solid var(--pun-gray-100);
}
.pun-brands__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--pun-space-6);
}
.pun-brands__item{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--pun-gray-500);
  transition:color var(--pun-transition);
}
.pun-brands__item:hover{ color:var(--pun-black); }

/* ---------- 5. FILOSOFÍA PUN ---------- */
.pun-philosophy{
  padding-block:var(--pun-space-7);
  text-align:center;
}
.pun-philosophy__text{
  max-width:760px;
  margin-inline:auto;
  font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.5;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--pun-black);
}

.pun-home-content{
  padding-block:var(--pun-space-6);
  max-width:820px;
  margin-inline:auto;
}

/* ---------- 1.5 BANNER COMERCIAL DINÁMICO (entre Hero y Categorías) ---------- */
.pun-banner-section{ padding-block:var(--pun-space-6); }
.pun-banner{
  position:relative;
  aspect-ratio:21/9;
  border-radius:var(--pun-radius-lg);
  overflow:hidden;
  background:linear-gradient(135deg,var(--pun-gray-100) 0%,var(--pun-gray-300) 55%,var(--pun-gray-100) 100%);
}
.pun-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.pun-banner__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  gap:var(--pun-space-2);
  padding:var(--pun-space-5) var(--pun-space-4) var(--pun-space-4);
  background:linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(10,10,10,.75) 100%);
}
.pun-banner__title{
  color:var(--pun-white);
  font-size:clamp(1.25rem,2.6vw,1.75rem);
  font-weight:800;
  letter-spacing:0.01em;
  line-height:1.15;
}
.pun-banner__subtitle{
  color:var(--pun-gray-100);
  font-size:0.95rem;
  max-width:520px;
}
.pun-banner__button{ margin-top:var(--pun-space-2); }
@media (max-width:640px){
  .pun-banner{ aspect-ratio:4/3; }
}