/* ─────────────────────────────────────────────────────────────────────────
   lcpa-media.css — Capa de imágenes IA para LatinosCPA.
   ADITIVA: no modifica styles.css. Se puede quitar borrando este <link>.
   Usa las variables de marca ya definidas (--line, --shadow-sm, etc.).
   ───────────────────────────────────────────────────────────────────────── */

/* ── Hero con foto de fondo + overlay oscuro (mantiene el texto legible) ──
   La imagen se pasa por variable inline:  style="--hero-media:url('...')" */
.hero.has-media { position: relative; isolation: isolate; overflow: hidden; }
.hero.has-media::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(8,9,11,.97) 0%, rgba(8,9,11,.90) 40%, rgba(8,9,11,.58) 100%),
    var(--hero-media) center/cover no-repeat;
}
.hero.has-media > * { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .hero.has-media::before {
    background:
      linear-gradient(180deg, rgba(8,9,11,.90) 0%, rgba(8,9,11,.95) 100%),
      var(--hero-media) center/cover no-repeat;
  }
}

/* ── Cap de imagen en tarjetas de categoría ── */
.cat.has-media { padding: 0; overflow: hidden; }
.cat.has-media .cat-media {
  display: block; width: 100%; height: 158px; object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.cat.has-media .cat-body { padding: 22px; }

/* ── Imagen contenida dentro de una sección (producto / concepto) ── */
.section-media {
  display: block; width: 100%; max-width: 540px; margin: 4px auto 26px;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}

/* ── Banner ancho para páginas secundarias (equipo, etc.) ── */
.page-hero-media {
  display: block; width: 100%; max-width: 900px; margin: 22px auto 0;
  aspect-ratio: 5 / 2; object-fit: cover; object-position: center;
  border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}

/* ── Imagen de encabezado dentro de una tarjeta (p.ej. soporte) ── */
.card-media {
  display: block; width: 100%; height: 170px; object-fit: cover;
  border-radius: 12px; margin-bottom: 14px; border: 1px solid var(--line);
}

/* ── CTA final con fondo fotográfico + overlay ── */
.cta-final.has-media { position: relative; isolation: isolate; overflow: hidden; }
.cta-final.has-media::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(8,9,11,.66) 0%, rgba(8,9,11,.50) 55%, rgba(8,9,11,.42) 100%),
    var(--cta-media) center/cover no-repeat;
}
.cta-final.has-media > * { position: relative; z-index: 1; }
.cta-final.has-media h2, .cta-final.has-media p { text-shadow: 0 2px 14px rgba(0,0,0,.6); }

/* ── Placeholder (blur-up) para imágenes <img>: evita el cuadro negro al cargar ── */
img.cat-media, img.section-media, img.page-hero-media, img.card-media {
  background-color: var(--bg-soft); background-size: cover; background-position: center;
}

/* ── Banner del panel interno (dashboard del promotor, tema oscuro #app) ── */
#app .panel-banner {
  position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 16px;
  border: 1px solid var(--a-line); min-height: 118px; display: flex; align-items: center;
  background: var(--panel-media) center/cover no-repeat;
}
#app .panel-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,15,18,.93) 0%, rgba(13,15,18,.72) 52%, rgba(13,15,18,.34) 100%);
}
#app .panel-banner > .pb-inner { position: relative; z-index: 1; padding: 22px 24px; }
#app .panel-banner .pb-title {
  font-size: clamp(19px, 3vw, 26px); font-weight: 900; color: var(--a-ink); letter-spacing: -.3px;
}
#app .panel-banner .pb-sub { color: var(--a-mut); margin-top: 4px; font-size: 14px; }