/* index.css */

/* 1. Elimina espacios entre las secciones incluidas */
main section,
/* main div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}*/

.heignt_10vh {
    min-height: 8vh;      /* Toma toda la pantalla como Servicios */
}

/* Asegura que el body permita el scroll */
html, body {
    height: auto !important;
    overflow-y: auto !important;
    background-color: #000;
    margin: 0;
}

.hero-main {
    display: flex;
    flex-direction: column;   /* Alineación vertical */
    justify-content: center;  /* Centrado vertical */
    align-items: center;      /* Centrado horizontal */
    min-height: 100vh;        /* Ocupa toda la pantalla */
    padding-top: 80px;        /* Espacio para que el menú fijo no tape el logo al inicio */
    text-align: center;
    width: 100%;
    min-height: 85vh;
}

.contenedor-responsivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.logo-responsivo {
    max-width: 500px; /* Tamaño de la imagen del oso */
    width: 90%;
    height: auto;
}

/* Línea divisora sutil */
.divisor {
    width: 60%;
    max-width: 600px;
    height: 1px;
    background: linear-gradient(to right, transparent, #0099cc, transparent);

    /* Aumentamos el margen superior a 60px para separar del contenido previo.
       Eliminamos el -10px inferior para evitar que "succione" los títulos.
    */
    margin: 60px auto 40px auto !important;

    border: none;
    display: block;
    position: relative;
    z-index: 5;
}

/* Esta clase se la pones a los títulos que quieres que se peguen a la línea */
.titulo-pegado {
    margin-top: -50px !important; /* Ajusta este valor para acercar el título a la línea */
}
.titulo-seccion, .titulo-seccion-servicios {
    margin-top: 0 !important;      /* Elimina el margen superior */
    padding-top: 0 !important;     /* Elimina el relleno superior */
    line-height: 1;                /* Reduce el espacio entre líneas */
    display: block;                /* Asegura que se comporte como bloque */
}
#nosotros, #servicios, #galeria, #contacto, #barberos {
    padding-top: 15px !important; /* Reduce el vacío al inicio de la sección */
    padding-bottom: 40px;
    min-height: auto;             /* Evita que la sección fuerce un tamaño gigante */
    display: flex;
    flex-direction: column;
    align-items: center;
}