@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2'); }

      :root {
        color-scheme: dark;
        --bg: #101216;
        --bg-deep: #0b0d10;
        --surface: #161a22;
        --surface-2: #1e232e;
        --surface-3: #262d3b;
        --glass: rgba(22, 26, 34, 0.72);
        --glass-strong: rgba(16, 18, 22, 0.88);
        --ink: #f5f7fa;
        --ink-soft: #c4ccd9;
        --ink-muted: #94a0b4;
        --line: rgba(255, 255, 255, 0.09);
        --line-strong: rgba(255, 255, 255, 0.17);
        --accent: #e8490f;
        --accent-light: #ff6a2b;
        --accent-dark: #c93b08;
        --accent-glow: rgba(232, 73, 15, 0.32);
        --accent-soft: rgba(232, 73, 15, 0.15);
        --wa: #1fae55;
        --wa-dark: #168a43;
        --wa-glow: rgba(31, 174, 85, 0.28);
        --emerald: #2ecc71;
        --amber: #f59e0b;
        --header-bg: rgba(16, 18, 22, 0.84);
        --header-ink: #f5f7fa;
        --header-soft: #c4ccd9;
        /* Podio escénico integrado al tema oscuro: centro iluminado para preservar color real de la moto (con mix-blend-mode: multiply el fondo #fff de cada .webp se funde con este podio y desaparece en las esquinas oscuras) */
        --stage-bg: radial-gradient(ellipse 92% 90% at 50% 46%, #ffffff 0%, #f5f8fb 62%, #e9eef4 100%);
        --shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 28px 68px rgba(0, 0, 0, 0.72), 0 6px 20px rgba(0, 0, 0, 0.45);
        --radius-sm: 10px;
        --radius-md: 16px;
        --radius-lg: 24px;
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
        --dur-rapido: 160ms;
        --dur-medio: 220ms;
        --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
        --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
      body {
        margin: 0;
        background-color: var(--bg);
        background-image:
          radial-gradient(ellipse 85% 50% at 50% -8%, rgba(232, 73, 15, 0.16), transparent 65%),
          radial-gradient(ellipse 60% 40% at 90% 25%, rgba(255, 106, 43, 0.07), transparent 60%);
        background-attachment: fixed;
        color: var(--ink);
        font-family: "Barlow", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        font-size: 16px;
        line-height: 1.5;
        overflow-x: clip;
      }
      [hidden] { display: none !important; }

      /* ---------- B. Encabezado Despejado (Punto 5) ---------- */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 45;
        background: var(--header-bg);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        color: var(--header-ink);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.42);
      }
      .header-inner {
        max-width: 1240px;
        margin: 0 auto;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .brand-lockup {
        display: flex;
        align-items: center;
        gap: 14px;
        text-decoration: none;
        color: inherit;
        flex: none;
      }
      .logo {
        height: 36px;
        width: 144px;
        object-fit: contain;
        display: block;
        flex: none;
        filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
      }
      .brand-divider {
        width: 1px;
        height: 28px;
        background: var(--line-strong);
      }
      .header-place {
        display: flex;
        flex-direction: column;
        gap: 1px;
      }
      .header-place .place {
        font-size: 0.84rem;
        color: #fff;
        font-weight: 700;
        line-height: 1.2;
      }
      .header-place .sub {
        font-size: 0.76rem;
        color: var(--ink-soft);
        line-height: 1.2;
      }
      .header-nav {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .nav-link {
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--ink-soft);
        text-decoration: none;
        transition: color 0.16s ease, background 0.16s ease;
        white-space: nowrap;
      }
      .nav-link:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.07);
      }
      .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: none;
      }
      .btn-credit-head {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.07);
        color: var(--ink);
        border: 1px solid var(--line-strong);
        font-family: inherit;
        font-weight: 600;
        font-size: 0.88rem;
        padding: 9px 16px;
        border-radius: 999px;
        cursor: pointer;
        transition: transform 0.18s var(--ease-out), background 0.18s ease, border-color 0.18s ease;
        white-space: nowrap;
      }
      .btn-credit-head:hover {
        background: rgba(232, 73, 15, 0.18);
        border-color: var(--accent-light);
        transform: translateY(-1px);
      }
      .btn-wa-head {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: linear-gradient(135deg, #22c35e 0%, #168a43 100%);
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.88rem;
        padding: 9px 17px;
        border-radius: 999px;
        box-shadow: 0 4px 16px var(--wa-glow);
        transition: transform 0.18s var(--ease-out), filter 0.18s ease;
        white-space: nowrap;
      }
      .btn-wa-head:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
      }
      .btn-wa-head svg { width: 16px; height: 16px; flex: none; }

      /* ---------- A. Hero Showroom Digital con Profundidad Real (Puntos 1–4) ---------- */
      .hero-wrap {
        max-width: 1240px;
        margin: 0 auto;
        padding: 18px 20px 0;
      }
      .hero-cover {
        position: relative;
        border-radius: var(--radius-lg);
        overflow: hidden;
        background:
          radial-gradient(circle at 22% 28%, rgba(232, 73, 15, 0.34) 0%, transparent 45%),
          radial-gradient(circle at 78% 60%, rgba(255, 106, 43, 0.26) 0%, transparent 50%),
          linear-gradient(135deg, #151923 0%, #0d1016 55%, #131720 100%);
        border: 1px solid var(--line-strong);
        box-shadow: var(--shadow-lg);
        padding: 28px;
      }
      /* Luces ambientales y video de fondo con viñeta cinematográfica para que el cristal se perciba claramente */
      .hero-ambient {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
      }
      .hero-ambient-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 35%;
        opacity: 0.36;
        filter: saturate(1.2) contrast(1.1);
      }
      .hero-ambient-glow-1 {
        position: absolute;
        top: -80px;
        left: 12%;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(232, 73, 15, 0.42) 0%, transparent 70%);
        filter: blur(28px);
      }
      .hero-ambient-glow-2 {
        position: absolute;
        bottom: -90px;
        right: 10%;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 106, 43, 0.35) 0%, transparent 70%);
        filter: blur(32px);
      }
      .hero-ambient-vignette {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse 90% 85% at 50% 50%, transparent 30%, rgba(11, 13, 18, 0.82) 100%),
          linear-gradient(90deg, rgba(13, 16, 22, 0.78) 0%, rgba(13, 16, 22, 0.35) 55%, rgba(13, 16, 22, 0.65) 100%);
      }
      .hero-grid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1.12fr 0.88fr;
        gap: 26px;
        align-items: center;
      }
      /* Consola Glassmorphism con refracción evidente sobre las luces ambientales */
      .hero-glass-panel {
        background: rgba(22, 26, 36, 0.62);
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-top-color: rgba(255, 255, 255, 0.28);
        border-radius: 20px;
        padding: 30px 30px 26px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .hero-cover-eyebrow {
        margin: 0;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(232, 73, 15, 0.18);
        border: 1px solid rgba(255, 106, 43, 0.42);
        color: #ff9d73;
        font-size: 0.84rem;
        font-weight: 600;
        letter-spacing: 0.02em;
      }
      .hero-cover-eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent-light);
        box-shadow: 0 0 10px var(--accent-light);
      }
      .hero-cover-title {
        margin: 0;
        font-family: "Barlow Condensed", sans-serif;
        color: #ffffff;
        font-size: clamp(2.15rem, 4.2vw, 3.35rem);
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.03;
      }
      .hero-cover-title strong {
        font-weight: 800;
        color: var(--accent-light);
      }
      .hero-cover-sub {
        margin: 0;
        color: var(--ink-soft);
        font-size: clamp(0.98rem, 1.35vw, 1.08rem);
        line-height: 1.52;
        max-width: 580px;
      }
      /* Punto 1: Una sola acción principal y máximo una secundaria */
      .hero-cover-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 4px;
      }
      .hero-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 13px 24px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.98rem;
        text-decoration: none;
        transition: transform 0.18s var(--ease-out), box-shadow 0.18s ease, background 0.18s ease;
      }
      .hero-btn:hover { transform: translateY(-2px); }
      .hero-btn-primary {
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        box-shadow: 0 10px 26px var(--accent-glow);
      }
      .hero-btn-ghost {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.24);
      }
      .hero-btn-ghost:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.45);
      }
      .hero-trust-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 6px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
      }
      .hero-trust-item strong {
        display: block;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.12rem;
        font-weight: 700;
        color: #fff;
      }
      .hero-trust-item span {
        font-size: 0.82rem;
        color: var(--ink-soft);
      }

      /* Punto 3: Escenario de la moto integrada con podio, sombra de piso y reflejo (sin franja vacía superior) */
      .hero-stage-card {
        position: relative;
        background:
          radial-gradient(ellipse 92% 90% at 50% 46%, #ffffff 0%, #f5f8fb 62%, #e9eef4 100%);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding: 22px 20px 18px;
        min-height: 330px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        overflow: hidden;
      }
      .hero-stage-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        z-index: 3;
      }
      .hero-stage-badge {
        background: rgba(16, 18, 22, 0.84);
        backdrop-filter: blur(10px);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.18);
        font-size: 0.78rem;
        font-weight: 600;
        padding: 5px 12px;
        border-radius: 999px;
      }
      .hero-stage-badge strong { color: var(--accent-light); }
      .hero-stage-figure {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0 12px;
      }
      .hero-stage-figure::after {
        content: "";
        position: absolute;
        bottom: 6px;
        left: 14%;
        right: 14%;
        height: 22px;
        border-radius: 50%;
        background: radial-gradient(ellipse at center, rgba(10, 12, 16, 0.55) 0%, rgba(10, 12, 16, 0.22) 55%, transparent 80%);
        filter: blur(4px);
        z-index: 1;
      }
      .hero-stage-bike {
        width: 100%;
        max-width: 390px;
        max-height: 230px;
        object-fit: contain;
        mix-blend-mode: multiply;
        display: block;
      }
      .hero-stage-foot {
        position: relative;
        z-index: 3;
        background: rgba(16, 18, 22, 0.86);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 12px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .hero-stage-foot-info strong {
        display: block;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.15rem;
        color: #fff;
      }
      .hero-stage-foot-info span {
        font-size: 0.8rem;
        color: var(--ink-soft);
      }
      .hero-stage-foot-link {
        color: var(--accent-light);
        font-size: 0.85rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
      }

      /* ---------- C. Navegación por Estilo de Vida (Punto 6) ---------- */
      .lifestyle-section {
        max-width: 1240px;
        margin: 30px auto 0;
        padding: 0 20px;
      }
      .section-header-bar {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 16px;
      }
      /* Punto 28: Sin exceso de mayúsculas sostenidas y alto contraste */
      .section-eyebrow {
        margin: 0 0 4px;
        font-size: 0.86rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--accent-light);
      }
      .section-title {
        margin: 0;
        font-family: "Barlow Condensed", sans-serif;
        font-size: clamp(1.75rem, 3vw, 2.25rem);
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.06;
        color: #fff;
      }
      .section-sub {
        margin: 5px 0 0;
        font-size: 0.96rem;
        color: var(--ink-soft);
        max-width: 690px;
      }
      .lifestyle-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 14px;
      }
      .lifestyle-card {
        grid-column: span 4;
        position: relative;
        background: linear-gradient(160deg, #1b202b 0%, #141720 100%);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-md);
        padding: 18px;
        color: var(--ink);
        text-align: left;
        font-family: inherit;
        cursor: pointer;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
        gap: 12px;
        min-height: 204px;
        box-shadow: var(--shadow);
        transition: transform 0.22s var(--ease-out), border-color 0.22s ease, box-shadow 0.22s ease;
      }
      .lifestyle-card.protagonist {
        grid-column: span 6;
        min-height: 222px;
        background:
          radial-gradient(circle at 85% 20%, rgba(232, 73, 15, 0.2), transparent 55%),
          linear-gradient(160deg, #202634 0%, #141821 100%);
        border-color: rgba(255, 106, 43, 0.35);
      }
      .lifestyle-card:hover,
      .lifestyle-card:focus-visible {
        transform: translateY(-3px);
        border-color: var(--accent-light);
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 106, 43, 0.35);
        outline: none;
      }
      .lifestyle-card[aria-pressed="true"] {
        border-color: var(--accent-light);
        box-shadow: 0 0 0 2px var(--accent), var(--shadow);
      }
      .lf-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        z-index: 2;
      }
      .lf-tag {
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        font-weight: 600;
        color: #ff9d73;
        background: rgba(232, 73, 15, 0.16);
        border: 1px solid rgba(232, 73, 15, 0.34);
        padding: 3px 10px;
        border-radius: 999px;
        margin-bottom: 8px;
      }
      .lf-title {
        margin: 0;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.06;
        color: #fff;
      }
      .lifestyle-card.protagonist .lf-title {
        font-size: 1.75rem;
      }
      .lf-desc {
        margin: 6px 0 0;
        font-size: 0.88rem;
        color: var(--ink-soft);
        line-height: 1.4;
      }
      .lf-bottom {
        margin-top: 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }
      .lf-cta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.82rem;
        font-weight: 700;
        color: #fff;
        background: rgba(255, 255, 255, 0.09);
        border: 1px solid rgba(255, 255, 255, 0.18);
        padding: 6px 12px;
        border-radius: 999px;
        transition: background 0.18s ease, border-color 0.18s ease;
      }
      .lifestyle-card:hover .lf-cta {
        background: var(--accent);
        border-color: var(--accent);
      }
      .lf-count {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--ink-soft);
      }
      /* Podio escénico unificado para las 5 tarjetas de Estilo de Vida */
      .lf-visual {
        position: relative;
        width: 100%;
        height: 162px;
        background: var(--stage-bg);
        border-radius: 14px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.42);
        overflow: hidden;
      }
      .lf-visual::after {
        content: "";
        position: absolute;
        bottom: 8px;
        left: 16%;
        right: 16%;
        height: 14px;
        border-radius: 50%;
        background: radial-gradient(ellipse at center, rgba(10, 12, 16, 0.42) 0%, transparent 75%);
        z-index: 1;
      }
      .lf-visual img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        mix-blend-mode: multiply;
        filter: contrast(1.08) saturate(1.08);
        transition: transform 0.24s var(--ease-out);
      }
      .lifestyle-card:hover .lf-visual img {
        transform: scale(1.06);
      }

      /* ---------- D. Carrusel Productos Nuevos Completo (Punto 8) ---------- */
      .news-section {
        max-width: 1240px;
        margin: 30px auto 0;
        padding: 0 20px;
      }
      .news-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
      }
      .news-head h2,
      .offers-head h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: clamp(1.7rem, 2.8vw, 2.15rem);
        letter-spacing: 0.01em;
        margin: 0;
        color: #fff;
      }
      .news-nav { display: flex; gap: 8px; }
      .news-nav button {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid var(--line-strong);
        background: var(--surface);
        color: #fff;
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
        transition: background 0.16s ease, border-color 0.16s ease;
      }
      .news-nav button:hover {
        border-color: var(--accent-light);
        background: var(--surface-2);
      }
      .news-track {
        display: grid;
        grid-template-columns: repeat(6, minmax(220px, 1fr));
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        scrollbar-width: thin;
      }
      .news-card {
        scroll-snap-align: start;
        background: linear-gradient(180deg, var(--surface) 0%, #13161d 100%);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow);
        cursor: pointer;
        text-align: left;
        padding: 0;
        color: var(--ink);
        font-family: inherit;
        display: flex;
        flex-direction: column;
        transition: transform 0.2s var(--ease-out), border-color 0.2s ease;
      }
      .news-card:hover {
        border-color: var(--accent-light);
        transform: translateY(-3px);
      }
      .news-card .news-photo {
        display: flex;
        width: 100%;
        height: 168px;
        padding: 14px;
        background: var(--stage-bg);
      }
      .news-card .card-body {
        display: flex;
        flex-direction: column;
        padding: 14px 16px 16px;
        flex: 1;
        width: 100%;
      }
      .news-card .card-brand {
        display: block;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--accent-light);
      }
      .news-card .card-model {
        display: block;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.42rem;
        font-weight: 700;
        color: #fff;
        margin: 3px 0 2px;
        line-height: 1.08;
      }
      .news-card .card-cat {
        display: block;
        font-size: 0.84rem;
        color: var(--ink-soft);
        margin-bottom: 10px;
      }
      .news-card .news-price-block {
        margin-top: auto;
        padding-top: 10px;
        border-top: 1px solid var(--line);
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 6px;
      }
      .news-card .price { font-size: 1.6rem; }

      /* ---------- E.14 Ofertas y Liquidación con Diferenciación Visual ---------- */
      .offers-section {
        max-width: 1240px;
        margin: 28px auto 0;
        padding: 0 20px;
      }
      .offers-showcase {
        background:
          radial-gradient(circle at 92% 12%, rgba(245, 158, 11, 0.16), transparent 48%),
          radial-gradient(circle at 8% 88%, rgba(232, 73, 15, 0.16), transparent 50%),
          linear-gradient(180deg, rgba(28, 32, 43, 0.92) 0%, rgba(19, 22, 30, 0.96) 100%);
        border: 1px solid rgba(245, 158, 11, 0.38);
        border-radius: var(--radius-lg);
        padding: 24px;
        box-shadow: var(--shadow);
      }
      .offers-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 16px;
      }
      .offers-pill-banner {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(245, 158, 11, 0.15);
        color: #fbbf24;
        border: 1px solid rgba(245, 158, 11, 0.42);
        padding: 6px 14px;
        border-radius: 999px;
        font-size: 0.84rem;
        font-weight: 700;
      }
      .offers-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        align-items: stretch;
      }
      .offers-grid .card {
        border-color: rgba(245, 158, 11, 0.42);
        background: linear-gradient(180deg, #1d212c 0%, #151821 100%);
      }
      .offer-callout {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(245, 158, 11, 0.14);
        color: #fbbf24;
        border: 1px solid rgba(245, 158, 11, 0.35);
        font-size: 0.78rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 8px;
        margin-top: 4px;
      }

      /* ---------- Barra de Marcas Oficiales ---------- */
      .brand-bar {
        max-width: 1240px;
        margin: 30px auto 0;
        padding: 12px 20px 6px;
      }
      .brand-bar-label {
        font-size: 0.88rem;
        color: var(--accent-light);
        font-weight: 700;
        margin: 0 0 10px;
      }
      .brand-tiles {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .brand-tile {
        flex: 1 1 104px;
        min-width: 96px;
        height: 64px;
        padding: 5px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: var(--surface);
        color: var(--ink);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.16s var(--ease-out), border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
      }
      .brand-tile:hover {
        border-color: var(--line-strong);
        background: var(--surface-2);
        transform: translateY(-2px);
      }
      .brand-tile[aria-pressed="true"] {
        border-color: var(--accent-light);
        background: linear-gradient(180deg, rgba(232, 73, 15, 0.24) 0%, rgba(232, 73, 15, 0.08) 100%);
        box-shadow: 0 0 0 1px var(--accent), 0 8px 20px rgba(232, 73, 15, 0.2);
      }
      .brand-tile img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        background: #ffffff;
        padding: 4px 10px;
        border-radius: 8px;
        box-sizing: border-box;
      }
      .brand-tile .brand-name {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
      }
      .brand-tile .brand-name.all {
        font-family: "Barlow", sans-serif;
        font-size: 0.88rem;
      }

      /* ---------- Buscador y Chips de Categorías ---------- */
      .toolbar {
        max-width: 1240px;
        margin: 0 auto;
        padding: 12px 20px 8px;
      }
      .toolbar-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
      }
      .search {
        flex: 1 1 280px;
        position: relative;
      }
      .search input {
        width: 100%;
        padding: 13px 16px 13px 44px;
        border: 1px solid var(--line-strong);
        border-radius: 12px;
        background: var(--surface);
        color: var(--ink);
        font-family: inherit;
        font-size: 1rem;
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
      }
      .search input::placeholder { color: var(--ink-muted); }
      .search input:focus {
        outline: none;
        border-color: var(--accent-light);
        box-shadow: 0 0 0 3px var(--accent-soft), inset 0 2px 6px rgba(0, 0, 0, 0.35);
      }
      .search svg {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 19px;
        height: 19px;
        color: var(--ink-soft);
        pointer-events: none;
      }
      .chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 12px;
      }
      .chip {
        border: 1px solid var(--line);
        background: var(--surface);
        color: var(--ink-soft);
        padding: 8px 15px;
        border-radius: 999px;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.16s var(--ease-out), border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
      }
      .chip:hover {
        border-color: var(--line-strong);
        color: #fff;
        background: var(--surface-2);
      }
      .chip[aria-pressed="true"] {
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        border-color: var(--accent-light);
        color: #fff;
        box-shadow: 0 4px 14px var(--accent-glow);
      }
      .chip.chip-stock {
        border-color: rgba(46, 204, 113, 0.45);
        color: #6bf0a0;
        background: rgba(46, 204, 113, 0.1);
      }
      .chip.chip-stock[aria-pressed="true"] {
        background: var(--wa);
        border-color: #6bf0a0;
        color: #fff;
        box-shadow: 0 4px 14px var(--wa-glow);
      }

      /* ---------- Punto 9: Línea de Conteo Normal (sin space-between roto) ---------- */
      .count-line {
        max-width: 1240px;
        margin: 0 auto;
        padding: 8px 20px 12px;
        color: var(--ink-soft);
        font-size: 0.95rem;
        display: block;
      }
      .count-line strong { color: #fff; font-weight: 700; }

      /* ---------- Punto 13: Grilla con Altura Uniforme y Marco Fijo ---------- */
      .catalog {
        max-width: 1240px;
        margin: 0 auto;
        padding: 4px 20px 24px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
        grid-auto-rows: 1fr;
        align-items: stretch;
        gap: 18px;
      }
      .card-paged-hidden {
        display: none !important;
      }

      /* Punto 15: Paginación Progresiva Visual («Mostrar más») */
      .catalog-pager {
        max-width: 1240px;
        margin: 0 auto 38px;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
      .catalog-pager-info {
        color: var(--ink-soft);
        font-size: 0.92rem;
        margin: 0;
      }
      .catalog-pager-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .btn-load-more {
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        border: 0;
        border-radius: 999px;
        padding: 12px 26px;
        font-family: inherit;
        font-weight: 700;
        font-size: 0.96rem;
        cursor: pointer;
        box-shadow: 0 8px 22px var(--accent-glow);
        transition: transform 0.18s var(--ease-out), filter 0.18s ease;
      }
      .btn-load-more:hover {
        transform: translateY(-2px);
        filter: brightness(1.06);
      }
      .btn-show-all {
        background: var(--surface-2);
        color: var(--ink);
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        padding: 12px 22px;
        font-family: inherit;
        font-weight: 600;
        font-size: 0.92rem;
        cursor: pointer;
      }
      .btn-show-all:hover {
        border-color: var(--accent-light);
        color: #fff;
      }

      /* ---------- Tarjeta de Producto Uniforme y Jerarquizada (Puntos 10–13, 29) ---------- */
      .card {
        background: linear-gradient(180deg, var(--surface) 0%, #13161d 100%);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: transform 0.22s var(--ease-out), border-color 0.22s ease, box-shadow 0.22s ease;
      }
      .card.clickable { cursor: pointer; }
      .card.clickable:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 106, 43, 0.48);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(232, 73, 15, 0.24);
      }
      .card-photo {
        background: var(--stage-bg);
        height: 214px;
        flex: 0 0 214px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--line);
      }
      .card-photo::after {
        content: "";
        position: absolute;
        bottom: 10px;
        left: 18%;
        right: 18%;
        height: 14px;
        border-radius: 50%;
        background: radial-gradient(ellipse at center, rgba(10, 12, 16, 0.36) 0%, transparent 75%);
        pointer-events: none;
        z-index: 1;
      }
      .card-photo img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        mix-blend-mode: multiply;
        filter: contrast(1.06) saturate(1.05);
        transition: transform 0.28s var(--ease-out);
      }
      .card.clickable:hover .card-photo img {
        transform: scale(1.05);
      }
      .card-body {
        padding: 16px 18px 18px;
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .card-brand {
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--accent-light);
      }
      .card-model {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.55rem;
        font-weight: 700;
        line-height: 1.06;
        margin: 3px 0 3px;
        color: #fff;
      }
      .card-cat {
        color: var(--ink-soft);
        font-size: 0.86rem;
        font-weight: 500;
        margin-bottom: 10px;
      }
      .badge-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        min-height: 26px;
        align-items: center;
        margin-bottom: 10px;
      }
      /* Punto 29: Jerarquía en las specs de tarjeta (2–3 datos clave claros, sin cajas pesadas iguales) */
      .quick-specs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 2px 0 12px;
      }
      .qs {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: var(--surface-2);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 5px 10px;
        font-size: 0.83rem;
      }
      .qs.qs-primary {
        background: rgba(232, 73, 15, 0.14);
        border-color: rgba(255, 106, 43, 0.34);
      }
      .qs b {
        color: var(--ink-soft);
        font-weight: 500;
        font-size: 0.8rem;
      }
      .qs span {
        font-weight: 700;
        color: #fff;
      }
      .qs.qs-primary span {
        color: #ffb088;
      }
      .card-colors {
        font-size: 0.84rem;
        color: var(--ink-soft);
        margin-bottom: 8px;
      }
      .card-colors b { color: var(--ink); font-weight: 600; }

      /* Selector de colores por puntos */
      .color-dots {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
        margin: 2px 0 12px;
      }
      .color-dot {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.32);
        padding: 0;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        transition: transform 0.14s var(--ease-out), box-shadow 0.14s ease;
      }
      .color-dot:hover { transform: scale(1.12); }
      .color-dot.active,
      .color-dot[aria-pressed="true"] {
        box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-light);
        transform: scale(1.1);
      }
      .modal-colors {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 12px 16px;
        background: var(--surface-2);
        border-top: 1px solid var(--line);
      }
      .modal-colors-label {
        font-size: 0.82rem;
        color: var(--ink-soft);
        font-weight: 600;
      }
      .modal-colors .color-dots { margin: 0; }
      .modal-color-name { font-size: 0.9rem; font-weight: 700; color: #fff; }

      .card-foot {
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .price-label {
        font-size: 0.78rem;
        color: var(--ink-soft);
        font-weight: 500;
      }
      .price {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 2.05rem;
        font-weight: 700;
        color: #fff;
        line-height: 1;
      }
      .price-consult {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--accent-light);
      }
      .fin-note {
        font-size: 0.82rem;
        color: var(--ink-soft);
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .fin-note::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent-light);
        flex: none;
      }
      .card-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 4px;
      }
      .btn-ficha {
        flex: 1 1 120px;
        background: var(--surface-2);
        color: #fff;
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        padding: 10px 12px;
        font-family: inherit;
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        transition: background 0.16s ease, border-color 0.16s ease;
      }
      .btn-ficha:hover {
        border-color: var(--accent-light);
        background: rgba(232, 73, 15, 0.16);
      }
      .btn-wa {
        flex: 1 1 150px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        background: var(--wa);
        color: #fff;
        text-decoration: none;
        border-radius: 10px;
        padding: 10px 12px;
        font-weight: 700;
        font-size: 0.9rem;
        transition: background 0.16s ease, transform 0.16s var(--ease-out);
      }
      .btn-wa:hover { background: var(--wa-dark); transform: translateY(-1px); }
      .btn-wa svg { width: 17px; height: 17px; flex: none; }

      /* Distintivos de stock, estado, oferta y nuevo */
      .avail-label {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(46, 204, 113, 0.12);
        color: #6bf0a0;
        border: 1px solid rgba(46, 204, 113, 0.32);
        font-size: 0.75rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
      }
      .avail-label.avail-nostock {
        background: rgba(148, 160, 180, 0.12);
        color: var(--ink-soft);
        border-color: rgba(148, 160, 180, 0.28);
      }
      .badge-stock {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(31, 174, 85, 0.18);
        color: #6bf0a0;
        border: 1px solid rgba(46, 204, 113, 0.45);
        font-size: 0.75rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
      }
      .badge-stock::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #2ecc71;
        flex: none;
      }
      .badge-stock.badge-stock-orden {
        background: rgba(245, 158, 11, 0.14);
        color: #fbbf24;
        border-color: rgba(245, 158, 11, 0.38);
      }
      .badge-stock.badge-stock-orden::before { background: #f59e0b; }

      .agency-avail {
        margin-top: 14px;
        background: var(--surface-2);
        border: 1px solid var(--line-strong);
        border-radius: 12px;
        padding: 12px 14px;
      }
      .agency-avail-title {
        font-size: 0.82rem;
        color: var(--accent-light);
        font-weight: 700;
        margin-bottom: 6px;
      }
      .agency-line { font-size: 0.92rem; font-weight: 600; color: var(--ink); margin-top: 4px; }
      .agency-line:first-child { margin-top: 0; }
      .agency-colors { font-size: 0.86rem; color: var(--ink-soft); margin: 2px 0 6px; }

      /* Punto 12: Tratamiento intencional para los 10 modelos «No inventario» (sin botón Comparar huérfano) */
      .card.no-stock {
        background: linear-gradient(180deg, rgba(22, 26, 34, 0.75) 0%, rgba(15, 18, 24, 0.88) 100%);
        border-color: rgba(255, 255, 255, 0.06);
      }
      .card.no-stock .card-photo {
        background: radial-gradient(ellipse 90% 88% at 50% 46%, #ffffff 0%, #eef2f7 60%, #e2e9f0 100%);
      }
      .card.no-stock .card-photo img {
        filter: grayscale(0.6) contrast(1.02);
        opacity: 0.85;
      }
      .no-stock-panel {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
      }
      .stock-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: rgba(148, 160, 180, 0.1);
        color: var(--ink-soft);
        border: 1px solid rgba(148, 160, 180, 0.24);
        font-size: 0.84rem;
        font-weight: 600;
        padding: 9px 12px;
        border-radius: 10px;
        text-align: center;
        width: 100%;
      }
      .btn-nostock-wa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        background: var(--surface-2);
        color: var(--ink);
        border: 1px solid var(--line-strong);
        text-decoration: none;
        border-radius: 10px;
        padding: 9px 12px;
        font-weight: 600;
        font-size: 0.86rem;
        transition: border-color 0.16s ease, color 0.16s ease;
      }
      .btn-nostock-wa:hover {
        border-color: var(--accent-light);
        color: #fff;
      }
      .btn-nostock-wa svg { width: 16px; height: 16px; color: #58e28f; }

      .badge-new {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 3;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 0.82rem;
        letter-spacing: 0.04em;
        padding: 4px 11px;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
      }
      .badge-offer {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 3;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #101216;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 800;
        font-size: 0.82rem;
        letter-spacing: 0.04em;
        padding: 4px 11px;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      }

      /* ---------- Punto 11: Tarjeta sin Foto (MRT PRO 200 +) como Emblema Escénico ---------- */
      .no-photo {
        width: 100%;
        height: 100%;
        min-height: 170px;
        position: relative;
        z-index: 2;
        background: radial-gradient(circle at 50% 45%, #232938 0%, #161a23 75%, #11141b 100%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--ink-soft);
        text-align: center;
        padding: 16px;
        box-shadow: inset 0 0 28px rgba(232, 73, 15, 0.12);
      }
      .no-photo-crest {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(232, 73, 15, 0.24) 0%, rgba(255, 106, 43, 0.08) 100%);
        border: 1.5px solid rgba(255, 106, 43, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.85rem;
        font-weight: 800;
        color: var(--accent-light);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
      }
      .no-photo .mono {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #fff;
        line-height: 1.05;
      }
      .no-photo .mono-sub {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--ink-soft);
        background: rgba(255, 255, 255, 0.06);
        padding: 3px 10px;
        border-radius: 999px;
      }

      /* ---------- Comparador de Modelos (Punto 23: oculto en 0) ---------- */
      .btn-compare {
        flex: 1 1 100%;
        background: transparent;
        color: var(--ink-soft);
        border: 1px dashed var(--line-strong);
        border-radius: 9px;
        padding: 8px 12px;
        font-family: inherit;
        font-weight: 600;
        font-size: 0.84rem;
        cursor: pointer;
        transition: transform 0.16s var(--ease-out), border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
      }
      .btn-compare:hover { border-color: var(--ink); color: #fff; }
      .btn-compare[aria-pressed="true"] {
        border-style: solid;
        border-color: var(--accent-light);
        color: #fff;
        background: rgba(232, 73, 15, 0.18);
      }
      .btn-compare:disabled { opacity: 0.4; cursor: not-allowed; }
      .compare-bar {
        position: fixed;
        left: 50%;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 46;
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(22, 26, 34, 0.95);
        backdrop-filter: blur(16px);
        color: #fff;
        border: 1px solid var(--accent-light);
        border-radius: 999px;
        padding: 8px 10px 8px 18px;
        box-shadow: var(--shadow-lg);
        max-width: calc(100vw - 24px);
      }
      .compare-bar[hidden] { display: none !important; }
      .compare-bar .cb-text { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
      .btn-compare-go {
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        border: 0;
        cursor: pointer;
        border-radius: 999px;
        padding: 9px 18px;
        font-weight: 700;
        white-space: nowrap;
      }
      .btn-compare-clear {
        background: none;
        border: 0;
        color: var(--ink-soft);
        cursor: pointer;
        font-weight: 600;
        text-decoration: underline;
        white-space: nowrap;
      }
      #compareBackdrop { z-index: 55; }
      .modal-compare { max-width: 980px; }
      .compare-info { padding: 24px; position: relative; }
      .compare-info h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.9rem;
        font-weight: 700;
        margin: 0 40px 4px 0;
      }
      .compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 16px; }
      .compare-table th, .compare-table td {
        text-align: left;
        padding: 10px 8px;
        border-bottom: 1px solid var(--line);
        vertical-align: top;
        font-size: 0.9rem;
        overflow-wrap: break-word;
      }
      .compare-table thead th:first-child,
      .compare-table th[scope="row"] { color: var(--ink-soft); font-weight: 600; width: 18%; }
      .compare-table td { font-weight: 600; color: #fff; }
      .cmp-photo { background: var(--stage-bg); border-radius: 10px; padding: 8px; }
      .cmp-photo img { width: 100%; height: 100px; object-fit: contain; mix-blend-mode: multiply; }
      .cmp-brand { font-size: 0.76rem; font-weight: 700; color: var(--accent-light); margin-top: 10px; }
      .cmp-name { font-family: "Barlow Condensed", sans-serif; font-size: 1.3rem; font-weight: 700; color: #fff; }
      .cmp-remove {
        margin-top: 8px;
        background: var(--surface-2);
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        color: var(--ink-soft);
        font-weight: 600;
        font-size: 0.8rem;
        padding: 4px 12px;
        cursor: pointer;
      }
      .cmp-remove:hover { border-color: var(--accent-light); color: #fff; }

      /* ---------- Compartir ---------- */
      .btn-share {
        flex: 1 1 140px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--surface-2);
        color: #6bf0a0;
        border: 1px solid rgba(46, 204, 113, 0.45);
        text-decoration: none;
        border-radius: 10px;
        padding: 11px 14px;
        font-weight: 700;
      }
      .btn-share:hover { background: rgba(46, 204, 113, 0.12); }
      .btn-share svg { width: 18px; height: 18px; flex: none; }
      .share-wrap { position: relative; flex: 1 1 140px; display: flex; }
      .share-wrap .btn-share { flex: 1 1 auto; width: 100%; font-family: inherit; cursor: pointer; }
      .share-menu {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        width: 100%;
        min-width: 230px;
        max-width: 290px;
        background: var(--surface-2);
        border: 1px solid var(--line-strong);
        border-radius: 12px;
        box-shadow: var(--shadow-lg);
        padding: 6px;
        z-index: 60;
      }
      .share-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        background: transparent;
        border: 0;
        color: var(--ink);
        padding: 11px 12px;
        border-radius: 8px;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
        text-decoration: none;
      }
      .share-item:hover { background: var(--surface-3); }
      .share-item svg { width: 19px; height: 19px; flex: none; }
      .share-item .ic-wa { color: #6bf0a0; }
      .share-toast {
        position: fixed;
        left: 50%;
        bottom: calc(22px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%) translateY(10px);
        background: var(--accent);
        color: #fff;
        padding: 11px 22px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 0.95rem;
        white-space: nowrap;
        box-shadow: var(--shadow-lg);
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
      }
      .share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

      /* ---------- Estado Sin Resultados ---------- */
      .empty {
        max-width: 680px;
        margin: 12px auto 34px;
        padding: 36px 24px;
        text-align: center;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
      }
      .empty h2 {
        margin: 0 0 6px;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.7rem;
      }
      .empty p { margin: 0 0 16px; color: var(--ink-soft); }
      .empty button {
        background: var(--accent);
        color: #fff;
        border: 0;
        padding: 11px 20px;
        border-radius: 999px;
        font-weight: 700;
        cursor: pointer;
      }

      /* ---------- F. Cotizador en Dos Columnas con Etiquetas Limpias (Puntos 16–18) ---------- */
      .quoter-section { max-width: 1240px; margin: 0 auto; padding: 8px 20px 30px; }
      .quoter-inner {
        background:
          radial-gradient(circle at 90% 10%, rgba(232, 73, 15, 0.16), transparent 52%),
          var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        padding: 28px;
      }
      .quoter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
      .quoter-head h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 1.95rem;
        margin: 0;
        color: #fff;
      }
      .quoter-rate {
        font-weight: 700;
        color: #ff9d73;
        font-size: 0.88rem;
        background: rgba(232, 73, 15, 0.16);
        border: 1px solid rgba(255, 106, 43, 0.4);
        padding: 6px 14px;
        border-radius: 999px;
      }
      .quoter-lead { margin: 6px 0 0; color: var(--ink-soft); max-width: 760px; }
      .quoter-layout {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 24px;
        margin-top: 20px;
        align-items: start;
      }
      .quoter-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      /* Punto 17: Etiquetas claras arriba del input/select sin solaparse jamás con el borde */
      .quoter-field {
        display: flex;
        flex-direction: column;
        gap: 7px;
      }
      .quoter-field.full-span {
        grid-column: 1 / -1;
      }
      .quoter-field label {
        display: block;
        position: static;
        font-weight: 600;
        font-size: 0.9rem;
        color: #e2e8f0;
        line-height: 1.25;
        margin: 0;
      }
      .quoter-field input, .quoter-field select {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        background: var(--bg);
        color: var(--ink);
        font-family: inherit;
        font-size: 1rem;
        line-height: 1.3;
      }
      .quoter-field input:focus, .quoter-field select:focus {
        outline: 2px solid var(--accent-light);
        outline-offset: 1px;
      }
      .quoter-note { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.45; }
      .quoter-console {
        background: var(--surface-2);
        border: 1px solid var(--line-strong);
        border-radius: 18px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .quoter-results {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .quoter-result {
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 14px 16px;
      }
      .quoter-result .qr-label {
        font-size: 0.82rem;
        color: var(--ink-soft);
        font-weight: 600;
      }
      .quoter-result .qr-value {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.85rem;
        font-weight: 700;
        line-height: 1.1;
        margin-top: 4px;
        color: #fff;
      }
      .quoter-result.highlight {
        grid-column: 1 / -1;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        border-color: var(--accent-light);
        color: #fff;
        padding: 16px 18px;
        box-shadow: 0 10px 28px var(--accent-glow);
      }
      .quoter-result.highlight .qr-label { color: rgba(255, 255, 255, 0.92); font-size: 0.88rem; }
      .quoter-result.highlight .qr-value { font-size: 2.35rem; }
      .quoter-legend { margin: 0; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.45; }
      .quoter-actions { display: flex; flex-wrap: wrap; gap: 10px; }
      .btn-quote-wa {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--wa);
        color: #fff;
        text-decoration: none;
        border-radius: 12px;
        padding: 13px 20px;
        font-weight: 700;
        font-size: 0.98rem;
        box-shadow: 0 6px 18px var(--wa-glow);
      }
      .btn-quote-wa:hover { background: var(--wa-dark); }
      .btn-quote-wa svg { width: 20px; height: 20px; flex: none; }
      .btn-quote {
        flex: 1 1 130px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        border: 0;
        cursor: pointer;
        border-radius: 10px;
        padding: 11px 14px;
        font-weight: 700;
        font-size: 0.98rem;
      }

      /* ---------- Financiamiento ---------- */
      .financing-section { max-width: 1240px; margin: 0 auto; padding: 0 20px 28px; }
      .financing-inner {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        padding: 26px 28px;
      }
      .financing-inner h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 1.85rem;
        margin: 0;
        color: #fff;
      }
      .financing-inner p { margin: 10px 0 0; color: var(--ink-soft); line-height: 1.55; max-width: 860px; }
      .financing-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
      .financing-actions .btn-quote-wa { width: auto; }
      .btn-view-req {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        border: 0;
        cursor: pointer;
        border-radius: 12px;
        padding: 13px 20px;
        font-weight: 700;
        font-size: 0.98rem;
      }

      /* ---------- G. Ubicación, Google Maps Integrado y Mapa Oscuro (Puntos 7, 19, 20) ---------- */
      .location-section {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 20px 30px;
      }
      .maps-announce {
        margin: 0 0 14px;
      }
      .maps-announce-inner {
        background:
          radial-gradient(circle at 12% 50%, rgba(232, 73, 15, 0.16), transparent 50%),
          var(--surface-2);
        border: 1px solid var(--line-strong);
        color: var(--ink);
        border-radius: var(--radius-md);
        padding: 18px 22px;
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
      }
      .maps-announce-icon {
        width: 48px;
        height: 48px;
        flex: none;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .maps-announce-icon svg { width: 25px; height: 25px; }
      .maps-announce-text { flex: 1 1 300px; min-width: 0; }
      .maps-announce-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(46, 204, 113, 0.14);
        color: #6bf0a0;
        border: 1px solid rgba(46, 204, 113, 0.35);
        font-size: 0.76rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
      }
      .maps-announce-badge svg { width: 13px; height: 13px; flex: none; }
      .maps-announce-text h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        line-height: 1.1;
        margin: 6px 0 3px;
        color: #fff;
      }
      .maps-announce-text p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 0.9rem;
        max-width: 650px;
      }
      .maps-announce-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
      .btn-maps-go {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 10px 16px;
        border-radius: 10px;
      }
      .btn-maps-go svg { width: 17px; height: 17px; flex: none; }
      .btn-maps-route {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        text-decoration: none;
        border: 1px solid var(--line-strong);
        font-weight: 700;
        font-size: 0.9rem;
        padding: 10px 16px;
        border-radius: 10px;
      }
      .btn-maps-route svg { width: 17px; height: 17px; flex: none; }

      .location-inner {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        padding: 24px;
        display: flex;
        gap: 18px;
        align-items: center;
        flex-wrap: wrap;
      }
      .location-icon {
        width: 52px;
        height: 52px;
        flex: none;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .location-icon svg { width: 26px; height: 26px; }
      .location-text { flex: 1 1 280px; min-width: 0; }
      .location-text h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 1.65rem;
        margin: 0 0 4px;
        color: #fff;
      }
      .location-address { margin: 0; font-weight: 600; color: #fff; }
      .location-email { margin: 6px 0 0; font-weight: 600; }
      .location-email a { color: var(--accent-light); text-decoration: none; }
      .location-hours { margin: 6px 0 0; font-weight: 600; color: #dce2ee; }
      .location-note { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.92rem; }
      .location-actions { display: flex; flex-direction: column; gap: 10px; flex: none; }
      .btn-directions {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        font-weight: 700;
        font-size: 0.94rem;
        padding: 11px 18px;
        border-radius: 10px;
        text-decoration: none;
      }
      .btn-directions svg { width: 18px; height: 18px; flex: none; }
      .btn-maps-view {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--surface-2);
        color: #fff;
        border: 1px solid var(--line-strong);
        font-weight: 700;
        font-size: 0.94rem;
        padding: 10px 18px;
        border-radius: 10px;
        text-decoration: none;
      }
      .btn-maps-view svg { width: 18px; height: 18px; flex: none; }
      .verified-line {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 8px 0 0;
        background: rgba(46, 204, 113, 0.12);
        border: 1px solid rgba(46, 204, 113, 0.32);
        color: #6bf0a0;
        font-size: 0.82rem;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 999px;
      }
      .verified-line svg { width: 14px; height: 14px; flex: none; }

      /* Punto 20: Estado de horario en tono informativo neutro/ámbar, nunca rojo de error */
      .open-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 10px 0 0;
        background: var(--surface-2);
        border: 1px solid var(--line-strong);
        padding: 6px 13px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 0.9rem;
        color: #fff;
      }
      .open-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex: none; }
      .open-status.is-open .open-dot { background: var(--emerald); box-shadow: 0 0 8px var(--emerald); }
      .open-status.is-closed .open-dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.45); }
      .open-status .open-detail { color: var(--ink-soft); font-weight: 500; }

      /* Punto 19: Tratamiento oscuro sobre el lienzo del mapa sin tocar HatchMaps ni MapHelpers */
      .map-card {
        margin-top: 14px;
        background: #12151c;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow);
        overflow: hidden;
        position: relative;
      }
      .store-map {
        height: 340px;
        width: 100%;
        background: #141820;
      }
      .store-map .maplibregl-canvas,
      .store-map img {
        filter: invert(0.92) hue-rotate(180deg) brightness(0.92) contrast(1.08) saturate(0.85);
      }
      .map-fallback { padding: 20px 24px; }
      .map-fallback p { margin: 0 0 6px; font-weight: 600; }
      .map-fallback .map-fallback-note { color: var(--ink-soft); font-weight: 400; }
      .pin {
        width: 32px;
        height: 32px;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        background: var(--accent);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.85rem;
        border: 2px solid #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
      }
      .pin > * { transform: rotate(45deg); }

      /* ---------- H.21 Preguntas Frecuentes con Personalidad de Marca ---------- */
      .faq-section { max-width: 1240px; margin: 0 auto; padding: 0 20px 38px; }
      .faq-inner {
        background: var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        padding: 28px;
      }
      .faq-inner h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 1.9rem;
        margin: 0 0 14px;
        color: #fff;
      }
      .faq-item {
        background: var(--surface-2);
        border: 1px solid var(--line);
        border-radius: 12px;
        margin-top: 10px;
        padding: 0 16px;
        transition: border-color 0.18s ease, background 0.18s ease;
      }
      .faq-item:has(.faq-q[aria-expanded="true"]) {
        border-color: rgba(255, 106, 43, 0.5);
        border-left: 4px solid var(--accent-light);
        background: rgba(30, 35, 46, 0.95);
      }
      .faq-q {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        background: none;
        border: 0;
        cursor: pointer;
        text-align: left;
        color: #fff;
        font-family: inherit;
        font-weight: 700;
        font-size: 1.02rem;
        padding: 16px 2px;
      }
      .faq-q:hover { color: var(--accent-light); }
      .faq-icon {
        flex: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(232, 73, 15, 0.16);
        border: 1px solid rgba(255, 106, 43, 0.4);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        line-height: 1;
        color: var(--accent-light);
        transition: transform 0.2s var(--ease-out), background 0.2s ease, color 0.2s ease;
      }
      .faq-q[aria-expanded="true"] .faq-icon {
        transform: rotate(45deg);
        background: var(--accent);
        color: #fff;
      }
      .faq-a { padding: 0 2px 16px; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.58; max-width: 880px; }
      .faq-a p { margin: 0; }

      /* ---------- H.22 y H.23 Pie de Página Completo con Holgura para Botones Flotantes ---------- */
      .site-footer {
        border-top: 1px solid var(--line-strong);
        background: #0b0d11;
        color: var(--ink-soft);
        font-size: 0.9rem;
      }
      .footer-inner {
        max-width: 1240px;
        margin: 0 auto;
        padding: 40px 20px calc(108px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        gap: 28px;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.3fr 1fr 1.1fr 0.9fr;
        gap: 26px;
      }
      .footer-col h3 {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: #fff;
        margin: 0 0 10px;
      }
      .footer-col p,
      .footer-col li {
        margin: 0 0 7px;
        color: var(--ink-soft);
        line-height: 1.48;
      }
      .footer-col ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .footer-col a {
        color: var(--ink-soft);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.16s ease;
      }
      .footer-col a:hover { color: var(--accent-light); }
      .footer-social-row {
        display: flex;
        gap: 10px;
        margin-top: 12px;
      }
      .btn-social {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--surface);
        color: var(--ink);
        border: 1px solid var(--line-strong);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: transform 0.18s var(--ease-out), background 0.18s ease, border-color 0.18s ease;
      }
      .btn-social:hover {
        background: var(--accent);
        border-color: var(--accent-light);
        color: #fff;
        transform: translateY(-2px);
      }
      .btn-social svg { width: 17px; height: 17px; }
      .footer-bottom {
        padding-top: 20px;
        border-top: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .footer-copy { margin: 0; font-weight: 700; color: #fff; }
      .footer-links { display: flex; gap: 12px 22px; flex-wrap: wrap; align-items: center; }
      .legal-link {
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        font-weight: 600;
        color: var(--accent-light);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .footer-notice { margin: 0; max-width: 880px; color: var(--ink-soft); font-size: 0.85rem; }

      /* ---------- Botones Flotantes ---------- */
      .wa-float {
        position: fixed;
        right: calc(16px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 40;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #22c35e 0%, #168a43 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.12);
        text-decoration: none;
        transition: transform 0.18s var(--ease-out);
      }
      .wa-float:hover { transform: scale(1.06); }
      .wa-float svg { width: 28px; height: 28px; }

      .chat-float {
        position: fixed;
        right: calc(16px + env(safe-area-inset-right, 0px));
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
        z-index: 40;
        width: 56px;
        height: 56px;
        padding: 3px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
        text-decoration: none;
        transition: transform 0.18s var(--ease-out);
      }
      .chat-float:hover { transform: scale(1.06); }
      .chat-float img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
      .chat-dot {
        position: absolute;
        top: 1px;
        right: 1px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #2ecc71;
        border: 3px solid #101216;
      }

      /* ---------- Modales ---------- */
      .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(7, 8, 11, 0.8);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 0;
        z-index: 50;
      }
      @media (min-width: 720px) {
        .modal-backdrop { align-items: center; padding: 24px; }
      }
      .modal {
        background: var(--surface);
        color: var(--ink);
        border: 1px solid var(--line-strong);
        width: 100%;
        max-width: 920px;
        max-height: 92vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        box-shadow: var(--shadow-lg);
      }
      @media (min-width: 720px) { .modal { border-radius: 20px; } }
      .modal-grid { display: grid; grid-template-columns: 1fr; }
      @media (min-width: 720px) { .modal-grid { grid-template-columns: 1fr 1fr; } }
      .gallery-wrap { display: flex; flex-direction: column; background: var(--surface-2); }
      .gallery-main { position: relative; }
      .modal-photo {
        background: var(--stage-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        min-height: 280px;
      }
      .modal-photo img {
        max-height: 320px;
        width: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
        filter: contrast(1.06) saturate(1.05);
      }
      .gal-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--line-strong);
        background: rgba(16, 18, 22, 0.82);
        color: #fff;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        z-index: 3;
      }
      .gal-btn.prev { left: 10px; }
      .gal-btn.next { right: 10px; }
      .gal-count {
        position: absolute;
        right: 12px;
        bottom: 10px;
        z-index: 3;
        background: rgba(16, 18, 22, 0.84);
        color: #fff;
        font-size: 0.78rem;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 999px;
      }
      .thumbs {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding: 12px 16px;
        background: var(--surface-2);
        border-top: 1px solid var(--line);
      }
      .thumbs button {
        width: 62px;
        height: 46px;
        padding: 3px;
        border: 2px solid var(--line);
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
      }
      .thumbs button[aria-pressed="true"] { border-color: var(--accent-light); }
      .thumbs img { width: 100%; height: 100%; object-fit: contain; }

      .modal-info { padding: 24px; position: relative; }
      .modal-topbar {
        position: sticky;
        top: 0;
        z-index: 40;
        height: 0;
        display: flex;
        justify-content: flex-end;
        pointer-events: none;
      }
      .modal-close {
        pointer-events: auto;
        flex: none;
        margin: 12px 12px 0 0;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--line-strong);
        background: rgba(16, 18, 22, 0.84);
        color: #fff;
        font-size: 19px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .btn-back-catalog {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 46px;
        padding: 11px 18px;
        background: var(--surface-2);
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        color: #fff;
        font-weight: 700;
        font-size: 0.96rem;
        cursor: pointer;
      }
      .btn-back-top { display: none !important; }
      .btn-back-bottom { width: 100%; justify-content: center; margin-top: 14px; }
      @media (max-width: 767px) {
        .modal-close { display: none !important; }
        .btn-back-catalog { display: none !important; }
        .modal-topbar { display: none !important; }
      }
      .modal-desc { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.95rem; }
      .spec-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
      .spec-table th, .spec-table td {
        text-align: left;
        padding: 8px 0;
        border-bottom: 1px solid var(--line);
        vertical-align: top;
        font-size: 0.93rem;
      }
      .spec-table th { color: var(--ink-soft); font-weight: 600; width: 38%; padding-right: 12px; }
      .spec-table td { font-weight: 600; color: #fff; }
      .modal-price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
      .modal-price-row .price { font-size: 2.3rem; }
      .fin-box {
        margin-top: 16px;
        background: var(--surface-2);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 13px 15px;
      }
      .fin-box .fin-title { font-size: 0.8rem; color: var(--accent-light); font-weight: 700; }
      .fin-box .fin-text { font-weight: 700; font-size: 1rem; margin-top: 2px; color: #fff; }
      .fin-box p { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.9rem; }
      .btn-credit-modal {
        margin-top: 10px;
        background: var(--accent);
        color: #fff;
        border: 0;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 9px 16px;
        border-radius: 8px;
      }

      /* Cuotas con tarjeta */
      .card-fees {
        margin-top: 16px;
        background: var(--surface-2);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 13px 15px;
      }
      .card-fees .fees-title { font-weight: 700; font-size: 1rem; color: #fff; }
      .card-fees .fees-note { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.9rem; }
      .bank-block { border-top: 1px solid var(--line); margin-top: 10px; }
      .bank-block summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 2px;
        font-weight: 700;
        font-size: 0.94rem;
        color: #fff;
      }
      .bank-block summary::-webkit-details-marker { display: none; }
      .bank-block summary::after { content: "+"; font-size: 1.25rem; color: var(--accent-light); }
      .bank-block[open] summary::after { content: "−"; }
      .fees-table { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
      .fees-table th, .fees-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.9rem; }
      .fees-table th:last-child, .fees-table td:last-child { text-align: right; font-weight: 700; }
      .fees-legal { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.82rem; }
      .modal-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

      /* Modal de Crédito y Modales Legales */
      #creditBackdrop { z-index: 60; }
      .modal-credit { max-width: 600px; }
      .credit-info, .legal-info { padding: 26px; position: relative; }
      .credit-info h2, .legal-info h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.85rem;
        font-weight: 700;
        margin: 0 40px 4px 0;
        color: #fff;
      }
      .credit-lead { font-weight: 600; margin: 10px 0 0; color: var(--ink-soft); }
      .credit-section-title {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        margin: 20px 0 0;
        color: #fff;
      }
      .credit-section-text, .legal-info p { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
      .credit-list { list-style: none; margin: 8px 0 0; padding: 0; }
      .credit-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        background: var(--surface-2);
        border: 1px solid var(--line);
        border-radius: 9px;
        font-weight: 600;
        margin-top: 8px;
        font-size: 0.93rem;
      }
      .credit-list li::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent-light);
        flex: none;
        margin-top: 7px;
      }
      .credit-wa-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--wa);
        color: #fff;
        text-decoration: none;
        border-radius: 10px;
        padding: 13px 16px;
        font-weight: 700;
        flex: 1 1 100%;
      }
      .modal-legal { max-width: 640px; }

      /* ---------- Responsividad Mobile-First (360px+) ---------- */
      @media (max-width: 1024px) {
        .header-inner { flex-wrap: wrap; }
        .header-nav { display: flex; order: 3; flex: 1 1 100%; overflow-x: auto; padding: 8px 2px 2px; scrollbar-width: none; }
        .header-nav::-webkit-scrollbar { display: none; }
        .hero-grid { grid-template-columns: 1fr; }
        .lifestyle-card, .lifestyle-card.protagonist { grid-column: span 6; }
        .offers-grid { grid-template-columns: repeat(2, 1fr); }
        .quoter-layout { grid-template-columns: 1fr; }
        .footer-grid { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 640px) {
        .header-inner { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
        .brand-lockup { flex: 1 1 100%; min-width: 0; justify-content: space-between; gap: 8px; }
        .logo { height: 32px; }
        .brand-divider { display: none; }
        .header-place { min-width: 0; text-align: right; }
        .header-place .place { font-size: 0.74rem; }
        .header-place .sub { display: none; }
        .offers-pill-banner { font-size: 0.76rem; padding: 5px 10px; white-space: normal; }
        .header-actions { width: 100%; justify-content: space-between; gap: 8px; }
        .btn-credit-head, .btn-wa-head { flex: 1 1 auto; justify-content: center; font-size: 0.82rem; padding: 8px 10px; }
        .hero-wrap, .lifestyle-section, .news-section, .offers-section, .brand-bar, .toolbar, .count-line, .catalog, .catalog-pager, .quoter-section, .financing-section, .location-section, .faq-section {
          padding-left: 14px;
          padding-right: 14px;
        }
        .hero-cover { padding: 16px; border-radius: 18px; }
        .hero-glass-panel { padding: 20px 16px; }
        .hero-cover-actions .hero-btn { width: 100%; }
        .hero-trust-row { grid-template-columns: 1fr; gap: 8px; }
        .hero-stage-card { min-height: 260px; padding: 16px 14px; }
        .lifestyle-grid { grid-template-columns: 1fr; }
        .lifestyle-card, .lifestyle-card.protagonist {
          grid-column: span 1;
          grid-template-columns: 1.15fr 0.85fr;
          min-height: 180px;
          padding: 14px;
        }
        .lf-visual { height: 138px; padding: 8px; }
        .offers-showcase { padding: 16px; }
        .offers-grid { grid-template-columns: 1fr; }
        .quoter-inner { padding: 20px 16px; }
        .quoter-grid, .quoter-results { grid-template-columns: 1fr; }
        .catalog { grid-template-columns: 1fr; }
        .compare-bar { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
        .share-wrap { flex: 1 1 100%; }
        .location-actions { width: 100%; }
        .maps-announce-inner { padding: 16px 14px; }
        .maps-announce-text { flex: 1 1 100%; min-width: 0; }
        .maps-announce-actions { width: 100%; }
        .maps-announce-actions a { flex: 1 1 130px; justify-content: center; }
        .location-text { flex: 1 1 100%; min-width: 0; }
        .footer-grid { grid-template-columns: 1fr; gap: 20px; }
      }

      section[id] { scroll-margin-top: 84px; }
      [data-lifestyle="trabajo"] .lf-visual img { transform: scale(1.48); }
      [data-lifestyle="trabajo"]:hover .lf-visual img { transform: scale(1.54); }
      [data-lifestyle="cuatrimotos"] .lf-visual img { transform: scale(1.36); }
      [data-lifestyle="cuatrimotos"]:hover .lf-visual img { transform: scale(1.42); }
      [data-lifestyle="mototaxis"] .lf-visual img { transform: scale(1.12); }
      [data-lifestyle="mototaxis"]:hover .lf-visual img { transform: scale(1.17); }
        .map-card .fachada-link { display: block; }
    .map-card .fachada { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
    .map-card .fachada-nota { margin: 0; padding: 14px 20px; color: var(--ink-soft); }
      .catalog-h2 { max-width: 1240px; margin: 10px auto 0; padding: 0 20px; font-family: "Barlow Condensed", sans-serif; font-size: 1.9rem; font-weight: 700; color: var(--ink); }
    .card-model a.card-link { color: inherit; text-decoration: none; }
    .card-model a.card-link:hover { color: #E8490F; text-decoration: underline; }
      .fq-aviso { margin: 6px 0 0; font-size: .82rem; color: #B23A0E; }
  
/* Cotizador Fase 2 */
.pay-toggle { display: flex; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.pay-opt { padding: 10px 22px; border-radius: 999px; border: 1.5px solid #E8490F; background: transparent; color: var(--ink); font: 600 1rem 'Barlow', sans-serif; cursor: pointer; }
.pay-opt.activa { background: #E8490F; color: #fff; }
.enganche-row { display: flex; gap: 8px; }
.enganche-row input { flex: 1; min-width: 0; }
.modo-toggle { display: flex; border: 1.5px solid #c9c9c9; border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.modo-opt { padding: 0 14px; background: #fff; border: 0; font: 600 1rem 'Barlow', sans-serif; cursor: pointer; color: var(--ink); }
.modo-opt.activa { background: #101216; color: #fff; }
.calc-equiv { margin: 6px 0 0; font-size: .85rem; color: var(--ink-soft); min-height: 1em; }
.q-label { display: block; font-weight: 600; margin-bottom: 8px; }
.plazos-scroll { border: 1px solid #e3e3e3; border-radius: 12px; overflow: hidden; background: #fff; }
.plazos-scroll.expandida { max-height: 420px; overflow-y: auto; }
.plazos-scroll.expandida thead th { position: sticky; top: 0; z-index: 1; }
.plazos-tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.plazos-tabla th, .plazos-tabla td { padding: 9px 12px; text-align: left; }
.plazos-tabla thead th { background: #101216; color: #fff; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .02em; }
.plazos-tabla tbody tr { border-top: 1px solid #eee; }
.plazos-tabla tbody tr[tabindex] { cursor: pointer; }
.plazos-tabla tbody tr:hover { background: #FFF3EC; }
.plazos-tabla tbody tr.sel { background: #FFE8DB; font-weight: 600; }
.btn-ver-plazos { margin-top: 10px; background: none; border: 0; color: #E8490F; font: 600 .95rem 'Barlow', sans-serif; cursor: pointer; padding: 6px 0; }
.plazos-estado { margin: 8px 0 0; font-weight: 600; }
.btn-copy-link { margin-top: 10px; width: 100%; padding: 12px; border-radius: 12px; border: 1.5px solid #101216; background: #fff; color: #101216; font: 600 1rem 'Barlow', sans-serif; cursor: pointer; }
.copiar-aviso { display: block; margin-top: 6px; font-size: .85rem; color: #1E7B34; min-height: 1em; }

/* ===== Fase 2 §2.5–§2.7 ===== */
/* Ordenar y presupuesto */
.toolbar-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.toolbar-filtros .orden-label { font-weight: 600; font-size: .92rem; }
.toolbar-filtros select, .toolbar-filtros input { padding: 10px 12px; border: 1.5px solid #d8d8d8; border-radius: 10px; font: 500 .95rem 'Barlow', sans-serif; background: #fff; color: var(--ink); }
.toolbar-filtros input { width: 150px; }
.card-cuota { margin-top: 4px; font-size: .88rem; font-weight: 600; color: #1E7B34; }
/* Encabezado compacto al bajar */
.site-header .header-inner { transition: padding 200ms ease; }
.site-header.compacta .header-inner { padding-top: 6px; padding-bottom: 6px; }
.site-header.compacta .header-place .sub { display: none; }
.site-header.compacta .logo { height: 32px; width: auto; }
/* Botón flotante único con dos opciones */
.contacto-float { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; flex-direction: column; gap: 12px; }
.contacto-float .wa-float, .contacto-float .chat-float { position: static; }
body::after { content: ""; display: block; height: 140px; }
/* Áreas táctiles de 44 px sin cambiar el dibujo visible */
.portadas-dot { position: relative; }
.portadas-dot::after { content: ""; position: absolute; inset: -17px; }
.color-dot { position: relative; }
.color-dot::after { content: ""; position: absolute; inset: -11px; }
.footer-col ul a { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
/* Botón de WhatsApp del hero: solo en la primera pantalla móvil */
.hero-btn-wa { display: none; }
@media (max-width: 767px) {
  body { display: flex; flex-direction: column; }
  body > * { order: 7; }   body::after { order: 8; }   body > * { min-width: 0; }   body > section, body > main, body > footer, body > .hero-wrap { width: 100%; }   .news-head { flex-wrap: wrap; }   /* Corrección móvil 2026-10-20: el espaciador body::after (order 0) saltaba sobre el encabezado en el cuerpo flex y las secciones con max-width/margin auto colapsaban (.portadas) o se desbordaban (.news-section) como hijas flex. */
  body > .site-header { order: 1; }
  body > .hero-wrap { order: 3; }
  body > .toolbar { order: 4; }
  body > .portadas { order: 2; }
  body > .brand-bar { order: 5; }
  body > main.catalog { order: 6; }
  .hero-btn-wa { display: inline-flex; background: #1FA855; color: #fff; border-color: #1FA855; }
}

/* Corrección de legibilidad de la tabla de plazos (el cotizador hereda texto claro) */
.plazos-tabla td { color: #101216; }
.plazos-tabla tbody tr.sel td { color: #101216; }
.card-cuota { color: #177245; }
/* Cápsula visible del grupo flotante único (§2.5) */
.contacto-float { background: rgba(16, 18, 22, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 999px; padding: 6px; }

/* Ayuda del campo de enganche (observación de David, 2026-10-20) */
.enganche-ayuda { margin: 2px 0 8px; font-size: .95rem; font-weight: 600; color: var(--ink); }
#calcDownValor { background: #fff; color: #101216; border: 2px solid #101216; border-radius: 10px; font-weight: 700; font-size: 1.1rem; padding: 10px 12px; }
#engancheField.es-q #calcDownValor { border-color: #E8490F; box-shadow: 0 0 0 3px rgba(232, 73, 15, .18); }