/* Reset básico */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%; /* Asegura que el body ocupe toda la altura */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Fuente similar a la de Apple */
    line-height: 1.5; /* Mejora la legibilidad */
    -webkit-font-smoothing: antialiased; /* Suaviza las fuentes en webkit */
}

img {
    max-width: 100%; /* Las imágenes no se desbordan */
    display: block;
}

*{
    font-family: Arial, Helvetica, sans-serif;
}
body {
    background: #F5F5F5; /* Gris muy claro para el fondo */
    color: #333333; /* Gris oscuro para el texto principal */
}
.section-padding {
    padding: 70px 0;
}
.carousel-item {
    height: 80vh;
    min-height: 300px;
}
.carousel-item {
    height: 80vh;
    min-height: 300px;
}
.carousel-caption {
    color: #333333; /* Texto del carrusel más oscuro */
    bottom: 15%; /* Posición relativa desde la parte inferior */
    left: 5%; /* Ajustar posición horizontal si es necesario */
    right: 5%; /* Ajustar posición horizontal si es necesario */
    z-index: 2;
    text-align: center; /* Centrar el texto dentro de la leyenda */
}

.carousel-caption h5 {
    font-size: 3.5vw; /* Tamaño de fuente relativo al ancho de la ventana */
    text-transform: uppercase;
    letter-spacing: 1px; /* Reducir un poco el espaciado en tamaños más pequeños */
    margin-top: 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Añadir una sombra sutil para mejorar el contraste */
}

.carousel-caption p {
    width: 80%; /* Aumentar un poco el ancho en algunos casos */
    margin: 10px auto; /* Ajustar márgenes superior e inferior */
    font-size: 1.4rem; /* Usar unidades rem para mejor escalabilidad */
    line-height: 1.7;
    /* filter: contrast(1.1); /* Ajustar ligeramente el contraste */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Añadir una sombra sutil */
}

/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
    .carousel-caption {
        bottom: 5%; /* Ajustar la posición en pantallas más pequeñas */
    }

    .carousel-caption h5 {
        font-size: 5vw; /* Ajustar el tamaño del título en pantallas más pequeñas */
        letter-spacing: 0.5px;
    }

    .carousel-caption p {
        font-size: 1.2rem;
        width: 90%;
        line-height: 1.5;
    }
}
.carousel-inner2::before{
	background: rgba(0, 0, 0, 0.0); /* Transparencia muy sutil */
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
	 
}
.carousel-inner::before{
	background: rgba(0, 0, 0, 0.3); /* Transparencia muy sutil */
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
	 
}

.navbar-nav a {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 500;

}

.navbar-dark .navbar-brand:focus, .navbar-light .navbar-brand:hover{
    color: #000;
}

.w-100 {
    height: 100vh;
}

.navbar-toggler{
    padding: 1px 5px;
    font-size: 18px;
    line-height: 0.3;
}

.services .card-body i {
    font-size: 50px;

}



@media(max-width: 767px){
    .navbar-nav {
        text-align: center;
    }
    .carousel-item {
        height: 70vh;
    }
    .w-100 {
        height: 70vh;

    }
    .carousel-caption {
        bottom: 125px;
		color: #333333;
    }
    .carousel-caption h5 {
        font-size: 17px;
    }
    .carousel-caption a {
		background-color: #FFFFFF; /* Fondo blanco para los botones */
		border: 1px solid #007AFF; /* Borde azul */
		color: #007AFF; /* Texto azul */
		padding: 10px 20px;
		text-decoration: none;
		border-radius: 5px;
	}
	.carousel-caption a:hover {
		background-color: #007AFF; /* Fondo azul al pasar el ratón */
		color: #FFFFFF; /* Texto blanco al pasar el ratón */
	}
    .carousel-caption p{

        width: 100%;
        line-height: 1.5;
        font-size: 12px;
    }



    .card {
		background-color: #FFFFFF; /* Fondo blanco para las cards */
		border: none; /* Eliminar bordes de las cards para un diseño más limpio */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sutil sombra para dar relieve */
	}

    .section-padding {
        padding: 50px 0;
    }
}
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    text-decoration: none;
}

:root{
    --color-esqueleto:#EFF3F5;
}

header{
    width: 100%;
    height: 60px;
    background: var(--color-esqueleto);
}

.cover{
    width: 100%;
    height: 500px;
    background: var(--color-esqueleto);
    margin-top: 20px;
}

