/* ===============================
   Corralón Pitty - Etapa 1
   Web estática + carrito + CSV
================================= */

:root {
  --bg: #f4f7fb;
  --bg-soft: #eef3f8;
  --panel: #ffffff;
  --text: #142033;
  --muted: #667085;
  --brand: #285da8;
  --brand-dark: #1f4b88;
  --success: #14804a;
  --danger: #dc2626;
  --whatsapp: #16a34a;
  --whatsapp-dark: #15803d;
  --border: rgba(20, 32, 51, 0.10);
  --shadow: 0 22px 55px rgba(15, 23, 42, 0.10);
  --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.07);
  --radius: 22px;
  --max-width: 1180px;
}

/* ===============================
   BASE
================================= */

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

section[id],
main[id] {
  scroll-margin-top: 110px;
}

body {
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(40, 93, 168, 0.13), transparent 32rem),
    radial-gradient(circle at top right, rgba(182, 189, 200, 0.24), transparent 25rem),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 42%, #eef3f8 100%);
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

main {
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;
  overflow-x: hidden;
}

/* ===============================
   HEADER / NAV
================================= */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  min-height: 78px;
  padding: 0.85rem clamp(1rem, 4vw, 3rem);

  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

body {
  padding-top: 78px;
}

section {
  scroll-margin-top: 100px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  display: block;
  width: 230px;
  max-width: 58vw;
  height: auto;
  object-fit: contain;
}

.nav,
.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.nav a,
.desktop-nav a {
  color: var(--muted);
  padding: 0.75rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  transition: 0.2s ease;
}

.nav a:hover,
.desktop-nav a:hover {
  color: var(--brand);
  background: rgba(40, 93, 168, 0.07);
}

.nav .nav-cta,
.desktop-nav .nav-cta {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 10px 22px rgba(40, 93, 168, 0.22);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(40, 93, 168, 0.16);
  border-radius: 14px;
  background: #ffffff;
  color: var(--brand);
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  border-radius: 999px;
  background: var(--brand);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ===============================
   MOBILE MENU PANEL
================================= */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1190;
  background: rgba(15, 23, 42, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.nav-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-panel {
  position: fixed;
  top: 0;
  right: -430px;
  left: auto;
  z-index: 1210;
  display: flex;
  flex-direction: column;
  width: min(390px, 90vw);
  height: 100dvh;
  background: #ffffff;
  border-left: 1px solid rgba(40, 93, 168, 0.14);
  border-radius: 24px 0 0 24px;
  box-shadow: -20px 0 60px rgba(15, 23, 42, 0.24);
  overflow-y: auto;
  transition: right 0.25s ease;
}

.mobile-menu-panel.active {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 88px;
  padding: 1rem;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

.mobile-menu-header img {
  width: 170px;
  max-width: 70%;
  height: auto;
  object-fit: contain;
}

.mobile-menu-header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--brand);
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.18);
  border-radius: 14px;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.mobile-menu-links {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.mobile-menu-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0.9rem 1rem;
  color: var(--muted);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  font-weight: 900;
  text-align: center;
}

.mobile-menu-links a:hover {
  color: var(--brand);
  background: rgba(40, 93, 168, 0.07);
}

.mobile-menu-cta {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px rgba(40, 93, 168, 0.22) !important;
}

/* ===============================
   BOTONES
================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 14px 28px rgba(40, 93, 168, 0.22);
}

.btn.secondary {
  color: var(--text);
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}

.btn.secondary:hover {
  color: var(--brand);
  border-color: rgba(40, 93, 168, 0.25);
}

.btn.full {
  width: 100%;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

.hero,
.detail-hero {
  display: block;
  padding: clamp(2.5rem, 6vw, 5.5rem) 0 2.5rem;
}

.hero-content {
  width: 100%;
  max-width: 100%;
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 0.9rem;
  padding: 0.45rem 0.75rem;
  color: var(--brand);
  background: rgba(40, 93, 168, 0.08);
  border: 1px solid rgba(40, 93, 168, 0.12);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1,
.detail-hero h1 {
  max-width: 1120px;
  margin: 0;
  color: var(--text);
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.hero-text,
.detail-hero p {
  max-width: 850px;
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 2rem 0 0;
}

/* ===============================
   TARJETAS GENERALES
================================= */

.features,
.payment-grid,
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 0 4rem;
}

.features article,
.payment-grid article,
.faq-grid article,
.detail-card {
  padding: 1.2rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.features span,
.payment-grid span,
.detail-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--bg-soft);
  border-radius: 16px;
  font-size: 1.55rem;
}

.features h3,
.payment-grid strong,
.faq-grid h3,
.detail-card h3 {
  margin: 0.8rem 0 0.45rem;
  color: var(--text);
}

.features p,
.payment-grid p,
.faq-grid p,
.detail-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

/* ===============================
   SECCIONES
================================= */

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.05em;
}

.section-heading > p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.highlight-section,
.catalog-section,
.payment-section,
.faq-section {
  padding: 3rem 0;
}

.highlight-section .section-heading {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.55rem;
}

.highlight-section .section-heading > p {
  max-width: 720px;
  margin: 0;
}

/* ===============================
   TEMPORADA / PROMOCIONES
================================= */

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.highlight-card {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 310px;
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  isolation: isolate;
}

.highlight-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
  transition: transform 0.28s ease;
}

.highlight-card:hover img {
  transform: scale(1.05);
}

.highlight-card::after {
  content: "Ver más →";
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 3;
  padding: 0.55rem 0.85rem;
  color: var(--brand);
  background: #ffffff;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.18);
}

.highlight-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem;
  color: #ffffff;
  background:
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.06) 0%,
      rgba(15, 23, 42, 0.42) 45%,
      rgba(15, 23, 42, 0.84) 100%
    );
}

.highlight-overlay span {
  width: fit-content;
  padding: 0.42rem 0.7rem;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.highlight-overlay h3 {
  margin: 0.8rem 0 0.4rem;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.highlight-overlay p {
  max-width: 440px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 700;
  line-height: 1.45;
}

/* ===============================
   CATÁLOGO
================================= */

.catalog-section {
  padding: 2.2rem 0 4rem;
}

.catalog-tools {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 0.9rem;
  margin: 1.2rem 0;
}

.search-box,
.select-box {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.search-box input,
.select-box select {
  width: 100%;
  min-height: 52px;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  outline: none;
  box-shadow: var(--shadow-soft);
}

.search-box input::placeholder {
  color: #98a2b3;
}

.search-box input:focus,
.select-box select:focus {
  border-color: rgba(40, 93, 168, 0.55);
  box-shadow: 0 0 0 4px rgba(40, 93, 168, 0.10);
}

.rubros-header {
  margin: 1.2rem 0 0.45rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 900;
}

.category-scroll {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding: 0.45rem 0 1.2rem;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar {
  display: none;
}

.category-scroll.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.category-btn {
  flex: 0 0 auto;
  min-height: 44px;
  color: var(--brand);
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.18);
  border-radius: 999px;
  padding: 0.75rem 1.05rem;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
  transition: 0.18s ease;
}

.category-btn:hover {
  transform: translateY(-2px);
  background: rgba(40, 93, 168, 0.07);
}

.category-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: var(--brand);
  box-shadow: 0 14px 28px rgba(40, 93, 168, 0.22);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.product-image {
  display: grid;
  place-items: center;
  min-height: 210px;
  background:
    radial-gradient(circle at 50% 20%, rgba(40, 93, 168, 0.09), transparent 15rem),
    linear-gradient(145deg, #ffffff, #f1f5f9);
  border-bottom: 1px solid var(--border);
}

.product-image img {
  width: 82%;
  height: 190px;
  object-fit: contain;
}

.product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem;
}

.product-meta {
  display: flex;
  justify-content: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.35rem 0.6rem;
  color: #ffffff;
  background: var(--brand);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
}

.code {
  color: var(--muted);
  font-size: 0.78rem;
}

.product-meta .code {
  display: none;
}

.product-card h3 {
  margin: 0;
  color: var(--text);
  line-height: 1.25;
}

.product-card p {
  margin: 0.7rem 0;
  color: var(--muted);
  line-height: 1.48;
}

.product-bottom {
  display: grid;
  gap: 0.9rem;
  margin-top: auto;
}

.price-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.sin-precio {
  margin-top: 0.25rem;
  color: var(--brand);
  font-size: 1rem;
  font-weight: 900;
}

.stock {
  padding: 0.35rem 0.55rem;
  color: var(--success);
  background: rgba(20, 128, 74, 0.10);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: right;
}

.stock.off {
  color: var(--danger);
  background: rgba(220, 38, 38, 0.10);
}

.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.empty-state p {
  color: var(--muted);
}

/* ===============================
   CONTADOR DE PRODUCTOS
================================= */

.catalog-section .section-heading {
  align-items: flex-start;
}

#resultadosTexto {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0.45rem 0 0;
  padding: 0.5rem 0.8rem;
  color: var(--brand);
  background: rgba(40, 93, 168, 0.08);
  border: 1px solid rgba(40, 93, 168, 0.14);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

#resultadosTexto::before {
  content: "";
  margin-right: 0.4rem;
}

/* ===============================
   CÓMO CONSULTAR / DETALLE
================================= */

.how {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 2rem;
  align-items: start;
  padding: 3rem 0 5rem;
}

.how h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.how p {
  color: var(--muted);
  line-height: 1.6;
}

.how ol {
  margin: 0;
  padding: 1.2rem 1.2rem 1.2rem 2.5rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.how li {
  margin: 0.8rem 0;
  color: var(--muted);
  line-height: 1.45;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-bottom: 5rem;
}

.detail-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.detail-card .btn {
  margin-top: auto;
}

/* ===============================
   CARRITO
================================= */

.floating-cart-button {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 62px;
  padding: 0.85rem 1.15rem;
  color: var(--brand);
  background: #ffffff;
  border: 2px solid rgba(40, 93, 168, 0.20);
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border 0.18s ease;
}

.floating-cart-button:hover {
  transform: translateY(-3px);
  border-color: rgba(40, 93, 168, 0.38);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.28);
}

.floating-cart-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius: 999px;
  font-size: 1.2rem;
}

.floating-cart-button strong {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 0.45rem;
  color: #ffffff;
  background: var(--brand);
  border-radius: 999px;
  font-size: 0.9rem;
}

.cart-panel {
  position: fixed;
  top: 0;
  right: -430px;
  left: auto;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  width: min(400px, 92vw);
  height: 100dvh;
  background: #f3f7fc;
  border-left: 1px solid rgba(40, 93, 168, 0.14);
  box-shadow: -20px 0 60px rgba(15, 23, 42, 0.20);
  transition: right 0.25s ease;
}

.cart-panel.active {
  right: 0;
}

.cart-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}

.cart-panel-header h2 {
  margin: 0.45rem 0 0;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.1;
}

.cart-panel-header p {
  margin: 0.35rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  line-height: 1.35;
}

.cart-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  font-size: 1.35rem;
}

.cart-panel-header button {
  width: 38px;
  height: 38px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.cart-items {
  display: grid;
  align-content: start;
  flex: 1;
  gap: 0.7rem;
  overflow-y: auto;
  padding: 0.85rem;
  background: #f3f7fc;
}

.cart-empty {
  margin: 0;
  padding: 1rem;
  color: var(--muted);
  text-align: center;
  background: var(--bg-soft);
  border: 1px dashed rgba(40, 93, 168, 0.25);
  border-radius: 16px;
  font-size: 0.92rem;
}

.cart-item {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.12);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
}

.cart-item.compact {
  align-self: start;
  min-height: auto;
  padding: 0.85rem;
  border: 1px solid rgba(40, 93, 168, 0.22);
  border-left: 5px solid var(--brand);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.cart-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cart-product-name {
  flex: 1;
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.25;
}

.cart-qty-control {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem;
  background: #eef4fb;
  border: 1px solid rgba(40, 93, 168, 0.12);
  border-radius: 999px;
}

.cart-qty-control button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--brand);
  background: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.08);
}

.cart-qty-control button:hover {
  color: #ffffff;
  background: var(--brand);
}

.cart-qty-input {
  width: 46px;
  height: 32px;
  color: var(--text);
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.95rem;
  font-weight: 900;
}

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

