/* ===========================
Index Of css

01. Normalize CSS
02. Header CSS
03. Shipping Info CSS
04. Product CSS
05. Faq CSS
06. Blog CSS
07. Product Grids CSS
08. Footer CSS
09. Filter Style CSS
10. Testimonials Google Reviews CSS
========================== */
/*======================================
    Normalize CSS
========================================*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
html {
  scroll-behavior: smooth;
}

:root {
  --color-primary: #00bba1;
  --color-secondary: #0b2244;
  --color-tertiary: #3b3b3b;
  --font-primary: "Roboto", sans-serif;
  --font-secondary: "Roboto", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  /* Herramienta de depuración para maquetar web */
  /* border: 1px solid red; */
}

h1,
h2,
h3,
h4 h5 {
  text-wrap: balance;
}

body {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #888;
  overflow-x: hidden;
  font-size: 14px;
  min-height: 100dvh;
}

p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 24px;
  text-wrap: pretty;
}

/* Eliminar border de Bootstrap en navbar-toggler (menú hamburguesa) */
.navbar-toggler {
  border: none !important;
  padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus,
a:focus,
input:focus,
textarea:focus,
button:focus,
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
  text-decoration: none;
  outline: none;
  outline: none !important;
  border-color: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.form-check-input:checked {
  background-color: #00bba1;
  border-color: #00bba1;
}

select {
  -webkit-writing-mode: horizontal-tb !important;
  writing-mode: horizontal-tb !important;
  writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: #0b2244;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  background-color: -internal-light-dark(white, #3b3b3b);
  cursor: default;
  margin: 0em;
  font: 400 14px;
  border-radius: 0px;
  border-width: 1px;
  border-style: solid;
  border-color: -internal-light-dark(#767676, #858585);
  -o-border-image: initial;
  border-image: initial;
}

span,
a {
  display: inline-block;
  text-decoration: none;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  margin: 0px;
  color: #0b2244;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

ul,
ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container {
    width: 450px;
  }
}

/* Bread Crumbs */
.breadcrumbs {
  position: relative;
  padding: 30px 0;
  z-index: 2;
  text-align: left;
  background-color: #fff;
  -webkit-box-shadow: 0px 7px 30px rgba(0, 0, 0, 0.075);
  box-shadow: 0px 7px 30px rgba(0, 0, 0, 0.075);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumbs {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .breadcrumbs {
    padding: 30px;
  }
}

.breadcrumbs .breadcrumbs-content {
  position: relative;
  text-align: left;
}

.breadcrumbs .breadcrumbs-content .page-title {
  font-size: 18px;
  color: #0b2244;
  font-weight: 600;
  position: relative;
  line-height: 28px;
  text-transform: initial;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumbs .breadcrumbs-content .page-title {
    font-size: 17px;
    line-height: 28px;
  }
}

@media (max-width: 767px) {
  .breadcrumbs .breadcrumbs-content .page-title {
    font-size: 16px;
    text-align: center;
    line-height: 26px;
  }
}

.breadcrumbs .breadcrumbs-content .breadcrumb-nav {
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
  padding: 0;
  display: inline-block;
}

.breadcrumbs .breadcrumb-nav {
  text-align: right;
}

@media (max-width: 767px) {
  .breadcrumbs .breadcrumb-nav {
    text-align: center;
    margin-top: 15px;
  }
}

.breadcrumbs .breadcrumb-nav li {
  display: inline-block;
  position: relative;
  padding-right: 14px;
  margin-right: 14px;
  text-transform: capitalize;
}

.breadcrumbs .breadcrumb-nav li:after {
  content: "\ea62";
  font-family: lineIcons;
  font-size: 12px;
  position: absolute;
  top: 3px;
  right: -7px;
}

.breadcrumbs .breadcrumb-nav li:last-child {
  margin: 0;
  padding: 0;
}

.breadcrumbs .breadcrumb-nav li:last-child::after {
  display: none;
}

.breadcrumbs .breadcrumb-nav li,
.breadcrumbs .breadcrumb-nav li a {
  color: #000000;
  font-size: 14px;
  font-weight: 500;
}

.breadcrumbs .breadcrumb-nav li i,
.breadcrumbs .breadcrumb-nav li a i {
  font-size: 13px;
  display: inline-block;
  margin-right: 3px;
  position: relative;
  top: -1px;
}

.breadcrumbs .breadcrumb-nav li a {
  position: relative;
}

.breadcrumbs .breadcrumb-nav li a:hover {
  color: #00bba1;
}

.section {
  padding-top: 90px;
  padding-bottom: 90px;
  position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

/* Section Title */
.section-title {
  text-align: center;
  margin-bottom: 40px;
  padding: 0px 300px;
  position: relative;
  z-index: 5;
  position: relative;
}

.section-title h2 {
  font-size: 20px;
  line-height: 35px;
  position: relative;
  font-weight: 800;
  padding-bottom: 20px;
  margin-bottom: 20px;
  position: relative;
}

.section-title h2::before {
  position: absolute;
  left: 50%;
  bottom: 0;
  content: "";
  background-color: #00bba1;
  height: 2px;
  width: 50px;
  margin-left: -25px;
  border-radius: 2px;
}

.section-title p {
  font-size: 14px;
  color: #000;
  text-wrap: pretty;
}

@media only screen and (min-width: 992px) and (max-width: 1400px) {
  .section-title {
    padding: 0px 150px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title {
    padding: 0px 20px;
    margin-bottom: 30px;
  }
  .section-title h3 {
    font-size: 14px;
  }
  .section-title h2 {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 20px;
  }
  .section-title p {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .section-title {
    padding: 0px 10px;
    margin-bottom: 25px;
  }
  .section-title h3 {
    font-size: 14px;
  }
  .section-title h2 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 18px;
  }
  .section-title p {
    font-size: 14px;
  }
}

.section-title.align-right {
  padding: 0;
  padding-left: 600px;
}

.section-title.align-right h2:before {
  display: none;
}

.section-title.align-right h2:after {
  position: absolute;
  right: 0;
  bottom: -1px;
  height: 2px;
  width: 50px;
  background: #00bba1;
  content: "";
}

.section-title.align-left {
  padding: 0;
  padding-right: 600px;
}

.section-title.align-left h2:before {
  left: 0;
  margin-left: 0;
}

/* One Click Scrool Top Button*/
.scroll-top {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #00bba1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16px;
  color: #fff !important;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border-radius: 4px;
}

.scroll-top:hover {
  -webkit-box-shadow: 0 1rem 3rem rgba(35, 38, 45, 0.15) !important;
  box-shadow: 0 1rem 3rem rgba(35, 38, 45, 0.15) !important;
  -webkit-transform: translate3d(0, -5px, 0);
  transform: translate3d(0, -5px, 0);
  background-color: #0b2244;
}

/* Overlay */
.overlay {
  position: relative;
  z-index: 1;
}

.overlay::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background: #0b2244;
  content: "";
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: -1;
}

/* Pagination CSS */
.pagination {
  text-align: left;
  margin: 40px 0 0 0;
  display: block;
}

.pagination.center {
  text-align: center;
}

.pagination.right {
  text-align: right;
}

.pagination.left {
  text-align: left;
}

.pagination .pagination-list {
  display: inline-block;
  overflow: hidden;
}

.pagination .pagination-list li {
  margin-right: 5px;
  display: inline-block;
  margin-top: 10px;
}

.pagination .pagination-list li:last-child {
  margin-right: 0px;
}

.pagination .pagination-list li a {
  background: #fff;
  color: #0b2244;
  font-weight: 500;
  font-size: 14px;
  border-radius: 4px;
  padding: 6px 18px;
  text-align: center;
  border: 1px solid #eee;
}

.pagination .pagination-list li.active a,
.pagination .pagination-list li:hover a {
  background: #00bba1;
  color: #fff;
  border-color: transparent;
}

.pagination .pagination-list li a i {
  font-size: 14px;
}

.blog-grids.pagination {
  margin-top: 50px;
  text-align: center;
}

.button .btn {
  display: inline-block;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 30px;
  background-color: #0b2244;
  color: #fff;
  border: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  margin-right: 7px;
  overflow: hidden;
}

.button .btn-delete {
  /* Centrar boton y contenido del boton*/
  margin-left: 70%;
  margin-top: 70px;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  background-color: #ec5353;
  color: #fff;
  border: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.button .btn-delete:hover {
  color: #fff;
  background-color: #0b2244;
  -webkit-box-shadow: 0px 4px 4px #0000000f;
  box-shadow: 0px 4px 4px #0000000f;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .button .btn {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
  }
}

@media (max-width: 767px) {
  .button .btn {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
  }
}

.button .btn i {
  display: inline-block;
  margin-right: 5px;
}

.button .btn:last-child {
  margin: 0;
}

.button .btn:hover {
  color: #fff;
  background-color: #00bba1;
  -webkit-box-shadow: 0px 4px 4px #0000000f;
  box-shadow: 0px 4px 4px #0000000f;
}

.button .btn-alt {
  background-color: #0b2244 !important;
  color: #fff !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .button .btn-alt {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
  }
}

@media (max-width: 767px) {
  .button .btn-alt {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
  }
}

.button .btn-alt:hover {
  background-color: #00bba1 !important;
  color: #fff !important;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

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

/* Preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}

.preloader-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.preloader-icon {
  width: 100px;
  height: 100px;
  display: inline-block;
  padding: 0px;
}

.preloader-icon span {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: #00bba1;
  -webkit-animation: preloader-fx 1.6s linear infinite;
  animation: preloader-fx 1.6s linear infinite;
}

.preloader-icon span:last-child {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
}

@keyframes preloader-fx {
  0% {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 0;
  }
}

@-webkit-keyframes preloader-fx {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: 0;
  }
}

/* Start Navbar Announcements */
.announcement-bar {
  background-color: #00bba1;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
}

.header.navbar-area {
  padding-top: 40px;
}

.announcement-content {
  color: #0b2244;
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-wrapper {
  min-height: 25px;
}

/* .announcement-item {
  opacity: 0;
  position: absolute;
  width: 100%;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
} */

.announcement-item {
  opacity: 0;
  position: absolute;
  width: 100%;
  transform: translateX(100%);
  animation: slideInRight 0.5s ease forwards, slideOutLeft 0.5s ease forwards 4.5s;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.highlight {
  color: #ffffff;
  background-color: #0b2244;
  padding: 0 6px;
  border-radius: 4px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .announcement-content {
    font-size: 0.75rem;
  }
}

.announcement-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.9;
  padding: 0.25rem;
  z-index: 10;
  cursor: pointer;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  height: 100%;
}

.announcement-nav:hover {
  opacity: 1;
}

.prev-announcement {
  left: 0.5rem;
}

.next-announcement {
  right: 0.5rem;
}

.announcement-nav i {
  font-size: 1rem;
}

@media (min-width: 992px) {
  .prev-announcement {
    left: 25%;
  }

  .next-announcement {
    right: 25%;
  }
}

@media (max-width: 576px) {
  .announcement-nav {
    padding: 0.15rem;
  }

  .announcement-nav i {
    font-size: 0.875rem;
  }
}

@media (max-width: 768px) {
  .header.navbar-area {
    padding-top: 35px;
  }

  .announcement-content {
    font-size: 0.75rem;
  }
}
/* Fin CSS navbar Anuncios */

.header {
  width: 100%;
  background: #fff;
  position: relative;
  width: 100%;
  /* Start Topbar */
  /* End Topbar */
  /* Start Main Menu Search */
  /* End Main Menu Search */
}

.header .topbar {
  background-color: #0b2244;
  padding: 18px 0;
}

@media (max-width: 767px) {
  .header .topbar .top-left {
    text-align: center;
  }
}

.header .topbar .top-left .menu-top-link .select-position {
  position: relative;
}

.header .topbar .top-left .menu-top-link .select-position select {
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  border: none;
  padding: 0 10px 0 0px;
  color: #fff !important;
  font-weight: 500;
  font-size: 14px;
  background-color: #0b2244 !important;
}

.header .topbar .top-left .menu-top-link .select-position select:focus {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.header .topbar .top-left .menu-top-link .select-position::after {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  display: block;
  height: 6px;
  margin-top: -3px;
  pointer-events: none;
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 6px;
}

.header .topbar .top-left .menu-top-link li {
  display: inline-block;
  margin-right: 20px;
}

.header .topbar .top-left .menu-top-link li:last-child {
  margin: 0;
}

.header .topbar .top-middle {
  text-align: center;
}

@media (max-width: 767px) {
  .header .topbar .top-middle {
    display: none;
  }
}

.header .topbar .top-middle .useful-links li {
  display: inline-block;
  margin-right: 10px;
  padding-right: 10px;
}

.header .topbar .top-middle .useful-links li:last-child {
  margin: 0;
  border: none;
}

.header .topbar .top-middle .useful-links li a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.header .topbar .top-middle .useful-links li a:hover {
  color: #a6f0e3; /* SEO FIX: Contrast Ratio 10.8:1 on dark bg */
}

/* .header .topbar .top-end {
  float: right;
  display: inline-block;
} */

@media (max-width: 767px) {
  .header .topbar .top-end {
    float: none;
    text-align: center;
    display: block;
    margin-top: 15px;
  }
}

.header .topbar .top-end .user {
  color: #fff;
  display: inline-block;
  margin-right: 5px;
  font-weight: 500;
  font-size: 14px;
  /* Activar las siguientes lineas cuando se quiera usar el boton logout animado */
  /* display: flex;
  align-items: center; */
}

.header .topbar .top-end .user i {
  color: #fff;
  display: inline-block;
  margin-right: 5px;
  font-size: 16px;
}

.header .topbar .top-end .user a {
  cursor: pointer;
}

.header .topbar .top-end .user-login {
  display: inline-block;
  white-space: nowrap;
}

.header .topbar .top-end .user-login li {
  display: inline-block;
  border-right: 1px solid rgba(255, 255, 255, 0.459);
  padding: 0px 10px;
  white-space: nowrap;
}

.header .topbar .top-end .user-login li:first-child {
  padding-right: 12px;
}

.header .topbar .top-end .user-login li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

.header .topbar .top-end .user-login li a {
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.header .topbar .top-end .user-login li a:hover {
  color: #00bba1;
}

.header .header-middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 25px 0;
  border-bottom: 1px solid #eee;
}

@media (max-width: 767px) {
  .header .header-middle .d-xs-none {
    display: none;
  }
}

.header .middle-right-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .header .middle-right-area {
    -webkit-box-pack: right;
    -ms-flex-pack: right;
    justify-content: right;
    float: right;
  }
}

.header .nav-hotline {
  position: relative;
  padding-left: 50px;
  margin-right: 35px;
}

@media (max-width: 767px) {
  .header .nav-hotline {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .nav-hotline {
    display: none;
  }
}

.header .nav-hotline i {
  color: #0b2244;
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  border: 1px solid #eee;
  border-radius: 50%;
}

.header .nav-hotline h3 {
  font-size: 15px;
  font-weight: 600;
  color: #0b2244;
}

.header .nav-hotline h3 span {
  color: #000000;
  font-weight: 500;
  font-size: 14px;
  display: block;
  margin-top: 2px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header .nav-hotline h3 span {
    font-size: 12px;
    font-weight: 600;
  }
}

.header .navbar-cart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
}

.header .navbar-cart .wishlist {
  margin-right: 12px;
}

.header .navbar-cart .wishlist a {
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #eee;
  color: #555;
  font-size: 18px;
  text-align: center;
  position: relative;
}

.header .navbar-cart .wishlist a:hover {
  color: #fff;
  background-color: #00bba1;
  border-color: transparent;
}

.header .navbar-cart .wishlist a .total-items {
  position: absolute;
  right: -6px;
  top: -5px;
  height: 19px;
  width: 19px;
  line-height: 19px;
  background-color: #0b2244;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border-radius: 50%;
}

.header .navbar-cart .cart-items {
  position: relative;
}

.header .navbar-cart .cart-items:hover .main-btn {
  color: #fff;
  background-color: #00bba1;
  border-color: transparent;
}

.header .navbar-cart .cart-items .main-btn {
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #eee;
  color: #555;
  font-size: 18px;
  text-align: center;
  position: relative;
}

.header .navbar-cart .cart-items .main-btn .total-items {
  position: absolute;
  right: -6px;
  top: -5px;
  height: 19px;
  width: 19px;
  line-height: 19px;
  background-color: #0b2244;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border-radius: 50%;
}

.header .navbar-cart .cart-items:hover .shopping-item {
  opacity: 1;
  visibility: visible;
}

.header .navbar-cart .cart-items .shopping-item {
  position: absolute;
  top: 72px;
  right: 0;
  width: 300px;
  background: #fff;
  padding: 20px 25px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  z-index: 99;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.137);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.137);
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item {
    width: 250px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .navbar-cart .cart-items .shopping-item {
    top: 68px;
  }
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item {
    top: 66px;
  }
}

.header .navbar-cart .cart-items .shopping-item .dropdown-cart-header {
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #e6e6e6;
}

.header .navbar-cart .cart-items .shopping-item .dropdown-cart-header span {
  text-transform: capitalize;
  color: #222;
  font-size: 14px;
  font-weight: 600;
}

.header .navbar-cart .cart-items .shopping-item .dropdown-cart-header a {
  float: right;
  text-transform: capitalize;
  color: #222;
  font-size: 14px;
  font-weight: 600;
}

.header .navbar-cart .cart-items .shopping-item .dropdown-cart-header a:hover {
  color: #00bba1;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li {
  overflow: hidden;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 15px;
  margin-bottom: 15px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .remove {
  position: absolute;
  right: 0;
  top: 0;
  height: 20px;
  width: 20px;
  line-height: 18px;
  text-align: center;
  background: #fff;
  color: #222;
  border-radius: 50%;
  font-size: 9px;
  border: 1px solid #ededed;
  padding-left: 1px;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .remove:hover {
  border-color: transparent;
  color: #fff;
  background-color: #00bba1;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .cart-img-head {
  width: 40%;
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item .shopping-list li .cart-img-head {
    width: 30%;
    margin-right: 12px;
  }
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .cart-img {
  border: 1px solid #ededed;
  overflow: hidden;
  height: 80px;
  width: 80px;
  border-radius: 4px;
  float: left;
  margin-right: 20px;
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item .shopping-list li .cart-img {
    height: 60px;
    width: 60px;
    margin-right: 10px;
  }
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .content {
  padding-right: 25px;
  width: 60%;
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item .shopping-list li .content {
    width: 70%;
  }
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .content h4 {
  margin-bottom: 5px;
  line-height: 22px;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .content h4 a {
  font-size: 14px;
  font-weight: 600;
  color: #0b2244;
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item .shopping-list li .content h4 a {
    font-size: 13px;
  }
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .content h4 a:hover {
  color: #00bba1;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .content .quantity {
  line-height: 22px;
  font-size: 14px;
}

.header .navbar-cart .cart-items .shopping-item .bottom {
  text-align: center;
}

.header .navbar-cart .cart-items .shopping-item .bottom .total {
  overflow: hidden;
  display: block;
  padding-bottom: 10px;
}

.header .navbar-cart .cart-items .shopping-item .bottom .total span {
  text-transform: capitalize;
  color: #222;
  font-size: 14px;
  font-weight: 600;
  float: left;
}

.header .navbar-cart .cart-items .shopping-item .bottom .total .total-amount {
  float: right;
  font-size: 14px;
}

.header .navbar-cart .cart-items .shopping-item .bottom .button {
  margin-top: 10px;
  width: 100%;
}

.header .navbar-cart .cart-items .shopping-item .bottom .button .btn {
  width: 100%;
}

/* ===========================
   Global Cart Icon - Empty State & Login Prompt
   Estilos para dropdown del carrito vacío y mensaje de login
   ========================== */
.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown {
  text-align: center;
  padding: 30px 20px;
}

.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown i {
  font-size: 3rem;
  color: #ccc;
  margin-bottom: 15px;
  display: block;
}

.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown.login-required i {
  color: #00bba1;
  font-size: 2.5rem;
}

.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .empty-message {
  color: #666;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
}

/* Botones del dropdown - Diseño coherente con la web */
.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

/* Botón primario - Color corporativo */
.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn-cart-primary {
  background-color: #0a2344;
  color: #fff;
  box-shadow: 0 2px 4px rgba(10, 35, 68, 0.2);
}

.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn-cart-primary:hover {
  background-color: #00bba1;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 187, 161, 0.3);
  transform: translateY(-1px);
}

/* Botón outline - Variante secundaria */
.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn-cart-outline {
  background-color: transparent;
  color: #0a2344;
  border: 2px solid #0a2344;
}

.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn-cart-outline:hover {
  background-color: #0a2344;
  color: #fff;
  border-color: #0a2344;
  transform: translateY(-1px);
}

/* Botón eliminar item - Hover rojo */
.header .navbar-cart .cart-items .shopping-item .shopping-list li .remove:hover {
  background-color: #cc0a3a !important;
  border-color: #cc0a3a !important;
  color: #fff !important;
}

/* Responsive */
@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown {
    padding: 20px 15px;
  }

  .header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown i {
    font-size: 2.5rem;
  }

  .header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .empty-message {
    font-size: 13px;
    margin-bottom: 15px;
  }

  .header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn {
    font-size: 12px;
    padding: 9px 16px;
  }
}

@media (max-width: 767px) {
  .header .main-menu-search {
    display: none;
  }
}

.header .main-menu-search .navbar-search {
  position: relative;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .main-menu-search .select-position {
  position: relative;
}

.header .main-menu-search .select-position:after {
  border-bottom: 1.5px solid #0b2244;
  border-right: 1.5px solid #0b2244;
  content: "";
  display: block;
  height: 8px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 8px;
}

.header .main-menu-search .select-position select {
  height: 45px;
  border: 1px solid #e2e2e2;
  border-right: 0px;
  padding: 0 20px;
  background: transparent;
  border-radius: 4px 0 0 4px;
  position: relative;
  padding-right: 30px;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  font-size: 14px;
}

.header .main-menu-search .select-position select:focus {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.header .main-menu-search .search-input {
  width: 100%;
}

.header .main-menu-search .search-input input {
  width: 100%;
  height: 45px;
  border: 1px solid #e2e2e2;
  background-color: #fff;
  color: #000;
  border-radius: 0;
  padding: 0 15px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  font-size: 14px;
}

.header .main-menu-search .search-btn button {
  background-color: #00bba1;
  color: #fff;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  border-radius: 0 4px 4px 0;
  margin-left: -2px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-size: 18px;
}

.header .main-menu-search .search-btn button:hover {
  color: #fff;
  background-color: #0b2244;
}

/* Media Queries para el menu superior Home */
@media only screen and (min-width: 1201px) and (max-width: 1400px) {
  .header .navbar .ms-auto .nav-item a {
    display: flex; /* Cambia a flexbox */
    white-space: nowrap; /* Evita los saltos de línea */
    margin: 0 -3px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header .navbar .ms-auto .nav-item a {
    display: flex; /* Cambia a flexbox */
    white-space: nowrap; /* Evita los saltos de línea */
    margin: 0 -7.5px; /* Reduce el espacio entre cada elemento <a> */
    font-size: small;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .mobile-menu-btn .toggler-icon {
    background-color: #0b2244;
  }
  .header .button {
    margin: 0 !important;
  }
  .header .nav-inner {
    display: block !important;
    padding: 18px 0;
  }
  .header .navbar-collapse {
    position: absolute;
    top: 46px !important;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    max-height: 350px;
    overflow-y: scroll;
    border-top: 1px solid #eee;
    border-radius: 6px;
  }
  .header .navbar .navbar-nav .nav-item a:hover {
    color: #00bba1 !important;
  }
  .header .navbar .navbar-nav .nav-item a.active {
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item {
    margin: 0;
  }
  .header .navbar-nav .nav-item:hover a {
    color: #00bba1;
  }
  .header .navbar-nav .nav-item a {
    padding: 12px 16px !important;
  }
  .header .navbar-nav .nav-item a::before {
    display: none;
  }
  .header .navbar-nav .nav-item .sub-menu {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    border: none;
    margin-left: 15px;
    margin-right: 15px;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a {
    padding: 12px 12px;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a:hover {
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item a {
    color: #051441;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 0;
  }
  .header .navbar-nav .nav-item a::after {
    opacity: 1;
    visibility: visible;
  }
  .header .navbar-nav .nav-item .sub-menu li.active {
    background: #fff !important;
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item {
    margin: 0 !important;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a {
    padding: 10px 12px !important;
  }
  .header .navbar-nav .nav-item .sub-menu li:hover {
    background: #fff !important;
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item a {
    font-size: 14px;
  }
  .header .navbar-nav .nav-item a:hover {
    color: #00bba1;
  }
}

@media (max-width: 767px) {
  .header .mobile-menu-btn .toggler-icon {
    background-color: #0b2244;
  }
  .header .button {
    margin: 0 !important;
  }
  .header .nav-inner {
    display: block !important;
    padding: 18px 0;
  }
  .header .navbar-collapse {
    position: absolute;
    top: 46px !important;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    max-height: 350px;
    overflow-y: scroll;
    border-top: 1px solid #eee;
    border-radius: 6px;
  }

  .header .navbar .navbar-nav .nav-item a:hover {
    color: #00bba1 !important;
  }
  .header .navbar .navbar-nav .nav-item a.active {
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item {
    margin: 0;
  }
  .header .navbar-nav .nav-item:hover a {
    color: #00bba1;
  }
  .header .navbar-nav .nav-item a {
    padding: 12px 16px !important;
  }
  .header .navbar-nav .nav-item a::before {
    display: none;
  }
  .header .navbar-nav .nav-item .sub-menu {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    border: none;
    margin-left: 15px;
    margin-right: 15px;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a {
    padding: 12px 12px;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a:hover {
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item a {
    color: #051441;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 0;
  }
  .header .navbar-nav .nav-item a::after {
    opacity: 1;
    visibility: visible;
  }

  .header .navbar-nav .nav-item .sub-menu li.active {
    background: #fff !important;
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item {
    margin: 0 !important;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a {
    padding: 10px 12px !important;
  }
  .header .navbar-nav .nav-item .sub-menu li:hover {
    background: #fff !important;
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item a {
    font-size: 14px;
  }
  .header .navbar-nav .nav-item a:hover {
    color: #00bba1;
  }
}

.header .navbar-nav .nav-item .sub-menu li a {
  color: black;
}

.header .nav-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .mega-category-menu {
  position: relative;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-right: 1px solid #eee;
  margin-right: 40px;
  padding-right: 112px;
  cursor: pointer;
}

/* Inicio Animacion Linea sub menu Productos */
.custom-dropdown-item a {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.custom-dropdown-item a span {
  position: relative;
  display: inline-block;
}

.custom-dropdown-item a span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #0b2244; /* Color de la línea animada */
  width: 100%; /* Ancho inicial de la línea */
  transform: scaleX(0); /* Oculta la línea inicialmente */
  transition: transform 0.3s ease-in-out; /* Transición suave de la transformación */
  transform-origin: left; /* La transformación comienza desde la izquierda */
}

.custom-dropdown-item a:hover span::after {
  transform: scaleX(1); /* Al pasar el mouse, la línea animada se expande al ancho del texto */
}
/* Fin Animacion Linea sub menu Productos */

/* INICIO Animacion para el Boton Mac usados */

.animate-saldos span {
  position: relative;
  outline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: #0b2244;
  width: fit-content;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 2px 5px;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  overflow: hidden;
  cursor: pointer;
}

/* FIN Animacion para el Boton Mac usados */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header .mega-category-menu {
    padding-right: 35px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .mega-category-menu {
    display: none;
  }
}

@media (max-width: 767px) {
  .header .mega-category-menu {
    display: none;
  }
}

.header .mega-category-menu .cat-button {
  display: flex; /* Cambia a flexbox */
  align-items: center; /* Alinea verticalmente el texto y el icono */
  color: #0b2244;
  font-size: 15px;
  font-weight: 600;
}

.header .mega-category-menu .cat-button i {
  margin-right: 12px;
  font-size: 20px;
}

.header .mega-category-menu:hover .sub-category {
  opacity: 1;
  visibility: visible;
  top: 61px;
}

.header .mega-category-menu .sub-category {
  position: absolute;
  left: 0;
  top: 68px;
  width: 241px;
  height: auto;
  border: 1px solid #eee;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  border-radius: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  padding: 15px 0;
}

.header .mega-category-menu .sub-category li {
  display: block;
  position: relative;
}

.header .mega-category-menu .sub-category li:hover .inner-sub-category {
  opacity: 1;
  visibility: visible;
  top: 0;
}

.header .mega-category-menu .sub-category li .inner-sub-category {
  padding: 15px 0;
  position: absolute;
  top: 8px;
  width: 240px;
  height: auto;
  border: 1px solid #eee;
  background-color: #fff;
  border-radius: 0;
  left: 239px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.header .mega-category-menu .sub-category li .inner-sub-category li {
  display: block;
  position: relative;
}

.header .mega-category-menu .sub-category li .inner-sub-category li:last-child {
  margin: 0;
}

.header .mega-category-menu .sub-category li .inner-sub-category li a {
  color: #0b2244;
  text-transform: capitalize;
  font-size: 14px;
  position: relative;
  width: 100%;
  padding: 8px 30px;
}

.header .mega-category-menu .sub-category li .inner-sub-category li a:hover {
  color: #00bba1;
}

.header .mega-category-menu .sub-category li:last-child {
  margin: 0;
}

.header .mega-category-menu .sub-category li a {
  color: #0b2244;
  text-transform: capitalize;
  font-size: 14px;
  position: relative;
  width: 100%;
  padding: 8px 30px;
}

.header .mega-category-menu .sub-category li a i {
  font-size: 12px;
  float: right;
  position: relative;
  top: 5px;
}

.header .mega-category-menu .sub-category li a:hover {
  color: #00bba1;
}

.header .nav-social {
  float: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media (max-width: 767px) {
  .header .nav-social {
    position: relative;
    margin-top: -50px;
  }
}

.header .nav-social .title {
  font-size: 14px;
  font-weight: 600;
  color: #0b2244;
  display: inline-block;
  margin-right: 15px;
}

@media (max-width: 767px) {
  .header .nav-social .title {
    display: none;
  }
}

.header .nav-social ul li {
  display: inline-block;
  margin-right: 5px;
}

.header .nav-social ul li:last-child {
  margin: 0;
}

.header .nav-social ul li a {
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  display: block;
  border: 1px solid #eee;
  border-radius: 50%;
  font-size: 14px;
  color: #555;
}

.header .nav-social ul li a:hover {
  color: #fff;
  background-color: #00bba1;
  border-color: transparent;
}

.header .navbar-brand {
  margin: 0;
}

@media (max-width: 767px) {
  .header .navbar-brand {
    display: block;
    text-align: left;
    padding: 0;
  }
}

.header .navbar-brand img {
  width: 200px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .navbar-brand img {
    width: 190px;
  }
}

@media (max-width: 767px) {
  .header .navbar-brand img {
    width: 180px;
  }
}

.header.sticky .navbar-brand .white-logo {
  opacity: 0;
  visibility: hidden;
}

.header.sticky .navbar-brand .dark-logo {
  opacity: 1;
  visibility: visible;
}

.header.sticky .button .btn {
  background-color: #00bba1;
  color: #fff;
  border-color: transparent;
}

.header.sticky .button .btn:hover {
  background-color: #0b2244;
  color: #fff;
}

.sticky {
  position: fixed;
  z-index: 99;
  background-color: #fff;
  -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  top: 0;
  width: 100%;
}

.navbar-expand-lg .navbar-nav {
  margin: 0;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.header .navbar .navbar-nav .nav-item a.active {
  color: #006c5b; /* SEO FIX: Contrast Ratio 5.0:1 */
}

.sticky .navbar .navbar-nav .nav-item a.active {
  color: #006c5b; /* SEO FIX: Contrast Ratio 5.0:1 */
}

.sticky .navbar .mobile-menu-btn .toggler-icon {
  background: #333;
}

/*===== NAVBAR =====*/
.navbar-area {
  width: 100%;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  padding: 0;
  border-bottom: 1px solid #eee;
}

.navbar-area.sticky {
  position: fixed;
  z-index: 99;
  background: #00bba1;
  -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  background: #fff;
  padding: 0px 0;
}

.navbar {
  padding: 0;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.navbar-brand {
  padding-left: 0;
  border-radius: 0;
}

.mobile-menu-btn {
  padding: 0px;
  border: none !important;
  background: transparent !important;
}

.mobile-menu-btn:focus {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none !important;
}

.mobile-menu-btn .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #222;
  display: block;
  margin: 5px 0;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.mobile-menu-btn.active .toggler-icon:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 7px;
}

.mobile-menu-btn.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.mobile-menu-btn.active .toggler-icon:nth-of-type(3) {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: -7px;
}

.navbar-nav .nav-item {
  z-index: 1;
  position: relative;
  margin-right: 40px;
}

.navbar-nav .nav-item:last-child {
  margin-right: 0 !important;
}

.navbar-nav .nav-item:hover a {
  color: #006c5b; /* SEO FIX: Contrast Ratio 5.0:1 */
}

.sticky .navbar-nav .nav-item:hover a {
  color: #006c5b; /* SEO FIX: Contrast Ratio 5.0:1 */
}

.navbar-nav .nav-item a {
  font-size: 14px;
  color: #0b2244;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  position: relative;
  padding: 20px 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 600;
  transition: all 0.3s ease-out 0s;
  position: relative;
  text-transform: capitalize;
}

.navbar-nav .nav-item:hover .dd-menu::before {
  border-bottom-color: #00bba1;
  border-right-color: #00bba1;
}

.navbar-nav .nav-item a.active {
  color: #006c5b; /* SEO FIX: Contrast Ratio 5.0:1 */
}

.navbar-nav .nav-item a.dd-menu::after {
  content: "\ea5e";
  font: normal normal normal 1em/1 "LineIcons";
  position: absolute;
  right: -20px;
  font-size: 12px;
  top: 50%;
  margin-left: 5px;
  margin-top: -4px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  height: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .navbar-nav .nav-item a.dd-menu::after {
    right: -15;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item a.dd-menu::after {
    top: 18px;
    right: 0;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item a.collapsed::after {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.navbar-nav .nav-item:hover > .sub-menu {
  top: 100%;
  opacity: 1;
  visibility: visible;
}

.navbar-nav .nav-item:hover > .sub-menu .sub-menu {
  left: 100%;
  top: 0;
}

.navbar-nav .nav-item .sub-menu {
  padding: 30px;
  min-width: 240px;
  background: #fff;
  border: 1px solid #eee;
  position: absolute;
  top: 110% !important;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border-radius: 0 0 4px 4px;
}

.navbar-nav .nav-item:hover .sub-menu {
  top: 100% !important;
}

.navbar-nav .nav-item .sub-menu .nav-item {
  width: 100%;
  margin-bottom: 15px;
}

.navbar-nav .nav-item .sub-menu .nav-item:last-child {
  margin: 0;
}

.navbar-nav .nav-item .sub-menu .nav-item a {
  padding: 0;
  color: #888;
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.navbar-nav .nav-item .sub-menu .nav-item a:hover {
  color: #00bba1;
}

.navbar-nav .nav-item .sub-menu.left-menu {
  left: -100%;
}

.navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    display: none;
  }
}

.navbar-nav .nav-item .sub-menu > li {
  display: block;
  margin-left: 0;
}

.navbar-nav .nav-item .sub-menu > li:last-child {
  border: none;
}

.navbar-nav .nav-item .sub-menu > li.active > a {
  color: #00bba1 !important;
}

.navbar-nav .nav-item .sub-menu > li > a {
  font-weight: 400;
  display: block;
  padding: 12px 15px;
  font-size: 14px;
  color: #222;
  font-weight: 400;
}

.navbar-nav .nav-item .sub-menu > li:first-child a {
  border: none;
}

.add-list-button {
  display: inline-block;
  margin-left: 10px;
}

.add-list-button .btn i {
  font-size: 14px;
  display: inline-block;
  margin-right: 5px;
}

/* =====================================
   MENÚ DROPDOWN DE USUARIO - MOBILE FIRST
   ===================================== 
   Sistema global de menú desplegable de usuario
   Presente en todas las páginas del e-commerce
   Diseño coherente con dropdown del carrito
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.user-menu-wrapper {
  position: relative;
  display: none; /* Controlado por JavaScript según autenticación */
}

/* ===== BOTÓN TRIGGER ===== */
.user-menu-trigger {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.user-menu-trigger:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-menu-trigger:focus {
  outline: 2px solid rgba(0, 187, 161, 0.5);
  outline-offset: 2px;
}

.user-menu-trigger i.lni-user {
  font-size: 16px;
  color: #fff;
}

.user-menu-trigger .chevron-icon {
  font-size: 12px;
  transition: transform 0.3s ease;
  margin-left: 2px;
}

/* Mobile: Ajustar tamaño de texto para mejor legibilidad */
@media (max-width: 767px) {
  .user-menu-trigger {
    font-size: 13px;
    gap: 4px;
  }

  .user-menu-trigger #greeting,
  .user-menu-trigger #usernametoken {
    font-size: 12px;
  }
}

/* ===== DROPDOWN MENU ===== */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

/* Estado visible del dropdown */
.user-menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Flecha superior del dropdown */
.user-menu-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05);
}

/* ===== LISTA DE OPCIONES ===== */
.user-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-menu-list li {
  margin: 0;
  padding: 0;
}

/* ===== ITEMS DEL MENÚ ===== */
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #0b2244;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.user-menu-item:hover {
  background-color: #f8f9fa;
  color: #00bba1;
  border-left-color: #00bba1;
}

.user-menu-item i {
  font-size: 18px;
  color: #6c757d;
  transition: color 0.2s ease;
}

.user-menu-item:hover i {
  color: #00bba1;
}

/* Separador visual antes del último item (Cerrar sesión) */
.user-menu-list li:last-child {
  border-top: 1px solid #e9ecef;
  margin-top: 4px;
  padding-top: 4px;
}

.user-menu-list li:last-child .user-menu-item:hover {
  color: #dc3545;
  border-left-color: #dc3545;
}

.user-menu-list li:last-child .user-menu-item:hover i {
  color: #dc3545;
}

/* ===== RESPONSIVE - TABLET ===== */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .user-menu-dropdown {
    min-width: 180px;
  }

  .user-menu-item {
    padding: 10px 16px;
    font-size: 13px;
  }

  .user-menu-item i {
    font-size: 16px;
  }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 767px) {
  .user-menu-dropdown {
    min-width: 160px;
    right: -10px;
  }

  .user-menu-dropdown::before {
    right: 15px;
  }

  .user-menu-item {
    padding: 10px 14px;
    font-size: 13px;
    gap: 10px;
  }

  .user-menu-item i {
    font-size: 16px;
  }

  .user-menu-item span {
    font-size: 13px;
  }
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  .user-menu-trigger,
  .user-menu-trigger .chevron-icon,
  .user-menu-dropdown,
  .user-menu-item {
    transition: none;
  }
}

/* Estados de focus para navegación por teclado */
.user-menu-item:focus {
  outline: 2px solid #00bba1;
  outline-offset: -2px;
  background-color: #f8f9fa;
}

/* ===== ANIMACIONES DE CARGA ===== */
@keyframes fadeInDropdown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== FIN MENÚ DROPDOWN DE USUARIO ===== */

/*======================================
End Header CSS
  ========================================*/

/*======================================
    Shipping Info CSS
========================================*/
.shipping-info {
  background-color: #f9f9f9;
  padding: 50px 0;
}

.shipping-info ul {
  display: inline-block;
  width: 100%;
  margin-bottom: 0px;
}

.shipping-info li {
  list-style: none;
  float: left;
  width: 25%;
  padding: 30px 40px;
  border: 1px solid #eee;
  text-align: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .shipping-info li {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .shipping-info li {
    width: 100%;
  }
}

.shipping-info li:hover {
  background-color: #fff;
}

.shipping-info .media-icon {
  margin-bottom: 15px;
}

.shipping-info .media-icon i {
  color: #00bba1;
  font-size: 38px;
}

.shipping-info .media-body {
  padding-bottom: 0px;
}

.shipping-info .media-body h2 {
  font-size: 15px;
  margin: 0px;
  font-weight: 600;
  color: #0b2244;
}

.shipping-info .media-body span {
  font-size: 13px;
  margin-top: 2px;
  color: #000000;
}

/*======================================
    Product CSS
========================================*/
/* Single Product*/
.single-product {
  border: 1px solid #eee;
  border-radius: 4px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin-top: 30px;
  -webkit-box-shadow: 0px 0px 20px #00000012;
  box-shadow: 0px 0px 20px #00000012;
  padding: 8px;
  background: #fff;
}

.single-product .product-image {
  overflow: hidden;
  position: relative;
}

/* Nuevo estilo para el tag de disponibilidad */
.single-product .product-image .availability-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 23;
  padding: 5px 10px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

/* Ajuste del tag de descuento: posición inferior al tag de disponibilidad */
.single-product .product-image .sale-tag {
  background: #0b2244; /* ya actualizado */
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 30px; /* Se mueve abajo para dejar espacio al tag de disponibilidad */
  padding: 5px 10px;
  left: 0;
  z-index: 22;
}

.single-product .product-image .new-tag {
  background: #00adbf;
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 0;
  padding: 5px 10px;
  left: 0;
  z-index: 22;
}

.single-product .product-image .button {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -60px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  opacity: 0;
  visibility: hidden;
}

.single-product .product-image .button .btn {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  width: 140px;
}

.single-product .product-image .button .btn i {
  font-size: 18px;
  position: relative;
  top: 2px;
}

.single-product .product-image img {
  width: 100%;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.single-product:hover .product-image .button {
  bottom: 30px;
  opacity: 1;
  visibility: visible;
}

.single-product:hover .product-image img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.single-product .product-info {
  padding: 20px;
  background-color: #fff;
}

.single-product .product-info .category {
  color: #000000;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

.single-product .product-info .title a {
  font-size: 16px;
  font-weight: 700;
  color: #0b2244;
  /* agregar manito arriba de hipervinculo*/
  cursor: pointer;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .single-product .product-info .title a {
    font-size: 15px;
  }
}

.single-product .product-info .title a:hover {
  color: #00bba1;
}

.single-product .product-info .review {
  margin-top: 5px;
}

.single-product .product-info .review li {
  display: inline-block;
}

.single-product .product-info .review li i {
  color: #fecb00;
  font-size: 13px;
}

.single-product .product-info .review li span {
  display: inline-block;
  margin-left: 4px;
  color: #595959; /* SEO FIX: Darker Gray for contrast */
  font-size: 13px;
}

.single-product .product-info .price {
  margin-top: 15px;
}

.single-product .product-info .price span {
  font-size: 17px;
  font-weight: 700;
  color: #006c5b; /* SEO FIX: Darker Teal for contrast */
  display: inline-block;
}

.single-product .product-info .price .discount-price {
  margin: 0;
  color: #767676; /* SEO FIX: Darker Gray for contrast */
  text-decoration: line-through;
  font-weight: normal;
  margin-left: 10px;
  font-size: 14px;
  display: inline-block;
}

/* End Single Product */
.trending-product {
  background-color: #f9f9f9;
}

.trending-product .section-title {
  margin-bottom: 20px;
}

/*======================================
    Faq CSS
========================================*/
.faq {
  padding-bottom: 80px;
  background-color: #f9f9f9;
}

.faq .section-title {
  margin-bottom: 60px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq .section-title {
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .faq .section-title {
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq {
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .faq {
    padding-bottom: 30px;
  }
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding-right: 40px;
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.accordion-item .accordion-button {
  border-radius: 4px;
  font-size: 17px;
  font-weight: 500;
  width: 100%;
  display: block;
  overflow: hidden;
  border: none;
  padding: 15px 25px;
  padding-right: 40px;
  background-color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .accordion-item .accordion-button {
    padding: 18px 20px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .accordion-item .accordion-button {
    padding: 15px 20px;
    padding-right: 40px;
  }
}

.accordion-item .accordion-button .title {
  font-size: 14px;
  position: relative;
  font-weight: 600;
  float: left;
  line-height: 25px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .accordion-item .accordion-button .title {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .accordion-item .accordion-button .title {
    font-size: 14px;
  }
}

.accordion-item .accordion-button i {
  font-size: 15px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  top: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 20px;
}

.accordion-button:not(.collapsed) {
  color: #fff;
  background-color: #0b2244;
  border-radius: 4px 4px 0 0;
}

.accordion-button:not(.collapsed) i::before {
  content: "\eb2e";
  font-family: lineIcons;
}

.accordion-button::after {
  display: none;
}

.accordion-collapse {
  border: none;
}

.accordion-body {
  border-radius: 0 0 4px 4px;
  padding: 25px;
  background-color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .accordion-body {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .accordion-body {
    padding: 20px;
  }
}

.accordion-body p {
  margin: 0;
  margin-bottom: 20px;
  color: #000000;
}

.accordion-body p a {
  color: #00bba0;
}

.accordion-body p:last-child {
  margin: 0;
}

.accordion-item {
  margin-bottom: 20px;
  -webkit-box-shadow: 0px 0px 20px #00000007;
  box-shadow: 0px 0px 20px #00000007;
  border-radius: 4px;
}

.accordion-item:last-child {
  margin: 0;
}

/* Product Grids */
.product-grids {
  background-color: #f9f9f9;
}

.product-grids .product-grid-topbar {
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #eee;
  padding-right: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .product-grids .product-grid-topbar {
    margin-top: 30px;
  }
}

.product-grids .product-grid-topbar .product-sorting label {
  display: inline-block;
  margin: 0;
  padding: 8px 5px 8px 0;
  color: #000000;
  font-size: 14px;
  font-weight: normal;
}

.product-grids .product-grid-topbar .product-sorting .form-control {
  width: 100%;
  max-width: 225px;
  margin-right: 10px;
  display: inline-block;
}

.product-grids .product-grid-topbar .product-sorting select.form-control:not([size]):not([multiple]) {
  height: 42px;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #eee;
  padding-right: 38px;
  background-position: center right 17px;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE4NS4zNDQgMTg1LjM0NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTg1LjM0NCAxODUuMzQ0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTkyLjY3MiwxNDQuMzczYy0yLjc1MiwwLTUuNDkzLTEuMDQ0LTcuNTkzLTMuMTM4TDMuMTQ1LDU5LjMwMWMtNC4xOTQtNC4xOTktNC4xOTQtMTAuOTkyLDAtMTUuMTggICAgYzQuMTk0LTQuMTk5LDEwLjk4Ny00LjE5OSwxNS4xOCwwbDc0LjM0Nyw3NC4zNDFsNzQuMzQ3LTc0LjM0MWM0LjE5NC00LjE5OSwxMC45ODctNC4xOTksMTUuMTgsMCAgICBjNC4xOTQsNC4xOTQsNC4xOTQsMTAuOTgxLDAsMTUuMThsLTgxLjkzOSw4MS45MzRDOTguMTY2LDE0My4zMjksOTUuNDE5LDE0NC4zNzMsOTIuNjcyLDE0NC4zNzN6IiBmaWxsPSIjNTA1MDUwIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

.product-grids .product-grid-topbar .product-sorting select.form-control:not([size]):not([multiple]):focus {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.product-grids .product-grid-topbar .product-sorting .total-show-product {
  display: inline-block;
  color: #000000;
  font-weight: 400;
  font-size: 14px;
}

@media (max-width: 767px) {
  .product-grids .product-grid-topbar .product-sorting .total-show-product {
    display: block;
    margin-top: 15px;
  }
}

.product-grids .product-grid-topbar .nav {
  border: none;
  float: right;
}

@media (max-width: 767px) {
  .product-grids .product-grid-topbar .nav {
    float: none;
    text-align: left;
    margin-top: 20px;
  }
}

.product-grids .product-grid-topbar .nav button {
  border: none;
  padding: 5px 10px 5px 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-right: 6px;
  font-size: 16px;
}

.product-grids .product-grid-topbar .nav button.active {
  background-color: #00bba1;
  border-color: transparent;
  color: #fff;
}

.product-grids .product-grid-topbar .nav button:last-child {
  margin: 0;
}

/* Product Sidebar */
.product-sidebar .single-widget {
  background-color: #fff;
  padding: 30px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 30px;
}

.product-sidebar .single-widget:last-child {
  margin-bottom: 0;
}

.product-sidebar .single-widget h3,
.product-sidebar .single-widget h2 {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
  color: #232323;
  font-size: 15px;
  font-weight: 500;
}

.product-sidebar .single-widget .widget-title {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
  width: 100%; /* extender la linea para que ocupe todo el ancho */
  color: #232323;
  font-size: 15px;
  font-weight: 500;
}

.product-sidebar .single-widget.search form {
  position: relative;
}

.product-sidebar .single-widget.search form input {
  height: 50px;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 6px;
  color: #0b2244;
  padding: 0px 15px;
  padding-right: 50px;
}

.product-sidebar .single-widget.search form button {
  height: 40px;
  width: 40px;
  text-align: center;
  display: block;
  border-radius: 6px;
  border: none;
  background-color: transparent;
  color: #0b2244;
  position: absolute;
  right: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-size: 16px;
}

.product-sidebar .single-widget.search form button:hover {
  color: #00bba1;
}

.product-sidebar .single-widget.range input {
  color: #0b2244;
  cursor: pointer;
}

.product-sidebar .single-widget.range ::-webkit-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #0b2244;
  opacity: 1;
  /* Firefox */
}

.product-sidebar .single-widget.range :-ms-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #0b2244;
  opacity: 1;
  /* Firefox */
}

.product-sidebar .single-widget.range ::-ms-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #0b2244;
  opacity: 1;
  /* Firefox */
}

.product-sidebar .single-widget.range ::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #0b2244;
  opacity: 1;
  /* Firefox */
}

.product-sidebar .single-widget.range :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #0b2244;
}

.product-sidebar .single-widget.range ::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #0b2244;
}

.product-sidebar .single-widget.range .range-inner {
  position: relative;
  padding-left: 15px;
}

.product-sidebar .single-widget.range label {
  color: #0b2244;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 15px;
}

.product-sidebar .single-widget.range #rangePrimary {
  display: inline-block;
  border: none;
}

.product-sidebar .single-widget.range input[type="range"]::-webkit-slider-thumb {
  background: #00bba1 !important;
}

.product-sidebar .single-widget.range input[type="range"]::-moz-range-thumb {
  background: #00bba1 !important;
}

.product-sidebar .single-widget.range input[type="range"]::-ms-thumb {
  background: #00bba1 !important;
}

.product-sidebar .single-widget.condition .form-check {
  display: block;
  margin-bottom: 10px;
}

.product-sidebar .single-widget.condition .form-check:last-child {
  margin: 0;
}

.product-sidebar .single-widget.condition .form-check-label {
  cursor: pointer;
}

.product-sidebar .single-widget.condition .form-check-input {
  cursor: pointer;
  margin-top: 4px;
}

.product-sidebar .single-widget.condition .form-check-input:checked {
  background-color: #00bba1;
  border-color: #00bba1;
}

.product-sidebar .single-widget .list li {
  margin-bottom: 12px;
}

.product-sidebar .single-widget .list li:last-child {
  margin: 0;
}

.product-sidebar .single-widget .list li a {
  color: #000000;
  position: relative;
  font-weight: 400;
  font-size: 14px;
  display: inline-block;
  margin-right: 3px;
}

.product-sidebar .single-widget .list li a:hover {
  color: #00bba1;
}

.product-sidebar .single-widget .list li span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  float: right;
}

.product-sidebar .single-widget.banner a img {
  width: 100%;
}

.product-sidebar .single-widget .form-check-label span {
  color: #adb5bd;
  position: relative;
  font-weight: 400;
  font-size: 14px;
  display: inline-block;
  margin-right: 3px;
}

.product-sidebar .single-widget label {
  color: #000000;
  position: relative;
  font-weight: 400;
  font-size: 14px;
  /* Convertimos el label en un contenedor flex */
  display: flex;
  /* Empujamos el contenido a los extremos */
  justify-content: space-between;
  /* Nos aseguramos que ocupe todo el ancho disponible */
  width: 100%;
}

.product-sidebar .single-widget label:hover {
  color: #00bba1;
}

.product-sidebar .single-widget .form-check-label:hover span {
  color: #adb5bd;
}

/*======================================
	Footer CSS
========================================*/
.footer {
  background-color: #0b2244;
  position: relative;
  /* Single Footer */
  /* End Single Footer */
}

.footer .footer-top .inner-content {
  padding: 60px 0;
  border-bottom: 1px solid #ffffff26;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer .footer-top .inner-content {
    padding: 50px 0;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .inner-content {
    padding: 40px 0;
    text-align: center;
  }
}

.footer .footer-top .footer-logo a img {
  width: 200px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer .footer-top .footer-logo a img {
    width: 190px;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .footer-logo a img {
    width: 180px;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter {
    padding: 0px 20px;
  }
}

.footer .footer-top .footer-newsletter .title {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  float: left;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer .footer-top .footer-newsletter .title {
    margin-bottom: 20px;
    display: block;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .title {
    margin-bottom: 20px;
    display: block;
    font-size: 18px;
    width: 100%;
  }
}

.footer .footer-top .footer-newsletter .title span {
  color: #c2c2c2;
  display: block;
  font-size: 14px;
  margin-top: 5px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .title span {
    margin-top: 10px;
  }
}

.footer .footer-top .footer-newsletter .newsletter-form {
  float: right;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer .footer-top .footer-newsletter .newsletter-form {
    float: none;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .newsletter-form {
    float: none;
    margin-top: 20px;
  }
}

.footer .footer-top .footer-newsletter .newsletter-form input {
  height: 50px;
  background-color: rgba(255, 255, 255, 0.308);
  border-radius: 4px;
  width: 300px;
  display: inline-block;
  border: none;
  padding: 0px 20px;
  color: #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer .footer-top .footer-newsletter .newsletter-form input {
    width: 240px;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .newsletter-form input {
    width: 100%;
    text-align: center;
  }
}

.footer .footer-top .footer-newsletter .newsletter-form input::-webkit-input-placeholder {
  color: #fff;
}

.footer .footer-top .footer-newsletter .newsletter-form input:-ms-input-placeholder {
  color: #fff;
}

.footer .footer-top .footer-newsletter .newsletter-form input::-ms-input-placeholder {
  color: #fff;
}

.footer .footer-top .footer-newsletter .newsletter-form input::placeholder {
  color: #fff;
}

.footer .footer-top .footer-newsletter .newsletter-form .button {
  display: inline-block;
  margin-left: 6px;
  position: relative;
  top: -2px;
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .newsletter-form .button {
    margin: 0;
    margin-top: 10px;
    top: 0;
    width: 100%;
  }
}

.footer .footer-top .footer-newsletter .newsletter-form .button .btn {
  height: 50px;
  background-color: #fff;
  color: #0b2244;
  padding: 12px 30px;
  font-size: 14px;
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .newsletter-form .button .btn {
    width: 100%;
  }
}

.footer .footer-top .footer-newsletter .newsletter-form .button .btn:hover {
  color: #fff;
  background-color: #00bba0;
}

.footer .footer-middle {
  padding-top: 40px;
  padding-bottom: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer .footer-middle {
    padding-top: 30px;
    padding-bottom: 70px;
  }
}

@media (max-width: 767px) {
  .footer .footer-middle {
    padding-top: 10px;
    padding-bottom: 50px;
  }
}

.footer .footer-middle .newsletter-form input {
  width: 100%;
  border-radius: 4px;
  padding: 0px 20px;
  height: 50px;
  border: 1px solid #eee;
}

.footer .footer-middle .newsletter-form .button {
  margin-top: 12px;
}

.footer .footer-middle .newsletter-form .button .btn {
  background-color: #0b2244;
  color: #fff;
}

.footer .footer-middle .newsletter-form .button .btn:hover {
  background-color: #00bba1;
  color: #fff;
}

.footer .footer-middle .newsletter-form p {
  color: #888;
  margin-top: 20px;
}

.footer .single-footer {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .footer .single-footer {
    margin-top: 30px;
    text-align: center;
  }
}

.footer .single-footer h3 {
  position: relative;
  margin-bottom: 32px;
  padding-bottom: 15px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
}

.footer .single-footer h3::before {
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: #00bba1;
  content: "";
}

@media (max-width: 767px) {
  .footer .single-footer h3::before {
    left: 50%;
    margin-left: -20px;
  }
}

.footer .single-footer.f-link ul li {
  display: block;
  margin-bottom: 12px;
  position: relative;
}

.footer .single-footer.f-link ul li:last-child {
  margin-bottom: 0;
}

.footer .single-footer.f-link ul li a {
  color: #d6d6d6;
  font-size: 14px;
  font-weight: 500;
  position: relative;
}

.footer .single-footer.f-link ul li a:hover {
  padding-left: 5px;
  color: #00bba1;
}

.footer .single-footer.f-link.cat ul li {
  display: block;
  margin-bottom: 12px;
  position: relative;
}

.footer .single-footer.f-link.cat ul li:last-child {
  margin-bottom: 0;
}

.footer .single-footer.f-link.cat ul li h4 {
  color: #d6d6d6;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: padding-left 0.4s ease;
}

.footer .single-footer.f-link.cat ul li h4:hover {
  padding-left: 2.5px;
  color: #00bba1;
}

.footer .single-footer.f-contact .phone {
  color: #d6d6d6;
}

.footer .single-footer.f-contact ul {
  margin: 10px 0;
}

.footer .single-footer.f-contact ul li {
  display: block;
  margin-bottom: 10px;
  color: #d6d6d6;
}

.footer .single-footer.f-contact ul li span {
  display: block;
}

.footer .single-footer.f-contact ul li:last-child {
  margin: 0;
}

.footer .single-footer.f-contact ul li span {
  color: #d6d6d6;
}

.footer .single-footer.f-contact .mail a {
  color: #d6d6d6;
}

.footer .single-footer.f-contact .mail a:hover {
  color: #00bba1;
}

.footer .single-footer.our-app .app-btn li {
  display: block;
  margin-bottom: 15px;
}

.footer .single-footer.our-app .app-btn li:last-child {
  margin-bottom: 0;
}

.footer .single-footer.our-app .app-btn li span {
  display: block !important;
}

.footer .single-footer.our-app .app-btn li a {
  position: relative;
  padding-left: 40px;
  border-radius: 4px;
  padding: 15px 30px;
  padding-left: 60px;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #ffffff0f;
}

.footer .single-footer.our-app .app-btn li a i {
  font-size: 27px;
  position: absolute;
  left: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer .single-footer.our-app .app-btn li a .small-title {
  font-size: 13px;
  display: block;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer .single-footer.our-app .app-btn li a .big-title {
  font-size: 14px;
  font-weight: 500;
  display: block;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer .single-footer.our-app .app-btn li a:hover {
  background-color: #00bba1;
  color: #fff;
  border-color: transparent;
}

.footer .single-footer.our-app .app-btn li a:hover .small-title {
  color: #fff;
}

.footer .single-footer.our-app .app-btn li a:hover .big-title {
  color: #fff;
}

.footer .footer-bottom .inner-content {
  border-top: 1px solid #ffffff26;
  padding: 25px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer .footer-bottom .inner-content {
    text-align: center;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer .footer-bottom .payment-gateway {
    margin-bottom: 12px;
  }
}

.footer .footer-bottom .payment-gateway span {
  display: inline-block;
  margin-right: 12px;
  color: #fff;
}

@media (max-width: 767px) {
  .footer .footer-bottom .payment-gateway span {
    display: block;
    margin: 0;
    margin-bottom: 10px;
  }
}

.footer .footer-bottom .payment-gateway img {
  width: 200px;
}

.footer .footer-bottom .copyright {
  text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer .footer-bottom .copyright {
    margin-bottom: 12px;
  }
}

.footer .footer-bottom .copyright p {
  color: #fff;
}

.footer .footer-bottom .copyright p a {
  color: #eee;
  display: inline-block;
  margin-left: 4px;
}

.footer .footer-bottom .copyright p a:hover {
  color: #00bba1;
}

.footer .footer-bottom .socila {
  display: block;
  float: right;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer .footer-bottom .socila {
    float: none;
    text-align: center;
  }
}

.footer .footer-bottom .socila li {
  margin: 0;
  margin-right: 5px;
  display: inline-block;
}

.footer .footer-bottom .socila li:last-child {
  margin: 0;
}

.footer .footer-bottom .socila li a {
  height: 35px;
  width: 35px;
  text-align: center;
  display: block;
  color: #fff;
  border-radius: 50%;
  line-height: 35px;
  font-size: 15px;
}

.footer .footer-bottom .socila li a:hover {
  background-color: #00bba1;
  color: #fff;
  border-color: transparent;
}

.footer .footer-bottom .socila li span {
  display: inline-block;
  color: #fff;
  margin-right: 12px;
}

@media (max-width: 767px) {
  .footer .footer-bottom .socila li span {
    display: none;
  }
}

/* posicion del boton Whatsapp */
.boton-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  transition: all 0.3s ease-in-out;
  z-index: 100;
}

.boton-whatsapp img {
  transform: scale(1.85);
}

/* Animacion de elevacion*/
.boton-whatsapp:hover {
  transform: translateY(-5px);
}

@media only screen and (max-width: 600px) {
  .boton-whatsapp {
    bottom: 10px;
    right: 10px;
  }
}

/* Estilos optimizados para el botón WhatsApp - Versión Global */
.boton-whatsapp,
.boton-whatsapp-home {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  text-decoration: none;
  min-width: 64px;
  min-height: 64px;
  display: block;
}

.whatsapp-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenedor del icono optimizado */
.whatsapp-icon-wrapper {
  background-color: #25d366;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  will-change: transform;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.whatsapp-icon {
  width: 80%;
  height: 80%;
  display: block;
}

/* Efectos hover optimizados */
.whatsapp-icon-wrapper:hover {
  transform: translateY(-5px);
  background-color: #20ba5a;
}

/* Animación de rebote optimizada */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Eliminar animaciones anteriores que causaban CLS */
.boton-whatsapp:before,
.boton-whatsapp-home:before {
  content: none;
}

/* Media queries optimizadas */
@media only screen and (max-width: 768px) {
  .boton-whatsapp,
  .boton-whatsapp-home {
    bottom: 16px;
    right: 16px;
  }

  .whatsapp-icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .whatsapp-icon {
    width: 100%;
    height: 100%;
  }
}

/* Soporte para dispositivos de alta densidad de píxeles */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .whatsapp-icon {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Optimización para reducir CLS en diferentes viewports */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .boton-whatsapp,
  .boton-whatsapp-home {
    bottom: 25px;
    right: 25px;
  }
}

/* Soporte para modo oscuro */
@media (prefers-color-scheme: dark) {
  .whatsapp-icon-wrapper {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
}

/*======================================
	Filter Style CSS
========================================*/

/* ===== DUAL RANGE SLIDER - PRICE FILTER ===== */
.dual-range-container {
  position: relative;
  height: 48px; /* SEO FIX: Altura mínima de 48px para área táctil */
  margin: 20px 0 15px 0;
  display: flex;
  align-items: center; /* Centrar verticalmente */
}

.dual-range-container input[type="range"] {
  position: absolute;
  width: 100%;
  height: 48px; /* SEO FIX: Altura física de 48px */
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  top: 0;
  margin: 0;
  z-index: 2; /* Asegurar que estén por encima */
}

/* Track Visual Simulado (Línea central) */
/* Usamos un div o pseudo-elemento para el fondo visual si fuera necesario, 
   pero aquí usaremos el track del input inferior para dibujar la línea */

.dual-range-container input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 48px; /* Ocupa toda la altura táctil */
  cursor: pointer;
  background: transparent; /* Transparente por defecto */
}

.dual-range-container input[type="range"]::-moz-range-track {
  width: 100%;
  height: 48px;
  cursor: pointer;
  background: transparent;
}

/* El input inferior (#minPriceRange) dibuja la línea gris de fondo */
.dual-range-container #minPriceRange {
  z-index: 1;
}

.dual-range-container #minPriceRange::-webkit-slider-runnable-track {
  /* Gradiente para simular línea de 5px centrada: (48-5)/2 = 21.5px */
  background: linear-gradient(to bottom, transparent 21.5px, #bbb 21.5px, #bbb 26.5px, transparent 26.5px);
  border-radius: 5px;
}

.dual-range-container #minPriceRange::-moz-range-track {
  background: linear-gradient(to bottom, transparent 21.5px, #bbb 21.5px, #bbb 26.5px, transparent 26.5px);
  border-radius: 5px;
}

/* El input superior (#maxPriceRange) es transparente */
.dual-range-container #maxPriceRange {
  z-index: 2;
}

/* Thumbs (Manejadores) - Estilos Base */
.dual-range-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #0b2244;
  cursor: pointer;
  pointer-events: auto;
  margin-top: 12px; /* (48px track - 24px thumb) / 2 = 12px para centrar */
  box-shadow: 0 2px 4px rgba(11, 34, 68, 0.3);
  transition: transform 0.2s ease;
  position: relative;
  z-index: 10;
}

.dual-range-container input[type="range"]::-moz-range-thumb {
  border: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #0b2244;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(11, 34, 68, 0.3);
  transition: transform 0.2s ease;
  position: relative;
  z-index: 10;
}

/* Price Display Container */
.price-display-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 2px;
}

.price-value {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  transition: all 0.3s ease;
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent;
}

.single-widget.range:hover .price-value {
  background: rgba(0, 123, 255, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.price-min {
  text-align: left;
}

.price-max {
  text-align: right;
}

/* Fix overflow en laptop 1024px */
@media only screen and (max-width: 1024px) {
  .price-display-container {
    padding: 0 5px;
  }

  .price-value {
    font-size: 11px;
    padding: 5px 6px;
  }
}

/* SEO FIX: High Specificity Implementation for Desktop (>=992px) */
/* Solves specificity issues ensuring icons are visible and thumbs are transparent */
@media (min-width: 992px) {
  /* Base Thumb Styles - High Specificity */
  .product-sidebar .single-widget.range .dual-range-container input.form-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 48px !important; /* Touch target size */
    height: 48px !important; /* Touch target size */
    margin-top: 0 !important; /* Centered automatically in 48px track */
    background: transparent !important; /* Ensure no background color */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important; /* Visual size */
    cursor: pointer !important;
    filter: drop-shadow(0 2px 4px rgba(11, 34, 68, 0.2)); /* Subtle shadow for the icon */
    transition: transform 0.2s ease !important;
  }

  .product-sidebar .single-widget.range .dual-range-container input.form-range::-moz-range-thumb {
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;
    cursor: pointer !important;
    filter: drop-shadow(0 2px 4px rgba(11, 34, 68, 0.2));
    transition: transform 0.2s ease !important;
  }

  /* Specific Icons with High Specificity */
  /* Min Price: Arrow Right */
  .product-sidebar .single-widget.range .dual-range-container #minPriceRange::-webkit-slider-thumb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230a2344' class='bi bi-arrow-right-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") !important;
  }
  .product-sidebar .single-widget.range .dual-range-container #minPriceRange::-moz-range-thumb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230a2344' class='bi bi-arrow-right-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") !important;
  }

  /* Max Price: Arrow Left */
  .product-sidebar .single-widget.range .dual-range-container #maxPriceRange::-webkit-slider-thumb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230a2344' class='bi bi-arrow-left-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E") !important;
  }
  .product-sidebar .single-widget.range .dual-range-container #maxPriceRange::-moz-range-thumb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230a2344' class='bi bi-arrow-left-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E") !important;
  }

  /* Hover Effects */
  .product-sidebar .single-widget.range .dual-range-container input.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.15) !important;
    filter: drop-shadow(0 3px 6px rgba(11, 34, 68, 0.3)) !important;
  }
  .product-sidebar .single-widget.range .dual-range-container input.form-range::-moz-range-thumb:hover {
    transform: scale(1.15) !important;
    filter: drop-shadow(0 3px 6px rgba(11, 34, 68, 0.3)) !important;
  }
}
/* ===== END DUAL RANGE SLIDER ===== */

/* ===== ACTIVE FILTERS CHIPS ===== */
#active-filters-wrapper {
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-10px);
}

#active-filters-wrapper.show {
  opacity: 1;
  max-height: 500px;
  transform: translateY(0);
}

#active-filters-wrapper h6 {
  color: #0a2344;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0;
}

#active-filters-wrapper h6 i {
  font-size: 16px;
}

#clear-all-filters-btn {
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
}

#clear-all-filters-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.25);
}

#clear-all-filters-btn i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

#clear-all-filters-btn:hover i {
  animation: eraseMotion 0.6s ease-in-out;
}

/* Animación de borrado para el icono bi-eraser */
@keyframes eraseMotion {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(-3px) rotate(-5deg);
  }
  50% {
    transform: translateX(3px) rotate(5deg);
  }
  75% {
    transform: translateX(-2px) rotate(-3deg);
  }
}

#active-filters-chips,
#active-filters-chips-mobile {
  min-height: 32px;
}

/* Chip de precio (info) - Desktop Y Móvil sincronizados */
#active-filters-chips .badge.bg-info,
#active-filters-chips-mobile .badge.bg-info {
  background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%) !important;
  border: none;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(13, 202, 240, 0.25);
}

#active-filters-chips .badge.bg-info:hover,
#active-filters-chips-mobile .badge.bg-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(13, 202, 240, 0.35);
}

#active-filters-chips .badge.bg-info i.bi-currency-dollar,
#active-filters-chips-mobile .badge.bg-info i.bi-currency-dollar {
  font-size: 15px;
}

#active-filters-chips .badge.bg-info i.bi-x-circle,
#active-filters-chips-mobile .badge.bg-info i.bi-x-circle {
  font-size: 15px;
  opacity: 0.85;
  transition: all 0.2s ease;
}

#active-filters-chips .badge.bg-info i.bi-x-circle:hover,
#active-filters-chips-mobile .badge.bg-info i.bi-x-circle:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* Chips de facetas (primary) - Desktop Y Móvil sincronizados */
#active-filters-chips .badge.bg-primary,
#active-filters-chips-mobile .badge.bg-primary {
  background: linear-gradient(135deg, #00bba1 0%, #00a890 100%) !important;
  border: none;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 187, 161, 0.25);
}

#active-filters-chips .badge.bg-primary:hover,
#active-filters-chips-mobile .badge.bg-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 187, 161, 0.35);
}

#active-filters-chips .badge i.bi-x-circle,
#active-filters-chips-mobile .badge i.bi-x-circle {
  opacity: 0.85;
  transition: all 0.2s ease;
}

#active-filters-chips .badge i.bi-x-circle:hover,
#active-filters-chips-mobile .badge i.bi-x-circle:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* Animación de entrada para chips (solo para nuevos) */
@keyframes chipFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#active-filters-chips .badge.new-chip,
#active-filters-chips-mobile .badge.new-chip {
  animation: chipFadeIn 0.5s ease;
}

/* Responsive */
@media (max-width: 767px) {
  #active-filters-wrapper {
    padding: 12px;
  }

  #active-filters-wrapper h6 {
    font-size: 13px;
  }

  #active-filters-chips .badge {
    font-size: 11px;
    padding: 5px 8px;
  }

  #clear-all-filters-btn {
    font-size: 11px;
  }
}
/* ===== END ACTIVE FILTERS CHIPS ===== */

/* ===========================
   19. FILTROS MÓVILES (Offcanvas + FAB)
   Bootstrap 5.3 + Media Queries
========================== */

/* ===== BOTÓN FLOTANTE FAB - DISEÑO RECTANGULAR VERTICAL DE CLASE MUNDIAL ===== */
.btn-filter-fab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 40px; /* Reducido de 48px para mejor UX en móviles */
  height: 120px; /* Reducido de 140px */
  border: none;
  background: #0b2244;
  color: #ffffff;
  cursor: pointer;
  z-index: 1066; /* Por encima del offcanvas (1045) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px; /* Reducido de 8px */
  padding: 10px 6px; /* Reducido de 12px 8px */
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: -4px 0 12px rgba(11, 34, 68, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Texto vertical "FILTROS" - ROTADO 180° para lectura bottom-to-top */
.btn-filter-fab .filter-vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 13px; /* Reducido de 14px */
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
  transform: rotate(180deg); /* CRÍTICO: Texto legible de abajo hacia arriba */
  transition: all 0.3s ease;
}

/* Flecha indicadora animada */
.btn-filter-fab .filter-arrow {
  font-size: 16px; /* Reducido de 18px */
  color: #ffffff;
  animation: arrowPulse 2s ease-in-out infinite;
  transition: all 0.3s ease;
}

@keyframes arrowPulse {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-4px);
    opacity: 0.6;
  }
}

/* Hover effect - Se expande ligeramente */
.btn-filter-fab:hover {
  width: 44px; /* Reducido de 54px */
  box-shadow: -6px 0 20px rgba(11, 34, 68, 0.4);
  background: #0d2b52;
}

.btn-filter-fab:hover .filter-vertical-text {
  letter-spacing: 2.5px; /* Reducido de 3px */
}

.btn-filter-fab:hover .filter-arrow {
  animation: arrowPulseHover 0.6s ease-in-out infinite;
}

@keyframes arrowPulseHover {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-6px);
  }
}

/* Active effect - Feedback táctil */
.btn-filter-fab:active {
  transform: translateY(-50%) scale(0.96);
  box-shadow: -2px 0 8px rgba(11, 34, 68, 0.3);
}

/* Badge contador en FAB - DESHABILITADO (corrompe UI del botón) */
.btn-filter-fab .filter-badge {
  display: none !important; /* Siempre oculto - no se usa */
}

/* Animación cuando el offcanvas se abre - El botón se posiciona FUERA como etiqueta */
.btn-filter-fab.offcanvas-active {
  right: 85vw; /* Pegado al borde izquierdo del offcanvas */
  background: #0d2b52;
  box-shadow: -2px 0 8px rgba(11, 34, 68, 0.2);
}

.btn-filter-fab.offcanvas-active .filter-arrow {
  transform: rotate(180deg);
  animation: none;
}

/* Transición suave al mover el botón en tablets */
@media (min-width: 576px) {
  .btn-filter-fab.offcanvas-active {
    right: 400px; /* Pegado al borde del offcanvas en tablets */
  }
}

/* ===== OFFCANVAS CUSTOMIZATION ===== */
#filtersOffcanvas {
  width: 85vw !important; /* 85% del ancho en móvil */
  max-width: 400px; /* Máximo en tablets */
  /* Ajuste para comenzar debajo del announcement bar */
  top: 40px !important; /* Altura del announcement bar */
  height: calc(100% - 40px) !important; /* Compensar el offset superior */
  z-index: 1049; /* Justo debajo del announcement bar (1050) */
}

#filtersOffcanvas .offcanvas-header {
  padding: 16px 20px;
  background: #f8f9fa;
}

#filtersOffcanvas .offcanvas-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

#filtersOffcanvas .offcanvas-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ajustar backdrop para que comience debajo del announcement bar */
.offcanvas-backdrop {
  top: 40px !important;
  height: calc(100% - 40px) !important;
}

/* ===== FILTROS DENTRO DEL OFFCANVAS ===== */
.mobile-filters-wrapper {
  padding: 0;
}

.mobile-filters-wrapper .single-widget {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  margin: 0;
}

.mobile-filters-wrapper .single-widget:last-child {
  border-bottom: none;
}

/* Ocultar elementos NO deseados en móvil */
.mobile-filters-wrapper .widget.banner-widget,
.mobile-filters-wrapper .single-widget:has(> .widget-title) {
  display: none !important;
}

/* ===== OCULTAR SIDEBAR ORIGINAL EN MÓVIL ===== */
@media (max-width: 991.98px) {
  .product-sidebar {
    display: none !important; /* Ocultar completamente en móvil/tablet */
  }

  /* Productos ocupan todo el ancho */
  .product-grids .col-lg-9 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  /* Ajustar chips de filtros activos */
  #active-filters-wrapper {
    margin: 0 0 16px 0;
    font-size: 14px;
  }

  #active-filters-chips .badge {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
/* Móviles muy pequeños (<400px) - Optimización para iPhone SE, etc. */
@media (max-width: 399.98px) {
  .btn-filter-fab {
    width: 36px; /* Muy delgado para pantallas pequeñas */
    height: 110px; /* Más compacto */
    padding: 8px 4px;
  }

  .btn-filter-fab .filter-vertical-text {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .btn-filter-fab .filter-arrow {
    font-size: 14px;
  }

  .btn-filter-fab:hover {
    width: 40px; /* Hover más sutil */
  }

  .btn-filter-fab.offcanvas-active {
    right: 90vw; /* Pegado al borde */
  }

  #filtersOffcanvas {
    width: 90vw !important;
  }
}

/* Móviles estándar (400px - 575px) */
@media (min-width: 400px) and (max-width: 575.98px) {
  .btn-filter-fab {
    width: 38px;
    height: 115px;
    padding: 9px 5px;
  }

  .btn-filter-fab .filter-vertical-text {
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .btn-filter-fab .filter-arrow {
    font-size: 15px;
  }

  .btn-filter-fab.offcanvas-active {
    right: 85vw; /* Pegado al borde */
  }

  #filtersOffcanvas {
    width: 85vw !important;
  }
}

/* Tablets (576px - 991px) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .btn-filter-fab {
    width: 42px;
    height: 125px;
  }

  .btn-filter-fab.offcanvas-active {
    right: 400px; /* Pegado al borde del offcanvas */
  }

  #filtersOffcanvas {
    max-width: 400px;
  }
}

