/* ==== HERO SECTION ==== */
.hero.section{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 0;
  background:#fff;
  overflow:visible;
}

/* Carrusel base */
#heroCarousel{ position:relative; overflow:visible; }
#heroCarousel .carousel-inner{ width:100%; }
#heroCarousel .carousel-item{ padding:40px 0; }

/* Texto base */
#heroCarousel h1{ font-size:2.5rem; font-weight:bold; }
#heroCarousel p{ font-size:1.1rem; margin-bottom:20px; }
.hero-actions a{ margin-right:10px; text-decoration:none !important; } /* sin subrayado */
.hero-actions a:hover{ text-decoration:none !important; }

/* Quitar subrayado en cualquier texto destacado */
.hero-content h1 span,
.hero-content strong,
.hero-content a {
  text-decoration:none !important;
}

/* ==== CONTROLES (flechas) ==== */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  width:3vw; max-width:44px; min-width:32px;
  height:3vw; max-height:44px; min-height:32px;

  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border-radius:50%;
  z-index:30;
  opacity:.85;
  transition:opacity .25s ease;
  pointer-events:auto;

  outline:none !important;
  border:none !important;
  box-shadow:none !important;
}

#heroCarousel .carousel-control-prev{ left:-4%; }
#heroCarousel .carousel-control-next{ right:-4%; }

#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon{
  width:2vw; max-width:28px; min-width:20px;
  height:2vw; max-height:28px; min-height:20px;
  background-size:100% 100%;
  filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(85%);
}

#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover{
  opacity:1;
  transform:translateY(-50%);
}
#heroCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#heroCarousel .carousel-control-next:hover .carousel-control-next-icon{
  filter: invert(28%) sepia(97%) saturate(7498%) hue-rotate(354deg) brightness(93%) contrast(95%);
}

#heroCarousel .carousel-control-prev::-moz-focus-inner,
#heroCarousel .carousel-control-next::-moz-focus-inner{
  border:0 !important; padding:0 !important;
}
#heroCarousel .carousel-control-prev:focus-visible,
#heroCarousel .carousel-control-next:focus-visible{
  box-shadow:0 0 0 3px rgba(239,56,43,.35);
}

/* ==== Indicadores ==== */
#heroCarousel .carousel-indicators{ bottom:12px; }
#heroCarousel .carousel-indicators li{
  background-color:#999;
}
#heroCarousel .carousel-indicators .active{
  background-color:#ef382b;
  transform:scale(1.15);
}

/* ==== Fade Bootstrap 4 ==== */
.carousel.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
.carousel.carousel-fade .carousel-item.active,
.carousel.carousel-fade .carousel-item-next.carousel-item-left,
.carousel.carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1;
}
.carousel.carousel-fade .active.carousel-item-left,
.carousel.carousel-fade .active.carousel-item-right {
  opacity: 0;
}

/* ==== Animaciones texto ==== */
@keyframes textUp {
  from { opacity:0; transform:translateY(60px); }
  to   { opacity:1; transform:translateY(0); }
}

.hero-content > *{
  opacity:0;
  transform:translateY(60px);
  will-change: transform, opacity;
}
.carousel-item.active .hero-content > *{
  animation-name: textUp;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
.carousel-item.active .hero-content > h1{
  animation-duration:.7s;
  animation-delay:.30s;
}
.carousel-item.active .hero-content > p{
  animation-duration:1.2s;
  animation-delay:.50s;
}
.carousel-item.active .hero-content > .hero-actions{
  animation-duration:.9s;
  animation-delay:.70s;
}

/* Animación especial para span del h1 */
.hero-content h1 span{
  display:inline-block;
  opacity:0;
  transform:translateY(60px);
  will-change: transform, opacity;
}
.carousel-item.active .hero-content h1 span{
  animation: textUp .8s ease-out .55s forwards;
}

/* Imagen lateral */
.hero-image{
  opacity:0; transform:translateX(40px);
  transition:opacity .8s ease-out, transform .8s ease-out;
}
.carousel-item.active .hero-image{
  opacity:1; transform:translateX(0); transition-delay:.90s;
}

/* ==== Responsive ==== */
@media (max-width:991.98px){
  #heroCarousel .carousel-control-prev{ left:2%; }
  #heroCarousel .carousel-control-next{ right:2%; }
}

/* ==== Reduce motion ==== */
@media (prefers-reduced-motion: reduce){
  .hero-content > *,
  .hero-content h1 span,
  .hero-image{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* Quitar cualquier “subrayado” del span destacado del título */
#heroCarousel .hero-content h1 span {
  text-decoration: none !important;            /* subrayado real */
  -webkit-text-decoration-line: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  border-bottom: none !important;              /* líneas hechas con borde */
  box-shadow: none !important;                 /* líneas hechas con sombra */
  background-image: none !important;           /* líneas hechas con gradient de fondo */
}

/* Si el tema usa pseudo-elementos para la línea, los anulamos */
#heroCarousel .hero-content h1 span::before,
#heroCarousel .hero-content h1 span::after,
#heroCarousel .hero-content h1::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#heroCarousel .carousel-item-start,
#heroCarousel .carousel-item-end {
  transform: none !important;
  transition: none !important;
}



/* ==== Visibilidad correcta: solo el activo se ve; next/prev solo durante transición ==== */
#heroCarousel .carousel-inner { position: relative; overflow: hidden; }

/* base: oculto y en flujo normal */
#heroCarousel .carousel-item {
  display: none;
  position: relative;
  width: 100%;
  margin: 0;
  left: 0;
  box-sizing: border-box;
  padding: 40px 0; /* tu padding uniforme */
}

/* el activo se muestra y define la altura del carrusel */
#heroCarousel .carousel-item.active {
  display: block;
  position: relative;
}

/* durante la transición, el siguiente/anterior se muestran apilados encima */
#heroCarousel .carousel-item-next,
#heroCarousel .carousel-item-prev {
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* si usás fade, mantenemos solo opacidad y sin desplazamiento */
#heroCarousel.carousel-fade .carousel-item,
#heroCarousel.carousel-fade .carousel-item-next,
#heroCarousel.carousel-fade .carousel-item-prev,
#heroCarousel.carousel-fade .carousel-item-start,
#heroCarousel.carousel-fade .carousel-item-end,
#heroCarousel.carousel-fade .carousel-item-next.carousel-item-start,
#heroCarousel.carousel-fade .carousel-item-prev.carousel-item-end {
  transform: none !important;
  left: 0 !important;
  transition: opacity 1s ease-in-out !important;
}
#heroCarousel.carousel-fade .carousel-item { opacity: 0; }
#heroCarousel.carousel-fade .carousel-item.active { opacity: 1; }