@charset "UTF-8";
h1, .title-primary {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.2;
}

h2, h3, .subtitle {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.4;
}

h4, .heading {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.5;
}

.section-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body, p {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}

blockquote, .quote {
  font-family: "Lato", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  padding-left: 1rem;
  margin-left: 0;
}

.caption, .photo-credit {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
}

.button,
.btn {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  border-radius: 0.5rem;
  padding: 0.5rem 1.25rem;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.btn-primary,
.button-primary {
  background-color: #00528A;
  color: #ffffff;
  border: none;
}
.btn-primary:hover, .btn-primary:focus,
.button-primary:hover,
.button-primary:focus {
  background-color: #c0a437;
  color: #ffffff;
  border: none;
}

.btn-secondary,
.button-secondary {
  background-color: #B5C62D;
  color: #ffffff;
  border: none;
}
.btn-secondary:hover, .btn-secondary:focus,
.button-secondary:hover,
.button-secondary:focus {
  background-color: #c0a437;
  color: #ffffff;
}

.btn-light,
.button-light {
  background-color: #D3DBF0;
  color: #00528A;
  border: none;
}
.btn-light:hover, .btn-light:focus,
.button-light:hover,
.button-light:focus {
  background-color: #c0a437;
  color: #00528A;
}

.btn-accent,
.button-accent {
  background-color: #c0a437;
  color: #ffffff;
  border: none;
}
.btn-accent:hover, .btn-accent:focus,
.button-accent:hover,
.button-accent:focus {
  background-color: #B5C62D;
  color: #ffffff;
}

.site-header .navbar {
  background-color: #00528A;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.site-header .navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-header .navbar .navbar-brand img {
  max-height: 2.5em;
  width: auto;
}
.site-header .navbar .navbar-brand:hover {
  color: #c0a437;
}
.site-header .navbar .navbar-toggler {
  border-color: #00528A;
  box-shadow: none;
}
.site-header .navbar .navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 82, 138, 0.25);
}
.site-header .navbar .navbar-nav .nav-link {
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
  font-weight: 400;
  padding: 0.5rem 1rem;
  transition: color 0.2s ease;
}
.site-header .navbar .navbar-nav .nav-link:hover, .site-header .navbar .navbar-nav .nav-link.active {
  color: #c0a437;
  font-weight: 600;
}
.site-header .navbar .navbar-nav .dropdown-menu {
  /*
  background-color: $background-light;
  border: 1px solid $text-light;
  */
}
.site-header .navbar .navbar-nav .dropdown-menu .dropdown-item {
  color: #333333;
}
.site-header .navbar .navbar-nav .dropdown-menu .dropdown-item:hover {
  background-color: #c0a437;
  color: #ffffff;
}
.site-header .navbar form[role=search] .form-control {
  border-color: #D3DBF0;
  font-size: 0.875rem;
}
.site-header .navbar form[role=search] .btn {
  background-color: #00528A;
  color: #ffffff;
  font-size: 0.875rem;
}
.site-header .navbar form[role=search] .btn:hover {
  background-color: #c0a437;
}

/**
* Estilos del menú en tercer nivel
*/
/* Posiciona el submenú del tercer nivel (dropdown-submenu) a la derecha */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  position: absolute; /* OJO: debe quedar en absolute */
  top: 0;
  left: 100%;
  margin-top: -1px; /* ajusta un poquito para que quede “pegado” */
  z-index: 2000; /* para que no quede bajo otros elementos */
  display: none; /* Parte oculto, se mostrará on hover */
}

/* Cuando hago hover sobre el <li class="dropdown-submenu">, muestro su <ul> hij0 */
.dropdown-submenu:hover > .dropdown-menu {
  display: block !important;
}

/* ======================================
   MENU MÓVIL: Mostrar nivel 3 dentro del collapse
   ====================================== */
@media (max-width: 992px) {
  /* 1) Eliminamos la posición 'absolute' para nivel 3 y la convertimos en estática */
  .navbar-nav .dropdown-submenu > .dropdown-menu {
    position: static; /* ya no flota; ocupará todo el ancho del colapso */
    top: auto; /* dejamos los valores por defecto */
    left: auto;
    margin: 0; /* quitamos márgenes negativos */
    box-shadow: none; /* opcional: en móvil no realizamos sombra extra */
    border: none; /* opcional: quitamos borde si lo deseamos más simple */
    display: none; /* oculto por defecto: se mostrará via JS */
    padding-left: 1rem; /* indentamos un poco para que se note el anidado */
  }
  /* 2) Cuando el <li> tenga la clase “show” (se agregará por JS), forzamos el display */
  .navbar-nav .dropdown-submenu.show > .dropdown-menu {
    display: block !important;
  }
}
/* ===========================================================================
   OVERLAY DE CATEGORÍAS: ocupa 100 % ancho/alto y distribuye en columnas
   =========================================================================== */