.container__article{
    max-width: 1000px;
    padding: 0px 20px;
    margin: auto;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.container__article .box__article{
    width: 200px;
    height: 250px;
    background: var(--color-esqueleto);
    margin: 20px;
}



.logo img {
    max-width: 100%;
    height: auto;
  }
  /* Estilos para pantallas más pequeñas */
@media (max-width: 768px) {
    .container__footer {
      flex-direction: column;
    }
  }
  .float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.float:hover {
	text-decoration: none;
	color: #25d366;
  background-color:#fff;
}

.my-float{
	margin-top:16px;
}


/* iconos */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.icon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.icon {
    font-size: 24px;
    margin-right: 10px;
    color: #007BFF;
}

.text {
    font-size: 16px;
    color: #333;
}

/* Estilos para el contacto */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;900&display=swap');




.form-holder {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      min-height: 100vh;
}

.form-holder .form-content {
    position: relative;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 60px;
}

.form-content .form-items {
    border: 3px solid #fff;
    padding: 40px;
    display: inline-block;
    width: 100%;
    min-width: 540px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: left;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.form-content h3 {
    color: #fff;
    text-align: left;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 5px;
}

.form-content h3.form-title {
    margin-bottom: 30px;
}

.form-content p {
    color: #fff;
    text-align: left;
    font-size: 17px;
    font-weight: 300;
    line-height: 20px;
    margin-bottom: 30px;
}


.form-content label, .was-validated .form-check-input:invalid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label{
    color: #fff;
}

.form-content input[type=text],.form-content input[type=tel],.form-content input[type=com], .form-content input[type=password], .form-content input[type=email], .form-content select {
    width: 100%;
    padding: 9px 20px;
    text-align: left;
    border: 0;
    outline: 0;
    border-radius: 6px;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #2944dd 4%);
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-top: 16px;
}


.btn-primary{
    background-color: #6C757D;
    outline: none;
    border: 0px;
     box-shadow: none;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
    background-color: #495056;
    outline: none !important;
    border: none !important;
     box-shadow: none;
}

.form-content textarea {
    position: static !important;
    width: 100%;
    padding: 8px 20px;
    border-radius: 6px;
    text-align: left;
    background-color: #fff;
    border: 0;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    outline: none;
    resize: none;
    height: 120px;
    -webkit-transition: none;
    transition: none;
    margin-bottom: 14px;
}

.form-content textarea:hover, .form-content textarea:focus {
    border: 0;
    background-color: #ebeff8;
    color: #8D8D8D;
}

.mv-up{
    margin-top: -9px !important;
    margin-bottom: 8px !important;
}

.invalid-feedback{
    color: #04AA6D;
}

.valid-feedback{
   color: #2acc80;
}
/* Estilos para el carrusel */
#carouselExampleSlidesOnly {
    width: 100%; /* Hacer el carrusel responsivo */
   display: inline-block;
   border-left: 50px solid #161815;
   border-right: 50px solid #161815;
    margin: 0 auto; /* Centrar horizontalmente el carrusel */
    overflow: hidden; /* Evitar desbordamiento horizontal */
}

/* Estilos para las imágenes del carrusel */
.carousel-inner .carousel-item img {
    width: 100%; /* Mantener la proporción de aspecto original */
    height: 110%; /* Establecer una altura fija para todas las imágenes */
   
}

/* Añadir margen inferior para separar las imágenes */
.carousel-inner .carousel-item {
    margin-bottom: 20px;
}



   
  
  /* Estilo para los cuadros (cards) */
  .card {
    background-color: #212529; /* Cambia el color de fondo de los cuadros según tu preferencia */
    
  }
  
  .card-title, .card-text { /* Aplica a los títulos y párrafos de las tarjetas */
    color: white !important; /* Asegura que el texto sea blanco */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Agrega una ligera sombra para mejorar el contraste */
}
  
/* Estilo de la tabla */

.table-custom th {
    background-color: #343a40; /* Fondo oscuro para encabezados */
    color: #ffffff; /* Texto blanco para encabezados */
}

.table-custom td {
    background-color: #f8f9fa; /* Fondo claro para celdas */
    color: #495057; /* Texto oscuro para celdas */
    border-color: #dee2e6; /* Bordes de las celdas */
}

.table-custom tr:nth-child(even) td { /* Estilo para filas pares (opcional) */
    background-color: #ffffff; /* Un tono ligeramente diferente para las filas pares */
}

.table-custom td:hover {
    background-color: #e9ecef; /* Cambia el color al pasar el ratón (opcional) */
}
  

/* Estilo para texto vertical */

.vertical-text {
    writing-mode: vertical-rl; /* Orientación vertical de derecha a izquierda */
    text-orientation: upright; /* Texto en posición vertical */
    white-space: nowrap; /* Evita el ajuste de línea */
    transform: rotate(-90deg); /* Rota el texto 180 grados */
    transform-origin: top center ; /* Establece el punto de rotación en el centro */
    width: 20px;
       margin-top: -120px;
    color: #ffffff; /* Color de texto azul */
}   
.title {
    /* Estilos de título h1 */
    text-align: center;
    padding: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.parra{
    text-align: center;
}

.pdf-container {
    /* Centrado */
    margin: auto;
    text-align: center;
}

.pdfview {
    /* Tamaño */
    max-width: 100%; /* Ajusta el ancho automáticamente */
    height: 60vh; /* Ajusta la altura automáticamente */
    /* Mejorar aspecto */
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.imagen-con-texto {
  filter: contrast(1.2); /* Ejemplo: aumentar ligeramente el contraste */
  /* filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Ejemplo de sombra en toda la imagen */
}
.carousel-inner2 {
    height: 80vh; /* Mantener la altura del carrusel de productos */
    min-height: 300px;
    background-color: white; /* Fondo blanco */
}

.carousel-inner2 .carousel-item img {
    height: 100%;
}

.carousel-inner2 .carousel-caption {
    top: 0; /* Mover la leyenda a la parte superior */
    bottom: auto; /* Eliminar la posición desde la parte inferior */
    color: #333333; /* Texto oscuro para contraste */
    text-align: center; /* Centrar el texto */
    text-shadow: none; /* Eliminar la sombra para un aspecto más limpio */
    padding-top: 20px; /* Separación del borde superior */
}


.carousel-inner2 .carousel-caption h5 {
    font-size: 2.5rem; /* Tamaño de fuente más grande */
    font-weight: 700; /* Negrita */
    color: #212529; /* Color de título oscuro */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Sombra sutil para un aspecto 3D */
}
.carousel-inner2 .carousel-item a {
    display: block;
    height: 100%;
    width: 100%;
}
@media (max-width: 768px) {
    .carousel-inner2 .carousel-caption h5 {
        font-size: 1.5rem; /* Ajuste para móviles */
    }
}
.producto-caption {
    background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente para el título */
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
}

.logo-container2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.carousel-inner2 {
    height: 80vh; /* Mantener la altura del carrusel de productos */
    min-height: 300px;
    background-color: #FFFFFF; /* Fondo blanco */
}

.carousel-inner2 .carousel-item img {
    height: auto;
    max-height: 85%; /* Limitar tamaño de imagen */
    max-width: 85%; /* Limitar tamaño de imagen */
    display: block;
    margin: auto; /* Centrar la imagen */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.carousel-inner2 .carousel-item img:hover {
    transform: scale(1.03);
}

.carousel-inner2 .carousel-caption {
    top: 0; /* Ensures the caption starts at the very top */
    bottom: auto; /* Removes the bottom positioning */
    color: #2c3e50;
    text-align: center;
    text-shadow: none;
    padding-top: 20px; /* Adjust as needed for spacing from the top edge */
}
.carousel-inner2 .carousel-caption h5 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.producto-caption {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid #dcdde1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.portafolio .carousel-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.portafolio .carousel-control-prev,
.portafolio .carousel-control-next {
    width: 5%;
    background: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.portafolio .carousel-control-prev:hover,
.portafolio .carousel-control-next:hover {
    opacity: 1;
}

.portafolio .carousel-control-prev-icon,
.portafolio .carousel-control-next-icon {
    background-color: #7f8c8d;
    border-radius: 50%;
    padding: 15px;
    background-size: 50%;
    transition: background-color 0.3s ease;
}

.portafolio .carousel-control-prev-icon:hover,
.portafolio .carousel-control-next-icon:hover {
    background-color: #34495e;
}




/* Update the existing media query for mobile devices */
@media (max-width: 768px) {
    /* Existing rules for other sections... */

    /* Adjust the product carousel container specifically */
    .portafolio .carousel-inner2 {
        height: auto;
        min-height: 600px;
        padding: 20px 0;
    }

    /* Adjust the product images inside the product carousel */
    .portafolio .carousel-inner2 .carousel-item img {
        height: auto;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }

    /* Adjust the product caption title */
    .portafolio .carousel-inner2 .carousel-caption h5 {
        font-size: .6rem;
        padding-top: 5px;
    }

    /* Adjust the padding for the caption background */
    .portafolio .producto-caption {
        padding: 8px 15px;
    }

    /* Keep the other mobile-specific styles for this carousel section */
    .portafolio .carousel-control-prev-icon,
    .portafolio .carousel-control-next-icon {
        padding: 10px;
        background-size: 40%;
    }
	
}