/* ============================================================================
 * banner-gasolito-marca — hero configurable por JSON. Gasolito + marca en
 * oferta, compuestos en una sola imagen generada (ver banco de prompts,
 * GAS-06/07). Mobile: imagen completa arriba + contenido abajo en panel
 * sólido. Desktop: imagen de fondo full-bleed + contenido superpuesto a la
 * izquierda, sobre el tercio despejado a propósito en la imagen.
 * Sin animación de choreografía — la composición ya viene resuelta en la
 * imagen, así que no hace falta reduced-motion aparte del hover del CTA.
 * ==========================================================================*/
.pg-bgm{
  --bgm-accent: #9C2482;      /* overridable por JSON (acento) */
  --bgm-destacado: #FFD93D;   /* overridable por JSON (destacado_color) */
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  margin: 10px 0;
  isolation: isolate;
  background: #09050A;
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Imagen: mobile normal-flow, desktop fondo full-bleed ---- */
.pg-bgm__media{ position:relative; width:100%; line-height:0; }
.pg-bgm__media img{ display:block; width:100%; height:auto; }
.pg-bgm__scrim{ display:none; }

/* ---- Contenido ---- */
.pg-bgm__content{
  position:relative; z-index:2;
  padding: 22px 22px 28px;
}
.pg-bgm__text{ display:flex; flex-direction:column; gap:16px; }
.pg-bgm__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-bgm__logo{ height:19px; width:auto; display:block; }
.pg-bgm__eyebrow-sep{ width:1px; height:14px; background:rgba(255,255,255,.35); }

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

.pg-bgm__descuento{ margin:0; display:flex; align-items:baseline; gap:10px; }
.pg-bgm__descuento-num{ font-size:clamp(2rem,9vw,2.6rem); font-weight:900; line-height:1; letter-spacing:-.02em; }
.pg-bgm__descuento-texto{ font-size:.85rem; font-weight:800; opacity:.92; max-width:16ch; line-height:1.25; }

.pg-bgm__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pg-bgm__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-bgm__cta{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:#fff; color: var(--bgm-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-bgm__cta:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.4); }
.pg-bgm__cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* ---- Desktop: fondo + contenido comparten un mismo marco de 1200px ---- */
@media (min-width: 761px){
  .pg-bgm{ min-height: clamp(480px, 46vw, 620px); }
  /* 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), Gasolito termina pegado 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 NEGRO de .pg-bgm,
     que es del mismo tono que las esquinas de la imagen — no se nota la costura. */
  /* position:absolute + inset:0 (no height:100%): .pg-bgm solo 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-bgm__frame{ position:absolute; inset:0; max-width:1200px; margin:0 auto; }
  .pg-bgm__media{ position:absolute; inset:0; z-index:0; }
  /* contain, no cover: a marcos muy anchos, cover recorta cabeza/pies de
     Gasolito para llenar el alto. Con contain nunca se recorta. */
  .pg-bgm__media img{ width:100%; height:100%; object-fit:contain; object-position:right center; }
  /* Veladura de seguridad: la imagen ya trae un tercio oscuro a propósito,
     esto solo asegura contraste si una campaña futura lo genera más claro. */
  .pg-bgm__scrim{
    display:block; position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(9,5,10,.5) 0%, rgba(9,5,10,.14) 42%, transparent 60%);
  }
  /* __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-bgm__content{
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center;
    padding: 40px 56px;
  }
  .pg-bgm__text{ max-width:480px; }
  .pg-bgm__title{ font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
  .pg-bgm__descuento-num{ font-size: clamp(2.6rem, 4vw, 3.6rem); }
  .pg-bgm__descuento-texto{ font-size:1rem; max-width:150px; }
}

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