/* Desktop (≥992px) - Ocultar elementos móviles */
@media (min-width: 992px) {
  .btn-filter-fab,
  #filtersOffcanvas {
    display: none !important;
  }
}

/* ===== BOTÓN "VER PRODUCTOS" STICKY EN OFFCANVAS ===== */
.offcanvas-footer-sticky {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #dee2e6;
  padding: 16px 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1050;
  margin-top: auto; /* Empuja el botón al fondo */
}

#viewProductsButtonMobile {
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  border-radius: 8px;
  background: #0b2244 !important; /* Color corporativo azul marino */
  border-color: #0b2244 !important;
  transition: all 0.3s ease;
}

#viewProductsButtonMobile:hover {
  background: #0d2b52 !important; /* 10% más claro en hover */
  border-color: #0d2b52 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 34, 68, 0.4);
}

#viewProductsButtonMobile:active {
  transform: translateY(0);
  background: #091b35 !important; /* Más oscuro al presionar */
}

#viewProductsButtonMobile i {
  font-size: 18px;
}

#productCountMobile {
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 12px;
}

/* Ajustar body del offcanvas para incluir el botón sticky */
#filtersOffcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  padding-bottom: 0; /* Sin padding inferior para el sticky button */
}

#mobileFiltersContainer {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px; /* Espacio para scroll cómodo */
}

