@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

:root {
  --color-principal: #000000;
  --color-hover: #868686;
  --color-fondo: #ffffff;
  --fuente-principal: "Titillium Web", sans-serif;
  --fuente-secundaria: "Anton", sans-serif;
}

/* Reset y base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Asegurar que las imágenes mantengan su proporción por defecto */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente-principal);
  background-color: var(--color-fondo);
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* evitar scroll horizontal */
}

/* Altura de compensación del body para el navbar fijo */
body { padding-top: 80px; }

main {
  padding: 2rem;
}

/* Tipografía */
p { font-size: 14px; line-height: 1.6; color: #6c7279; }
h1 { font-size: 3rem; color: #2d3033; }
h2 { font-size: 40px; color: #2d3033; }
h3 { font-size: 40px; color: #2d3033; font-weight: 300; }
h4 { font-size: 22px; color: #000; font-weight: 500; }
h5 { font-size: 14px; color: #2d3033; text-transform: uppercase; font-weight: 700; }
h1,h2,h3,h4,h5,h6 { font-family: var(--fuente-secundaria); letter-spacing: .3rem; }
.h6 { letter-spacing: normal; }

/* Botones */
.btn {
  background-color: transparent;
  color: #050304;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid #000;
  border-radius: 2px;
  display: inline-block;
  text-transform: uppercase;
}
.btn:hover, .btn:focus { background-color: #0b0909; color: #fff; }
.btn-large { padding: 15px 40px; }


/* --------------------- Ajustes globales de espaciado y layout --------------------- */
/* Variables para controlar espaciados fácilmente */
:root {
  --site-max-width: 1200px;
  --page-gutter: clamp(1rem, 2.5vw, 2rem);
  --section-vertical: clamp(1.2rem, 3.5vw, 4rem);
  --section-vertical-sm: clamp(0.8rem, 2.5vw, 2rem);
  --navbar-height: 80px; /* mantener sincronizado con body padding-top */
  --carousel-vh-desktop: calc(var(--vh, 1vh) * 90);
  --carousel-vh-mobile: calc(var(--vh, 1vh) * 50);
}

/* Box sizing consistente */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* Contenedor central */
.site-container {
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* Secciones uniformes */
.section {
  padding-top: var(--section-vertical);
  padding-bottom: var(--section-vertical);
}

/* Secciones pequeñas (hero / promos más compactas) */
.section--sm {
  padding-top: var(--section-vertical-sm);
  padding-bottom: var(--section-vertical-sm);
}

/* Ajuste del body padding-top según navbar */
body {
  padding-top: var(--navbar-height);
}

/* Flex/grid helpers: usar gap en lugar de margins en hijos */
.row-gap {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Ajustes para atajos/blocks (three-container, two-container, one-img-container) */
.three-container, .two-container, .one-img-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch; /* que los items crezcan de forma uniforme */
}

/* Cada item dentro de contenedores se comporta responsive */
.three-container > *, .two-container > *, .one-img-container > * {
  flex: 1 1 300px; /* crece, pero con base mínima */
  min-width: 220px;
}

/* Específico: one-img-container (hero cards) */
.one-img-container {
  position: relative;
  width: 100%;
  display: block;
  /* no forzar height; usar min-height para evitar colapsos */
  min-height: clamp(220px, 30vh, 420px);
  overflow: hidden;
}
/* Nuevo: Efecto Zoom-in suave al hacer hover sobre la imagen */
.one-img-container:hover img {
    transform: scale(1.05); /* Aumenta el tamaño de la imagen en un 5% */
}
/* Imagenes dentro de estos contenedores: mantener proporción y centrar */
.one-img-container img,
.one-img-container .bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Titulo dentro del bloque: centrado y responsivo */
.one-img-container .title {
  position: absolute;
  left: 50%;
  top: 85%;
  transform: translate(-50%, -50%);
  z-index: 4;
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 9px rgba(0, 0, 0, 0.6);
  font-size: clamp(1.6rem, 6vw, 3rem);
  pointer-events: none;
  white-space: nowrap;
}

/* Carousel: asegurar que no rompa layout de flow y usar min-height en mobile */
#main-carousel {
  width: 100%;
  min-height: var(--carousel-vh-mobile);
}

/* Evitar uso forzado de height:100% que pueda estirar imágenes en some contexts */
.carousel .carousel-item {
  position: relative;
  /* permitir que bootstrap controle visibilidad; no forzar display bloqueo global fuera del scope mobile */
  overflow: hidden;
}

/* Móvil — ajustar paddings y tamaños para que los bloques no colapsen */
@media (max-width: 768px) {
  :root {
    --navbar-height: 55px;
  }

  .site-container {
    padding-left: clamp(0.75rem, 4vw, 1rem);
    padding-right: clamp(0.75rem, 4vw, 1rem);
  }

  .section {
    padding-top: var(--section-vertical-sm);
    padding-bottom: var(--section-vertical-sm);
  }

  /* Los contenedores apilan verticalmente y cada item toma 100% */
  .three-container, .two-container {
    flex-direction: column;
    gap: 0.75rem;
  }

  .three-container > *, .two-container > * {
    flex: 1 1 100%;
    min-width: 100%;
  }

  /* Carousel mobile: usar min-height y asegurar que la img ocupe sin distorsión */
  .carousel .carousel-item {
    min-height: var(--carousel-vh-mobile);
  }

  .carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Reducir tamaño de títulos en bloques */
  .one-img-container .title {
    font-size: clamp(1.2rem, 7vw, 2rem);
  }
}

/* Pequeñas utilidades para evitar elementos amontonados */
.u-vertical-separator { margin-top: 1rem; margin-bottom: 1rem; }
.u-no-margin { margin: 0 !important; }
.u-no-padding { padding: 0 !important; }

/* --- MODIFICACIONES PARA SECCIONES DE ATAJOS (RECETA/SOL, ÓPTICAS/EQUIPO MITO) --- */

/* Contenedor principal de atajos: habilita Flexbox, define altura y espaciado */
.three-container {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas más pequeñas */
  justify-content: space-between; /* Espacia los dos contenedores */
  gap: 2%; /* Espacio entre los dos contenedores (1% de cada lado) */
  margin: 2rem 0; /* Espaciado entre el carrusel y entre las secciones */
  height: 400px; /* Altura fija para que no sea "enorme" */
}

/* Cada elemento de atajo: define el ancho para que quepa la mitad */
.two-container {
  width: 49%; /* Un poco menos del 50% para dejar espacio para el gap */
  height: 100%;
}

/* Contenedor de la imagen: asegura que ocupe todo el espacio de su padre */
.one-img-container {
  height: 100%;
  position: relative; 
  overflow: hidden; 
}

/* La imagen debe cubrir el contenedor */
.one-img-container img {
  height: 100%; 
  width: 100%; 
  object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsionarse */
  transition: transform .3s ease; 
}

/* Títulos dentro de los atajos */
.one-img-container .title {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; /* Por defecto blanco */
    text-transform: uppercase;
    font-family: var(--fuente-secundaria);
    font-weight: 700;
    text-align: center;
    z-index: 2;
    font-size: clamp(2rem, 6vw, 6rem); /* Responsive font size */
    letter-spacing: .6rem;
     text-shadow: 0 4px 9px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    white-space: nowrap;
}

/* Clase específica para el título "ÓPTICAS" si debe ser negro */
.one-img-container .title.black {
    color: #000; /* Color negro para este título */
    text-shadow: none; /* Sin sombra para que contraste mejor */
}

/* --- FIN: MODIFICACIONES PARA SECCIONES DE ATAJOS --- */


/* Navbar (Se mantienen las correcciones anteriores) */
.navbar {
  display: flex;
  align-items: center;
  background-color: #fff;
  /*padding: 0.7rem 2rem;*/
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  font-weight: bold;
  /* height: 80px;  */
}
.navbar-brand-container { 
    display: inline-block; 
    height: 70px; 
    width: auto; 
    /* margin-right: 2rem; */
}
.navbar-brand-img { object-fit: cover; height: 100%; }
.navbar-nav-container { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    width: auto; 
    flex-grow: 1;
    margin-right: 1rem;
    justify-content: flex-end;
}
.navbar-nav-pages { list-style: none; display: flex; gap: 1.5rem; margin: 0 2rem 0 0; }
.nav-item { list-style: none; }
.nav-link { color: #000; text-decoration: none; transition: color .3s ease; }
.nav-link:hover { color: var(--color-hover); }
.navbar-nav-media { list-style: none; display: flex; gap: 1rem; margin-bottom: 0%; }
.nav-toggle { background: none; border: none; color: #000; font-size: 2rem; cursor: pointer; z-index: 1000; visibility: hidden; }
.navbar-nav-container.active { display:flex; flex-direction: column; align-items:center; justify-content:center; position:fixed; top:0; left:50%; transform:translateX(-50%); background:#fff; padding:1rem; border-radius:5px; z-index:999;margin-bottom: 0px !important; }

/* Carousel (Se mantienen los estilos) */
:root {
  --carousel-vh-desktop: calc(var(--vh, 1vh) * 90);
  --carousel-vh-mobile: calc(var(--vh, 1vh) * 60);
}
#main-carousel { width:100%; margin:0 auto; /*height: var(--carousel-vh-desktop);*/ }
.carousel-inner { height:100%; width:100%; }
.custom-carousel .carousel-item { height: var(--carousel-vh-desktop); width:100%; display:flex; align-items:center; justify-content:center; }
.carousel .carousel-item, .custom-carousel .carousel-item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.carousel-caption-custom {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 6px 12px rgba(0,0,0,0.6);
  padding: 0 1rem;
}
.carousel-caption-custom h2 {
  font-family: var(--fuente-secundaria);
  font-size: clamp(1.8rem, 6vw, 5rem);
  letter-spacing: .5rem;
  margin: 0;
  pointer-events: none;
}
.carousel-item { position: relative; overflow: hidden; }
.carousel .carousel-item img, .custom-carousel .carousel-item img { max-height: 100%; height: auto; }
#carouselImages { height: 60vh; }
#carouselImages { height: calc(var(--vh,1vh) * 60); }
#carouselImages img { width: 100%; height: calc(var(--vh,1vh) * 60); object-fit: contain; padding: .3rem; display:block; }
.mitos-carousel .carousel-inner img { height: auto; object-fit: contain; }
.carousel-item.object-fit-fallback { background-color: #000; }
.carousel-item.object-fit-fallback img { display: none !important; }
html.no-objectfit .carousel-item {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
html.no-objectfit .carousel-item .sr-only-fallback {
  display: block;
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(0,0,0,.4);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}
.carousel-control-prev-icon, .carousel-control-next-icon { background-color: rgba(0,0,0,.5); border-radius:50%; }
.carousel-control-prev, .carousel-control-next { width:5%; }

/* Productos / listados (Se mantienen los estilos) */
.container-list { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; padding:20px; }
.container-list-item { flex:1 1 calc(33.333% - 1.5rem); max-width:300px; box-sizing:border-box; list-style:none; }
.glasses-container { border:1.5px solid #6c757d; padding:20px; text-align:center; background:#fff; border-radius:8px; transition:transform .3s ease; }
.container-list-item a { text-decoration:none; color:inherit; }
.glasses-container:hover { transform:scale(1.05); }
.glasses-img { width:80%; height:auto; border-radius:5px; object-fit:cover; margin:0 auto; }
.glasses-title { font-size:1.2rem; font-weight:bold; margin:10px 0; color:#333; }
.glasses-material { font-size:.9rem; color:#777; margin-bottom:10px; }
.list-img-colors { display:flex; list-style:none; padding:0; justify-content:center; margin-top:10px; }
.list-img-colors img { width:64px; height:64px; object-fit:cover; border-radius:50%; transition:transform .3s ease; }
.list-img-colors img:hover { transform:scale(1.2); }

/* Detalle producto (Se mantienen los estilos) */
#product-detail { padding:1rem; }
.mt-3 { margin-top:1rem; display:flex; justify-content:space-evenly; }
.thumbnail-img { max-width:30%; width:max-content; height:auto; border:2px solid transparent; transition:border-color .3s ease; }
.thumbnail-img.active { border-color:#333; }

/* Sección SOMOS ("Tu mirada vale") */
.somos-container { 
    display:flex; 
    background:#fff; 
    width:100%; 
    padding:1rem 2.5rem; 
    justify-content:center; 
    flex-direction:column; 
    align-items:center; 
}
.somos-container img { width:100%; }
.somos-frase { color:#000; font-size: 3rem; font-family:var(--fuente-principal); } /* Tamaño de fuente ajustado */

/* Footer (Se mantienen los estilos) */
footer { position:relative; left:0; right:0; bottom:0; }
.footer-container-social .footer-container-img img { max-width:200px; height:auto; }
.footer-container-media, .footer-container-img { display:flex; justify-content:center; }
.footer-container-social .navbar-nav-media { display:flex; justify-content:flex-start; gap:1rem; }
.footer-container-social .navbar-nav-media .nav-link { font-size:1.5rem; color:#fff; width:25%; }
.footer-container-links { display:flex; gap:1rem;justify-content: center;align-items: center; }
.navbar-nav-links { display:flex; flex-direction:column; gap:.5rem; }
.footer .nav-link { color:#fff; text-decoration:none; }
.footer .nav-link:hover { color:#ccc; }

/* Sección Encontranos (Se mantienen los estilos) */
.container-opticas { display:flex; flex-direction:column; width:60vw; margin:0 auto 2rem; }
.scrollable-list { max-height:70vh; overflow-y:auto; border:1px solid #ddd; padding:1rem; display:flex; flex-direction:column; width:100%; margin-left:5rem; }
.scrollable-list-item { padding:10px; border-bottom:1px solid #ddd; cursor:pointer; transition:background-color .3s ease; }
.scrollable-list-item:hover { background:#f1f1f1; }
.scrollable-list-item a { text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.container-opticas-title { display:flex; flex-direction:row; justify-content:space-between; margin:1rem; }
.dropdown { position:relative; display:inline-block; }
.dropdown-toggle, .item-btn { background:transparent; color:#050304; font-size:1rem; font-weight:600; border:1px solid #000; border-radius:2px; text-transform:uppercase; padding:10px 20px; cursor:pointer; }
.dropdown-toggle:hover, .item-btn:hover { background:#0b0909; color:#fff; }
#localidades { overflow-y:auto; }
.dropdown-menu { display:none; position:absolute; background:#fff; min-width:200px; box-shadow:0 8px 16px rgba(0,0,0,.2); z-index:1; max-height:150px; border:1px solid #ddd; border-radius:4px; }
.dropdown-menu.show { display:block; }
.soporte-section-buttons { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }

/* Disclaimer (Se mantienen los estilos) */
.disclaimer { display:flex; flex-direction:column; justify-content:center; align-items:center; margin:.6rem; }
.disclaimer .disclaimer-container-link { text-decoration:none; display:flex; gap:.2rem; }

/* Wapp icon - icono flotante (Se mantienen los estilos) */
.wapp-icon .nav-link { display:none; }
@media (max-width:768px) { .wapp-icon .nav-link { display:block; position:fixed; bottom:20px; right:20px; font-size:3.3rem; z-index:1000; color:black; text-decoration:none; margin:2rem; } .wapp-icon .nav-link:hover { color:gray; transform:scale(1.1); } }

/* Media queries responsivos */
@media (max-width:768px) {
  main { padding:1rem; }
  body { padding-top: 55px; }
  .navbar { 
    height: 55px; 
    padding:0 1rem; 
    font-size:1.5em; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
  }
  .navbar-brand-container { 
    height: 40px; 
    width:auto; 
    margin-left:0; 
  }
  .navbar-brand-img { height:40px; width:auto; }
  .nav-toggle { display:flex; visibility:visible; font-size:1.6rem; background:none; border:none; color:#000; align-items:center; justify-content:center; padding:0.3rem; }
  .nav-toggle i { font-size:1.6rem; }
  .navbar-nav-container { display:none; width:100%; height:100%; background:#fff; }
  .navbar-nav-container.active { display:flex; flex-direction:column; }
  .navbar-nav-pages { flex-direction:column; align-items:center; gap:1rem; margin:0; }
  .navbar-nav-media { margin-top:1rem; }

  /* En móvil, los contenedores se apilan uno debajo del otro */
  .three-container { flex-direction:column; height:auto; gap:1rem; margin: 1rem 0; } /* Ajuste de gap y margin */
  .two-container { width:100%; height:auto; margin-bottom:0; } /* Eliminar margin-bottom redundante */
  .one-img-container .title { font-size: clamp(1.4rem, 10vw, 3rem); letter-spacing: .3rem; } /* Ajustar font-size en mobile */

  .somos-container { height:auto; padding:1rem; }
  .somos-frase { font-size:2rem; }
  .footer-container-social { text-align:center; margin-bottom:2rem; }
  .footer-container-social .footer-container-img img { max-width:80px; }
  .container-opticas { width:90vw; margin-bottom:1rem; }
  .scrollable-list { max-height:50vh; padding:.5rem; margin-top:1rem; margin-left:0; }
  .container-list-item { flex: 1 1 100%; max-width: none; }
  .container-list { padding: 1rem; }
  #main-carousel { height: var(--carousel-vh-mobile); }
  .custom-carousel .carousel-item { height: var(--carousel-vh-mobile); }
  .carousel-caption-custom h2 { font-size: clamp(1.4rem, 10vw, 2.4rem); letter-spacing: .2rem; }

  /* ---- NUEVAS REGLAS (sobrescriben reglas anteriores y evitan deformaciones) ---- */
  /* asegurar que el .carousel-item tenga overflow oculto y altura fija por variable */
  .carousel .carousel-item {
    overflow: hidden;
    height: var(--carousel-vh-mobile);
    display: block;
  }

  /* forzar que la <img> ocupe el contenedor sin estirarse: crop con object-fit: cover */
  .carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* recorta para llenar sin distorsión */
    object-position: center;  /* centra el crop en la imagen */
    display: block;
  }

  /* Si se desea un fallback visual (overlay oscuro) para mejorar lectura de captions */
  .carousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.15));
    pointer-events: none;
  }
  /* ---- fin nuevas reglas ---- */
}

@media (min-width:769px) and (max-width:1200px) {
  .navbar { padding:1rem 2.5rem; font-size:1.1em; box-shadow:0 2px 4px rgba(0,0,0,.1); position:fixed; }
  .navbar-brand-container { width:25%; }
  .navbar-brand-img { height:60px; width:auto; }
  .navbar-nav-pages { gap:2rem; }
  /* Se eliminan las alturas conflictivas de .three-container y .one-img-container para usar las globales */

  .one-img-container img { height:100%; width:100%; object-fit:cover; transition:transform .3s ease; }

  /* Hero/atajo: mostrar imagen en cover y centrar título encima */
  .one-img-container .title {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-transform: uppercase;
    font-family: var(--fuente-secundaria);
    font-weight: 700;
    text-align: center;
    z-index: 2;
    /* responsive title size */
    font-size: clamp(2rem, 6vw, 6rem);
    letter-spacing: .6rem;
     text-shadow: 0 4px 9px rgba(0, 0, 0, 0.6);
    pointer-events: none;
  white-space: nowrap;
  }

  /* Ajustes para dispositivos pequeños: reducir altura y tamaño del título */
  @media (max-width:768px) {
    .one-img-container { height: calc(var(--vh,1vh) * 35); }
    .one-img-container .title { font-size: clamp(1.4rem, 10vw, 3rem); letter-spacing: .3rem; }
  }
}

@media (min-width:1201px) and (max-width:1500px) {
  .navbar { padding:1rem 3rem; font-size:1.2em; }
  .navbar-brand-container { width:20%; }
  .navbar-nav-pages { gap:3rem; }
  
}

@media (min-width:1501px) { /* estilos para pantallas extra grandes si fuera necesario */ }

/* Scrollbar (Se mantienen los estilos) */
::-webkit-scrollbar { width:0.7em; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb { background-color: darkgrey; border-radius:20px; }

@media (max-width:768px) {

  /* asegurar que el carrusel tenga clipping y posición correcta */
  .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* devolver el comportamiento esperado de Bootstrapping: items escondidos por defecto */
  .carousel .carousel-item {
    position: relative;
    display: none; /* Bootstrap añade .active para mostrar */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* mostrar los estados que Bootstrap usa durante la transición */
  .carousel .carousel-item.active,
  .carousel .carousel-item.carousel-item-next,
  .carousel .carousel-item.carousel-item-prev {
    display: block;
  }

  /* imágenes llenan el contenedor sin deformarse (se recortan) */
  .carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* suavizar animaciones y evitar flicker */
  .carousel .carousel-item,
  .carousel .carousel-item img {
    will-change: transform, opacity;
    transition: transform .6s ease, opacity .6s ease;
  }

  /* caption encima de la imagen */
  .carousel .carousel-caption-custom {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
  }
}
.container-title-filter {
    display: flex;
    flex-direction: column;
    align-items: center;

  }