@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  --navy: #11497f;
  --night: #0b2545;
  --steel: #666766;
  --sky: #4c93d6;
  --smoke: #e9ecef;
  --white: #ffffff;
  --ink: #0b2545;
  --line: #dde2e7;
  --font-display: "Big Shoulders Display", "Poppins", sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --wrap: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* Typography */
.eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sky); display: block; margin-bottom: 18px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 1.12; letter-spacing: .02em; }
h1 { font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; line-height: 1; }
h2 { font-size: clamp(32px, 3.6vw, 50px); font-weight: 800; line-height: 1.02; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
h1 em, h2 em { font-style: normal; color: var(--sky); }
.lead { font-size: 14px; color: var(--steel); max-width: 380px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 14px; padding: 15px 24px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--night); background: transparent; color: var(--night); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.btn:hover { background: var(--night); color: var(--white); }
.btn-solid { background: var(--sky); border-color: var(--sky); color: var(--night); }
.btn-solid:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn-light { border-color: rgba(255,255,255,.55); color: var(--white); }
.btn-light:hover { background: var(--white); color: var(--night); }
.btn-sm { padding: 12px 18px; }
.btn .ico { width: 16px; height: 16px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(11,37,69,.06); transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease; }
.site-header .bar { display: flex; align-items: center; gap: 16px; height: 72px; }
.brand img { height: 42px; width: auto; }
.nav { display: flex; gap: 36px; margin: 0 auto; }
.nav a { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.nav a:hover { color: var(--sky); border-color: var(--sky); }
.burger { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--night); transition: transform .2s; }
.burger span:first-child { top: 15px; } .burger span:last-child { top: 23px; }
.site-header.open .burger span:first-child { transform: translateY(4px) rotate(45deg); }
.site-header.open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f4f6f8 0%, #e9ecef 100%); min-height: 560px; }
.hero::before { content: ""; position: absolute; right: -8%; top: -30%; width: 78%; height: 150%; background: linear-gradient(135deg, #fff 0%, #dfe4e9 60%, #cfd6dd 100%); border-radius: 50% 0 0 50% / 60% 0 0 60%; opacity: .9; }
.hero::after { content: ""; position: absolute; right: 6%; top: 8%; width: 46%; height: 70%; border: 1px solid rgba(76,147,214,.25); border-radius: 50%; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; min-height: 560px; gap: 20px; }
.hero-copy { padding: 56px 0; }
.hero-copy h1 { margin-bottom: 26px; }
.hero-copy .lead { margin-bottom: 34px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art { margin-right: -20px; filter: drop-shadow(0 30px 30px rgba(11,37,69,.22)); }

/* Stats */
.stats { background: var(--white); padding: 34px 0 30px; border-bottom: 1px solid var(--line); }
.stats-title { text-align: center; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--steel); margin-bottom: 26px; }
.stats-grid { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); }
.stat { text-align: center; padding: 6px 12px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat .ico { margin: 0 auto 10px; width: 24px; height: 24px; color: var(--sky); }
.stat strong { display: block; font-family: var(--font-display); font-size: 39px; font-weight: 600; line-height: 1.1; }
.stat span { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }

/* Sections */
.section { padding: 36px 0 72px }
.section-smoke { background: #f6f7f9; }
.split { display: grid; grid-template-columns: .72fr 2.28fr; gap: 56px; align-items: center; }
.split .lead { margin: 18px 0 30px; }

/* Brand cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { display: block; background: #f1f3f5; border: 1px solid transparent; transition: border-color .2s, transform .25s, box-shadow .25s; }
.card:hover { border-color: var(--sky); transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(11,37,69,.35); }
.card .art { aspect-ratio: 4/2.6; display: grid; place-items: center; padding: 18px; background: radial-gradient(ellipse at 50% 70%, #fff 0%, #eef1f4 70%); overflow: hidden; }
.card .art img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.card:hover .art img { transform: scale(1.05); }
.card .body { padding: 16px 20px 22px; }
.card .body small { display: block; margin-top: 4px; font-size: 12px; color: var(--steel); }
.card .body .row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); font-weight: 500; }
.card .body .row .ico { width: 16px; height: 16px; }
.tag { position: absolute; top: 12px; left: 12px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; background: var(--night); color: #fff; padding: 4px 9px; }
.card .art { position: relative; }

/* Dark band */
.dark { background: var(--night); color: var(--white); padding: 64px 0; position: relative; overflow: hidden; }
.dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 100%, rgba(76,147,214,.22), transparent 55%); }
.dark .wrap { position: relative; display: grid; grid-template-columns: .9fr 1.2fr 1fr; gap: 44px; align-items: center; }
.dark .lead { color: #b3c2d4; margin: 18px 0 28px; }
.dark-art { display: grid; place-items: center; }
.dark-art .ring { width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(76,147,214,.5); display: grid; place-items: center; position: relative; box-shadow: 0 0 60px rgba(76,147,214,.25) inset; }
.dark-art .ring::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed rgba(76,147,214,.4); }
.dark-art .ring b { font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 1; text-align: center; }
.dark-art .ring b .top { margin: 0 0 6px; }
.dark-art .ring b .top:empty { display: none; }
.dark-art .ring b span { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 10px; letter-spacing: .22em; color: var(--sky); text-transform: uppercase; }
.feat { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.feat:last-child { border: 0; }
.feat .ico { width: 24px; height: 24px; color: var(--sky); margin-top: 2px; }
.feat h3 { font-size: 17px; letter-spacing: .14em; margin-bottom: 4px; }
.feat p { font-size: 13px; color: #b3c2d4; }

/* Feature (driver focused) */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.panel { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--navy), var(--night)); position: relative; overflow: hidden; display: grid; place-items: center; }
.panel::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.035) 38px 40px); }
.panel img { width: 84%; position: relative; filter: drop-shadow(0 24px 24px rgba(0,0,0,.4)); }
.feature h2 { margin-bottom: 18px; }
.feature .lead { max-width: 440px; margin-bottom: 28px; }
.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.mini div { font-size: 11px; color: var(--steel); line-height: 1.5; }
.mini .ico { width: 26px; height: 26px; margin-bottom: 10px; color: var(--navy); }
.mini b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }

