/* ============================================================================
   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…).

   Tres tramos de ancho: teléfono (m, ≤ 500 px), tablet (t, 501-768 px) y
   escritorio (d, ≥ 769 px). Cada diapositiva elige para cada uno la posición
   de la caja, su estilo y qué elementos se ven (CMS, 2026-10-22).
   ============================================================================ */

/* ── 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;
    /* tablet: la proporción de su imagen (1536 × 480) a 768 px */
    height: clamp(13rem, 31.25vw, 15rem);
    min-height: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    margin-top: -14px;
  }
}

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

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

/* Velo degradado hacia la caja (--velo lo elige la posición, ver abajo) */
.home-hero{
  --hero-velo-izq: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.25), rgba(0,0,0,0.15));
  --hero-velo-der: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0.25), rgba(0,0,0,0.15));
  --hero-velo-cen: rgba(0,0,0,0.3);
}
.home-hero .hero-slide::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--velo, var(--hero-velo-izq));
}
.home-hero .hero-slide--sin-degradado::after{ display: none; }
.home-hero .hero-enlace-slide{ position: absolute; inset: 0; z-index: 2; }

/* ── Diseño por dispositivo ───────────────────────────────────────────
   Las clases que pone hero_render_slide() solo DEFINEN variables con el
   sufijo del dispositivo (-d escritorio, -t tablet, -m teléfono). Cada
   tramo de ancho copia las suyas a las variables activas (--hz, --vz, --bg…)
   y las reglas de la caja usan esas. Lo que ninguna clase define cae al
   valor por defecto de cada var(): abajo a la izquierda, fondo blanco y
   todos los elementos visibles.
     posición  hero-slide--{d|t|m}v-{sup|med}  hero-slide--{d|t|m}h-{cen|der}
     estilo    hero-slide--{d|t|m}-{oscuro|transparente}
     ocultar   hero-slide--{d|t|m}-sin-{etiqueta|titulo|texto|cta|cta2|caja} */
.home-hero .hero-slide--dv-sup{ --vz-d: flex-start; }
.home-hero .hero-slide--dv-med{ --vz-d: center; }
.home-hero .hero-slide--dh-cen{ --hz-d: center; --ta-d: center; --velo-d: var(--hero-velo-cen); }
.home-hero .hero-slide--dh-der{ --hz-d: flex-end; --velo-d: var(--hero-velo-der); }
.home-hero .hero-slide--tv-sup{ --vz-t: flex-start; }
.home-hero .hero-slide--tv-med{ --vz-t: center; }
.home-hero .hero-slide--th-cen{ --hz-t: center; --ta-t: center; --velo-t: var(--hero-velo-cen); }
.home-hero .hero-slide--th-der{ --hz-t: flex-end; --velo-t: var(--hero-velo-der); }
.home-hero .hero-slide--mv-sup{ --vz-m: flex-start; }
.home-hero .hero-slide--mv-med{ --vz-m: center; }
.home-hero .hero-slide--mh-cen{ --hz-m: center; --ta-m: center; --velo-m: var(--hero-velo-cen); }
.home-hero .hero-slide--mh-der{ --hz-m: flex-end; --velo-m: var(--hero-velo-der); }

