/*============================== RECUADROS DE ELEMENTOS EN EL MENU ================================*/
/*=================================================================================================*/

/* Estilos para los enlaces del menú */
.navbar-nav .nav-link {
  /*border: 1px solid #ccc; /* Un borde gris claro de 1px */
  border-left: 2px solid #ccc;
  /* Un borde azul a la izquierda */
  border-right: 2px solid #ccc;
  /* Un borde gris claro a la derecha */
  color: #024b99;
  /* Color del texto */
  padding: 8px 15px;
  /* Añadir un poco de espacio interno (padding) */
  margin: 10px;
  /* Espacio entre cada recuadro */
  border-radius: 7px;
  /* Bordes ligeramente redondeados */
  transition: all 0.3s ease;
  /* Transición suave para efectos hover */
}

/* Efecto al pasar el ratón (hover) */
.navbar-nav .nav-link:hover {
  background-color: #e6e6e7;
  /* Un fondo claro al pasar el ratón */
  border-color: #024b99;
  /* Cambia el color del borde al color principal de Bootstrap al pasar el ratón */
}

/* Estilo para el elemento activo (opcional) */
.navbar-nav .nav-link.active {
  background-color: #007bff;
  /* Fondo azul para el activo */
  color: white !important;
  /* Texto blanco para el activo */
  border-color: #007bff;
}

/* Media query para móviles: Si quieres que los recuadros se vean diferentes o desaparezcan en móvil */
@media (max-width: 991.98px) {

  /* Esto es para pantallas más pequeñas que 'lg' (desktop) en Bootstrap */
  .navbar-nav .nav-link {
    border: none;
    /* Quitar bordes en móvil */
    margin: 10px 0;
    /* Espacio vertical entre los enlaces */
    width: 100%;
    /* Hacer que los enlaces ocupen todo el ancho */
    padding: 10px 15px;
    /* Ajustar padding */
  }

  .navbar-nav .nav-link:hover {
    background-color: #e6e6e7;
    /* Un fondo claro al pasar el ratón */
    border-color: #024b99;
    /* Cambia el color del borde al color principal de Bootstrap al pasar el ratón */
  }
}

/*========================================================================================================*/
/*======================================== BOTON DE COTIZA ===========================================*/
/*========================================================================================================*/


/* Estilos generales para el botón personalizado */
.my-custom-button {
  /* Fondo y texto */
  background-color: #007bff;
  /* Color primario de Bootstrap (azul) */
  color: white;
  /* Texto blanco */
  border: none;
  /* Quita el borde por defecto de Bootstrap */

  /* Redondeo */
  border-radius: 18px;
  /* Puedes ajustar este valor. 25px suele dar un buen redondeo para botones rectangulares.
                                 Si quieres un botón "pastilla" muy redondeado, usa un valor grande como 50px o 50% si es cuadrado. */

  /* Espaciado interno */
  padding: 11px 25px;
  /* Más padding para un botón más grande y con más "aire" */

  /* Sombra */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Sombra sutil:
                                               - 0: sin desplazamiento horizontal
                                               - 4px: 4px de desplazamiento vertical
                                               - 8px: 8px de difuminado
                                               - rgba(0,0,0,0.2): color negro con 20% de opacidad */

  /* Transición para efectos suaves */
  transition: all 0.3s ease;
  /* Hace que los cambios al pasar el ratón sean suaves */

  /* Otros ajustes (opcional) */
  font-weight: bold;
  /* Texto en negrita */
  cursor: pointer;
  /* Muestra el puntero de mano al pasar el ratón */
  text-transform: uppercase;
  /* Texto en mayúsculas */
  letter-spacing: 0.8px;
  /* Pequeño espacio entre letras */
}

/* Efecto al pasar el ratón (hover) */
.my-custom-button:hover {
  background-color: #0056b3;
  /* Un azul un poco más oscuro al pasar el ratón */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  /* Sombra un poco más pronunciada */
  transform: translateY(-2px);
  /* Mueve ligeramente el botón hacia arriba */
}

/* Efecto al hacer clic (active) */
.my-custom-button:active {
  background-color: #004085;
  /* Azul aún más oscuro al hacer clic */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Sombra más pequeña para simular "presión" */
  transform: translateY(0);
  /* Vuelve a la posición original */
}

/* Estilo para cuando el botón está enfocado (con teclado, para accesibilidad) */
.my-custom-button:focus {
  outline: none;
  /* Quita el contorno de enfoque por defecto del navegador */
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
  /* Añade un "glow" similar al de Bootstrap */
}

