@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');

*{
	margin:0px;
	padding:0px;
	box-sizing: border-box;
}

/*General para barra de dezplazamiento*/

/* Para Chrome, Safari y Edge (WebKit) */
::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra vertical */
    height: 8px; /* Alto de la barra horizontal */
}

::-webkit-scrollbar-track {
    background: transparent; /* Fondo del track transparente o muy sutil */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Color del thumb (la parte que se mueve), semi-transparente */
    border-radius: 10px; /* Bordes completamente redondeados */
    border: 2px solid transparent; /* Truco para hacer el thumb más delgado visualmente si se necesita */
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4); /* Color un poco más oscuro al pasar el mouse */
}

/* Para Firefox */
* {
    scrollbar-width: thin; /* Hace la barra más delgada */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Color del thumb y del track */
}

/*====================================================================
  Reglas base para dispositivos móviles
  Diseño Webapp (0px - 767px)
====================================================================*/


    .header-container {
        display: none;
    }

    .header-movil-container {
        width: 100%;
        background-color: #fff; /* Color de fondo del encabezado */
        padding: 10px 0;
        display: block;
    }

    .header-movil-content{
         width: 90%; 
         margin: 0 auto; /* Para centrar el contenido */
         display: flex;
         background-color: #FBA5A6;
         justify-content: space-between;
         align-items: center;
    }


    body {
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

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


    body {
        background-color: #C4E8E5; /* Color de fondo gris claro para móviles */
    }

/*====================================================================
  Reglas para tabletas
  (768px - 991px)
====================================================================*/
@media (min-width: 768px) and (max-width: 991px) {
    /* Estilos para tabletas */
    
    .header-movil-container {
        display: none;
    }
    
    .header-container {
        width: 100%;
        background-color: #fff; /* Color de fondo del encabezado */
        padding: 10px 0;
        display: block;
    }

    .header-content {
        width: 90%; /* La base del 90% del ancho */
        margin: 0 auto; /* Para centrar el contenido */
        display: flex;
        background-color: #FBA5A6;
        justify-content: space-between;
        align-items: center;
    }
    
    body {background-color: #b3e5fc;}
    

/*Etilos logotipo header*/
    
    .img-log-header{
        width:300px; height: 125px;
        display: flex; /* Makes the logo a flex item */
        justify-content: center;
        align-items: center; /* Centers the image vertically within its container */
    }
    
    .img-log-header > img {
        width: auto; height: 125px;
    }
    
    
     /* Estilos del menú */
        .nav-container ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .nav-container li {
            position: relative;
            padding: 10px 15px;
        }

        .nav-container a {
            text-decoration: none;
            color: #333;
        }

        /* Estilos para el submenú */
        .submenu-panel {
            display: none; /* Oculto por defecto */
            position: absolute;
            top: 100%;
            left: 0;
            width: 250px; /* Ancho del panel desplegable */
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 10;
            padding: 15px;
        }

        .submenu-panel ul {
            display: block;
        }

        .submenu-panel li {
            padding: 5px 0;
        }

        /* Mostrar el submenú al pasar el cursor */
        .has-submenu:hover .submenu-panel {
            display: block;
        }
}

/*====================================================================
  Reglas para monitores de escritorio
  (992px - 1199px)
====================================================================*/
@media (min-width: 992px) and (max-width: 1199px) {
    /* Estilos para monitores de escritorio */
    
    .header-movil-container {
        display: none;
    }
    
    .header-container {
    width: 100%;
    background-color: #fff; /* Color de fondo del encabezado */
    padding: 10px 0;
    display: block;    
    }

    .header-content {
        width: 90%; /* La base del 90% del ancho */
        margin: 0 auto; /* Para centrar el contenido */
        display: flex;
        background-color: #FBA5A6;
        justify-content: space-between;
        align-items: center;
    }
    
    
    body { background-color: #c8e6c9;}
    
 /*Etilos logotipo header*/
    
    .img-log-header{
        width:300px; height: 125px;
        display: flex; /* Makes the logo a flex item */
        justify-content: center;
        align-items: center; /* Centers the image vertically within its container */
    }
    
    .img-log-header > img {
        width: auto; height: 125px;
    }
    
    /* Estilos del menú */
        .nav-container ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .nav-container li {
            position: relative;
            padding: 10px 15px;
        }

        .nav-container a {
            text-decoration: none;
            color: #333;
        }

        /* Estilos para el submenú */
        .submenu-panel {
            display: none; /* Oculto por defecto */
            position: absolute;
            top: 100%;
            left: 0;
            width: 250px; /* Ancho del panel desplegable */
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 10;
            padding: 15px;
        }

        .submenu-panel ul {
            display: block;
        }

        .submenu-panel li {
            padding: 5px 0;
        }

        /* Mostrar el submenú al pasar el cursor */
        .has-submenu:hover .submenu-panel {
            display: block;
        }
}

/*====================================================================
  Reglas para pantallas grandes
  (1200px - 1919px)
====================================================================*/
@media (min-width: 1200px) and (max-width: 1919px) {
    /* Estilos para pantallas grandes */
    
    .header-movil-container {
        display: none;
    }
    
    .header-container {
        width: 100%;
        background-color: #fff; /* Color de fondo del encabezado */
        padding: 10px 0;
        display: block;
    }

    .header-content {
        width: 90%; /* La base del 90% del ancho */
        margin: 0 auto; /* Para centrar el contenido */
        display: flex;
        background-color: #fff;
        justify-content: space-between;
        align-items: center;
    }
    

    
/*Etilos logotipo header*/
    
    .img-log-header{
        width:400px; height: 100px;
        display: flex; /* Makes the logo a flex item */
        justify-content: center;
        align-items: center; /* Centers the image vertically within its container */
    }
    
    .img-log-header > img {
        width: auto; height: 80px;
    }
    
 /* Estilos del menú */
	
        .nav-container ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .nav-container li {
            position: relative;
            padding: 10px 15px;
        }

        .nav-container a {
            text-decoration: none;
            color: #6a1f1f;
            font-family: 'Roboto', sans-serif;
        }

        /* Estilos para el submenú */
        .submenu-panel {
            display: none; /* Oculto por defecto */
            position: absolute;
            top: 100%;
            left: 0;
            width: 250px; /* Ancho del panel desplegable */
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 10;
            padding: 15px;
        }

        .submenu-panel ul {
            display: block;
        }

        .submenu-panel li {
            padding: 5px 0;
        }

        /* Mostrar el submenú al pasar el cursor */
        .has-submenu:hover .submenu-panel {
            display: block;
        }
    
 /*Zona del herramientas del header*/
    
    .dv-tools-headre {
        width:250px; height: 100px; 
        background-color: none;
        display: flex;
        flex-direction: row;
        align-items: center; justify-content: center;
    }
    
    .select-dv {
        width: 100px; height: 100px;
        display:flex; align-items: center; 
        justify-content: center;
    }
    
    .select {
        width: 50px; height: 40px;
        border:none;
        background-color: transparent;
        outline: none;
        padding: 0px 2px 0px 5px;
        cursor: pointer;
    }
    
    .btn-log {
        width: 90px; height: 100px;
        display: flex;
        justify-content: center; align-items: center;
        background-color: transparent;
    }
    
    .btn-log > button {
        width:90px; height: 50px;
        border: none;
        color: black; background-color: transparent;
        font-family: 'Roboto', sans-serif;
        outline: none; text-decoration: none;
        text-transform: uppercase; font-weight: 200;
        cursor: pointer;
        font-size: 12px;
    }
    
    .btn-log > button:hover {
        color:#6a1f1f; text-decoration: underline;
    }

/* Main */
	
    .main-container {
        widht:100%;
	}
	
	.section-service {
		width:100%; height: 570px;
		background-color: white;
		display: flex; justify-content: center; align-items: center;
	}
	
	.service-content {
		width:90%; height: 570px;
		padding-top: 50px;
	}
	
 .section-title {
	 	display: flex; justify-content: center; align-items: center;
        font-family: 'Roboto', sans-serif;
        font-size: 1rem; /* Un poco más grande para lucir la fuente */
        color: black;    /* Relleno BLANCO */
        margin-bottom: 40px;
        font-weight: 100; /* Peso bold para que el borde se defina bien */
        text-transform: uppercase; 
        letter-spacing: 1px; 
	}
    
	 .practice-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* 5 columnas por defecto (escritorio grande) */
        gap: 20px;
    }
	
	.practice-card {
        background: #f9f9f9;
        padding: 25px 15px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center; justify-content: center; text-align: center;
        cursor: pointer;
        border: 1px solid transparent; /* Para evitar saltos al hacer hover con borde */
    }
	
	.practice-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
        border-color: #6a1f1f; /* Borde sutil al pasar el mouse */
        background-color: #fff;
    }
	
	.practice-icon {
        font-size: 2rem;
        color: #B8860B;
        margin-bottom: 15px;
        transition: transform 0.3s ease;
    }
    .practice-card:hover .practice-icon {
        transform: scale(1.1); /* Pequeño efecto de zoom en el icono */
    }
    .practice-card h4 {
        font-size: 1rem;
        color: #333;
        margin: 0;
        font-weight: 400;
	    font-family: 'Roboto', sans-serif;
    }
	
	.section-contratos {
		width:100%; height: 600px;
		display: flex; background-color: white;
		justify-content: center;	
	}
	
	.contratos-content {
		width:90%; height: 570px;
		display: flex;
		flex-wrap: wrap; 
	}
	
	.info-column {
		flex: 1 1 50%;
		position: relative;
		display: flex;
		justify-content: center; align-items: center;
		background-color: aqua;
	}
	
	.info-column-content {
		width:500px; height: 550px;
		background-color: aliceblue;
	}
	
	.form-column {
		flex: 1 1 50%;
		display: flex;
		justify-content: center; align-items: center;
		background-color: darkgray;
	}
	
	.form-column-content {
		width:500px; height: 550px;
		background-color: aliceblue;
	}
	
	.partner-section {
		width: 100%; /* El contenedor padre ocupa todo el ancho */
		padding: 40px 0; /* Espaciado superior e inferior para separar */
		background-color: #f7f7f7; /* Fondo sutil para la sección */
	}
	
	.partner-content {
		/* El carrusel en sí (slide-content) */
		width: 90%; /* Ocupa el 90% del ancho del padre */
		/*max-width: 1200px;*/
		height: 150px; /* Menor altura para los logos */
		position: relative;
		overflow: hidden;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		margin: 0 auto; /* Centrar el 90% de ancho */
		border-radius: 8px;
	}


}

/*====================================================================
  Reglas para pantallas extra grandes
  (1920px y más)
====================================================================*/
@media (min-width: 1920px) {
    /* Estilos para pantallas extra grandes (32" y más) */
    
    .header-movil-container {
        display: none;
    }
    
    .header-container {
        width: 100%;
        background-color: #fff; /* Color de fondo del encabezado */
        padding: 5px 0;
        display: block;
    }

    .header-content {
        width: 90%; /* La base del 90% del ancho */
        margin: 0 auto; /* Para centrar el contenido */
        display: flex;
        background-color: #FBA5A6;
        justify-content: space-between;
        align-items: center;
    }
    
    
    body {background-color: #e1bee7;}
    

/*Etilos logotipo header*/
    
    .img-log-header{
        width:400px; height: 125px;
        display: flex; /* Makes the logo a flex item */
        justify-content: center;
        align-items: center; /* Centers the image vertically within its container */
    }
    
    .img-log-header > img {
        width: auto; height: 50px;
    }
    
    
 /* Estilos del menú */
	
        .nav-container ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .nav-container li {
            position: relative;
            padding: 10px 15px;
        }

        .nav-container a {
            text-decoration: none;
            color: #333;
        }

        /* Estilos para el submenú */
        .submenu-panel {
            display: none; /* Oculto por defecto */
            position: absolute;
            top: 100%;
            left: 0;
            width: 250px; /* Ancho del panel desplegable */
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 10;
            padding: 15px;
        }

        .submenu-panel ul {
            display: block;
        }

        .submenu-panel li {
            padding: 5px 0;
        }

        /* Mostrar el submenú al pasar el cursor */
        .has-submenu:hover .submenu-panel {
            display: block;
        }
}