@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* Variables CSS para facilitar la personalización */
:root {
    --dark-blue:  rgb(25, 32, 58);
    --light-grey: #f0f0f0;
    --white: #ffffff;
    --text-secondary-custom: #636363; /* Renombrado para evitar conflicto con la clase 'text-secondary' de Bootstrap si se desea un tono diferente */
    --form-bg-darker: #3b3e4f; /* Fondo de los campos de formulario */
    --blue-gradient-start: #007bff; /* Ajusta este color si el degradado azul es diferente */
    --blue-gradient-end: #00bcd4; /* Ajusta este color si el degradado azul es diferente */
    --bs-dark-rgb: rgb(25, 32, 58,);
        --text-secondary-custom: #636363;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--dark-blue);
    display: block;
    margin: 0;
}

/* Sobrescribir colores de Bootstrap si es necesario para que coincidan con el diseño original */
.bg-dark {
    background-color: var(--dark-blue) !important;
}

.bg-dark-subtle { /* Usado para el formulario */
    background-color: var(--dark-blue) !important; /* Mismo color que el fondo principal para el formulario */
}

.text-secondary { /* Para los textos grises */
    color: var(--text-secondary-custom) !important;
}

/* --- Estilos para el nuevo Header (Navbar) --- */
.custom-navbar .navbar-brand .small-logo {
    height: 4rem; /* Tamaño del logo pequeño en la navbar */
    filter: invert(0); /* Para que el logo sea blanco si es oscuro */
    
}

.custom-navbar .nav-link.active {
    color: var(--white) !important; /* Enlace activo más blanco */
}

.custom-navbar .nav-link.text-white-50:hover {
    color: var(--white) !important; /* Enlaces al pasar el ratón */
}

/* --- Estilos para la sección "Meet" (hero-section) --- */
.hero-section {
    position: relative;
    padding-top: 100px; /* Ajusta el padding superior si es necesario */
    padding-bottom: 0px; /* Ajusta el padding inferior si es necesario */
    min-height: 600px; /* Altura mínima para que la imagen tenga espacio */
    display: flex;
    align-items: center;
   
}

.hero-section .display-3  h1{
    font-size: 3.5rem; /* Ajusta el tamaño de la fuente para el título principal */
    line-height: 1.1;
    color: var(--white);
}
@media (min-width: 1200px) {
    .display-3 {
        font-size: 4rem;
        max-width: 600px;
        position: relative;
        left: 27%;
        /* right: 25%; */
    }
}
/* Contenedor de la imagen del héroe y el degradado */

.hero-image {
    width: 100%; /* Ajusta el ancho para que ocupe todo el espacio disponible */
    max-width: 550px; /* Limita el ancho máximo de la imagen */
    height: auto;
    object-fit: cover;
    z-index: 2; /* Asegura que la imagen esté detrás del contenido de texto */
    right: -10%; /* Ajusta la posición para que esté un poco fuera de la pantalla a la derecha */
    bottom: 0;
}
.hero-image-2 {
    width: 100%; /* Ajusta el ancho para que ocupe todo el espacio disponible */
    max-width: 550px; /* Limita el ancho máximo de la imagen */
    height: auto;
    object-fit: cover;
    z-index: 2; /* Asegura que la imagen esté detrás del contenido de texto */
    right: -10%; /* Ajusta la posición para que esté un poco fuera de la pantalla a la derecha */
    bottom: 0;
}
.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgb(25 32 58);
     background-image: url(../img/0a663c9dcbf09563f3568b94e2cbe2dee39e3901.jpg);
   background-repeat: no-repeat;
  
}


/* Degradado azul en la parte inferior derecha de la imagen del héroe */
.hero-bg-gradient {
    width: 60%; /* Ancho del degradado */
    height: 80%; /* Altura del degradado */
    /* background-image: url(../img/c43fd4071ff83eef7ed7ecb3d050de9a20760a18.png); */
    background-repeat: no-repeat;
    background-position-y: 81px;
    background-position-x: center;
    opacity: 0.7; /* Transparencia del degradado */
    border-radius: 0 0 0 100%; /* Forma para la esquina inferior izquierda */
    bottom: 0;
    right: 0;
    z-index: 0; /* Detrás de la imagen de Roberto */
    transform: rotate(90deg); /* Para orientar el degradado */
}

/* Ajustes para la imagen dentro del degradado */
.hero-section .hero-image {
   z-index: 1;
    float: left;
    right: 21%;
    bottom: 0;
    width: auto;
    max-height: 100%;
    max-width: 65%; /* Ancho máximo respecto al contenedor */
   
}


