/* Paleta de colores */
:root {
  --azul-intenso: #005EB8; /* Pantone 2935 C */
  --azul-claro: #00B2E3;   /* Pantone 298 C */
  --rojo: #FE3B1F;         /* Bright Red C */
  --amarillo: #FFD600;     /* Yellow 012 C */
  --verde: #43B02A;        /* Pantone 361 C */
  --azul-oscuro: #1E2857;  /* Pantone 282 C */
}

/* Base responsiva de tipografía */
html {
  font-size: 100%; /* 16px por defecto */
}

/* Typography general con unidades dinámicas */
body, ul, li, p, a, label, input, div {
  font-family: "Libre Clarendon Normal 110 Medium", serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height: 1.6;
}

/* Encabezados responsivos (clamp: mínimo, dinámico, máximo) */
h1, .h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.2rem, 1.8rem + 2vw, 3.5rem) !important;
  font-weight: 300 !important;
  line-height: 1.2;
}

h2, .h2 {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.5rem) !important;
  font-weight: 300;
  line-height: 1.3;
}

h3, .h3 {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem) !important;
  line-height: 1.4;
}

/***** Top menu *****/
.navbar { background: #fff; transition: all .6s; backface-visibility: hidden; }
.navbar.navbar-no-bg { background: rgba(255, 255, 255, 0.8); }

.navbar-light .navbar-nav { font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.1rem); text-transform: uppercase; }
.navbar-light .navbar-nav .nav-link { color: #fff; border: 0; }
.navbar-light .navbar-nav .nav-link:hover { color: #00b8ff; text-decoration: solid; border-color: #000;}
.navbar-light .navbar-nav .nav-link:focus { color: #00b8ff; outline: 0; }

/***** Top content *****/
.top-content { width: 100%; padding: 0; }
.top-content .carousel-item { height: 100vh; min-height: 400px; }
.top-content .carousel-item img { height: 100%; object-fit: cover; }
.top-content .carousel-control-prev,
.top-content .carousel-control-next { border-bottom: 0; }

@media (min-width: 768px) {
  .navbar-toggler { order: 0; }
  .navbar-brand { order: 0; }
  .btn-outline-warning { order: 0; }
}

/* General */
.logo { font-weight: 500 !important;}
.text-warning { color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #00b8ff !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #00b8ff !important;}

.pagination .page-link:hover { color: #000; }
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #00b8ff;
  color: #fff;
}

/* Nav */
#templatemo_nav_top { min-height: 40px; }
#templatemo_nav_top * { font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem) !important; }
#templatemo_main_nav a { color: #212934; }
#templatemo_main_nav a:hover { color: #00b8ff; }
#templatemo_main_nav .navbar .nav-icon { margin-right: 5px; }

/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #ffffff !important; }

/* Accordion */
.templatemo-accordion a { color: #000; }
.templatemo-accordion a:hover { color: #333d4a; }

/* Shop */
.shop-top-menu a:hover { color: #00b8ff !important; }

/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10); }
.product-wap .product-color-dot.color-dot-red { background:#f71515; }
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe; }
.product-wap .product-color-dot.color-dot-black { background:#000000; }
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0; }
.product-wap .product-color-dot.color-dot-green { background:#00b8ff; }
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000; }
#carousel-related-product .slick-slide:focus { outline: none !important; }
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}

/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
}
.flecha-custom {
  color: yellow;
  -webkit-text-stroke: 2px black;
  font-size: clamp(2rem, 1.8rem + 1vw, 3rem);
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #fffb00 !important;
  font-size: clamp(2.5rem, 2rem + 1.5vw, 3.8rem) !important;
  border: #000;
  border-color: #000;
}

/* Corregido: tamaño de fuente del título del carrusel */
.tempaltemo-carousel .h1 {
  color: #000 !important;
}

/* Services */
.services-icon-wap { transition: .3s; }
.services-icon-wap:hover, .services-icon-wap:hover i { color: #fff; }
.services-icon-wap:hover { background: #00b8ff; }

/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 12px !important; }
.form-control { border: 1px solid #e8e8e8; }

/* Footer */
#tempaltemo_footer { margin-top: auto; }
#tempaltemo_footer a { color: #dcdde1; }
#tempaltemo_footer a:hover { color: #00b8ff; }
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px; }
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important; }
footer { margin-top: auto; }

/* Productos */
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem) !important;
}
.product-wap .product-color-dot {
  width: 8px;
  height: 8px;
}

/* Carrito */
#sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(300px, 80vw, 420px);
  height: 100%;
  background: #fff;
  border-left: 3px solid #000;
  box-shadow: -4px 0 12px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform 0.4s ease, opacity 0.4s ease;
  padding: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
#sidebar.activo {
  transform: translateX(0);
  opacity: 1;
}
.badge {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 11px;
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9998;
}
#overlay.activo {
  opacity: 1;
  pointer-events: auto;
}

