:root {
   --primary: #00227E;
   --primary-hover: #0C50BE;
   --primary-light: #006FFE;
   --secondary: #00227E;
   --secondary-dark: #00227E;
   --secondary-light: #0C50BE;
   --dark: #1e293b;
   --dark-muted:#828DAB; /* #475569*/
   --light: #f8fafc;
   --white: #ffffff;
   --success: #10b981;
   --danger: #ef4444;
   --gray-bg: #f4f5f7;
   --font-heading: 'Outfit', sans-serif;
   --font-body: 'Inter', sans-serif;
   --container-width: 1024px;
   --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   --shadow-card: 0 6px 16px rgba(0, 34, 126, 0.18);
   --shadow-card-hover: 0 16px 32px rgba(0, 34, 126, 0.2);
}

/* ===== RESET & BASE ===== */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: var(--font-body);
   color: var(--dark-muted);
   background-color: var(--white);
   line-height: 1.6;
   overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-heading);
   color: var(--dark);
   font-weight: 700;
   line-height: 1.2;
}

a {
   color: var(--primary);
   text-decoration: none;
   transition: var(--transition);
}

a:hover {
   color: var(--primary-light);
}

ul {
   list-style: none;
}

.container {
   max-width: var(--container-width);
   margin: 0 auto;
}

img {
   max-width: 100%;
   height: auto;
}

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

.mt-5 {
   margin-top: 3rem;
}

.flash-error {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   margin: 1.5rem 0;
   padding: 0.9rem 1.25rem;
   border-radius: 8px;
   background: #fef2f2;
   border: 1px solid #fecaca;
   color: #b91c1c;
   font-weight: 500;
}

.mb-2 {
   margin-bottom: 0.5rem;
}

.w-100 {
   width: 100%;
}

.d-inline {
   display: inline-flex;
}

.bg-light {
   background-color: var(--gray-bg);
}

.text-primary {
   color: var(--primary);
}

.text-secondary {
   color: var(--secondary);
}

.font-bold {
   font-weight: bold;
}

.link-hover-red {
    color: #FF185A !important;
}

/* ===== BUTTONS ===== */

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.5rem 1rem;
   font-family: var(--font-heading);
   font-weight: 600;
   border-radius: 6px;
   cursor: pointer;
   transition: var(--transition);
   border: 2px solid transparent;
   gap: 0.5rem;
   font-size: 0.9rem;
}

.btn-lg {
   padding: 0.8rem 2rem;
   font-size: 1.1rem;
}

.btn-primary {
   background-color: var(--secondary);
   color: var(--white);
}

.btn-primary:hover {
   background-color: var(--primary-light);
   color: var(--white);
   transform: translateY(-2px);
}

.btn-outline {
   background-color: transparent;
   color: var(--secondary);
   border-color: var(--secondary);
}

.btn-outline:hover {
   background-color: var(--primary-light);
   color: var(--white);
}

.btn-icon {
   padding: 0.5rem 0.8rem;
}

.btn-light {
   background-color: #e2e8f0;
   color: var(--secondary);
}

.btn-light:hover {
   color: var(--white);
   background-color: var(--primary-light);
}

.btn-cotizador-seguir-buscando{
   background: #E0E3EA; 
   color: #03247E; 
   text-decoration: underline;
   padding: 0.8rem 1.8rem; 
   border-radius: 6px; 
   display: inline-block; 
   font-weight: 600; 
   font-size: 0.9rem;
}

/* ===== HEADER / NAVBAR (3 Rows) ===== */

.topbar {
   background: var(--primary);
   color: #ffffff;
   width: 100%;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0;
   flex-wrap: wrap;
   padding: 0;
}

.topnav {
   display: flex;
   flex-wrap: wrap;
   width: auto;
}

.topnav .nav-item {
   border: none;
   background: var(--primary);
   color: #ffffff;
   padding: 6px 26px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   font-size: 0.95rem;
   font-weight: 500;
}

.topnav .nav-item img {
   width: 24px;
   height: 24px;
   object-fit: contain;
}

.topnav .nav-item:hover,
.topnav .nav-item.active {
   background: var(--primary-hover);
   transform: translateY(-1px);
}

.header-mail {
   background-color: #F3F3F6;
   color: var(--primary);
   width: 100%;
   padding: 0.4rem 0;
   font-size: 1.25rem;
   font-weight: bold;
   text-align: center;
}

.header-mail .container {
   max-width: 100%;
   width: 100%;
   padding: 0 clamp(1.25rem, 3.5vw, 4rem);
}

.header-mail a:hover {
   color: var(--primary);
}

.header-middle {
   width: 100%;
   padding: 0.65rem 0 0.75rem;
   background: var(--white);
   border-bottom: 1px solid #e6e9ef;
}

.header-middle .container {
   position: relative;
   max-width: 100%;
   width: 100%;
   padding: 0 clamp(1rem, 2.5vw, 3rem);
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-template-rows: auto auto;
   grid-template-areas:
      "logo search  actions"
      "logo nav     actions";
   align-items: center;
   column-gap: clamp(1.5rem, 3vw, 3.5rem);
   row-gap: 0.65rem;
}

.brand-logo {
   grid-area: logo;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   align-self: center;
}

.brand-logo .logo-img {
   max-height: 85px;
   width: auto;
   object-fit: contain;
}

.brand-meri {
   color: var(--secondary);
   font-family: var(--font-heading);
   font-size: 2rem;
   font-weight: 800;
   letter-spacing: -1px;
}

.brand-equipos {
   color: var(--primary);
   font-family: var(--font-heading);
   font-size: 2rem;
   font-weight: 800;
   letter-spacing: -1px;
}

.brand-sub {
   font-size: 0.7rem;
   color: var(--secondary);
   display: block;
   margin-top: -5px;
   letter-spacing: 1px;
}

.search-bar {
   grid-area: search;
   max-width: 680px;
   width: 100%;
   display: flex;
   margin: 0 auto;
}

.search-bar input {
   width: 100%;
   padding: 0.65rem 1.25rem;
   border: 1px solid #cbd5e1;
   border-right: none;
   border-radius: 6px 0 0 6px;
   outline: none;
   font-family: var(--font-body);
   font-size: 0.95rem;
   color: #334155;
}

.search-bar input::placeholder {
   color: #94a3b8;
}

.search-bar button {
   padding: 0.65rem 1.25rem;
   background: #1a56db;
   color: white;
   border: none;
   border-radius: 0 6px 6px 0;
   cursor: pointer;
   transition: var(--transition);
   display: flex;
   align-items: center;
   justify-content: center;
}

.search-bar button:hover {
   background: var(--primary-light);
}

.header-actions {
   grid-area: actions;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 1.5rem;
   align-self: center;
}

.action-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: #0f172a;
   font-size: 0.85rem;
   font-weight: 500;
   gap: 0.25rem;
   white-space: nowrap;
}

.action-icon {
   height: 30px;
   width: auto;
   object-fit: contain;
}

.action-item i {
   font-size: 1.2rem;
}

.action-item:hover {
   color: var(--primary);
}

.cart-action {
   position: relative;
}

.cart-badge {
   position: absolute;
   top: -5px;
   right: -4px;
   background: #ef4444;
   color: white;
   font-size: 0.7rem;
   width: 17px;
   height: 17px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
}

/* ===== Navegación principal (Alineada en el centro bajo el buscador) ===== */

.header-bottom {
   grid-area: nav;
   width: 100%;
   margin: 0;
   --nav-pad-y: 0.25rem;
   --nav-font: 1.1rem;
   background: transparent;
}

.nav-list {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: nowrap;
   gap: clamp(1.25rem, 2.5vw, 2.75rem);
   padding: 0.15rem 0 var(--nav-pad-y);
   margin: 0;
   width: 100%;
}

.nav-list li {
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
}

.nav-list a {
   color: #00227E;
   font-weight: 700;
   font-family: var(--font-heading);
   text-transform: none;
   font-size: var(--nav-font);
   letter-spacing: 0.3px;
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
}

.nav-list a.active,
.nav-list a.nav-featured {
   color: var(--primary-light);
   font-weight: 700;
}

.nav-list a:hover {
   color: var(--primary-light) !important;
   font-weight: 700;
}

.mobile-toggle {
   display: none;
   background: none;
   border: none;
   font-size: 1.5rem;
   color: var(--secondary);
   cursor: pointer;
}

/* ===== MEGA MENÚ DE PRODUCTOS Una columna por división, con sus categorías debajo. ===== */

/* ===== El panel se ancla al contenedor del header (declarado position: relative en .header-middle .container), no al <li>, para ocupar todo el ancho. ===== */

.has-mega-menu>a {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
}

.mega-caret {
   font-size: 0.5em;
   transition: transform 0.25s;
}

.has-mega-menu:hover .mega-caret,
.has-mega-menu.is-open .mega-caret {
   color: var(--primary-light);
   transform: rotate(180deg);
}

.has-mega-menu>a::after {
   content: "";
   position: absolute;
   /* ===== Se alinea con el borde del panel, que arranca al final del nav ===== */

   top: calc(100% + var(--nav-pad-y) - 7px);
   left: 50%;
   width: 14px;
   height: 14px;
   background: var(--white);
   transform: translateX(-50%) rotate(45deg);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s, visibility 0.25s;
   z-index: 2;
}

.mega-menu {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background: var(--white);
   border-radius: 18px;
   box-shadow: 0 18px 44px rgba(0, 34, 126, 0.18);
   padding: 2rem 1.5rem;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
   z-index: 1;
}

.has-mega-menu:hover .mega-menu,
.has-mega-menu:focus-within .mega-menu,
.has-mega-menu.is-open .mega-menu {
   color: var(--primary-light);
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.has-mega-menu:hover>a::after,
.has-mega-menu:focus-within>a::after,
.has-mega-menu.is-open>a::after {
   color: var(--primary-light);
   opacity: 1;
   visibility: visible;
}

.mega-menu-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   column-gap: 0;
   row-gap: 2rem;
}

.mega-col {
   padding: 0 1.5rem;
   border-left: 1px solid #e2e8f0;
}

.mega-col:nth-child(5n + 1) {
   border-left: none;
}

.mega-col-title {
   font-size: 1.05rem;
   line-height: 1.25;
   margin-bottom: 1.1rem;
}

.mega-col-title a {
   color: var(--secondary);
   font-weight: 700;
   font-family: var(--font-heading);
   font-size: inherit;
}

.mega-col-title a:hover {
   color: var(--primary-light);
}

.mega-col-list {
   list-style: none;
   padding: 0;
   margin: 0 0 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.7rem;
}

.mega-col-list a {
   color: #93a3c4;
   font-family: var(--font-heading);
   font-weight: 400;
   font-size: 0.88rem;
   line-height: 1.3;
   letter-spacing: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.mega-col-list a:hover {
   color: var(--primary-light);
}

.mega-col-more {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   color: var(--secondary);
   font-family: var(--font-heading);
   font-weight: 700;
   font-size: 14px;
}

.mega-col-more:hover {
   color: var(--primary-light);
   gap: 0.7rem;
}

/* ===== Menú desplegable simple (Soporte): panel angosto centrado bajo el item ===== */

.has-drop-menu {
   position: relative;
}

.has-drop-menu>a {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
}

.drop-menu {
   position: absolute;
   top: calc(100% + var(--nav-pad-y));
   left: 50%;
   transform: translateX(-50%) translateY(-8px);
   min-width: 290px;
   background: var(--white);
   border-radius: 20px;
   box-shadow: 0 18px 44px rgba(0, 34, 126, 0.18);
   padding: 1.75rem 1.5rem;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
   z-index: 101;
}

.drop-menu::before {
   content: "";
   position: absolute;
   top: -7px;
   left: 50%;
   width: 14px;
   height: 14px;
   background: var(--white);
   transform: translateX(-50%) rotate(45deg);
}

.has-drop-menu:hover .drop-menu,
.has-drop-menu:focus-within .drop-menu,
.has-drop-menu.is-open .drop-menu {
   color: var(--primary-light);
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
}

.has-drop-menu:hover .mega-caret,
.has-drop-menu.is-open .mega-caret {
   color: var(--primary-light);
   transform: rotate(180deg);
}

.drop-menu-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 0.9rem;
   text-align: center;
}