/* Ajustes para el dropdown-toggle (si usas un ícono de flecha, puedes ajustarlo) */
.my-custom-button.dropdown-toggle::after {
  margin-left: 0.8em;
  /* Separa un poco la flecha del texto */
}

.my-dropdown-form {
  width: 400px;
  /* Ancho fijo en píxeles */
  /* O un ancho máximo si prefieres que sea responsive */
  max-width: 90%;
  min-width: 250px;
  overflow-y: auto;
  /* Agrega scroll si el contenido excede la altura */
}

.my-dropdown-form .form-control {
  height: 45px;
  /* Altura específica para los inputs */
  font-size: 1rem;
  /* Tamaño de fuente para los inputs */
}

.my-dropdown-form .size-cuadrado-form {
  height: 130px;
  /* Altura específica para los inputs */
  font-size: 1rem;
  /* Tamaño de fuente para los inputs */
}

textarea {
  resize: none;
  /* Esto quita el control de redimensionamiento */
  height: 130px;
  /* Altura específica para el textarea */
  font-size: 1rem;
  /* Tamaño de fuente para el textarea */
}


/*===================================================================================*/
/*===================================================================================*/
/*===================================================================================*/

.espaciado {
  letter-spacing: 0.1em;
}

.imagen-redondeada {
  border-radius: 65px;
  /* Puedes ajustar este valor para más o menos curvatura */
}


.rojo {
  color: rgb(141, 8, 8);
  font-weight: bold;
  font-size: 15px; /* Un tamaño chico fijo */
}



/*===================================================================================*/
/*==================== ESTILOS DE CARDS DE SERVICIOS ===========================*/
/*===================================================================================*/



.img-fluid.rounded-circle {
  border-radius: 40% !important;
  /* Asegura que la imagen sea un círculo perfecto */
  width: 250px;
  /* Puedes ajustar el tamaño si 280px es muy grande para 3 columnas */
  height: 250px;
  /* Asegura la misma altura que el ancho para el círculo */
  object-fit: cover;
  /* Recorta la imagen para que encaje sin distorsionarse */
}

.service-card {
  width: 100%;
  margin: 15px;
  border-radius: 6px;
  background-color: #ffffff;
  /* Un fondo ligero para diferenciar las tarjetas de servicio */
  border-radius: .5rem;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  display: flex;
  /* Usamos flexbox para alinear el contenido dentro de la tarjeta */
  flex-direction: column;
  /* Apila los elementos verticalmente */
  justify-content: space-between;
  /* Espacia el contenido dentro de la tarjeta */
  align-items: center;
  /* Centra el contenido horizontalmente */
  text-align: center;
  /* Centra el texto */
}

.service-card p {
  /* Esto usa todo el espacio sobrante antes del párrafo, empujándolo al final */
  margin: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;

  /* Propiedad más moderna (funciona similar a break-word) */
  overflow-wrap: break-word;
  font-size: 1.1rem;
}

/* Esto asegura que la imagen no sea ovalada al ser redonda */
.img-fluid.rounded {
  /* Mantiene la proporción de la imagen dentro de su contenedor */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Asegura que la imagen cubra el área sin deformarse */
  width: 100%;
  /* Asegura que la imagen use toda la anchura disponible */
  /* Aquí puedes poner un ancho máximo si lo prefieres, por ejemplo: */
  /* max-width: 150px; */
}


/* ------------------------------------------------------------- */
/* 💻 Estilos para Pantallas GRANDES (≥ 768px: md, lg, xl, xxl) */
/* ------------------------------------------------------------- */
.service-card h3 {
  font-size: 1.5rem;
  /* Tamaño normal del título, similar a fs-3 */
}

/* ---------------------------------------------------------------------- */
/* 📱 Estilos para Pantallas PEQUEÑAS (< 768px: sm, xs) */
/* ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* Reducir el tamaño del título en móviles */
  .service-card h3 {
    font-size: 0.85rem;
    /* Un poco más pequeño que el tamaño normal */
  }

  /* Reducir el tamaño del párrafo en móviles */
  .service-card p {
    font-size: 0.85rem;
    /* Tamaño ideal para que el texto quepa mejor */
  }
}

/* Ajuste para el color de los títulos si 'custom-dark-blue' no está definido */
.custom-dark-blue {
  color: #1b061bd8;
  /* Un azul oscuro de ejemplo */
}

.service-card,
.cardindex {
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.service-card:hover,
.cardindex:hover {
  transform: translateY(-5px);
}

.rounded-circle {
  width: 150px;
  height: 150px;
  object-fit: cover;
}



/*===================================================================================*/
/*==================== RECUADRO PARA VER IMAGEN EN GRANDE ===========================*/
/*===================================================================================*/

body {
  background-color: #f8f9fa;
}

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-5px);
}