.cart-qty-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.cart-qty-input:focus {
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(40, 93, 168, 0.14);
}

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.cart-remove {
  min-height: 32px;
  margin-left: 0;
  padding: 0 0.8rem;
  color: #ffffff;
  background: #ef4444;
  border: none;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.cart-remove:hover {
  background: #dc2626;
}

.cart-panel-footer {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: #ffffff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.06);
}

.cart-clear,
.cart-csv {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.cart-clear {
  color: #dc2626;
  background: #fff1f2;
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.cart-csv {
  color: var(--brand);
  background: #eff6ff;
  border: 1px solid rgba(40, 93, 168, 0.28);
}

.cart-whatsapp {
  color: #ffffff !important;
  background: var(--whatsapp) !important;
  box-shadow: 0 14px 28px rgba(22, 163, 74, 0.22) !important;
}

.cart-whatsapp:hover {
  background: var(--whatsapp-dark) !important;
}

.cart-help {
  margin: -0.2rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
}

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 2900;
  background: rgba(15, 23, 42, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cart-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cart-confirm-box {
  display: none;
  padding: 0.85rem 1rem;
  background: #f3f7fc;
  border-top: 1px solid rgba(40, 93, 168, 0.10);
}

.cart-confirm-box.active {
  display: block;
}

.cart-confirm-content {
  padding: 0.95rem;
  background: #ffffff;
  border: 1px solid rgba(220, 38, 38, 0.20);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

.cart-confirm-content strong {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 900;
}

.cart-confirm-content p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.cart-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.cart-confirm-actions button {
  min-height: 40px;
  border: none;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.confirm-cancel {
  color: var(--brand);
  background: #eef4fb;
}

.confirm-cancel:hover {
  background: #dbeafe;
}

.confirm-remove {
  color: #ffffff;
  background: #ef4444;
}

.confirm-remove:hover {
  background: #dc2626;
}

/* ===============================
   PÁGINA CONSULTA / CHECKOUT
================================= */

main.checkout-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 150px 0 80px;
  background: #f7f9fc;
  min-height: 100vh;
  overflow-x: hidden;
}

.checkout-hero,
.checkout-layout {
  width: min(var(--max-width), calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
}

.checkout-hero {
  max-width: none;
  margin-bottom: 34px;
  text-align: left;
}

.checkout-hero h1 {
  max-width: 760px;
  margin: 0 0 16px;
  color: #152238;
  font-size: clamp(36px, 5vw, 66px);
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.checkout-hero p {
  max-width: 820px;
  margin: 0;
  color: #5c6780;
  font-size: 17px;
  line-height: 1.6;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: start;
}

.checkout-card {
  background: #ffffff;
  border: 1px solid #e3eaf5;
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 18px 50px rgba(21, 34, 56, 0.08);
}

.checkout-card h2 {
  margin: 0 0 18px;
  color: #152238;
}

.checkout-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.checkout-title h2 {
  margin: 0;
}

.checkout-title a {
  color: #245ba7;
  font-weight: 800;
  text-decoration: none;
}

.consulta-items {
  display: grid;
  gap: 12px;
}

.consulta-item {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 14px;
  align-items: center;
  border: 1px solid #e3eaf5;
  border-radius: 20px;
  padding: 16px;
  background: #f8fafc;
}

.consulta-index {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #245ba7;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.consulta-info strong {
  display: block;
  color: #152238;
  margin-bottom: 6px;
}

.consulta-info p {
  margin: 2px 0;
  color: #5c6780;
  font-size: 14px;
}

.consulta-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #dbe5f2;
  border-radius: 999px;
  padding: 6px;
}

.consulta-qty button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #eaf1fb;
  color: #245ba7;
  font-weight: 900;
  cursor: pointer;
}

.consulta-qty button:hover {
  color: #ffffff;
  background: #245ba7;
}

.consulta-qty span {
  min-width: 24px;
  text-align: center;
  font-weight: 900;
}

.consulta-remove {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #fff0f0;
  color: #e53e3e;
  font-weight: 900;
  cursor: pointer;
}

.consulta-remove:hover {
  color: #ffffff;
  background: #e53e3e;
}

.checkout-form {
  display: grid;
  gap: 14px;
}

.checkout-form label {
  display: grid;
  gap: 7px;
  color: #44516c;
  font-size: 13px;
  font-weight: 800;
}

.checkout-form input,
.checkout-form select {
  width: 100%;
  border: 1px solid #d9e2f0;
  border-radius: 16px;
  padding: 13px 14px;
  font: inherit;
  color: #152238;
  background: #ffffff;
  outline: none;
}

.checkout-form input:focus,
.checkout-form select:focus {
  border-color: #245ba7;
  box-shadow: 0 0 0 4px rgba(36, 91, 167, 0.12);
}

.checkout-actions {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.checkout-help {
  margin: 14px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}

.consulta-empty {
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed #c7d4e8;
  border-radius: 22px;
  background: #f8fafc;
}

.consulta-empty h3 {
  margin: 0 0 8px;
  color: #152238;
}

.consulta-empty p {
  color: #5c6780;
  margin-bottom: 18px;
}

.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.checkout-confirm-box {
  padding: 0;
  margin: 18px 0 0;
  background: transparent;
  border-top: none;
}

.checkout-confirm-box .cart-confirm-content {
  border-color: rgba(220, 38, 38, 0.22);
  background: #fffafa;
}

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

.footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1rem, 4vw, 3rem);
  background: #ffffff;
  border-top: 1px solid var(--border);
}

.footer p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.footer a {
  color: var(--brand);
  font-weight: 900;
}

/* ===============================
   RESPONSIVE
================================= */

@media (min-width: 1201px) {
  .desktop-nav {
    display: flex;
  }

  .menu-toggle,
  .mobile-menu-panel,
  .nav-overlay {
    display: none;
  }
}

@media (max-width: 1200px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    z-index: 1000;
  }

  .desktop-nav {
    display: none !important;
  }

  .brand img {
    width: 190px;
    max-width: 70vw;
  }

  .menu-toggle {
    display: block;
    position: relative;
    z-index: 1100;
  }

  main {
    width: min(var(--max-width), calc(100% - 1.2rem));
    padding-bottom: 90px;
  }

  .footer {
    padding-bottom: 105px;
  }

  .hero h1,
  .detail-hero h1 {
    font-size: clamp(2rem, 9vw, 3.6rem);
    line-height: 1;
  }

  .hero-text,
  .detail-hero p {
    font-size: 1rem;
  }

  .floating-cart-button {
    display: inline-flex !important;
    position: fixed !important;
    right: 1rem !important;
    bottom: 1rem !important;
    left: 1rem !important;
    z-index: 900 !important;
    justify-content: center !important;
    width: calc(100% - 2rem) !important;
    min-height: 58px !important;
  }

  .cart-panel {
    width: min(390px, 90vw);
    border-radius: 24px 0 0 24px;
    overflow: hidden;
  }

  .cart-panel-header {
    padding: 1rem;
  }

  .cart-items {
    padding: 0.85rem;
  }

  .cart-item-top {
    align-items: flex-start;
  }

  .cart-product-name {
    font-size: 0.95rem;
  }
}

@media (max-width: 1100px) {
  .how {
    grid-template-columns: 1fr;
  }

  .products-grid,
  .features,
  .payment-grid,
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .catalog-tools {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 980px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .brand img {
    width: 170px;
    max-width: 72vw;
  }

  .hero {
    padding-top: 2rem;
  }

  .hero-stats,
  .highlight-grid,
  .products-grid,
  .features,
  .payment-grid,
  .faq-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .highlight-section,
  .catalog-section,
  .payment-section,
  .faq-section {
    padding: 2rem 0;
  }

  .highlight-card,
  .highlight-card img {
    min-height: 260px;
  }
}

@media (max-width: 640px) {
  main.checkout-page {
    padding: 130px 0 60px;
  }

  .checkout-hero,
  .checkout-layout {
    width: calc(100% - 36px);
  }

  .checkout-card {
    padding: 20px;
    border-radius: 22px;
  }

  .checkout-hero h1 {
    font-size: clamp(2rem, 11vw, 3.1rem);
  }

  .consulta-item {
    grid-template-columns: 1fr;
  }

  .consulta-index {
    display: none;
  }

  .checkout-title {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .brand img {
    width: 150px;
  }

  .topbar {
    padding: 0.65rem 0.85rem;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
  }

  .hero h1,
  .detail-hero h1 {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .mobile-menu-panel {
    width: 90vw;
    right: -100%;
    border-radius: 22px 0 0 22px;
  }

  .mobile-menu-panel.active {
    right: 0;
  }

  .mobile-menu-header img {
    width: 150px;
  }

  .cart-panel {
    right: -100%;
    width: 90vw;
    border-radius: 22px 0 0 22px;
  }

  .cart-panel.active {
    right: 0;
  }

  .cart-qty-control button {
    width: 30px;
    height: 30px;
  }

  .cart-panel-footer {
    padding-bottom: 1.2rem;
  }
}

/* ===============================
   TIPO DE CONSULTA
================================= */

.hidden {
  display: none !important;
}

.choice-panel h2,
.checkout-mode h2 {
  margin: 0 0 10px;
}

.choice-intro,
.mode-help {
  margin: 0 0 18px;
  color: #5c6780;
  line-height: 1.5;
}

.choice-grid {
  display: grid;
  gap: 14px;
}

.choice-card {
  padding: 18px;
  border: 1px solid #dce7f5;
  border-radius: 22px;
  background: #f8fafc;
  box-shadow: 0 10px 26px rgba(21, 34, 56, 0.06);
}

.choice-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: #eaf1fb;
  font-size: 24px;
}

.choice-card h3 {
  margin: 0 0 8px;
  color: #152238;
  font-size: 20px;
}

.choice-card p {
  margin: 0 0 16px;
  color: #5c6780;
  line-height: 1.5;
}

.choice-button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(40, 93, 168, 0.18);
}

.choice-button:hover {
  background: var(--brand-dark);
}

.checkout-mode {
  animation: checkoutFade 0.18s ease;
}

.mode-back {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  margin-bottom: 16px;
  padding: 0 12px;
  border: 1px solid rgba(40, 93, 168, 0.18);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--brand);
  font-weight: 900;
  cursor: pointer;
}

.mode-back:hover {
  background: #dbeafe;
}

@keyframes checkoutFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   AJUSTES CHECKOUT / TIPO CONSULTA
================================= */

.checkout-hero {
  max-width: none;
  margin-bottom: 34px;
  text-align: left;
}

.checkout-hero .eyebrow {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
}

.checkout-hero h1 {
  max-width: 760px;
  margin: 0 0 16px;
  color: #152238;
  font-size: clamp(36px, 5vw, 66px);
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.checkout-hero p {
  max-width: 820px;
  margin: 0;
  color: #5c6780;
  font-size: 17px;
  line-height: 1.6;
}

.hidden {
  display: none !important;
}

.choice-panel h2,
.checkout-mode h2 {
  margin: 0 0 10px;
}

.choice-intro,
.mode-help {
  margin: 0 0 18px;
  color: #5c6780;
  line-height: 1.5;
}

.choice-grid {
  display: grid;
  gap: 14px;
}

.choice-card {
  padding: 18px;
  border: 1px solid #dce7f5;
  border-radius: 22px;
  background: #f8fafc;
  box-shadow: 0 10px 26px rgba(21, 34, 56, 0.06);
}

.choice-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: #eaf1fb;
  font-size: 24px;
}

.choice-card h3 {
  margin: 0 0 8px;
  color: #152238;
  font-size: 20px;
}

.choice-card p {
  margin: 0 0 16px;
  color: #5c6780;
  line-height: 1.5;
}

.choice-button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(40, 93, 168, 0.18);
}

.choice-button:hover {
  background: var(--brand-dark);
}

.checkout-mode {
  animation: checkoutFade 0.18s ease;
}

.mode-back {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  margin-bottom: 16px;
  padding: 0 12px;
  border: 1px solid rgba(40, 93, 168, 0.18);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--brand);
  font-weight: 900;
  cursor: pointer;
}

.mode-back:hover {
  background: #dbeafe;
}

@keyframes checkoutFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   VALIDACIÓN FORMULARIO CONSULTA
================================= */


.field-error {
  display: none;
  margin-top: -2px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 800;
}

.field-error.active {
  display: block;
}

.checkout-form input.input-error,
.checkout-form select.input-error {
  border-color: #dc2626;
  background: #fff7f7;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}

.checkout-form input.input-error::placeholder {
  color: #dc2626;
}

.campo-requerido {
  position: relative;
}

/* ===============================
   RESPONSIVE CHECKOUT
================================= */

@media (max-width: 640px) {
  .checkout-hero .eyebrow {
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
  }

  .checkout-hero h1 {
    max-width: 100%;
  }

  .checkout-hero p {
    max-width: 100%;
  }
}

/* =========================================================
   FIX MOBILE GENERAL - NAV, CATÁLOGO Y PÁGINAS INTERNAS
   Pegado al final para no romper los estilos anteriores
========================================================= */

@media (max-width: 1200px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .topbar .brand {
    min-width: 0;
  }

  .topbar .brand img {
    width: clamp(145px, 42vw, 190px);
    max-width: 100%;
  }

  /* Menú mobile para páginas internas: temporada, promociones y consulta */
  .topbar .nav:not(.desktop-nav) {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 1210;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    width: min(390px, 90vw);
    height: 100dvh;
    padding: 6rem 1rem 1rem;
    overflow-y: auto;
    background: #ffffff;
    border-left: 1px solid rgba(40, 93, 168, 0.14);
    border-radius: 24px 0 0 24px;
    box-shadow: -20px 0 60px rgba(15, 23, 42, 0.24);
    transition: right 0.25s ease;
  }

  .topbar .nav:not(.desktop-nav).open,
  .topbar .nav:not(.desktop-nav).active {
    right: 0;
  }

  .topbar .nav:not(.desktop-nav) a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 0.9rem 1rem;
    color: var(--muted);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    font-weight: 900;
    text-align: center;
  }

  .topbar .nav:not(.desktop-nav) .nav-cta {
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(40, 93, 168, 0.22);
  }
}

@media (max-width: 760px) {
  body {
    padding-top: 70px;
  }

  main {
    width: calc(100% - 1.1rem);
  }

  .hero,
  .detail-hero {
    padding: 2rem 0 1.6rem;
  }

  .hero h1,
  .detail-hero h1,
  .checkout-hero h1 {
    font-size: clamp(2rem, 11vw, 3.15rem);
    line-height: 1;
    letter-spacing: -0.055em;
  }

  .hero-text,
  .detail-hero p,
  .checkout-hero p {
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .section-heading h2 {
    font-size: clamp(1.85rem, 9vw, 2.65rem);
    line-height: 1;
  }

  .catalog-tools {
    gap: 0.75rem;
  }

  .category-scroll {
    padding-bottom: 0.95rem;
  }

  .products-grid {
    gap: 0.85rem;
  }

  .product-image {
    min-height: 170px;
  }

  .product-image img {
    height: 145px;
  }

  .product-body {
    padding: 0.9rem;
  }

  .price-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
  }

  .stock {
    text-align: left;
  }

  .highlight-card,
  .highlight-card img {
    min-height: 235px;
  }

  .highlight-card::after {
    top: 0.85rem;
    right: 0.85rem;
    padding: 0.48rem 0.7rem;
    font-size: 0.82rem;
  }

  .highlight-overlay {
    padding: 1rem;
  }

  .highlight-overlay h3 {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .features,
  .payment-grid,
  .faq-grid,
  .detail-grid {
    gap: 0.85rem;
  }

  .footer {
    padding-bottom: 6rem;
  }
}

@media (max-width: 640px) {
  .cart-panel {
    width: 100vw;
    right: -100vw;
    border-radius: 0;
  }

  .cart-panel.active {
    right: 0;
  }

  .cart-panel-header {
    padding: 0.95rem;
  }

  .cart-items {
    padding: 0.75rem;
  }

  .cart-item-top {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .cart-qty-control {
    justify-self: end;
  }

  .cart-item-bottom {
    justify-content: flex-start;
  }

  .floating-cart-button {
    min-height: 56px !important;
    font-size: 0.95rem;
  }

  .checkout-hero,
  .checkout-layout {
    width: calc(100% - 1.1rem);
  }

  .checkout-card {
    padding: 18px;
  }

  .consulta-item {
    gap: 12px;
  }

  .consulta-qty {
    width: fit-content;
  }
}

@media (max-width: 520px) {
  .topbar .nav:not(.desktop-nav),
  .mobile-menu-panel {
    width: 92vw;
    border-radius: 22px 0 0 22px;
  }

  .hero-actions {
    gap: 0.65rem;
  }

  .btn {
    min-height: 46px;
    padding: 0.78rem 1rem;
  }

  .product-card h3 {
    font-size: 1rem;
  }

  .product-card p {
    font-size: 0.92rem;
  }
}

/* =========================================================
   FIX FINAL MOBILE - MENÚ CLARO + SOMBRAS SUAVES
   Agregado para evitar que el overlay oscurezca el menú en celular
========================================================= */

@media (max-width: 1200px) {
  .topbar {
    z-index: 1250;
  }

  .nav-overlay {
    z-index: 1180;
    background: rgba(15, 23, 42, 0.18);
  }

  .mobile-menu-panel {
    z-index: 1320;
  }

  .topbar .nav:not(.desktop-nav) {
    z-index: 1300;
    background: #ffffff;
    box-shadow: -18px 0 55px rgba(15, 23, 42, 0.18);
  }

  .topbar .nav:not(.desktop-nav) a {
    color: #44516c;
    background: #ffffff;
    border-color: #dbe5f2;
  }

  .topbar .nav:not(.desktop-nav) .nav-cta {
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-color: transparent;
  }
}

@media (max-width: 640px) {
  .topbar {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  }

  .product-card,
  .highlight-card,
  .checkout-card,
  .detail-card,
  .features article,
  .payment-grid article,
  .faq-grid article {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  }

  .product-card:hover {
    transform: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  }

  .floating-cart-button {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  }
}


/* ===============================
   IMÁGENES EN TEMPORADA / PROMOS
================================= */

.detail-product-card {
  overflow: hidden;
  padding: 0;
}

.detail-product-image {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(40, 93, 168, 0.10), transparent 12rem),
    linear-gradient(145deg, #ffffff, #f1f5f9);
  border-bottom: 1px solid var(--border);
}

.detail-product-image img {
  width: 100%;
  max-width: 230px;
  height: 185px;
  object-fit: contain;
}

.detail-product-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.2rem;
}

.detail-product-body h3,
.detail-product-body p {
  margin: 0;
}

.detail-product-body .btn {
  width: 100%;
  margin-top: auto;
}

@media (max-width: 640px) {
  .detail-product-image {
    min-height: 180px;
  }

  .detail-product-image img {
    max-width: 180px;
    height: 145px;
  }
}


/* ===============================
   BANNER AUTOMÁTICO DE PROMOCIONES
================================= */

.promo-banner-slider {
  width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #dfe8f4;
  border-top: 1px solid rgba(40, 93, 168, 0.08);
  border-bottom: 1px solid rgba(40, 93, 168, 0.08);
  box-shadow: inset 0 -18px 45px rgba(15, 23, 42, 0.04);
}

.promo-banner-slider[hidden] {
  display: none !important;
}

.promo-banner-track {
  position: relative;
  width: 100%;
  min-height: clamp(210px, 33vw, 420px);
}

.promo-banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.promo-banner-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.promo-banner-link {
  display: block;
  width: 100%;
  min-height: clamp(210px, 33vw, 420px);
}

.promo-banner-link img {
  display: block;
  width: 100%;
  height: clamp(210px, 33vw, 420px);
  object-fit: cover;
  object-position: center;
}

.promo-banner-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 5;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
}

.promo-banner-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(40, 93, 168, 0.28);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}

.promo-banner-dot.active {
  width: 28px;
  background: var(--brand);
}

@media (max-width: 900px) {
  .promo-banner-track,
  .promo-banner-link {
    min-height: clamp(170px, 34vw, 260px);
  }

  .promo-banner-link img {
    height: clamp(170px, 34vw, 260px);
  }
}

@media (max-width: 640px) {
  .promo-banner-track,
  .promo-banner-link {
    min-height: clamp(150px, 44vw, 220px);
  }

  .promo-banner-link img {
    height: clamp(150px, 44vw, 220px);
  }

  .promo-banner-dots {
    bottom: 8px;
    gap: 6px;
    padding: 7px 10px;
  }

  .promo-banner-dot {
    width: 9px;
    height: 9px;
  }

  .promo-banner-dot.active {
    width: 22px;
  }
}

/* ===============================
   CATÁLOGO ESTILO MOCKUP IA
   Filtros con íconos y búsqueda más limpia
================================= */

.catalog-section {
  padding-top: clamp(3.4rem, 7vw, 5.5rem);
  padding-bottom: 5rem;
}

.catalog-section .section-heading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  text-align: center;
  margin-bottom: 1.8rem;
}

.catalog-section .section-heading > div {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
}

.catalog-section .section-heading .eyebrow {
  margin: 0;
}

.catalog-section .section-heading h2 {
  font-size: clamp(2.7rem, 6vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.065em;
}

#resultadosTexto {
  margin: 0.2rem 0 0;
  padding: 0.55rem 0.95rem;
  background: #eaf2ff;
  border-color: rgba(40, 93, 168, 0.14);
  box-shadow: 0 12px 30px rgba(40, 93, 168, 0.10);
}

.catalog-tools {
  width: min(980px, 100%);
  grid-template-columns: 1fr 210px;
  gap: 0.85rem;
  margin: 0 auto 1.45rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(40, 93, 168, 0.10);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.055);
  backdrop-filter: blur(10px);
}

.search-box,
.select-box {
  text-align: left;
}

.search-box input,
.select-box select {
  min-height: 56px;
  border-radius: 18px;
  box-shadow: none;
}

.search-box input:focus,
.select-box select:focus {
  border-color: rgba(40, 93, 168, 0.48);
  box-shadow: 0 0 0 4px rgba(40, 93, 168, 0.10);
}

.rubros-header {
  display: none;
}

.category-scroll {
  justify-content: center;
  gap: 0.8rem;
  width: min(1180px, 100%);
  margin: 0 auto 2rem;
  padding: 0.35rem 0.25rem 1rem;
}

.category-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 54px;
  padding: 0.75rem 1.15rem;
  color: #17233a;
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.12);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.category-btn:hover {
  color: var(--brand);
  background: #ffffff;
  border-color: rgba(40, 93, 168, 0.22);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.category-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(40, 93, 168, 0.22);
}

.category-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eef4fb;
  color: var(--brand);
  font-size: 0.95rem;
  line-height: 1;
}

.category-btn.active .category-icon {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

.products-grid {
  gap: 1.25rem;
}

.product-card {
  border-radius: 26px;
  border-color: rgba(40, 93, 168, 0.10);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.075);
}

.product-image {
  min-height: 230px;
}

.product-image img {
  height: 205px;
}

.product-body {
  padding: 1.15rem;
}

.product-card h3 {
  font-size: 1.08rem;
}

.product-card .btn.primary.full {
  min-height: 52px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .catalog-section .section-heading {
    align-items: flex-start;
    text-align: left;
  }

  .catalog-section .section-heading > div {
    justify-items: start;
  }

  .catalog-tools {
    grid-template-columns: 1fr;
  }

  .category-scroll {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .catalog-section {
    padding-top: 2.6rem;
  }

  .catalog-section .section-heading h2 {
    font-size: clamp(2.35rem, 13vw, 3.35rem);
  }

  .catalog-tools {
    padding: 0.65rem;
    border-radius: 20px;
  }

  .search-box input,
  .select-box select {
    min-height: 52px;
    border-radius: 16px;
  }

  .category-btn {
    min-height: 50px;
    padding: 0.65rem 0.95rem;
  }

  .category-icon {
    width: 26px;
    height: 26px;
  }
}


/* ==========================================================
   REDISEÑO IA - FASE 1
   Estética moderna, sin cambiar la estructura base del proyecto
========================================================== */

:root {
  --ia-blue: #075bd8;
  --ia-blue-dark: #053f9d;
  --ia-ink: #0d1b34;
  --ia-card: rgba(255, 255, 255, 0.86);
  --ia-line: rgba(8, 61, 130, 0.12);
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(40, 93, 168, 0.10), transparent 28rem),
    radial-gradient(circle at 90% 12%, rgba(14, 99, 214, 0.08), transparent 32rem),
    linear-gradient(180deg, #ffffff 0%, #f4f8fd 42%, #eef5fb 100%);
}

.topbar {
  min-height: 88px;
  padding-block: 0.75rem;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(8, 61, 130, 0.08);
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.07);
}

body { padding-top: 88px; }

.brand img { width: clamp(180px, 14vw, 235px); }

.nav a,
.desktop-nav a {
  color: #43516a;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.nav .nav-cta,
.desktop-nav .nav-cta {
  padding-inline: 1.15rem;
  background: linear-gradient(135deg, var(--ia-blue), var(--ia-blue-dark));
  box-shadow: 0 14px 34px rgba(7, 91, 216, 0.22);
}

.promo-banner-slider {
  width: 100%;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: #0a49ad;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

.promo-banner-track,
.promo-banner-link {
  min-height: clamp(230px, 29vw, 410px);
}

.promo-banner-link img {
  height: clamp(230px, 29vw, 410px);
  object-fit: cover;
  object-position: center;
}

.promo-banner-dots {
  bottom: 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
}

.hero {
  padding: clamp(2.5rem, 5vw, 4.2rem) 0 1.5rem;
}

.hero-content {
  max-width: 820px;
}

.hero h1,
.detail-hero h1 {
  max-width: 900px;
  color: var(--ia-ink);
  font-size: clamp(3rem, 5.6vw, 5.7rem);
  letter-spacing: -0.075em;
  line-height: 0.95;
}

.hero-text,
.detail-hero p {
  max-width: 760px;
  font-size: 1.06rem;
}

.hero-actions .btn,
.hero-actions a {
  gap: .45rem;
}

.hero-actions .btn.primary::before { content: "▦"; }
.hero-actions .btn.secondary::before { content: none; }

.features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.5rem;
  margin-bottom: 4.5rem;
}

.features article,
.payment-grid article,
.faq-grid article {
  background: var(--ia-card);
  border: 1px solid var(--ia-line);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(12px);
}

.features span,
.payment-grid span,
.detail-icon {
  background: linear-gradient(135deg, #eef6ff, #ffffff);
  color: var(--ia-blue);
  box-shadow: inset 0 0 0 1px rgba(7, 91, 216, 0.08);
}

.catalog-section {
  position: relative;
  margin: 1rem auto 4rem;
  padding: clamp(2rem, 4vw, 3.2rem);
  overflow: visible;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(8, 61, 130, 0.10);
  border-radius: 34px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
}

.catalog-section .section-heading {
  display: grid;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.catalog-section .section-heading > div {
  display: grid;
  justify-items: center;
}

.catalog-section .section-heading h2 {
  font-size: clamp(3rem, 5.3vw, 5rem);
}

.catalog-section .section-heading > p {
  width: fit-content;
  margin: 0 auto;
  padding: 0.55rem 0.9rem;
  color: var(--brand);
  background: #eef6ff;
  border: 1px solid rgba(40, 93, 168, 0.14);
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(40, 93, 168, 0.08);
}

.catalog-tools {
  max-width: 980px;
  margin: 28px auto 24px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(40, 93, 168, 0.12);
  border-radius: 24px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.search-box input,
.select-box select {
  min-height: 58px;
  border-radius: 18px;
  box-shadow: none;
}

.rubros-header { display: none; }

.category-scroll {
  width: 100%;
  margin: 0 auto 28px;
  padding: 0 4px 10px;
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  overflow-x: auto;
  scroll-padding-left: 12px;
}

.category-scroll::-webkit-scrollbar { height: 8px; }
.category-scroll::-webkit-scrollbar-thumb { background: rgba(40,93,168,.18); border-radius: 999px; }

.category-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 22px;
  color: #0f3f82;
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.14);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.category-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #eef4fb;
  border-radius: 999px;
  font-size: 15px;
}

.category-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--ia-blue), var(--ia-blue-dark));
  border-color: transparent;
  box-shadow: 0 16px 32px rgba(7, 91, 216, 0.22);
}

.category-btn.active .category-icon { background: rgba(255, 255, 255, 0.20); }

.products-grid {
  gap: 1.1rem;
}

.product-card {
  overflow: hidden;
  border: 1px solid rgba(8, 61, 130, 0.10);
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
  transition: transform .18s ease, box-shadow .18s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.11);
}

.product-image {
  position: relative;
  min-height: 230px;
  background: linear-gradient(145deg, #ffffff, #eff6ff);
}

.product-image img {
  max-width: 86%;
  max-height: 195px;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(15, 23, 42, 0.12));
}

.stock-floating {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 0.4rem 0.65rem;
  color: #057a37;
  background: #ecfdf3;
  border: 1px solid rgba(5, 122, 55, .2);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 900;
}

.stock-floating.off {
  color: #b91c1c;
  background: #fff1f2;
  border-color: rgba(185, 28, 28, .18);
}

.product-body {
  padding: 1.05rem;
}

