/* ============================================================================
   assets/css/hero.css — Hero de portada (carrusel .home-hero, 2026-10-19)

   Extraído de css/main.css para compartirlo entre la web pública
   (index.php, CMS login/catalogo-cms/hero.php) y la intranet logic
   (index.php de cada empresa y su editor). En logic se sirve por
   /assets/ (logic/assets.php). Usa los tokens de main.css /
   logic/estilo_cabecera.css (--eM, --fM, --rM, --gO, --rO…).
   ============================================================================ */

/* ── CTA overlay (hero portada) ── */
.cta-overlay{
  position: absolute;
  left: var(--e2XL);
  bottom: var(--eXL);
  z-index: 3;
  width: clamp(280px, 85vw, 420px);
  padding: var(--eL);
  background: rgba(255, 255, 255, 0.92);
  color: var(--gO);
  border-radius: var(--rM);
  box-shadow: var(--shadowC);
}

.cta-overlay .hero-titulo{
  margin: 0 0 var(--eS) 0;
  font-size: var(--fM);
  line-height: var(--lhXL);
  font-weight: 300;
  color: var(--rO);
}

.cta-overlay .hero-texto{ display: none; }

.cta-overlay .hero-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (min-width: 769px){
  .cta-overlay .hero-titulo{
    font-size: clamp(var(--fXL), 2.2vw, var(--f2XL));
  }
  .cta-overlay .hero-texto{
    display: block;
    margin: 0 0 var(--eL) 0;
    max-width: 40rem;
    font-size: var(--fS);
    line-height: var(--lhS);
    color: rgba(0, 0, 0, 0.75);
  }
}

/* ── HOME hero (en móvil < 501 px solo con imagen móvil, ver más abajo) ── */
.home-hero{ display: none; }

@media (min-width: 501px){
  .home-hero{
    display: block;
    position: relative;
    overflow: hidden;
    height: clamp(13rem, 38vh, 13rem);
    min-height: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    margin-top: -14px;
  }

  .cta-overlay{ background: transparent; }
  .cta-overlay .hero-titulo{ display: none; }

}

@media (min-width: 769px){
  .home-hero{
    height: clamp(250px, calc(218px + 12.9vw), 500px);
    min-height: 250px;
  }

  .cta-overlay{
    background: rgba(255, 255, 255, 0.92);
  }

  .cta-overlay .hero-titulo{ display: block; }
}

.home-hero .hero-carrusel{
  position: relative;
  height: 100%;
}

/* Flechas del hero: ocultas por defecto, aparecen al pasar el ratón */
.home-hero .flecha-prev,
.home-hero .flecha-next{ opacity: 0; }
.home-hero:hover .flecha-prev,
.home-hero:hover .flecha-next{ opacity: .9; }

/* Slides del hero: cross-fade CSS con .is-active */
.home-hero .hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.home-hero .hero-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

.home-hero .hero-media{
  position: absolute;
  inset: 0;
  margin: 0;
}

.home-hero .hero-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: right center;
}

.home-hero .hero-slide::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.15)
  );
}

/* ── Hero editable (CR_HeroSlide, 2026-10-19) ─────────────────────────
   Variantes que elige el CMS por diapositiva: posición de la caja en 9
   puntos (--v-sup|med|inf × --h-izq|cen|der; la base de .cta-overlay es
   abajo a la izquierda), estilo (claro/oscuro/transparente), velo on/off,
   etiqueta, 2º botón, enlace en toda la imagen e imagen de teléfono. */
.home-hero .hero-slide--sin-degradado::after{ display: none; }
.home-hero .hero-slide--h-der::after{
  background: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0.25), rgba(0,0,0,0.15));
}
.home-hero .hero-slide--h-cen::after{ background: rgba(0,0,0,0.3); }
.home-hero .hero-enlace-slide{ position: absolute; inset: 0; z-index: 2; }
.home-hero .hero-slide--h-der .cta-overlay{ left: auto; right: var(--e2XL); }
.home-hero .hero-slide--h-cen .cta-overlay{ left: 50%; transform: translateX(-50%); text-align: center; }
.home-hero .hero-slide--v-sup .cta-overlay{ bottom: auto; top: var(--eXL); }
.home-hero .hero-slide--v-med .cta-overlay{ bottom: auto; top: 50%; transform: translateY(-50%); }
.home-hero .hero-slide--v-med.hero-slide--h-cen .cta-overlay{ transform: translate(-50%, -50%); }
.home-hero .hero-slide--h-cen .hero-texto{ margin-left: auto; margin-right: auto; }

/* Teléfono (≤ 500 px): el hero solo existe si alguna diapositiva trae imagen
   móvil (.home-hero--movil), en 4:3, y solo con esas diapositivas. */
@media (max-width: 500px){
  .home-hero.home-hero--movil{
    display: block;
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -14px;
    aspect-ratio: 4 / 3;
  }
  .home-hero .hero-slide--sin-movil{ display: none; }
  .home-hero .cta-overlay{ left: var(--eM); bottom: var(--eM); width: calc(100% - 2 * var(--eM)); padding: var(--eM); }
  .home-hero .hero-slide--h-der .cta-overlay{ left: auto; right: var(--eM); }
  .home-hero .hero-slide--h-cen .cta-overlay{ left: 50%; }
  .home-hero .hero-slide--v-sup .cta-overlay{ top: var(--eM); }
  .home-hero .cta-overlay .hero-titulo{ font-size: var(--fM); }
}
.home-hero .hero-ctas{ display: flex; flex-wrap: wrap; gap: var(--eS); }
.home-hero .hero-slide--h-cen .hero-ctas{ justify-content: center; }
.home-hero .hero-etiqueta{
  display: none;
  margin-bottom: var(--eS);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--rO, #c00);
  color: #fff;
  font-size: var(--fXS, .75rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.home-hero .hero-cta--2{ display: none; }
@media (min-width: 769px){
  .home-hero .hero-etiqueta{ display: inline-block; }
  .home-hero .hero-cta--2{ display: inline-flex; }
  .home-hero .hero-slide--caja-oscuro .cta-overlay{ background: rgba(20, 20, 20, 0.82); color: #fff; }
  .home-hero .hero-slide--caja-oscuro .hero-titulo{ color: #fff; }
  .home-hero .hero-slide--caja-oscuro .hero-texto{ color: rgba(255, 255, 255, 0.85); }
  .home-hero .hero-slide--caja-transparente .cta-overlay{ background: transparent; box-shadow: none; color: #fff; }
  .home-hero .hero-slide--caja-transparente .hero-titulo{ color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
  .home-hero .hero-slide--caja-transparente .hero-texto{ color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
}
/* Botón "Editar portada" (solo editores del CMS) */
.home-hero .hero-editar{
  position: absolute; top: var(--eS); right: var(--eS); z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--gO, #333);
  font-size: .8rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.home-hero .hero-editar svg{ width: 16px; height: 16px; }
.home-hero .hero-editar:hover{ background: #fff; }