/* ============================================================================
 * herov2 — hero configurable por JSON. Diseño impactante, mobile-first, sin JS.
 * Acento de campaña: se re-brandea pisando --h2-accent (el JSON lo hace inline).
 * Animación solo transform/opacity. Respeta reduced-motion y focus-visible.
 * ==========================================================================*/
.pg-herov2{
  --h2-accent: #fb7185;                 /* coral Día del Niño · único hex de marca, overridable */
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  margin: 10px 0;
  min-height: 480px;
  isolation: isolate;
  background: var(--hero-wash, #dbeafe);
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Fondo + veladura para legibilidad ---- */
.pg-herov2__bg{ position:absolute; inset:0; z-index:0; }
.pg-herov2__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.pg-herov2__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,23,42,.18) 0%, rgba(15,23,42,.64) 84%);
}

/* ---- Contenedor (mobile: texto abajo, productos flotan arriba) ---- */
.pg-herov2__inner{
  position:relative; z-index:2;
  width:100%; max-width:1200px; margin:0 auto; min-height:inherit;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 22px 20px 26px; gap: 14px;
}

/* ---- Texto ---- */
.pg-herov2__eyebrow{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background: var(--h2-accent); color:#fff;
  padding:6px 14px; border-radius:999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.pg-herov2__title{
  margin:0; font-weight:900; line-height:1.02; letter-spacing:-.02em;
  font-size: clamp(2.2rem, 9vw, 3rem);
  text-shadow: 0 3px 22px rgba(0,0,0,.32);
}
.pg-herov2__title em{ font-style:normal; position:relative; color: var(--h2-accent); white-space:nowrap; }
.pg-herov2__title em::after{
  content:''; position:absolute; left:0; right:0; bottom:.02em; height:.12em;
  background: var(--h2-accent); opacity:.38; border-radius:999px; z-index:-1;
}

/* ---- Chips por edad (multi-CTA) ---- */
.pg-herov2__chips-title{
  display:block; font-size:.9rem; font-weight:700; opacity:.92; margin: 4px 0 10px;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.pg-herov2__chips-row{ display:flex; flex-wrap:wrap; gap:10px; }
.pg-herov2__chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 20px;
  background:#fff; color: var(--text-main, #0f172a);
  font-weight:700; font-size:1rem; line-height:1; text-decoration:none;
  border-radius:999px; border:2px solid transparent;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
  transition: transform var(--dur-fast,120ms) var(--ease-out, ease),
              box-shadow var(--dur-fast,120ms) var(--ease-out, ease),
              color var(--dur-fast,120ms), border-color var(--dur-fast,120ms);
}
.pg-herov2__chip:hover,
.pg-herov2__chip:focus-visible{
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
  color: var(--h2-accent); border-color: var(--h2-accent);
}
.pg-herov2__chip:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* ---- Stage de productos flotantes ---- */
.pg-herov2__stage{
  position:absolute; top:6px; left:0; right:0; height:52%;
  z-index:2; pointer-events:none;
}
.pg-herov2__product{ position:absolute; margin:0; }
.pg-herov2__product img{
  width:100%; height:auto; display:block;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.30));
  animation: h2-bob 5s ease-in-out infinite;
}
/* Mobile: solo 2 productos, chicos y separados (evita el amontonamiento en pantalla angosta). */
.pg-herov2__product--1{ width:30%; top:2%; left:3%; }
.pg-herov2__product--2{ width:28%; top:0;  right:3%; }
.pg-herov2__product--2 img{ animation-delay:-1.2s; }
.pg-herov2__product--3{ display:none; }
.pg-herov2__product--3 img{ animation-delay:-2.4s; }
.pg-herov2__product--4{ display:none; }
.pg-herov2__product--4 img{ animation-delay:-3.6s; }
.pg-herov2__product--5{ display:none; }
.pg-herov2__product--5 img{ animation-delay:-.8s; }

@keyframes h2-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* ---- Desktop: 2 columnas (texto izq · productos der) ---- */
@media (min-width: 761px){
  .pg-herov2{ min-height: clamp(480px, 46vw, 620px); }
  .pg-herov2__scrim{
    background: linear-gradient(90deg, rgba(15,23,42,.58) 0%, rgba(15,23,42,.30) 44%, rgba(15,23,42,0) 72%);
  }
  .pg-herov2__inner{
    display:grid; grid-template-columns: 1.05fr .95fr; align-items:center;
    padding: 40px 48px; gap: 32px;
  }
  .pg-herov2__title{ font-size: clamp(2.8rem, 4.6vw, 4.4rem); }
  .pg-herov2__stage{ position:relative; top:auto; height:100%; min-height:360px; }
  /* Desktop: los 4 productos en la zona baja/izquierda (el escritorio), dejando
     LIBRE la punta del avioncito del fondo (arriba-derecha). */
  .pg-herov2__product--3, .pg-herov2__product--4{ display:block; }
  .pg-herov2__product--1{ width:34%; top:24%;   left:1%;  }  /* Stitch — medio-izquierda */
  .pg-herov2__product--2{ width:25%; top:50%; right:3%; }  /* caja (dn-2): anclada por ARRIBA (la img flota por transparencia abajo) → baja al escritorio */
  .pg-herov2__product--3{ width:33%; bottom:0;  left:5%;  }  /* camión — abajo-izquierda */
  .pg-herov2__product--4{ width:31%; bottom:9%; left:37%; }  /* perlas — abajo-centro */
}

/* ---- Accesibilidad / performance ---- */
@media (prefers-reduced-motion: reduce){
  .pg-herov2__product img{ animation:none; }
}