/* --- Estilos para la sección de Logos (Socios) --- */
.logos-section {
    border-bottom: 1px solid #e0e0e0; /* Separador */
    border-top: 1px solid #e0e0e0; /* Separador */
}

.logo-item {
    max-height: 50px; /* Altura de los logos */
    object-fit: contain;
    filter: grayscale(100%) opacity(70%); /* Logos en escala de grises y opacos */
    transition: filter 0.3s ease;
}

.logo-item:hover {
    filter: grayscale(0%) opacity(100%); /* Color y opacidad completa al pasar el ratón */
}

/* --- Estilos para la sección "Acerca de Mí" --- */
.about-me-section {
    background-color: var(--white) !important; /* Fondo blanco para esta sección */
    color: var(--dark-blue) !important;
}

.about-me-section h2, .about-me-section h3 {
    color: var(--dark-blue) !important;
}

.about-me-section .text-secondary {
    color: #555 !important; /* Un gris más oscuro para el texto de contenido */
}

.tex-sobre{
    font-size: 1.5rem;
   
}

/* --- Estilos para la sección de Contacto (anteriormente el header) --- */
.custom-form .form-control {
    background-color: #fafafa !important;
        color: #2f2e2e !important;
    border: none !important;
    padding: 12px !important;
}

.custom-form .form-control::placeholder {
    color: var(--text-secondary-custom) !important;
}

.send-button {
    background-color: var(--white);
    color: var(--dark-blue);
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.send-button i {
    color: var(--dark-blue);
}

.send-button:hover {
    background-color: var(--light-grey);
}

/* --- Estilos para la sección de Experiencia Profesional --- */
.experience-section {
    background-color: var(--white) !important;
}

.experience-item {
    position: relative;
    padding-left: 70px; /* Espacio para el círculo de icono */
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--dark-blue);
    color: var(--white);
    font-size: 1.3em;
    position: absolute;
    left: 0;
    top: 0;
}
.text-dark-exper{
font-size: 1.5rem;

}

.experience-item + .experience-item::before { /* Línea vertical entre items */
    content: '';
    position: absolute;
    left: 25px; /* A la mitad del círculo */
    top: -30px; /* Desde el centro del anterior hasta el centro del actual */
    bottom: calc(100% - 25px); /* Ajusta hasta el centro del círculo actual */
    height: calc(100% + 5px); /* Ajusta la longitud de la línea */
    width: 2px;
    /* background-color: #e0e0e0;  */
    z-index: 0;
}

/* Ajuste de la línea para el primer elemento */
.experience-item:first-child::before {
    top: 25px; /* Empieza desde el centro del círculo */
    height: calc(100% - 25px);
}

.experience-item:not(:first-child)::before {
    top: -25px; /* La línea inicia arriba del elemento actual */
    height: calc(100% + 25px); /* Y baja hasta abajo del elemento actual */
}


.experience-item .text-primary {
    color: var(--blue-gradient-start) !important; /* Color para "CPD / COO" etc. */
    font-size: 0.9em;
}

/* --- Estilos para la sección de Educación --- */
.education-section {
    background-color: var(--light-grey) !important; /* Fondo gris claro */
}

.education-section h2 {
    color: var(--dark-blue) !important;
}

.edu-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* background-color: var(--dark-blue); */
    color: var(--white);
    font-size: 1.5em;
    margin-bottom: 15px;
    float: left;
    margin-bottom: 2rem !important;
}
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: #19203a;
    transition: var(--bs-progress-bar-transition);
   
}
.progress, .progress-stacked {

    border-radius: 0px;
    height: 18px;
}
.card.rounded-4 {
    border-radius: 1rem !important; /* Ajusta el radio de la esquina de las tarjetas */
}


/* --- Footer --- */
.light-grey{
    background-color: #f7f7f7;
}
.footer-logo.filter-light {
    filter: invert(1);
}

.social-icons a:hover {
    color: var(--text-secondary-custom) !important;
}
.display-4-footer{
    font-size: 4.5rem;
}