.product-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .75rem;
}

.product-body h3 {
  font-size: 1.05rem;
  line-height: 1.15;
}

.product-body p {
  min-height: 44px;
}

.modern-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.btn-add-round {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: var(--ia-blue);
  background: #ffffff;
  border: 2px solid rgba(7, 91, 216, .35);
  border-radius: 999px;
  font-size: 1.45rem;
  font-weight: 900;
  box-shadow: 0 12px 25px rgba(7, 91, 216, .16);
}

.btn-add-round:hover {
  color: #ffffff;
  background: var(--ia-blue);
}

.floating-cart-button {
  min-width: 170px;
  min-height: 64px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(40, 93, 168, .16);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .13);
}

.floating-cart-icon,
.cart-icon {
  background: linear-gradient(135deg, var(--ia-blue), var(--ia-blue-dark));
}

.detail-grid {
  align-items: stretch;
}

.detail-product-card {
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}

.detail-product-image {
  min-height: 240px;
}

.detail-product-image img {
  max-width: 86%;
  height: 190px;
  object-fit: contain;
}

.checkout-card {
  border-radius: 26px;
  border: 1px solid rgba(8, 61, 130, 0.10);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
}

.choice-card {
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
}

@media (max-width: 1100px) {
  .features,
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body { padding-top: 76px; }
  .topbar { min-height: 76px; }
  .brand img { width: 170px; }

  .promo-banner-track,
  .promo-banner-link { min-height: 175px; }
  .promo-banner-link img { height: 175px; }

  .hero { padding-top: 2rem; }
  .hero h1,
  .detail-hero h1 {
    font-size: clamp(2.35rem, 13vw, 3.5rem);
    letter-spacing: -0.07em;
  }

  .features,
  .products-grid,
  .payment-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .catalog-section {
    width: calc(100% + 1rem);
    margin-left: -0.5rem;
    padding: 1.25rem 0.75rem 1.6rem;
    border-radius: 26px;
  }

  .catalog-section .section-heading h2 { font-size: 3rem; }
  .catalog-tools { grid-template-columns: 1fr; }
  .category-btn { min-height: 48px; padding: 0 16px; font-size: 14px; }
  .product-image { min-height: 210px; }
  .floating-cart-button { min-width: 150px; right: 1rem; bottom: 1rem; }
}

@media (max-width: 420px) {
  main { width: min(var(--max-width), calc(100% - 1rem)); }
  .promo-banner-track,
  .promo-banner-link { min-height: 155px; }
  .promo-banner-link img { height: 155px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
}


/* =========================================================
   FASE 2.1 - HOME Y CATÁLOGO ESTILO MOCKUP IA
   Mejora visual sin cambiar la lógica del carrito/admin.
========================================================= */

:root {
  --max-width: 1380px;
  --header-height: 86px;
  --panel-glow: 0 26px 70px rgba(15, 35, 75, 0.08);
}

body {
  padding-top: var(--header-height);
}

.topbar {
  min-height: var(--header-height);
  padding: 0.8rem clamp(1.25rem, 4vw, 5rem);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}

.brand img {
  width: clamp(190px, 14vw, 260px);
  max-width: 58vw;
}

.nav,
.desktop-nav {
  gap: clamp(0.45rem, 1vw, 0.9rem);
}

.nav a,
.desktop-nav a {
  padding: 0.78rem 0.9rem;
  font-size: 0.96rem;
  font-weight: 900;
}

.nav .nav-cta,
.desktop-nav .nav-cta {
  padding-inline: 1.2rem;
}

/* Banner automático más panorámico */
.promo-banner-slider {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #0b3f96;
  box-shadow: 0 14px 40px rgba(15, 35, 75, 0.10);
}

.promo-banner-track,
.promo-banner-link {
  min-height: clamp(220px, 18.75vw, 360px);
}

.promo-banner-link {
  position: relative;
}

.promo-banner-link img {
  width: 100%;
  height: clamp(220px, 18.75vw, 360px);
  object-fit: cover;
  object-position: center;
}

.promo-banner-link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46px;
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.10));
  pointer-events: none;
}

.promo-banner-dots {
  bottom: 16px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

/* Intro: texto + beneficios como el mockup */
.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: clamp(1.6rem, 4vw, 4.5rem);
  align-items: center;
  padding: clamp(3rem, 5.5vw, 5.4rem) 0 clamp(2rem, 4vw, 3rem);
}

.home-intro .hero {
  padding: 0;
}

.home-intro .hero h1 {
  max-width: 760px;
  font-size: clamp(3rem, 5.2vw, 5.2rem);
  letter-spacing: -0.065em;
}

.home-intro .hero-text {
  max-width: 780px;
  margin-top: 1.25rem;
}

.home-intro .hero-actions {
  margin-top: 1.7rem;
}

.home-intro .features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: stretch;
  gap: 1rem;
  margin: 0;
}

.home-intro .features article {
  min-height: 178px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: rgba(40, 93, 168, 0.12);
  box-shadow: 0 20px 48px rgba(15, 35, 75, 0.08);
}

.home-intro .features span {
  width: 52px;
  height: 52px;
  color: var(--brand);
  background: linear-gradient(145deg, #ffffff, #eaf2ff);
  box-shadow: inset 0 -8px 18px rgba(40, 93, 168, 0.08);
}

/* Ocultamos las secciones duplicadas de temporada/promos en home
   porque ahora el foco superior es el banner automático. */
main#inicio > .highlight-section {
  display: none;
}

/* Catálogo tipo panel premium */
.catalog-section {
  max-width: 1460px;
  margin: clamp(1.8rem, 3vw, 3rem) auto 4rem;
  padding: clamp(1.1rem, 2.2vw, 1.8rem);
  background:
    radial-gradient(circle at top left, rgba(40, 93, 168, 0.055), transparent 34rem),
    rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(40, 93, 168, 0.10);
  border-radius: 34px;
  box-shadow: var(--panel-glow);
}

.catalog-section .section-heading {
  display: grid;
  justify-content: center;
  justify-items: center;
  text-align: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.catalog-section .section-heading > div {
  display: grid;
  justify-items: center;
}

.catalog-section .section-heading h2 {
  font-size: clamp(2.8rem, 4.6vw, 4.8rem);
  line-height: 0.95;
}

.catalog-section .section-heading > p {
  max-width: none;
  width: fit-content;
  margin: 0;
  padding: 0.42rem 0.8rem;
  color: var(--brand);
  background: rgba(40, 93, 168, 0.08);
  border: 1px solid rgba(40, 93, 168, 0.12);
  border-radius: 999px;
  font-weight: 900;
}

/* Caja de búsqueda y orden */
.catalog-tools {
  max-width: 1040px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: end;
  margin: 0 auto 1rem;
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.10);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(15, 35, 75, 0.06);
}

.search-box span,
.select-box span {
  padding-left: 0.45rem;
}

.search-box input,
.select-box select {
  min-height: 50px;
  box-shadow: none;
  border-radius: 17px;
}

.rubros-header {
  display: none;
}

.category-scroll {
  width: 100%;
  margin: 0 auto 1.25rem;
  padding: 0.5rem 0.25rem 0.8rem;
  display: flex;
  justify-content: flex-start;
  gap: 0.8rem;
  overflow-x: auto;
  scroll-padding-left: 0.25rem;
}

.category-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0 1.15rem;
  color: #0f3f82;
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.13);
  border-radius: 999px;
  font-size: 0.96rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(15, 35, 75, 0.055);
}

.category-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #eef4fb;
  border-radius: 999px;
  font-size: 0.92rem;
}

.category-btn.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 16px 32px rgba(40, 93, 168, 0.22);
}

.category-btn.active .category-icon {
  background: rgba(255, 255, 255, 0.18);
}

/* Grilla y cards de producto */
.products-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.product-card {
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(15, 35, 75, 0.075);
}

.product-image {
  min-height: 190px;
  background: #ffffff;
  border-bottom: 1px solid rgba(40, 93, 168, 0.08);
}

.product-image img {
  width: 86%;
  height: 165px;
}

.stock-floating {
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.72rem;
}

.product-body {
  padding: 0.95rem;
}

.product-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.product-code-row .badge {
  display: none;
}

.product-card h3 {
  font-size: 1rem;
  line-height: 1.18;
}

.product-card p {
  display: none;
}

.modern-bottom {
  align-items: end;
  margin-top: 0.8rem;
}

.sin-precio {
  color: var(--brand);
  font-size: 1rem;
}

.btn-add-round {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(40, 93, 168, 0.22);
  border-radius: 999px;
  color: var(--brand);
  background: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(40, 93, 168, 0.14);
  cursor: pointer;
  transition: 0.18s ease;
}

.btn-add-round:hover {
  color: #ffffff;
  background: var(--brand);
  transform: translateY(-2px);
}

/* Footer/otros bloques */
.payment-section,
.faq-section,
.how {
  max-width: 1460px;
  margin-inline: auto;
}

/* Responsive */
@media (max-width: 1180px) {
  .home-intro {
    grid-template-columns: 1fr;
  }

  .home-intro .features {
    grid-template-columns: repeat(3, 1fr);
  }

  .catalog-tools {
    grid-template-columns: 1fr 260px;
  }
}

@media (max-width: 900px) {
  body {
    padding-top: 76px;
  }

  .topbar {
    min-height: 76px;
  }

  .promo-banner-track,
  .promo-banner-link {
    min-height: clamp(160px, 35vw, 260px);
  }

  .promo-banner-link img {
    height: clamp(160px, 35vw, 260px);
  }

  .home-intro {
    padding-top: 2rem;
    gap: 1.25rem;
  }

  .home-intro .hero h1 {
    font-size: clamp(2.25rem, 9vw, 3.6rem);
  }

  .home-intro .features {
    grid-template-columns: 1fr;
  }

  .home-intro .features article {
    min-height: auto;
  }

  .catalog-section {
    padding: 1rem;
    border-radius: 26px;
  }

  .catalog-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  main {
    width: min(100% - 1rem, var(--max-width));
  }

  .brand img {
    width: 170px;
  }

  .promo-banner-track,
  .promo-banner-link {
    min-height: 150px;
  }

  .promo-banner-link img {
    height: 150px;
  }

  .promo-banner-dots {
    bottom: 8px;
  }

  .home-intro .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .catalog-section {
    margin-top: 1.25rem;
    padding: 0.8rem;
    border-radius: 22px;
  }

  .catalog-section .section-heading h2 {
    font-size: clamp(2.35rem, 14vw, 3.2rem);
  }

  .category-scroll {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-inline: 0.25rem;
  }

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

  .product-card {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
  }

  .product-image {
    min-height: 100%;
    border-right: 1px solid rgba(40, 93, 168, 0.08);
    border-bottom: 0;
  }

  .product-image img {
    height: 116px;
    width: 95%;
  }

  .stock-floating {
    display: none;
  }
}


/* =========================================================
   FASE 2.2 - PROMOCIONES Y TEMPORADA ESTILO IA
========================================================= */

.special-page {
  width: min(1460px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 4rem) 0 4rem;
}

.special-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.special-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  color: var(--text);
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.062em;
}

.special-hero-copy p:not(.eyebrow) {
  max-width: 740px;
  margin: 1.15rem 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.special-hero-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.special-hero-benefits article,
.season-benefit-card,
.season-categories article,
.trust-strip article {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(40, 93, 168, 0.11);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(15, 35, 75, 0.07);
}

.special-hero-benefits span,
.season-benefit-card span,
.season-categories span,
.trust-strip span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.85rem;
  color: var(--brand);
  background: linear-gradient(145deg, #ffffff, #eaf2ff);
  border-radius: 18px;
  font-size: 1.35rem;
  box-shadow: inset 0 -8px 18px rgba(40, 93, 168, 0.08);
}

.special-hero-benefits strong,
.season-benefit-card strong,
.season-categories strong,
.trust-strip strong {
  display: block;
  color: var(--text);
  font-size: 1.04rem;
  line-height: 1.2;
}

.special-hero-benefits p,
.season-benefit-card p,
.season-categories p,
.trust-strip p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.season-benefit-card {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.season-benefit-card small {
  display: block;
  margin-top: 1rem;
  color: var(--brand);
  font-weight: 900;
}

.bank-promos-section,
.detail-products-section,
.season-categories,
.trust-strip {
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
}

.special-heading {
  align-items: end;
  margin-bottom: 1rem;
}

.special-heading h2 {
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  line-height: 1;
}

.special-heading > p {
  max-width: 420px;
}

.bank-promos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.bank-promo-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.12);
  border-radius: 24px;
  box-shadow: 0 22px 52px rgba(15, 35, 75, 0.09);
}

.bank-promo-card a {
  display: block;
  background: #eef4fb;
}

.bank-promo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 5.2;
  object-fit: cover;
  object-position: center;
}

.bank-promo-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.05rem;
}

.bank-promo-info strong {
  color: var(--text);
  line-height: 1.2;
}

.bank-promo-info span {
  flex: 0 0 auto;
  padding: 0.35rem 0.6rem;
  color: var(--brand);
  background: rgba(40, 93, 168, 0.08);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.season-categories,
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.trust-strip {
  grid-template-columns: repeat(4, 1fr);
  padding: 1rem;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(40, 93, 168, 0.08);
  border-radius: 30px;
  box-shadow: 0 18px 44px rgba(15, 35, 75, 0.06);
}

.trust-strip article {
  box-shadow: none;
  background: transparent;
  border-color: transparent;
}

.detail-products-section {
  padding: clamp(1rem, 2vw, 1.4rem);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(40, 93, 168, 0.10);
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(15, 35, 75, 0.075);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.detail-product-card {
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(15, 35, 75, 0.075);
}

.detail-product-image {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 1rem;
  background: linear-gradient(145deg, #ffffff, #eef4fb);
  border-bottom: 1px solid rgba(40, 93, 168, 0.08);
}

.detail-product-image img {
  width: 100%;
  max-width: 210px;
  height: 180px;
  object-fit: contain;
}

.detail-label {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  padding: 0.36rem 0.6rem;
  color: var(--brand);
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.14);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 35, 75, 0.08);
}

.detail-product-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 210px;
  padding: 1.05rem;
}

.detail-product-body h3 {
  margin: 0;
  color: var(--text);
  line-height: 1.18;
}

.detail-product-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.detail-product-body .stock-ok,
.detail-product-body .stock-off {
  font-weight: 900;
}

.detail-product-body .btn {
  margin-top: auto;
}

.skeleton-card,
.empty-bank-card {
  padding: 1.2rem;
}

@media (max-width: 1100px) {
  .special-hero {
    grid-template-columns: 1fr;
  }

  .special-hero-benefits,
  .bank-promos-grid,
  .season-categories,
  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .special-page {
    width: min(100% - 1rem, 1460px);
    padding-top: 1.4rem;
  }

  .special-hero-copy h1 {
    font-size: clamp(2.2rem, 12vw, 3.4rem);
  }

  .special-hero-benefits,
  .bank-promos-grid,
  .season-categories,
  .trust-strip {
    grid-template-columns: 1fr;
  }

  .special-heading {
    display: grid;
    gap: 0.6rem;
  }

  .special-heading > p {
    max-width: 100%;
  }

  .detail-products-section {
    padding: 0.8rem;
    border-radius: 24px;
  }

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

  .detail-product-card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .detail-product-image {
    min-height: 100%;
    border-right: 1px solid rgba(40, 93, 168, 0.08);
    border-bottom: none;
  }

  .detail-product-image img {
    max-width: 112px;
    height: 118px;
  }

  .detail-label {
    display: none;
  }

  .detail-product-body {
    min-height: auto;
  }
}


/* =========================================================
   FASE 2.3 - HOME MÁS FIEL AL MOCKUP IA
   Ajusta la página principal para que entre mejor en pantalla.
========================================================= */

@media (min-width: 901px) {
  body {
    padding-top: 78px;
  }

  .topbar {
    min-height: 78px;
    padding: 0.55rem clamp(1.25rem, 4vw, 5rem);
  }

  .brand img {
    width: clamp(185px, 13vw, 245px);
  }

  .nav a,
  .desktop-nav a {
    padding: 0.62rem 0.76rem;
    font-size: 0.9rem;
  }

  .nav .nav-cta,
  .desktop-nav .nav-cta {
    min-height: 44px;
    padding-inline: 1.1rem;
  }

  .promo-banner-track,
  .promo-banner-link {
    min-height: clamp(230px, 17.5vw, 318px) !important;
  }

  .promo-banner-link img {
    height: clamp(230px, 17.5vw, 318px) !important;
    object-fit: cover;
    object-position: center center;
  }

  .promo-banner-dots {
    bottom: 12px;
    padding: 7px 11px;
  }

  main#inicio {
    width: min(1440px, calc(100% - 3rem));
  }

  .home-intro {
    grid-template-columns: minmax(0, 0.98fr) minmax(520px, 0.92fr);
    gap: clamp(1.6rem, 3.2vw, 3.4rem);
    align-items: center;
    padding: clamp(2rem, 3.6vw, 3.4rem) 0 clamp(1.35rem, 2.2vw, 2rem);
  }

  .home-intro .hero h1 {
    max-width: 720px;
    font-size: clamp(3rem, 4.2vw, 4.45rem);
    line-height: 0.97;
  }

  .home-intro .hero-text {
    max-width: 760px;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.55;
  }

  .home-intro .hero-actions {
    margin-top: 1.35rem;
  }

  .home-intro .features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .home-intro .features article {
    min-height: 155px;
    padding: 1.1rem;
    border-radius: 22px;
  }

  .home-intro .features span {
    width: 46px;
    height: 46px;
    margin-bottom: 0.85rem;
  }

  .home-intro .features h3 {
    margin-bottom: 0.45rem;
    font-size: 1rem;
  }

  .home-intro .features p {
    font-size: 0.88rem;
    line-height: 1.42;
  }

  .catalog-section {
    margin-top: 1rem;
    padding: clamp(0.9rem, 1.8vw, 1.4rem);
    border-radius: 32px;
  }

  .catalog-section .section-heading {
    margin-bottom: 0.85rem;
  }

  .catalog-section .section-heading h2 {
    font-size: clamp(2.45rem, 3.6vw, 4rem);
  }

  .catalog-tools {
    max-width: 1060px;
    margin-bottom: 0.65rem;
    padding: 0.55rem;
  }

  .search-box input,
  .select-box select {
    min-height: 46px;
  }

  .category-scroll {
    margin-bottom: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.55rem;
  }

  .category-btn {
    min-height: 46px;
    padding: 0 1rem;
    font-size: 0.9rem;
  }

  .category-icon {
    width: 26px;
    height: 26px;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 0.85rem;
  }

  .product-card {
    border-radius: 18px;
  }

  .product-image {
    min-height: 170px;
  }

  .product-image img {
    height: 145px;
    width: 84%;
  }

  .product-body {
    padding: 0.82rem;
  }

  .product-card h3 {
    font-size: 0.94rem;
  }

  .modern-bottom {
    margin-top: 0.65rem;
  }

  .btn-add-round {
    width: 38px;
    height: 38px;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .home-intro {
    grid-template-columns: 1fr;
  }

  .home-intro .features {
    max-width: 760px;
  }
}

@media (max-width: 900px) {
  .promo-banner-track,
  .promo-banner-link {
    min-height: clamp(145px, 35vw, 230px) !important;
  }

  .promo-banner-link img {
    height: clamp(145px, 35vw, 230px) !important;
  }

  .home-intro {
    padding-top: 1.6rem;
  }
}


/* =========================================================
   FASE 2.4 - CONSULTA / PRESUPUESTO ESTILO IA
========================================================= */

.checkout-body {
  background:
    radial-gradient(circle at 18% 4%, rgba(40, 93, 168, 0.10), transparent 34rem),
    radial-gradient(circle at 82% 8%, rgba(120, 163, 220, 0.12), transparent 32rem),
    #f6f9fd;
}

main.checkout-page-v2 {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(2rem, 4vw, 3.4rem) 0 4rem;
  background: transparent;
  min-height: 100vh;
  overflow-x: hidden;
}

.checkout-hero-v2,
.checkout-layout-v2,
.checkout-trust-strip {
  width: min(1460px, calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
}

.checkout-hero-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.58fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}

