/* ============================================================================
 * 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: var(--bp1-fondo, #0B0714);   /* fondo_color por JSON; default = el de siempre */
  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; }
}

/* ============================================================================
 * Agregados DÍA DE LA MADRE 2026 — todo opcional (ver cabecera del .php).
 * Ninguna regla de acá toca un banner que no use estas clases: AGENDAS 2027 y
 * la Secretaria se ven igual que antes.
 * ==========================================================================*/

/* ---- Cupón copiable (sirve en los dos temas) ---- */
.pg-bp1__cupon{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  min-height:48px; padding:10px 16px 10px 20px; border-radius:999px;
  background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.55); color:#fff;
  font:inherit; font-size:.95rem; line-height:1; cursor:pointer; position:relative;
  transition: background var(--dur-fast,120ms) var(--ease-out, ease);
}
.pg-bp1__cupon-etiq{ font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.pg-bp1__cupon-cod{ font-weight:900; letter-spacing:.03em; }
.pg-bp1__cupon-ico{ margin-left:6px; opacity:.8; }
.pg-bp1__cupon:hover .pg-bp1__cupon-ico{ opacity:1; }
.pg-bp1__cupon:focus-visible{ outline:3px solid currentColor; outline-offset:3px; }
/* "¡Copiado!" aparece arriba del chip; aria-live lo anuncia al lector de pantalla */
.pg-bp1__cupon-ok:empty{ display:none; }
.pg-bp1__cupon-ok{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  background:#1f2937; color:#fff; font-size:.75rem; font-weight:700; white-space:nowrap;
  padding:5px 10px; border-radius:8px;
}

/* ---- CTA + leyenda en la misma fila (sólo existe si hay leyenda) ---- */
.pg-bp1__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.pg-bp1__leyenda{
  font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color: var(--bp1-destacado);
}
.pg-bp1__legal{ margin:0; font-size:.72rem; line-height:1.35; opacity:.78; max-width:44ch; }

/* ---- Título en mayúsculas (como la pieza de la diseñadora) ---- */
.pg-bp1--mayus .pg-bp1__title{ text-transform:uppercase; letter-spacing:0; }

/* ---- TEMA CLARO ---- */
.pg-bp1--claro{
  background: var(--bp1-fondo, #FFF4F8);
  color:#3C0A19;
}
.pg-bp1--claro .pg-bp1__eyebrow{ color: var(--bp1-destacado); opacity:1; }
/* "10% OFF" no se parte en dos renglones en celular: el que se acomoda es el texto de al lado */
.pg-bp1--claro .pg-bp1__destaque-num{ white-space:nowrap; flex-shrink:0; }
.pg-bp1--claro .pg-bp1__eyebrow-sep{ background: currentColor; opacity:.35; }
.pg-bp1--claro .pg-bp1__title{ color: var(--bp1-accent); }
.pg-bp1--claro .pg-bp1__chip{
  background:#fff; border-color: rgba(60,10,25,.14); color: var(--bp1-accent);
}
.pg-bp1--claro .pg-bp1__cta{
  background: var(--bp1-accent); color:#fff;
  box-shadow: 0 10px 22px rgba(60,10,25,.22);
}
.pg-bp1--claro .pg-bp1__cta:hover{ box-shadow: 0 14px 28px rgba(60,10,25,.28); }
.pg-bp1--claro .pg-bp1__cta:focus-visible{ outline-color: var(--bp1-accent); }
.pg-bp1--claro .pg-bp1__cupon{
  background:#fff; border-color: var(--bp1-accent); color: var(--bp1-accent);
}
.pg-bp1--claro .pg-bp1__cupon:hover{ background:#fff7fa; }
.pg-bp1--claro .pg-bp1__cupon.is-copiado{ background: var(--bp1-accent); color:#fff; }

@media (min-width: 761px){
  /* La imagen clara trae su zona de texto ya despejada: la veladura oscura sobra */
  .pg-bp1--claro .pg-bp1__scrim{ display:none; }
  /* Mitad derecha de la sección = color del borde derecho de la imagen (fondo_color_derecha).
     Sin esa clave las dos mitades son el mismo color: no cambia nada. */
  .pg-bp1--claro{
    background: linear-gradient(90deg,
      var(--bp1-fondo, #FFF4F8) 50%,
      var(--bp1-fondo-der, var(--bp1-fondo, #FFF4F8)) 50%);
  }
  .pg-bp1--mayus .pg-bp1__title{ font-size: clamp(2.1rem, 3.1vw, 2.9rem); }
}

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