/* ============================================================
   TOKENS — tema azul elegante oscuro
============================================================ */
    :root {
      --bg: #07080F;
      --bg-soft: #0A0B14;
      --surface: #0E1020;
      --border: rgba(148,163,184,.12);
      --border-soft: rgba(148,163,184,.07);
      --ink: #E4EFFC;
      --muted: #8896A8;
      --muted-2: #52606D;

      --brand: #3B82F6;
      --brand-dark: #2563EB;
      --brand-soft: rgba(59,130,246,.12);
      --cyan: #38BDF8;
      --pink: #818CF8;
      --navy: #020810;
      --navy-soft: rgba(59,130,246,.06);

      --gold: #C9A84C;
      --gold-dark: #9F7A1C;
      --gold-soft: rgba(201,168,76,.13);

      --blue: #3B82F6;
      --blue-mid: #2563EB;
      --blue-soft: rgba(59,130,246,.10);
      --blue-glow: rgba(59,130,246,.22);

      --deal: #F5B731;
      --deal-soft: rgba(245,183,49,.13);

      --wa: #25D366;
      --wa-dark: #128C5E;
      --wa-soft: rgba(37,211,102,.12);

      --container: 1200px;
      --radius-s: 12px;
      --radius-m: 20px;
      --radius-l: 30px;

      --shadow-card: 0 2px 8px rgba(0,4,18,.5), 0 18px 44px -20px rgba(0,4,18,.7);
      --shadow-card-hover: 0 4px 14px rgba(0,4,18,.6), 0 28px 56px -22px rgba(59,130,246,.22);

      --section-y: clamp(64px, 9vw, 124px);

      --ff-display: "Sora", sans-serif;
      --ff-body: "Inter", sans-serif;
      --ff-mono: "JetBrains Mono", monospace;
    }

    /* ============================================================
   RESET / BASE
============================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--ff-body);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(148,163,184,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.025) 1px, transparent 1px);
      background-size: 44px 44px;
      pointer-events: none;
      z-index: 0;
    }

    img,
    svg {
      display: block;
      max-width: 100%;
    }

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

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--ff-display);
      margin: 0;
      line-height: 1.1;
      letter-spacing: -0.015em;
    }

    p {
      margin: 0;
    }

    button {
      font-family: inherit;
      cursor: pointer;
    }

    :focus-visible {
      outline: 3px solid var(--brand);
      outline-offset: 3px;
      border-radius: 6px;
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
    }

    .container {
      width: 100%;
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ============================================================
   AMBIENT BACKGROUND — luz cálida, no oscuridad
============================================================ */
    .bg-fx {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .bg-fx span {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      opacity: .5;
    }

    .bg-fx span:nth-child(1) {
      width: 600px;
      height: 600px;
      background: #162040;
      top: -240px;
      right: -180px;
      animation: float1 28s ease-in-out infinite;
      opacity: .28;
    }

    .bg-fx span:nth-child(2) {
      width: 480px;
      height: 480px;
      background: #0D2030;
      top: 40%;
      left: -220px;
      animation: float2 32s ease-in-out infinite;
      opacity: .16;
    }

    .bg-fx span:nth-child(3) {
      width: 420px;
      height: 420px;
      background: #1E1540;
      bottom: -180px;
      right: 22%;
      opacity: .14;
      animation: float1 36s ease-in-out infinite reverse;
    }

    @keyframes float1 {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      50% {
        transform: translate(-50px, 40px) scale(1.07);
      }
    }

    @keyframes float2 {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      50% {
        transform: translate(60px, -30px) scale(1.05);
      }
    }

    /* ============================================================
   TYPE HELPERS
============================================================ */
    .eyebrow {
      font-family: var(--ff-mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--gold);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--gold-soft);
      padding: 8px 14px;
      border-radius: 999px;
    }

    .section-head {
      max-width: 680px;
      margin: 0 0 52px;
    }

    .section-head h2 {
      font-size: clamp(28px, 4vw, 44px);
      margin-top: 18px;
      font-weight: 800;
    }

    .section-head p {
      margin-top: 16px;
      color: var(--muted);
      font-size: 17px;
    }

    .section-head.center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    /* ============================================================
   BUTTONS
============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 700;
      font-size: 15px;
      padding: 16px 30px;
      border-radius: 999px;
      border: 2px solid transparent;
      white-space: nowrap;
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, background .25s ease, border-color .25s ease, color .25s ease;
    }

    .btn:active {
      transform: scale(.97);
    }

    .btn--brand {
      background: linear-gradient(180deg, #60A5FA, var(--brand));
      color: #fff;
      box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 14px 30px -10px rgba(37,99,235,.55);
    }

    .btn--brand:hover {
      transform: translateY(-3px);
      box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 22px 44px -12px rgba(37,99,235,.75);
    }

    .btn--ghost {
      background: rgba(10,21,48,.6);
      border-color: rgba(59,130,246,.25);
      color: var(--ink);
      backdrop-filter: blur(8px);
    }

    .btn--ghost:hover {
      border-color: var(--brand);
      color: var(--brand);
      transform: translateY(-3px);
    }

    .btn--sm {
      padding: 12px 20px;
      font-size: 13.5px;
    }

    .btn svg {
      width: 18px;
      height: 18px;
    }

    /* ============================================================
   NAV
============================================================ */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(7, 8, 15, .92);
      backdrop-filter: blur(20px) saturate(140%);
      border-bottom: 1px solid rgba(255,255,255,.055);
      box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 4px 24px rgba(0,0,0,.5);
    }

    .nav__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 84px;
      gap: 24px;
    }

    .nav__logo {
      display: flex;
      align-items: center;
      gap: 12px;
      line-height: 1;
    }

    .nav__logo-mark {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #0A0C14;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      box-shadow: 0 0 0 2px rgba(201,168,76,.35), 0 4px 16px rgba(201,168,76,.18);
      overflow: hidden;
      flex-shrink: 0;
    }

    .nav__logo-mark img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .nav__logo-text strong {
      font-family: var(--ff-display);
      font-weight: 800;
      font-size: 19px;
      display: block;
    }

    .nav__logo-text span {
      font-family: var(--ff-mono);
      font-size: 9.5px;
      letter-spacing: .3em;
      color: var(--gold);
    }

    .nav__links {
      display: flex;
      align-items: center;
      gap: 34px;
      font-size: 14.5px;
      font-weight: 600;
      color: var(--muted);
    }

    .nav__links a {
      transition: color .2s ease;
    }

    .nav__links a:hover {
      color: var(--brand);
    }

    .nav__right {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .nav__toggle {
      display: none;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      align-items: center;
      justify-content: center;
    }

    .nav__mobile {
      display: none;
      flex-direction: column;
      padding: 8px 24px 24px;
      gap: 6px;
      border-top: 1px solid var(--border-soft);
      background: var(--bg);
    }

    .nav__mobile a {
      padding: 14px 4px;
      font-size: 15px;
      font-weight: 600;
      color: var(--muted);
      border-bottom: 1px solid var(--border-soft);
    }

    .nav__mobile a:last-child {
      border-bottom: none;
    }

    @media (max-width: 880px) {
      .nav__links {
        display: none;
      }

      .nav__toggle {
        display: flex;
      }

      .nav.is-open .nav__mobile {
        display: flex;
      }
    }

    /* ============================================================
   HERO
============================================================ */
    .hero {
      position: relative;
      z-index: 1;
      padding: 64px 0 var(--section-y);
    }

    .hero::before {
      content: "";
      position: absolute;
      top: -160px;
      right: -12%;
      width: 62%;
      height: 460px;
      background: linear-gradient(100deg, var(--gold), #1E3A8A 50%, var(--blue));
      transform: skewY(-9deg);
      opacity: .14;
      filter: blur(68px);
      border-radius: 80px;
      z-index: -1;
      pointer-events: none;
    }

    .hero__grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 820px;
      margin: 0 auto;
    }

    .hero__copy h1 {
      font-size: clamp(40px, 5.6vw, 72px);
      margin-top: 24px;
      font-weight: 800;
    }

    .hero__copy h1 em {
      font-style: normal;
      display: inline-block;
      background: linear-gradient(100deg, var(--gold) 0%, #60A5FA 55%, #818CF8 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .hero__copy p {
      margin-top: 24px;
      font-size: 18px;
      color: var(--muted);
      max-width: 540px;
    }

    .hero__actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 36px;
      justify-content: center;
    }

    .hero__trust {
      margin-top: 44px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      max-width: 680px;
    }

    .hero__trust li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-s);
      padding: 12px 14px;
      box-shadow: var(--shadow-card);
    }

    .hero__trust li svg {
      width: 18px;
      height: 18px;
      color: var(--brand);
      flex-shrink: 0;
    }

    /* --- showcase del hero: vitrina de pedido --- */
    .showcase {
      position: relative;
    }

    .showcase__main {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-l);
      padding: 28px;
      box-shadow: var(--shadow-card-hover);
    }

    .showcase__head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .showcase__head h3 {
      font-size: 16px;
      font-weight: 700;
    }

    .showcase__status {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--wa-dark);
      background: var(--wa-soft);
      padding: 7px 12px;
      border-radius: 999px;
    }

    .showcase__status .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--wa);
      animation: pulse 2.4s infinite;
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
      }

      70% {
        box-shadow: 0 0 0 9px rgba(37, 211, 102, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }

    .showcase__items {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .showcase__item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-s);
      background: var(--bg);
      transition: transform .3s ease, box-shadow .3s ease;
    }

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

    .showcase__item-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #fff;
    }

    .showcase__item-icon svg {
      width: 22px;
      height: 22px;
    }

    .showcase__item-info {
      flex: 1;
      min-width: 0;
    }

    .showcase__item-info b {
      font-size: 14px;
      display: block;
    }

    .showcase__item-info span {
      font-size: 12px;
      color: var(--muted-2);
      font-family: var(--ff-mono);
    }

    .showcase__item-price {
      font-family: var(--ff-display);
      font-weight: 800;
      font-size: 15.5px;
      white-space: nowrap;
    }

    .showcase__total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 18px;
      padding-top: 18px;
      border-top: 2px dashed var(--border);
    }

    .showcase__total span {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--muted);
    }

    .showcase__total b {
      font-family: var(--ff-display);
      font-size: 24px;
      font-weight: 800;
      color: var(--brand);
    }

    .showcase__wa {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 15px;
      border-radius: 999px;
      border: none;
      background: linear-gradient(180deg, #34E27A, var(--wa));
      color: #073D24;
      font-weight: 800;
      font-size: 15px;
      box-shadow: 0 14px 28px -10px rgba(37, 211, 102, .55);
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .showcase__wa:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 38px -12px rgba(37, 211, 102, .65);
    }

    .showcase__wa svg {
      width: 19px;
      height: 19px;
    }

    .showcase__badge {
      position: absolute;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-m);
      box-shadow: var(--shadow-card-hover);
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      animation: bob 5s ease-in-out infinite;
    }

    .showcase__badge--deal {
      top: -26px;
      left: -26px;
      background: linear-gradient(135deg, #F5B731, #D4960E);
      border: none;
      color: #0A0600;
      animation-delay: .6s;
    }

    .showcase__badge--deal b {
      font-family: var(--ff-display);
      font-size: 22px;
      font-weight: 800;
    }

    .showcase__badge--deal span {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      opacity: .92;
      line-height: 1.3;
    }

    .showcase__badge--ship {
      bottom: -70px;
      right: -18px;
      animation-delay: 1.4s;
    }

    .showcase__badge--ship svg {
      width: 26px;
      height: 26px;
      color: var(--brand);
    }

    .showcase__badge--ship b {
      font-size: 13.5px;
      display: block;
    }

    .showcase__badge--ship span {
      font-size: 11.5px;
      color: var(--muted);
    }

    @keyframes bob {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    @media (max-width: 520px) {
      .hero__trust {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ============================================================
   SECCIONES
============================================================ */
    .section {
      position: relative;
      z-index: 1;
      padding: var(--section-y) 0;
    }

    .section--alt {
      background: rgba(10,11,18,.8);
      border-top: 1px solid rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.04);
    }

    /* ============================================================
   SECCIÓN BLANCA — tema claro por secciones
============================================================ */
    .section--white {
      background: #FAFAF8;
      color: #0F172A;
      --bg: #F2F0E8;
      --bg-soft: #EAE8DC;
      --surface: #FFFFFF;
      --border: rgba(0,0,0,.09);
      --border-soft: rgba(0,0,0,.05);
      --ink: #0F172A;
      --muted: #475569;
      --muted-2: #94A3B8;
      --shadow-card: 0 2px 8px rgba(0,0,0,.05), 0 10px 28px -14px rgba(0,0,0,.08);
      --shadow-card-hover: 0 4px 14px rgba(0,0,0,.09), 0 22px 48px -18px rgba(0,0,0,.1);
      border-top: 1px solid rgba(0,0,0,.07);
      border-bottom: 1px solid rgba(0,0,0,.07);
    }

    .section--white .eyebrow {
      background: rgba(201,168,76,.12);
      color: var(--gold-dark);
    }

    .section--white .cat-card__count {
      background: #EDE9DC;
      color: #6B6458;
    }

    .section--white .filter-btn {
      background: #FFFFFF;
      color: #475569;
      border-color: rgba(0,0,0,.14);
    }

    .section--white .filter-btn:hover {
      border-color: var(--brand);
      color: var(--brand);
    }

    .section--white .filter-btn.is-active {
      background: linear-gradient(135deg, var(--blue), var(--blue-mid));
      color: #fff;
      border-color: var(--blue);
    }

    .section--white .faq-q {
      color: #0F172A;
    }

    .section--white .faq-a__inner {
      color: #475569;
    }

    .section--white .tm-card__who span {
      color: #64748B;
    }

    .section--white .product-card__spec {
      color: #64748B;
    }

    .section--white .why-item p {
      color: #64748B;
    }

    .section--white .process__step p {
      color: #64748B;
    }

    /* .offers vive sobre un fondo navy oscuro aunque el section sea --white;
       restauramos los tokens oscuros para que las product-cards no hereden
       el --surface:#FFF ni el text blanco del section padre */
    .section--white .offers {
      --surface: #131524;
      --ink: #E4EFFC;
      --muted: #8896A8;
      --muted-2: #52606D;
      --shadow-card: 0 2px 12px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.35);
      --shadow-card-hover: 0 4px 18px rgba(0,0,0,.35), 0 22px 48px -18px rgba(0,0,0,.4);
    }
    .section--white .offers .product-card__spec {
      color: #8896A8;
    }
    .section--white .offers .product-card__price .new {
      color: var(--ink);
    }

    /* botón ghost en fondo blanco */
    .section--white .btn--ghost {
      background: #FFFFFF;
      border-color: rgba(37,99,235,.28);
      color: #1E40AF;
      box-shadow: 0 1px 4px rgba(0,0,0,.07);
    }

    .section--white .btn--ghost:hover {
      background: #F0EDE4;
      border-color: var(--brand);
      color: var(--brand);
    }

    /* trust badges: fondo visible sobre blanco */
    .section--white .hero__trust li {
      background: #F4F2EA;
      border-color: rgba(0,0,0,.07);
      box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 4px 12px -4px rgba(0,0,0,.07);
    }

    /* glow decorativo del hero: más suave sobre blanco */
    .hero.section--white::before {
      opacity: .07;
    }

    /* hero copy h1 color en blanco */
    .hero.section--white .hero__copy h1 {
      color: #0F172A;
    }

    .hero.section--white .hero__copy p {
      color: #475569;
    }

    /* ============================================================
   CATEGORÍAS
============================================================ */
    .cat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .cat-card {
      position: relative;
      padding: 28px;
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-m);
      box-shadow: var(--shadow-card);
      transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
      overflow: hidden;
    }

    .cat-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: var(--cat-color, var(--brand));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .45s cubic-bezier(.16, 1, .3, 1);
    }

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

    .cat-card:hover::before {
      transform: scaleX(1);
    }

    .cat-card__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
    }

    .cat-card__icon {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--cat-soft, var(--brand-soft));
      color: var(--cat-color, var(--brand));
      overflow: hidden;
    }

    .cat-card__icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cat-card__count {
      font-family: var(--ff-mono);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--muted-2);
      background: var(--bg-soft);
      padding: 6px 11px;
      border-radius: 999px;
    }

    .cat-card h3 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .cat-card p {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 18px;
    }

    .cat-card__link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      color: var(--cat-color, var(--brand));
    }

    .cat-card__link svg {
      width: 15px;
      height: 15px;
      transition: transform .25s ease;
    }

    .cat-card:hover .cat-card__link svg {
      transform: translateX(5px);
    }

    @media (max-width: 980px) {
      .cat-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    /* ============================================================
   CATÁLOGO / PRODUCTOS
============================================================ */
    .filters {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }

    .filter-btn {
      font-size: 13.5px;
      font-weight: 700;
      padding: 11px 20px;
      border-radius: 999px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      transition: all .25s ease;
    }

    .filter-btn:hover {
      border-color: var(--brand);
      color: var(--brand);
    }

    .filter-btn.is-active {
      background: linear-gradient(135deg, var(--blue), var(--blue-mid));
      color: #fff;
      border-color: var(--blue);
      box-shadow: 0 8px 18px -8px rgba(37,99,235,.5);
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
      gap: 22px;
    }

    .catalog-section-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 28px;
      justify-content: center;
    }

    .catalog-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 36px;
      padding-top: 24px;
      border-top: 1px solid var(--border-soft);
      gap: 16px;
      flex-wrap: wrap;
    }
    .catalog-footer__count {
      color: var(--muted);
      font-size: 14px;
    }

    .product-card {
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-m);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
    }

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

    .product-card__media {
      position: relative;
      height: 152px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-soft);
      overflow: hidden;
    }

    .product-card__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    .product-card:hover .product-card__img {
      transform: scale(1.08);
    }

    .product-card__tag {
      position: absolute;
      top: 12px;
      left: 12px;
      font-family: var(--ff-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .06em;
      padding: 5px 9px;
      border-radius: 7px;
      color: var(--muted);
      background: rgba(255, 255, 255, .85);
      border: 1px solid var(--border-soft);
      z-index: 2;
    }

    .product-card__stamp {
      position: absolute;
      top: 12px;
      right: 12px;
      background: linear-gradient(135deg, #F5B731, #D4960E);
      color: #0A0600;
      border-radius: 10px;
      padding: 7px 11px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--ff-display);
      font-weight: 800;
      font-size: 14px;
      box-shadow: 0 8px 18px -6px rgba(245,183,49,.45);
      animation: stamp-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
      z-index: 2;
    }

    .product-card__stamp small {
      font-family: var(--ff-body);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    @keyframes stamp-pop {
      from {
        transform: scale(.4);
        opacity: 0;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .product-card__body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }

    .product-card__eyebrow {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--cat-color, var(--brand));
    }

    .product-card__title {
      font-size: 16.5px;
      font-family: var(--ff-display);
      font-weight: 700;
    }

    .product-card__spec {
      font-size: 13.5px;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .product-card__footer {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 20px 20px;
    }

    .product-card__price {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

    .product-card__price .old {
      font-size: 12.5px;
      color: var(--muted-2);
      text-decoration: line-through;
    }

    .product-card__price .new {
      font-family: var(--ff-display);
      font-size: 21px;
      font-weight: 800;
      color: var(--ink);
    }

    .product-card__price .new.is-deal {
      color: var(--deal);
    }

    .wa-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 800;
      padding: 12px 16px;
      border-radius: 999px;
      background: linear-gradient(180deg, #34E27A, var(--wa));
      color: #073D24;
      white-space: nowrap;
      box-shadow: 0 10px 20px -8px rgba(37, 211, 102, .5);
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .wa-btn:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 16px 28px -10px rgba(37, 211, 102, .6);
    }

    .wa-btn svg {
      width: 16px;
      height: 16px;
    }

    @media (max-width: 620px) {
      .product-card__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }

      .wa-btn {
        justify-content: center;
      }
    }

    /* ============================================================
   WHY US
============================================================ */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .why-item {
      background: var(--bg);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-m);
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: transform .35s ease, box-shadow .35s ease;
    }

    .why-item:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-card-hover);
    }

    .why-item__icon {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--blue-soft);
      color: var(--blue);
    }

    .why-item:nth-child(odd) .why-item__icon {
      background: var(--brand-soft);
      color: var(--brand);
    }

    .why-item__icon svg {
      width: 24px;
      height: 24px;
    }

    .why-item h3 {
      font-size: 17px;
      font-weight: 700;
    }

    .why-item p {
      font-size: 14px;
      color: var(--muted);
    }

    @media (max-width: 980px) {
      .why-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    /* ============================================================
   PROCESS
============================================================ */
    .process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      position: relative;
    }

    .process__step {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-m);
      padding: 28px;
      box-shadow: var(--shadow-card);
      transition: transform .35s ease;
    }

    .process__step:hover {
      transform: translateY(-6px);
    }

    .process__num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--blue-mid));
      color: #fff;
      font-family: var(--ff-display);
      font-weight: 800;
      font-size: 17px;
      margin-bottom: 20px;
      box-shadow: 0 10px 20px -8px rgba(37,99,235,.5);
    }

    .process__step h3 {
      font-size: 16.5px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .process__step p {
      font-size: 14px;
      color: var(--muted);
    }

    @media (max-width: 880px) {
      .process {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    /* ============================================================
   OFERTAS / COUNTDOWN
============================================================ */
    .offers {
      background:
        radial-gradient(circle at 85% 0%, rgba(255, 122, 82, .2), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(214, 35, 42, .28), transparent 45%),
        var(--navy);
      color: #fff;
      border-radius: var(--radius-l);
      padding: clamp(36px, 5vw, 64px);
    }

    .offers .section-head h2 {
      color: #fff;
    }

    .offers .section-head p {
      color: #BCC4DC;
    }

    .offers .eyebrow {
      background: rgba(214, 35, 42, .3);
      color: #FF9B95;
    }

    .offers-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 40px;
    }

    .countdown {
      display: flex;
      gap: 10px;
    }

    .countdown__box {
      width: 70px;
      padding: 13px 0;
      text-align: center;
      border-radius: var(--radius-s);
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .12);
      backdrop-filter: blur(4px);
    }

    .countdown__box b {
      font-family: var(--ff-display);
      font-size: 24px;
      font-weight: 800;
      display: block;
      color: #F5B731;
    }

    .countdown__box span {
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #8E99AB;
      font-weight: 700;
    }

    .countdown-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #8E99AB;
      margin-bottom: 10px;
    }

    /* ============================================================
   OFFER TABS
============================================================ */
    .offer-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 28px;
    }

    .offer-tab {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: var(--radius-m);
      border: 1.5px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: #BCC4DC;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background .18s, border-color .18s, color .18s;
      text-align: left;
    }

    .offer-tab:hover {
      background: rgba(255,255,255,.11);
      border-color: rgba(255,255,255,.28);
      color: #fff;
    }

    .offer-tab.is-active {
      background: rgba(255,122,82,.16);
      border-color: rgba(255,122,82,.48);
      color: #fff;
    }

    .offer-tab__emoji { font-size: 17px; line-height: 1; }
    .offer-tab__name  { font-weight: 600; }
    .offer-tab__dates { font-size: 11px; opacity: .7; }

    .offer-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 50px;
      letter-spacing: .04em;
      white-space: nowrap;
    }

    .offer-badge--vigente {
      background: rgba(16,185,129,.18);
      color: #34D399;
      border: 1px solid rgba(16,185,129,.28);
    }

    .offer-badge--proxima {
      background: rgba(59,130,246,.18);
      color: #60A5FA;
      border: 1px solid rgba(59,130,246,.28);
    }

    /* ============================================================
   TESTIMONIALS
============================================================ */
    .tm-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .tm-card {
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-m);
      padding: 28px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: transform .35s ease, box-shadow .35s ease;
    }

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

    .tm-card__stars {
      display: flex;
      gap: 4px;
      color: #FFB300;
    }

    .tm-card__stars svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }

    .tm-card p {
      font-size: 15px;
      color: var(--ink);
    }

    .tm-card__who {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }

    .tm-card__avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-display);
      font-weight: 800;
      font-size: 15px;
      color: #fff;
    }

    .tm-card__who b {
      font-size: 14px;
      display: block;
    }

    .tm-card__who span {
      font-size: 12.5px;
      color: var(--muted);
    }

    .tm-card__verified {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--wa-dark);
      background: var(--wa-soft);
      padding: 5px 10px;
      border-radius: 999px;
      align-self: flex-start;
    }

    .tm-card__verified svg {
      width: 13px;
      height: 13px;
    }

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

    /* ============================================================
   FAQ
============================================================ */
    .faq-list {
      max-width: 760px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .faq-item {
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-s);
      box-shadow: var(--shadow-card);
      overflow: hidden;
      transition: border-color .25s ease;
    }

    .faq-item.is-open {
      border-color: var(--brand);
    }

    .faq-q {
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 24px;
      font-family: var(--ff-display);
      font-size: 16.5px;
      font-weight: 700;
    }

    .faq-q .faq-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--brand-soft);
      color: var(--brand);
      transition: transform .35s ease, background .25s ease, color .25s ease;
    }

    .faq-q .faq-icon svg {
      width: 17px;
      height: 17px;
    }

    .faq-item.is-open .faq-q .faq-icon {
      transform: rotate(45deg);
      background: var(--brand);
      color: #fff;
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease;
    }

    .faq-a__inner {
      padding: 0 24px 24px;
      color: var(--muted);
      font-size: 15px;
      max-width: 640px;
    }

    .faq-item.is-open .faq-a {
      max-height: 260px;
    }

    /* ============================================================
   FINAL CTA
============================================================ */
    .final-cta {
      text-align: center;
      border-radius: var(--radius-l);
      padding: clamp(48px, 8vw, 92px) 24px;
      background:
        radial-gradient(circle at 50% -20%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(120deg, #1E40AF 0%, #2563EB 40%, #4F46E5 100%);
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 40px 80px -35px rgba(37,99,235,.5);
    }

    .final-cta h2 {
      font-size: clamp(30px, 5vw, 50px);
      font-weight: 800;
      max-width: 740px;
      margin: 0 auto 18px;
    }

    .final-cta p {
      color: rgba(255, 255, 255, .88);
      font-size: 17px;
      max-width: 520px;
      margin: 0 auto 36px;
    }

    .final-cta__actions {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .final-cta .btn--wa {
      background: #fff;
      color: var(--wa-dark);
      box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .3);
    }

    .final-cta .btn--wa:hover {
      transform: translateY(-3px);
    }

    .final-cta .btn--outline {
      background: transparent;
      color: #fff;
      border-color: rgba(255, 255, 255, .5);
    }

    .final-cta .btn--outline:hover {
      border-color: #fff;
      transform: translateY(-3px);
    }

    /* ============================================================
   FOOTER
============================================================ */
    .footer {
      background: linear-gradient(160deg, #080C18 0%, #0B1230 55%, #110820 100%);
      color: #C7CFDB;
      padding: 64px 0 32px;
      position: relative;
      z-index: 1;
      margin-top: var(--section-y);
      border-top: 1px solid rgba(59,130,246,.15);
    }

    .footer__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .footer__brand strong {
      font-family: var(--ff-display);
      font-size: 20px;
      color: #fff;
      font-weight: 800;
    }

    .footer__brand p {
      margin-top: 14px;
      font-size: 13.5px;
      color: #9AA5B5;
      max-width: 280px;
    }

    .footer__brand .ruc {
      margin-top: 16px;
      font-family: var(--ff-mono);
      font-size: 11.5px;
      color: #7E899B;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .footer h4 {
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #7E899B;
      margin-bottom: 18px;
      font-weight: 700;
    }

    .footer ul {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer ul a {
      font-size: 14px;
      color: #C7CFDB;
      transition: color .2s ease;
    }

    .footer ul a:hover {
      color: #FF9B95;
    }

    /* Libro de Reclamaciones — banner destacado */
    .footer__libro {
      padding: 22px 0;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .libro-badge {
      display: flex;
      align-items: center;
      gap: 18px;
      background: rgba(239,68,68,.07);
      border: 1.5px solid rgba(239,68,68,.22);
      border-radius: 16px;
      padding: 18px 24px;
      transition: background .2s, border-color .2s, transform .25s;
    }
    .libro-badge:hover {
      background: rgba(239,68,68,.13);
      border-color: rgba(239,68,68,.45);
      transform: translateY(-2px);
    }
    .libro-badge__icon {
      width: 48px; height: 48px;
      border-radius: 12px;
      background: rgba(239,68,68,.13);
      border: 1.5px solid rgba(239,68,68,.28);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #FCA5A5;
    }
    .libro-badge__icon svg { width: 22px; height: 22px; }
    .libro-badge__text { flex: 1; }
    .libro-badge__text strong {
      display: block;
      font-family: var(--ff-display);
      font-size: 15.5px;
      font-weight: 700;
      color: #FCA5A5;
      margin-bottom: 4px;
    }
    .libro-badge__text span { font-size: 12.5px; color: #9AA5B5; }
    .libro-badge__arrow { color: #F87171; flex-shrink: 0; opacity: .75; }
    .libro-badge__arrow svg { width: 20px; height: 20px; }

    .footer__bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      padding-top: 28px;
      font-size: 12.5px;
      color: #7E899B;
    }

    .footer__social {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .footer__social a {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.18);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
      color: #C7CFDB;
      text-decoration: none;
    }

    .footer__social a.soc--fb { color: #1877F2; border-color: rgba(24,119,242,.4); }
    .footer__social a.soc--ig { color: #E1306C; border-color: rgba(225,48,108,.4); }
    .footer__social a.soc--tt { color: #fff; border-color: rgba(255,255,255,.3); }
    .footer__social a.soc--yt { color: #FF0000; border-color: rgba(255,0,0,.4); }

    .footer__social a:hover { transform: translateY(-3px); }
    .footer__social a.soc--fb:hover { background: rgba(24,119,242,.15); box-shadow: 0 4px 16px rgba(24,119,242,.35); }
    .footer__social a.soc--ig:hover { background: rgba(225,48,108,.15); box-shadow: 0 4px 16px rgba(225,48,108,.35); }
    .footer__social a.soc--tt:hover { background: rgba(255,255,255,.1); box-shadow: 0 4px 16px rgba(255,255,255,.2); }
    .footer__social a.soc--yt:hover { background: rgba(255,0,0,.15); box-shadow: 0 4px 16px rgba(255,0,0,.35); }

    @media (max-width: 880px) {
      .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
      }
    }

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

    /* ============================================================
   FLOATING WHATSAPP
============================================================ */
    .wa-float {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 60;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 15px 22px 15px 17px;
      border-radius: 999px;
      background: linear-gradient(180deg, #34E27A, var(--wa));
      color: #073D24;
      font-weight: 800;
      font-size: 14.5px;
      box-shadow: 0 14px 34px -8px rgba(37, 211, 102, .6);
      animation: wa-pulse 2.6s infinite;
      transition: transform .3s ease;
    }

    .wa-float:hover {
      transform: scale(1.05);
    }

    .wa-float svg {
      width: 24px;
      height: 24px;
    }

    @keyframes wa-pulse {
      0% {
        box-shadow: 0 14px 34px -8px rgba(37, 211, 102, .6), 0 0 0 0 rgba(37, 211, 102, .45);
      }

      70% {
        box-shadow: 0 14px 34px -8px rgba(37, 211, 102, .6), 0 0 0 16px rgba(37, 211, 102, 0);
      }

      100% {
        box-shadow: 0 14px 34px -8px rgba(37, 211, 102, .6), 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }

    @media (max-width: 520px) {
      .wa-float span {
        display: none;
      }

      .wa-float {
        padding: 16px;
      }
    }

    /* ============================================================
   SCROLL REVEAL
============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ============================================================
   MODAL DETALLE PRODUCTO
============================================================ */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(10, 20, 40, .62);
      backdrop-filter: blur(7px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }

    .modal-overlay.is-open {
      opacity: 1;
      pointer-events: all;
    }

    .modal {
      background: var(--surface);
      border-radius: var(--radius-l);
      max-width: 800px;
      width: 100%;
      max-height: 92vh;
      overflow-y: auto;
      box-shadow: 0 40px 80px -20px rgba(10, 20, 40, .45);
      transform: translateY(28px) scale(.96);
      transition: transform .38s cubic-bezier(.16, 1, .3, 1);
      scrollbar-width: none;
    }

    .modal::-webkit-scrollbar {
      display: none;
    }

    .modal-overlay.is-open .modal {
      transform: translateY(0) scale(1);
    }

    .modal__header {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 28px;
      background: var(--surface);
      border-bottom: 1px solid var(--border-soft);
      gap: 12px;
    }

    .modal__header-info {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .modal__cat-badge {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .09em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .modal__id {
      font-family: var(--ff-mono);
      font-size: 12px;
      color: var(--muted-2);
    }

    .modal__close {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--bg-soft);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .2s ease;
    }

    .modal__close:hover {
      background: var(--brand-soft);
      border-color: var(--brand);
      color: var(--brand);
    }

    .modal__close svg {
      width: 17px;
      height: 17px;
    }

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

    .modal__image-wrap {
      background: var(--bg-soft);
      border-right: 1px solid var(--border-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 36px;
      min-height: 320px;
      position: relative;
    }

    .modal__img {
      width: 100%;
      max-height: 300px;
      object-fit: contain;
      border-radius: var(--radius-s);
    }

    .modal__discount-stamp {
      position: absolute;
      top: 14px;
      left: 14px;
      background: linear-gradient(135deg, #F5B731, #D4960E);
      color: #0A0600;
      border-radius: 10px;
      padding: 8px 13px;
      font-family: var(--ff-display);
      font-weight: 800;
      font-size: 18px;
      box-shadow: 0 8px 18px -6px rgba(245,183,49,.45);
    }

    .modal__info {
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .modal__title {
      font-size: clamp(18px, 2.8vw, 24px);
      font-weight: 800;
      line-height: 1.2;
    }

    .modal__price-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 16px 18px;
      background: var(--bg-soft);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-s);
    }

    .modal__price-old {
      font-size: 13px;
      color: var(--muted-2);
      text-decoration: line-through;
    }

    .modal__price-new {
      font-family: var(--ff-display);
      font-size: 30px;
      font-weight: 800;
    }

    .modal__price-new.is-deal {
      color: var(--deal);
    }

    .modal__savings-badge {
      margin-left: auto;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--wa-dark);
      background: var(--wa-soft);
      padding: 4px 11px;
      border-radius: 999px;
    }

    .modal__wa-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px;
      border-radius: 999px;
      background: linear-gradient(180deg, #34E27A, var(--wa));
      color: #073D24;
      font-weight: 800;
      font-size: 15px;
      margin-top: auto;
      box-shadow: 0 14px 28px -10px rgba(37, 211, 102, .55);
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .modal__wa-link:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 38px -12px rgba(37, 211, 102, .65);
    }

    .modal__wa-link svg {
      width: 19px;
      height: 19px;
    }

    .modal__meta-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

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

    .modal__stars-icons {
      display: flex;
      gap: 1px;
    }

    .modal__star {
      width: 15px;
      height: 15px;
      color: #FACC15;
    }

    .modal__star--empty {
      color: var(--border);
    }

    .modal__star--half {
      position: relative;
      display: inline-flex;
    }

    .modal__rating-val {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      margin-left: 2px;
    }

    .modal__bestseller {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(245,183,49,.18);
      border: 1px solid rgba(245,183,49,.3);
      color: #F5B731;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 4px 11px;
      border-radius: 999px;
    }

    .modal__bestseller svg {
      width: 12px;
      height: 12px;
    }

    .modal__spec-text {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
      padding: 14px 16px;
      background: var(--bg-soft);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-s);
    }

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

      .modal__image-wrap {
        border-right: none;
        border-bottom: 1px solid var(--border-soft);
        min-height: 210px;
        padding: 24px;
      }

      .modal__info {
        padding: 24px;
      }
    }

    /* ============================================================
   SECCIÓN CATÁLOGOS
============================================================ */
    .catalog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
      gap: 22px;
    }

    .catalog-card {
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-m);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      cursor: pointer;
      transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
    }

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

    .catalog-card__header {
      padding: 32px 28px 26px;
      position: relative;
      overflow: hidden;
    }

    .catalog-card__header::after {
      content: "";
      position: absolute;
      right: -28px;
      top: -28px;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .14);
    }

    .catalog-card__emoji {
      font-size: 38px;
      display: block;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }

    .catalog-card__name {
      font-family: var(--ff-display);
      font-size: 21px;
      font-weight: 800;
      color: #fff;
      position: relative;
      z-index: 1;
    }

    .catalog-card__pcount {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .82);
      margin-top: 5px;
      position: relative;
      z-index: 1;
    }

    .catalog-card__body {
      padding: 20px 28px 26px;
    }

    .catalog-card__desc {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
      margin-bottom: 16px;
    }

    .catalog-card__cta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 14px;
      font-weight: 700;
    }

    .catalog-card__cta svg {
      width: 15px;
      height: 15px;
      transition: transform .25s ease;
    }

    .catalog-card:hover .catalog-card__cta svg {
      transform: translateX(5px);
    }

    /* ============================================================
   VISOR DE CATÁLOGO
============================================================ */
    .catalog-viewer {
      position: fixed;
      inset: 0;
      z-index: 150;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }

    .catalog-viewer.is-open {
      opacity: 1;
      pointer-events: all;
    }

    .catalog-viewer__bar {
      background: var(--surface);
      border-bottom: 1px solid var(--border-soft);
      padding: 0 24px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-shrink: 0;
      box-shadow: var(--shadow-card);
      position: relative;
      z-index: 2;
    }

    .catalog-viewer__title {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .catalog-viewer__title-emoji {
      font-size: 26px;
      flex-shrink: 0;
    }

    .catalog-viewer__title h2 {
      font-size: 19px;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .catalog-viewer__actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .catalog-viewer__dl {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 13.5px;
      font-weight: 700;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      cursor: pointer;
      transition: all .25s ease;
      white-space: nowrap;
    }

    .catalog-viewer__dl:disabled {
      opacity: .65;
      cursor: not-allowed;
    }

    .catalog-viewer__dl:not(:disabled):hover {
      border-color: var(--brand);
      color: var(--brand);
    }

    .catalog-viewer__dl svg {
      width: 15px;
      height: 15px;
    }

    .catalog-viewer__dl--pdf {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }

    .catalog-viewer__dl--pdf:not(:disabled):hover {
      background: var(--brand-dark);
      border-color: var(--brand-dark);
      color: #fff;
    }

    .catalog-viewer__dl--link {
      background: #10B981;
      color: #fff;
      border-color: #10B981;
    }

    .catalog-viewer__dl--link:not(:disabled):hover {
      background: #059669;
      border-color: #059669;
      color: #fff;
    }

    .catalog-viewer__close {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--bg-soft);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .2s ease;
      flex-shrink: 0;
    }

    .catalog-viewer__close:hover {
      background: var(--brand-soft);
      border-color: var(--brand);
      color: var(--brand);
    }

    .catalog-viewer__close svg {
      width: 18px;
      height: 18px;
    }

    .catalog-viewer__content {
      flex: 1;
      overflow-y: auto;
      padding: 40px 24px 60px;
    }

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

    .catalog-viewer__desc {
      color: var(--muted);
      font-size: 16px;
      margin-bottom: 36px;
    }

    /* ============================================================
   BANNER — Productos más vendidos (cinematic hero slider)
============================================================ */
    .pslider {
      position: relative;
      z-index: 1;
      overflow: hidden;
      min-height: 520px;
      background: #050810;
    }

    .pslider__viewport {
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    .pslider__track {
      display: flex;
      transition: transform .65s cubic-bezier(.25,.8,.25,1);
      will-change: transform;
    }

    .pslider__slide {
      position: relative;
      flex: 0 0 100%;
      min-height: 520px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .pslider__bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      filter: blur(24px) brightness(.32) saturate(.7);
      transform: scale(1.1);
      z-index: 0;
    }

    .pslider__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, rgba(5,8,16,.96) 0%, rgba(5,8,16,.78) 50%, rgba(5,8,16,.18) 100%);
      z-index: 1;
    }

    .pslider__slide::after {
      content: "";
      position: absolute;
      bottom: -120px; right: 10%;
      width: 480px; height: 480px;
      background: radial-gradient(circle, rgba(59,130,246,.12) 0%, transparent 70%);
      z-index: 1;
      pointer-events: none;
    }

    .pslider__content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 56px;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 24px 88px;
    }

    .pslider__info {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pslider__badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(245,183,49,.18);
      color: #F5B731;
      border: 1px solid rgba(245,183,49,.35);
      font-family: var(--ff-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 5px 13px;
      border-radius: 999px;
      width: fit-content;
    }

    .pslider__cat {
      font-family: var(--ff-mono);
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,.4);
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    .pslider__name {
      font-family: var(--ff-display);
      font-size: clamp(26px, 3.8vw, 52px);
      font-weight: 800;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.02em;
      margin: 0;
    }

    .pslider__spec {
      font-size: 14px;
      color: rgba(255,255,255,.52);
      line-height: 1.7;
      margin: 0;
    }

    .pslider__stars {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pslider__stars-icons {
      display: flex;
      gap: 2px;
    }

    .pslider__stars-val {
      font-family: var(--ff-mono);
      font-size: 12px;
      color: rgba(255,255,255,.45);
    }

    .pslider__price {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
    }

    .pslider__price b {
      font-family: var(--ff-display);
      font-size: clamp(32px, 4vw, 52px);
      font-weight: 800;
      color: #F5B731;
    }

    .pslider__price s {
      font-size: 17px;
      color: rgba(255,255,255,.28);
    }

    .pslider__price em {
      font-style: normal;
      font-size: 12.5px;
      font-weight: 700;
      color: #F5B731;
      background: rgba(245,183,49,.15);
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid rgba(245,183,49,.35);
    }

    .pslider__cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(180deg, #34D97A, #25D366);
      color: #fff;
      font-family: var(--ff-display);
      font-weight: 700;
      font-size: 14.5px;
      padding: 15px 26px;
      border-radius: 999px;
      width: fit-content;
      box-shadow: 0 14px 30px -10px rgba(37,211,102,.45);
      transition: transform .3s ease, box-shadow .3s ease;
      text-decoration: none;
      border: none;
      cursor: pointer;
    }

    .pslider__cta:hover {
      transform: translateY(-3px);
      box-shadow: 0 22px 44px -12px rgba(37,211,102,.6);
    }

    .pslider__cta svg { width: 17px; height: 17px; }

    .pslider__img-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .pslider__img-wrap::before {
      content: "";
      position: absolute;
      inset: -30px;
      background: radial-gradient(circle, rgba(59,130,246,.18) 0%, rgba(99,102,241,.1) 55%, transparent 72%);
      border-radius: 50%;
      animation: psliderGlow 4s ease-in-out infinite;
    }

    @keyframes psliderGlow {
      0%,100% { transform: scale(1); opacity: .65; }
      50% { transform: scale(1.14); opacity: 1; }
    }

    .pslider__img {
      width: 100%;
      max-width: 400px;
      aspect-ratio: 1/1;
      object-fit: contain;
      filter: drop-shadow(0 28px 56px rgba(0,0,0,.55));
      transition: transform .65s ease;
      position: relative;
      z-index: 1;
    }

    .pslider__slide:hover .pslider__img {
      transform: scale(1.05) translateY(-10px);
    }

    /* Floating nav buttons */
    .pslider__btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(10px);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .25s ease;
    }

    .pslider__btn:hover {
      background: var(--brand);
      border-color: var(--brand);
      box-shadow: 0 0 24px rgba(59,130,246,.5);
    }

    .pslider__btn--prev { left: 20px; }
    .pslider__btn--next { right: 20px; }
    .pslider__btn svg { width: 20px; height: 20px; pointer-events: none; }

    /* Top floating label */
    .pslider__head-label {
      position: absolute;
      top: 22px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(255,255,255,.05);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.75);
      font-family: var(--ff-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      padding: 8px 18px;
      border-radius: 999px;
      white-space: nowrap;
    }

    /* Bottom bar: dots + counter */
    .pslider__bottom {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 16px;
      white-space: nowrap;
    }

    .pslider__dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .pslider__dot {
      width: 6px;
      height: 6px;
      border-radius: 4px;
      background: rgba(255,255,255,.22);
      cursor: pointer;
      transition: all .3s ease;
    }

    .pslider__dot.is-active {
      background: var(--brand);
      width: 22px;
    }

    .pslider__counter {
      font-family: var(--ff-mono);
      font-size: 11px;
      color: rgba(255,255,255,.38);
    }

    /* Progress bar at bottom edge */
    .pslider__progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--brand), #818CF8);
      z-index: 10;
      transition: width .1s linear;
      box-shadow: 0 0 10px rgba(59,130,246,.6);
    }

    @media (max-width: 880px) {
      .pslider__content {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 50px 24px 80px;
      }
      .pslider__img-wrap { order: -1; }
      .pslider__img { max-width: 230px; }
    }

    @media (max-width: 520px) {
      .pslider { min-height: 600px; }
      .pslider__slide { min-height: 600px; }
      .pslider__btn { width: 38px; height: 38px; }
      .pslider__btn--prev { left: 8px; }
      .pslider__btn--next { right: 8px; }
      .pslider__img { max-width: 160px; }
      .pslider__cta { font-size: 13.5px; padding: 13px 20px; }
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .spin {
      animation: spin .9s linear infinite;
    }

    @media (max-width: 680px) {
      .catalog-viewer__bar {
        height: auto;
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 10px;
      }

      .catalog-viewer__dl span {
        display: none;
      }

      .catalog-viewer__dl {
        padding: 10px 14px;
      }
    }

    /* ============================================================
   BUSCADOR DE PRODUCTOS
============================================================ */
    .search-section {
      background: var(--bg-soft);
      padding: 14px 0;
      border-bottom: 1px solid var(--border-soft);
      position: relative;
      z-index: 45;
    }

    .search-anchor {
      position: relative;
      max-width: 720px;
      margin: 0 auto;
    }

    .search-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 999px;
      padding: 13px 20px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .search-wrap:focus-within {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-soft);
    }

    .search-icon {
      width: 18px;
      height: 18px;
      color: var(--muted);
      flex-shrink: 0;
      pointer-events: none;
    }

    .search-input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      font-size: 15px;
      color: var(--ink);
      font-family: var(--ff-body);
      min-width: 0;
    }

    .search-input::placeholder { color: var(--muted-2); }

    .search-clear {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid var(--border-soft);
      background: var(--bg);
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }

    .search-clear:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
    .search-clear svg { width: 14px; height: 14px; }

    .search-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-m);
      box-shadow: var(--shadow-card-hover);
      z-index: 200;
      max-height: 380px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }

    .search-dropdown::-webkit-scrollbar { width: 5px; }
    .search-dropdown::-webkit-scrollbar-track { background: transparent; }
    .search-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    .search-result {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 18px;
      cursor: pointer;
      border-bottom: 1px solid var(--border-soft);
      transition: background .12s ease;
    }

    .search-result:last-child { border-bottom: none; }
    .search-result:hover, .search-result.is-focused { background: var(--bg-soft); }

    .search-result__img {
      width: 52px;
      height: 52px;
      border-radius: 10px;
      object-fit: cover;
      flex-shrink: 0;
      border: 1px solid var(--border-soft);
      background: var(--bg);
    }

    .search-result__info {
      flex: 1;
      min-width: 0;
    }

    .search-result__name {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .search-result__spec {
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }

    .search-result__price {
      font-family: var(--ff-display);
      font-size: 15px;
      font-weight: 800;
      color: var(--brand);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .search-empty {
      padding: 28px 20px;
      text-align: center;
      color: var(--muted);
      font-size: 14px;
    }

    @media (max-width: 560px) {
      .search-result__img { width: 42px; height: 42px; }
      .search-result__spec { display: none; }
    }

    /* Buscador — fondo blanco */
    .search-section {
      background: #FFFFFF;
      border-bottom: 1px solid rgba(0,0,0,.09);
    }
    .search-section .search-wrap {
      background: #F1F5F9;
      border-color: rgba(0,0,0,.13);
    }
    .search-section .search-wrap:focus-within {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }
    .search-section .search-icon { color: #64748B; }
    .search-section .search-input { color: #0F172A; }
    .search-section .search-input::placeholder { color: #94A3B8; }
    .search-section .search-clear {
      background: #E2E8F0;
      border-color: rgba(0,0,0,.1);
      color: #475569;
    }
    .search-section .search-clear:hover {
      background: rgba(59,130,246,.1);
      border-color: var(--brand);
      color: var(--brand);
    }
    .search-section .search-dropdown {
      background: #FFFFFF;
      border-color: rgba(0,0,0,.1);
      box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
    }
    .search-section .search-result { border-bottom-color: rgba(0,0,0,.06); }
    .search-section .search-result:hover,
    .search-section .search-result.is-focused { background: #F0F7FF; }
    .search-section .search-result__img {
      border-color: rgba(0,0,0,.07);
      background: #F1F5F9;
    }
    .search-section .search-result__name { color: #0F172A; }
    .search-section .search-result__spec { color: #64748B; }
    .search-section .search-empty { color: #64748B; }

    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }