/* Estilos principales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F2F2F2; /* Fondo gris claro para contraste */
    color: #000000; /* Texto en negro */
}

header h1 {
    font-size: 2rem;
    color: #003DA5; 
}

main {
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

footer p {
    margin: 0;
    background-color: #003DA5; /* Fondo azul rey */
    color: #FFFFFF;
    text-align: center;
    padding: 10px 0;
}

/* ESTILOS MAPA */
#mapa iframe {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid #003DA5; /* Azul rey */
}

#mapa h2 {
    margin-bottom: 20px;
    color: #003DA5; /* Azul rey */
}

/* BARRA DE NAVEGACIÓN Y SEPARADORES */
.navbar-nav {
    display: flex;
    align-items: center;
}

.navbar-nav .divider {
    border-left: 1px solid #003DA5;
    height: 1.5em;
    margin: 0 10px;
    display: inline-block;
    vertical-align: middle;
}

/* ESTILOS BIENVENIDA */

#bienvenida {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url('../images/fondo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    height: 360px; 
    border: 2px solid #003DA5;
}

#bienvenida p {
    line-height: 1.2; /* Reduce el espacio entre líneas */
    margin-bottom: 4px; /* Ajusta o elimina espacio extra entre párrafos */
    font-weight: 500;
}

#bienvenida h1 {
    font-weight: 800; /* O prueba con 900 si la fuente lo admite */
}




/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.5rem; /* Ajustar tamaño de fuente en pantallas pequeñas */
    }
    main {
        padding: 10px; /* Reducir el padding para pantallas más pequeñas */
    }
    #bienvenida {
        padding: 50px 10px; /* Ajusta el padding para pantallas pequeñas */
    }
    .navbar-nav .divider {
        display: none; /* Oculta las líneas divisorias en pantallas pequeñas */
    }
}


/* --- Carrusel de servicios personalizado --- */
.servicio-slide {
  gap: 0;
  width: 100%;
}

.item-img {
  flex: 1 0 33.333%;
  padding: 0;
  overflow: visible;
}

.img-servicio {
  width: 90%; 
  height: auto; 
  object-fit: cover;
  border: 2px solid #003DA5;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  display: block;
  margin: 0;
}



.carousel-control-prev,
.carousel-control-next {
  width: auto; /* evita que ocupen mucho ancho */
  top: 50%;
  transform: translateY(-50%);
}

.carousel-control-prev {
  left: -30px; /* mueve la flecha más a la izquierda */
}

.carousel-control-next {
  right: -20px; /* mueve la flecha más a la derecha */
}


/* 1. El contenedor de cada slide solo tan ancho como su contenido */
.servicio-slide{
  width: auto;            /* en lugar de 100 % */
  justify-content: center;/* centra las .item-img entre sí          */
  gap: 1rem;              /* (opcional) separación entre imágenes   */
}

/* 2. Las cajas de imagen se ajustan al tamaño de la imagen, no a 33 % */
.item-img{
  flex: 0 0 auto;         /* deja de forzarlas al 33 % del ancho     */
}

/* (opcional) Limitar tamaño de cada imagen para pantallas grandes  */
.img-servicio{
  width: 240px;           /* o el que prefieras: 200‑260 px suele ir bien */
}



/* Apariencia normal */
.btn-enviar {
  background-color: #003DA5;   /* azul corporativo */
  border-color:   #003DA5;
  color: white;
}

/* Apariencia al pasar el cursor */
.btn-enviar:hover,
.btn-enviar:focus {            /* incluye el foco con el teclado */
  background-color: #D3E7F9;   /* azul muy claro deseado */
  border-color:   #D3E7F9;     /* mismo tono para que no “salte” el borde */
  color: #003DA5;              /* texto azul oscuro para buen contraste */
}

/* (Opcional) Apariencia al hacer clic y mientras se mantiene presionado */
.btn-enviar:active {
  background-color: #B4D4F3;   /* un punto más oscuro que el hover */
  border-color:   #B4D4F3;
  color: #003DA5;
}


/*xxxxxxxxxxxxxx*/

.item-img {
  overflow: visible; /* Permite que la imagen se escale sin recortar */
}

.img-servicio {
  transition: transform 0.3s ease; /* Transición suave para la escala */
  border: 2px solid #003DA5;      /* Ya tienes borde, lo mantenemos */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  display: block;
  margin: 0 auto;
}

.img-servicio:hover,
.img-servicio:focus-visible {
  transform: scale(1.05);          /* Escala suave al 105% */
  z-index: 10;                     /* Para que la imagen escalada quede encima */
  box-shadow: 0 6px 12px rgba(0,0,0,0.3); /* Sombra un poco más marcada */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}