.drop-menu-list a {
   color: #93a3c4;
   font-family: var(--font-heading);
   font-weight: 400;
   font-size: 1.05rem;
   letter-spacing: 0;
}

.drop-menu-list a:hover {
   color: var(--primary-light);
}

/* ===== HERO SECTION ===== */

.hero-slider {
   --hero-aspect: 1800 / 540;
   background: var(--secondary);
   position: relative;
   overflow: hidden;
   width: 100%;
   aspect-ratio: var(--hero-aspect);
   min-height: 200px;
}

.hero-slides {
   position: relative;
   width: 100%;
   height: 100%;
}

.hero-slide {
   position: absolute;
   inset: 0;
   display: none;
   width: 100%;
   height: 100%;
   animation: fadeEffect 0.8s;
}

.hero-slide.active {
   display: block;
}

@keyframes fadeEffect {
   from {
      opacity: 0.4;
   }

   to {
      opacity: 1;
   }
}

.hero-container {
   display: block;
   width: 100%;
   max-width: none;
   height: 100%;
   margin: 0;
}

.hero-container>* {
   width: 100%;
   height: 100%;
}

.hero-slide img,
.hero-slide video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.hero-slide video {
   background: var(--secondary);
}

.hero-left {
   flex: 1;
   padding: 4rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   color: white;
}

.hero-right {
   flex: 1;
   padding: 4rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   color: white;
}

.hero-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
   display: flex;
   justify-content: space-between;
   padding: 0 2rem;
   z-index: 10;
   pointer-events: none;
}

.hero-nav button {
   pointer-events: auto;
   background: transparent;
   border: none;
   color: var(--light);
   font-size: 3rem;
   cursor: pointer;
   transition: color 0.3s;
}

.hero-nav button:hover {
   color: var(--primary-light);
}

.hero-title {
   font-family: 'Outfit', sans-serif;
   font-size: 2.5rem;
   line-height: 1.15;
   font-weight: 700;
   margin: 0 0 1rem;
   color: #fff;
}

.hero-subtitle {
   font-size: 1.05rem;
   line-height: 1.5;
   max-width: 32rem;
   margin: 0 0 1.75rem;
   color: rgba(255, 255, 255, 0.85);
}

.hero-cta {
   align-self: flex-start;
}

.hero-pagination {
   position: absolute;
   bottom: 1.25rem;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.55rem;
   z-index: 10;
}

.hero-dot {
   width: 100px;
   height: 4px;
   padding: 0;
   border: none;
   border-radius: 2px;
   background: rgba(255, 255, 255, 0.45);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
   cursor: pointer;
   transition: background 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}

.hero-dot:hover {
   background: rgba(255, 255, 255, 0.85);
}

.hero-dot.active {
   background: #fff;
   width: 100px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ===== SECTIONS ===== */

/* ===== MID SLIDER (banner entre secciones) ===== */

.mid-slider-section {
   position: relative;
   width: 100%;
   overflow: hidden;
   background: var(--secondary);
   aspect-ratio: 1800 / 540;
   
}

.mid-slides {
   width: 100%;
   height: 100%;
   position: relative;
}

.mid-slide {
   position: absolute;
   inset: 0;
   display: none;
   width: 100%;
   height: 100%;
   animation: fadeEffect 0.7s;
}

.mid-slide.active { display: block; }

.mid-slide img,
.mid-slide video,
.mid-slide > a {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.mid-slide > a img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Overlay de texto opcional */
.mid-slide-content {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   padding: 2rem 4rem;
   background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, transparent 65%);
   z-index: 2;
   color: #fff;
   gap: 0.75rem;
}

.mid-slide-title {
   font-family: var(--font-heading);
   font-size: 2rem;
   font-weight: 800;
   color: #fff;
   margin: 0;
   line-height: 1.2;
}

.mid-slide-sub {
   font-size: 1rem;
   color: rgba(255,255,255,0.88);
   margin: 0;
   max-width: 32rem;
}

.mid-slide-btn {
   display: inline-block;
   background: var(--secondary);
   color: #fff;
   font-family: var(--font-heading);
   font-weight: 700;
   padding: 0.6rem 1.5rem;
   border-radius: 8px;
   text-decoration: none;
   font-size: 0.95rem;
   transition: background 0.2s, transform 0.15s;
}

.mid-slide-btn:hover {
   background: #0C50BE;
   transform: translateY(-2px);
}

/* Controles de navegación */
.mid-nav {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   pointer-events: none;
   z-index: 10;
   padding: 0 0.75rem;
}

.mid-nav-btn {
   pointer-events: all;
   background: rgba(255,255,255,0.22);
   border: none;
   color: #fff;
   font-size: 2rem;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(4px);
   transition: background 0.2s;
   line-height: 1;
}

.mid-nav-btn:hover { background: rgba(255,255,255,0.4); }

/* Bullets */
.mid-pagination {
   position: absolute;
   bottom: 0.75rem;
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 0.4rem;
   z-index: 10;
}

.mid-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: none;
   background: rgba(255,255,255,0.5);
   cursor: pointer;
   padding: 0;
   transition: background 0.2s, transform 0.2s;
}

.mid-dot.active {
   background: #fff;
   transform: scale(1.3);
}

.section {
   padding: 4rem 0;
}

.section-title {
   text-align: center;
   color: var(--secondary);
   font-size: 1.8rem;
   margin-bottom: 3rem;
   position: relative;
   padding-bottom: 1rem;
}

.section-title::after {
   content: "";
   display: block;
   width: 100%;
   height: 1px;
   background: #e2e8f0;
   position: absolute;
   left: 0;
   bottom: 0;
}

.section-title span {
   background: transparent;
   padding: 0;
}

.container-destacados {
   width: 96%;
   max-width: 1720px;
   margin: 0 auto;
   padding: 0 1rem;
}

.section-destacados {
   padding: 3.5rem 0;
   width: 100%;
}

.dest-carousel {
   position: relative;
   display: flex;
   align-items: center;
   gap: 1.25rem;
   width: 100%;
}

.dest-arrow {
   flex-shrink: 0;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #214EA8;
   color: #fff;
   border: none;
   cursor: pointer;
   display: flex !important;
   align-items: center;
   justify-content: center;
   font-size: 1.15rem;
   box-shadow: 0 4px 14px rgba(33, 78, 168, 0.32);
   transition: background .2s, transform .15s, opacity .3s;
   z-index: 2;
   outline: none;
}

.dest-arrow:hover:not(:disabled) {
   background: #0C50BE;
   transform: scale(1.08);
}

.dest-arrow:disabled {
   opacity: 0.35;
   cursor: default;
}

.dest-track-wrap {
   flex: 1;
   min-width: 0;
   width: 100%;
}

.dest-track {
   position: relative;
   width: 100%;
}

.dest-page {
   display: none;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
   width: 100%;
   animation: destFadeIn .35s ease;
}

.dest-page.active {
   display: grid;
}

@keyframes destFadeIn {
   from { opacity: 0; transform: translateY(6px); }
   to   { opacity: 1; transform: translateY(0); }
}

.dest-footer-bar {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 1.75rem;
   min-height: 40px;
   width: 100%;
}

.dest-pagination {
   display: flex !important;
   justify-content: center;
   align-items: center;
   gap: .65rem;
   margin: 0;
}

.dest-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #cbd5e1;
   border: none;
   cursor: pointer;
   padding: 0;
   transition: background .25s, transform .25s;
}

.dest-dot.active {
   background: #214EA8;
   transform: scale(1.3);
}

.dest-action-wrap {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
}

.btn-dest-store {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background-color: #214EA8;
   color: #ffffff !important;
   font-family: var(--font-body);
   font-size: 0.88rem;
   font-weight: 600;
   padding: 0.55rem 1.25rem;
   border-radius: 6px;
   text-decoration: none !important;
   box-shadow: 0 2px 6px rgba(33, 78, 168, 0.25);
   transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
   letter-spacing: 0.2px;
}

.btn-dest-store:hover {
   background-color: #0C50BE;
   color: #ffffff !important;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(33, 78, 168, 0.35);
}

.product-card-new {
   background: var(--white);
   border: 1px solid #c7d2fe;
   border-radius: 14px;
   padding: 1.5rem 1.25rem 1.25rem;
   position: relative;
   transition: var(--transition);
   display: flex;
   flex-direction: column;
   height: 100%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.product-card-new:hover {
   box-shadow: 0 10px 24px rgba(33, 78, 168, 0.12);
   transform: translateY(-4px);
   border-color: #93c5fd;
}

.product-tag {
   position: absolute;
   top: 0px;
   left: 0px;
   background: #FF185A;
   color: white;
   padding: 0.35rem 0.85rem;
   font-size: 0.78rem;
   font-weight: 700;
   border-radius: 14px 0 14px 0;
   box-shadow: var(--shadow-sm);
   letter-spacing: 0.3px;
}

.product-model {
   font-size: 0.78rem;
   color: #64748b;
   text-align: center;
   margin-bottom: 0.4rem;
   line-height: 1.3;
}

.product-title-new {
   font-size: 0.98rem;
   color: #00227E;
   text-align: center;
   margin: 0 0 0.85rem;
   font-weight: 600;
   line-height: 1.35;
   min-height: 2.7rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.product-img-new {
   height: 175px;
   object-fit: contain;
   margin: 0.5rem auto 1rem;
   display: block;
   max-width: 100%;
}

.product-price-box {
   text-align: center;
   margin-top: auto;
   padding-top: 0.75rem;
   border-top: 1px dashed #e2e8f0;
}

.product-price-old {
   font-size: 0.82rem;
   color: #94a3b8;
   text-decoration: line-through;
   margin-bottom: 0.15rem;
   font-weight: 500;
}

.product-price-new {
   font-size: 1.28rem;
   font-weight: 800;
   color: #0f172a;
   font-family: var(--font-heading);
}

.product-availability {
   font-size: 0.8rem;
   color: #16a34a;
   font-weight: 600;
   display: block;
   margin-top: 0.25rem;
}

.product-actions-new {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   margin-top: 1rem;
}

.product-actions-new form {
   margin: 0;
   width: 100%;
}

.product-actions-new .btn {
   width: 100%;
   font-size: 0.84rem;
   padding: 0.6rem 0.8rem;
   border-radius: 8px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   transition: all 0.25s ease;
   border: 1px solid transparent;
}

.product-actions-new .btn-quote {
   background-color: #214EA8;
   color: #ffffff;
}

.product-actions-new .btn-quote:hover {
   background-color: #0C50BE;
   color: #ffffff;
   transform: translateY(-1px);
}

.product-actions-new .btn-cart {
   background-color: #e8eef8;
   color: #214EA8;
}

.product-actions-new .btn-cart:hover {
   background-color: #dbeafe;
   color: #00227E;
   transform: translateY(-1px);
}

.btn-link-right {
   display: block;
   text-align: right;
   margin-top: 1.5rem;
   font-weight: 600;
   font-size: 0.9rem;
}

.divisiones-grid {
   --div-gap: 1.5rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--div-gap);
   width: 100%;
}

.div-card {
   position: relative;
   border-radius: 14px;
   overflow: hidden;
   flex: 0 0 calc(25% - (var(--div-gap) * 3 / 4));
   max-width: 400px;
   aspect-ratio: 1 / 1;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding: 1.5rem;
   text-decoration: none;
   box-shadow: var(--shadow-card);
   transition: var(--transition);
}

.div-card:hover {
   z-index: 2;
   box-shadow: var(--shadow-card-hover);
}

.div-card img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
}