/* Responsive adjustments */
@media (max-width: 991.98px) { /* Corresponde a 'lg' en Bootstrap */
    .edu-icon-circle {
   
    margin-bottom: 1rem !important;
}
    .hero-section {
        text-align: center !important;
        min-height: auto;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    /* .hero-image-container {
        min-height: 300px;
        position: relative;
        top: 8rem;
    } */
    .hero-image {
        position: static !important; /* Vuelve la imagen estática en móviles */
        max-width: 80% !important; /* Controla el tamaño en móviles */
        margin: -100px auto 30px 60px; /* Centra y añade espacio */
    }
    .hero-image-2 {
        position: static !important; /* Vuelve la imagen estática en móviles */
        max-width: 80% !important; /* Controla el tamaño en móviles */
        margin: 0px auto 30px 0px; /* Centra y añade espacio */
    }
    .hero-bg-gradient {
        display: none; /* Oculta el degradado en móviles */
    }

    .custom-navbar .navbar-brand span {
        display: inline !important; /* Muestra "RCH" en móviles si es necesario */
    }
    .custom-navbar .navbar-toggler {
        margin-left: auto;
    }
    .custom-navbar .navbar-collapse {
        text-align: center;
        margin-top: 10px;
    }
    .custom-navbar .navbar-nav {
        flex-direction: column;
        align-items: center;
    }
    .custom-navbar .nav-item {
        margin: 5px 0;
    }

    .contact-info {
        align-items: center !important;
    }

    .experience-item {
        padding-left: 0; /* Elimina padding left en móviles */
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }
    .icon-circle {
        position: static; /* Vuelve el icono estático */
        margin-bottom: 15px;
    }
    .experience-item + .experience-item::before {
        display: none; /* Oculta las líneas verticales en móviles */
    }
    .display-4-footer{
    font-size: 3.5rem;
}
}

@media (max-width: 767.98px) { /* Corresponde a 'md' en Bootstrap */
    .hero-section h1.display-3 {
        font-size: 2.5rem;
    }
    .footer .col-md-4 {
        text-align: center !important;
    }
    .footer-left, .footer-right .social-icons {
        margin-bottom: 15px;
    }
    .fs-5 {
    font-size: .85rem !important;
    width: 315px;
    padding-left: 72px;
}
}
@media (min-width: 476px) {
    max-width: 400px;
    
}
.carrusel{
        padding-bottom: 3rem;
      }

      .tech-slideshow {
        height: 150px;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        transform: translate3d(0, 0, 0);
      }
      
      .tech-slideshow > div {
        height: 150px;
        width: 2526px;
        background: url(../img/logos/parner.webp);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        transform: translate3d(0, 0, 0);
      }
      .tech-slideshow .mover-1 {
        animation: moveSlideshow 41s linear infinite;
      }
      .tech-slideshow .mover-2 {
        opacity: 0;
        transition: opacity 0.5s ease-out;
        background-position: 0 -200px;
        animation: moveSlideshow 15s linear infinite;
      }
      .tech-slideshow:hover .mover-2 {
        opacity: 0;
      }
      
      @keyframes moveSlideshow {
        100% { 
          transform: translateX(-66.6666%);  
        }
      }
      @media (min-width: 576px) {
    .py-md-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .py-5 {
    padding-top: .5rem !important;
    padding-bottom: 3rem !important;
}
    }
    .icon-liceo-logo { 
        
        background-image: url(../img/icon/logo_liceo_azul.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 40px;
        width: 36px;
        display: block;
        
    }   
   .icon-liceo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--dark-blue);
    color: var(--white);
    font-size: 1.3em;
    position: absolute;
    left: 0;
    top: 0;
    }  
        .icon-uni-logo { 
            
            background-image: url(../img/icon/universidad.png);
            background-repeat: no-repeat;
            background-size: cover;
            height: 50px;
            width: 50px;
            display: block;
            
    }   
        .icon-uni {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--dark-blue);
            color: var(--white);
            font-size: 1.3em;
            position: absolute;
            left: 0;
            top: 0;
    }  
    
            .icon-copar-logo { 
            
            background-image: url(../img/icon/coparmex.png);
            background-repeat: no-repeat;
            background-size: cover;
            height: 50px;
            width: 50px;
            display: block;
            
    }   
        .icon-copar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--dark-blue);
            color: var(--white);
            font-size: 1.3em;
            position: absolute;
            left: 0;
            top: 0;
    }   
                .icon-imef-logo { 
            
            background-image: url(../img/icon/imef_nal_transparente-1.png);
            background-repeat: no-repeat;
            background-size: cover;
            height: 20px;
            width: 35px;
            display: block;
            
    }   
        .icon-imef {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--dark-blue);
            color: var(--white);
            font-size: 1.3em;
            position: absolute;
            left: 0;
            top: 0;
    }  
                .icon-negoci-logo { 
            
            background-image: url(../img/icon/negocios.png);
            background-repeat: no-repeat;
            background-size: cover;
            height: 40px;
            width: 40px;
            display: block;
            
    } 
    .card-title{
        font-size: 1rem;
        text-align: left;
    }