/* Hero del Inicio: carrusel de fondo (video o poster), velo y indicadores. Logica en js/hero-carrusel.js */
.hero2 { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(1100px 500px at 85% 10%, rgba(47,109,163,.28), transparent 60%), var(--idma-noche); padding-block: var(--sp-8); min-height: clamp(560px, calc(100svh - 150px), 780px); display: flex; align-items: center; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hs { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hs.act { opacity: 1; }
.hs-poster, .hs-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
/* desplazar: mueve el encuadre hacia la derecha (% del ancho) y difumina el borde izquierdo; ese hueco queda bajo el velo oscuro del texto */
.hs[style*="--dx"] { -webkit-mask-image: linear-gradient(90deg, transparent var(--dx), #000 calc(var(--dx) + 16%)); mask-image: linear-gradient(90deg, transparent var(--dx), #000 calc(var(--dx) + 16%)); }
.hs[style*="--dx"] .hs-poster, .hs[style*="--dx"] .hs-video { transform: translateX(var(--dx)); }
.hs-video { opacity: 0; transition: opacity .6s var(--ease); }
.hs-video.on { opacity: 1; }
/* Velo: opaco del lado del texto (>= AA con cualquier fondo) y mas liviano hacia la derecha */
.hero-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,20,32,0) 60%, rgba(10,20,32,.55) 100%),
    linear-gradient(90deg, rgba(10,20,32,.93) 0%, rgba(10,20,32,.92) 46%, rgba(10,20,32,.55) 64%, rgba(10,20,32,.25) 100%); }

.hero-grid { position: relative; }
.hero-copy { max-width: 55%; }
.hero2 h1 { font-size: var(--fs-3xl); line-height: 1.02; }
.hero2 h1 em { font-style: normal; color: var(--idma-guardia-claro); }
.hero2 .sub { margin-top: var(--sp-5); max-width: 54ch; font-size: var(--fs-lg); color: var(--text-soft); }
.hero2 .btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

/* Indicadores */
.hero-dots { position: absolute; right: max(16px, calc((100% - var(--container)) / 2 + 16px)); bottom: var(--sp-5); display: flex; gap: 4px; }
.hd-dot { appearance: none; border: 0; background: none; padding: 10px 4px; width: 44px; cursor: pointer; }
.hd-dot i { display: block; height: 3px; border-radius: 2px; background: rgba(230,235,240,.28); position: relative; overflow: hidden; }
.hd-dot i::after { content: ""; position: absolute; inset: 0; background: var(--idma-naranja); transform-origin: left; transform: scaleX(0); }
.hd-dot.act i::after { transform: scaleX(var(--p, 0)); }
.hd-dot:hover i { background: rgba(230,235,240,.5); }
.hd-dot:focus-visible { outline: 2px solid var(--idma-naranja); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 980px) {
  .hero-copy { max-width: 80%; }
  .hero-veil { background: linear-gradient(180deg, rgba(10,20,32,.88), rgba(10,20,32,.9)); } /* el texto ocupa casi todo el ancho */
}
@media (max-width: 767px) {
  .hero2 { padding-block: var(--sp-7); }
  .hero-copy { max-width: 100%; }
  .hero-veil { background: linear-gradient(180deg, rgba(10,20,32,.88) 0%, rgba(10,20,32,.9) 100%); }
  .hero-dots { left: 12px; right: auto; bottom: var(--sp-4); } /* a la izquierda: el boton de WhatsApp ocupa la esquina derecha */
}
@media (prefers-reduced-motion: reduce) { .hs { transition: none; } }