/* 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; }
}

/* El .hero-panel no tiene alto fijo: crece hacia arriba según el
   texto (está anclado con bottom, no con top). En convocatoria el
   contenido es más largo que en evento/libro (overline + título +
   descripción + botón), así que sin tope el panel sube lo
   suficiente para tapar buena parte del panel ilustrado de arriba.
   Se acotan título y descripción a 2 líneas SOLO en convocatoria
   (el selector cuelga de .hslide-conv, que no existe en los otros
   formatos) para no afectar sus paneles, ya de por sí compactos. */
.hslide-conv ~ .hero-panel .hslide-titulo,
.hslide-conv ~ .hero-panel .hslide-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* -----------------------------------------------------------
   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; }

/* =========================================================
   SIN SUPERPOSICIÓN (oct 2026)

   Antes el panel de texto flotaba ENCIMA de la parte de abajo de la
   imagen y en los anuncios tapaba casi la mitad de la pieza. Ahora
   la imagen conserva su forma de siempre (tarjeta vertical 302×392,
   radio 22, centrada) y el panel va DEBAJO, sin tocarla.

   Como el slide queda más alto que los 500px fijos de antes, los
   slides se apilan con grid (todos en la misma celda) en vez de
   position:absolute: el carrusel toma el alto del slide más alto y
   no salta al cambiar de uno a otro.

   Especificidad (.hero-visual-inner …) para ganarle a inicio.css y a
   hero-carrusel.css, que cargan las reglas viejas.
   ========================================================= */
.hero-visual .hero-visual-inner {
  height: auto;
  display: grid;
}
.hero-visual-inner > .hero-slide {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 8px;
}
.hero-visual-inner > .hero-slide > .hslide-media,
.hero-visual-inner > .hero-slide > .hslide-conv,
.hero-visual-inner > .hero-slide > .hero-photo {
  position: relative;
  top: auto;
  left: auto;
  flex: none;
  width: 302px;
  height: 392px;
}
.hero-visual-inner > .hero-slide > .hero-panel {
  position: relative;
  left: auto;
  bottom: auto;
  width: 412px;
  max-width: calc(100% - 32px);
  /* Sube un poco sobre el borde inferior de la tarjeta: conserva la
     sensación de que la tarjeta está detrás, como en el diseño. */
  margin-top: -28px;
  z-index: 1;
  box-sizing: border-box;
}
/* La pieza del anunciante (anuncio libre, mostrada completa) se
   encoge esos 28px para que el panel solo pise el fondo de la
   tarjeta, nunca el anuncio. */
.hero-visual-inner > .hero-slide > .hslide-media--contain {
  padding-bottom: 28px;
  box-sizing: border-box;
}
/* La cinta, sobre la esquina de la tarjeta como en el diseño. */
.hero-visual-inner > .hero-slide > .hero-badge { top: 0; left: 44px; z-index: 2; }
/* En móvil el carrusel se escala al 80% (inicio.css) y se compensaba
   con -100px pensando en 500px de alto; ahora mide ~570px. */
@media (max-width: 600px) {
  .hero-visual .hero-visual-inner { margin-bottom: -114px; }
}
/* Dos botones en fila en vez de uno debajo del otro. */
.hslide-botones { display: flex; gap: 10px; margin-top: 12px; }
.hslide-botones > * { flex: 1 1 0; margin-top: 0; width: auto; min-width: 0; }