/* ===================================================================
   SLIDER - SOLO PRINCIPAL (pagina de inicio)
   Se carga despues de style5.css, asi que gana en cascada.
   NO tocar: hero, colores, tipografia, fondo, galeria, pagina de envio.

   IMPORTANTE: este archivo es un parche MINIMO y DELIBERADAMENTE
   pequeno. Antes sobreescribia el alto del track, el object-fit y las
   transiciones -- y eso rompio el cambio de imagen (la foto saliente no
   terminaba de borrarse y el carrusel tardaba en pasar). El comportamiento
   original del slider queda intacto: aqui SOLO se arregla:

     1) el ancho (el ancestro .content lo angostaba a 497px en 1280px)
     2) los puntos indicadores, que el usuario no quiere
     3) el aspecto de los botones: circulares, sin borde
  =================================================================== */

/* --- 1. Liberar el cuello de botella que angostaba el carrusel ---
   .content era display:inline-block; max-width:600px; padding:30px.
   600 - 60 (padding) - 43 = 497px, y el carrusel no podia crecer. */
.content {
  max-width: none !important;
  display: block !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --- 2. Ancho del carrusel, sin tocar su alto ni su overflow ---
   style5.css define height:420px y overflow:hidden, y eso es lo que
   hace que las imagenes se encuadren bien. NO se sobreescribe aqui. */
.slider-container {
  width: 92% !important;
  max-width: 1100px !important;
}

/* --- 2b. La imagen debe LLENAR el marco (nada de barras blancas) ---
   CAUSA: fondo_tipografia.css pone, en su media query movil,
     img.slide { object-fit: contain !important; max-height:62vh !important;
                 height:auto !important }
   Como esa hoja se carga DESPUES de style5.css y usa !important, en
   celular gana `contain`: las fotos de 2296x1848 (ratio 1.24) y
   1488x1848 (ratio 0.81) NO llenan el marco 351x230 (ratio 1.53) y
   aparecen bandas blancas a los lados.
   `cover` recorta lo sobrante y deja la foto SIN bordes.
   Nota: solo se ajusta el object-fit; el alto del marco NO se toca,
   porque cambiarlo fue lo que rompio el slider antes. */
img.slide {
  object-fit: cover !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 100% !important;
}

/* --- 2c. Transicion: rapida y sin efecto rebote ---
   El usuario pidio criterio propio. 0.55s se sentia lento; con 9 fotos
   el ciclo se alargaba. 0.4s con ease-out se siente firme sin esperar. */
.slider {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* --- 3. Botones: circulares, sin borde, a los costados ---
   Este era el diseno original. Se neutraliza cualquier borde/sombra
   que trailgan style5.css o el <style> inline de index.html. */
.nav-btn {
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.55) !important;
  color: #7a4a58 !important;
  outline: none !important;
}
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #5c3340 !important;
}

@media (max-width: 768px) {
  .slider-container { width: 96% !important; }
}

/* --- 4. Sin puntos indicadores ---
   slider.js los sigue creando y actualizando; no se toca el JS (no se
   reescribe un archivo que funciona). Solo se ocultan por CSS. */
.indicadores,
.dot,
.slider-dots {
  display: none !important;
}