.card-img-top {
  width: 100%;
  height: 200px;
  object-fit: cover;
  /* Asegura que la imagen cubra el área sin distorsionarse */
}

.modal-dialog {
  max-width: 95vw;
  /* Ajusta el ancho máximo del diálogo modal */
  height: auto;
  max-height: 95vh;
  /* Ajusta la altura máxima del diálogo modal */
  margin: 30px auto;
  /* Margen superior e inferior para centrar el modal verticalmente */
}

.modal-content {
  height: 100%;
  /* Asegura que el contenido del modal ocupe toda la altura disponible */
  display: flex;
  flex-direction: column;
}

.modal-body {
  text-align: center;
  overflow: auto;
  /* Permite el desplazamiento si el contenido es demasiado grande */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  /* Permite que el cuerpo del modal crezca para ocupar el espacio disponible */
}

.modal-body img {
  max-width: 95%;
  max-height: 90vh;
  display: block;
  /* Asegura que la imagen se muestre como un bloque */
  margin: 0 auto;
  /* Centra la imagen horizontalmente */
  object-fit: contain;
  /* Asegura que la imagen se ajuste sin distorsionarse */
}

.modal-header {
  flex-shrink: 0;
  /* Evita que el header se encoja (si lo tuvieras) */
}

.modal-footer {
  flex-shrink: 0;
  /* Evita que el footer se encoja */
}

.w-100 {
  width: 100%;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.pt-5 {
  padding-top: 3rem !important;
  /* Espacio superior */
}

.m-auto {
  margin: auto !important;
}


/*===================================================================================*/
/*==================== PARA QUE OCUPE EL 80% DEL TOTAL DE LA PAGINA ===========================*/
/*===================================================================================*/
.w-80 {
  width: 80% !important;
}

.h-95 {
  height: 95% !important;
}

@media (max-width: 767.98px) {
    .w-80 {
        width: 90% !important; /* ¡En móviles, se convierte en 100%! */
    }
}


/*===================================================================================*/
/*==================== CAMBIO DE COLORES EN BG Y LETRAS DE LA PAGINA ===========================*/
/*===================================================================================*/

body {
  background-color: hsl(300, 14%, 95%);
}


.text-primary {
  background-image: linear-gradient(to right, #4b0082, #9400d3);
  /* 2. Recortar el degradado para que SOLO se vea a través del texto: */
  -webkit-background-clip: text;
  /* Compatible con Chrome/Safari */
  background-clip: text;
  /* 3. Hacer el texto transparente para que se vea el degradado: */
  color: transparent !important;

  /* 4. Asegurar que las reglas anteriores de color sólido no se apliquen */
  -webkit-text-fill-color: transparent !important;
  font-weight: 500;
}

.bg-purple {
  background-color: hsla(300, 44%, 83%, 0.422);
}

.bg-degradado-morado {
  /* Define la dirección (to right = de izquierda a derecha)*/
  background-image: linear-gradient(to bottom, #000000ac, #691b9aba);
  background-color: transparent !important;
  /* Asegura que no haya un color sólido de fondo */
  box-shadow: none !important;
  border: none !important;
}

.btn-primary {
  background-image: linear-gradient(to bottom, #000000ac, #691b9aba) !important;
  background-color: transparent !important;
  /* Asegura que no haya un color sólido de fondo */
  box-shadow: none !important;
  border: none !important;
  margin-top: auto;
}

.btn-morado {
  background-color: #6f42c1 !important;
}

.text-con-fondo {
  /* Color de fondo: Elige el color que prefieras, por ejemplo, un morado */
  background-image: linear-gradient(to bottom, #000000ac, #691b9aba);

  /* Color del texto: Para que se vea sobre el fondo oscuro */
  color: white;

  /* Añadir un poco de espacio alrededor del texto (relleno) */
  padding: 10px 15px;

  /* Importante para que el fondo se adapte al tamaño del texto */
  display: inline-block;
}

#seccion-contacto {
    /* Le damos una posición relativa para que el formulario se ancle a esta sección */
    position: relative;
    
    /* APLICAMOS EL MISMO DEGRADADO QUE TIENE EL SVG */
    background-image: linear-gradient(to bottom, #691b9aba, #000000ac);
    background-color: transparent !important;
  /* Asegura que no haya un color sólido de fondo */
  box-shadow: none !important;
  border: none !important;
    /* Aseguramos que la sección tenga suficiente altura para el contenido */
    /* Puedes ajustar este valor según necesites */
    padding-bottom: 200px; 
}