.checkout-hero-copy h1 {
  max-width: 860px;
  margin: 0;
  color: var(--text);
  font-size: clamp(2.55rem, 5.1vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.checkout-hero-copy p:not(.eyebrow) {
  max-width: 820px;
  margin: 1.15rem 0 0;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.6;
}

.checkout-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.55rem;
}

.checkout-progress-card {
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(40, 93, 168, 0.10);
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(15, 35, 75, 0.09);
}

.progress-card-header {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(40, 93, 168, 0.09);
}

.progress-card-header > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  background: linear-gradient(145deg, #ffffff, #eaf2ff);
  border-radius: 18px;
  font-size: 1.5rem;
  box-shadow: inset 0 -8px 20px rgba(40, 93, 168, 0.08);
}

.progress-card-header strong {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
}

.progress-card-header p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.checkout-steps {
  display: grid;
  gap: 0.75rem;
}

.checkout-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 0.75rem;
  align-items: center;
  padding: 0.8rem;
  background: #f8fbff;
  border: 1px solid rgba(40, 93, 168, 0.08);
  border-radius: 18px;
}

.checkout-step span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--brand);
  background: #eaf2ff;
  border-radius: 14px;
  font-weight: 900;
}

.checkout-step strong {
  color: var(--text);
  line-height: 1.15;
}

.checkout-step small {
  color: var(--muted);
}

.checkout-step.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: transparent;
  box-shadow: 0 14px 28px rgba(40, 93, 168, 0.18);
}

.checkout-step.active span {
  color: var(--brand);
  background: #ffffff;
}

.checkout-step.active strong,
.checkout-step.active small {
  color: #ffffff;
}

.checkout-step.done span {
  color: #ffffff;
  background: #16a34a;
}

.checkout-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.checkout-mini-stats div {
  padding: 0.9rem;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.09);
  border-radius: 18px;
}

.checkout-mini-stats span {
  display: block;
  color: var(--brand);
  font-size: 1.45rem;
  font-weight: 950;
}

.checkout-mini-stats small {
  color: var(--muted);
  font-weight: 800;
}

.checkout-layout-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 1.2rem;
  align-items: start;
}

.checkout-layout-v2 .checkout-card {
  padding: clamp(1rem, 2vw, 1.45rem);
  border-color: rgba(40, 93, 168, 0.10);
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(15, 35, 75, 0.08);
}

.selected-products-card {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}

.checkout-title {
  align-items: start;
}

.mini-eyebrow {
  margin-bottom: 0.45rem;
  padding: 0.35rem 0.62rem;
  font-size: 0.65rem;
}

.checkout-products-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  color: var(--brand);
  background: rgba(40, 93, 168, 0.07);
  border: 1px solid rgba(40, 93, 168, 0.10);
  border-radius: 18px;
  font-weight: 900;
}

.checkout-products-summary small {
  color: var(--muted);
  font-weight: 800;
}

.consulta-items-v2 {
  max-height: min(62vh, 720px);
  overflow: auto;
  padding-right: 0.25rem;
}

.consulta-item-v2 {
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  gap: 0.85rem;
  padding: 0.95rem;
  background: #ffffff;
  border-color: rgba(40, 93, 168, 0.10);
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(15, 35, 75, 0.045);
}

.consulta-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius: 18px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(40, 93, 168, 0.20);
}

.consulta-item-v2 .consulta-info strong {
  font-size: 1rem;
}

.consulta-item-v2 .consulta-info p {
  font-size: 0.82rem;
}

.choice-panel-v2 h2,
.checkout-mode h2 {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  letter-spacing: -0.04em;
}

.choice-grid-v2 {
  gap: 1rem;
}

.choice-grid-v2 .choice-card {
  position: relative;
  overflow: hidden;
  padding: 1.15rem;
  background: #ffffff;
  border-color: rgba(40, 93, 168, 0.11);
  box-shadow: 0 14px 34px rgba(15, 35, 75, 0.065);
}

.choice-grid-v2 .choice-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% 45%;
  height: 110px;
  background: radial-gradient(circle, rgba(40, 93, 168, 0.10), transparent 65%);
  pointer-events: none;
}

.choice-grid-v2 .featured-choice {
  border-color: rgba(40, 93, 168, 0.20);
  background:
    radial-gradient(circle at top right, rgba(40, 93, 168, 0.09), transparent 18rem),
    #ffffff;
}

.choice-icon {
  background: linear-gradient(145deg, #ffffff, #eaf2ff);
  box-shadow: inset 0 -8px 20px rgba(40, 93, 168, 0.08);
}

.checkout-form-v2 {
  gap: 1rem;
}

.checkout-form-v2 label {
  color: var(--text);
}

.checkout-form-v2 input,
.checkout-form-v2 select {
  min-height: 52px;
  background: #f8fbff;
  border-color: rgba(40, 93, 168, 0.13);
  border-radius: 18px;
}

.form-two-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

.presupuesto-actions {
  margin-top: 1.1rem;
}

.checkout-help {
  padding: 0.85rem 1rem;
  color: #4b5873;
  background: #f8fbff;
  border: 1px solid rgba(40, 93, 168, 0.10);
  border-radius: 18px;
}

.consulta-empty-v2 {
  padding: 2rem 1rem;
}

.consulta-empty-v2 > span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  background: #eaf2ff;
  border-radius: 22px;
  font-size: 1.8rem;
}

.checkout-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.2rem;
}

.checkout-trust-strip article {
  padding: 1.1rem;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(40, 93, 168, 0.09);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(15, 35, 75, 0.055);
}

.checkout-trust-strip span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.75rem;
  background: #eaf2ff;
  border-radius: 16px;
}

.checkout-trust-strip strong {
  color: var(--text);
}

.checkout-trust-strip p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .checkout-hero-v2,
  .checkout-layout-v2 {
    grid-template-columns: 1fr;
  }

  .selected-products-card {
    position: static;
  }

  .consulta-items-v2 {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .checkout-hero-v2,
  .checkout-layout-v2,
  .checkout-trust-strip {
    width: min(100% - 1rem, 1460px);
  }

  .checkout-hero-v2 {
    padding-top: 0.6rem;
  }

  .checkout-hero-copy h1 {
    font-size: clamp(2.1rem, 11vw, 3.35rem);
  }

  .checkout-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .checkout-progress-card,
  .checkout-layout-v2 .checkout-card {
    border-radius: 24px;
  }

  .checkout-mini-stats,
  .form-two-cols,
  .checkout-trust-strip {
    grid-template-columns: 1fr;
  }

  .checkout-products-summary {
    display: grid;
    gap: 0.25rem;
  }

  .consulta-item-v2 {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .consulta-avatar {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }

  .consulta-item-v2 .consulta-qty {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
  }

  .consulta-item-v2 .consulta-remove {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* =========================================================
   FIX - CARDS DEL CATÁLOGO ALINEADAS
   Alinea código, nombre, precio y botón + en todas las cards.
========================================================= */

.products-grid {
  align-items: stretch;
}

.product-card {
  height: 100%;
}

.product-image {
  min-height: 190px;
  height: 190px;
}

.product-image img {
  height: 165px;
  max-height: 165px;
}

.product-body {
  display: flex;
  flex-direction: column;
  min-height: 205px;
}

.product-code-row {
  min-height: 24px;
  margin-bottom: 0.45rem;
}

.product-card h3 {
  min-height: 2.45em;
  margin-bottom: 0.45rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-bottom.modern-bottom,
.modern-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem;
  margin-top: auto;
  min-height: 58px;
}

.product-bottom.modern-bottom > div,
.modern-bottom > div {
  display: grid;
  align-content: end;
  min-height: 58px;
}

.product-bottom.modern-bottom .code,
.modern-bottom .code {
  display: block;
  min-height: 1.25em;
  line-height: 1.25;
}

.sin-precio {
  min-height: 2.1em;
  display: flex;
  align-items: flex-end;
  line-height: 1.05;
}

.btn-add-round {
  flex: 0 0 auto;
  align-self: flex-end;
}

/* En celular mantiene la card horizontal, pero también alineada */
@media (max-width: 640px) {
  .product-card {
    height: auto;
  }

  .product-image {
    height: auto;
    min-height: 100%;
  }

  .product-body {
    min-height: 150px;
  }

  .product-card h3 {
    min-height: auto;
  }

  .product-bottom.modern-bottom,
  .modern-bottom {
    min-height: 48px;
  }

  .sin-precio {
    min-height: auto;
  }
}


/* =========================================================
   FASE 2.5 - CATÁLOGO CON CARDS MÁS GRANDES + PAGINACIÓN
   Muestra menos productos por pantalla y navega con << < 1 2 3 > >>
========================================================= */

.products-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.15rem;
}

.product-card {
  min-height: 420px;
}

.product-image {
  min-height: 215px;
  height: 215px;
}

.product-image img {
  height: 188px;
  max-height: 188px;
}

.product-body {
  min-height: 215px;
  padding: 1.08rem;
}

.product-card h3 {
  min-height: 2.65em;
  font-size: 1.05rem;
}

.product-bottom.modern-bottom,
.modern-bottom {
  min-height: 64px;
}

.product-bottom.modern-bottom > div,
.modern-bottom > div {
  min-height: 64px;
}

.sin-precio {
  font-size: 1.08rem;
}

.btn-add-round {
  width: 46px;
  height: 46px;
  font-size: 1.45rem;
}

.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.6rem auto 0;
  padding: 0.85rem;
  width: fit-content;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(40, 93, 168, 0.11);
  border-radius: 999px;
  box-shadow: 0 16px 38px rgba(15, 35, 75, 0.07);
}

.catalog-pagination[hidden] {
  display: none !important;
}

.pagination-pages {
  display: flex;
  gap: 0.45rem;
}

.pagination-btn {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.75rem;
  color: var(--brand);
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.16);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 35, 75, 0.055);
  transition: 0.18s ease;
}

.pagination-btn:hover:not(:disabled),
.pagination-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(40, 93, 168, 0.18);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.pagination-edge {
  min-width: 48px;
}

@media (min-width: 1300px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  }
}

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

  .product-card {
    min-height: auto;
  }

  .product-image {
    height: auto;
    min-height: 100%;
  }

  .product-body {
    min-height: 150px;
  }

  .catalog-pagination {
    width: 100%;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.65rem;
    border-radius: 24px;
  }

  .pagination-pages {
    gap: 0.3rem;
  }

  .pagination-btn {
    min-width: 36px;
    height: 38px;
    padding: 0 0.6rem;
    font-size: 0.88rem;
  }

  .pagination-edge {
    min-width: 40px;
  }
}


/* =========================================================
   FASE 2.6 - VARIANTES DE PRODUCTO
   Agrupa productos repetidos: medidas, colores y opciones.
========================================================= */

.product-card-family {
  position: relative;
}

.product-card-family::before {
  content: "Opciones";
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 4;
  padding: 0.32rem 0.55rem;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(40, 93, 168, 0.14);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(15, 35, 75, 0.08);
}

.variant-select-wrap {
  display: grid;
  gap: 0.4rem;
  margin: 0.15rem 0 0.75rem;
}

.variant-select-wrap span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.variant-select {
  width: 100%;
  min-height: 42px;
  padding: 0 0.8rem;
  color: var(--text);
  background:
    linear-gradient(145deg, #ffffff, #f8fbff);
  border: 1px solid rgba(40, 93, 168, 0.16);
  border-radius: 14px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  outline: none;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 35, 75, 0.04);
}

.variant-select:focus {
  border-color: rgba(40, 93, 168, 0.55);
  box-shadow: 0 0 0 4px rgba(40, 93, 168, 0.10);
}

.product-card-family .product-body {
  gap: 0.2rem;
}

.product-card-family .product-bottom.modern-bottom,
.product-card-family .modern-bottom {
  min-height: 58px;
}

@media (max-width: 640px) {
  .product-card-family::before {
    display: none;
  }

  .variant-select-wrap {
    margin-bottom: 0.55rem;
  }

  .variant-select {
    min-height: 40px;
  }
}


/* =========================================================
   FIX VISUAL - VARIANTES COMO BOTONES
   Reemplaza visualmente el select nativo por chips modernos.
========================================================= */

.variant-select-wrap,
.variant-select {
  display: none !important;
}

.variant-selector-card {
  display: grid;
  gap: 0.7rem;
  margin: 0.25rem 0 0.9rem;
  padding: 0.78rem;
  background:
    radial-gradient(circle at top right, rgba(40, 93, 168, 0.08), transparent 9rem),
    #f8fbff;
  border: 1px solid rgba(40, 93, 168, 0.12);
  border-radius: 18px;
}

.variant-selector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.variant-selector-head span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.variant-selector-head strong {
  padding: 0.28rem 0.58rem;
  color: var(--brand);
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.12);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: 0 6px 16px rgba(15, 35, 75, 0.05);
}

.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.variant-option {
  min-height: 36px;
  padding: 0 0.82rem;
  color: #17437c;
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.16);
  border-radius: 999px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 35, 75, 0.045);
  transition: 0.18s ease;
}

.variant-option:hover {
  color: var(--brand);
  border-color: rgba(40, 93, 168, 0.35);
  transform: translateY(-1px);
}

.variant-option.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(40, 93, 168, 0.18);
}

.product-card-family .product-body {
  gap: 0.35rem;
}

.product-card-family .product-bottom.modern-bottom,
.product-card-family .modern-bottom {
  min-height: 56px;
}

@media (max-width: 640px) {
  .variant-selector-card {
    padding: 0.65rem;
    border-radius: 16px;
  }

  .variant-option {
    min-height: 34px;
    padding: 0 0.72rem;
    font-size: 0.82rem;
  }
}


/* =========================================================
   INTEGRACION MOCKUPS HOME CONSULTA PROMOCIONES
   CSS provisto por los tres zips de mockup.
========================================================= */

