/* demo.css - Estilos personalizados para demo.html */
html, body, * {
  font-family: "Inter", sans-serif !important;
}
/* Estilo básico para la galería */
figure {
  margin: 0;
}

/* Cambié position absolute a relative para que #gallery quede dentro del section amarillo */
#gallery {
    max-width: 900px;
    margin: auto;
    overflow: hidden;
    position: relative; /* importante para que se ajuste dentro del padre */
}

/* Contenedor flex para el slider */
.gallery-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.gallery-item {
  position: relative;
  min-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  height: 600px; /* Altura fija para todas las imágenes (ajústalo según lo que necesites) */
}

.gallery-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px;
  background: rgba(0, 0, 0, 0.5); /* fondo semitransparente */
  color: white;
  font-size: 16px;
  text-align: center;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-sizing: border-box;
}

/* Imágenes con bordes redondeados y que ocupen todo el contenedor */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Corta o ajusta la imagen para que llene el espacio sin deformarse */
  border-radius: 12px;
  display: block;
}

/* Navegación de la galería */
/* Cambié position absolute a relative para evitar que los botones se salgan del section amarillo */
.gallery-navigation {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  transform: translateY(-50%); /* Centra verticalmente */
  pointer-events: none; /* Deja pasar clics excepto a botones */
}

.nav-button {
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  padding: 12px 18px;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all; /* Permite clic solo en el botón */
  transition: background-color 0.3s;
}

.nav-button:hover {
  background-color: #5796ff;
}

.nav-button > span {
  font-size: 30px;
}


/* Footer personalizado */
.footer-logo {
  height: 48px;
  margin-bottom: 1rem;
}
.footer-desc {
  color: #a0aec0;
  font-size: 0.95rem;
}
.footer-link:hover {
  color: #60a5fa;
}

/* Tarjetas de contacto */
.contact-card {
  transition: box-shadow 0.2s;
}
.contact-card:hover {
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.12);
}

/* Formulario de contacto */
.contact-form input,
.contact-form textarea {
  transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #2563eb;
  outline: none;
}

/* Mapa responsivo */
.map-container {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
}

/* Otros estilos personalizados aquí... */

.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.2s, background 0.2s;
}
.nav-scrolled {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
  background: #fff;
}

.servicio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
  will-change: transform, box-shadow;
}
.servicio-btn:hover, .servicio-btn:focus {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 8px 24px 0 rgba(37,99,235,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);
  z-index: 1;
}
.servicio-btn svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.3em;
  flex-shrink: 0;
}

.servicio-card {
  transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
  will-change: transform, box-shadow;
}
.servicio-card:hover, .servicio-card:focus {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 32px 0 rgba(37,99,235,0.12), 0 2px 8px 0 rgba(0,0,0,0.10);
  z-index: 1;
}

:root {
  --color-principal: #5796ff;
  --color-secundario: #fffe41;
}

.text-blue-600, .text-blue-700, .text-blue-500, .text-blue-400 {
  color: var(--color-principal) !important;
}
.bg-blue-600, .bg-blue-700, .bg-blue-500, .bg-blue-400 {
  background-color: var(--color-principal) !important;
}
.border-blue-600, .border-blue-700, .border-blue-500, .border-blue-400 {
  border-color: var(--color-principal) !important;
}

.text-yellow-400, .text-yellow-500, .text-yellow-600 {
  color: var(--color-secundario) !important;
}
.bg-yellow-400, .bg-yellow-500, .bg-yellow-600 {
  background-color: var(--color-secundario) !important;
}
.border-yellow-400, .border-yellow-500, .border-yellow-600 {
  border-color: var(--color-secundario) !important;
}

/* Botones de filtro y primarios */
.servicio-btn.bg-blue-600 {
  background-color: var(--color-principal) !important;
}
.servicio-btn.bg-blue-600:hover, .servicio-btn.bg-blue-600:focus {
  background-color: #397be6 !important;
}

.servicio-btn.bg-white.text-blue-600 {
  color: var(--color-principal) !important;
  border: 1.5px solid var(--color-principal);
  background: #fff !important;
}
.servicio-btn.bg-white.text-blue-600:hover, .servicio-btn.bg-white.text-blue-600:focus {
  background: var(--color-secundario) !important;
  color: #222 !important;
  border-color: var(--color-secundario) !important;
}

/* Botón de enviar y suscribirse */
.bg-blue-600.text-white {
  background-color: var(--color-principal) !important;
  color: #fff !important;
}
.bg-blue-600.text-white:hover, .bg-blue-600.text-white:focus {
  background-color: #397be6 !important;
}

/* Acentos secundarios */
.acento-secundario {
  color: var(--color-secundario) !important;
}
.bg-acento-secundario {
  background: var(--color-secundario) !important;
}

/* Otros detalles visuales */
.footer-link:hover {
  color: var(--color-principal) !important;
}

.nav-animacion {
  position: relative;
  display: inline-block;
  color: #222;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.nav-animacion::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #5796ff 60%, #fffe41 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}

.nav-animacion:hover,
.nav-animacion:focus {
  color: #5796ff;
}

.nav-animacion:hover::after,
.nav-animacion:focus::after {
  transform: scaleX(1);
}

h6.text-blue-600.font-semibold {
  font-size: 1.25rem;
}

footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  width: 100%;
  position: relative;
  flex-shrink: 0;
}
html, body {
  height: 100%;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
}
main {
  flex: 1 0 auto;
  width: 100%;
} 

* {
  box-sizing: border-box;
}

/* Slideshow container */
.slideshow-container {
  width: 800px;              /* Tamaño fijo */
  height: 600px;             /* Tamaño fijo */
  position: relative;
  margin: auto;
  overflow: hidden;          /* Oculta cualquier desbordamiento */
  background-color: #fff;    /* Fondo opcional para evitar fondo transparente */
  border-radius: 10px;       /* Opcional: bordes redondeados */
}

/* Hide the images by default */
.mySlides {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* Asegurar que las imágenes llenen el espacio correctamente */
.mySlides img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* Esto mantiene proporción y recorta si es necesario */
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.3); /* Añadido para visibilidad */
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4); /* Fondo semitransparente para legibilidad */
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4); /* Fondo semitransparente */
  border-radius: 4px;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 10px;
  scroll-behavior: smooth;
}

.scroll-container img {
  width: 600px;
  height: 400px;
  object-fit: cover;      /* Ajusta la imagen sin deformarla, recortando si es necesario */
  flex-shrink: 0;
  border-radius: 8px;
}






/* Fondo del modal */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5); /* Fondo semitransparente */
}

/* Contenido del modal */
.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  width: 60%;
  max-width: 600px;
  position: relative;
}

/* Botón de cerrar */
.close {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover {
  color: red;
}