#sidebar h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  font-weight: bold;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

#sidebar .contador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

#sidebar .contador button {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-weight: bold;
  transition: background 0.2s ease;
}

#sidebar .contador button:hover {
  background: #f0f0f0;
}

#sidebar p {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem);
  font-weight: bold;
  margin-top: 20px;
  text-align: right;
}

#sidebar .btn-outline-success,
#sidebar .btn-outline-danger {
  font-weight: bold;
  border-radius: 25px;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

#sidebar .btn-outline-success:hover {
  background: #28a745;
  color: #fff;
}

#sidebar .btn-outline-danger:hover {
  background: #dc3545;
  color: #fff;
}
#sidebar .productos {
  flex: 1;
  overflow-y: auto;
}

#sidebar .carrito-footer {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

/* SERVICIOS */
.news-section {
  background-color: var(--azul-intenso);
  color: white;
}

.news-section h2 {
  font-family: 'Libre Clarendon', serif;
  font-weight: 700;
  color: white;
}

/* Tarjeta de noticia */
.news-card {
  display: flex;
  align-items: stretch;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  overflow: hidden;
  margin-bottom: 1.5rem;
  min-height: 310px;
}
.news-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center; 
}

.news-img-container {
  position: relative;
  width: 40%;
  min-height: 250px;
  overflow: hidden;
}

.news-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.news-img.active {
  opacity: 1;
}

.news-content {
  padding: 1.5rem;
  width: 60%;
  color: #1E2857;
  display: flex;
  flex-direction: column; 
  align-items: flex-start;     
  text-align: start;      
}

.news-content p {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.35rem) !important; 
  line-height: 1.6;  
}

.news-date {
  font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
  color: #666;
  margin-bottom: 0.5rem;
}

.news-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2.2rem);
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
}

/* Splash */
#splashscreen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.splash-content { text-align: center; }
.logo { margin-bottom: 20px; }
.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #00b8ff;
  border-radius: 50%;
  width: 50px; height: 50px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
.fade-out {
  animation: fadeOut 1s ease forwards;
}

@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0;}
}

/* Media Queries para pantallas medianas y grandes */
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav { max-width: 550px; }
}

@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav { max-width: 750px; }
  #template-mo-zay-hero-carousel .carousel-item { min-height: 45rem !important; }
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Ajuste específico para pantallas ultra anchas (2K/4K) */
@media (min-width: 1600px) {
  html {
    font-size: 112.5%; /* Aumenta la escala base a 18px */
  }
}

/* Ajustes Responsivos para pantallas pequeñas */
@media (max-width: 768px) {
  .news-card {
    flex-direction: column;
    text-align: center;
  }

  .news-img-container {
    width: 100%;
    height: 280px; 
  }

  .news-content {
    width: 100%;
    padding: 1rem;
    align-items: center;
  }

  .news-title {
    text-align: center;
  }
}