.div-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to top, rgba(11, 54, 135, 0.4), rgba(11, 54, 135, 0.1));
   z-index: 1;
}

.div-title {
   position: relative;
   z-index: 2;
   color: white;
   font-weight: 700;
   font-family: var(--font-heading);
   font-size: 1.5rem;
   text-align: center;
   margin: 0;
   /* ===== Crece desde la base para que no se salga por abajo de la tarjeta ===== */

   transform-origin: center bottom;
   transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.div-card:hover .div-title {
   transform: translateY(-12px) scale(1.15);
}

.video-banner {
   position: relative;
   width: 100%;
   overflow: hidden;
   height: clamp(280px, 42vw, 600px);
   background: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 4rem 0;
}

.video-banner video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.video-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.2);
   transition: opacity 0.3s;
   pointer-events: none;
}

.play-btn {
   position: relative;
   z-index: 2;
   color: white;
   font-size: 4rem;
   line-height: 1;
   cursor: pointer;
   transition: transform 0.3s, opacity 0.3s;
   opacity: 0.8;
   background: none;
   border: none;
   padding: 0;
}

.play-btn:hover {
   transform: scale(1.1);
   opacity: 1;
}

.video-banner.is-playing .video-overlay,
.video-banner.is-playing .play-btn {
   opacity: 0;
   pointer-events: none;
}

/* ===== ¿POR QUÉ ELEGIRNOS? ===== */

.why-us-section {
   background: linear-gradient(90deg, #0E277B 0%, #1F3C9A 50%, #3051BA 100%);
   width: 100%;
   padding: 5rem 0;
}

.why-us-inner {
   display: grid;
   grid-template-columns: 1.32fr 1fr;
   align-items: center;
   gap: 3.5rem;
   max-width: 1380px;
   width: 92%;
   margin: 0 auto;
}

.why-us-img-col {
   position: relative;
   overflow: hidden;
   border-radius: 4px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
   aspect-ratio: 16 / 9;
   width: 100%;
   background: #000;
}

.why-us-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.why-us-text-col {
   padding: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 1.25rem;
}

.why-us-title {
   font-family: var(--font-heading);
   font-size: 2.2rem;
   font-weight: 700;
   color: #fff;
   margin: 0;
   line-height: 1.2;
}

.why-us-body {
   font-size: 0.95rem;
   line-height: 1.65;
   color: rgba(255, 255, 255, 0.9);
   margin: 0;
   text-align: left;
}

.why-us-link {
   display: inline-block;
   color: #fff;
   font-size: 1rem;
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 4px;
   transition: color 0.2s, opacity 0.2s;
   width: fit-content;
   margin-top: 0.35rem;
}

.why-us-link:hover {
   color: #cbd5e1;
   opacity: 0.9;
}

.services-events-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   justify-content: center;
   max-width: 900px;
   margin: 0 auto;
}

.se-card {
   position: relative;
   border-radius: 16px;
   overflow: hidden;
   height: 250px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.se-card img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
}

.se-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(11, 54, 135, 0.6);
   z-index: 1;
}

.se-title {
   position: relative;
   z-index: 2;
   color: white;
   font-size: 1.5rem;
   font-weight: 700;
   text-align: center;
}

.promos-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
}

.promo-banner {
   border-radius: 12px;
   overflow: hidden;
   box-shadow: var(--shadow-card);
   transition: var(--transition);
}

.promo-banner:hover {
   z-index: 2;
   box-shadow: var(--shadow-card-hover);
}

.promo-banner img {
   width: 100%;
   height: auto;
   display: block;
}

.promos-action-wrap {
   display: flex;
   justify-content: flex-end;
   margin-top: 1.75rem;
   width: 100%;
}

.marcas-slider {
   position: relative;
   width: 100%;
   overflow: hidden;
   padding: 2rem 0;
   -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
   mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marcas-track {
   display: flex;
   align-items: center;
   width: max-content;
   animation: marcas-scroll 40s linear infinite;
}

.marca-item {
   flex: 0 0 auto;
   margin-right: 4rem;
   display: flex;
   align-items: center;
}

.marca-item img {
   height: 40px;
   width: auto;
   max-width: none;
   object-fit: contain;
   filter: grayscale(0%);
   opacity: 1;
   transition: var(--transition);
}

.marca-item:hover img {
   filter: grayscale(100%);
   opacity: 0.6;
}

@keyframes marcas-scroll {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-50%);
   }
}

.marcas-slider:hover .marcas-track,
.marcas-track:focus-within {
   animation-play-state: paused;
}

/* ===== FOOTER NEW ===== */

.footer-new {
   background: linear-gradient(90deg, #0E277B 0%, #1F3C9A 50%, #3051BA 100%);
   color: #ffffff;
   padding: 4rem 0 3.5rem;
   font-size: 1.05rem;
}

.footer-grid-new {
   display: grid;
   grid-template-columns: 1.6fr 1fr 1fr 1fr;
   gap: 3rem;
   align-items: start;
}

.newsletter-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 0 1rem;
}

.footer-logo {
   display: block;
   border-bottom: 1px solid rgba(255, 255, 255, 0.45);
   padding-bottom: 1rem;
   margin-bottom: 1rem;
   width: 100%;
   max-width: 330px;
}

.footer-logo img {
   height: 105px;
   width: auto;
   filter: brightness(0) invert(1);
}

.newsletter-title {
   color: white;
   font-family: var(--font-heading);
   font-size: 1.4rem;
   font-weight: 700;
   margin-bottom: 0.35rem;
}

.newsletter-text {
   font-size: 1.02rem;
   line-height: 1.35;
   max-width: 26rem;
}

.newsletter-form {
   display: flex;
   width: 100%;
   max-width: 330px;
   margin-top: 1.25rem;
   background: var(--white);
   border-radius: 8px;
   overflow: hidden;
}

.newsletter-form input {
   flex-grow: 1;
   min-width: 0;
   padding: 0.7rem 1rem;
   border: none;
   border-radius: 0;
   outline: none;
   font-family: var(--font-body);
   font-size: 1rem;
   color: var(--dark);
}

.newsletter-form button {
   background: transparent;
   color: var(--secondary);
   border: none;
   border-left: 1px solid #cbd5e1;
   padding: 0 1.1rem;
   font-size: 1.15rem;
   cursor: pointer;
   transition: color 0.2s;
}

.newsletter-form button:hover {
   color: var(--primary-light);
}

.social-heading {
   font-family: var(--font-heading);
   font-weight: 700;
   font-size: 1.15rem;
   color: var(--white);
   margin-top: 1.5rem;
}

.social-icons-new {
   display: flex;
   gap: 0.65rem;
   margin-top: 0.9rem;
   flex-wrap: wrap;
   justify-content: center;
}

.social-icons-new a {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 1.2rem;
   text-decoration: none;
   transition: transform 0.2s, box-shadow 0.2s;
   overflow: hidden;
}

.social-icons-new a img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
   display: block;
   filter: none !important;
}

.social-icons-new a:hover {
   transform: translateY(-3px) scale(1.05);
}

.social-icons-new a.fb {
   background: #1877F2;
}

.social-icons-new a.x {
   background: #000000;
}

.social-icons-new a.ig {
   /* ===== Degradado de marca de Instagram ===== */

   background: radial-gradient(circle at 30% 107%,
         #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.social-icons-new a.yt {
   background: #FF0000;
}

.social-icons-new a.tk {
   background: #000000;
}

.social-icons-new a.wa {
   background: #25D366;
}

.social-icons-new a.ml {
   background: #FFE600;
   color: #2d3277;
}

.footer-col-new h4 {
   color: white;
   font-family: var(--font-heading);
   font-size: 1.35rem;
   font-weight: 700;
   margin-bottom: 0.7rem;
}

.footer-col-new h4:not(:first-child) {
   margin-top: 1.6rem;
}

.footer-col-new ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-col-new ul li {
   margin-bottom: 0.45rem;
   line-height: 1.3;
}

.footer-col-new p {
   line-height: 1.35;
}

.footer-col-new a {
   color: #ffffff;
   transition: color 0.2s;
}

.footer-col-new a:hover {
   color: #ffffff;
   text-decoration: underline;
}

.footer-mail-link {
   text-decoration: underline;
}

/* ===== CART ===== */

.cart-table th {
   background: var(--secondary);
   color: white;
   border-bottom: none;
   font-family: var(--font-heading);
}

.cart-summary {
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 1.5rem;
}

/* ===== PANEL LATERAL DEL CARRITO (derecha) ===== */

.cart-panel-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 34, 126, 0.45);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s, visibility 0.3s;
   z-index: 1000;
}

.cart-panel-overlay.is-open {
   opacity: 1;
   visibility: visible;
}

.cart-panel {
   position: fixed;
   top: 0;
   right: 0;
   height: 100%;
   width: 380px;
   max-width: 90vw;
   background: var(--white);
   box-shadow: -8px 0 32px rgba(0, 34, 126, 0.25);
   display: flex;
   flex-direction: column;
   transform: translateX(100%);
   transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
   z-index: 1001;
}

.cart-panel.is-open {
   transform: translateX(0);
}

/* ===== Evita el scroll del fondo mientras el panel está abierto ===== */

body.cart-panel-lock {
   overflow: hidden;
}

.cart-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1.25rem 1.5rem;
   background: var(--secondary);
   color: var(--white);
   flex-shrink: 0;
}

.cart-panel-header h3 {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   font-size: 1.15rem;
   color: var(--white);
   margin: 0;
}

.cart-panel-count {
   background: var(--white);
   color: var(--secondary);
   font-size: 0.75rem;
   font-weight: 700;
   min-width: 22px;
   height: 22px;
   border-radius: 11px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 0.4rem;
}

.cart-panel-header .cart-panel-close {
   background: none;
   border: none;
   color: var(--white);
   font-size: 1.25rem;
   cursor: pointer;
   opacity: 0.8;
   transition: opacity 0.2s;
   padding: 0.25rem;
   line-height: 1;
}

.cart-panel-header .cart-panel-close:hover {
   opacity: 1;
}

.cart-panel-alert {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin: 0;
   padding: 0.75rem 1.5rem;
   background: #d1fae5;
   color: #065f46;
   font-size: 0.85rem;
   font-weight: 600;
   flex-shrink: 0;
}

.cart-panel-body {
   flex: 1 1 auto;
   overflow-y: auto;
   padding: 0.5rem 1.5rem;
}

.cart-panel-item.is-new {
   animation: cart-item-highlight 2s ease-out;
}

