:root { --ink: #101a24; --ink-soft: #30404c; --paper: #f6f3ee; --lime: #dcff64; --line: rgba(16,26,36,.16); --muted: #77828b; }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: Manrope, sans-serif; }
body { margin: 0; }
.hero { min-height: 775px; color: white; background: radial-gradient(circle at 72% 28%, #4b5b61 0, #293840 30%, #101a24 72%); padding: 28px clamp(24px, 5vw, 80px) 38px; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.topline, .hero-footer, .facts, .details, .specs, .gallery { max-width: 1280px; width: 100%; margin: 0 auto; }
.topline { display: flex; justify-content: space-between; font: 500 11px/1.2 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #b5c0c2; }
.hero-copy { max-width: 620px; align-self: center; z-index: 1; padding: 56px 0 105px; }
.eyebrow { font: 500 12px/1.2 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #66737d; margin: 0 0 22px; }
.hero .eyebrow { color: var(--lime); }
h1, h2, p { margin-top: 0; } h1, h2 { letter-spacing: -.065em; line-height: .94; }
h1 { font-size: clamp(62px, 10vw, 144px); margin-bottom: 28px; } h2 { font-size: clamp(38px, 5.4vw, 76px); max-width: 690px; margin-bottom: 0; }
.lede { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.45; max-width: 410px; color: #d4dcdd; }
.hero-photo { position: absolute; width: min(65vw, 980px); height: calc(100% - 78px); right: 0; bottom: 0; object-fit: cover; object-position: 45% center; opacity: .78; mix-blend-mode: luminosity; filter: contrast(1.08) brightness(.88); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,26,36,.98) 0%, rgba(16,26,36,.8) 38%, rgba(16,26,36,.08) 83%), linear-gradient(0deg, rgba(16,26,36,.68), transparent 35%); pointer-events: none; }
.topline, .hero-copy, .hero-footer { position: relative; z-index: 1; }.hero-footer { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.label { display: block; font: 500 11px/1.2 "DM Mono", monospace; color: #a7b2b6; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; } .hero-footer strong { font-size: clamp(27px, 3vw, 42px); letter-spacing: -.045em; } .hero-footer small { font: 500 12px "DM Mono", monospace; color: var(--lime); }
.button { display: inline-flex; gap: 30px; justify-content: space-between; align-items: center; padding: 17px 20px; border-radius: 2px; font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .2s, background .2s; } .button:hover { transform: translateY(-3px); } .button-primary { color: var(--ink); background: var(--lime); min-width: 275px; } .button span { font-size: 22px; line-height: 0; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line); margin-top: 0; } .facts article { min-height: 140px; border-right: 1px solid var(--line); padding: 26px clamp(18px, 2vw, 32px); display: flex; flex-direction: column; justify-content: space-between; } .facts span { font: 500 11px "DM Mono", monospace; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } .facts strong { font-size: clamp(18px, 2vw, 26px); letter-spacing: -.045em; }
.details, .specs { padding: clamp(76px, 11vw, 150px) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .condition-copy { max-width: 460px; font-size: 20px; line-height: 1.5; color: var(--ink-soft); } .condition-copy p + p { color: var(--muted); } .text-link { color: var(--ink); display: inline-flex; border-bottom: 1px solid var(--ink); padding-bottom: 7px; text-decoration: none; font-weight: 800; gap: 20px; margin-top: 16px; }
.specs { border-top: 1px solid var(--line); } dl { margin: 0; } dl div { border-top: 1px solid var(--line); display: flex; padding: 17px 0; justify-content: space-between; gap: 20px; } dl div:last-child { border-bottom: 1px solid var(--line); } dt { color: var(--muted); font-size: 14px; } dd { margin: 0; font-weight: 700; text-align: right; font-size: 14px; }
.gallery { padding: 0 0 clamp(90px, 12vw, 160px); } .gallery-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 46px; } .gallery-heading p:last-child { color: var(--muted); max-width: 370px; font-size: 16px; line-height: 1.45; margin: 0; } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .gallery-item { margin: 0; min-height: 280px; overflow: hidden; position: relative; background: #d7dcda; } .gallery-item-wide { grid-column: span 2; grid-row: span 2; min-height: 572px; } .gallery-item img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; transition: transform .5s ease; } .gallery-item:hover img { transform: scale(1.035); } .gallery-item figcaption { position: absolute; bottom: 12px; left: 12px; background: rgba(16,26,36,.86); color: #fff; padding: 8px 10px; font: 500 10px "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.contact { padding: clamp(80px, 11vw, 150px) clamp(24px, 5vw, 80px); text-align: center; color: var(--ink); background: var(--lime); } .contact .eyebrow { color: var(--ink-soft); } .contact h2 { margin: 0 auto 38px; max-width: 880px; } .whatsapp-chat { max-width: 510px; margin: 0 auto; overflow: hidden; border-radius: 14px; background: #e8ddd4; box-shadow: 0 22px 45px rgba(16,26,36,.25); text-align: left; } .chat-topbar { min-height: 64px; display: flex; align-items: center; gap: 11px; padding: 11px 16px; color: white; background: #075e54; } .chat-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #d9ff6a; color: #075e54; font-weight: 800; } .chat-topbar strong, .chat-topbar small { display: block; } .chat-topbar small { margin-top: 2px; color: #cce4df; font-size: 11px; } .chat-dots { margin-left: auto; letter-spacing: 3px; } .chat-thread { min-height: 244px; max-height: 340px; overflow-y: auto; padding: 18px 13px; background-color: #efe7dd; background-image: radial-gradient(rgba(7,94,84,.09) 1px, transparent 1px); background-size: 14px 14px; } .chat-date { width: fit-content; margin: 0 auto 14px; padding: 5px 8px; border-radius: 4px; color: #65747a; background: #dbe7ed; font: 500 9px "DM Mono", monospace; letter-spacing: .08em; } .bubble { width: fit-content; max-width: 85%; margin: 7px 0; padding: 9px 11px; border-radius: 8px; color: #203036; font-size: 13px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.08); } .bubble-business { background: white; border-top-left-radius: 2px; } .bubble-user { margin-left: auto; background: #d9fdd3; border-top-right-radius: 2px; } .chat-composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; background: #f0f2f5; } .chat-composer input[type="text"], .chat-composer input[type="tel"] { min-width: 0; padding: 12px 14px; border: 0; border-radius: 20px; font: inherit; } .chat-composer input:focus { outline: 3px solid rgba(7,94,84,.28); } .chat-composer button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: white; background: #128c7e; cursor: pointer; font-size: 19px; } .chat-composer button:disabled { opacity: .65; cursor: wait; } .chat-composer .consent { grid-column: span 2; display: flex; gap: 8px; align-items: flex-start; font-size: 10px; line-height: 1.35; } .chat-composer .consent input { margin: 1px 0 0; } .form-status { min-height: 18px; margin: 0; padding: 6px 12px 0; color: #23453e; text-align: center; font-size: 12px; } .whatsapp-number { margin: 24px 0 0; font: 500 12px "DM Mono", monospace; letter-spacing: .06em; }
footer { padding: 19px 24px; text-align: center; color: var(--muted); font: 400 10px "DM Mono", monospace; letter-spacing: .04em; }
.button-light { color: white; background: var(--ink); min-width: 270px; text-align: left; border: 0; cursor: pointer; }
.chat-modal { width: min(510px, calc(100vw - 32px)); margin: auto; padding: 0; border: 0; background: transparent; }
.chat-modal::backdrop { background: rgba(8,17,24,.7); backdrop-filter: blur(5px); }
.chat-modal-shell { position: relative; }
.whatsapp-chat { max-width: none; box-shadow: 0 22px 45px rgba(0,0,0,.35); }
.chat-close { position: absolute; z-index: 1; top: 10px; right: 12px; width: 29px; height: 29px; border: 0; border-radius: 50%; color: white; background: rgba(0,0,0,.18); font-size: 24px; line-height: 1; cursor: pointer; }
.chat-topbar { padding-right: 54px; }
.brand-eyebrow { display: flex; align-items: center; gap: 8px; }
.brand-eyebrow img { width: 20px; height: 20px; padding: 1px; border-radius: 50%; background: white; }
.chat-brand-logo { width: 38px; height: 38px; padding: 2px; border-radius: 50%; background: white; object-fit: contain; }
.whatsapp-fab { position: fixed; z-index: 10; right: 24px; bottom: 24px; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; color: white; background: #25d366; box-shadow: 0 10px 26px rgba(8, 62, 34, .38); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-fab:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 30px rgba(8, 62, 34, .45); }
.whatsapp-fab:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.whatsapp-fab svg { width: 31px; height: 31px; }
.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; }
.chat-composer { grid-template-columns: 1fr auto; }
.chat-composer input[type="text"], .chat-composer input[type="tel"] { grid-column: 1 / -1; }
.chat-composer button { grid-column: 2; }
.chat-composer .consent { display: none; }
.contact-modal-form { overflow: hidden; border-radius: 14px; background: white; box-shadow: 0 22px 45px rgba(0,0,0,.35); }
.contact-modal-header { display: flex; align-items: center; gap: 11px; min-height: 70px; padding: 13px 58px 13px 16px; color: white; background: var(--ink); }
.contact-modal-header small, .contact-modal-header strong { display: block; }
.contact-modal-header small { margin-bottom: 3px; color: var(--lime); font: 500 10px "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.contact-modal-header strong { font-size: 15px; }
.contact-modal-content { padding: 30px; }
.contact-modal-content .eyebrow { margin-bottom: 12px; color: #66737d; }
.contact-modal-content h2 { margin: 0 0 14px; font-size: clamp(30px, 6vw, 42px); }
.contact-modal-content > p:not(.form-status):not(.privacy-note) { margin-bottom: 23px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.contact-fields { display: grid; gap: 7px; }
.contact-fields label { margin-top: 6px; font-size: 13px; font-weight: 800; }
.contact-fields input { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid #c7d0d2; border-radius: 3px; color: var(--ink); font: inherit; }
.contact-fields input:focus { outline: 3px solid rgba(7,94,84,.22); border-color: #075e54; }
.continue-whatsapp { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 24px; padding: 16px 18px; border: 0; border-radius: 3px; color: white; background: #075e54; font: 800 14px "Manrope", sans-serif; cursor: pointer; }
.continue-whatsapp span { font-size: 21px; }
.continue-whatsapp:disabled { opacity: .65; cursor: wait; }
.privacy-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.privacy-note a { color: inherit; text-underline-offset: 2px; }
.privacy-page { color: var(--ink); background: #f7f8f6; }
.privacy-content { max-width: 760px; margin: 0 auto; padding: clamp(36px, 8vw, 96px) 24px; }
.privacy-back { display: inline-block; margin-bottom: 72px; color: var(--ink); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.privacy-content h1 { max-width: 670px; margin-bottom: 20px; font-size: clamp(54px, 10vw, 100px); }
.privacy-updated { margin-bottom: 55px; color: var(--muted); font: 500 11px "DM Mono", monospace; }
.privacy-content section { padding: 28px 0; border-top: 1px solid var(--line); }
.privacy-content section h2 { margin-bottom: 14px; font-size: clamp(28px, 5vw, 42px); }
.privacy-content section p { max-width: 670px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.specs-data { min-width: 0; }
.specs-note { margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.sheet-download { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 18px; padding: 13px 15px; color: var(--ink); border: 1px solid var(--ink); font-size: 12px; font-weight: 800; text-decoration: none; }
.sheet-download span { font-size: 19px; line-height: 1; }
.sheet-download:hover { color: white; background: var(--ink); }
.comparison { display: grid; grid-template-columns: 1fr 1fr; width: min(1280px, calc(100% - clamp(48px, 10vw, 160px))); margin-inline: auto; gap: 60px; padding: 0 0 clamp(90px, 12vw, 150px); border-top: 1px solid var(--line); }
.comparison .section-heading { padding-top: clamp(70px, 10vw, 130px); }
.comparison-copy { padding-top: clamp(70px, 10vw, 130px); }
.comparison-copy > p:first-child { max-width: 530px; margin: 0 0 28px; color: var(--ink-soft); font-size: 18px; line-height: 1.55; }
.comparison-grid { display: grid; gap: 12px; }
.comparison-grid article { padding: 24px; border: 1px solid var(--line); background: #f7f8f6; }
.comparison-grid article:first-child { color: white; border-color: var(--ink); background: var(--ink); }
.comparison-grid span { display: block; margin-bottom: 26px; color: var(--muted); font: 500 10px "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.comparison-grid article:first-child span { color: var(--lime); }
.comparison-grid strong { display: block; margin-bottom: 10px; font-size: 22px; letter-spacing: -.04em; }
.comparison-grid p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.comparison-grid article:first-child p { color: #d4dcdd; }
.comparison-footnote { margin: 16px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.faq { display: grid; grid-template-columns: 1fr 1fr; width: min(1280px, calc(100% - clamp(48px, 10vw, 160px))); margin-inline: auto; gap: 60px; padding: clamp(84px, 11vw, 150px) 0; border-top: 1px solid var(--line); }
.faq-content { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 21px 34px 21px 0; color: var(--ink); cursor: pointer; font-size: 16px; font-weight: 800; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; top: 15px; right: 0; color: var(--muted); font: 400 27px/1 "DM Mono", monospace; }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 570px; margin: 0; padding: 0 24px 22px 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.faq details p a { color: var(--ink); font-weight: 800; text-underline-offset: 3px; }
.gallery-trigger { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.gallery-trigger img { display: block; width: 100%; height: 100%; }
.gallery-trigger:focus-visible { outline: 4px solid var(--lime); outline-offset: -4px; }
.lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: white; background: rgba(8, 17, 24, .98); }
.lightbox::backdrop { background: rgba(8, 17, 24, .8); }
.lightbox-shell { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr) 68px; align-items: center; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; }
.lightbox-figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; max-width: 100%; max-height: 100%; margin: 0; }
.lightbox-figure img { display: block; max-width: 100%; max-height: calc(100dvh - 108px); margin: auto; object-fit: contain; }
.lightbox-figure figcaption { padding: 15px 4px 0; color: #d4dcdd; text-align: center; font: 500 11px "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.lightbox-close, .lightbox-nav { display: grid; place-items: center; border: 0; color: white; background: rgba(255, 255, 255, .13); cursor: pointer; }
.lightbox-close { position: absolute; z-index: 1; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; font-size: 30px; line-height: 1; }
.lightbox-nav { width: 48px; height: 48px; border-radius: 50%; font-size: 28px; }
.lightbox-prev { justify-self: start; }
.lightbox-next { justify-self: end; }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, .25); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.hero--reference { isolation: isolate; }
.hero--reference::before { content: ""; position: absolute; inset: 78px 0 0 42%; z-index: 0; opacity: .9; background: radial-gradient(ellipse at 56% 52%, var(--reference-glow) 0 18%, transparent 19%), linear-gradient(145deg, transparent 28%, rgba(255,255,255,.16) 28% 30%, transparent 30% 52%, rgba(255,255,255,.09) 52% 54%, transparent 54%); }
.hero--blue { --reference-glow: #2866af; }
.hero--gray { --reference-glow: #89949a; }
.hero--white { --reference-glow: #dce2e0; }
.reference-visual { position: absolute; z-index: 1; right: clamp(24px, 7vw, 112px); bottom: clamp(80px, 13vw, 170px); width: min(42vw, 540px); padding: clamp(26px, 4vw, 54px); border: 1px solid rgba(255,255,255,.27); color: white; background: rgba(16,26,36,.32); backdrop-filter: blur(8px); }
.reference-visual span { display: block; color: var(--lime); font: 500 11px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.reference-visual strong { display: block; margin: 14px 0 9px; font-size: clamp(30px, 4vw, 56px); letter-spacing: -.06em; line-height: .96; }
.reference-visual p { max-width: 350px; margin: 0; color: #d4dcdd; font-size: 13px; line-height: 1.5; }
.reference-notice { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 10px 13px; color: var(--ink); background: var(--lime); font: 500 11px "DM Mono", monospace; letter-spacing: .04em; }
.reference-notice::before { content: "i"; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 50%; font-weight: 800; }
.reference-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reference-gallery article { min-height: 230px; padding: 26px; color: white; background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 45%), var(--ink); display: flex; flex-direction: column; justify-content: flex-end; }
.reference-gallery article:nth-child(2) { background-color: #364a54; }
.reference-gallery article:nth-child(3) { background-color: #7f898b; }
.reference-gallery span { color: var(--lime); font: 500 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.reference-gallery strong { margin-top: 10px; font-size: 22px; letter-spacing: -.04em; }
.catalog-hero { padding: clamp(34px, 6vw, 80px) clamp(24px, 5vw, 80px) clamp(62px, 10vw, 130px); color: white; background: var(--ink); }
.catalog-topline, .catalog-content { max-width: 1280px; margin: 0 auto; }
.catalog-topline { display: flex; justify-content: space-between; gap: 20px; color: #b5c0c2; font: 500 11px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.catalog-hero h1 { max-width: 900px; margin: clamp(90px, 14vw, 180px) 0 22px; font-size: clamp(60px, 10vw, 142px); }
.catalog-hero p { max-width: 560px; margin: 0; color: #d4dcdd; font-size: clamp(17px, 2vw, 23px); line-height: 1.45; }
.catalog-content { padding: clamp(64px, 9vw, 120px) clamp(24px, 5vw, 80px); }
.catalog-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.catalog-intro h2 { max-width: 600px; font-size: clamp(36px, 5vw, 66px); }
.catalog-count { color: var(--muted); font: 500 11px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.catalog-card { position: relative; min-height: 420px; padding: clamp(24px, 3vw, 42px); overflow: hidden; color: white; background: var(--ink); text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .2s ease; }
.catalog-card:hover { transform: translateY(-4px); }
.catalog-card::before { content: ""; position: absolute; inset: 0; opacity: .8; background: radial-gradient(circle at 74% 32%, var(--card-glow, #526873) 0 10%, transparent 29%), linear-gradient(145deg, transparent 30%, rgba(255,255,255,.14) 30% 32%, transparent 32%); }
.catalog-card > * { position: relative; z-index: 1; }
.catalog-card--polo { --card-glow: #697b7b; }
.catalog-card--polo::before { opacity: .72; background: linear-gradient(0deg, rgba(16,26,36,.9), rgba(16,26,36,.1) 72%), url("./images/web/IMG_0891-private.webp") center / cover; }
.catalog-card--jetta { --card-glow: #2866af; }
.catalog-card--march { --card-glow: #89949a; }
.catalog-card--xtrail { --card-glow: #dce2e0; }
.catalog-card .eyebrow { margin-bottom: auto; color: var(--lime); }
.catalog-card h3 { max-width: 500px; margin: 0 0 18px; font-size: clamp(32px, 4vw, 54px); letter-spacing: -.06em; line-height: .94; }
.catalog-card-meta { display: flex; justify-content: space-between; gap: 18px; align-items: end; color: #d4dcdd; font-size: 14px; }
.catalog-card-meta strong { color: white; font-size: 20px; letter-spacing: -.04em; }
.catalog-card-note { margin-top: 12px; color: #d4dcdd; font-size: 12px; line-height: 1.45; }
.gallery-grid--ref { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.photo-credit { max-width: 760px; margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.photo-credit a { color: inherit; text-underline-offset: 2px; }
.gallery-heading strong { color: var(--ink); }
.catalog-card--minipc { --card-glow: #5f8f9c; }
.catalog-card--jetta::before { opacity: .72; background: linear-gradient(0deg, rgba(16,26,36,.9), rgba(16,26,36,.15) 72%), url("./images/ref/jetta-frontal.webp") center / cover; }
.catalog-card--march::before { opacity: .72; background: linear-gradient(0deg, rgba(16,26,36,.9), rgba(16,26,36,.15) 72%), url("./images/ref/march-frontal.webp") center / cover; }
.catalog-card--xtrail::before { opacity: .72; background: linear-gradient(0deg, rgba(16,26,36,.9), rgba(16,26,36,.15) 72%), url("./images/ref/xtrail-frontal.webp") center / cover; }
.catalog-card-meta { flex-wrap: wrap; } .catalog-card-meta strong { white-space: nowrap; }
.catalog-content + .catalog-content { padding-top: clamp(52px, 7vw, 96px); border-top: 1px solid var(--line); }
.catalog-card--category { min-height: 258px; }
.catalog-card--category h3 { margin-bottom: 14px; font-size: clamp(30px, 3.6vw, 46px); }
.catalog-card--category .catalog-card-meta span { max-width: 260px; line-height: 1.4; }
.catalog-card--category .catalog-card-meta strong { font: 500 12px "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.catalog-card--vehiculos { --card-glow: #2866af; }
.catalog-card--dispositivos { --card-glow: #9ab3a6; }
@media (max-width: 760px) { .catalog-hero h1 { margin-top: 80px; } .catalog-content { padding-inline: 24px; } .catalog-intro { display: block; } .catalog-intro h2 { margin-bottom: 20px; } .catalog-grid { grid-template-columns: 1fr; } .catalog-card { min-height: 340px; } }
@media (max-width: 760px) { .catalog-card--category { min-height: 210px; } .catalog-card--category .catalog-card-meta { display: block; } .catalog-card--category .catalog-card-meta span { display: block; max-width: none; } .catalog-card--category .catalog-card-meta strong { display: block; margin-top: 9px; } }
/* En movil el recuadro de referencia va en el flujo, no en absoluto: posicionarlo contra el borde
   inferior lo hacia chocar con el lede y con el precio en cuanto el texto crecia una linea.
   Sigue siendo `relative` para conservar su z-index sobre el degradado de .hero::after. */
@media (max-width: 760px) { .hero--reference::before { inset: auto 0 0; height: 55%; } .reference-visual { position: relative; right: auto; bottom: auto; width: auto; margin: 30px 0 26px; padding: 22px; } .reference-visual p { max-width: none; } .reference-visual strong { font-size: 34px; } .reference-gallery { grid-template-columns: 1fr; } .reference-gallery article { min-height: 170px; } }
@media (max-width: 760px) { .hero { min-height: 720px; padding-inline: 24px; } .hero-copy { align-self: start; padding-top: 78px; } .hero-photo { width: 100%; height: 63%; bottom: 0; object-position: center; opacity: .62; } .hero::after { background: linear-gradient(180deg, rgba(16,26,36,.98) 0%, rgba(16,26,36,.82) 45%, rgba(16,26,36,.4) 100%); } .hero-footer { align-items: start; flex-direction: column; } .button-primary { width: 100%; } .facts { grid-template-columns: 1fr 1fr; } .facts article { min-height: 114px; } .details, .specs, .gallery-heading, .comparison, .faq { grid-template-columns: 1fr; gap: 38px; padding-inline: 24px; } .comparison, .faq { width: auto; margin-inline: 0; } .comparison { padding-block: 0 90px; } .comparison .section-heading, .comparison-copy { padding-top: 64px; } .comparison-copy { padding-top: 0; } .faq { padding-block: 84px; } .gallery { padding-inline: 0; } .gallery-heading { padding-inline: 24px; } .gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .gallery-item, .gallery-item-wide { min-height: 190px; grid-column: auto; grid-row: auto; } .gallery-item-wide { grid-column: span 2; min-height: 320px; } .gallery-item img { min-height: 190px; } .lightbox-shell { display: block; padding: 12px; } .lightbox-figure { display: flex; flex-direction: column; justify-content: center; height: 100%; } .lightbox-figure img { width: auto; max-width: calc(100vw - 24px); max-height: calc(100dvh - 92px); } .lightbox-nav { position: absolute; z-index: 1; top: 50%; width: 44px; height: 44px; font-size: 24px; transform: translateY(-50%); } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } .lightbox-close { top: 12px; right: 12px; width: 42px; height: 42px; } .whatsapp-chat, .contact-modal-form { border-radius: 10px; } .contact-modal-content { padding: 25px 20px; } .whatsapp-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; } }