/* assets/css/hero-formatos.css
   Estilos de los 4 FORMATOS del slide del carrusel del hero
   (perfil destacado, evento, libro, convocatoria), tomados tal cual
   del handoff de diseño "Design System Palettes Ready"
   (Home.dc.html, sección del slider del hero).

   IMPORTANTE, por qué este archivo existe aparte:
   las reglas .hero-visual / .hero-photo / .hero-panel / .hero-badge
   están DUPLICADAS entre inicio.css (Inicio) y hero-carrusel.css
   (Provincias, Noticias, Publicidad), con valores ligeramente
   distintos. Cargar hero-carrusel.css también en el Inicio rompería
   el Inicio. Así que todo lo NUEVO va aquí, con prefijo .hslide-
   (que no choca con nada), y este archivo se encola en las 4
   páginas que muestran el carrusel. Una sola copia, cero conflicto.

   Geometría (idéntica al diseño, márgenes mínimos a propósito):
     media  -> top:16 left:64  302×392  radio 22
     badge  -> top:0  left:44
     panel  -> left:16 bottom:12  ancho 412  (lo pone .hero-panel)

   Va en: assets/css/hero-formatos.css
*/

/* ---- Marco de la imagen (evento, libro, perfil destacado) ---- */
.hslide-media {
  position: absolute;
  top: 16px;
  left: 64px;
  width: 302px;
  height: 392px;
  border-radius: 22px;
  overflow: hidden;
  display: block;
  background: linear-gradient(150deg, #FBF3EC, #E4ECE3);
  box-shadow: 0 24px 50px rgba(90, 60, 40, .22);
}
.hslide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Anuncio libre: la pieza del anunciante se muestra COMPLETA, sin
   recortar (decisión previa del proyecto, se mantiene igual). */
.hslide-media--contain { background: #F6F1EA; }
.hslide-media--contain img { object-fit: contain; }

/* Placeholder cuando todavía no hay imagen subida. */
.hslide-media-vacio {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #C79B86;
}

/* ---- Textos del panel de vidrio ---- */
.hslide-overline {
  font-size: 11.5px;
  font-weight: 700;
  color: #A34A2C;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hslide-overline--estudio { color: #3F5A42; }

.hslide-titulo {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.12;
  color: #2C2A28;
  margin-top: 6px;
  display: block;
}
a.hslide-titulo:hover { color: #A34A2C; }

.hslide-texto {
  font-size: 13.5px;
  color: #6E6862;
  margin-top: 4px;
  line-height: 1.5;
}

.hslide-metas {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  font-size: 13.5px;
  color: #6E6862;
}
.hslide-meta { display: inline-flex; align-items: center; gap: 7px; }
.hslide-meta svg { flex: none; }

/* ---- Convocatoria: panel ilustrado, no lleva foto ---- */
.hslide-conv {
  position: absolute;
  top: 16px;
  left: 64px;
  width: 302px;
  height: 392px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(150deg, #FBF3EC, #E4ECE3);
  box-shadow: 0 24px 50px rgba(90, 60, 40, .22);
}
.hslide-conv-blobs { position: absolute; inset: 0; width: 100%; height: 100%; }
.hslide-conv-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 18px;
}
.hslide-conv-icono {
  width: 86px; height: 86px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 26px rgba(90, 60, 40, .16);
  display: flex; align-items: center; justify-content: center;
  color: #C15F3C;
}
.hslide-conv-pill {
  background: #fff;
  color: #2C2A28;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
  text-align: center;
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(90, 60, 40, .12);
}

/* En móvil el contenedor .hero-visual-inner ya aplica transform:scale(.8),
   así que NO se vuelve a reducir aquí (se duplicaría la reducción y la
   letra quedaría ilegible). Solo se ajusta el ancho de la pastilla. */
@media (max-width: 600px) {
  .hslide-conv-pill { font-size: 18px; }
}

/* -----------------------------------------------------------
   Botón del slide (.hero-cta). El color de fondo lo pone cada
   slide en línea (terracota, verde bosque, o el que eligió el
   anunciante), así que el texto va SIEMPRE en blanco, en todos
   los estados. Declarado aquí además de en inicio.css /
   hero-carrusel.css porque este archivo se carga en las cuatro
   páginas donde aparece el carrusel.
   ----------------------------------------------------------- */
.hero-cta,
.hero-cta:visited,
.hero-cta:hover,
.hero-cta:focus { color: #fff; }

/* El título del slide, cuando es enlace, va en tinta, no en terracota. */
a.hslide-titulo,
a.hslide-titulo:visited { color: #2C2A28; }
a.hslide-titulo:hover { color: #A34A2C; }