@keyframes cart-item-highlight {
   from {
      background: #d1fae5;
   }

   to {
      background: transparent;
   }
}

.cart-panel-item {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1rem 0;
   border-bottom: 1px solid #f1f5f9;
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.cart-panel-thumb {
   flex: 0 0 70px;
   width: 70px;
   height: 70px;
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

.cart-panel-thumb img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.cart-panel-info {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
}

.cart-panel-name {
   font-family: var(--font-body);
   font-weight: 500;
   font-size: 0.95rem;
   color: #52667d;
   line-height: 1.35;
   text-decoration: none;
   transition: color 0.2s;
}

.cart-panel-name:hover {
   color: var(--primary);
}

.cart-panel-price {
   font-family: var(--font-heading);
   font-size: 1.05rem;
   font-weight: 800;
   color: #0f172a;
   letter-spacing: -0.2px;
}

.cart-stepper-row {
   display: flex;
   align-items: center;
   gap: 1.25rem;
   margin-top: 4px;
}

.cart-stepper {
   display: inline-flex;
   align-items: center;
   border: 1px solid #94a3b8;
   border-radius: 4px;
   background: #ffffff;
   overflow: hidden;
   height: 26px;
}

.btn-stepper-minus,
.btn-stepper-plus {
   width: 24px;
   height: 100%;
   border: none;
   background: transparent;
   color: #64748b;
   font-size: 1rem;
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   transition: background 0.15s, color 0.15s;
   font-family: inherit;
   user-select: none;
}

.btn-stepper-minus {
   border-right: 1px solid #cbd5e1;
}

.btn-stepper-plus {
   border-left: 1px solid #cbd5e1;
}

.btn-stepper-minus:hover,
.btn-stepper-plus:hover {
   background: #f1f5f9;
   color: var(--primary-light);
}

.btn-stepper-minus:active,
.btn-stepper-plus:active {
   background: #e2e8f0;
}

.stepper-val {
   min-width: 30px;
   text-align: center;
   font-size: 0.92rem;
   font-weight: 600;
   color: #1e3a8a;
   padding: 0 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.cart-panel-remove-form {
   margin: 0;
   display: inline-flex;
   align-items: center;
}

.cart-panel-delete-link {
   background: none;
   border: none;
   padding: 0;
   color: #1a56db;
   font-size: 0.88rem;
   font-weight: 500;
   text-decoration: underline;
   cursor: pointer;
   font-family: inherit;
   transition: color 0.15s;
}

.cart-panel-delete-link:hover {
   color: #0b3fa8;
}

.cart-panel-empty {
   text-align: center;
   padding: 3rem 1rem;
   color: var(--dark-muted);
}

.cart-panel-empty i {
   font-size: 2.5rem;
   color: #cbd5e1;
   margin-bottom: 1rem;
   display: block;
}

.cart-panel-empty p {
   margin-bottom: 1.5rem;
   font-size: 0.9rem;
}

.cart-panel-footer {
   flex-shrink: 0;
   padding: 1.25rem 1.5rem;
   border-top: 1px solid var(--gray-bg);
   background: var(--light);
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.cart-panel-total {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
}

.cart-panel-total span {
   color: var(--dark-muted);
   font-size: 0.9rem;
}

.cart-panel-total strong {
   font-family: var(--font-heading);
   font-size: 1.25rem;
   color: var(--secondary);
}

.cart-panel-note {
   margin: 0 0 0.4rem;
   font-size: 0.75rem;
   color: var(--dark-muted);
}

/* ===== PÁGINA DE CATEGORÍA (subcategorías en tarjetas + árbol lateral) ===== */

.cat-page {
   padding: 1.5rem 1rem 4rem;
}

.cat-breadcrumb {
   font-size: 1.0rem;
   margin-bottom: 1.5rem;
   color: var(--dark-muted);
}

.cat-breadcrumb a {
   color: var(--primary-light);
}

.cat-breadcrumb a:hover {
   text-decoration: underline;
}

.cat-breadcrumb-sep {
   margin: 0 0.4rem;
   color: #94a3b8;
}

.cat-breadcrumb-current {
   color: #94a3b8;
}

.cat-layout {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 2.5rem;
   align-items: start;
}

.cat-sidebar-eyebrow {
   font-family: var(--font-heading);
   font-size: 1.6rem;
   font-weight: 400;
   color: #93a3c4;
   line-height: 1.1;
   margin: 0;
}

.cat-sidebar-division {
   font-family: var(--font-heading);
   font-size: 1.7rem;
   font-weight: 700;
   color: #7e90b5;
   line-height: 1.1;
   margin: 0 0 1.5rem;
}

.cat-tree {
   list-style: none;
   padding: 0 0.75rem 0 0;
   margin: 0;
   max-height: 720px;
   overflow-y: auto;
}

.cat-tree::-webkit-scrollbar {
   width: 8px;
}

.cat-tree::-webkit-scrollbar-track {
   background: #f1f5f9;
   border-radius: 4px;
}

.cat-tree::-webkit-scrollbar-thumb {
   background: #cbd5e1;
   border-radius: 4px;
}

.cat-tree-row {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 0.5rem;
   padding: 0.45rem 0;
}

.cat-tree-link {
   font-family: var(--font-heading);
   font-size: 1.05rem;
   line-height: 1.25;
   color: #93a3c4;
   flex: 1 1 auto;
}

.cat-tree-link:hover {
   color: var(--primary-light);
}

.cat-tree-item.is-current>.cat-tree-row>.cat-tree-link {
   color: var(--secondary);
   font-weight: 700;
}

.cat-tree-toggle {
   flex: 0 0 auto;
   background: none;
   border: none;
   color: #93a3c4;
   font-size: 1.2rem;
   line-height: 1;
   cursor: pointer;
   padding: 0 0.15rem;
   transition: color 0.2s;
}

.cat-tree-toggle:hover {
   color: var(--primary-light);
}

.cat-tree-children {
   list-style: none;
   padding: 0 0 0.5rem 0.75rem;
   margin: 0;
   display: none;
}

.cat-tree-item.is-open>.cat-tree-children {
   display: block;
}

.cat-tree-children a {
   display: flex;
   gap: 0.45rem;
   align-items: baseline;
   font-family: var(--font-heading);
   font-size: 1rem;
   line-height: 1.25;
   color: #93a3c4;
   padding: 0.3rem 0;
}

.cat-tree-children a:hover {
   color: var(--primary-light);
}

.cat-tree-children i {
   font-size: 0.7rem;
   flex-shrink: 0;
   color: var(--primary-light);
}

.cat-title {
   font-family: var(--font-heading);
   font-size: 3rem;
   font-weight: 700;
   color: var(--secondary);
   text-align: center;
   margin: 0 0 2rem;
}

.cat-cards {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
}

.cat-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   border: 1px solid #cbd8ea;
   border-radius: 10px;
   padding: 1.25rem 1rem 1.5rem;
   background: var(--white);
   transition: var(--transition);
}

.cat-card:hover {
   border-color: var(--primary-light);
   box-shadow: var(--shadow-card);
}

.cat-card-media {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 190px;
   margin-bottom: 1rem;
}

.cat-card-media img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.cat-card-title {
   font-family: var(--font-heading);
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 1.25;
   margin: 0 0 1rem;
   flex: 1 1 auto;
   display: flex;
   align-items: flex-start;
   justify-content: center;
}

.cat-card-title a {
   color: var(--dark);
}

.cat-card-title a:hover {
   color: var(--primary-light);
}

.cat-card-btn {
   display: inline-block;
   font-family: var(--font-heading);
   font-size: 0.95rem;
   font-weight: 500;
   letter-spacing: 0.5px;
   color: #e6007e;
   border: 1px solid #e6007e;
   border-radius: 6px;
   padding: 0.4rem 1.5rem;
   transition: var(--transition);
}

.cat-card-btn:hover {
   background: #e6007e;
   color: var(--white);
}

.cat-empty {
   text-align: center;
   color: var(--dark-muted);
   padding: 3rem 1rem;
}

.cat-help {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   width: fit-content;
   margin: 3rem auto 0;
   padding: 1.1rem 2.5rem;
   background: #e2e8f4;
   border-radius: 8px;
   color: var(--secondary);
   font-family: var(--font-heading);
   font-size: 1.3rem;
   font-weight: 500;
   line-height: 1.2;
   text-align: center;
   transition: var(--transition);
}

.cat-help i {
   font-size: 2rem;
}

.cat-help:hover {
   background: var(--secondary);
   color: var(--white);
}

/* ===== Subtítulo de la tarjeta (marca · clave del producto) ===== */

.cat-card-subtitle {
   font-size: 0.85rem;
   color: #93a3c4;
   margin: -0.5rem 0 0.9rem;
   line-height: 1.25;
}

.cat-count {
   text-align: center;
   color: #93a3c4;
   font-size: 0.95rem;
   margin: -1rem 0 1.5rem;
}

.cat-tree-children li.is-current>a {
   color: var(--secondary);
   font-weight: 700;
}

.cat-pagination {
   margin-top: 2.5rem;
}

.cat-pagination nav {
   display: flex;
   justify-content: center;
}

.cat-pagination svg {
   width: 18px;
   height: 18px;
}

/* ===== TIENDA EN LÍNEA (filtros facetados + rejilla de productos) ===== */

.shop-page {
   padding: 1.5rem 1rem 4rem;
}

.shop-layout {
   display: grid;
   grid-template-columns: 215px 1fr;
   gap: 2rem;
   align-items: start;
}

.shop-layout.filters-hidden {
   grid-template-columns: 1fr;
}

.shop-layout.filters-hidden .shop-filters {
   display: none;
}

.shop-facet {
   border-bottom: 1px solid #e2e8f0;
   padding: 0.75rem 0;
}

.shop-facet-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
}

.shop-facet-head h3 {
   font-family: var(--font-heading);
   font-size: 1.1rem;
   font-weight: 400;
   color: #7e90b5;
   margin: 0;
}

.shop-facet-toggle {
   background: none;
   border: none;
   color: #93a3c4;
   font-size: 1.15rem;
   line-height: 1;
   cursor: pointer;
   padding: 0 0.15rem;
}

.shop-facet-toggle:hover {
   color: var(--primary-light);
}

.shop-facet-body {
   display: none;
   padding-top: 0.5rem;
}

.shop-facet.is-open .shop-facet-body {
   display: block;
}

/* ===== Marca y Categoría pueden tener decenas de opciones ===== */

.shop-facet-body.has-scroll {
   max-height: 320px;
   overflow-y: auto;
   padding-right: 0.5rem;
}

.shop-facet-body.has-scroll::-webkit-scrollbar {
   width: 7px;
}

.shop-facet-body.has-scroll::-webkit-scrollbar-track {
   background: #f1f5f9;
   border-radius: 4px;
}

.shop-facet-body.has-scroll::-webkit-scrollbar-thumb {
   background: #cbd5e1;
   border-radius: 4px;
}

.shop-check {
   display: flex;
   align-items: flex-start;
   gap: 0.45rem;
   padding: 0.22rem 0;
   cursor: pointer;
   font-size: 0.88rem;
   line-height: 1.25;
   color: #93a3c4;
}

.shop-check input {
   margin-top: 0.2rem;
   flex-shrink: 0;
   accent-color: var(--primary-light);
   cursor: pointer;
}

.shop-check:hover .shop-check-label {
   color: var(--primary-light);
}

.shop-check.is-checked .shop-check-label {
   color: var(--secondary);
   font-weight: 700;
}

.shop-facet-empty {
   font-size: 0.85rem;
   color: #cbd5e1;
}

.shop-clear-filters {
   display: inline-block;
   margin-top: 1rem;
   font-size: 0.85rem;
   color: var(--primary-light);
   text-decoration: underline;
}

.shop-toolbar {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1.5rem;
}

.shop-title {
   margin: 0;
   font-size: 2.6rem;
   white-space: nowrap;
}

.shop-toggle-filters {
   justify-self: start;
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   background: none;
   border: none;
   color: var(--primary-light);
   font-family: var(--font-heading);
   font-size: 0.95rem;
   cursor: pointer;
   padding: 0;
}

.shop-toggle-chevrons {
   letter-spacing: -1px;
}

.shop-toolbar-right {
   justify-self: end;
   display: flex;
   align-items: center;
   gap: 1.25rem;
}

.shop-sort {
   display: flex;
   align-items: center;
   gap: 0.6rem;
}

.shop-sort label {
   font-family: var(--font-heading);
   font-size: 0.95rem;
   color: var(--dark);
   white-space: nowrap;
}

.shop-sort select {
   padding: 0.45rem 0.7rem;
   border: 1px solid #cbd5e1;
   border-radius: 6px;
   font-family: var(--font-body);
   font-size: 0.85rem;
   color: var(--dark-muted);
   background: var(--white);
   cursor: pointer;
   max-width: 200px;
}

.shop-view {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.shop-view span {
   font-family: var(--font-heading);
   font-size: 0.95rem;
   color: var(--dark);
}

.shop-view a {
   color: #cbd5e1;
   font-size: 1.15rem;
   line-height: 1;
}

.shop-view a.is-active,
.shop-view a:hover {
   color: var(--primary-light);
}

.shop-result-note {
   color: #93a3c4;
   font-size: 0.92rem;
   margin-bottom: 1rem;
}

.shop-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.25rem;
   align-items: start;
}

.product-card {
   position: relative;
   background: var(--white);
   border: 1px solid #dbe4f0;
   border-radius: 10px;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   transition: var(--transition);
}

.product-card:hover {
   border-color: var(--primary-light);
   box-shadow: var(--shadow-card);
   z-index: 2;
}

.product-badge-sale {
   position: absolute;
   top: -1px;
   left: -1px;
   background: #e6007e;
   color: var(--white);
   font-family: var(--font-heading);
   font-size: 0.8rem;
   font-weight: 700;
   padding: 0.3rem 0.9rem;
   border-radius: 10px 0 12px 0;
   z-index: 1;
}

.product-card-media {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 150px;
   margin-bottom: 0.75rem;
}

.product-card-media img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.product-card-body {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   text-align: center;
}

.product-model-line {
   display: block;
   font-family: var(--font-heading);
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--primary-light);
   margin-bottom: 0.3rem;
}

.product-card-name {
   font-family: var(--font-heading);
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.25;
   margin: 0 0 0.6rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.product-card-name a {
   color: var(--secondary);
}

.product-card-name a:hover {
   color: var(--primary-light);
}

.product-card-pricing {
   margin-top: auto;
}

.product-price-old {
   display: block;
   font-size: 0.82rem;
   color: #a8b3c7;
   text-decoration: line-through;
}

.product-price-line {
   font-family: var(--font-heading);
   color: var(--secondary);
   margin: 0.1rem 0 0.3rem;
   line-height: 1.2;
}

.product-price-cur {
   font-size: 0.78rem;
   font-weight: 600;
}

.product-price-line strong {
   font-size: 1.35rem;
   font-weight: 700;
}

.product-price-iva {
   font-size: 0.9rem;
   font-weight: 500;
}

.product-price-quote {
   font-size: 1rem;
   font-weight: 600;
   color: #7e90b5;
}

.product-stock {
   display: block;
   font-size: 0.88rem;
   font-weight: 500;
   color: #00a650;
}

.product-stock.is-preorder {
   color: #b45309;
}

.product-card-actions {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   transition: max-height 0.25s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

.product-card:hover .product-card-actions,
.product-card:focus-within .product-card-actions {
   max-height: 120px;
   opacity: 1;
   margin-top: 0.8rem;
}

.product-card-actions form {
   margin: 0;
}

.product-card-actions .btn {
   width: 100%;
   font-size: 0.8rem;
   padding: 0.45rem 0.5rem;
}

.shop-grid.is-list {
   grid-template-columns: 1fr;
}

.shop-grid.is-list .product-card {
   flex-direction: row;
   align-items: center;
   gap: 1.5rem;
}

.shop-grid.is-list .product-card-media {
   width: 160px;
   flex-shrink: 0;
   height: 120px;
   margin-bottom: 0;
}

.shop-grid.is-list .product-card-body {
   text-align: left;
   align-items: flex-start;
}

.shop-grid.is-list .product-card-name {
   -webkit-line-clamp: 2;
   font-size: 1.1rem;
}

.shop-grid.is-list .product-card-actions {
   flex-direction: row;
   max-width: 420px;
}

.shop-pagination {
   margin-top: 2rem;
}

.shop-pager {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   flex-wrap: wrap;
}

.shop-pager-step {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   font-family: var(--font-heading);
   font-size: 1rem;
   color: var(--secondary);
}

.shop-pager-step.is-disabled {
   color: #cbd5e1;
}

.shop-pager-step:not(.is-disabled):hover {
   color: var(--primary-light);
}

.shop-pager-numbers {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
}

.shop-pager-num,
.shop-pager-dots {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 34px;
   height: 34px;
   border-radius: 6px;
   font-family: var(--font-heading);
   font-size: 1.05rem;
   color: var(--secondary);
}

.shop-pager-num:hover {
   background: #e2e8f4;
}

.shop-pager-num.is-current {
   background: var(--primary-light);
   color: var(--white);
   font-weight: 700;
}

.shop-recent {
   margin-top: 3rem;
   background: #f2f6fd;
   border-radius: 12px;
   padding: 1.5rem;
}

.shop-recent-head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 1.25rem;
}

.shop-recent-head h2 {
   font-family: var(--font-heading);
   font-size: 1.5rem;
   color: var(--secondary);
   margin: 0;
}

.shop-recent-clear {
   background: none;
   border: none;
   color: var(--primary-light);
   font-family: var(--font-heading);
   font-size: 1rem;
   text-decoration: underline;
   cursor: pointer;
}

.shop-recent-viewport {
   position: relative;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.shop-recent-track {
   display: flex;
   gap: 1rem;
   overflow-x: auto;
   scroll-behavior: smooth;
   flex: 1 1 auto;
   padding-bottom: 0.25rem;
}

.shop-recent-track::-webkit-scrollbar {
   height: 6px;
}

.shop-recent-track::-webkit-scrollbar-thumb {
   background: #cbd5e1;
   border-radius: 3px;
}

.shop-recent-card {
   position: relative;
   flex: 0 0 200px;
   background: var(--white);
   border: 1px solid #dbe4f0;
   border-radius: 10px;
   padding: 1rem;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
   transition: var(--transition);
}

.shop-recent-card:hover {
   border-color: var(--primary-light);
   box-shadow: var(--shadow-card);
}

.shop-recent-card img {
   height: 110px;
   object-fit: contain;
   margin-bottom: 0.4rem;
}

.shop-recent-name {
   font-family: var(--font-heading);
   font-size: 0.95rem;
   color: var(--secondary);
   line-height: 1.25;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.shop-recent-nav {
   flex-shrink: 0;
   background: none;
   border: none;
   color: #93a3c4;
   font-size: 1.6rem;
   cursor: pointer;
   padding: 0 0.25rem;
}

.shop-recent-nav:hover {
   color: var(--primary-light);
}

/* ===== VISTA DE SUBCATEGORÍA (banner + barra de filtros + rejilla de productos) ===== */

.sub-title {
   font-family: var(--font-heading);
   font-size: 2.6rem;
   line-height: 1.15;
   text-align: center;
   margin: 0 0 1.5rem;
   color: var(--secondary);
}

.sub-title a {
   color: var(--secondary);
   font-weight: 700;
}

.sub-title a:hover {
   color: var(--primary-light);
}

.sub-title-sep {
   color: #b9c4d8;
   font-weight: 300;
   margin: 0 0.5rem;
}

.sub-title-current {
   font-weight: 400;
}

.sub-banner {
   margin-bottom: 2rem;
   border-radius: 6px;
   overflow: hidden;
}

.sub-banner img {
   display: block;
   width: 100%;
   height: auto;
}

.sub-filters-title {
   font-family: var(--font-heading);
   font-size: 1.4rem;
   font-weight: 400;
   color: #7e90b5;
   margin: 0 0 0.75rem;
}

.sub-filters-row {
   display: flex;
   align-items: center;
   gap: 2.5rem;
   flex-wrap: wrap;
   padding-bottom: 1rem;
   border-bottom: 1px solid #e2e8f0;
}

.sub-filter {
   display: flex;
   align-items: center;
   gap: 0.6rem;
}

.sub-filter label {
   font-family: var(--font-heading);
   font-size: 1.15rem;
   font-weight: 600;
   color: var(--dark);
   white-space: nowrap;
}

.sub-filter select {
   padding: 0.4rem 0.7rem;
   border: 1px solid #cbd5e1;
   border-radius: 6px;
   background: var(--white);
   font-family: var(--font-body);
   font-size: 0.9rem;
   color: var(--dark-muted);
   cursor: pointer;
   min-width: 120px;
}

.sub-filter select:focus {
   outline: none;
   border-color: var(--primary-light);
}

.sub-filter-suffix {
   font-family: var(--font-heading);
   font-size: 1rem;
   color: var(--dark);
   white-space: nowrap;
}

.sub-view {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-left: auto;
}

.sub-view span {
   font-family: var(--font-heading);
   font-size: 1.15rem;
   font-weight: 600;
   color: var(--dark);
}

.sub-view a {
   color: #cbd5e1;
   font-size: 1.35rem;
   line-height: 1;
}

.sub-view a.is-active,
.sub-view a:hover {
   color: var(--primary-light);
}

.sub-pagerbar {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 1rem;
   margin: 1.25rem 0;
}

.sub-showing {
   margin: 0;
   font-size: 0.95rem;
   color: #93a3c4;
}

.sub-pagerbar-nav {
   justify-self: center;
}

.sub-showall {
   justify-self: end;
   background: #e2e8f4;
   color: var(--secondary);
   font-family: var(--font-heading);
   font-size: 0.9rem;
   padding: 0.5rem 1.1rem;
   border-radius: 6px;
   white-space: nowrap;
   transition: var(--transition);
}

.sub-showall:hover {
   background: var(--primary-light);
   color: var(--white);
}

.sub-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.25rem;
   align-items: stretch;
}

.product-tile {
   display: flex;
   flex-direction: column;
   background: var(--white);
   border: 1px solid #cbd8ea;
   border-radius: 10px;
   padding: 1.25rem 1rem;
   text-align: center;
   transition: var(--transition);
}

.product-tile:hover {
   border-color: var(--primary-light);
   box-shadow: var(--shadow-card);
}

.product-tile-media {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 175px;
   margin-bottom: 1rem;
}

.product-tile-media img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.product-tile-body {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
}

.product-tile-name {
   font-family: var(--font-heading);
   font-size: 0.95rem;
   font-weight: 400;
   line-height: 1.25;
   margin: 0 0 0.6rem;
}

.product-tile-name a {
   color: var(--dark);
}

.product-tile-name a:hover {
   color: var(--primary-light);
}

.product-tile-stock {
   margin-top: auto;
   padding-top: 0.6rem;
   font-size: 0.95rem;
   font-weight: 500;
   color: #00a650;
   text-align: center;
   display: block;
}

.product-tile-stock.is-preorder {
   color: #b45309;
}

.sub-grid.is-list {
   grid-template-columns: 1fr;
}

.sub-grid.is-list .product-tile {
   flex-direction: row;
   align-items: center;
   gap: 1.5rem;
   text-align: left;
}

.sub-grid.is-list .product-tile-media {
   width: 170px;
   flex-shrink: 0;
   height: 130px;
   margin-bottom: 0;
}

.sub-grid.is-list .product-tile-stock {
   margin-top: 0.3rem;
}

/* ===== FICHA DE PRODUCTO ===== */

.pd-eyebrow {
   font-family: var(--font-heading);
   font-size: 1.0rem;
   text-align: center;
   margin: 0 0 0.25rem;
}

.pd-eyebrow a {
   color: var(--secondary);
   font-weight: 700;
}

.pd-eyebrow-sep {
   color: #b9c4d8;
   font-weight: 300;
   margin: 0 0.4rem;
}

.pd-eyebrow .pd-eyebrow-sub {
   color: #7e90b5;
   font-weight: 400;
}

.pd-eyebrow a:hover {
   color: var(--primary-light);
}

.pd-title {
   font-family: var(--font-heading);
   font-size: 1.8rem;
   font-weight: 700;
   line-height: 1.15;
   color: var(--secondary);
   text-align: center;
   margin: 0 0 2rem;
}

.pd-alert {
   background: #d1fae5;
   color: #065f46;
   border-left: 4px solid #10b981;
   border-radius: 8px;
   padding: 0.9rem 1.1rem;
   margin-bottom: 1.5rem;
}

.pd-alert a {
   font-weight: 700;
   margin-left: 0.75rem;
   text-decoration: underline;
   color: #065f46;
}

.pd-main {
   display: grid;
   grid-template-columns: 1fr 1.15fr;
   gap: 2.5rem;
   align-items: start;
   margin-bottom: 3rem;
}

.pd-gallery-main {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 380px;
   margin-bottom: 1rem;
}

.pd-gallery-main img,
.pd-gallery-main video {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.pd-thumbs {
   display: flex;
   gap: 0.75rem;
   flex-wrap: wrap;
   margin-bottom: 1.5rem;
}

.pd-thumb {
   position: relative;
   width: 110px;
   height: 85px;
   padding: 0.35rem;
   background: var(--white);
   border: 1px solid #dbe4f0;
   border-radius: 8px;
   cursor: pointer;
   overflow: hidden;
   transition: var(--transition);
}

.pd-thumb:hover,
.pd-thumb.is-active {
   border-color: var(--primary-light);
}

.pd-thumb img,
.pd-thumb video {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

/* ===== Marca de reproducción sobre las miniaturas de video ===== */

.pd-thumb-play {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
   background: rgba(0, 34, 126, 0.25);
   font-size: 1.1rem;
}

.pd-gallery-foot {
   display: flex;
   align-items: center;
   gap: 2rem;
   flex-wrap: wrap;
}

.pd-share {
   display: flex;
   align-items: center;
   gap: 0.6rem;
}

.pd-share span {
   font-family: var(--font-heading);
   font-size: 1.15rem;
   color: var(--primary-light);
   text-decoration: underline;
}

.pd-share-wa {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #25D366;
   color: var(--white);
   font-size: 1.3rem;
   transition: var(--transition);
}

.pd-share-wa:hover {
   color: var(--white);
   transform: translateY(-2px);
}

.pd-catalog {
   display: inline-flex;
   align-items: center;
   gap: 0.7rem;
   background: #e2e8f4;
   color: var(--secondary);
   font-family: var(--font-heading);
   font-size: 1.05rem;
   line-height: 1.15;
   padding: 0.6rem 1.2rem;
   border-radius: 8px;
   transition: var(--transition);
}

.pd-catalog i {
   font-size: 1.6rem;
}

.pd-catalog:hover {
   background: var(--primary-light);
   color: var(--white);
}

.pd-field {
   font-family: var(--font-heading);
   font-size: 1.15rem;
   color: #93a3c4;
   margin: 0 0 0.6rem;
   line-height: 1.3;
   white-space: nowrap;
}

.pd-field span {
   color: var(--dark);
   font-weight: 700;
}

.pd-pricing {
   margin: 1.75rem 0 1.25rem;
}

.pd-price-row {
   display: flex;
   align-items: baseline;
   gap: 0.85rem;
   flex-wrap: wrap;
   font-family: var(--font-heading);
   font-size: 1.5rem;
   margin: 0 0 0.3rem;
}

.pd-price-label {
   color: var(--dark);
   font-weight: 700;
}

.pd-price-old {
   color: #93a3c4;
   text-decoration: line-through;
}

.pd-price-off {
   color: #e6007e;
   font-weight: 700;
}

.pd-price-quote {
   color: #7e90b5;
}

.pd-price-final {
   font-family: var(--font-heading);
   font-size: 1.5rem;
   color: var(--primary-light);
   margin: 0;
}

.pd-price-final strong {
   font-size: 1.9rem;
   font-weight: 700;
}

.pd-stock {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   flex-wrap: wrap;
   font-family: var(--font-heading);
   font-size: 1.3rem;
   color: var(--dark);
   margin: 0 0 1.75rem;
}

.pd-stock strong {
   color: #16a34a;
}

.pd-stock-dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #16a34a;
   flex-shrink: 0;
}

.pd-stock.is-preorder strong {
   color: #b45309;
}

.pd-stock.is-preorder .pd-stock-dot {
   background: #b45309;
}

.pd-stock-qty {
   color: var(--dark);
   font-weight: 400;
}

.pd-actions {
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
   max-width: 480px;
}

.pd-buy {
   display: flex;
   align-items: stretch;
   gap: 0.85rem;
   margin: 0;
}

.pd-qty {
   display: flex;
   align-items: center;
   border: 1px solid #cbd5e1;
   border-radius: 8px;
   overflow: hidden;
   flex-shrink: 0;
}

.pd-qty-btn {
   width: 42px;
   height: 100%;
   min-height: 52px;
   background: var(--white);
   border: none;
   color: var(--secondary);
   font-size: 1.4rem;
   line-height: 1;
   cursor: pointer;
   transition: var(--transition);
}

.pd-qty-btn:hover {
   background: #e2e8f4;
}

.pd-qty input {
   width: 54px;
   height: 52px;
   border: none;
   border-left: 1px solid #cbd5e1;
   border-right: 1px solid #cbd5e1;
   text-align: center;
   font-family: var(--font-heading);
   font-size: 1.2rem;
   color: var(--secondary);
   outline: none;
   -moz-appearance: textfield;
}

.pd-qty input::-webkit-outer-spin-button,
.pd-qty input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.pd-add,
.pd-quote {
   flex: 1 1 auto;
   min-height: 52px;
   font-size: 1.15rem;
   border-radius: 8px;
}

.pd-add i {
   font-size: 1.3rem;
}

.pd-quote {
   justify-content: center;
}

.pd-specs {
   border-top: 1px solid #e2e8f0;
   padding-top: 1.5rem;
   margin-bottom: 2.5rem;
}

.pd-specs-head {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   color: var(--secondary);
}

.pd-specs-head h2 {
   font-family: var(--font-heading);
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--secondary);
   margin: 0;
}

.pd-specs-head i {
   font-size: 1.1rem;
}

.pd-specs-list {
   list-style: disc;
   padding: 1rem 0 0 1.5rem;
   margin: 0;
   display: none;
   columns: 1;
}

.pd-specs.is-open .pd-specs-list {
   display: block;
}

.pd-specs-list li {
   font-size: 1.15rem;
   line-height: 1.5;
   color: var(--dark);
   margin-bottom: 0.35rem;
}

.pd-specs-list strong {
   font-family: var(--font-heading);
   font-weight: 700;
}

.pd-related {
   border-top: 1px solid #e2e8f0;
   padding-top: 2rem;
}

.pd-related-title {
   font-family: var(--font-heading);
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--secondary);
   text-align: center;
   margin: 0 0 1.5rem;
}

.pd-related-viewport {
   position: relative;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   background: #f2f6fd;
   border-radius: 12px;
   padding: 1.25rem;
}

.pd-related-track {
   display: flex;
   gap: 1rem;
   overflow-x: auto;
   scroll-behavior: smooth;
   flex: 1 1 auto;
   padding-bottom: 0.25rem;
}

.pd-related-track::-webkit-scrollbar {
   height: 6px;
}

.pd-related-track::-webkit-scrollbar-thumb {
   background: #cbd5e1;
   border-radius: 3px;
}

/* ===== Las tarjetas reutilizan .product-tile con ancho fijo dentro del carrusel ===== */

.pd-related-track .product-tile {
   flex: 0 0 210px;
}

.pd-related-nav {
   flex-shrink: 0;
   background: none;
   border: none;
   color: #93a3c4;
   font-size: 1.8rem;
   cursor: pointer;
   padding: 0 0.25rem;
}

.pd-related-nav:hover {
   color: var(--primary-light);
}

/* ===== Contenido del editor de texto enriquecido (descripción del producto) El panel guarda HTML con listas, negritas, encabezados y tablas. Sin estas reglas el reset global (`ul { list-style: none }`, márgenes a 0) las deja sin viñetas ni separación. ===== */

.pd-specs-body {
   display: none;
   padding-top: 1rem;
}

.pd-specs.is-open .pd-specs-body {
   display: block;
}

.pd-rte {
   font-size: 1.15rem;
   line-height: 1.55;
   color: var(--dark);
}

.pd-rte> :first-child {
   margin-top: 0;
}

.pd-rte> :last-child {
   margin-bottom: 0;
}

.pd-rte p {
   margin: 0 0 0.9rem;
}

/* ===== Listas: el reset global les quita viñetas y sangría ===== */

.pd-rte ul,
.pd-rte ol {
   margin: 0 0 1rem;
   padding-left: 1.6rem;
}

.pd-rte ul {
   list-style: disc;
}

.pd-rte ol {
   list-style: decimal;
}

.pd-rte ul ul {
   list-style: circle;
}

.pd-rte li {
   margin-bottom: 0.35rem;
}

.pd-rte li::marker {
   color: var(--secondary);
}

.pd-rte li:has(> br:only-child) {
   list-style: none;
   min-height: 0.5rem;
}

.pd-rte strong,
.pd-rte b {
   font-family: var(--font-heading);
   font-weight: 700;
   color: var(--dark);
}

.pd-rte em,
.pd-rte i {
   font-style: italic;
}

.pd-rte u {
   text-decoration: underline;
}

.pd-rte s {
   text-decoration: line-through;
}

.pd-rte h2,
.pd-rte h3,
.pd-rte h4,
.pd-rte h5,
.pd-rte h6 {
   font-family: var(--font-heading);
   color: var(--secondary);
   line-height: 1.25;
   margin: 1.5rem 0 0.6rem;
}

.pd-rte h2 {
   font-size: 1.45rem;
}

.pd-rte h3 {
   font-size: 1.25rem;
}

.pd-rte h4,
.pd-rte h5,
.pd-rte h6 {
   font-size: 1.1rem;
}

.pd-rte a {
   color: var(--primary-light);
   text-decoration: underline;
}

.pd-rte blockquote {
   margin: 1rem 0;
   padding: 0.5rem 0 0.5rem 1rem;
   border-left: 3px solid var(--primary-light);
   color: var(--dark-muted);
   font-style: italic;
}

.pd-rte pre,
.pd-rte code {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 0.95em;
   background: #f1f5f9;
   border-radius: 4px;
}

.pd-rte code {
   padding: 0.1rem 0.35rem;
}

.pd-rte pre {
   padding: 0.9rem 1rem;
   overflow-x: auto;
   margin: 0 0 1rem;
}

.pd-rte table {
   width: 100%;
   border-collapse: collapse;
   margin: 0 0 1rem;
   display: block;
   overflow-x: auto;
}

.pd-rte th,
.pd-rte td {
   border: 1px solid #dbe4f0;
   padding: 0.55rem 0.8rem;
   text-align: left;
   vertical-align: top;
}

.pd-rte th {
   background: #f2f6fd;
   font-family: var(--font-heading);
   color: var(--secondary);
}

.pd-rte img {
   max-width: 100%;
   height: auto;
   border-radius: 6px;
   margin: 0.5rem 0;
}

.pd-rte hr {
   border: none;
   border-top: 1px solid #e2e8f0;
   margin: 1.25rem 0;
}

.pd-rte sub,
.pd-rte sup {
   font-size: 0.75em;
}

.pd-rte small {
   font-size: 0.85em;
   color: var(--dark-muted);
}

/* ===== SISTEMA DE LOGIN Y ESPACIO DE TRABAJO DEL CLIENTE (MERIEQUIPOS) ===== */

/* ===== Header Popover de Login ===== */

.header-login-wrapper {
   position: relative;
   display: flex;
   align-items: center;
}

.btn-header-login {
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 0;
   font-family: inherit;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.3rem;
   color: var(--secondary);
   font-size: 0.8rem;
   transition: color 0.2s ease;
}

.btn-header-login:hover {
   color: var(--primary);
}

.client-login-popover {
   position: absolute;
   top: calc(100% + 14px);
   right: -20px;
   width: 295px;
   background: #ffffff;
   border-radius: 18px;
   box-shadow: 0 14px 35px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
   padding: 24px 26px;
   z-index: 1050;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   border: 1px solid #f1f5f9;
}

.client-login-popover.is-open {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.client-login-card {
   display: flex;
   flex-direction: column;
}

.client-login-title {
   font-size: 1.28rem;
   font-weight: 700;
   color: #0f172a;
   text-align: center;
   margin: 0 0 6px 0;
   font-family: var(--font-heading);
}

.client-login-subtitle {
   font-size: 0.92rem;
   color: #1e62c6;
   text-align: center;
   margin: 0 0 16px 0;
   font-weight: 500;
}

.client-input {
   width: 100%;
   border: 1px solid #94a3b8;
   border-radius: 8px;
   padding: 8px 12px;
   font-size: 0.92rem;
   color: #1e293b;
   background: #ffffff;
   outline: none;
   transition: all 0.2s ease;
   box-sizing: border-box;
}

.client-input:focus {
   border-color: #1e62c6;
   box-shadow: 0 0 0 3px rgba(30, 98, 198, 0.15);
}

.client-login-btn-wrapper {
   text-align: center;
   margin: 14px 0 16px;
}

.client-submit-btn {
   background: #dce4ed;
   color: #23476d;
   border: none;
   border-radius: 6px;
   padding: 6px 30px;
   font-size: 0.95rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   font-family: inherit;
   display: inline-block;
}

.client-submit-btn:hover {
   background: #cbd8e5;
   color: #0f2742;
}

.client-login-links {
   text-align: center;
   font-size: 0.82rem;
   color: #23476d;
   line-height: 1.35;
}

.client-login-links p {
   margin: 0;
   color: #23476d;
   font-size: 0.82rem;
}

.client-accent-link {
   color: #1a5ec4;
   font-weight: 600;
   text-decoration: none;
   display: inline-block;
}

.client-accent-link:hover {
   text-decoration: underline;
   color: var(--primary-light);
}

.client-login-alert {
   font-size: 0.8rem;
   padding: 6px 10px;
   border-radius: 6px;
   margin-bottom: 12px;
   text-align: center;
}

.client-login-alert.alert-danger {
   background: #fef2f2;
   color: #b91c1c;
   border: 1px solid #fecaca;
}

.client-login-alert.alert-success {
   background: #f0fdf4;
   color: #15803d;
   border: 1px solid #bbf7d0;
}

.client-login-alert-box {
   background: #fef2f2;
   color: #b91c1c;
   padding: 10px 14px;
   border-radius: 8px;
   border: 1px solid #fecaca;
   font-size: 0.85rem;
}

/* ===== Header Cliente Autenticado (Imagen 2) ===== */

.header-user-wrapper {
   position: relative;
   display: flex;
   align-items: center;
}

.client-greeting-text {
   color: #0c50be !important;
   font-weight: 700;
   font-size: 0.85rem;
}

.client-user-dropdown {
   position: absolute;
   top: calc(100% + 10px);
   right: 0;
   width: 230px;
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
   padding: 8px 0;
   z-index: 1050;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px);
   transition: all 0.2s ease;
   border: 1px solid #e2e8f0;
}

.client-user-dropdown.is-open {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.client-dropdown-header {
   padding: 10px 16px;
   border-bottom: 1px solid #f1f5f9;
   margin-bottom: 4px;
}

.client-dropdown-header strong {
   display: block;
   font-size: 0.95rem;
   color: #0f172a;
}

.client-dropdown-header small {
   color: #64748b;
   font-size: 0.8rem;
   display: block;
}

.client-dropdown-menu {
   list-style: none;
   padding: 0;
   margin: 0;
}

.client-dropdown-menu li a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 16px;
   color: #334155;
   text-decoration: none;
   font-size: 0.88rem;
   transition: background 0.15s;
}

.client-dropdown-menu li a:hover {
   background: #f8fafc;
   color: var(--primary-light);
}

.client-dropdown-menu li.dropdown-divider {
   height: 1px;
   background: #f1f5f9;
   margin: 4px 0;
}

.client-dropdown-logout-btn {
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   padding: 9px 16px;
   color: #ef4444;
   font-size: 0.88rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: inherit;
   transition: background 0.15s;
}

.client-dropdown-logout-btn:hover {
   background: #fef2f2;
}

/* ===== ESPACIO DE TRABAJO DEL CLIENTE (Imagen 2) ===== */

.client-workspace-page {
   background: #ffffff;
   min-height: 80vh;
   padding: 1rem 0 4rem;
}

.client-breadcrumb {
   margin-bottom: 1.5rem;
   font-size: 0.88rem;
   color: #64748b;
}

.client-breadcrumb a {
   color: #0c50be;
   text-decoration: none;
}

.breadcrumb-separator {
   margin: 0 6px;
   color: #94a3b8;
}

.workspace-layout {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 2.5rem;
   align-items: start;
}

.workspace-sidebar {
   padding-right: 1rem;
}

.sidebar-user-card {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 2rem;
}

.sidebar-avatar {
   width: 58px;
   height: 58px;
   border-radius: 50%;
   background: #cbd5e1;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #64748b;
   font-size: 1.8rem;
   flex-shrink: 0;
}

.sidebar-user-info {
   display: flex;
   flex-direction: column;
}

.sidebar-greeting {
   font-size: 0.95rem;
   color: #64748b;
   line-height: 1.1;
}

.sidebar-role {
   font-size: 0.95rem;
   color: #64748b;
   line-height: 1.2;
}

.sidebar-name {
   font-size: 1.4rem;
   font-weight: 800;
   color: #002b49;
   margin: 2px 0 0 0;
   line-height: 1.2;
   font-family: var(--font-heading);
}

.sidebar-menu-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.sidebar-menu-item a,
.sidebar-logout-btn {
   display: block;
   color: #64748b;
   font-size: 0.95rem;
   text-decoration: none;
   transition: color 0.2s ease;
   font-weight: 500;
}

.sidebar-menu-item.active a {
   color: #002b49;
   font-weight: 800;
}

.sidebar-menu-item a:hover {
   color: #0c50be;
}

.sidebar-logout-btn {
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   color: #64748b;
   font-size: 0.95rem;
   font-family: inherit;
   font-weight: 500;
   text-align: left;
}

.sidebar-logout-btn:hover {
   color: #ef4444;
}

.workspace-title {
   font-size: 2.2rem;
   font-weight: 800;
   color: #002b49;
   margin-bottom: 1.5rem;
   text-align: center;
   font-family: var(--font-heading);
}

.workspace-toolbar {
   display: flex;
   justify-content: center;
   margin-bottom: 2rem;
}

.search-filter-wrapper {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   max-width: 680px;
}

.workspace-search-box {
   display: flex;
   flex: 1;
   position: relative;
}

.workspace-search-input {
   width: 100%;
   border: 1px solid #94a3b8;
   border-right: none;
   border-radius: 6px 0 0 6px;
   padding: 8px 14px;
   font-size: 0.92rem;
   outline: none;
   background: #ffffff;
}

.workspace-search-btn {
   background: #0c50be;
   color: white;
   border: 1px solid #0c50be;
   border-radius: 0 6px 6px 0;
   padding: 0 16px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   transition: background 0.2s ease;
}

.workspace-search-btn:hover {
   background: #083c91;
}

.date-picker-dropdown-wrapper {
   position: relative;
}

.btn-calendar-filter {
   background: white;
   border: 1px solid #0c50be;
   color: #0c50be;
   border-radius: 6px;
   width: 38px;
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   cursor: pointer;
   transition: all 0.2s ease;
}

.btn-calendar-filter:hover {
   background: #f0f6ff;
}

.btn-export-excel {
   background: #dde4ed;
   color: #334155;
   border: 1px solid #cbd5e1;
   border-radius: 6px;
   padding: 7px 18px;
   font-size: 0.9rem;
   font-weight: 500;
   cursor: pointer;
   transition: background 0.2s ease;
   white-space: nowrap;
   font-family: inherit;
}

.btn-export-excel:hover {
   background: #cbd8e5;
   color: #0f2742;
}

.calendar-popup {
   position: absolute;
   top: calc(100% + 8px);
   right: -120px;
   background: #002b49;
   border: 1px solid #0c50be;
   border-radius: 8px;
   padding: 12px;
   z-index: 1000;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.calendar-popup-header {
   display: flex;
   gap: 14px;
}

.calendar-month-col {
   background: #ffffff;
   color: #0f172a;
   padding: 10px;
   border-radius: 6px;
   width: 215px;
}

.month-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #002b49;
   color: white;
   padding: 4px 8px;
   font-size: 0.8rem;
   font-weight: 600;
   border-radius: 4px;
   margin-bottom: 6px;
}

.cal-nav {
   background: none;
   border: none;
   color: white;
   cursor: pointer;
   padding: 0 3px;
   font-size: 0.85rem;
}

.cal-days-header {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
   font-size: 0.75rem;
   font-weight: 600;
   color: #002b49;
   margin-bottom: 4px;
}

.cal-days-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
   font-size: 0.75rem;
   row-gap: 3px;
   margin-bottom: 8px;
}

.cal-days-grid span {
   padding: 2px 0;
   border-radius: 3px;
   cursor: pointer;
}

.cal-days-grid span.active-cal {
   background: #0c50be;
   color: white;
   font-weight: bold;
}

.cal-days-grid span.muted {
   color: #94a3b8;
}

.btn-cal-select {
   width: 100%;
   background: #002b49;
   color: white;
   border: none;
   padding: 5px 0;
   font-size: 0.78rem;
   border-radius: 4px;
   cursor: pointer;
   font-family: inherit;
   font-weight: 500;
}

.btn-cal-select:hover {
   background: #083c91;
}

.month-group {
   margin-bottom: 2.2rem;
}

.month-group-title {
   font-size: 1.05rem;
   color: #64748b;
   font-weight: 500;
   margin-bottom: 0.85rem;
}

.orders-cards-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.order-card {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   transition: box-shadow 0.15s ease;
}

.order-card:hover {
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.order-card-header {
   background: #e2eaf8;
   padding: 10px 22px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
}

.order-header-info {
   display: flex;
   gap: 4.5rem;
}

.header-field {
   display: flex;
   flex-direction: column;
}

.field-label {
   font-size: 0.88rem;
   font-weight: 700;
   color: #0f172a;
   line-height: 1.2;
}

.field-date {
   font-size: 0.95rem;
   font-weight: 700;
   color: #1a5ec4;
}

.field-folio {
   font-size: 0.95rem;
   font-weight: 700;
   color: #1a5ec4;
   text-decoration: underline;
}

.btn-toggle-order {
   background: #ffffff;
   border: 1px solid #0c50be;
   color: #0c50be;
   border-radius: 20px;
   padding: 5px 22px;
   font-size: 0.88rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
   font-family: inherit;
}

.btn-toggle-order.btn-order-closed {
   background: #002b49;
   border-color: #002b49;
   color: #ffffff;
}

.order-card-body {
   padding: 14px 22px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
}

.order-col {
   display: flex;
   flex-direction: column;
}

.col-label {
   font-size: 0.88rem;
   font-weight: 700;
   color: #0f172a;
   margin-bottom: 2px;
}

.col-value {
   font-size: 0.88rem;
   color: #64748b;
   word-break: break-word;
}

.client-auth-page {
   background: #f8fafc;
   min-height: 70vh;
}

.client-standalone-card {
   background: white;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   padding: 36px 40px;
   width: 100%;
   max-width: 420px;
   border: 1px solid #e2e8f0;
}

/* ==========================================================================
   RESPONSIVE CONSOLIDADO
   Todos los breakpoints agrupados aquí para facilitar mantenimiento.
   Orden: pantallas grandes -> pantallas pequeñas.
   ========================================================================== */

@media (max-width: 1024px) {
   .action-icon {
      height: 30px;
      object-fit: contain;
   }

   .header-bottom {
      --nav-pad-y: 1rem;
      --nav-font: 1rem;
   }

   .header-middle .container, .nav-list {
      padding-left: 1rem;
      padding-right: 1rem;
   }

   .cat-cards {
      grid-template-columns: repeat(2, 1fr);
   }

   .shop-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .shop-title {
      font-size: 2rem;
   }

   .sub-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .sub-title {
      font-size: 2rem;
   }

   .pd-title {
      font-size: 1.9rem;
   }

   .pd-field, .pd-price-row, .pd-price-final {
      font-size: 1.25rem;
   }

   .pd-price-final strong {
      font-size: 1.6rem;
   }

   .dest-page {
      grid-template-columns: repeat(2, 1fr);
   }

   .dest-arrow {
      width: 42px;
      height: 42px;
      font-size: 1rem;
   }

   .header-middle .container {
      grid-template-columns: auto 1fr auto;
      grid-template-areas:
         "logo search actions"
         "nav  nav    nav";
      row-gap: 0.5rem;
      column-gap: 1.25rem;
   }

   .header-actions {
      gap: 1rem;
   }

   .search-bar {
      max-width: 650px;
   }

   .div-card {
      flex-basis: calc(50% - (var(--div-gap) / 2));
   }

   .promos-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .footer-grid-new {
      grid-template-columns: 1fr 1fr;
   }

   .cat-layout {
      grid-template-columns: 220px 1fr;
      gap: 1.5rem;
   }

   .cat-title {
      font-size: 2.2rem;
   }

   .shop-layout {
      grid-template-columns: 190px 1fr;
      gap: 1.25rem;
   }

   .shop-toolbar {
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 0.75rem;
   }

   .shop-toggle-filters, .shop-toolbar-right {
      justify-self: center;
   }

   .sub-filters-row {
      gap: 1.25rem;
   }

   .sub-view {
      margin-left: 0;
   }

   .sub-pagerbar {
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 0.75rem;
      text-align: center;
   }

   .sub-showall {
      justify-self: center;
   }

   .pd-main {
      grid-template-columns: 1fr;
      gap: 2rem;
   }

   .pd-gallery-main {
      height: 300px;
   }

   .workspace-layout {
      grid-template-columns: 1fr;
   }

   .workspace-sidebar {
      padding-right: 0;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 1.5rem;
      margin-bottom: 1.5rem;
   }

   .order-header-info {
      gap: 2rem;
   }

   .order-card-body {
      grid-template-columns: repeat(2, 1fr);
   }

   .calendar-popup {
      right: 0;
   }

   .why-us-section {
      padding: 3.5rem 0;
   }

   .why-us-inner {
      grid-template-columns: 1fr;
      gap: 2.5rem;
      width: 92%;
   }

   .why-us-img-col {
      aspect-ratio: 16 / 9;
   }

   .why-us-text-col {
      padding: 0;
   }

   .why-us-title {
      font-size: 1.8rem;
   }
}

@media (max-width: 768px) {
   .header-middle .container {
      grid-template-columns: auto 1fr;
      grid-template-areas:
         "logo actions"
         "search search"
         "nav    nav";
      row-gap: 0.75rem;
   }

   .header-actions {
      justify-content: flex-end;
   }

   .action-icon {
      height: 30px;
      object-fit: contain;
   }

   .topbar {
      display: none;
   }

   .logo-img {
      width: 285px;
      max-height: 160px;
   }

   .search-bar {
      max-width: none;
   }

   .nav-list {
      display: none;
   }

   .mobile-toggle {
      display: block;
      padding: 0.5rem 0;
   }

   .nav-menu.active .nav-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0.5rem 0 1rem;
   }

   .nav-menu.active .nav-list>li {
      border-top: 1px solid #f1f5f9;
   }

   .nav-menu.active .nav-list>li>a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.9rem 1rem;
      font-size: 1rem;
   }

   .has-mega-menu>a::after {
      display: none;
   }

   .mega-menu {
      position: static;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      transform: none;
      display: none;
      background: var(--light);
   }

   .has-mega-menu:hover .mega-menu, .has-mega-menu:focus-within .mega-menu {
      display: none;
   }

   .has-mega-menu.is-open .mega-menu {
      display: block;
      opacity: 1;
      visibility: visible;
      padding: 0.5rem 1rem 1rem;
   }

   .mega-menu-grid {
      grid-template-columns: 1fr;
      row-gap: 1.25rem;
   }

   .mega-col {
      border-left: none;
      padding: 0;
   }

   .mega-col:nth-child(5n + 1) {
      border-left: none;
   }

   .drop-menu {
      position: static;
      transform: none;
      min-width: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      display: none;
      background: var(--light);
   }

   .drop-menu::before {
      display: none;
   }

   .has-drop-menu:hover .drop-menu, .has-drop-menu:focus-within .drop-menu {
      display: none;
      transform: none;
   }

   .has-drop-menu.is-open .drop-menu {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: none;
      padding: 0.5rem 1rem 1rem;
   }

   .drop-menu-list {
      text-align: left;
   }

   .drop-menu-list a {
      display: block;
      padding: 0.35rem 0;
      font-size: 0.95rem;
   }

   .hero-left {
      padding: 2rem;
   }

   .hero-right {
      border-radius: 0;
      padding: 2rem;
   }

   .hero-slider {
      max-height: 540px;
      min-height: 200px;
   }

   .hero-title {
      font-size: 1.75rem;
   }

   .hero-subtitle {
      font-size: 0.95rem;
      margin-bottom: 1.25rem;
   }

   .hero-nav {
      padding: 0 0.5rem;
   }

   .hero-nav button {
      font-size: 2rem;
   }

   .hero-pagination {
      bottom: 0.75rem;
      gap: 0.35rem;
   }

   .hero-dot {
      width: 22px;
      height: 3px;
   }

   .hero-dot.active {
      width: 34px;
   }

   .div-card {
      flex-basis: 100%;
   }

   .services-events-grid {
      grid-template-columns: 1fr;
   }

   .promos-grid {
      grid-template-columns: 1fr;
   }

   .footer-grid-new {
      grid-template-columns: 1fr;
      gap: 2.5rem;
   }

   .footer-new {
      font-size: 1rem;
   }

   .footer-col-new h4 {
      font-size: 1.2rem;
   }

   .cat-layout {
      grid-template-columns: 1fr;
   }

   .cat-tree {
      max-height: 320px;
   }

   .cat-help {
      font-size: 1.05rem;
      padding: 1rem 1.25rem;
   }

   .shop-layout {
      grid-template-columns: 1fr;
   }

   .product-card-actions {
      max-height: 120px;
      opacity: 1;
      margin-top: 0.8rem;
   }

   .shop-grid.is-list .product-card {
      flex-direction: column;
      align-items: stretch;
   }

   .shop-grid.is-list .product-card-media {
      width: 100%;
   }

   .shop-toolbar-right {
      flex-direction: column;
      gap: 0.6rem;
   }

   .sub-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
   }

   .sub-title {
      font-size: 1.6rem;
   }

   .sub-grid.is-list .product-tile {
      flex-direction: column;
      text-align: center;
   }

   .sub-grid.is-list .product-tile-media {
      width: 100%;
   }

   .pd-title {
      font-size: 1.5rem;
   }

   .pd-buy {
      flex-wrap: wrap;
   }

   .pd-add {
      flex: 1 1 100%;
   }

   .pd-gallery-foot {
      gap: 1rem;
   }

   .pd-rte {
      font-size: 1rem;
   }
}