/* ===== FILTROS ACTIVOS MÓVILES (Solo dentro del Offcanvas) ===== */
#active-filters-wrapper-mobile {
  padding: 14px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin: 16px;
  margin-bottom: 8px;
}

#active-filters-wrapper-mobile h6 {
  color: #0a2344;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
}

#active-filters-wrapper-mobile h6 i {
  font-size: 15px;
}

#clear-all-filters-btn-mobile {
  font-size: 12px;
  padding: 5px 10px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
}

#clear-all-filters-btn-mobile:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.25);
}

#active-filters-chips-mobile {
  min-height: 28px;
  gap: 8px !important;
}

#active-filters-chips-mobile .badge {
  font-size: 12px;
  padding: 6px 10px;
  font-weight: 500;
}

/* Responsive para móviles pequeños */
@media (max-width: 575.98px) {
  .offcanvas-footer-sticky {
    padding: 12px 16px;
  }

  #viewProductsButtonMobile {
    font-size: 14px;
    padding: 10px;
  }

  #active-filters-wrapper-mobile {
    padding: 12px;
    margin: 12px;
  }

  #active-filters-chips-mobile .badge {
    font-size: 11px;
    padding: 5px 8px;
  }
}
/* ===== END FILTROS MÓVILES ===== */

/* SEO & UX IMPROVEMENT: Native Resolution Display */
/* Strategy: Limit width to 335px (native size) to prevent upscaling/blurriness while keeping image large */
@media (max-width: 767px) {
  .single-product {
    padding: 15px !important; /* Reduced padding to maximize available space */
  }

  .single-product .product-image img {
    width: 100%;
    height: auto;
    max-width: 335px !important; /* STRICT LIMIT: Native resolution to avoid "Low Resolution" SEO error */
    margin: 0 auto; /* Center the image in the available space */
    display: block;
  }
}