/* Coverage */
.coverage { display: grid; grid-template-columns: .8fr 1.8fr; gap: 56px; align-items: center; }
.map { position: relative; aspect-ratio: 16/6.4; background: linear-gradient(135deg, #cfd9e4, #e9ecef); overflow: hidden; }
.map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(17,73,127,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(17,73,127,.08) 1px, transparent 1px); background-size: 40px 40px; }
.map .road { position: absolute; left: -5%; right: -5%; top: 62%; height: 3px; background: repeating-linear-gradient(90deg, var(--navy) 0 18px, transparent 18px 30px); transform: rotate(-6deg); opacity: .5; }
.pin { position: absolute; transform: translate(-50%, -50%); text-align: center; }
.pin i { display: block; width: 14px; height: 14px; margin: 0 auto 6px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 6px rgba(76,147,214,.28); }
.pin span { font-family: var(--font-display); font-size: 14.5px; letter-spacing: .12em; text-transform: uppercase; background: var(--white); padding: 4px 10px; box-shadow: 0 4px 14px rgba(11,37,69,.15); }
.badge { position: absolute; right: 24px; top: 20px; width: 128px; height: 128px; border-radius: 50%; border: 2px solid var(--sky); background: rgba(255,255,255,.85); display: grid; place-items: center; text-align: center; font-family: var(--font-display); font-size: 14.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; padding: 18px; }
.badge b { display: block; font-size: 28px; font-weight: 500; }

/* Trust */
.trust { padding: 52px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; }
.trust h2 { font-size: 30px; }
.quote { font-size: 13px; color: var(--steel); }
.quote cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--font-display); font-size: 14.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.logos { display: flex; justify-content: center; gap: 64px; margin-top: 40px; flex-wrap: wrap; }
.logos span { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .1em; text-transform: uppercase; color: #9aa3ad; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1.9fr 1fr; gap: 28px; align-items: start; }
.contact h2 { margin-bottom: 14px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .full { grid-column: 1 / -1; }
.field { width: 100%; padding: 14px 16px; border: 1px solid var(--line); background: var(--white); font-size: 13px; outline: none; transition: border-color .2s; }
.field:focus { border-color: var(--sky); }
textarea.field { min-height: 100px; resize: vertical; }
.contact-card { background: var(--night); color: var(--white); padding: 32px 28px; }
.contact-card h3 { margin-bottom: 10px; font-size: 18px; }
.contact-card p { font-size: 13px; color: #b3c2d4; margin-bottom: 20px; }
.contact-card .btn { width: 100%; justify-content: space-between; margin-bottom: 10px; }
.contact-card a.line { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 6px 0; color: #dbe5f0; }
.contact-card a.line .ico { color: var(--sky); width: 18px; height: 18px; }

/* Footer */
.site-footer { background: #f6f7f9; border-top: 1px solid var(--line); padding-top: 48px; }
.site-footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 36px; }
.site-footer img { height: 46px; width: auto; filter: none; }
.f-brand img { content: url("../img/logo.svg"); }
.f-brand p { margin-top: 14px; font-size: 12px; color: var(--steel); max-width: 260px; }
.site-footer h4 { font-family: var(--font-display); font-size: 14.5px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a, .site-footer span { display: block; font-size: 12px; color: var(--steel); margin-bottom: 8px; }
.site-footer a:hover { color: var(--sky); }
.site-footer .legal { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 18px; padding-bottom: 22px; }
.site-footer .legal span { font-size: 10.5px; margin: 0; }

/* Catalog */
.page-hero { background: linear-gradient(180deg, #f4f6f8, #e9ecef); padding: 48px 0 40px; border-bottom: 1px solid var(--line); }
.crumbs { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 16px; }
.crumbs a:hover { color: var(--sky); }
.page-hero h1 { font-size: clamp(40px, 5vw, 68px); margin-bottom: 14px; }
.page-hero .lead { max-width: 560px; }
.brand-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.chip { padding: 11px 20px; font-family: var(--font-display); font-weight: 600; font-size: 15.2px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line); background: var(--white); cursor: pointer; transition: all .2s; }
.chip:hover { border-color: var(--sky); }
.chip.on { background: var(--night); color: var(--white); border-color: var(--night); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.toolbar .filters { display: flex; flex-direction: column; gap: 0; }
.toolbar .count { font-size: 12px; color: var(--steel); }
.brand-block { margin-bottom: 64px; }
.brand-block:last-child { margin-bottom: 0; }
.brand-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand-head p { font-size: 13px; color: var(--steel); max-width: 520px; margin-top: 8px; }
.empty { padding: 60px 0; text-align: center; color: var(--steel); }

/* Unit detail */
.unit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.gallery .main { aspect-ratio: 16/10; background: radial-gradient(ellipse at 50% 75%, #fff, #e9ecef); display: grid; place-items: center; padding: 24px; }
.gallery .main img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(11,37,69,.22)); }
.unit-info h1 { font-size: clamp(34px, 4vw, 52px); margin-bottom: 10px; }
.unit-info .price { font-family: var(--font-display); font-size: 23.4px; margin: 14px 0 22px; color: var(--navy); }
.unit-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 8px; }
.ticks { list-style: none; margin-top: 22px; }
.ticks li { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ticks .ico { color: var(--sky); width: 18px; height: 18px; }
.specs { width: 100%; border-collapse: collapse; margin-top: 8px; }
.specs th, .specs td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.specs th { width: 42%; font-family: var(--font-display); font-weight: 600; font-size: 15.2px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.note { font-size: 11px; color: var(--steel); margin-top: 14px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Responsive */
@media (max-width: 1000px) {
  .hero .wrap, .split, .feature, .coverage, .unit { grid-template-columns: 1fr; }
  .hero-art { margin: 0 -20px 20px; }
  .hero-copy { padding-bottom: 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .dark .wrap { grid-template-columns: 1fr; }
  .dark-art { order: -1; }
  .contact { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid > :first-child { grid-column: 1 / -1; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .stat:nth-child(4) { border-left: 0; }
  .site-footer .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .nav { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--white); border-bottom: 1px solid var(--line); display: none; margin: 0; }
  .nav a { padding: 16px 32px; border: 0; border-top: 1px solid var(--line); }
  .site-header.open .nav { display: flex; }
  .burger { display: block; margin-left: auto; }
  .site-header .bar > .btn { display: none; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .section { padding: 20px 0; }
  .cards { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: 0 !important; }
  .mini { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .badge { width: 96px; height: 96px; font-size: 8px; right: 10px; top: 10px; padding: 10px; }
  .badge b { font-size: 20px; }
  .site-footer .grid { grid-template-columns: 1fr; }
  .site-footer .legal { flex-direction: column; gap: 6px; }
  .logos { gap: 28px; }
}

/* WhatsApp bubble */
.wa-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(11,37,69,.35); transition: transform .2s; }
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width: 32px; height: 32px; }
.wa-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-pulse 2.4s ease-out infinite; }
@keyframes wa-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-fab::after { animation: none; } }

/* Modals */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(11,37,69,.6); backdrop-filter: blur(4px); }
.modal.open { display: flex; }
.modal-box { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: var(--white); padding: 36px 32px 30px; animation: modal-in .25s ease; }
@keyframes modal-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-box h2 { font-size: 34px; margin-bottom: 8px; }
.modal-box > p { font-size: 13px; color: var(--steel); margin-bottom: 22px; }
.modal-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--steel); }
.modal-x:hover { color: var(--night); }
.wa-list { display: grid; gap: 10px; }
.wa-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.wa-item:hover { border-color: #25d366; background: #f3fcf6; }
.wa-item b { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.wa-item small { display: block; font-size: 12px; color: var(--steel); margin-top: 4px; }
.wa-item .ico { color: #25d366; width: 24px; height: 24px; }
.pick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pick label { cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; transition: all .2s; }
.pick input:checked + span { background: var(--night); color: #fff; border-color: var(--night); }
.pick input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }
.modal .form { gap: 10px; }
@media (max-width: 600px) { .modal-box { padding: 30px 20px 22px; } .wa-fab { right: 14px; bottom: 14px; } }

/* Agencias */
.agency-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; flex-wrap: wrap; }
.agencies { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.agency { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.agency .photo { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--navy), var(--night)); overflow: hidden; }
.agency .photo img { width: 100%; height: 100%; object-fit: cover; }
.agency .ph { height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.agency .ph .ico { width: 34px; height: 34px; color: var(--sky); }
.agency .info { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.agency h3 { font-size: 32px; font-weight: 800; line-height: 1; }
.agency small { display: block; margin: 6px 0 16px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); font-weight: 500; }
.agency ul { list-style: none; margin-bottom: 22px; }
.agency li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--steel); }
.agency li .ico { color: var(--navy); width: 18px; height: 18px; margin-top: 2px; }
.agency li a:hover { color: var(--sky); }
.agency .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
@media (max-width: 820px) { .agencies { grid-template-columns: 1fr; } }
.wa-item { justify-content: flex-start; }
.wa-item .wa-logo { width: 48px; height: 48px; flex: none; }
.wa-item .wa-txt { flex: 1; }
.wa-item > .ico { margin-left: auto; }

/* Logos de marca */
.chip { display: inline-flex; align-items: center; gap: 10px; }
.chip img { width: 22px; height: 22px; }
.brand-id { display: flex; gap: 20px; align-items: center; }
.brand-logo { width: 72px; height: 72px; flex: none; }
.card-logo { display: inline-block; width: 28px; height: 28px; vertical-align: middle; margin-right: 10px; }
@media (max-width: 600px) { .brand-logo { width: 52px; height: 52px; } }
.chip.on img { filter: brightness(0) invert(1); }
.chip img { transition: filter .2s; }

/* Pasos */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { padding: 28px 26px 30px; background: #f6f7f9; border-top: 3px solid var(--sky); }
.step b { display: block; font-family: var(--font-display); font-size: 64px; font-weight: 800; line-height: 1; color: var(--sky); margin-bottom: 14px; }
.step h3 { margin-bottom: 8px; font-size: 24px; }
.step p { font-size: 13px; color: var(--steel); }
.step-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.logos a { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: .06em; text-transform: uppercase; color: #8a94a0; transition: color .2s; }
.logos a img { width: 36px; height: 36px; filter: grayscale(1); opacity: .6; transition: filter .2s, opacity .2s; }
.logos a:hover { color: var(--night); }
.logos a:hover img { filter: none; opacity: 1; }

/* Banda CTA */
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; background: var(--navy); color: var(--white); padding: 36px 40px; margin: 8px 0 0; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.cta-band h2 { font-size: clamp(30px, 3.4vw, 44px); }
.cta-band p { font-size: 13px; color: #c3d4e8; margin-top: 6px; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hdr-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.hdr-phone .ico { width: 16px; height: 16px; color: var(--sky); }
.hdr-phone { display: none; } /* oculto en escritorio; se muestra en tablet y móvil */
@media (max-width: 1100px) { .hdr-phone { display: inline-flex; margin-left: auto; } }
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cta-band { padding: 28px 22px; } .logos a { font-size: 22px; } }
.pick span img { width: 26px; height: 26px; transition: filter .2s; }
.pick input:checked + span img { filter: brightness(0) invert(1); }

/* Header al hacer scroll */
.brand img { transition: filter .45s ease; }
.nav a, .hdr-phone, .hdr-phone .ico, .burger span { transition: color .45s ease, background-color .45s ease, border-color .2s, transform .2s; }
.site-header.scrolled { background: var(--navy); border-bottom-color: rgba(255,255,255,.12); box-shadow: 0 8px 28px -12px rgba(11,37,69,.55); }
.site-header.scrolled .brand img { filter: brightness(0) invert(1); }
.site-header.scrolled .nav a { color: var(--white); }
.site-header.scrolled .nav a:hover { color: var(--white); border-color: var(--sky); }
.site-header.scrolled .hdr-phone { color: var(--white); }
.site-header.scrolled .hdr-phone .ico { color: #a9cdf0; }
.site-header.scrolled .burger span { background: var(--white); }
@media (max-width: 820px) {
  .site-header.scrolled .nav { background: var(--navy); border-bottom-color: rgba(255,255,255,.12); }
  .site-header.scrolled .nav a { border-top-color: rgba(255,255,255,.12); }
}

/* Botón "Llamar" sutil del header */
.hdr-phone { padding: 10px 16px; border: 1px solid currentColor; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; transition: color .45s ease, background-color .2s, border-color .45s ease; }
.hdr-phone:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.hdr-phone .ico { color: inherit; }
.site-header.scrolled .hdr-phone { color: var(--white); border-color: rgba(255,255,255,.55); }
.site-header.scrolled .hdr-phone .ico { color: inherit; }
.site-header.scrolled .hdr-phone:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.site-header.scrolled .btn-solid:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

/* Velo del menú móvil */
.nav-veil { position: fixed; inset: 0; z-index: 49; background: rgba(11,37,69,.35); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.nav-veil.show { opacity: 1; visibility: visible; }
@media (min-width: 821px) { .nav-veil { display: none; } }

/* Contacto en fondo oscuro */
.section-dark { background: var(--night); color: var(--white); position: relative; overflow: hidden; }
.section-dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 0%, rgba(76,147,214,.2), transparent 55%); pointer-events: none; }
.section-dark .wrap { position: relative; }
.section-dark .lead { color: #b3c2d4; }
.section-dark .field { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--white); }
.section-dark .field::placeholder { color: #93a6bd; }
.section-dark .field:focus { border-color: var(--sky); background: rgba(255,255,255,.1); }
.section-dark select.field option { color: var(--night); }
.section-dark .contact-card { background: var(--navy); border: 1px solid rgba(255,255,255,.14); }
.section-dark .contact-card p, .section-dark .contact-card a.line { color: #d3e1f0; }
.section-dark .contact-card a.line .ico { color: #a9cdf0; }

/* ===== Página de detalle de unidad ===== */
.u-hero { background: linear-gradient(180deg, #f4f6f8, #e9ecef); padding: 36px 0 0; overflow: hidden; position: relative; }
.u-hero::before { content: ""; position: absolute; right: -8%; top: -20%; width: 70%; height: 140%; background: linear-gradient(135deg, #fff, #dfe4e9 70%); border-radius: 50% 0 0 50% / 60% 0 0 60%; opacity: .85; }
.u-hero .wrap { position: relative; }
.u-hero-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; align-items: center; padding: 18px 0 40px; }
.u-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); margin-bottom: 14px; font-weight: 500; }
.u-brand img { width: 28px; height: 28px; }
.u-hero h1 { font-size: clamp(40px, 5.2vw, 76px); margin-bottom: 14px; }
.u-price { margin: 22px 0 6px; }
.u-price small { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }
.u-price strong { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--navy); line-height: 1.1; }
.u-hero-art { filter: drop-shadow(0 28px 26px rgba(11,37,69,.22)); }
.u-hero-art img { width: 100%; max-height: 420px; object-fit: contain; }

.u-subnav { position: sticky; top: 72px; z-index: 30; background: var(--white); border-bottom: 1px solid var(--line); overflow-x: auto; }
.u-subnav .wrap { display: flex; gap: 6px; white-space: nowrap; }
.u-subnav a { padding: 16px 16px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--steel); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.u-subnav a:hover, .u-subnav a.on { color: var(--navy); border-color: var(--sky); }

.u-keys { background: var(--white); padding: 34px 0; border-bottom: 1px solid var(--line); }
.u-keys-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.u-key { text-align: center; padding: 6px 10px; border-left: 1px solid var(--line); }
.u-key:first-child { border-left: 0; }
.u-key .ico { width: 24px; height: 24px; margin: 0 auto 10px; color: var(--sky); }
.u-key strong { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.1; }
.u-key span { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }

.u-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 36px; }
.u-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.u-strip > div, .u-block-img { aspect-ratio: 4/3; background: radial-gradient(ellipse at 50% 75%, #fff, #e9ecef); overflow: hidden; }
.u-strip img, .u-block-img > img, .g-tile img { width: 100%; height: 100%; object-fit: cover; }
.ph-img { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; background: linear-gradient(135deg, #eef1f4, #dde3e9); }
.ph-img img { width: 62%; height: auto !important; object-fit: contain !important; opacity: .4; filter: grayscale(.6); }
.ph-img span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8a94a0; }

.u-blocks { display: grid; gap: 28px; }
.u-block { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; background: var(--white); }
.u-block.flip .u-block-img { order: 2; }
.u-block-img { aspect-ratio: 16/10; }
.u-block-txt { padding: 28px 36px; }
.u-block-txt b { display: block; font-family: var(--font-display); font-size: 56px; font-weight: 800; line-height: 1; color: var(--sky); margin-bottom: 10px; }
.u-block-txt h3 { font-size: 30px; margin-bottom: 10px; }
.u-block-txt p { font-size: 14px; color: var(--steel); max-width: 420px; }

.u-dl { display: flex; gap: 12px; flex-wrap: wrap; }
.dl-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); background: var(--white); min-width: 220px; transition: border-color .2s, background .2s; }
.dl-card:hover { border-color: var(--sky); background: #f4f9fe; }
.dl-card.off { opacity: .55; cursor: default; }
.dl-card.off:hover { border-color: var(--line); background: var(--white); }
.dl-card .ico { width: 24px; height: 24px; color: var(--navy); }
.dl-card span { flex: 1; }
.dl-card b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.dl-card small { font-size: 11px; color: var(--steel); letter-spacing: .1em; text-transform: uppercase; }
.u-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; align-items: start; }
.u-spec { border: 1px solid var(--line); background: var(--white); }
.u-spec summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.u-spec summary::-webkit-details-marker { display: none; }
.u-spec summary::after { content: "+"; font-family: var(--font-body); font-size: 22px; color: var(--sky); transition: transform .2s; }
.u-spec[open] summary::after { transform: rotate(45deg); }
.u-spec .specs { margin: 0; padding: 0 22px 8px; }
.u-spec .specs th { width: 52%; }

.u-bodies { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.u-body { background: var(--white); padding: 28px 20px; text-align: center; border: 1px solid var(--line); }
.u-body .ico { width: 34px; height: 34px; margin: 0 auto 12px; color: var(--sky); }
.u-body span { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }

.u-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.g-tile { aspect-ratio: 4/3; border: 0; padding: 0; background: #e9ecef; overflow: hidden; cursor: zoom-in; }
.g-tile.off { cursor: default; }
.g-tile img { transition: transform .4s; }
.g-tile:hover img { transform: scale(1.05); }
.g-tile.off:hover img { transform: none; }
.u-video { aspect-ratio: 16/9; background: #000; }
.u-video iframe { width: 100%; height: 100%; border: 0; }

.u-quote { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.u-ticks li { border-color: rgba(255,255,255,.14); color: #d3e1f0; }
.u-ticks .ico { color: var(--sky); }

.lightbox { background: rgba(5,15,30,.92); }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.lb-x { color: #fff; top: 18px; right: 22px; font-size: 38px; position: absolute; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 34px; cursor: pointer; }
.lb-nav:hover { background: var(--sky); }
.lb-nav.prev { left: 18px; } .lb-nav.next { right: 18px; }

@media (max-width: 1000px) {
  .u-hero-grid, .u-intro, .u-block, .u-quote { grid-template-columns: 1fr; gap: 20px; }
  .u-block.flip .u-block-img { order: 0; }
  .u-keys-grid { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .u-key:nth-child(4) { border-left: 0; }
  .u-specs { grid-template-columns: 1fr; }
  .u-bodies { grid-template-columns: repeat(2, 1fr); }
  .u-gallery { grid-template-columns: repeat(2, 1fr); }
  .u-hero::before { width: 120%; right: -30%; }
}
@media (max-width: 600px) {
  .u-keys-grid { grid-template-columns: repeat(2, 1fr); }
  .u-key { border-left: 0 !important; }
  .u-strip { grid-template-columns: 1fr; }
  .u-block-txt { padding: 8px 20px 24px; }
  .dl-card { min-width: 100%; }
  .lb-nav { width: 40px; height: 40px; }
}
html:has(.u-subnav) { scroll-padding-top: 132px; }
.u-spec .specs { padding: 0; }
.u-spec .specs th { padding-left: 22px; }
.u-spec .specs td { padding-right: 22px; }

/* Precio y tooltip */
.u-price-row { display: flex; align-items: center; gap: 10px; }
.u-price .cur { font-size: .5em; font-weight: 700; letter-spacing: .06em; }
.tip { position: relative; display: inline-flex; }
.tip-btn { width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--steel); cursor: pointer; display: grid; place-items: center; transition: color .2s; }
.tip-btn .ico { width: 22px; height: 22px; }
.tip-btn:hover, .tip-btn:focus-visible, .tip.open .tip-btn { color: var(--sky); outline: none; }
.tip-box { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); width: max-content; max-width: 240px; padding: 10px 14px; background: var(--night); color: var(--white); font-family: var(--font-body); font-size: 11.5px; font-weight: 400; line-height: 1.45; text-align: center; box-shadow: 0 10px 24px -8px rgba(11,37,69,.5); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; pointer-events: none; z-index: 5; }
.tip-box::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--night); }
.tip:hover .tip-box, .tip-btn:focus-visible + .tip-box, .tip.open .tip-box { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.u-sub { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); margin: -4px 0 14px; }
.card .body small.sub { color: var(--sky); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; margin-bottom: 2px; }

/* Logos completos de marca */
.chip .chip-logo { width: auto; height: 18px; max-width: 120px; }
.chip.on .chip-logo { filter: brightness(0) invert(1); }
.brand-title { line-height: 1; margin: 2px 0 10px; }
.brand-title img { height: 40px; width: auto; max-width: 100%; }
.card-brand { line-height: 1; margin-bottom: 4px; }
.card-brand img { height: 22px; width: auto; max-width: 80%; }
.u-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.u-brand img { width: auto; height: 30px; max-width: 220px; }
.u-brand span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); font-weight: 500; padding-left: 16px; border-left: 1px solid var(--line); }
@media (max-width: 600px) { .brand-title img { height: 32px; } .u-brand img { height: 24px; } }

/* Ajuste óptico de logos (--s viene de logoScale en data/catalog.js) */
.chip .chip-logo { height: calc(18px * var(--s, 1)); }
.brand-title img { height: calc(40px * var(--s, 1)); }
.card-brand img { height: calc(22px * var(--s, 1)); }
.u-brand img { height: calc(30px * var(--s, 1)); }
@media (max-width: 600px) { .brand-title img { height: calc(32px * var(--s, 1)); } .u-brand img { height: calc(24px * var(--s, 1)); } }
.chip .chip-logo { max-width: none; width: auto; }

/* Acento por marca (la página de detalle redefine --sky, --navy y --on-accent) */
.btn-solid { color: var(--on-accent, var(--night)); }
.btn-solid:hover { color: var(--white); }
.section-dark::before { background: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--sky) 22%, transparent), transparent 55%); }
.dl-card:hover { background: color-mix(in srgb, var(--sky) 8%, #fff); }
#unit-root .cta-band p { color: rgba(255,255,255,.82); }
#unit-root .cta-band::after { border-color: rgba(255,255,255,.22); }
#unit-root .cta-band .btn-solid { background: #fff; border-color: #fff; color: var(--navy); }
#unit-root .cta-band .btn-solid:hover { background: transparent; color: #fff; }
.u-price strong { color: #11497f; }
.u-key .ico { width: 30px; height: 30px; }

.u-body .body-ico { width: 112px; height: 56px; margin: 0 auto 14px; color: var(--sky); }
@media (max-width: 600px) { .u-body .body-ico { width: 96px; height: 48px; } }

/* Botones de WhatsApp: el hover siempre es verde WhatsApp */
.btn[href*="wa.me"]:hover { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; }

/* Tarjetas de unidad con acciones */
.card.ucard { display: flex; flex-direction: column; }
.ucard .card-main { display: block; flex: 1; }
.ucard .card-actions { display: flex; gap: 8px; padding: 0 20px 20px; flex-wrap: wrap; }
.ucard .card-actions .btn { flex: 1; justify-content: center; }
.cta-gap { padding-top: 56px; }

/* Consentimiento, honeypot y estado enviado */
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--steel); cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--sky); flex: none; }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--sky); }
.section-dark .consent, .section-dark .consent a { color: #b3c2d4; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form button.loading { opacity: .6; pointer-events: none; }
.form-done { grid-column: 1 / -1; text-align: center; padding: 36px 20px; }
.form-done .done-ico { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--sky); color: var(--on-accent, var(--night)); display: grid; place-items: center; }
.form-done .done-ico .ico { width: 28px; height: 28px; }
.form-done h3 { font-size: 28px; margin-bottom: 8px; }
.form-done p { font-size: 13px; opacity: .8; }
.quote-model { font-size: 12px; font-weight: 500; color: var(--navy); background: #eef3f9; padding: 10px 14px; border-left: 3px solid var(--sky); }
.legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer .legal .legal-links a { display: inline; margin: 0; font-size: 10.5px; }

/* Páginas internas */
.stats-grid.four { grid-template-columns: repeat(4, 1fr); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pillars.three { grid-template-columns: repeat(3, 1fr); }
.pillar { padding: 28px 24px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--sky); }
.section-smoke .pillar { background: var(--white); }
.pillar > span .ico { width: 32px; height: 32px; color: var(--sky); margin-bottom: 14px; }
.pillar h3 { font-size: 24px; margin-bottom: 8px; }
.pillar p { font-size: 13px; color: var(--steel); }
.contact.two { grid-template-columns: 1fr 1.5fr; gap: 56px; }
.split-text { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.prose-lg p { font-size: 15px; color: var(--steel); margin-bottom: 16px; max-width: 620px; }
.brand-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.brand-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 20px; background: var(--white); border: 1px solid var(--line); text-align: center; transition: border-color .2s, transform .25s; }
.brand-tile:hover { border-color: var(--sky); transform: translateY(-3px); }
.brand-tile img { height: calc(34px * var(--s, 1)); width: auto; max-width: 80%; }
.brand-tile small { font-size: 12px; color: var(--steel); }
.prose { max-width: 820px; }
.prose h2 { font-size: 26px; margin: 34px 0 10px; }
.prose p { font-size: 14px; color: var(--steel); margin-bottom: 12px; }
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.draft-note { background: #fff7e0; border-left: 3px solid #e0a800; padding: 12px 16px; color: #6b5200 !important; font-size: 13px !important; }
@media (max-width: 1000px) {
  .pillars, .pillars.three { grid-template-columns: repeat(2, 1fr); }
  .contact.two, .split-text { grid-template-columns: 1fr; gap: 24px; }
  .brand-row { grid-template-columns: 1fr; }
  .stats-grid.four { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .stats-grid.four .stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 600px) { .pillars, .pillars.three { grid-template-columns: 1fr; } }

/* Breadcrumbs ocultos por ahora. Para mostrarlos de nuevo, borra o comenta esta regla. */
.crumbs { display: none; }

/* Botón sólido dentro de la banda azul: el hover no debe confundirse con el fondo */
.cta-band .btn-solid:hover { background: #fff; border-color: #fff; color: var(--night); }

/* ===== Animaciones sutiles ===== */
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
body { animation: pagein .45s ease both; }
.hero-copy > *, .u-hero-copy > *, .page-hero .wrap > * { animation: rise .75s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > :nth-child(2), .u-hero-copy > :nth-child(2), .page-hero .wrap > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3), .u-hero-copy > :nth-child(3), .page-hero .wrap > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4), .u-hero-copy > :nth-child(4), .page-hero .wrap > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(n+5), .u-hero-copy > :nth-child(n+5) { animation-delay: .32s; }
.hero-art, .u-hero-art { animation: slidein 1s cubic-bezier(.2,.7,.2,1) .15s both; }
.hero-art img, .u-hero-art img { will-change: transform; }

/* Aparición al hacer scroll: curva más suave; al terminar se devuelve la transición rápida del hover */
.reveal { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.done { transition: border-color .2s, transform .25s ease, box-shadow .25s, background .2s, color .2s; transition-delay: 0s !important; }
img.fadein { opacity: 0; transition: opacity .6s ease; }
img.fadein.in { opacity: 1; }

/* Micro-interacciones */
.btn { transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-solid:hover { box-shadow: 0 8px 18px -8px rgba(11,37,69,.45); }
.btn .ico { transition: transform .25s ease; }
.btn:hover .ico { transform: translateX(3px); }
.agency, .step, .pillar { transition: transform .25s ease, box-shadow .25s ease, border-color .2s; }
.agency:hover, .pillar:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(11,37,69,.35); }
.step:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(11,37,69,.28); }
.wa-item { transition: border-color .2s, background .2s, transform .2s; }
.wa-item:hover { transform: translateX(3px); }
.stat .ico, .u-key .ico { transition: transform .35s ease; }
.stat:hover .ico, .u-key:hover .ico { transform: translateY(-3px) scale(1.08); }
.footer a, .site-footer a { transition: color .2s, transform .2s; }
.site-footer a:hover { transform: translateX(2px); }

/* Barra de progreso de lectura */
.site-header .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sky); transform: scaleX(0); transform-origin: left; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  img.fadein { opacity: 1; }
}

/* Menú: más junto Llamar–Cotizar y 7 enlaces sin apretarse */
.site-header .hdr-phone { margin-right: -18px; }
.nav { gap: 28px; }
@media (max-width: 1280px) { .nav { gap: 20px; } .nav a { font-size: 10.5px; letter-spacing: .08em; } }
@media (max-width: 820px) { .nav { gap: 0; } .nav a { font-size: 11.5px; letter-spacing: .1em; } .site-header .hdr-phone { margin-right: 0; } }

/* Catálogo: "Mostrar más" */
.more-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; }
.more-count { font-size: 12px; color: var(--steel); letter-spacing: .06em; }
.brand-block { margin-bottom: 52px; }

/* Año modelo en tarjetas */
.card .art .year { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--steel); background: rgba(255,255,255,.8); padding: 3px 9px; backdrop-filter: blur(2px); }

/* Enlaces legales del pie: en fila, separados y ordenados */
.site-footer .legal .legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; }
.site-footer .legal .legal-links a { display: inline-block; margin: 0; padding: 0 14px; font-size: 11px; color: var(--steel); line-height: 1.4; }
.site-footer .legal .legal-links a:first-child { padding-left: 0; }
.site-footer .legal .legal-links a:last-child { padding-right: 0; }
.site-footer .legal .legal-links a + a { border-left: 1px solid var(--line); }
@media (max-width: 600px) {
  .site-footer .legal { align-items: flex-start; gap: 10px; }
}
@media (max-width: 600px) { .site-footer .legal { padding-bottom: 30px; } } /* el texto va a la izquierda; la burbuja de WhatsApp queda a la derecha */

/* Aliados tecnológicos (logos en el detalle del modelo) */
.u-partners { background: var(--white); border-bottom: 1px solid var(--line); padding: 22px 0; }
.u-partners .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.u-partners-t { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); font-weight: 500; }
.u-partners-row { display: flex; align-items: center; gap: 12px 40px; flex-wrap: wrap; }
.u-partner { display: grid; justify-items: center; gap: 6px; margin: 0; }
.u-partner img { height: 30px; width: auto; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.u-partner:hover img { filter: none; opacity: 1; }
.u-partner figcaption { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #8a94a0; }
@media (max-width: 600px) { .u-partners .wrap { gap: 12px; } .u-partners-row { gap: 12px 26px; } }

/* Aliados en las tarjetas del catálogo */
.card-partners { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.card-partners img { height: 16px; width: auto; max-width: 62px; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .25s, opacity .25s; }
.card:hover .card-partners img { filter: none; opacity: 1; }

/* Modales: el botón de cerrar no debe encimarse con el título */
.modal-box > h2, .modal-box > p { padding-right: 38px; }
.modal-x { z-index: 2; }
@media (max-width: 600px) {
  .modal-box { padding-top: 44px; }
  .modal-box > h2 { font-size: 30px; }
  .modal-x { top: 6px; right: 6px; }
}

/* Tarjetas de marca en inicio: solo logo */
.brand-tile .art { aspect-ratio: 16/9; padding: 0; }
.brand-tile .art img { width: auto; height: calc(46px * var(--s, 1)); max-width: 70%; object-fit: contain; }
.brand-tile .body { padding: 14px 20px 18px; }
.brand-tile .body .row { margin-top: 0; }
.brand-tile { padding: 24px 20px 30px; }
.brand-tile .art { aspect-ratio: 4/3; }
.brand-tile .body { padding: 34px 20px 0; }
/* Imagen de tarjeta: posición absoluta para que no se recorte en Safari (altura en % dentro de aspect-ratio) */
.card:not(.brand-tile) .art img { position: absolute; inset: 30px; width: calc(100% - 60px); height: calc(100% - 60px); }

/* Marca en tarjetas: isotipo en lugar de texto */
.card .art .tag.tag-logo { background: #fff; padding: 6px; line-height: 0; box-shadow: 0 1px 0 rgba(11,37,69,.08); }
.card .art .tag.tag-logo img { position: static; width: 24px; height: 24px; object-fit: contain; display: block; }
/* Panel de flotas: menos margen azul alrededor de la foto */
.panel { aspect-ratio: 16/9.6; }
.panel img { width: 94%; }
/* Hero escritorio: imagen de camiones más grande */
@media (min-width: 1001px) {
  .hero .wrap { grid-template-columns: 1fr 1.4fr; }
  .hero-art { margin-right: -48px; }
  .hero-art img { width: 112%; max-width: none; margin-left: -8%; }
}
/* Hero móvil/tablet: el círculo acompaña a los camiones (abajo) en lugar de quedarse arriba */
@media (max-width: 1000px) {
  .hero::after { top: auto; right: auto; left: 50%; bottom: 3%; width: 118%; height: 235px; transform: translateX(-50%); }
}
@media (max-width: 1000px) { .burger { margin-left: 0; } } /* "Llamar" ya empuja el grupo a la derecha */
@media (max-width: 1000px) { .hdr-phone { margin-right: -20px; } } /* más cerca del menú hamburguesa */
/* Tarjeta de contacto: los íconos no se encogen cuando el texto es largo (correo, dirección) */
.contact-card a.line .ico { flex: 0 0 18px; min-width: 18px; }
.contact-card a.line { align-items: flex-start; }
.contact-card a.line .ico { margin-top: 1px; }

/* Marca en filtros y en el cotizador: el hover usa el color de la marca */
.bh { transition: border-color .2s, background-color .2s, box-shadow .2s; }
.chip.bh:not(.on):hover, .pick input:not(:checked) + span.bh:hover { border-color: var(--bc); background: color-mix(in srgb, var(--bc) 14%, #fff); box-shadow: inset 0 -3px 0 var(--bc); }
.pick input:focus-visible + span.bh { outline-color: var(--bc); }
/* Marca seleccionada: fondo con el color de la marca y logo blanco */
.chip.bh.on, .pick input:checked + span.bh { background: var(--bc); border-color: var(--bc); color: #fff; box-shadow: none; }

/* Horarios de agencia: una línea por horario */
.agency .info .hours { white-space: pre-line; }
.agency li .ico { flex: 0 0 18px; }

.form-err { color: #b3261e; font-size: 13px; margin-top: 4px; }

.modal-alt { margin-top: 14px; font-size: 13px; color: var(--steel); text-align: center; }
.modal-alt a { color: var(--navy); font-weight: 600; text-decoration: underline; }
.modal-alt a:hover { color: #1faa55; }

/* Botón de enviar bloqueado hasta aceptar el aviso de privacidad */
.form button[type="submit"]:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
.form button[type="submit"]:disabled:hover { transform: none; }

/* Marca: presentación y preguntas frecuentes */
.brand-about { background: #f6f7f9; }
.brand-about h2 { margin-bottom: 14px; }
.brand-about .faq-title { margin-top: 38px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 14px 28px 14px 0; font-weight: 600; color: var(--navy); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 22px; color: var(--sky); transition: transform .2s; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; color: var(--steel); line-height: 1.65; max-width: 760px; }

/* Marca: bloque informativo plegado por defecto (compacto) */
.brand-about { background: transparent; padding: 0 0 56px; }
.brand-about .more { border: 1px solid var(--line); background: #fff; }
.brand-about .more > summary { cursor: pointer; list-style: none; padding: 16px 22px; font-family: var(--font-display); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); display: flex; justify-content: space-between; align-items: center; }
.brand-about .more > summary::-webkit-details-marker { display: none; }
.brand-about .more > summary::after { content: "+"; font-size: 22px; color: var(--sky); line-height: 1; }
.brand-about .more[open] > summary::after { content: "–"; }
.brand-about .more-body { padding: 4px 22px 26px; border-top: 1px solid var(--line); }
.brand-about .more-body h2 { font-size: 26px; margin: 22px 0 10px; }
.brand-about .more-body .faq-title { margin-top: 28px; }

/* Bloque "Más sobre la marca y preguntas frecuentes": letra en negrita (700) */
.brand-about .more > summary,
.brand-about .more-body h2,
.brand-about .faq summary { font-weight: 700; }

/* Encabezados con textura (.page-hero.tex): foto en blanco y negro muy tenue + degradado que parte del gris del encabezado.
   La imagen y la intensidad se configuran en el panel (Ajustes → Encabezados de página). */
.page-hero.tex { position: relative; overflow: hidden; isolation: isolate; }
.page-hero.tex::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--hero-img, none) center 40% / cover no-repeat; filter: grayscale(1) contrast(1.1); opacity: var(--hero-op, .18); }
.page-hero.tex::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(244,246,248,.97) 0%, rgba(238,241,244,.90) 34%, rgba(222,228,234,.74) 68%, rgba(190,200,212,.58) 100%); }
.page-hero.tex .wrap { position: relative; z-index: 1; }
/* Móvil (opción B): imagen un 55 % más presente que en escritorio y degradado vertical que la deja ver hacia abajo */
@media (max-width: 800px) {
  .page-hero.tex::before { background-position: center 35%; opacity: min(calc(var(--hero-op, .18) * 1.55), .6); }
  .page-hero.tex::after { background: linear-gradient(180deg, rgba(244,246,248,.94) 0%, rgba(238,241,244,.74) 55%, rgba(214,222,231,.52) 100%); }
}

/* Promociones */
.promo-strip { position: relative; display: flex; justify-content: center; align-items: center; background: var(--night); color: #fff; font-size: 13px; letter-spacing: .02em; text-align: center; }
.promo-strip a { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; padding: 11px 52px; color: inherit; }
.promo-strip b { font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; }
.promo-strip .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; white-space: nowrap; }
.promo-strip .ptxt { transition: opacity .3s; }
.promo-strip .ptxt.out { opacity: 0; }
.promo-strip a:hover .go { text-decoration: underline; }
.promo-strip .x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: none; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: .8; }
.promo-strip .x:hover { opacity: 1; }
.promo-filters { margin: 0 0 28px; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; align-items: start; }
.promo-card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.promo-img { display: block; width: 100%; padding: 0; border: 0; background: var(--smoke, #f4f6f8); cursor: zoom-in; }
.promo-img img { display: block; width: 100%; height: auto; }
.promo-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.promo-body h2 { font-size: 24px; margin: 0; }
.promo-body p { margin: 0; color: var(--steel); font-size: 14.5px; line-height: 1.55; }
.promo-tag { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sky, #4c93d6); }
.promo-date { font-size: 12.5px; color: var(--steel); }
.promo-terms { font-size: 12.5px; color: var(--steel); }
.promo-terms summary { cursor: pointer; font-weight: 600; }
.promo-terms p { margin-top: 6px; font-size: 12.5px; }
.promo-cta { margin-top: 8px; }
.promo-empty { max-width: 560px; margin: 24px auto; text-align: center; }
.promo-empty h2 { font-size: 30px; margin-bottom: 10px; }
.promo-empty p { color: var(--steel); margin-bottom: 22px; }
.promo-empty .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.promo-zoom { position: fixed; inset: 0; z-index: 200; background: rgba(8,20,36,.88); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.promo-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.promo-zoom button { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 38px; line-height: 1; cursor: pointer; }
@media (max-width: 800px) { .promo-strip { font-size: 12px; } .promo-strip a { padding: 10px 44px 10px 16px; } }

/* Páginas legales: listas */
.prose ul { margin: 0 0 14px 20px; }
.prose li { font-size: 14px; color: var(--steel); margin-bottom: 6px; }