@media (max-width: 640px) {
   .dest-page {
      grid-template-columns: 1fr;
   }

   .dest-arrow {
      width: 36px;
      height: 36px;
      font-size: .85rem;
   }

   .dest-carousel {
      gap: 0.25rem;
   }

   .dest-footer-bar {
      flex-direction: column;
      gap: 1.25rem;
   }

   .dest-action-wrap {
      position: static;
      transform: none;
      width: 100%;
      text-align: center;
   }

   .btn-dest-store {
      width: 100%;
   }

   .promos-action-wrap {
      justify-content: center;
   }
}

@media (max-width: 576px) {
   .search-filter-wrapper {
      flex-wrap: wrap;
   }

   .workspace-search-box {
      width: 100%;
   }

   .order-card-body {
      grid-template-columns: 1fr;
   }

   .calendar-popup-header {
      flex-direction: column;
   }
}

@media (prefers-reduced-motion: reduce) {
   .drop-menu {
      transition: none;
   }

   .mega-menu, .mega-caret, .has-mega-menu>a::after {
      transition: none;
   }

   .div-title {
      transition: none;
   }

   .div-card:hover .div-title {
      transform: none;
   }

   .marcas-track {
      animation: none;
   }

   .marcas-slider {
      overflow-x: auto;
   }

   .cart-panel, .cart-panel-overlay {
      transition: none;
   }

   .cart-panel-item.is-new {
      animation: none;
   }
}