/*======================================
    Testimonials Google Reviews CSS
========================================*/
.testimonials-section {
  background-color: #f9f9f9;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.testimonials-section .section-title {
  margin-bottom: 40px;
}

.testimonials-section .section-title h2 {
  color: var(--color-secondary);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: none !important; /* Fix: Respect original casing */
}

.testimonials-section .section-title p {
  color: #666;
  font-size: 16px;
}

/* Scroll Snap Container */
.testimonials-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 20px 5px 40px 5px; /* Padding bottom for shadow */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  align-items: stretch; /* Ensure all cards have same height */
}

.testimonials-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.testimonial-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px 30px; /* Increased vertical padding */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease;
  height: auto; /* Allow grow */
  min-height: 380px; /* Fix: Enforce minimum height for uniformity */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Fix: Center content vertically */
  align-items: center; /* Fix: Center content horizontally */
  gap: 25px; /* Increased gap */
  flex: 0 0 85%; /* Mobile: 85% width */
  scroll-snap-align: center;
  border: 1px solid rgba(0, 0, 0, 0.03);
  color: #000;
  font-weight: bold;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.testimonial-stars {
  color: #ffc107;
  margin-bottom: 0;
  font-size: 20px; /* Slightly larger stars */
}

.testimonial-text {
  font-style: italic;
  color: #555;
  margin-bottom: 0;
  font-size: 16px; /* Slightly larger text */
  line-height: 1.6;
  flex-grow: 0;
  max-width: 100%;
}