/* 1) Contenedor principal del overlay */
#products-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999 !important; /* encima de todo */
  display: none; /* se mostrará vía JS */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* 2) Backdrop semitransparente */
#products-overlay .overlay-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

/* 3) Contenido blanco que queda encima del backdrop */
#products-overlay .overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-sizing: border-box;
  padding: 2rem 5%;
  overflow: hidden; /* no permitimos scroll en el contenedor principal */
  display: flex;
  flex-direction: column;
  z-index: 100000 !important; /* estará por encima del backdrop */
}

/* 4) Botón “Cerrar” */
#products-overlay .overlay-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: #333333;
  z-index: 100005 !important; /* siempre por encima de todo */
}

/* 5) Título del panel */
#products-overlay .overlay-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: #333333;
  z-index: 100001; /* igual que el botón: no quede oculto */
}

/* 6) Área que contendrá las categorías */
#products-overlay .overlay-categories {
  flex: 1; /* ocupa todo el espacio vertical restante */
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* Ajusta minmax(200px, 1fr) según tu gusto: cada columna mínimo 200px */
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 1rem;
  overflow: hidden; /* no scroll en contenedor; cada columna ajusta su altura */
}

/* 6.1) Nivel 1: lista contenedora de columnas */
#products-overlay .overlay-categories .level-1-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents; /* los <li> hijos se pintarían directamente en grid */
}

/* 6.2) Cada <li> de nivel 1 ocupa toda la altura de su “truco” grid-auto */
#products-overlay .overlay-categories .cat-level-1 {
  /* Se usa padding-bottom para separación vertical, pero no fijamos altura */
  padding-bottom: 1rem;
  display: block;
}

/* 6.3) Enlace nivel 1 */
#products-overlay .overlay-categories .cat-level-1 > a {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333333;
  text-decoration: none;
}

#products-overlay .overlay-categories .cat-level-1 > a:hover {
  color: #007bff;
}

/* 6.4) Nivel 2 */
#products-overlay .overlay-categories .level-2-cats {
  list-style: none;
  margin: 0.5rem 0 0 1rem; /* indentado a la derecha */
  padding: 0;
}

#products-overlay .overlay-categories .level-2-cats .cat-level-2 {
  margin-bottom: 0.5rem;
}

#products-overlay .overlay-categories .level-2-cats .cat-level-2 > a {
  font-size: 1rem;
  font-weight: 500;
  color: #555555;
  text-decoration: none;
}

#products-overlay .overlay-categories .level-2-cats .cat-level-2 > a:hover {
  color: #007bff;
}

/* 6.5) Nivel 3 */
#products-overlay .overlay-categories .level-3-cats {
  list-style: none;
  margin: 0.5rem 0 0 2rem; /* más a la derecha */
  padding: 0;
}

#products-overlay .overlay-categories .level-3-cats .cat-level-3 {
  margin-bottom: 0.4rem;
}

#products-overlay .overlay-categories .level-3-cats .cat-level-3 > a {
  font-size: 0.95rem;
  font-weight: 500;
  color: #777777;
  text-decoration: none;
}

#products-overlay .overlay-categories .level-3-cats .cat-level-3 > a:hover {
  color: #007bff;
}

/* 6.6) Nivel 4 */
#products-overlay .overlay-categories .level-4-cats {
  list-style: none;
  margin: 0.5rem 0 0 3rem; /* aún más a la derecha */
  padding: 0;
}

#products-overlay .overlay-categories .level-4-cats .cat-level-4 {
  margin-bottom: 0.3rem;
}

#products-overlay .overlay-categories .level-4-cats .cat-level-4 > a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #999999;
  text-decoration: none;
}

#products-overlay .overlay-categories .level-4-cats .cat-level-4 > a:hover {
  color: #007bff;
}

/* 7) “Buscar productos” (último item): ocupa todo el ancho de la columna */
#products-overlay .overlay-categories .cat-level-1.buscar-link {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e1e1e1;
  width: 100%;
  text-align: center;
}

#products-overlay .overlay-categories .cat-level-1.buscar-link > a {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background-color: #007bff;
  color: #ffffff;
  border-radius: 0.25rem;
  font-weight: 600;
  text-decoration: none;
}

#products-overlay .overlay-categories .cat-level-1.buscar-link > a:hover {
  background-color: #0056b3;
}

#icono-buscador-productos {
  max-width: 5%;
  min-width: 5%;
}

/* ===========================================================================
   8) VERSION MÓVIL (<= 767px)
   En móvil apilamos todo en una sola columna y habilitamos scroll vertical
   =========================================================================== */