:root{
  --bg:#f3f7fb; --bg2:#edf4fb; --panel:#fff; --text:#071b44; --muted:#60708f; --brand:#075bd8; --brand2:#003f9d; --line:rgba(8,31,70,.12); --soft:#eef5ff; --danger:#ef4444; --success:#08a65a; --whatsapp:#10b96b; --shadow:0 22px 55px rgba(8,31,70,.10); --shadow2:0 10px 26px rgba(8,31,70,.08); --radius:20px; --max:1380px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;color:var(--text);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 10% 0,rgba(7,91,216,.12),transparent 36rem),linear-gradient(180deg,#fff 0,#f3f8ff 45%,#edf4fb 100%);padding-top:79px;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.topbar{position:fixed;top:0;left:0;width:100%;min-height:79px;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 7.5vw;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:0 8px 28px rgba(8,31,70,.06);backdrop-filter:blur(14px)}.brand img{display:block;width:220px;max-width:50vw}.nav{display:flex;align-items:center;gap:1.05rem}.nav a{position:relative;padding:.9rem .35rem;color:var(--text);font-weight:800;font-size:.92rem}.nav a.active,.nav a:hover{color:var(--brand)}.nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:3px;background:var(--brand);border-radius:999px}.nav-cta{display:inline-flex!important;align-items:center;gap:.4rem;padding:.72rem 1.2rem!important;border-radius:999px!important;color:#fff!important;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 12px 24px rgba(7,91,216,.24)}.nav-cta:after{display:none}.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow2)}.menu-toggle span{display:block;width:22px;height:2px;margin:5px auto;background:var(--brand);border-radius:999px}.mobile-menu-panel{position:fixed;right:-430px;top:0;width:min(390px,90vw);height:100dvh;z-index:1300;background:#fff;box-shadow:-20px 0 55px rgba(8,31,70,.25);transition:.25s;border-radius:24px 0 0 24px}.mobile-menu-panel.active{right:0}.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--line)}.mobile-menu-header img{width:170px}.mobile-menu-header button{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:#fff;font-size:2rem;color:var(--brand)}.mobile-menu-links{display:grid;gap:.7rem;padding:1rem}.mobile-menu-links a{padding:1rem;border:1px solid var(--line);border-radius:16px;text-align:center;font-weight:900}.mobile-menu-cta{background:var(--brand)!important;color:#fff!important}.nav-overlay{position:fixed;inset:0;background:rgba(8,31,70,.42);z-index:1200;opacity:0;pointer-events:none;transition:.2s}.nav-overlay.active{opacity:1;pointer-events:auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:46px;padding:.82rem 1.18rem;border:1px solid transparent;border-radius:999px;font-weight:900;transition:.18s;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn.primary{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 13px 28px rgba(7,91,216,.24)}.btn.secondary{color:var(--brand);background:#fff;border-color:rgba(7,91,216,.22);box-shadow:var(--shadow2)}.btn.whatsapp{color:#fff;background:linear-gradient(135deg,#12b76a,#079455);box-shadow:0 16px 30px rgba(16,185,107,.25)}.btn.full{width:100%}.eyebrow{display:inline-flex;width:max-content;align-items:center;margin:0 0 .8rem;padding:.42rem .75rem;color:var(--brand);background:rgba(7,91,216,.08);border:1px solid rgba(7,91,216,.13);border-radius:999px;font-size:.75rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.promo-banner-slider{position:relative;width:100%;height:260px;overflow:hidden;background:#003f9d}.promo-banner-track{position:relative;width:100%;height:100%}.promo-banner-slide{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}.promo-banner-slide.active{opacity:1}.promo-banner-slide img{width:100%;height:100%;object-fit:cover;display:block}.banner-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border:0;border-radius:999px;background:rgba(4,18,48,.62);color:#fff;font-size:2rem;display:grid;place-items:center}.banner-prev{left:26px}.banner-next{right:26px}.promo-banner-dots{position:absolute;bottom:18px;left:0;right:0;z-index:4;display:flex;justify-content:center;gap:.75rem}.promo-banner-dot{width:13px;height:13px;border:0;border-radius:999px;background:rgba(255,255,255,.45)}.promo-banner-dot.active{background:#fff}.home-main,.special-page,.checkout-mockup-page{width:min(var(--max),calc(100% - 2rem));margin:0 auto}.home-intro{padding:2.2rem 0 1.2rem}.hero-modern{display:grid;grid-template-columns:1.15fr 1fr;gap:4rem;align-items:center}.hero h1,.special-hero-copy h1,.checkout-left h1{margin:0;color:var(--text);font-size:clamp(2.4rem,4.5vw,4.2rem);line-height:.96;letter-spacing:-.07em}.hero-text,.special-hero-copy p,.checkout-lead{max-width:700px;color:#405174;font-size:1.07rem;line-height:1.55}.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.3rem}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.features article{min-height:190px;padding:1.55rem;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow2)}.features span,.promo-benefits span,.title-icon,.form-title span{display:grid;place-items:center;width:54px;height:54px;background:#eaf3ff;border-radius:18px;font-size:1.6rem;color:var(--brand)}.features h3{margin:1.1rem 0 .55rem;font-size:1.05rem}.features p{margin:0;color:var(--muted);line-height:1.45}.catalog-shell{margin-top:2rem;padding:1rem 1.3rem 1.5rem;background:rgba(255,255,255,.78);border:1px solid rgba(8,31,70,.08);border-radius:24px;box-shadow:var(--shadow)}.center-heading{text-align:center}.section-heading h2{margin:0;font-size:clamp(2rem,3.2vw,3.25rem);letter-spacing:-.06em}.section-heading p{margin:.35rem auto 0}.modern-tools{display:grid;grid-template-columns:1fr 380px;gap:.7rem;max-width:900px;margin:1rem auto}.search-box,.select-box{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:15px;padding:.32rem .45rem .32rem .9rem;box-shadow:0 8px 20px rgba(8,31,70,.04)}.search-box span,.select-box span{font-weight:900;font-size:.78rem;color:var(--text);white-space:nowrap}.search-input-wrap{display:flex;align-items:center}.search-input-wrap input,.select-box select{width:100%;height:40px;border:0;outline:0;color:var(--text);background:transparent}.search-input-wrap>span{font-size:1.3rem;color:var(--brand);padding-right:.6rem}.category-scroll{display:flex;gap:.75rem;overflow-x:auto;padding:.6rem 0 .9rem;scrollbar-width:none}.category-scroll::-webkit-scrollbar{display:none}.category-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.7rem 1.2rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);font-weight:900;box-shadow:0 9px 20px rgba(8,31,70,.05)}.category-btn.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:var(--brand);box-shadow:0 13px 25px rgba(7,91,216,.25)}.products-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.85rem}.product-card{position:relative;min-height:235px;background:#fff;border:1px solid rgba(8,31,70,.10);border-radius:18px;box-shadow:var(--shadow2);overflow:hidden;display:flex;flex-direction:column}.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.product-image{position:relative;display:grid;place-items:center;min-height:135px;background:linear-gradient(180deg,#fff,#f8fbff)}.product-image img{width:88%;height:120px;object-fit:contain}.stock-floating{position:absolute;top:.65rem;left:.65rem;z-index:2;padding:.25rem .45rem;border-radius:999px;background:#e9fff3;color:#078b4d;border:1px solid rgba(8,166,90,.18);font-size:.62rem;font-weight:900}.stock-floating.off{background:#fff1f2;color:#e11d48}.product-body{padding:.75rem}.product-code-row,.product-body p,.variant-selector-card{display:none}.product-card h3{margin:0;font-size:.92rem;line-height:1.18;letter-spacing:-.02em}.product-bottom{display:flex;align-items:flex-end;justify-content:space-between;margin-top:.28rem}.product-bottom .code{display:block;color:var(--muted);font-size:.74rem;margin-bottom:.25rem}.price{color:var(--brand);font-size:1.28rem;font-weight:950;letter-spacing:-.04em}.sin-precio{color:var(--brand);font-weight:950}.btn-add-round{width:31px;height:31px;border-radius:999px;border:2px solid rgba(7,91,216,.28);background:#fff;color:var(--brand);font-size:1.35rem;font-weight:900;display:grid;place-items:center;box-shadow:0 6px 15px rgba(7,91,216,.13)}.catalog-pagination{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:1.2rem}.pagination-btn{min-width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--brand);font-weight:900}.pagination-btn.active{background:var(--brand);color:#fff}.info-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.5rem 0;padding:1rem;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow2)}.info-strip article{display:flex;align-items:center;gap:.75rem}.info-strip span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#eaf3ff;color:var(--brand);font-weight:900}.info-strip strong{display:block}.info-strip p{margin:.2rem 0 0;color:var(--muted);font-size:.85rem}.footer{text-align:center;color:var(--muted);padding:2rem}.floating-cart{position:fixed;right:28px;bottom:24px;z-index:900;display:flex;align-items:center;gap:.65rem;padding:.75rem 1rem;border:0;border-radius:999px;background:#fff;color:var(--brand);box-shadow:0 14px 35px rgba(8,31,70,.15);font-weight:900}.floating-cart span{display:grid;place-items:center;width:45px;height:45px;border-radius:999px;background:var(--brand);color:#fff}.floating-cart em{display:grid;place-items:center;min-width:30px;height:30px;padding:0 .45rem;border-radius:999px;background:var(--brand);color:#fff;font-style:normal}.cart-overlay{position:fixed;inset:0;background:rgba(8,31,70,.42);z-index:1100;opacity:0;pointer-events:none;transition:.2s}.cart-overlay.active{opacity:1;pointer-events:auto}.cart-panel{position:fixed;right:-440px;top:0;bottom:0;z-index:1200;width:min(420px,92vw);background:#fff;box-shadow:-20px 0 60px rgba(8,31,70,.22);transition:.25s;display:flex;flex-direction:column}.cart-panel.active{right:0}.cart-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-bottom:1px solid var(--line)}.cart-head h2{margin:.1rem 0 0}.cart-head small{color:var(--muted);font-weight:900}.cart-head button{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:#fff;font-size:1.7rem}.cart-items{flex:1;overflow:auto;padding:1rem}.cart-empty{padding:2rem;text-align:center;color:var(--muted)}.cart-item{padding:1rem;border:1px solid var(--line);border-radius:16px;margin-bottom:.7rem}.cart-item-top{display:flex;justify-content:space-between;gap:1rem}.cart-product-name{font-size:.95rem}.cart-qty-control{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}.cart-qty-control button{width:30px;height:30px;border:0;background:#fff;color:var(--brand);font-weight:900}.cart-qty-input{width:42px;text-align:center;border:0;outline:0}.cart-item-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem}.cart-remove{border:0;background:#fff;color:var(--brand);font-weight:900}.cart-panel-footer{display:grid;gap:.6rem;padding:1rem;border-top:1px solid var(--line)}
/* Promociones */
.special-page{padding:1.6rem 0 0}.promo-hero-row{display:grid;grid-template-columns:1.1fr 1.2fr;gap:3rem;align-items:center;padding:1rem 1.2rem 1.4rem}.promo-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.promo-benefits article{display:flex;align-items:center;gap:.8rem}.promo-benefits strong{display:block}.promo-benefits p{margin:.25rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.35}.bank-promos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:1rem 0 1.6rem}.bank-promo-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow2);border:1px solid var(--line)}.bank-promo-card img{display:block;width:100%;height:175px;object-fit:cover}.bank-promo-info{display:none}.promo-products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem}.detail-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow2);overflow:hidden}.detail-product-card{display:grid;grid-template-columns:40% 1fr;min-height:150px}.detail-product-image{position:relative;display:grid;place-items:center;background:#fff}.detail-product-image img{width:92%;height:135px;object-fit:contain}.detail-label{position:absolute;right:.7rem;top:.7rem;padding:.35rem .75rem;border-radius:8px;background:#064cc1;color:#fff;font-weight:900}.detail-product-body{padding:1rem}.detail-product-body h3{margin:0;font-size:1rem}.detail-product-body p{margin:.25rem 0;color:var(--muted);font-size:.85rem}.promo-price{font-size:1.45rem;color:var(--brand);font-weight:950}.old-price{text-decoration:line-through;color:var(--muted);font-size:.8rem}.detail-product-body .btn{display:none}.promo-add{position:absolute;right:.8rem;bottom:.8rem;width:32px;height:32px;border-radius:999px;background:var(--brand);color:#fff;border:0;font-weight:900}.stock-ok{color:var(--success);font-weight:900}.stock-off{color:var(--danger);font-weight:900}
/* Checkout */
.checkout-body{background:radial-gradient(circle at 0 8%,rgba(7,91,216,.10),transparent 35rem),linear-gradient(180deg,#fff,#f5f9ff 55%,#eef5fb)}.checkout-mockup-page{display:grid;grid-template-columns:1.12fr .92fr;gap:2.2rem;padding:3.1rem 0 2rem}.checkout-left h1{max-width:790px}.checkout-lead{max-width:780px;margin:1rem 0 2.3rem}.checkout-card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.selected-products-card{padding:1.4rem}.card-title-row,.form-title{display:flex;align-items:center;gap:1rem}.card-title-row h2,.form-title h2{margin:0;font-size:1.6rem;letter-spacing:-.04em}.card-title-row em{font-style:normal}.consulta-items-mockup{display:grid;gap:.75rem;margin-top:1.2rem}.consulta-item-v3{display:grid;grid-template-columns:110px 1fr 140px 140px 82px;align-items:center;gap:1rem;padding:.9rem;border:1px solid var(--line);border-radius:14px;background:#fff}.consulta-thumb{width:100px;height:80px;object-fit:contain}.consulta-info strong{display:block;font-size:1rem}.consulta-info p{margin:.3rem 0 0;color:var(--muted);font-size:.88rem}.consulta-meta small{display:block;color:var(--muted);font-weight:800;margin-bottom:.35rem}.consulta-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;width:max-content}.consulta-qty button{width:34px;height:34px;border:0;background:#fff;color:var(--brand);font-weight:900;font-size:1.1rem}.consulta-qty span{display:grid;place-items:center;min-width:38px;height:34px}.consulta-unit-price strong{font-size:1rem}.consulta-remove{border:0;border-radius:12px;background:#f8fbff;color:var(--brand);font-weight:900;padding:.65rem .4rem}.checkout-subtotal-row{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}.checkout-subtotal-row span{display:block;color:var(--muted);font-size:.85rem}.checkout-subtotal-row strong{font-size:1.7rem}.checkout-form-card{padding:1.6rem}.mock-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0 1.7rem}.choice-card{padding:1.1rem;border:1px solid var(--line);border-radius:15px;background:#fff;min-height:142px;cursor:pointer}.choice-card.selected{border-color:var(--brand);box-shadow:0 0 0 3px rgba(7,91,216,.08)}.choice-card>div{display:flex;justify-content:space-between;align-items:center}.choice-card span{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:#eaf3ff}.choice-card i{width:21px;height:21px;border:2px solid #c7d2e5;border-radius:999px}.choice-card.selected i{border:6px solid var(--brand);box-shadow:0 0 0 6px rgba(7,91,216,.12)}.choice-card strong{display:block;margin:1.1rem 0 .55rem;font-size:1rem}.choice-card p{margin:0;color:var(--muted);line-height:1.4}.checkout-form-mock h3{font-size:1rem;margin:0 0 1rem}.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.checkout-form-mock label{display:grid;gap:.5rem;position:relative}.checkout-form-mock label>span{font-size:.85rem;font-weight:900}.checkout-form-mock input,.checkout-form-mock select,.checkout-form-mock textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:.92rem 1rem;outline:0;color:var(--text)}.checkout-form-mock input:focus,.checkout-form-mock select:focus,.checkout-form-mock textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(7,91,216,.09)}.checkout-form-mock .field-error input,.checkout-form-mock .field-error select{border-color:var(--danger)}.error-message{color:#ef2323;font-size:.78rem;font-weight:700}.full-label{margin-top:1rem}.full-label small{position:absolute;right:.8rem;bottom:.7rem;color:var(--muted)}.checkout-actions{display:grid;grid-template-columns:1fr 1.15fr;gap:.8rem;margin-top:1.4rem}.privacy-note{text-align:center;color:var(--muted);font-size:.9rem}.consulta-empty{padding:2rem;text-align:center;color:var(--muted)}.hidden{display:none!important}
@media(max-width:1180px){.topbar{padding:0 1rem}.desktop-nav{display:none}.menu-toggle{display:block}.hero-modern,.promo-hero-row,.checkout-mockup-page{grid-template-columns:1fr}.features,.promo-benefits,.bank-promos-grid{grid-template-columns:1fr 1fr}.products-grid{grid-template-columns:repeat(3,1fr)}.promo-products-grid{grid-template-columns:repeat(2,1fr)}.modern-tools{grid-template-columns:1fr}.consulta-item-v3{grid-template-columns:84px 1fr;align-items:start}.consulta-meta,.consulta-unit-price,.consulta-remove{grid-column:2}.consulta-thumb{width:78px;height:70px}}@media(max-width:720px){body{padding-top:72px}.topbar{min-height:72px}.brand img{width:170px}.promo-banner-slider{height:150px}.banner-arrow{width:36px;height:36px}.home-main,.special-page,.checkout-mockup-page{width:min(100% - 1rem,var(--max))}.home-intro{padding-top:1.4rem}.hero h1,.special-hero-copy h1,.checkout-left h1{font-size:2.45rem}.features,.promo-benefits,.bank-promos-grid,.promo-products-grid,.info-strip,.form-grid-2,.mock-choice-grid,.checkout-actions{grid-template-columns:1fr}.catalog-shell{padding:.8rem}.products-grid{grid-template-columns:repeat(2,1fr);gap:.65rem}.product-image{min-height:115px}.product-image img{height:100px}.product-card h3{font-size:.82rem}.price{font-size:1.05rem}.checkout-mockup-page{padding-top:1.4rem}.selected-products-card,.checkout-form-card{padding:1rem}.checkout-subtotal-row{align-items:flex-start;gap:1rem;flex-direction:column}.floating-cart{right:12px;bottom:12px}.consulta-item-v3{grid-template-columns:72px 1fr;padding:.7rem}.consulta-thumb{width:66px;height:62px}.checkout-left .eyebrow{margin-top:.4rem}}


/* =========================================================
   FIX INTEGRACIÓN - VARIANTES, PRECIOS Y COMPATIBILIDAD
========================================================= */

/* En el CSS del mockup se ocultaban las variantes; acá las mostramos como chips. */
.product-card .variant-selector-card {
  display: grid !important;
  gap: 0.55rem;
  margin: 0.45rem 0 0.55rem;
  padding: 0.55rem;
  background: #f8fbff;
  border: 1px solid rgba(7,91,216,.12);
  border-radius: 14px;
}

.variant-selector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.variant-selector-head span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.variant-selector-head strong {
  color: var(--brand);
  background: #fff;
  border: 1px solid rgba(7,91,216,.12);
  border-radius: 999px;
  padding: .22rem .5rem;
  font-size: .72rem;
  font-weight: 950;
}

.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
}

.variant-option {
  min-height: 30px;
  padding: 0 .65rem;
  color: #17437c;
  background: #fff;
  border: 1px solid rgba(7,91,216,.18);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 950;
  box-shadow: 0 5px 12px rgba(8,31,70,.04);
}

.variant-option.active {
  color: #fff;
  background: linear-gradient(135deg,var(--brand),var(--brand2));
  border-color: transparent;
}

/* La card del mockup era muy compacta; se estira un poco para precios/variantes. */
.products-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (min-width: 1250px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-card {
  min-height: 355px;
}

.product-image {
  min-height: 160px;
}

.product-image img {
  height: 145px;
}

.product-body {
  display: flex;
  flex-direction: column;
  min-height: 190px;
}

.product-card h3 {
  min-height: 2.1em;
  margin-bottom: .35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-bottom.modern-bottom,
.modern-bottom {
  margin-top: auto;
}

.product-card-family::before {
  content: "Opciones";
  position: absolute;
  top: .65rem;
  right: .65rem;
  z-index: 4;
  padding: .25rem .5rem;
  color: var(--brand);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(7,91,216,.14);
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 950;
}

/* Paginación compatible con el app.js actual. */
.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: 1.2rem;
}

.catalog-pagination[hidden] { display: none !important; }

.pagination-pages { display: flex; gap: .35rem; }

.pagination-btn {
  min-width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--brand);
  font-weight: 900;
}

.pagination-btn.active,
.pagination-btn:hover:not(:disabled) {
  color: #fff;
  background: var(--brand);
}

.pagination-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Mejoras para productos de promoción renderizados por app.js dentro de promociones.html */
.promo-products-grid .detail-product-card {
  position: relative;
}

/* Si un item no tiene precio, se mantiene la consulta. */
.sin-precio { color: var(--brand); font-weight: 950; }

@media(max-width:720px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card { min-height: 320px; }
  .variant-selector-head { display: grid; }
  .variant-option { min-height: 28px; font-size: .72rem; }
}


/* =========================================================
   FIX FINAL MOCKUPS - HOME + FUNCIONES
   Evita cards finitas, corrige banner y estabiliza catálogo.
========================================================= */

.promo-banner-slider {
  min-height: 260px;
  background:
    linear-gradient(90deg, #003f9d, #075bd8);
}

.promo-banner-track,
.promo-banner-slide,
.promo-banner-link {
  min-height: 260px;
  height: 260px;
}

.promo-banner-slide img,
.promo-banner-link img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
}

.hero-modern {
  grid-template-columns: minmax(0, 0.95fr) minmax(520px, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.hero-modern .features {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  align-items: stretch;
}

.hero-modern .features article {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.hero-modern .features h3 {
  line-height: 1.15;
}

.hero-modern .features p {
  line-height: 1.42;
}

.product-card .price,
.product-card .sin-precio {
  color: var(--brand);
  font-size: 1.08rem;
  line-height: 1.08;
  font-weight: 950;
}

@media (max-width: 1250px) {
  .hero-modern {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .hero-modern .features {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-modern .features article {
    min-height: 150px;
  }
}

@media (max-width: 760px) {
  .promo-banner-slider,
  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link {
    min-height: 170px;
    height: 170px;
  }

  .promo-banner-slide img,
  .promo-banner-link img {
    height: 170px;
  }

  .hero-modern .features {
    grid-template-columns: 1fr;
  }

  .hero-modern .features article {
    min-height: auto;
  }
}


/* =========================================================
   FIX MARKETING / CONSULTA LIMPIA
   - Sin precios online.
   - Secciones de pago/consulta estilo anterior.
   - Consulta rápida: solo nombre.
   - Presupuesto: nombre + dirección.
========================================================= */

.old-info-section {
  max-width: 1160px;
  margin: clamp(3rem, 6vw, 5rem) auto;
}

.old-info-section h2 {
  margin: 0 0 1.3rem;
  color: var(--text);
  font-size: clamp(2.3rem, 4.6vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.065em;
}

.old-info-section > p:not(.eyebrow),
.how-section > div > p {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.6;
}

.how-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.75fr);
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: center;
}

.how-card {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: #ffffff;
  border: 1px solid rgba(8, 31, 70, 0.10);
  border-radius: 24px;
  box-shadow: 0 20px 46px rgba(8, 31, 70, 0.07);
}

.how-card ol {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding-left: 1.2rem;
  color: #405174;
  font-size: 1rem;
  line-height: 1.5;
}

.payment-grid,
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.payment-grid article,
.faq-grid article {
  min-height: 120px;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid rgba(8, 31, 70, 0.10);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(8, 31, 70, 0.06);
}

.payment-grid article:nth-child(4) {
  grid-column: span 1;
}

.payment-grid span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.65rem;
  background: #eaf3ff;
  border-radius: 14px;
}

.payment-grid strong,
.faq-grid h3 {
  display: block;
  margin: 0 0 0.35rem;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.payment-grid p,
.faq-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

/* Consulta / presupuesto */
.checkout-mode-panel.hidden {
  display: none !important;
}

.checkout-mode-panel {
  margin-top: 1.1rem;
}

.checkout-mode-panel h3 {
  margin: 0 0 0.55rem;
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.mode-help {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.5;
}

.checkout-form-clean {
  display: grid;
  gap: 0.95rem;
}

.checkout-form-clean label {
  display: grid;
  gap: 0.45rem;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 900;
}

.checkout-form-clean input,
.checkout-form-clean select {
  width: 100%;
  min-height: 50px;
  padding: 0 1rem;
  color: var(--text);
  background: #ffffff;
  border: 1px solid rgba(7, 91, 216, 0.20);
  border-radius: 16px;
  outline: none;
  font: inherit;
  font-weight: 800;
}

.checkout-form-clean input:focus,
.checkout-form-clean select:focus {
  border-color: rgba(7, 91, 216, 0.70);
  box-shadow: 0 0 0 4px rgba(7, 91, 216, 0.11);
}

.checkout-form-clean .input-error {
  color: #dc2626;
  background: #fff7f7;
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
}

.field-error {
  display: none;
  color: #dc2626;
  font-size: 0.78rem;
  font-weight: 900;
}

.field-error.active {
  display: block;
}

.vertical-actions {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.btn.whatsapp {
  color: #ffffff;
  background: #16a34a;
  border-color: transparent;
  box-shadow: 0 15px 26px rgba(22, 163, 74, 0.20);
}

.btn.danger-soft {
  color: #dc2626;
  background: #fff1f2;
  border-color: rgba(239, 68, 68, 0.28);
}

.checkout-help {
  margin: 1rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.marketing-consulta-item .consulta-unit-price strong {
  color: var(--brand);
}

.checkout-subtotal-row strong {
  color: var(--brand);
}

@media (max-width: 900px) {
  .how-section {
    grid-template-columns: 1fr;
  }

  .payment-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   FIX FINAL - HOME RESPONSIVE + PRODUCTOS ESTILO PRINCIPAL
   Devuelve el home y las cards al formato estable anterior.
========================================================= */

/* HOME: evita que las tarjetas de beneficios aplasten el texto */
.home-main {
  width: min(var(--max), calc(100% - 2rem));
  margin-inline: auto;
}

.home-intro {
  padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(1.3rem, 3vw, 2.2rem) !important;
}

.home-intro .hero-modern,
.hero-modern {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1.35rem !important;
  align-items: start !important;
}

.hero-modern .hero-content {
  max-width: 780px !important;
}

.hero-modern h1 {
  max-width: 780px !important;
  font-size: clamp(2.45rem, 6vw, 4.4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.065em !important;
}

.hero-modern .hero-text {
  max-width: 660px !important;
}

.hero-modern .features {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  margin: 0 !important;
}

.hero-modern .features article {
  min-width: 0 !important;
  min-height: 155px !important;
  padding: 1.2rem !important;
  overflow: visible !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.hero-modern .features h3,
.hero-modern .features p {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

@media (min-width: 1200px) {
  .home-intro .hero-modern,
  .hero-modern {
    grid-template-columns: minmax(460px, 0.9fr) minmax(560px, 1.1fr) !important;
    align-items: center !important;
    gap: clamp(2rem, 5vw, 4rem) !important;
  }
}

@media (max-width: 760px) {
  .hero-modern .features {
    grid-template-columns: 1fr !important;
  }

  .hero-modern .features article {
    min-height: auto !important;
  }
}

/* PRODUCTOS: vuelve al estilo principal estable */
.catalog-shell {
  overflow: hidden;
}

.products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 1.15rem !important;
  align-items: stretch !important;
}

.product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 430px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(8, 31, 70, 0.10) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(8, 31, 70, 0.07) !important;
}

.product-card::before {
  pointer-events: none;
}

.product-image {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  height: 215px !important;
  min-height: 215px !important;
  padding: 1rem !important;
  background: linear-gradient(145deg, #ffffff, #eef5ff) !important;
  border-bottom: 1px solid rgba(8, 31, 70, 0.08) !important;
}

.product-image img {
  display: block !important;
  width: 88% !important;
  max-width: 230px !important;
  height: 180px !important;
  max-height: 180px !important;
  object-fit: contain !important;
}

.product-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
  flex: 1 1 auto !important;
  min-height: 220px !important;
  padding: 1rem 1.05rem 1.05rem !important;
}

.product-code-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  min-height: 24px !important;
  margin-bottom: 0.15rem !important;
}

.product-code-row .code,
.product-bottom .code {
  color: #667799 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

.product-code-row .badge {
  display: none !important;
}

.product-card h3 {
  min-height: 2.45em !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 1.05rem !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product-card p {
  min-height: 2.8em !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product-bottom.modern-bottom,
.modern-bottom {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 0.85rem !important;
  margin-top: auto !important;
  min-height: 58px !important;
}

.product-bottom.modern-bottom > div,
.modern-bottom > div {
  display: grid !important;
  align-content: end !important;
  min-height: 58px !important;
}

.product-card .price {
  display: none !important;
}

.product-card .sin-precio {
  display: flex !important;
  align-items: flex-end !important;
  min-height: 2.1em !important;
  color: var(--brand) !important;
  font-size: 1.08rem !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
}

.btn-add-round {
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
}

/* variantes integradas, sin romper altura de card */
.variant-selector-card {
  margin: 0.15rem 0 0.75rem !important;
  padding: 0.7rem !important;
  border-radius: 16px !important;
}

.variant-options {
  gap: 0.42rem !important;
}

.variant-option {
  min-height: 34px !important;
  padding: 0 0.75rem !important;
  font-size: 0.84rem !important;
}

@media (min-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .products-grid {
    grid-template-columns: 1fr !important;
  }

  .product-card {
    min-height: auto !important;
  }

  .product-image {
    height: 190px !important;
    min-height: 190px !important;
  }

  .product-image img {
    height: 155px !important;
  }

  .product-body {
    min-height: auto !important;
  }
}


/* =========================================================
   FIX BANNER PRINCIPAL
   - Mantiene proporción 1920x360/420 para no cortar la imagen.
   - Corrige la barra larga de dots.
   - Flechas más visibles.
   - Permite mover con flechas, dots y arrastre/touch.
========================================================= */

.promo-banner-slider {
  position: relative !important;
  width: 100% !important;
  height: clamp(210px, 18.75vw, 360px) !important;
  min-height: clamp(210px, 18.75vw, 360px) !important;
  overflow: hidden !important;
  background: #0646a8 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 16px 38px rgba(8, 31, 70, 0.10) !important;
  touch-action: pan-y !important;
}

.promo-banner-track,
.promo-banner-slide,
.promo-banner-link {
  width: 100% !important;
  height: clamp(210px, 18.75vw, 360px) !important;
  min-height: clamp(210px, 18.75vw, 360px) !important;
}

.promo-banner-slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.42s ease !important;
}

.promo-banner-slide.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.promo-banner-link {
  display: block !important;
  position: relative !important;
}

.promo-banner-link::after {
  display: none !important;
}

.promo-banner-slide img,
.promo-banner-link img {
  display: block !important;
  width: 100% !important;
  height: clamp(210px, 18.75vw, 360px) !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
}

/* Dots: ya no forman una barra gigante */
.promo-banner-dots {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 14px !important;
  z-index: 8 !important;
  width: fit-content !important;
  max-width: calc(100% - 2rem) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  transform: translateX(-50%) !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(8, 31, 70, 0.18) !important;
  backdrop-filter: blur(8px) !important;
}

.promo-banner-dot {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.70) !important;
  cursor: pointer !important;
  transition: width 0.2s ease, background 0.2s ease !important;
}

.promo-banner-dot.active {
  width: 28px !important;
  background: #ffffff !important;
}

/* Flechas */
.banner-arrow {
  position: absolute !important;
  top: 50% !important;
  z-index: 9 !important;
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  color: #ffffff !important;
  background: rgba(3, 20, 58, 0.64) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
  cursor: pointer !important;
  transition: 0.18s ease !important;
}

.banner-arrow:hover {
  background: rgba(3, 20, 58, 0.86) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

.banner-prev {
  left: 24px !important;
}

.banner-next {
  right: 24px !important;
}

@media (max-width: 760px) {
  .promo-banner-slider,
  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link,
  .promo-banner-slide img,
  .promo-banner-link img {
    height: clamp(150px, 42vw, 210px) !important;
    min-height: clamp(150px, 42vw, 210px) !important;
  }

  .banner-arrow {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.65rem !important;
  }

  .banner-prev {
    left: 10px !important;
  }

  .banner-next {
    right: 10px !important;
  }

  .promo-banner-dots {
    bottom: 8px !important;
    padding: 7px 10px !important;
  }
}


/* =========================================================
   FIX - BOTÓN QUITAR DEL CARRITO
   Mantiene el botón Quitar en rojo, incluso al pasar el mouse.
========================================================= */

.cart-remove,
.consulta-remove {
  color: #dc2626 !important;
  background: #fff1f2 !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

.cart-remove:hover,
.cart-remove:focus-visible,
.consulta-remove:hover,
.consulta-remove:focus-visible {
  color: #ffffff !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.20) !important;
  transform: translateY(-1px);
}

.cart-remove:active,
.consulta-remove:active {
  transform: translateY(0);
  box-shadow: none !important;
}

/* Botón quitar dentro del carrito compacto */
.cart-item.compact .cart-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  width: fit-content !important;
}


/* =========================================================
   FASE 3.0 - LIMPIEZA FINAL
   Reglas finales estables para producción.
========================================================= */

/* Carrito: el CSV se maneja solo desde consulta.html */
#cartCsv {
  display: none !important;
}

.cart-panel-footer {
  gap: 0.75rem;
}

/* Catálogo marketing: nunca mostrar precios numéricos en la web pública */
.product-card .price,
.detail-product-body .price,
.consulta-unit-price .price {
  display: none !important;
}

.product-card .sin-precio,
.detail-product-body .sin-precio {
  display: flex !important;
}

/* Banner: altura estable y sin barra gigante */
.promo-banner-slider {
  height: clamp(220px, 19vw, 370px) !important;
  min-height: clamp(220px, 19vw, 370px) !important;
}

.promo-banner-track,
.promo-banner-slide,
.promo-banner-link,
.promo-banner-slide img,
.promo-banner-link img {
  height: clamp(220px, 19vw, 370px) !important;
  min-height: clamp(220px, 19vw, 370px) !important;
}

.promo-banner-dots {
  width: fit-content !important;
}

/* Home: cards informativas nunca se hacen columnas finitas */
@media (max-width: 1320px) {
  .home-intro .hero-modern,
  .hero-modern {
    grid-template-columns: 1fr !important;
  }

  .hero-modern .features {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 780px) {
  .hero-modern .features {
    grid-template-columns: 1fr !important;
  }

  .catalog-tools,
  .modern-tools {
    grid-template-columns: 1fr !important;
  }

  .category-scroll {
    justify-content: flex-start !important;
  }
}

/* Consulta mobile */
@media (max-width: 900px) {
  .checkout-mockup-page {
    grid-template-columns: 1fr !important;
  }

  .checkout-right,
  .checkout-left {
    width: 100% !important;
  }

  .consulta-item-v3 {
    grid-template-columns: 64px 1fr !important;
  }

  .consulta-meta,
  .consulta-unit-price,
  .consulta-remove {
    grid-column: 1 / -1 !important;
  }
}

/* Productos mobile */
@media (max-width: 620px) {
  .product-card {
    min-height: auto !important;
  }

  .product-image {
    height: 180px !important;
    min-height: 180px !important;
  }

  .product-image img {
    height: 145px !important;
  }
}


/* =========================================================
   FIX FINAL 3.1 - BANNERS / NAV SIMPLE / CONSULTA
========================================================= */

/* Banners visibles en home, temporada y promociones */
.promo-banner-slider {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: clamp(220px, 19vw, 370px) !important;
  min-height: clamp(220px, 19vw, 370px) !important;
  margin: 0 !important;
  background: #075bd8 !important;
  overflow: hidden !important;
}

.promo-banner-slider[hidden] {
  display: none !important;
}

.promo-banner-track,
.promo-banner-slide,
.promo-banner-link,
.promo-banner-slide img,
.promo-banner-link img {
  height: clamp(220px, 19vw, 370px) !important;
  min-height: clamp(220px, 19vw, 370px) !important;
}

.promo-banner-slide img,
.promo-banner-link img {
  object-fit: cover !important;
  object-position: center !important;
}

/* Nav de páginas internas: menos opciones */
.special-simple-nav {
  gap: 1.35rem !important;
}

.special-simple-nav a:not(.nav-cta) {
  white-space: nowrap;
}

/* Cards del home con iconos tipo mockup */
.mockup-feature-cards article {
  padding: 1.35rem !important;
  min-height: 180px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(7, 91, 216, 0.08), transparent 10rem),
    #ffffff !important;
  border: 1px solid rgba(7, 91, 216, 0.12) !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 44px rgba(8, 31, 70, 0.08) !important;
}

.feature-svg-icon {
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  margin-bottom: 1rem !important;
  color: #075bd8 !important;
  background: linear-gradient(145deg, #f8fbff, #e8f2ff) !important;
  border: 1px solid rgba(7, 91, 216, 0.13) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 -8px 18px rgba(7, 91, 216, 0.08), 0 12px 22px rgba(8, 31, 70, 0.06) !important;
}

.feature-svg-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mockup-feature-cards h3 {
  margin-top: 0 !important;
  font-size: 1.02rem !important;
}

.mockup-feature-cards p {
  margin-bottom: 0 !important;
  line-height: 1.45 !important;
}

/* Consulta: productos seleccionados más legibles */
.consulta-items-mockup {
  display: grid !important;
  gap: 0.85rem !important;
}

.consulta-item-v4 {
  position: relative;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) auto !important;
  gap: 0.95rem !important;
  align-items: stretch !important;
  min-height: 132px !important;
  padding: 0.95rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(8, 31, 70, 0.11) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(8, 31, 70, 0.045) !important;
}

.consulta-item-v4 .consulta-thumb {
  width: 96px !important;
  height: 96px !important;
  align-self: center !important;
  object-fit: contain !important;
  background: #f4f8ff !important;
  border: 1px solid rgba(8, 31, 70, 0.08) !important;
  border-radius: 16px !important;
  padding: 0.45rem !important;
}

.consulta-content-v4 {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.45rem;
}

.consulta-title-v4 {
  display: grid;
  gap: 0.15rem;
}

.consulta-title-v4 strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.18;
  font-weight: 950;
  word-break: normal;
}

.consulta-title-v4 span {
  color: #62728f;
  font-size: 0.78rem;
  font-weight: 850;
}

.consulta-desc-v4 {
  margin: 0 !important;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.consulta-bottom-v4 {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}

.consulta-price-v4,
.consulta-qty-block-v4 {
  display: grid;
  gap: 0.35rem;
}

.consulta-price-v4 small,
.consulta-qty-block-v4 small {
  color: #62728f;
  font-size: 0.72rem;
  font-weight: 900;
}

.consulta-price-v4 b {
  color: var(--brand);
  font-size: 0.95rem;
  line-height: 1.1;
}

.consulta-remove-v4 {
  align-self: center !important;
  min-width: 82px !important;
  height: 42px !important;
  padding: 0 1rem !important;
}

@media (max-width: 760px) {
  .consulta-item-v4 {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  .consulta-item-v4 .consulta-thumb {
    width: 76px !important;
    height: 76px !important;
  }

  .consulta-remove-v4 {
    grid-column: 1 / -1;
    width: 100% !important;
  }

  .consulta-bottom-v4 {
    display: grid;
    gap: 0.75rem;
  }
}

@media (max-width: 640px) {
  .promo-banner-slider,
  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link,
  .promo-banner-slide img,
  .promo-banner-link img {
    height: clamp(155px, 42vw, 215px) !important;
    min-height: clamp(155px, 42vw, 215px) !important;
  }
}


/* =========================================================
   FIX 3.2 - Cards home más anchas + imágenes ajustables
========================================================= */

@media (min-width: 1180px) {
  .home-intro .hero-modern,
  .hero-modern {
    grid-template-columns: minmax(430px, .78fr) minmax(720px, 1.22fr) !important;
    gap: clamp(2rem, 4vw, 4.8rem) !important;
  }

  .hero-modern .features,
  .mockup-feature-cards {
    grid-template-columns: repeat(3, minmax(210px, 1fr)) !important;
    width: 100% !important;
    max-width: 760px !important;
  }

  .mockup-feature-cards article {
    min-height: 235px !important;
    padding: 1.55rem 1.45rem !important;
  }
}

@media (min-width: 1480px) {
  .hero-modern .features,
  .mockup-feature-cards {
    max-width: 840px !important;
  }

  .mockup-feature-cards article {
    min-height: 250px !important;
  }
}

/* Las imágenes ajustadas desde admin usan object-position + zoom */
.promo-banner-link,
.bank-promo-card a,
.detail-product-image {
  overflow: hidden;
}

.promo-banner-link img,
.bank-promo-card img,
.detail-product-image img {
  transform-origin: center center;
  will-change: transform, object-position;
}


/* =========================================================
   FASE 4 - Paginación liviana para catálogo grande
========================================================= */

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 38px;
  color: #647492;
  font-weight: 950;
}


/* =========================================================
   FASE ICONOS SVG - reemplazo de emojis
========================================================= */

.svg-icon,
.inline-svg-icon,
.btn-svg-icon,
.nav-svg-icon,
.title-svg-icon {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  flex: 0 0 auto;
}

.nav-svg-icon {
  width: 1.05em;
  height: 1.05em;
  margin-right: .35rem;
  vertical-align: -0.12em;
}

.btn-svg-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: .45rem;
  vertical-align: -0.12em;
}

.inline-svg-icon {
  width: 28px;
  height: 28px;
  color: currentColor;
}

.title-svg-icon {
  width: 1.35em;
  height: 1.35em;
}

.category-icon img {
  width: 17px;
  height: 17px;
  display: block;
  object-fit: contain;
}

.payment-grid article > span,
.season-categories article > span,
.promo-benefits article > span,
.info-strip article > span,
.season-benefit-card > span,
.form-title > span,
.choice-card div > span,
.title-icon {
  display: inline-grid;
  place-items: center;
}

.payment-grid .inline-svg-icon,
.season-categories .inline-svg-icon,
.promo-benefits .inline-svg-icon,
.info-strip .inline-svg-icon,
.season-benefit-card .inline-svg-icon {
  color: var(--brand);
}

.hero-actions .btn.primary::before,
.hero-actions .btn.secondary::before {
  content: none !important;
}

#resultadosTexto::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .4rem;
  vertical-align: -0.14em;
  background: currentColor;
  -webkit-mask: url("../img/icons/package.svg") center / contain no-repeat;
  mask: url("../img/icons/package.svg") center / contain no-repeat;
}

.floating-cart img {
  width: 1.2em;
  height: 1.2em;
  display: block;
}


.category-btn.active .category-icon img,
.btn.primary .btn-svg-icon {
  filter: brightness(0) invert(1);
}


/* =========================================================
   FASE ICONOS SVG PRO - FontAwesome local
========================================================= */

.category-icon img,
.inline-svg-icon,
.btn-svg-icon,
.nav-svg-icon,
.title-svg-icon,
.floating-cart img {
  image-rendering: auto;
}

.category-icon img {
  width: 16px;
  height: 16px;
}

.payment-grid .inline-svg-icon,
.season-categories .inline-svg-icon,
.promo-benefits .inline-svg-icon,
.info-strip .inline-svg-icon {
  width: 24px;
  height: 24px;
}

.season-benefit-card .inline-svg-icon {
  width: 34px;
  height: 34px;
}

.title-svg-icon {
  width: 24px;
  height: 24px;
}

.choice-card .inline-svg-icon {
  width: 28px;
  height: 28px;
}


/* =========================================================
   FASE ICONOS SVG PRO - Contraste según fondo
========================================================= */

/* Íconos sobre fondos claros: azul marca */
.category-icon img,
.inline-svg-icon,
.btn-svg-icon,
.nav-svg-icon,
.title-svg-icon,
.floating-cart img {
  filter: none;
}

/* Íconos sobre botones/fondos azules u oscuros: blanco */
.category-btn.active .category-icon img,
.btn.primary .btn-svg-icon,
.nav-cta .nav-svg-icon,
.mobile-menu-cta .nav-svg-icon,
.floating-cart img {
  filter: brightness(0) invert(1);
}

/* Íconos dentro de tarjetas claras: azul marca y buen contraste */
.payment-grid article .inline-svg-icon,
.season-categories article .inline-svg-icon,
.promo-benefits article .inline-svg-icon,
.info-strip article .inline-svg-icon,
.checkout-card .inline-svg-icon,
.selected-products-card .title-svg-icon {
  filter: none;
}

/* Botones secundarios claros: azul marca */
.btn.secondary .btn-svg-icon {
  filter: none;
}

/* Evita que los SVG se vean lavados */
.category-icon,
.payment-grid article > span,
.season-categories article > span,
.promo-benefits article > span,
.info-strip article > span,
.form-title > span,
.choice-card div > span,
.title-icon {
  background-blend-mode: normal;
}


/* =========================================================
   FASE MOBILE - Menú hamburguesa más rápido
   Optimizado para celulares: usa transform en vez de right.
========================================================= */

.mobile-menu-panel {
  right: 0 !important;
  transform: translate3d(105%, 0, 0);
  transition: transform 0.18s cubic-bezier(.2, .7, .2, 1) !important;
  will-change: transform;
  contain: layout paint;
  box-shadow: -12px 0 34px rgba(15, 23, 42, 0.18) !important;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-panel.active {
  right: 0 !important;
  transform: translate3d(0, 0, 0);
}

.nav-overlay {
  transition: opacity 0.16s ease !important;
  will-change: opacity;
  background: rgba(15, 23, 42, 0.34) !important;
}

.menu-toggle span {
  transition: transform 0.16s ease, opacity 0.12s ease !important;
}

.mobile-menu-links a {
  box-shadow: none !important;
}

.mobile-menu-header button {
  box-shadow: none !important;
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* En celulares, el blur del header puede trabar bastante. */
@media (max-width: 760px) {
  .topbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  .mobile-menu-panel {
    width: min(360px, 88vw);
    border-radius: 18px 0 0 18px;
  }
}

/* Respeta celulares que prefieren menos animación. */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-panel,
  .nav-overlay,
  .menu-toggle span {
    transition: none !important;
  }
}


/* =========================================================
   FASE UX - Transición al tocar banners/páginas
========================================================= */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(246, 250, 255, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.page-transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.page-transition-card {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  min-width: 230px;
  padding: 1.25rem 1.35rem;
  color: var(--text);
  background: #ffffff;
  border: 1px solid rgba(40, 93, 168, 0.16);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  transform: translateY(8px) scale(.98);
  transition: transform 0.18s ease;
}

.page-transition-overlay.active .page-transition-card {
  transform: translateY(0) scale(1);
}

.page-transition-loader {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(7, 91, 216, 0.16);
  border-top-color: var(--brand);
  border-radius: 999px;
  animation: pageTransitionSpin 0.75s linear infinite;
}

.page-transition-card strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 950;
}

.page-transition-card small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

@keyframes pageTransitionSpin {
  to { transform: rotate(360deg); }
}

.promo-banner-link {
  position: relative;
}

.promo-banner-link::after {
  content: "Tocá para ver promociones";
  position: absolute;
  right: clamp(12px, 3vw, 26px);
  bottom: clamp(12px, 3vw, 22px);
  z-index: 2;
  padding: .62rem .85rem;
  color: #ffffff;
  background: rgba(7, 27, 73, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .18);
}

@media (max-width: 640px) {
  .page-transition-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .promo-banner-link::after {
    left: 12px;
    right: auto;
    bottom: 12px;
    font-size: .72rem;
    padding: .52rem .72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay,
  .page-transition-card {
    transition: none;
  }

  .page-transition-loader {
    animation: none;
  }
}


/* =========================================================
   FASE BANNERS RESPONSIVE - Desktop y mobile separados
========================================================= */

/*
Medidas recomendadas:
- Desktop: 1600x500 o 1920x600
- Mobile: 900x900 o 1080x1350

Uso en data/banners.json:
{
  "imagenDesktop": "img/banners/desktop/banner-bpn.webp",
  "imagenMobile": "img/banners/mobile/banner-bpn.webp"
}
*/

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

.promo-banner-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* En PC el banner es horizontal */
.promo-banner-slider,
.promo-banner-track,
.promo-banner-slide,
.promo-banner-link,
.promo-banner-picture {
  min-height: clamp(310px, 31vw, 520px) !important;
  height: clamp(310px, 31vw, 520px) !important;
}

.promo-banner-slide img,
.promo-banner-link img,
.promo-banner-picture img {
  height: 100% !important;
}

/* En celular usamos imagen mobile cuadrada/vertical y bajamos recorte */
@media (max-width: 720px) {
  .promo-banner-slider,
  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link,
  .promo-banner-picture {
    min-height: min(86vw, 440px) !important;
    height: min(86vw, 440px) !important;
  }

  .promo-banner-picture img,
  .promo-banner-slide img,
  .promo-banner-link img {
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 430px) {
  .promo-banner-slider,
  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link,
  .promo-banner-picture {
    min-height: 330px !important;
    height: 330px !important;
  }
}


/* =========================================================
   FIX BANNER AZUL - Mostrar imagen completa sin corte
   Si todavía no hay banner mobile/desktop separado, evita que se recorte mal.
========================================================= */

.promo-banner-slider {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.12), transparent 18rem),
    linear-gradient(90deg, #003f9d, #075bd8) !important;
  overflow: hidden;
}

.promo-banner-track,
.promo-banner-slide,
.promo-banner-link,
.promo-banner-picture {
  height: clamp(230px, 24vw, 430px) !important;
  min-height: clamp(230px, 24vw, 430px) !important;
}

.promo-banner-picture img,
.promo-banner-slide img,
.promo-banner-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.10), transparent 18rem),
    linear-gradient(90deg, #003f9d, #075bd8) !important;
}

/* Cuando cargues banners mobile reales, se verán completos y sin cortar */
@media (max-width: 720px) {
  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link,
  .promo-banner-picture {
    height: min(86vw, 430px) !important;
    min-height: min(86vw, 430px) !important;
  }

  .promo-banner-picture img,
  .promo-banner-slide img,
  .promo-banner-link img {
    object-fit: contain !important;
  }
}

@media (max-width: 430px) {
  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link,
  .promo-banner-picture {
    height: 330px !important;
    min-height: 330px !important;
  }
}


/* =========================================================
   FASE MOBILE APP - Diseño tipo app sin romper desktop
   Solo aplica en celular/tablet chica.
========================================================= */

@media (max-width: 760px) {
  :root {
    --shadow: none;
    --shadow-soft: none;
    --shadow-card: none;
  }

  html {
    scroll-padding-top: 78px;
  }

  body {
    padding-top: 68px !important;
    padding-bottom: 78px !important;
    background: #f6f9ff !important;
  }

  main {
    width: min(100% - 20px, var(--max-width));
    overflow-x: clip;
  }

  .topbar {
    min-height: 68px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(40, 93, 168, 0.12);
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .brand img {
    width: 158px !important;
    max-width: 54vw !important;
  }

  .desktop-nav {
    display: none !important;
  }

  .menu-toggle {
    display: grid !important;
    order: -1;
    place-content: center;
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  .menu-toggle span {
    width: 18px !important;
    height: 2px !important;
    margin: 3px auto !important;
  }

  .mobile-menu-panel {
    width: min(340px, 86vw) !important;
    border-radius: 18px 0 0 18px !important;
    box-shadow: none !important;
  }

  .mobile-menu-links a,
  .mobile-menu-header button,
  .cart-panel,
  .product-card,
  .detail-product-card,
  .detail-card,
  .bank-promo-card,
  .checkout-card,
  .features article,
  .payment-grid article,
  .season-categories article,
  .promo-benefits article,
  .info-strip article {
    box-shadow: none !important;
  }

  .nav-overlay {
    background: rgba(7, 27, 73, .25) !important;
  }

  /* Banner mobile tipo mockup */
  .promo-banner-slider {
    width: 100% !important;
    margin: 0 auto 14px !important;
    border-radius: 0 0 22px 22px !important;
    background: #ffffff !important;
  }

  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link,
  .promo-banner-picture {
    min-height: 126px !important;
    height: 126px !important;
  }

  .promo-banner-picture img,
  .promo-banner-slide img,
  .promo-banner-link img {
    object-fit: contain !important;
    background: #ffffff !important;
    border-radius: 0 0 22px 22px;
  }

  .banner-arrow {
    display: none !important;
  }

  .promo-banner-dots {
    bottom: 6px !important;
  }

  .promo-banner-link::after {
    display: none !important;
  }

  /* Home tipo app */
  .hero,
  .hero-modern {
    display: block !important;
    padding: 10px 0 18px !important;
  }

  .hero-content,
  .hero-copy {
    max-width: 100% !important;
  }

  .eyebrow {
    margin-bottom: 10px !important;
    padding: .42rem .68rem !important;
    font-size: .68rem !important;
  }

  .hero h1,
  .detail-hero h1,
  .hero-modern h1 {
    max-width: 92%;
    font-size: clamp(2.15rem, 11vw, 3.15rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  .hero-text,
  .detail-hero p {
    font-size: .94rem !important;
    line-height: 1.45 !important;
    margin-top: .8rem !important;
  }

  .hero-actions {
    display: none !important;
  }

  .features,
  .mockup-feature-cards,
  .payment-grid,
  .season-categories,
  .promo-benefits,
  .info-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 18px !important;
  }

  .features article,
  .mockup-feature-cards article,
  .payment-grid article,
  .season-categories article,
  .promo-benefits article,
  .info-strip article {
    min-height: 112px;
    padding: 10px 8px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(40, 93, 168, 0.10) !important;
    text-align: center !important;
  }

  .features article span,
  .payment-grid article span,
  .season-categories article span,
  .promo-benefits article span,
  .info-strip article span {
    margin: 0 auto 6px !important;
  }

  .features article strong,
  .payment-grid article strong,
  .season-categories article strong,
  .promo-benefits article strong,
  .info-strip article strong {
    display: block;
    font-size: .78rem !important;
    line-height: 1.15 !important;
  }

  .features article p,
  .payment-grid article p,
  .season-categories article p,
  .promo-benefits article p,
  .info-strip article p {
    margin-top: 5px !important;
    font-size: .66rem !important;
    line-height: 1.25 !important;
  }

  /* Catálogo móvil tipo lista */
  .catalog-section {
    padding: 18px 0 10px !important;
  }

  .catalog-section .section-heading,
  .section-heading {
    display: block !important;
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  .section-heading h2,
  .catalog-section .section-heading h2 {
    font-size: clamp(1.95rem, 9vw, 2.55rem) !important;
    letter-spacing: -.045em !important;
  }

  .section-heading p,
  .catalog-section .section-heading p {
    font-size: .86rem !important;
    line-height: 1.35 !important;
  }

  .catalog-tools {
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .search-box input,
  .select-box select {
    min-height: 44px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  .select-box {
    min-width: 96px;
  }

  .category-scroll {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 10px 0 2px !important;
    scrollbar-width: none;
  }

  .category-scroll::-webkit-scrollbar {
    display: none;
  }

  .category-btn {
    min-height: 40px !important;
    padding: .55rem .78rem !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: .75rem !important;
  }

  .category-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .products-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .product-card {
    display: grid !important;
    grid-template-columns: 94px minmax(0, 1fr) !important;
    min-height: 118px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid rgba(40, 93, 168, 0.10) !important;
    transform: none !important;
  }

  .product-card:hover {
    transform: none !important;
  }

  .product-image {
    min-height: 118px !important;
    height: 100% !important;
    border-bottom: 0 !important;
    border-right: 1px solid rgba(40, 93, 168, 0.08) !important;
    background: #f7faff !important;
  }

  .product-image img {
    width: 86% !important;
    height: 92px !important;
    object-fit: contain !important;
  }

  .stock-floating {
    display: none !important;
  }

  .product-body {
    padding: 10px 10px 9px !important;
  }

  .product-code-row {
    gap: 5px !important;
    margin-bottom: 4px !important;
  }

  .product-code-row .badge {
    display: none !important;
  }

  .product-card h3 {
    margin: 0 0 4px !important;
    font-size: .9rem !important;
    line-height: 1.18 !important;
    letter-spacing: -.015em !important;
  }

  .product-card p {
    display: none !important;
  }

  .product-bottom.modern-bottom {
    align-items: end !important;
    margin-top: 8px !important;
    gap: 8px !important;
  }

  .btn-add-round {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .sin-precio {
    font-size: .75rem !important;
  }

  #resultadosTexto {
    font-size: .78rem !important;
  }

  .catalog-pagination {
    justify-content: flex-start !important;
    overflow-x: auto;
  }

  /* Promos/temporada tipo app */
  .detail-hero,
  .promo-hero {
    padding: 18px 0 12px !important;
    text-align: left !important;
  }

  .detail-products-grid,
  .promo-products-grid,
  #promocionesGrid,
  #temporadaGrid,
  #bankPromosGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .bank-promo-card,
  .detail-product-card {
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(40, 93, 168, 0.10) !important;
    overflow: hidden;
  }

  .bank-promo-card img {
    height: auto !important;
    min-height: 120px;
    object-fit: contain !important;
    background: #ffffff !important;
  }

  .detail-product-card {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }

  .detail-product-image {
    min-height: 130px !important;
    border-right: 1px solid rgba(40, 93, 168, .08);
    background: #f7faff !important;
  }

  .detail-product-image img {
    height: 105px !important;
    object-fit: contain !important;
  }

  .detail-product-body {
    padding: 12px !important;
  }

  .detail-product-body h3 {
    font-size: .95rem !important;
    line-height: 1.18 !important;
  }

  .detail-product-body p {
    font-size: .76rem !important;
    line-height: 1.3 !important;
  }

  /* Carrito flotante se vuelve compacto para no tapar */
  .floating-cart {
    right: 12px !important;
    bottom: 86px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  .floating-cart strong {
    display: none !important;
  }

  .floating-cart em {
    min-width: 24px !important;
    height: 24px !important;
  }

  .cart-panel {
    width: min(390px, 96vw) !important;
    border-radius: 22px 0 0 22px !important;
  }

  /* Bottom nav tipo app */
  .mobile-app-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1250;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    min-height: 60px;
    padding: 7px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(40, 93, 168, 0.12);
    border-radius: 22px;
    box-shadow: none;
  }

  .mobile-app-nav a {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    color: #6b7893;
    font-size: .68rem;
    font-weight: 850;
    border-radius: 16px;
  }

  .mobile-app-nav a.active {
    color: var(--brand);
    background: #eaf4ff;
  }

  .mobile-app-nav img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .mobile-app-nav a.active img {
    filter: none;
  }

  .footer {
    padding-bottom: 96px !important;
  }

  /* Checkout mobile */
  .checkout-mockup-page {
    width: min(100% - 20px, var(--max-width)) !important;
    padding-top: 14px !important;
  }

  .checkout-left h1 {
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
  }

  .checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .checkout-card {
    border-radius: 18px !important;
    border: 1px solid rgba(40, 93, 168, 0.10) !important;
  }
}

@media (min-width: 761px) {
  .mobile-app-nav {
    display: none !important;
  }
}

/* ==========================================================
   OVERRIDE FINAL 24/06 - Formatos separados PC / CELULAR
   Mantiene la versión escritorio amplia y convierte celular en
   experiencia tipo app: header compacto, catálogo en lista,
   promos apiladas y navegación inferior.
   ========================================================== */

@media (min-width: 761px) {
  body {
    padding-top: 79px !important;
  }

  .topbar {
    min-height: 79px !important;
  }

  .desktop-nav {
    display: flex !important;
  }

  .menu-toggle,
  .mobile-app-nav {
    display: none !important;
  }

  .floating-cart {
    top: auto !important;
    right: 28px !important;
    bottom: 24px !important;
    width: auto !important;
    height: auto !important;
  }

  .floating-cart strong {
    display: inline !important;
  }

  .floating-cart span {
    width: 45px !important;
    height: 45px !important;
  }

  .floating-cart em {
    position: static !important;
  }
}

@media (min-width: 1181px) {
  .home-main,
  .special-page,
  .checkout-mockup-page {
    width: min(100% - 72px, var(--max-width, 1200px)) !important;
  }

  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .promo-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --mobile-pad: 12px;
  }

  html {
    scroll-padding-top: 76px !important;
  }

  body {
    padding-top: 62px !important;
    padding-bottom: 86px !important;
    background: linear-gradient(180deg, #f7faff 0%, #eef4fb 100%) !important;
    overflow-x: hidden !important;
  }

  body.menu-open,
  body.cart-open {
    overflow: hidden !important;
  }

  .topbar {
    min-height: 62px !important;
    height: 62px !important;
    padding: 0 56px !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(40, 93, 168, .10) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 8px 20px rgba(10, 31, 68, .06) !important;
    backdrop-filter: blur(10px) !important;
  }

  .topbar .brand {
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
  }

  .topbar .brand img {
    width: 150px !important;
    max-width: 42vw !important;
    height: auto !important;
  }

  body[data-page="promos"] .topbar .brand img {
    display: none !important;
  }

  body[data-page="promos"] .topbar .brand::after {
    content: "Promociones";
    display: block;
    color: #081f46;
    font-size: 1.02rem;
    font-weight: 950;
    letter-spacing: -.03em;
  }

  body[data-page="temporada"] .topbar .brand img {
    display: none !important;
  }

  body[data-page="temporada"] .topbar .brand::after {
    content: "Temporada";
    display: block;
    color: #081f46;
    font-size: 1.02rem;
    font-weight: 950;
    letter-spacing: -.03em;
  }

  .desktop-nav,
  .topbar .nav {
    display: none !important;
  }

  .menu-toggle {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    left: 12px !important;
    top: 10px !important;
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 1020 !important;
  }

  .menu-toggle span {
    width: 18px !important;
    height: 2px !important;
    margin: 2px auto !important;
    background: #081f46 !important;
  }

  .mobile-menu-panel {
    right: 0 !important;
    top: 0 !important;
    width: min(330px, 88vw) !important;
    height: 100dvh !important;
    border-radius: 22px 0 0 22px !important;
    transform: translateX(110%) !important;
    transition: transform 140ms ease-out !important;
    box-shadow: -14px 0 36px rgba(8, 31, 70, .20) !important;
  }

  .mobile-menu-panel.active {
    transform: translateX(0) !important;
  }

  .nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1260 !important;
    background: rgba(8, 31, 70, .34) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 120ms ease-out !important;
  }

  .nav-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-menu-header {
    padding: 12px !important;
  }

  .mobile-menu-header img {
    width: 148px !important;
  }

  .mobile-menu-links {
    gap: 8px !important;
    padding: 12px !important;
  }

  .mobile-menu-links a {
    min-height: 46px !important;
    padding: 12px !important;
    border-radius: 15px !important;
    box-shadow: none !important;
  }

  .promo-banner-slider {
    width: calc(100% - 20px) !important;
    height: 108px !important;
    min-height: 108px !important;
    margin: 10px auto 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border: 1px solid rgba(40, 93, 168, .10) !important;
  }

  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link {
    height: 108px !important;
    min-height: 108px !important;
    border-radius: 16px !important;
  }

  .promo-banner-slide img,
  .promo-banner-link img {
    width: 100% !important;
    height: 108px !important;
    object-fit: cover !important;
  }

  .banner-arrow {
    display: none !important;
  }

  .promo-banner-dots {
    bottom: 5px !important;
    gap: 4px !important;
  }

  .promo-banner-dot {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    opacity: .75 !important;
  }

  .promo-banner-dot.active {
    width: 17px !important;
  }

  .home-main,
  .special-page,
  .checkout-mockup-page {
    width: 100% !important;
    max-width: none !important;
    padding-left: var(--mobile-pad) !important;
    padding-right: var(--mobile-pad) !important;
  }

  .home-intro {
    padding-top: 12px !important;
  }

  .hero-modern,
  .hero {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .hero-content {
    padding: 8px 6px 4px !important;
    text-align: center !important;
  }

  .hero .eyebrow,
  .hero-text,
  .hero-actions {
    display: none !important;
  }

  .hero h1 {
    max-width: 310px !important;
    margin: 0 auto !important;
    color: #081f46 !important;
    font-size: clamp(1.45rem, 7.2vw, 1.9rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  .mockup-feature-cards,
  .features {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 16px 0 4px !important;
  }

  .mockup-feature-cards article,
  .features article {
    min-height: 100px !important;
    padding: 10px 6px !important;
    border-radius: 15px !important;
    text-align: center !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(40, 93, 168, .08) !important;
    box-shadow: none !important;
  }

  .feature-svg-icon,
  .features span {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto 6px !important;
    border-radius: 13px !important;
  }

  .mockup-feature-cards h3,
  .features h3 {
    margin: 0 !important;
    font-size: .70rem !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
  }

  .mockup-feature-cards p,
  .features p {
    margin: 4px auto 0 !important;
    max-width: 82px !important;
    font-size: .56rem !important;
    line-height: 1.22 !important;
  }

  .catalog-shell,
  .catalog-section {
    margin: 18px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .section-heading,
  .center-heading {
    display: block !important;
    text-align: left !important;
    margin-bottom: 10px !important;
  }

  .section-heading h2,
  .center-heading h2 {
    margin: 0 0 4px !important;
    color: #081f46 !important;
    font-size: 1.58rem !important;
    line-height: 1 !important;
    letter-spacing: -.055em !important;
  }

  .section-heading p,
  #resultadosTexto {
    margin: 0 !important;
    color: #70819b !important;
    font-size: .72rem !important;
    font-weight: 750 !important;
  }

  .modern-tools,
  .catalog-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin: 10px 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .search-box,
  .select-box {
    min-width: 0 !important;
    margin: 0 !important;
  }

  .search-box > span,
  .select-box > span {
    display: none !important;
  }

  .search-input-wrap,
  .select-box select {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 11px !important;
    background: #fff !important;
    border: 1px solid rgba(40, 93, 168, .14) !important;
    box-shadow: none !important;
  }

  .search-input-wrap input {
    min-width: 0 !important;
    font-size: .72rem !important;
    padding: 0 10px !important;
  }

  .search-input-wrap span {
    display: none !important;
  }

  .select-box select {
    width: 100% !important;
    padding: 0 8px !important;
    color: #081f46 !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
  }

  .category-scroll {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 7px 1px 10px !important;
    margin: 0 -1px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
  }

  .category-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .category-btn {
    flex: 0 0 auto !important;
    min-height: 37px !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    background: #fff !important;
    border: 1px solid rgba(40, 93, 168, .08) !important;
    box-shadow: none !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
  }

  .category-btn.active {
    background: #064cc1 !important;
    color: #fff !important;
    border-color: #064cc1 !important;
  }

  .category-icon,
  .category-icon img,
  .category-i {
    width: 15px !important;
    height: 15px !important;
  }

  .products-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 2px !important;
  }

  .product-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-height: 104px !important;
    max-width: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(40, 93, 168, .08) !important;
    box-shadow: 0 8px 22px rgba(8,31,70,.045) !important;
    transform: none !important;
  }

  .product-card:hover {
    transform: none !important;
    box-shadow: 0 8px 22px rgba(8,31,70,.045) !important;
  }

  .product-image {
    min-height: 104px !important;
    height: 100% !important;
    background: #f7faff !important;
    border-right: 1px solid rgba(40, 93, 168, .07) !important;
  }

  .product-image img {
    width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
  }

  .stock-floating {
    display: none !important;
  }

  .product-body {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 12px 42px 10px 12px !important;
  }

  .product-card h3 {
    order: 1 !important;
    margin: 0 0 5px !important;
    color: #081f46 !important;
    font-size: .88rem !important;
    line-height: 1.16 !important;
    letter-spacing: -.025em !important;
  }

  .product-body > p {
    display: none !important;
  }

  .product-code-row {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin: 0 !important;
  }

  .product-code-row .badge,
  .product-code-row .code {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: .64rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }

  .variant-selector-card {
    order: 3 !important;
    display: none !important;
  }

  .product-bottom {
    order: 4 !important;
    margin: 0 !important;
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
  }

  .product-bottom > div {
    display: none !important;
  }

  .btn-add-round {
    width: 31px !important;
    height: 31px !important;
    border-radius: 999px !important;
    background: #064cc1 !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 1.2rem !important;
  }

  .catalog-pagination {
    gap: 5px !important;
    margin: 14px 0 4px !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 2px !important;
  }

  .pagination-btn {
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  body[data-page="home"].mobile-catalog-focus .promo-banner-slider,
  body[data-page="home"].mobile-catalog-focus .home-intro {
    display: none !important;
  }

  body[data-page="home"].mobile-catalog-focus .catalog-shell {
    margin-top: 14px !important;
  }

  .old-info-section,
  .how-section,
  .payment-section,
  .faq-section {
    display: none !important;
  }

  .floating-cart {
    top: 8px !important;
    right: 12px !important;
    bottom: auto !important;
    z-index: 1040 !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #081f46 !important;
  }

  .floating-cart strong {
    display: none !important;
  }

  .floating-cart span {
    width: 26px !important;
    height: 26px !important;
    background: transparent !important;
    color: #081f46 !important;
  }

  .floating-cart span img {
    width: 24px !important;
    height: 24px !important;
  }

  .floating-cart em {
    position: absolute !important;
    top: 4px !important;
    right: 3px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #064cc1 !important;
    color: #fff !important;
    font-size: .58rem !important;
    font-weight: 950 !important;
    line-height: 16px !important;
  }

  .cart-panel {
    top: 0 !important;
    right: -100vw !important;
    width: min(390px, 96vw) !important;
    border-radius: 22px 0 0 22px !important;
    transition: right 150ms ease-out !important;
  }

  .cart-panel.active {
    right: 0 !important;
  }

  .cart-overlay {
    z-index: 1100 !important;
  }

  .mobile-app-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 1050 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-height: 58px !important;
    padding: 6px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(40, 93, 168, .12) !important;
    border-radius: 21px !important;
    box-shadow: 0 12px 30px rgba(8,31,70,.10) !important;
    backdrop-filter: blur(10px) !important;
  }

  .mobile-app-nav a {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    color: #66758f !important;
    font-size: .64rem !important;
    font-weight: 900 !important;
    border-radius: 16px !important;
  }

  .mobile-app-nav a.active {
    color: #064cc1 !important;
    background: #eaf4ff !important;
  }

  .mobile-app-nav img {
    width: 19px !important;
    height: 19px !important;
    object-fit: contain !important;
  }

  .footer {
    display: none !important;
  }

  /* Promociones / Temporada en celular */
  .special-page,
  .promo-page {
    padding-top: 10px !important;
    padding-bottom: 86px !important;
  }

  .promo-hero-row,
  .special-hero-copy,
  .promo-benefits {
    display: none !important;
  }

  .bank-promos-section,
  .promo-products-section {
    margin: 0 !important;
    padding: 0 !important;
  }

  .bank-promos-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 10px 0 14px !important;
  }

  .bank-promo-card {
    border-radius: 15px !important;
    border: 1px solid rgba(40, 93, 168, .08) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .bank-promo-card a {
    display: block !important;
  }

  .bank-promo-card img {
    width: 100% !important;
    height: 104px !important;
    object-fit: cover !important;
  }

  .promo-products-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .detail-product-card {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-height: 108px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    border: 1px solid rgba(40, 93, 168, .08) !important;
  }

  .detail-product-image {
    min-height: 108px !important;
    background: #f7faff !important;
    border-right: 1px solid rgba(40, 93, 168, .07) !important;
  }

  .detail-product-image img {
    width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
  }

  .detail-label {
    display: none !important;
  }

  .detail-product-body {
    padding: 12px 12px 10px !important;
  }

  .detail-product-body h3 {
    margin: 0 0 5px !important;
    font-size: .88rem !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
  }

  .detail-product-body p {
    margin: 0 0 4px !important;
    font-size: .66rem !important;
    line-height: 1.22 !important;
  }

  .promo-price,
  .old-price,
  .detail-product-body .btn {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .topbar .brand img {
    width: 135px !important;
  }

  .mockup-feature-cards article,
  .features article {
    min-height: 94px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .mockup-feature-cards h3,
  .features h3 {
    font-size: .64rem !important;
  }

  .product-card,
  .detail-product-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

  .product-image img,
  .detail-product-image img {
    width: 70px !important;
    height: 70px !important;
  }
}

/* ==========================================================
   FIX 24/06 - Header mobile + carrito arriba + menú desde izquierda
   - Logo centrado en celular.
   - Carrito fijo arriba a la derecha, no flotando sobre el contenido.
   - Menú hamburguesa abre desde el lado izquierdo.
   - En escritorio/tablet el carrito queda arriba a la derecha.
   ========================================================== */

@media (min-width: 761px) {
  body {
    padding-top: 79px !important;
  }

  .topbar {
    min-height: 79px !important;
    padding-right: clamp(9rem, 10vw, 12.5rem) !important;
  }

  .floating-cart {
    top: 14px !important;
    right: clamp(14px, 2.6vw, 42px) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1120 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    width: auto !important;
    min-width: 112px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 .78rem !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(40, 93, 168, .16) !important;
    box-shadow: 0 10px 24px rgba(8, 31, 70, .08) !important;
    color: #081f46 !important;
  }

  .floating-cart span {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #064cc1 !important;
    color: #ffffff !important;
  }

  .floating-cart span img {
    width: 18px !important;
    height: 18px !important;
  }

  .floating-cart strong {
    display: inline !important;
    color: #081f46 !important;
    font-size: .82rem !important;
    line-height: 1 !important;
  }

  .floating-cart em {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 .38rem !important;
    border-radius: 999px !important;
    background: #064cc1 !important;
    color: #ffffff !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    font-style: normal !important;
    line-height: 22px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 70px !important;
    padding-right: 86px !important;
  }

  .topbar .brand {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .menu-toggle {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .floating-cart {
    top: 14px !important;
    right: 14px !important;
    width: 50px !important;
    min-width: 50px !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
  }

  .floating-cart strong {
    display: none !important;
  }

  .floating-cart span {
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    color: #081f46 !important;
  }

  .floating-cart span img {
    width: 25px !important;
    height: 25px !important;
  }

  .floating-cart em {
    position: absolute !important;
    top: 4px !important;
    right: 3px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    font-size: .58rem !important;
    line-height: 17px !important;
  }
}

@media (max-width: 760px) {
  .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 62px !important;
    height: 62px !important;
    padding: 0 64px !important;
    z-index: 1250 !important;
  }

  .topbar .brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: grid !important;
    place-items: center !important;
    width: min(170px, calc(100vw - 136px)) !important;
    transform: translate(-50%, -50%) !important;
  }

  .topbar .brand img {
    display: block !important;
    width: min(154px, calc(100vw - 140px)) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .menu-toggle {
    left: 10px !important;
    top: 10px !important;
    z-index: 1300 !important;
  }

  .floating-cart {
    position: fixed !important;
    top: 8px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1300 !important;
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #081f46 !important;
  }

  .floating-cart strong {
    display: none !important;
  }

  .floating-cart span {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #081f46 !important;
  }

  .floating-cart span img {
    width: 25px !important;
    height: 25px !important;
  }

  .floating-cart em {
    position: absolute !important;
    top: 4px !important;
    right: 3px !important;
    display: grid !important;
    place-items: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #064cc1 !important;
    color: #ffffff !important;
    font-size: .58rem !important;
    font-weight: 950 !important;
    font-style: normal !important;
    line-height: 17px !important;
  }

  .mobile-menu-panel {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: min(330px, 88vw) !important;
    height: 100dvh !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(40, 93, 168, .12) !important;
    border-radius: 0 22px 22px 0 !important;
    transform: translateX(-110%) !important;
    transition: transform 130ms ease-out !important;
    box-shadow: 14px 0 36px rgba(8, 31, 70, .20) !important;
    z-index: 1320 !important;
  }

  .mobile-menu-panel.active {
    transform: translateX(0) !important;
  }

  .mobile-menu-header {
    min-height: 64px !important;
  }

  .mobile-menu-header img {
    width: 150px !important;
  }

  .nav-overlay {
    z-index: 1260 !important;
  }

  .cart-panel {
    z-index: 1360 !important;
  }

  .cart-overlay {
    z-index: 1340 !important;
  }
}

@media (max-width: 360px) {
  .topbar {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }

  .topbar .brand,
  .topbar .brand img {
    width: min(138px, calc(100vw - 122px)) !important;
  }
}

@media (max-width: 760px) {
  body.menu-open .floating-cart {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================
   FIX 24/06 - PC: carrito flotante abajo a la izquierda
   En celular/tablet se mantiene arriba a la derecha.
   ========================================================== */
@media (min-width: 1181px) {
  .topbar {
    padding-left: 7.5vw !important;
    padding-right: 7.5vw !important;
    justify-content: space-between !important;
  }

  .floating-cart {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: 24px !important;
    left: 28px !important;
    z-index: 1120 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .65rem !important;
    width: auto !important;
    min-width: 126px !important;
    height: auto !important;
    min-height: 56px !important;
    padding: .72rem 1rem !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(40, 93, 168, .16) !important;
    box-shadow: 0 14px 35px rgba(8, 31, 70, .15) !important;
    color: #064cc1 !important;
  }

  .floating-cart span {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: #064cc1 !important;
    color: #ffffff !important;
  }

  .floating-cart span img {
    width: 21px !important;
    height: 21px !important;
    filter: brightness(0) invert(1) !important;
  }

  .floating-cart strong {
    display: inline !important;
    color: #081f46 !important;
    font-size: .9rem !important;
    line-height: 1 !important;
  }

  .floating-cart em {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 .42rem !important;
    border-radius: 999px !important;
    background: #064cc1 !important;
    color: #ffffff !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    font-style: normal !important;
    line-height: 26px !important;
  }
}

/* ==========================================================
   FIX 24/06 - ZOOM PC / TABLET
   Evita que el logo y el menú se encimen cuando el navegador
   está con zoom. A partir de 1280px usa header escritorio;
   por debajo cambia a header compacto con hamburguesa.
   ========================================================== */

@media (min-width: 1281px) {
  body {
    padding-top: 79px !important;
  }

  .topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: normal !important;
    gap: clamp(1rem, 2vw, 2.4rem) !important;
    min-height: 79px !important;
    padding: 0 clamp(1.5rem, 5vw, 7.5vw) !important;
  }

  .topbar .brand {
    position: static !important;
    transform: none !important;
    min-width: 0 !important;
  }

  .topbar .brand img {
    width: clamp(175px, 11.5vw, 225px) !important;
    max-width: 225px !important;
  }

  .desktop-nav {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    gap: clamp(0.42rem, 0.85vw, 0.95rem) !important;
  }

  .desktop-nav a {
    flex: 0 0 auto !important;
    padding: 0.62rem clamp(0.32rem, 0.62vw, 0.78rem) !important;
    font-size: clamp(0.78rem, 0.72vw, 0.92rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .desktop-nav .nav-cta {
    min-height: 44px !important;
    padding-inline: clamp(0.8rem, 1vw, 1.2rem) !important;
  }

  .menu-toggle,
  .mobile-menu-panel,
  .nav-overlay,
  .mobile-app-nav {
    display: none !important;
  }

  .floating-cart {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: 24px !important;
    left: 28px !important;
    z-index: 1120 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .65rem !important;
    width: auto !important;
    min-width: 126px !important;
    height: auto !important;
    min-height: 56px !important;
    padding: .72rem 1rem !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(40, 93, 168, .16) !important;
    box-shadow: 0 14px 35px rgba(8, 31, 70, .15) !important;
    color: #064cc1 !important;
  }

  .floating-cart span {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: #064cc1 !important;
    color: #ffffff !important;
  }

  .floating-cart span img {
    width: 21px !important;
    height: 21px !important;
    filter: brightness(0) invert(1) !important;
  }

  .floating-cart strong {
    display: inline !important;
    color: #081f46 !important;
    font-size: .9rem !important;
    line-height: 1 !important;
  }

  .floating-cart em {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 .42rem !important;
    border-radius: 999px !important;
    background: #064cc1 !important;
    color: #ffffff !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    font-style: normal !important;
    line-height: 26px !important;
  }
}

@media (min-width: 761px) and (max-width: 1280px) {
  body {
    padding-top: 74px !important;
  }

  .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 74px !important;
    height: 74px !important;
    padding: 0 82px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 8px 20px rgba(10, 31, 68, .06) !important;
  }

  .desktop-nav,
  .topbar .nav {
    display: none !important;
  }

  .topbar .brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: grid !important;
    place-items: center !important;
    width: min(210px, calc(100vw - 190px)) !important;
  }

  .topbar .brand img {
    display: block !important;
    width: min(190px, calc(100vw - 210px)) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .menu-toggle {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1300 !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .menu-toggle span {
    width: 20px !important;
    height: 2px !important;
    margin: 3px auto !important;
    background: #081f46 !important;
  }

  .mobile-menu-panel {
    display: flex !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: min(350px, 88vw) !important;
    height: 100dvh !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(40, 93, 168, .12) !important;
    border-radius: 0 22px 22px 0 !important;
    transform: translateX(-110%) !important;
    transition: transform 130ms ease-out !important;
    box-shadow: 14px 0 36px rgba(8, 31, 70, .20) !important;
    z-index: 1320 !important;
  }

  .mobile-menu-panel.active {
    transform: translateX(0) !important;
  }

  .nav-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1260 !important;
    background: rgba(8, 31, 70, .34) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 120ms ease-out !important;
  }

  .nav-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .floating-cart {
    position: fixed !important;
    top: 12px !important;
    right: 18px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1300 !important;
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #081f46 !important;
  }

  .floating-cart strong {
    display: none !important;
  }

  .floating-cart span {
    display: grid !important;
    place-items: center !important;
    width: 29px !important;
    height: 29px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #081f46 !important;
  }

  .floating-cart span img {
    width: 25px !important;
    height: 25px !important;
    filter: none !important;
  }

  .floating-cart em {
    position: absolute !important;
    top: 4px !important;
    right: 3px !important;
    display: grid !important;
    place-items: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #064cc1 !important;
    color: #ffffff !important;
    font-size: .58rem !important;
    font-weight: 950 !important;
    font-style: normal !important;
    line-height: 17px !important;
  }

  .hero h1,
  .hero-modern h1,
  .detail-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1 !important;
  }

  .home-intro {
    padding-top: clamp(1.4rem, 3vw, 2.2rem) !important;
  }

  .hero-modern .features,
  .mockup-feature-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }

  .hero-modern .features article,
  .mockup-feature-cards article {
    min-height: 145px !important;
  }
}

@media (min-width: 761px) {
  .promo-banner-slider,
  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link,
  .promo-banner-picture {
    height: clamp(185px, 17vw, 315px) !important;
    min-height: clamp(185px, 17vw, 315px) !important;
  }

  .promo-banner-slide img,
  .promo-banner-link img,
  .promo-banner-picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #0646a8 !important;
  }
}

@media (max-width: 760px) {
  .mobile-menu-panel {
    display: flex !important;
  }
}

/* ===============================
   AJUSTES EXTRA RESPONSIVE MOBILE / TABLET
   Corrige tarjetas muy altas, bloques apretados y paginación.
================================= */

@media (min-width: 761px) and (max-width: 1024px) {
  .home-intro .hero-modern,
  .hero-modern {
    gap: 1.6rem !important;
  }

  .hero-modern .features,
  .mockup-feature-cards,
  .promo-benefits,
  .info-strip,
  .season-categories,
  .bank-promos-grid,
  .promo-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  .hero-modern .features article,
  .mockup-feature-cards article,
  .promo-benefits article,
  .info-strip article,
  .season-categories article {
    min-height: auto !important;
    padding: 1rem !important;
  }

  .promo-benefits article,
  .info-strip article,
  .season-categories article {
    align-items: flex-start !important;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .catalog-pagination {
    flex-wrap: wrap !important;
    padding: .9rem !important;
  }

  .pagination-pages {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

@media (max-width: 760px) {
  .home-main,
  .special-page,
  .checkout-mockup-page {
    width: min(100% - .8rem, var(--max)) !important;
  }

  .promo-banner-slider,
  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link,
  .promo-banner-picture {
    height: 140px !important;
    min-height: 140px !important;
  }

  .promo-banner-slide img,
  .promo-banner-link img,
  .promo-banner-picture img {
    height: 140px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hero-modern,
  .home-intro .hero-modern {
    gap: 1rem !important;
  }

  .hero-modern h1,
  .home-intro h1 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.02 !important;
    text-align: center !important;
  }

  .hero-modern .hero-content,
  .home-intro .hero-content {
    text-align: center !important;
  }

  .hero-modern .hero-content .eyebrow,
  .home-intro .hero-content .eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-modern .hero-text,
  .home-intro .hero-text {
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: .95rem !important;
    line-height: 1.5 !important;
  }

  .hero-actions {
    justify-content: center !important;
  }

  .hero-modern .features,
  .mockup-feature-cards,
  .promo-benefits,
  .info-strip,
  .season-categories,
  .bank-promos-grid,
  .promo-products-grid {
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
  }

  .hero-modern .features article,
  .mockup-feature-cards article {
    min-height: auto !important;
    padding: 1rem !important;
    display: grid !important;
    grid-template-columns: 50px 1fr !important;
    align-items: start !important;
    gap: .25rem .85rem !important;
    text-align: left !important;
  }

  .hero-modern .features article span,
  .mockup-feature-cards article span {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
  }

  .hero-modern .features article h3,
  .mockup-feature-cards article h3 {
    grid-column: 2 !important;
    margin: .1rem 0 .2rem !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  .hero-modern .features article p,
  .mockup-feature-cards article p {
    grid-column: 2 !important;
    margin: 0 !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  .promo-benefits article,
  .info-strip article,
  .season-categories article {
    display: flex !important;
    align-items: flex-start !important;
    gap: .85rem !important;
    min-height: auto !important;
    padding: 1rem !important;
    text-align: left !important;
  }

  .promo-benefits article > div,
  .info-strip article > div,
  .season-categories article > div {
    min-width: 0 !important;
  }

  .promo-benefits article strong,
  .info-strip article strong,
  .season-categories article strong {
    display: block !important;
    margin: 0 0 .2rem !important;
    line-height: 1.2 !important;
  }

  .promo-benefits article p,
  .info-strip article p,
  .season-categories article p {
    margin: 0 !important;
    font-size: .92rem !important;
    line-height: 1.4 !important;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }

  .catalog-pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 1rem auto 0 !important;
    padding: .75rem !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(8, 31, 70, .06) !important;
  }

  .pagination-pages {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: .35rem !important;
  }

  .pagination-btn,
  .pagination-edge {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 .55rem !important;
    font-size: .92rem !important;
  }

  .empty-state,
  .season-benefit-card,
  .detail-card,
  .bank-promo-card,
  .promo-product-card {
    padding: 1rem !important;
  }
}

@media (max-width: 520px) {
  .products-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .product-card {
    min-height: auto !important;
  }

  .product-body {
    padding: .7rem !important;
  }

  .product-card h3 {
    font-size: .82rem !important;
    line-height: 1.18 !important;
  }

  .price,
  .sin-precio {
    font-size: .98rem !important;
  }

  .promo-banner-slider,
  .promo-banner-track,
  .promo-banner-slide,
  .promo-banner-link,
  .promo-banner-picture,
  .promo-banner-slide img,
  .promo-banner-link img,
  .promo-banner-picture img {
    height: 126px !important;
    min-height: 126px !important;
  }
}

/* ===============================
   FIX CARRITO: icono visible + contador tipo notificación
================================= */

.floating-cart {
  overflow: visible !important;
}

.floating-cart span img,
.floating-cart .inline-svg-icon {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}

/* PC escritorio: carrito flotante abajo a la izquierda */
@media (min-width: 1281px) {
  .floating-cart {
    top: auto !important;
    right: auto !important;
    bottom: 24px !important;
    left: 28px !important;
    z-index: 950 !important;
    overflow: visible !important;
  }

  .floating-cart span {
    background: #075bd8 !important;
    color: #ffffff !important;
  }

  .floating-cart span img,
  .floating-cart .inline-svg-icon {
    filter: brightness(0) invert(1) !important;
  }

  .floating-cart em {
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    display: grid !important;
    place-items: center !important;
    min-width: 25px !important;
    height: 25px !important;
    padding: 0 7px !important;
    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    background: #ef233c !important;
    color: #ffffff !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    font-style: normal !important;
    line-height: 1 !important;
    box-shadow: 0 8px 18px rgba(239, 35, 60, .32) !important;
  }
}

/* Tablet / zoom / celular: carrito arriba a la derecha estilo app */
@media (max-width: 1280px) {
  .floating-cart {
    top: 10px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1305 !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .floating-cart strong {
    display: none !important;
  }

  .floating-cart span {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border: 1px solid rgba(7, 91, 216, .16) !important;
    border-radius: 14px !important;
    background: #eaf3ff !important;
    color: #075bd8 !important;
    box-shadow: 0 8px 18px rgba(8, 31, 70, .08) !important;
  }

  .floating-cart span img,
  .floating-cart .inline-svg-icon {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
  }

  .floating-cart em {
    position: absolute !important;
    top: 1px !important;
    right: 0 !important;
    display: grid !important;
    place-items: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    background: #ef233c !important;
    color: #ffffff !important;
    font-size: .66rem !important;
    font-weight: 950 !important;
    font-style: normal !important;
    line-height: 1 !important;
    box-shadow: 0 7px 14px rgba(239, 35, 60, .30) !important;
  }
}

@media (max-width: 520px) {
  .floating-cart {
    top: 8px !important;
    right: 8px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .floating-cart span {
    width: 36px !important;
    height: 36px !important;
  }

  .floating-cart em {
    top: 0 !important;
    right: -1px !important;
  }
}