.testimonial-user {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 0;
  width: 100%;
}

.testimonial-user img {
  width: 45px; /* Larger profile image */
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
}

.user-info {
  text-align: left;
}

.user-info h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 2px;
}

.user-info span {
  font-size: 13px;
  color: #313131;
  display: block;
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 40px;
}

.google-badge img {
  width: 28px;
  height: 28px;
}

.google-badge span {
  font-weight: 700;
  color: #5f6368;
  font-size: 15px;
}

/* Navigation Buttons */
.testimonial-nav-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eee;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  font-size: 18px;
}

.testimonial-nav-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.testimonials-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .testimonial-card {
    flex: 0 0 45%; /* Tablet: 2 cards */
  }
}

@media (min-width: 992px) {
  .testimonial-card {
    flex: 0 0 32%; /* Desktop: 3 cards (approx) */
  }
  .testimonials-section {
    padding: 80px 0;
  }
}

/* ========================================
   BLACK FRIDAY ANNOUNCEMENT BAR
   Campaña temporal - Expira 1 Dic 2025
   ======================================== */
.bf-announcement-bar {
  background: linear-gradient(135deg, #0b2244 0%, #0d2a52 50%, #0b2244 100%);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
  padding: 5px 10px;
  box-shadow: 0 4px 0 #0b2244, 0 2px 8px rgba(0, 0, 0, 0.3);
}

.bf-announcement-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 187, 161, 0.05) 25%,
    rgba(0, 187, 161, 0.08) 50%,
    rgba(0, 187, 161, 0.05) 75%,
    transparent 100%
  );
  pointer-events: none;
}

