/* ============================================================================
 * banner-publicidad-01 — hero de campaña configurable por JSON. Una sola
 * imagen ya compuesta (la escena viene resuelta desde la generación, no se
 * arma por capas acá) + columna de texto superpuesta.
 * Mobile: imagen completa arriba + contenido abajo en panel sólido.
 * Desktop: imagen de fondo dentro del marco de 1200px + contenido superpuesto
 * a la izquierda, sobre la zona despejada a propósito en la imagen.
 * Sin coreografía de animación — la composición ya viene resuelta en la
 * imagen, así que sólo hace falta reduced-motion para el hover del CTA.
 *
 * ⚠️ HERMANO DE pg-banner-gasolito-oferta.css. Los cuatro fixes marcados
 * abajo (marco de 1200px, __content vs __text, `contain` en vez de `cover`,
 * `inset:0` en vez de `height:100%`) se encontraron mirando el banner de Soul
 * en el VPS espejo y están DUPLICADOS en los dos archivos. Un fix nuevo va en
 * los dos.
 *
 * Primera campaña: AGENDAS 2027 — degradé violeta → índigo → casi negro. El
 * negro de la sección (#0B0714) es el mismo tono que las esquinas de la
 * imagen generada: es lo que hace que no se note la costura en monitores más
 * anchos que el marco.
 * ==========================================================================*/
.pg-bp1{
  --bp1-accent: #4C1D95;      /* overridable por JSON (acento) */
  --bp1-destacado: #FFD93D;   /* overridable por JSON (destacado_color) */
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  margin: 10px 0;
  isolation: isolate;
  background: #0B0714;
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Imagen: mobile normal-flow, desktop fondo dentro del marco ---- */
.pg-bp1__media{ position:relative; width:100%; line-height:0; }
.pg-bp1__media img{ display:block; width:100%; height:auto; }
.pg-bp1__scrim{ display:none; }

/* ---- Contenido ---- */
.pg-bp1__content{
  position:relative; z-index:2;
  padding: 22px 22px 28px;
}
.pg-bp1__text{ display:flex; flex-direction:column; gap:16px; }
.pg-bp1__eyebrow{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  opacity:.92;
}
.pg-bp1__logo{ height:19px; width:auto; display:block; }
.pg-bp1__eyebrow-sep{ width:1px; height:14px; background:rgba(255,255,255,.35); }

.pg-bp1__title{
  margin:0; font-weight:900; line-height:1.06; letter-spacing:-.01em;
  font-size: clamp(1.7rem, 7vw, 2.2rem);
}
.pg-bp1__title em{ font-style:normal; color: var(--bp1-destacado); }

/* El dato grande. Se llama __destaque y no __descuento porque no siempre es
   un descuento: en AGENDAS 2027 es el año. */
.pg-bp1__destaque{ margin:0; display:flex; align-items:baseline; gap:10px; }
.pg-bp1__destaque-num{ font-size:clamp(2rem,9vw,2.6rem); font-weight:900; line-height:1; letter-spacing:-.02em; }
.pg-bp1__destaque-texto{ font-size:.85rem; font-weight:800; opacity:.92; max-width:16ch; line-height:1.25; }

.pg-bp1__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pg-bp1__chip{
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:.72rem; font-weight:700;
  padding:6px 12px; border-radius:999px;
}

.pg-bp1__cta{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:#fff; color: var(--bp1-accent);
  font-weight:800; font-size:.95rem; line-height:1;
  padding:14px 22px; min-height:48px; border-radius:999px;
  text-decoration:none; box-shadow: 0 12px 26px rgba(0,0,0,.35);
  border:2px solid transparent;
  transition: transform var(--dur-fast,120ms) var(--ease-out, ease),
              box-shadow var(--dur-fast,120ms) var(--ease-out, ease);
}
.pg-bp1__cta:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.4); }
.pg-bp1__cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* ---- Desktop: fondo + contenido comparten un mismo marco de 1200px ---- */
@media (min-width: 761px){
  .pg-bp1{ min-height: clamp(480px, 46vw, 620px); }
  /* FIX 1 — El MARCO es lo que centra en 1200px: media y content se posicionan
     relativos a ÉL, no a la sección entera. Si cada uno se ancla a la sección
     (full-bleed en monitores anchos), la escena termina pegada al borde real
     del navegador, lejos del texto, aunque el texto sí esté centrado. El
     sobrante más allá de los 1200px lo llena el fondo de .pg-bp1, que es del
     mismo tono que las esquinas de la imagen — no se nota la costura. */
  /* FIX 2 — position:absolute + inset:0 (no height:100%): .pg-bp1 sólo tiene
     min-height, no height, así que un hijo con height:100% no tiene de qué
     tamaño heredar (queda en 0) — es la trampa clásica de los porcentajes de
     alto en CSS. inset:0 sí funciona porque no depende de resolver un %. */
  .pg-bp1__frame{ position:absolute; inset:0; max-width:1200px; margin:0 auto; }
  .pg-bp1__media{ position:absolute; inset:0; z-index:0; }
  /* FIX 3 — contain, no cover: a marcos muy anchos, cover recorta la escena
     por arriba y por abajo para llenar el alto. Con contain nunca se recorta. */
  .pg-bp1__media img{ width:100%; height:100%; object-fit:contain; object-position:right center; }
  /* Veladura de seguridad: la imagen ya trae el 45% izquierdo oscuro a
     propósito, esto sólo asegura contraste si una campaña futura la genera
     más clara. El corte en 42%/60% acompaña esa zona despejada. */
  .pg-bp1__scrim{
    display:block; position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(11,7,20,.5) 0%, rgba(11,7,20,.14) 42%, transparent 60%);
  }
  /* FIX 4 — __content ya no necesita centrarse solo (lo centra el marco): acá
     sólo ubica la columna de texto adentro. __text sigue existiendo aparte
     porque su flex:column, sin este segundo nivel, estiraría el título al
     ancho completo del marco. */
  .pg-bp1__content{
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center;
    padding: 40px 56px;
  }
  .pg-bp1__text{ max-width:480px; }
  .pg-bp1__title{ font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
  .pg-bp1__destaque-num{ font-size: clamp(2.6rem, 4vw, 3.6rem); }
  .pg-bp1__destaque-texto{ font-size:1rem; max-width:150px; }
}

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