/* Estilos globales: colores, layout general y componentes compartidos */

:root{
  --bg: #FFFDFB;
  --text: #2F2F2F;
  --muted: #6B6B6B;
  --accent: #E9C46A;
  --accent-2: #F4A261;
  --border: #eee;
}

body{
  background: var(--bg);
  color: var(--text);
}

.section{
  padding: 3rem 0;
}

/* Navbar clara, minimalista */
.navbar{
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.hero-title{
  font-weight: 700;
}

/* Botón cálido */
.btn-soft{
  background: var(--accent);
  border: none;
  color: var(--text);
}

.btn-soft:hover{
  background: var(--accent-2);
  color: #fff;
}

footer{
  border-top: 1px solid var(--border);
  color: var(--muted);
}
/* =========================================
   ESTILOS DEL SLIDER (CARRUSEL)
   ========================================= */

/* El marco principal del slider */
.slider-viewport {
    width: 100%;             /* Ocupa el ancho disponible */
    max-width: 100%;         /* Se adapta al contenedor de Bootstrap */
    height: 600px;           /* Altura fija del carrusel (ajusta si quieres) */
    margin: 0 auto;          /* Centrado */
    overflow: hidden;        /* Oculta las imágenes que están "esperando" a los lados */
    position: relative;      /* Necesario para posicionar elementos dentro */
    
    /* Mantenemos tus estilos de borde si lo deseas, aunque ya los tienes en HTML */
    background-color: var(--border); /* Color de fondo de carga usando tu variable */
}

/* El riel que se mueve (la cinta transportadora) */
.slider-track {
    display: flex;           /* Pone las imágenes en fila horizontal */
    width: 100%;             
    height: 100%;
    transition: transform 0.5s ease-in-out; /* Suaviza el movimiento */
}

/* Cada diapositiva individual */
.slide {
    min-width: 100%;         /* Cada slide es del tamaño completo del visor */
    height: 100%;
    flex-shrink: 0;          /* Evita que se encojan */
}

/* La imagen dentro del slide */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* Recorta la imagen para llenar el cuadro sin deformarse */
    display: block;          /* Elimina espacios extraños abajo */
}

.carousel-img-wrap {
    height: 60vh; /* Ocupará el 60% de la altura de la pantalla */
}

.carousel-img-wrap img {
    height: 100%;
    object-fit: cover;
}