/* css/custom-styles.css */

/* === INICIO: ESTILOS ICONO TIKTOK (EJEMPLO SVG) === */
/* Asegúrate de tener el código SVG para el icono de TikTok en tu HTML si usas esta solución */
.social-icon.tiktok-svg-icon {
    width: 18px; /* O el tamaño que definiste */
    height: 18px; /* O el tamaño que definiste */
    fill: rgba(255, 255, 255, 0.7); /* Color inicial */
}

.link-social:hover .social-icon.tiktok-svg-icon {
    fill: #ffffff; /* Color del icono al pasar el mouse */
}
/* === FIN: ESTILOS ICONO TIKTOK === */


/* === INICIO: ESTILOS PARA VIDEO HERO Y LÍNEA LATERAL === */

/* Contenedor principal de la sección HERO con video */
.box-custom-1-main.video-hero-container {
    display: flex;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    height: 480px;
    min-height: 480px;
    position: relative;
    /* overflow: hidden; */ /* COMENTADO según tu prueba funcional donde la línea era visible */
}

/* Estilos para el video de fondo */
.hero-background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1; /* Capa 1: Video */
}

/* Overlay oscuro sobre el video */
.background-overlay.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Ajusta la opacidad de la "sombra" */
    z-index: 2; /* Capa 2: Overlay/Sombra (encima del video y de la línea ::before) */
}

/* Contenedor para el contenido de texto y botón superpuesto */
.hero-content-overlay {
    position: relative; 
    z-index: 3; /* Capa 3: Contenido de texto (encima de todo) */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Estilos para el bloque de texto (H1, p, botón) dentro del hero */
.hero-content-overlay .block-sm {
    max-width: 310px; 
    padding: 15px;    
    margin: 0 auto;   
}

@media (min-width: 576px) {
    .hero-content-overlay .block-sm {
        padding: 0; 
        margin-left: 60px; 
        margin-right: auto;
        max-width: 360px; 
    }
}

/* Media Query para Desktop: Altura del contenedor y estilos del ::before */
@media (min-width: 1200px) {
    /* Aplicar la altura correcta al contenedor del video en desktop */
    .box-custom-1-main.video-hero-container {
        height: 731px;
        min-height: 731px;
    }

    /* Estilos FINALES para la línea lateral gris (::before) */
    .box-custom-1-main.video-hero-container::before {
        content: "";
        display: block;
        position: absolute;
        width: 61px;
        height: 88%;
        top: 6%;
        left: -61px;
        background-color: #3B3B3B; /* Color gris de la línea */
        z-index: 0; /* Capa 0: Línea (detrás del video y del overlay) */
        pointer-events: none; 
    }

    /* Estilos para el bloque de texto en Desktop */
    .hero-content-overlay .block-sm {
        padding-top: 52px;
        padding-bottom: 140px;
        margin-left: 103px;
    }
}
/* === FIN: ESTILOS PARA VIDEO HERO Y LÍNEA LATERAL === */

/* css/custom-styles.css */

/* Estilos para el botón CTA en el RD Navbar Collapse */
.rd-navbar-collapse .rd-navbar-cta-btn {
    padding-top: 8px;    /* Ajusta el padding vertical si es necesario */
    padding-bottom: 8px; /* Ajusta el padding vertical si es necesario */
    padding-left: 15px;  /* Ajusta el padding horizontal si es necesario */
    padding-right: 15px; /* Ajusta el padding horizontal si es necesario */
    
    font-size: 15px;     /* Ajusta el tamaño de fuente si "button-sm" no es suficiente o es muy grande */
                         /* La clase .button ya define un min-width, puede que no necesites cambiarlo */
    /* min-width: auto; */ /* Descomenta esto si el min-width por defecto del botón es demasiado grande para el espacio */
    
    vertical-align: middle; /* Ayuda a alinear con otros elementos de la lista si son de diferentes alturas */
    margin-left: 10px;  /* Añade un pequeño margen a la izquierda si está muy pegado al elemento anterior */
}

/* Ajuste para el LI que contiene el botón CTA, si es necesario */
.rd-navbar-collapse .nav-item-cta {
    /* Puedes añadir estilos aquí para el LI si, por ejemplo, necesitas ajustar su alineación vertical */
    /* display: flex; */
    /* align-items: center; */
}

/* En pantallas muy pequeñas, si el rd-navbar-collapse se vuelve vertical, */
/* podrías querer que el botón ocupe todo el ancho */
@media (max-width: 767px) { /* O el breakpoint donde el RD Navbar cambia a modo móvil total */
    .rd-navbar-collapse.active .rd-navbar-cta-btn { /* .active es cuando el menú móvil está desplegado */
        /* display: block; */ /* Para que ocupe todo el ancho */
        /* width: 100%;    */
        /* text-align: center; */
        /* margin-top: 10px; */ /* Espacio si se apila verticalmente */
        /* margin-left: 0; */
    }
    .rd-navbar-collapse.active .nav-item-cta {
        /* width: 100%; */ /* Si el botón es display:block */
    }
}