.home-hero .hero-slide--d-oscuro{ --bg-d: rgba(20,20,20,.82); --fg-d: #fff; --tit-d: #fff; --txt-d: rgba(255,255,255,.85); }
.home-hero .hero-slide--t-oscuro{ --bg-t: rgba(20,20,20,.82); --fg-t: #fff; --tit-t: #fff; --txt-t: rgba(255,255,255,.85); }
.home-hero .hero-slide--m-oscuro{ --bg-m: rgba(20,20,20,.82); --fg-m: #fff; --tit-m: #fff; --txt-m: rgba(255,255,255,.85); }
.home-hero .hero-slide--d-transparente{ --bg-d: transparent; --fg-d: #fff; --tit-d: #fff; --txt-d: #fff; --sh-d: none; --tsh-d: 0 1px 6px rgba(0,0,0,.5); }
.home-hero .hero-slide--t-transparente{ --bg-t: transparent; --fg-t: #fff; --tit-t: #fff; --txt-t: #fff; --sh-t: none; --tsh-t: 0 1px 6px rgba(0,0,0,.5); }
.home-hero .hero-slide--m-transparente{ --bg-m: transparent; --fg-m: #fff; --tit-m: #fff; --txt-m: #fff; --sh-m: none; --tsh-m: 0 1px 6px rgba(0,0,0,.5); }

.home-hero .hero-slide--d-sin-etiqueta{ --etq-d: none; }
.home-hero .hero-slide--d-sin-titulo{ --titv-d: none; }
.home-hero .hero-slide--d-sin-texto{ --txtv-d: none; }
.home-hero .hero-slide--d-sin-cta{ --cta-d: none; }
.home-hero .hero-slide--d-sin-cta2{ --cta2-d: none; }
.home-hero .hero-slide--d-sin-caja{ --caja-d: none; }
.home-hero .hero-slide--t-sin-etiqueta{ --etq-t: none; }
.home-hero .hero-slide--t-sin-titulo{ --titv-t: none; }
.home-hero .hero-slide--t-sin-texto{ --txtv-t: none; }
.home-hero .hero-slide--t-sin-cta{ --cta-t: none; }
.home-hero .hero-slide--t-sin-cta2{ --cta2-t: none; }
.home-hero .hero-slide--t-sin-caja{ --caja-t: none; }
.home-hero .hero-slide--m-sin-etiqueta{ --etq-m: none; }
.home-hero .hero-slide--m-sin-titulo{ --titv-m: none; }
.home-hero .hero-slide--m-sin-texto{ --txtv-m: none; }
.home-hero .hero-slide--m-sin-cta{ --cta-m: none; }
.home-hero .hero-slide--m-sin-cta2{ --cta2-m: none; }
.home-hero .hero-slide--m-sin-caja{ --caja-m: none; }

/* Variables activas: teléfono por defecto, tablet y escritorio por tramo.
   Una variable sin definir deja la activa vacía y su var() usa el defecto. */
.home-hero .hero-slide{
  --vz: var(--vz-m); --hz: var(--hz-m); --ta: var(--ta-m); --velo: var(--velo-m);
  --bg: var(--bg-m); --fg: var(--fg-m); --tit: var(--tit-m); --txt: var(--txt-m); --sh: var(--sh-m); --tsh: var(--tsh-m);
  --etq: var(--etq-m); --titv: var(--titv-m); --txtv: var(--txtv-m); --cta: var(--cta-m); --cta2: var(--cta2-m); --caja: var(--caja-m);
}
@media (min-width: 501px){
  .home-hero .hero-slide{
    --vz: var(--vz-t); --hz: var(--hz-t); --ta: var(--ta-t); --velo: var(--velo-t);
    --bg: var(--bg-t); --fg: var(--fg-t); --tit: var(--tit-t); --txt: var(--txt-t); --sh: var(--sh-t); --tsh: var(--tsh-t);
    --etq: var(--etq-t); --titv: var(--titv-t); --txtv: var(--txtv-t); --cta: var(--cta-t); --cta2: var(--cta2-t); --caja: var(--caja-t);
  }
}
@media (min-width: 769px){
  .home-hero .hero-slide{
    --vz: var(--vz-d); --hz: var(--hz-d); --ta: var(--ta-d); --velo: var(--velo-d);
    --bg: var(--bg-d); --fg: var(--fg-d); --tit: var(--tit-d); --txt: var(--txt-d); --sh: var(--sh-d); --tsh: var(--tsh-d);
    --etq: var(--etq-d); --titv: var(--titv-d); --txtv: var(--txtv-d); --cta: var(--cta-d); --cta2: var(--cta2-d); --caja: var(--caja-d);
  }
}

/* ── Caja de texto ──
   .hero-zona = la diapositiva menos los márgenes; coloca la caja con flex en
   uno de los 9 puntos. La caja (.cta-overlay) mide lo que su contenido, con
   un ancho máximo por tramo. */
.home-hero .hero-zona{
  position: absolute;
  inset: var(--eM);
  z-index: 3;
  display: var(--caja, flex);
  justify-content: var(--hz, flex-start);
  align-items: var(--vz, flex-end);
  pointer-events: none;
}
.home-hero .cta-overlay{
  box-sizing: border-box;
  max-width: 100%;
  padding: var(--eM);
  pointer-events: auto;
  text-align: var(--ta, left);
  background: var(--bg, rgba(255, 255, 255, 0.92));
  color: var(--fg, var(--gO));
  border-radius: var(--rM);
  box-shadow: var(--sh, var(--shadowC));
}
.home-hero .hero-etiqueta{
  display: var(--etq, inline-block);
  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 .cta-overlay .hero-titulo{
  display: var(--titv, block);
  margin: 0 0 var(--eS) 0;
  font-size: var(--fM);
  line-height: var(--lhXL);
  font-weight: 300;
  color: var(--tit, var(--rO));
  text-shadow: var(--tsh, none);
}
/* Texto: hasta 3 líneas en tablet y teléfono (la caja no debe tapar la foto) */
.home-hero .cta-overlay .hero-texto{
  display: var(--txtv, -webkit-box);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 0 var(--eS) 0;
  font-size: var(--fXS, .8rem);
  line-height: var(--lhS);
  color: var(--txt, rgba(0, 0, 0, 0.75));
  text-shadow: var(--tsh, none);
}
.home-hero .hero-ctas{ display: flex; flex-wrap: wrap; gap: var(--eS); justify-content: var(--ta, flex-start); }
.home-hero .cta-overlay .hero-cta{
  display: var(--cta, inline-flex);
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.home-hero .cta-overlay .hero-cta--2{ display: var(--cta2, inline-flex); }
/* Sin texto ni botones visibles, el título no deja hueco debajo */
.home-hero .cta-overlay > :last-child{ margin-bottom: 0; }

@media (min-width: 501px){
  .home-hero .hero-zona{ inset: var(--eL) var(--eXL); }
  .home-hero .cta-overlay{ max-width: min(26rem, 100%); }
  .home-hero .cta-overlay .hero-titulo{ font-size: var(--fL, 1.25rem); }
}

@media (min-width: 769px){
  .home-hero .hero-zona{ inset: var(--eXL) var(--e2XL); }
  .home-hero .cta-overlay{ max-width: min(30rem, 100%); padding: var(--eL); }
  .home-hero .cta-overlay .hero-titulo{
    font-size: clamp(var(--fXL), 2.2vw, var(--f2XL));
  }
  .home-hero .cta-overlay .hero-texto{
    display: var(--txtv, block);
    margin: 0 0 var(--eL) 0;
    font-size: var(--fS);
  }
}

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