/* ==========================================================================
   SECCIÓN INICIO - HERO CAROUSEL
   ========================================================================== */

/* 1. Dimensiones del Slider (Pantalla completa) */
#inicioCarousel .carousel-inner,
#inicioCarousel .carousel-item img {
  height: 100vh;
  object-fit: cover;
}

/* Ajuste para elementos con posición absoluta dentro de la sección inicio */
#inicio .position-absolute {
  height: 100vh;
}

/* 2. Textos sobre el Carousel (Captions) */
.carousel-caption h5 {
  font-size: 2rem;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 1.2rem;
}

/* Contenedor del texto para que no desborde */
.titulo-hero, .subtitulo-hero {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal; /* Permite que el texto baje de línea */
}

/* La clave: Que las palabras no se partan a la mitad */
.letra-js {
    display: inline-block;
    white-space: pre; /* Mantiene los espacios */
}

/* Ajustes específicos para Celulares */
@media (max-width: 768px) {
    .titulo-hero {
        font-size: 2rem !important; /* Achicamos un poco el tamaño */
        line-height: 1.2;
    }
    
    .subtitulo-hero {
        font-size: 1.1rem !important;
        margin-top: 10px;
    }

    /* Reducimos el movimiento en mobile para que no "baile" tanto */
    .letra-js {
        margin-right: -1px; /* Ajuste fino de kerning */
    }
}