@media (max-width: 767px) {
  /* 8.1) El overlay-categories pasa a un solo listado con scroll */
  #products-overlay .overlay-content {
    padding: 1rem 3%;
    position: relative;
  }
  #products-overlay .overlay-categories {
    display: block; /* listará todo en vertical */
    overflow-y: auto; /* permitimos scroll en móvil */
    height: calc(100% - 4rem); /* dejamos espacio para título y botón cerrar */
  }
  #products-overlay .overlay-categories .level-1-cats {
    display: block;
  }
  #products-overlay .overlay-categories .cat-level-1 {
    padding-bottom: 1.25rem;
  }
  /* Ajustamos fuentes para caber mejor */
  #products-overlay .overlay-categories .cat-level-1 > a {
    font-size: 1.2rem;
  }
  #products-overlay .overlay-categories .level-2-cats .cat-level-2 > a {
    font-size: 1rem;
  }
  #products-overlay .overlay-categories .level-3-cats .cat-level-3 > a {
    font-size: 0.95rem;
  }
  #products-overlay .overlay-categories .level-4-cats .cat-level-4 > a {
    font-size: 0.9rem;
  }
  #icono-buscador-productos {
    max-width: 20%;
    min-width: 10%;
  }
}
#btn-mi-cuenta {
  max-width: 15%;
  float: inline-end;
}

@media (max-width: 767px) {
  #btn-mi-cuenta {
    max-width: 40%;
  }
}
/* 2. Botón de buscador: posición absoluta abajo-izquierda */
#icono-buscador-productos {
  position: absolute;
  bottom: 20px; /* distancia desde la base del overlay */
  left: 20px; /* distancia desde el borde izquierdo */
  z-index: 10; /* por si hay otros elementos encima */
}

/* 3. Botón “Mi Cuenta”: justo encima o a la derecha del buscador, según diseño */
#btn-mi-cuenta {
  position: absolute;
  bottom: 20px; /* misma distancia desde abajo para alinear */
  left: 60px; /* separarlo 40px a la derecha (20px + ancho del ícono) */
  z-index: 10;
}

#icono-buscador-productos {
  bottom: 60px;
  left: 20px;
}

#btn-mi-cuenta {
  bottom: 20px;
  left: 20px;
}

/* 2) En móviles (<768px), los alineamos a la derecha y pegados entre sí */
@media (max-width: 767px) {
  /* Ocultamos cualquier margen horizontal que tuvieran */
  #icono-buscador-productos,
  #btn-mi-cuenta {
    left: auto !important; /* Anula el left de escritorio */
    right: 20px; /* Quedan a 20px del borde derecho */
    bottom: 20px; /* Mantenemos 20px del borde inferior */
  }
  /* Para que queden uno al lado del otro, ponemos “Mi Cuenta” ligeramente a la izquierda del buscador */
  #icono-buscador-productos {
    position: absolute;
    /* Este será el botón más cercano al borde derecho */
    right: 20px;
    bottom: 60px;
  }
  #btn-mi-cuenta {
    position: absolute;
    /* Lo desplazamos 40px o 50px a la izquierda del primero (ajusta según el ancho de tu icono) */
    right: 20px; /* 20px (margen) + 40px (ancho aproximado del icono) = 60px */
    bottom: 20px;
  }
}
.site-footer {
  background-color: #00528A;
  color: #ffffff;
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover {
  color: #c0a437;
}
.site-footer .footer-top-content {
  margin-bottom: 2rem;
}
.site-footer .footer-bottom-content {
  border-top: 1px solid #D3DBF0;
  padding-top: 1rem;
  font-size: 0.9rem;
  color: #D3DBF0;
  font-weight: 500;
}

/* ========================================================
 Estilos para el “Footer Menu” (lista anidada)
 ======================================================== */
/* 1) Título “Menú” */
.footer-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #ffffff;
}

/* 2) Contenedor UL principal (sin viñetas) */
.footer-menu {
  list-style: none; /* ya no se ven bullets */
  margin: 0;
  padding: 0;
}

/* 3) Nivel 1: cada <li> padre */
.footer-menu > li {
  margin-bottom: 0.75rem;
}

/* 4) Estilo enlace Nivel 1 */
.footer-menu > li > a {
  font-size: 1rem;
  font-weight: 500;
  color: #D3DBF0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-menu > li > a:hover {
  color: #ffffff;
}

/* 5) Nivel 2: sublista dentro de cada <li> de Nivel 1 */
.footer-menu > li > ul {
  list-style: none;
  margin: 0.5rem 0 0 1.5rem; /* abajo 0 primero, luego indentado 1.5rem */
  padding: 0;
}

/* 5.1) cada <li> nivel 2 */
.footer-menu > li > ul > li {
  margin-bottom: 0.5rem;
}