.bf-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.bf-text-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  text-align: center;
}

.bf-title {
  color: #00bba1;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 187, 161, 0.5);
}

.bf-discount {
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
}

.bf-discount-amount {
  color: #00ffc8;
  font-weight: 800;
  font-size: 0.9rem;
  text-shadow: 0 0 8px rgba(0, 255, 200, 0.4);
}

.bf-separator {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
}

.bf-hide-mobile {
  display: none;
}

.bf-promo-text {
  color: #fff;
  font-weight: 500;
  font-size: 0.7rem;
}

.bf-code-inline {
  background: linear-gradient(135deg, #00bba1 0%, #00a08a 100%);
  color: #0b2244;
  font-weight: 800;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 2px;
}

.bf-countdown-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bf-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bf-time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 28px;
}

.bf-time-value {
  background: linear-gradient(180deg, #00bba1 0%, #009985 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 2px 5px;
  border-radius: 4px;
  min-width: 26px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bf-time-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

.bf-time-separator {
  color: #00bba1;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.bf-code-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bf-code-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.65rem;
  font-weight: 500;
}

.bf-code {
  background: linear-gradient(135deg, #00bba1 0%, #00a08a 100%);
  color: #0b2244;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.bf-limit {
  color: #ff6b6b;
  font-size: 1rem;
  font-weight: 600;
}

/* Tablet - 576px+ */
@media (min-width: 576px) {
  .bf-announcement-bar {
    padding: 8px 15px;
  }

  .bf-content {
    flex-direction: row;
    gap: 12px;
  }

  .bf-title {
    font-size: 0.85rem;
  }

  .bf-discount {
    font-size: 0.8rem;
  }

  .bf-discount-amount {
    font-size: 0.95rem;
  }

  .bf-hide-mobile {
    display: inline;
  }

  .bf-promo-text {
    font-size: 0.8rem;
  }

  .bf-code-inline {
    font-size: 0.7rem;
    padding: 2px 8px;
  }

  .bf-time-value {
    font-size: 0.9rem;
    padding: 3px 6px;
    min-width: 30px;
  }

  .bf-time-label {
    font-size: 0.55rem;
  }

  .bf-code {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .bf-limit {
    font-size: 1rem;
  }
}

/* Desktop - 992px+ */
@media (min-width: 992px) {
  .bf-announcement-bar {
    padding: 8px 20px;
  }

  .bf-content {
    gap: 20px;
  }

  .bf-text-row {
    gap: 10px;
  }

  .bf-title {
    font-size: 0.95rem;
    letter-spacing: 2px;
  }

  .bf-promo-text {
    font-size: 0.85rem;
  }

  .bf-code-inline {
    font-size: 0.75rem;
    padding: 3px 10px;
  }

  .bf-discount-amount {
    font-size: 1rem;
  }

  .bf-countdown-row {
    gap: 15px;
  }

  .bf-time-unit {
    min-width: 36px;
  }

  .bf-time-value {
    font-size: 1rem;
    padding: 4px 8px;
    min-width: 36px;
  }

  .bf-time-label {
    font-size: 0.6rem;
  }

  .bf-time-separator {
    font-size: 1rem;
  }

  .bf-code {
    font-size: 0.85rem;
    padding: 5px 12px;
  }

  .bf-code-label {
    font-size: 0.75rem;
  }

  .bf-limit {
    font-size: 1rem;
  }
}

/* Large Desktop - 1200px+ */
@media (min-width: 1200px) {
  .bf-content {
    gap: 30px;
  }

  .bf-title {
    font-size: 1rem;
  }

  .bf-promo-text {
    font-size: 0.9rem;
  }

  .bf-code-inline {
    font-size: 0.8rem;
    padding: 3px 12px;
  }

  .bf-discount-amount {
    font-size: 1.1rem;
  }

  .bf-time-value {
    font-size: 1.1rem;
    min-width: 40px;
  }
}

/* Animación sutil del contador */
@keyframes bf-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.bf-time-value.bf-pulse {
  animation: bf-pulse 0.3s ease-in-out;
}

/* Ocultar barra original cuando Black Friday está activo */
.bf-active .announcement-bar {
  display: none !important;
}

/* Ajustar padding del header cuando Black Friday está activo */
.bf-active .header.navbar-area {
  padding-top: 66px;
}

@media (min-width: 576px) {
  .bf-active .header.navbar-area {
    padding-top: 50px;
  }
}

@media (min-width: 768px) {
  .bf-active .header.navbar-area {
    padding-top: 48px;
  }
}

@media (min-width: 992px) {
  .bf-active .header.navbar-area {
    padding-top: 50px;
  }
}

@media (min-width: 1200px) {
  .bf-active .header.navbar-area {
    padding-top: 50px;
  }
}
/* Fin Black Friday Announcement Bar */