/* ==========================================================================
   HERO SLIDER — camarafm
   La foto va a su proporción natural y es la que marca el alto del banner.
   ========================================================================== */

.hero {
  background: #1E1E1E;
  overflow: hidden;
}
.hero-list-item_img .admin_actions a {
  color: white !Important;
}

/* --- Pista del slider ----------------------------------------------------- */

.hero-slider.swiper {
  position: relative;
}

/* flex-start: que Swiper no estire las slides al alto de la más alta */
.hero-slider-wrapper.swiper-wrapper {
  align-items: flex-start;
}

.hero-list-item.swiper-slide {
  height: auto;
}


/* --- Fila: [ foto + panel rojo ]   [ logo ] ------------------------------- */

.hero-slider-flex {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
  max-width: 84rem;
  margin-inline: auto;
  padding: 0 clamp(2rem, 7vw, 10rem);   /* aire lateral proporcional */
}

.hero-slider-flex_items {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

/* Reserva fija: el banner conserva la forma aunque el artículo no traiga logo */
.hero-slider-flex_logocam {
  flex: 0 0 13rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* --- Foto ----------------------------------------------------------------- */
/* Sin alto ni object-fit: conserva su proporción y define el alto de la slide */

.hero-list-item_img {
  flex: none;
  width: clamp(13rem, 24vw, 26rem);
  position: relative;
  z-index: 2;             /* la foto siempre por encima del rojo */
}

.hero-list-item_img img {
  display: block;
  width: 100%;
  height: auto;
}


/* --- Panel rojo ----------------------------------------------------------- */
/* Se estira al alto de la foto menos el margen: nunca queda corto */

.hero-list-item_content {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  margin-block: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-red);
  border-radius: 5rem 0 5rem 0;              /* solo sup-izq e inf-der */
  color: #fff;
  padding: 2rem 2.25rem;

  /* ---- Cuánto se mete el rojo por detrás de la foto ----------------------
     0.6 = el 60% del ancho de la foto. Sube o baja SOLO ese número en las
     dos líneas y el rojo se corre a la izquierda sin mover el texto.       */
  margin-left:  calc(clamp(13rem, 24vw, 26rem) * -0.8);
  padding-left: calc(clamp(13rem, 24vw, 26rem) *  0.8 + 2rem);
}

/* Categoría: el módulo la imprime como <span> dentro del h2 */
.hero-list-item_content h2 span[class*="EDNcategorycolor"] {
  display: block;
  margin-bottom: .5rem;
  font: italic 400 .9375rem/1.3 var(--font-display);
  color: #fff;
}

.hero-list-item_content h2 {
  margin: 0 0 .875rem;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: #fff;
  max-width: 20ch;
}

.hero .Noticias-list-item_descripcion {
  margin-bottom: 1.5rem;
  max-width: 44ch;
  font-family: var(--font-primary);
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
}
.hero .Noticias-list-item_descripcion,.hero .Noticias-list-item_descripcion p{
  
font-size: 15px;
}
.Noticias-list-item_descripcion p {
  margin: 0;
}

.hero-list-item_content > a {
  align-self: flex-start;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  background: #1E1E1E;
  color: #fff;
  font-family: var(--font-primary);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background .25s ease;
  margin:  0 0 0 0;
}

.hero-list-item_content > a:hover,
.hero-list-item_content > a:focus-visible {
  background: #000;
  color: #fff;
}


/* --- Logo ----------------------------------------------------------------- */

.hero-list-item_logo img {
  display: block;
  max-width: 12rem;
  height: auto;
}

.hero-list-item_logo img[src=""] {
  display: none;
}


/* --- Flechas -------------------------------------------------------------- */

.hero-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .25s ease, border-color .25s ease;
}

.hero-nav::before {
  content: '';
  width: .5rem;
  height: .5rem;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  /* color: red; */
}

.hero-nav--prev { 
  left: 8%;
               
}
.hero-nav--prev::before { 
  transform: rotate(135deg); 
  margin-left: .2rem; 
}

.hero-nav--next {
    right: 8%;

}
.hero-nav--next::before {
  transform: rotate(-45deg); margin-right: .2rem; 
}

.hero-nav:hover {
  background:var(--color-black);
  border-color: #fff;
}
.hero-nav:hover:before {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.hero-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}


/* --- Acciones de administrador -------------------------------------------- */

.hero-slider-wrapper > .admin_actions {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 20;
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1421px) {
.hero-nav--prev { 
  left: 5%;
               
}


.hero-nav--next {
    right: 5%;

}
}

@media (max-width: 900px) {

  .hero-slider-flex {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: none;
    padding: 0 0 1.5rem;
  }

  /* El contenedor toma el mismo ancho que la foto: así el % del solape es exacto */
  .hero-slider-flex_items {
    flex-direction: column;
    align-items: center;
    max-width: 26rem;
    margin-inline: auto;
  }

  .hero-list-item_img {
    width: 100%;
    margin: 0 0 -58%;    /* ← cuánto sube el rojo. Más negativo = más arriba */
    z-index: 0;
  }

  .hero-list-item_content {
    position: relative;
    z-index: 3;
    width: auto;
    box-sizing: border-box;
    margin: 0 1rem;
    padding: 2rem 1.25rem;
    text-align: left;           /* ← como el diseño */
    border-radius: 3rem 0 3rem 0;
  }

  .hero-list-item_content > a { align-self: flex-start; }

  .hero-list-item_content h2 {
    font-size: 22px;
    max-width: none;
  }

  .Noticias-list-item_descripcion { max-width: none; }

  .hero-slider-flex_logocam { display: none; }

  .hero-nav {
    top: 30%;
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-list-item_content > a { transition: none; }
}