/* 5.2) Enlace nivel 2 */
.footer-menu > li > ul > li > a {
  font-size: 0.95rem;
  font-weight: 400;
  color: #D3DBF0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-menu > li > ul > li > a:hover {
  color: #ffffff;
}

/* 6) Nivel 3: otra sublista dentro de nivel 2 */
.footer-menu > li > ul > li > ul {
  list-style: none;
  margin: 0.5rem 0 0 3rem; /* más indentado hacia la derecha */
  padding: 0;
}

.footer-menu > li > ul > li > ul > li {
  margin-bottom: 0.4rem;
}

.footer-menu > li > ul > li > ul > li > a {
  font-size: 0.9rem;
  font-weight: 400;
  color: #D3DBF0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-menu > li > ul > li > ul > li > a:hover {
  color: #ffffff;
}

/* 7) Nivel 4: sublista dentro de nivel 3 */
.footer-menu > li > ul > li > ul > li > ul {
  list-style: none;
  margin: 0.5rem 0 0 4.5rem; /* incluso más a la derecha */
  padding: 0;
}

.footer-menu > li > ul > li > ul > li > ul > li {
  margin-bottom: 0.3rem;
}

.footer-menu > li > ul > li > ul > li > ul > li > a {
  font-size: 0.85rem;
  font-weight: 400;
  color: #D3DBF0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-menu > li > ul > li > ul > li > ul > li > a:hover {
  color: #ffffff;
}

/* 8) En el <li> de Productos, has asignado la clase “open-products-link” en WP
      para que el <a> dentro sea detectado por JS y abra el overlay */
.footer-menu li.open-products-link > a {
  /* Podemos añadirle un icono, un color o cambiar el cursor para indicar que hace algo especial */
  color: #D3DBF0; /* mismo color que nivel 1 */
  font-weight: 600;
}

.footer-menu li.open-products-link > a:hover {
  color: #ffffff;
  text-decoration: underline; /* por ejemplo, para diferenciarlo */
}

/* 9) Si quieres un pequeño espaciado extra entre niveles más profundo:
   simplemente ajusta los margin-left de cada ul anidado. */
/* ========================
   Versión móvil (<=576px)
   ======================== */
@media (max-width: 576px) {
  .footer-menu {
    padding-left: 0.5rem; /* un poco de margen a la izquierda si quieres */
  }
  .footer-menu > li > a {
    font-size: 0.95rem;
  }
  .footer-menu > li > ul > li > a {
    font-size: 0.9rem;
  }
  .footer-menu > li > ul > li > ul > li > a {
    font-size: 0.85rem;
  }
  .footer-menu > li > ul > li > ul > li > ul > li > a {
    font-size: 0.8rem;
  }
}
/* Estilos generales */
body {
  font-family: "Inter", sans-serif;
  background: #f8f9fa;
  color: #333;
}

/* Estilos del carrusel principal */
#carouselPrincipal .carousel-item {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#carouselPrincipal .slide-container {
  position: relative;
  height: 100%;
}

#carouselPrincipal .slide-img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

#carouselPrincipal .slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}

#carouselPrincipal .slide-content {
  position: absolute;
  bottom: 20%;
  left: 10%;
  right: 10%;
  text-align: center;
  color: white;
  z-index: 2;
}

#carouselPrincipal .slide-title {
  font-size: 3rem;
  font-weight: bold;
}

#carouselPrincipal .slide-sub {
  font-size: 1.25rem;
  margin: 1rem 0;
}

/* Estilos para íconos de color */
.wc-colores-disponibles h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.colores-swatch {
  display: flex;
  gap: 0.5rem;
}

.color-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid #ccc; /* Opcional: borde para que se distinga aún si el color es muy claro */
  display: inline-block;
  cursor: default;
}

/* Estilos para la galería de video */
/* Asegura que las filas no se solapen y tengan buen espacio */
.ctn-video-field img {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.ctn-video-field .button {
  background-color: #e74c3c;
  border-color: #c0392b;
  color: #fff;
}

.ctn-video-field .button:hover {
  background-color: #c0392b;
  border-color: #a93226;
}

/* -------------------------------
   15.x – Estilos mínimos para Metaboxes
   Características / Premios
---------------------------------*/
/* Asegura que el textarea ocupe ancho completo */
.ctn-feature-text,
.ctn-award-text {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}

/* Ajusta el estilo de la miniatura para que no se desborde */
.ctn-feature-thumb,
.ctn-award-thumb {
  border: 1px solid #ddd;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Ajuste al botón de “Eliminar” */
.ctn-remove-feature,
.ctn-remove-award {
  margin-top: 0.25rem;
  font-weight: bold;
}

/* Opcional: un pequeño espacio interior al contenedor de cada fila */
.ctn-feature-field,
.ctn-award-field {
  padding: 6px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
}/*# sourceMappingURL=main.css.map */