/* ======= Design tokens — Oceance by Civiltec (línea gráfica oficial) ======= */
    :root {
      /* Azules de marca */
      --navy: #0B2B4B;           /* Azul marino profundo — base */
      --navy-2: #163c63;         /* Azul para capas / hover */
      --navy-3: #1A4B7C;         /* Azul medio — gradientes */
      --cyan: #4A9FD1;           /* Cyan suave — acentos, precios, highlights */
      --cyan-soft: #7ab9df;      /* Cyan hover */
      --ice: #A8C8E0;            /* Azul muy claro — subtítulos sobre oscuro */

      /* Neutros cálidos de renders */
      --cream: #D4B896;          /* Beige cálido — tono arquitectónico */
      --cream-2: #e4d1b2;        /* Beige claro */
      --terracotta: #A67C5A;     /* Terracota suave */
      --off-white: #F2F2F2;      /* Gris perla fondo secciones claras */
      --white: #FFFFFF;

      /* Soft text sobre oscuro */
      --cream-soft: rgba(255,255,255,0.72);
      --cream-dim: rgba(255,255,255,0.55);

      /* Aliases legacy (compatibilidad con código existente) */
      --gold: var(--cyan);
      --gold-soft: var(--cyan-soft);
      --gold-dark: #2e7bad;
      --aqua: var(--cyan);
      --aqua-dark: #2e7bad;
      --sand: var(--navy-2);
      --sand-2: var(--navy-3);

      --graphite: var(--white);
      --graphite-soft: var(--cream-soft);
      --wa: #25D366;
      --urgency: #E63946;
      --border: rgba(168, 200, 224, 0.18);
      --border-strong: rgba(74, 159, 209, 0.45);
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
      --shadow-md: 0 10px 30px rgba(0,0,0,0.4);
      --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
    }

    html { scroll-behavior: smooth; }
    html:focus-within { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      color: var(--cream);
      background: var(--navy);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 17px;
      line-height: 1.7;
    }

    .font-display { font-family: 'Montserrat', 'Inter', sans-serif; font-feature-settings: "liga" 1, "kern" 1; }
    .font-body { font-family: 'Inter', sans-serif; }

    h1,h2,h3,h4 {
      font-family: 'Montserrat', 'Inter', sans-serif;
      color: var(--white);
      letter-spacing: 0.08em;
      font-weight: 600;
      text-transform: uppercase;
    }
    h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); line-height: 1.1; font-weight: 400; letter-spacing: 0.05em; text-transform: none; }
    h1 strong, h1 b { font-weight: 700; }
    h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); line-height: 1.2; font-weight: 600; letter-spacing: 0.06em; }
    h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.3; font-weight: 600; letter-spacing: 0.08em; }
    h4 { letter-spacing: 0.12em; font-weight: 600; }

    /* Editorial brand word "Oceance" */
    .brand-oceance {
      font-family: 'Cormorant Garamond', 'Cinzel', serif !important;
      font-weight: 400 !important;
      letter-spacing: 0.22em !important;
      text-transform: uppercase !important;
      font-style: normal;
    }

    /* Tagline delgado */
    .tagline {
      font-family: 'Raleway', 'Montserrat', sans-serif;
      font-weight: 200;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      font-size: 0.72rem;
      color: var(--ice);
    }

    .eyebrow {
      font-family: 'Raleway', 'Montserrat', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.35em;
      font-weight: 300;
      font-size: 0.72rem;
      color: var(--cyan);
    }

    /* Anchor accent — ahora cyan soft (antes gold) */
    .accent-gold { color: var(--cyan) !important; }
    .accent-gold-line { border-color: var(--cyan) !important; }
    .accent-cyan { color: var(--cyan) !important; }
    .accent-cream { color: var(--cream) !important; }
    .accent-ice { color: var(--ice) !important; }

    /* Brackets / corchetes decorativos para cards */
    .bracket-frame { position: relative; }
    .bracket-frame::before, .bracket-frame::after {
      content: ""; position: absolute; width: 20px; height: 20px;
      border: 1.5px solid var(--cyan); pointer-events: none; z-index: 2;
    }
    .bracket-frame::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
    .bracket-frame::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }

    /* Badge rectangular estilo editorial */
    .badge-rect {
      display: inline-block;
      background: var(--navy-3);
      color: var(--ice);
      padding: 0.35rem 0.9rem;
      font-size: 0.68rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      font-weight: 500;
      border: 1px solid var(--cyan);
      border-radius: 0;
      font-family: 'Montserrat', sans-serif;
    }
    .badge-rect.cyan { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }

    /* Barra separadora de sección */
    .section-rule {
      height: 1px;
      background: linear-gradient(to right, transparent, var(--cyan), transparent);
      margin: 2rem 0;
    }

    /* Glassmorphism utility */
    .glass {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px) saturate(140%);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px rgba(0,0,0,0.25);
    }
    .glass-strong {
      background: rgba(255, 255, 255, 0.07);
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      border: 1px solid rgba(194, 155, 97, 0.25);
    }

    /* Buttons — sofisticados con outline dorado */
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:0.55rem; padding: 0.95rem 1.75rem; border-radius: 2px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; transition: all .25s ease; font-size: 0.78rem; font-family: 'Inter', sans-serif; }
    .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    /* Botón principal: outline dorado transparente (estilo sofisticado, Reservar) */
    .btn-primary {
      background: transparent;
      color: var(--gold);
      border: 1px solid var(--gold);
      box-shadow: none;
    }
    .btn-primary:hover {
      background: var(--gold);
      color: var(--navy);
      transform: none;
      letter-spacing: 0.18em;
    }
    .btn-gold-solid {
      background: var(--gold);
      color: var(--navy);
      border: 1px solid var(--gold);
    }
    .btn-gold-solid:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
    .btn-outline { background: transparent; color: var(--cream); border: 1px solid rgba(244,237,224,0.35); }
    .btn-outline:hover { background: rgba(244,237,224,0.08); border-color: var(--cream); }
    .btn-navy { background: var(--navy-3); color: var(--cream); border: 1px solid var(--border); }
    .btn-navy:hover { background: var(--navy-2); border-color: var(--gold); }
    .btn-ghost { background: transparent; color: var(--cream); border: 1px solid var(--border); }
    .btn-ghost:hover { background: rgba(194,155,97,0.08); border-color: var(--gold); }
    .btn-wa { background: var(--wa); color: #fff; }
    .btn-wa:hover { background: #1eb85b; transform: scale(1.02); }

    /* Image slot placeholder styling */
    .img-slot {
      position: relative;
      background:
        repeating-linear-gradient(45deg, rgba(194,155,97,0.06) 0 12px, rgba(194,155,97,0.02) 12px 24px),
        var(--navy-2);
      color: var(--gold);
      display: flex; align-items: center; justify-content: center;
      text-align: center;
      font-family: 'Inter', sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 1rem;
      border: 1px dashed rgba(194,155,97,0.3);
      border-radius: 4px;
      overflow: hidden;
    }
    .img-slot::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(circle at 30% 30%, rgba(194,155,97,0.08), transparent 60%);
      pointer-events: none;
    }
    .img-slot .tag { position: relative; z-index:1; }
    .img-slot .dim { opacity: 0.6; font-weight: 400; margin-top: 0.3rem; letter-spacing: 0.1em; text-transform: none; color: var(--cream-soft); }

    /* Scroll reveal */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }

    /* Card hover lift */
    .lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

    /* Section padding helper */
    section { scroll-margin-top: 96px; }

    /* Hero overlay */
    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(10,37,64,0.15) 0%, rgba(10,37,64,0.55) 70%, rgba(10,37,64,0.85) 100%);
    }

    /* Accordion */
    details > summary { list-style: none; cursor: pointer; }
    details > summary::-webkit-details-marker { display: none; }
    details[open] .acc-chev { transform: rotate(45deg); }
    .acc-chev { transition: transform .25s ease; display:inline-flex; }

    /* Availability grid units */
    .unit {
      aspect-ratio: 1/1;
      border-radius: 6px;
      display:flex; align-items:center; justify-content:center;
      font-size: 0.68rem; font-weight: 600;
      color: var(--navy);
      border: 1px solid rgba(10,37,64,0.1);
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .unit:hover { transform: scale(1.06); box-shadow: var(--shadow-sm); z-index: 1; }
    .unit.available { background: #D4F5E3; color: #0b6a3a; border-color: #7BD3A5; }
    .unit.reserved  { background: #FFF3C8; color: #8a6a00; border-color: #F2D46A; }
    .unit.sold      { background: #FAD6D9; color: #9a1f2a; border-color: #E8A5AC; }
    .unit.blocked   { background: #E5E7EB; color: #555; border-color: #CBD0D6; }

    /* Before/after slider */
    .ba-wrapper { position: relative; overflow: hidden; border-radius: 18px; background: var(--sand); touch-action: none; }
    .ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); transition: clip-path 0s; }
    .ba-handle {
      position: absolute; top: 0; bottom: 0; left: 50%;
      width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
      transform: translateX(-50%);
      pointer-events: none;
    }
    .ba-handle::after {
      content: "⇄";
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 44px; height: 44px;
      background: var(--white);
      color: var(--navy);
      border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      font-weight: 700; box-shadow: var(--shadow-md);
      font-size: 1.1rem;
    }

    /* Profile tabs */
    .profile-card { border: 1px solid var(--border); background:#fff; padding: 1.25rem; border-radius: 16px; cursor: pointer; text-align: left; }
    .profile-card.active { border-color: var(--aqua); background: linear-gradient(180deg,#fff, #F7FBFC); box-shadow: var(--shadow-md); }
    .profile-card .pc-title { font-weight: 600; color: var(--navy); font-size: 1rem; }
    .profile-card .pc-desc { color: var(--graphite-soft); font-size: 0.88rem; margin-top: 0.25rem; }

    /* Counters */
    .counter-val { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; color: var(--navy); line-height: 1; }
    .counter-label { font-family:'Inter', sans-serif; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--graphite-soft); margin-top: 0.5rem; font-weight: 500; }

    /* WhatsApp sticky */
    .wa-sticky {
      position: fixed; bottom: 22px; right: 22px; z-index: 60;
      width: 62px; height: 62px; border-radius: 50%;
      background: var(--wa); color:#fff;
      display:flex; align-items:center; justify-content:center;
      box-shadow: 0 10px 30px rgba(37,211,102,0.45);
      animation: waPulse 2.2s ease-in-out infinite;
    }
    @keyframes waPulse {
      0%,100% { box-shadow: 0 10px 30px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.5); }
      50% { box-shadow: 0 10px 30px rgba(37,211,102,0.45), 0 0 0 16px rgba(37,211,102,0); }
    }
    .wa-tooltip {
      position: absolute; right: 72px; top: 50%; transform: translateY(-50%);
      background: var(--navy); color:#fff; padding: 0.55rem 0.85rem; border-radius: 10px;
      font-size: 0.8rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    .wa-sticky:hover .wa-tooltip { opacity: 1; }

    /* Announcement bar */
    .announce {
      background: var(--navy);
      color: #fff;
      font-size: 0.82rem;
      overflow: hidden;
      position: relative;
      height: 38px;
    }
    .announce-track { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; }
    .announce-item { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; opacity: 0; transition: opacity .6s ease; }
    .announce-item.active { opacity: 1; }

    /* Testimonials carousel */
    .t-track { scroll-snap-type: x mandatory; }
    .t-card { scroll-snap-align: start; }

    /* Form */
    .field input, .field select, .field textarea {
      width: 100%;
      border: 1px solid var(--border);
      background: #fff;
      padding: 0.8rem 1rem;
      border-radius: 12px;
      font-family: 'Inter', sans-serif;
      font-size: 0.95rem;
      color: var(--graphite);
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .field input:focus, .field select:focus, .field textarea:focus {
      border-color: var(--aqua);
      outline: none;
      box-shadow: 0 0 0 4px rgba(26,182,185,0.12);
    }
    .field label { font-size: 0.82rem; font-weight: 500; color: var(--navy); display:block; margin-bottom: 0.35rem; }
    .field small.err { color: var(--urgency); font-size: 0.78rem; margin-top: 0.35rem; display:none; }
    .field.has-error small.err { display:block; }
    .field.has-error input, .field.has-error select { border-color: var(--urgency); }

    /* Exit intent modal */
    .modal-bg { background: rgba(10,37,64,0.7); backdrop-filter: blur(4px); }

    /* Lightbox */
    .lb-bg { background: rgba(10,37,64,0.92); }

    /* Chips / filters */
    .chip { display:inline-flex; align-items:center; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--border); font-size: 0.85rem; color: var(--navy); cursor:pointer; background:#fff; transition: background .15s, color .15s, border-color .15s; font-weight: 500; }
    .chip:hover { background: var(--sand); }
    .chip.active { background: var(--navy); color:#fff; border-color: var(--navy); }

    /* Hide scrollbar on carousel */
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Decorative divider */
    .rule { height: 1px; background: linear-gradient(to right, transparent, rgba(10,37,64,0.18), transparent); }

    /* Skip to content */
    .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 0.75rem 1rem; z-index: 100; border-radius: 0 0 8px 0; }
    .skip-link:focus { left: 0; }

    /* Nav */
    header.site-nav { background: rgba(15,27,41,0.75); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border); color: var(--cream); }
    header.site-nav.scrolled { background: rgba(15,27,41,0.95); }
    header.site-nav a, header.site-nav span { color: var(--cream) !important; }
    header.site-nav a:hover { color: var(--gold) !important; }

    /* ======= Tailwind bg overrides — unificar tema dark ======= */
    body.bg-white { background: var(--navy) !important; }
    .bg-white\/90, .bg-white\/98 { background: rgba(15,27,41,0.9) !important; }
    /* Sections that were bg-white o bg-sand ahora son dark layered */
    section.bg-white, section.bg-\[color\:var\(--sand\)\] { background: var(--navy) !important; }
    /* Cards bg-white o bg-[color:var(--sand)] → glass */
    article.bg-\[color\:var\(--sand\)\],
    article.bg-white,
    .profile-card,
    .bg-\[color\:var\(--sand\)\]:not(section):not(body),
    details.bg-\[color\:var\(--sand\)\] {
      background: rgba(255,255,255,0.05) !important;
      backdrop-filter: blur(10px) saturate(140%);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
      border-color: rgba(194,155,97,0.18) !important;
      color: var(--cream);
    }
    article.bg-white h3, article.bg-\[color\:var\(--sand\)\] h3,
    .profile-card .pc-title { color: var(--cream); }
    .profile-card.active { border-color: var(--gold) !important; background: rgba(194,155,97,0.08) !important; }
    .profile-card .pc-desc, article p.text-\[color\:var\(--graphite-soft\)\] { color: var(--cream-soft) !important; }
    /* Inner iconboxes en value props */
    article .w-12.h-12.bg-white { background: rgba(194,155,97,0.12) !important; border: 1px solid var(--border-strong) !important; }
    article .w-12.h-12.bg-white svg { stroke: var(--gold) !important; }
    /* Textos generales en gris → cream suave */
    .text-\[color\:var\(--graphite-soft\)\] { color: var(--cream-soft) !important; }
    .text-\[color\:var\(--navy\)\] { color: var(--cream) !important; }
    /* Chips de filtro */
    .chip { background: transparent !important; color: var(--cream) !important; border-color: var(--border) !important; }
    .chip:hover { background: rgba(194,155,97,0.08) !important; }
    .chip.active { background: var(--gold) !important; color: var(--navy) !important; border-color: var(--gold) !important; }
    /* Location badges */
    #ubicacion .bg-\[color\:var\(--sand\)\] { background: rgba(255,255,255,0.05) !important; backdrop-filter: blur(10px); border-color: rgba(194,155,97,0.18) !important; }
    /* Counter values dorados */
    .counter-val { color: var(--gold) !important; font-family: 'Montserrat', sans-serif !important; font-weight: 300 !important; letter-spacing: 0.04em; }
    .counter-label { color: var(--cream-soft) !important; letter-spacing: 0.25em; }

    /* Iframe mapa borde dorado */
    #ubicacion iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.5) brightness(0.9); }

    /* Form fields dark */
    .field input, .field select, .field textarea {
      background: rgba(255,255,255,0.04) !important;
      color: var(--cream) !important;
      border-color: var(--border) !important;
    }
    .field input:focus, .field select:focus, .field textarea:focus {
      border-color: var(--gold) !important;
      box-shadow: 0 0 0 3px rgba(194,155,97,0.15) !important;
    }
    .field label { color: var(--cream) !important; }

    /* Announce bar */
    .announce { background: var(--navy-3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

    /* ======= Lead form SOLID — nada transparente, totalmente legible ======= */
    .lead-form-solid {
      background: var(--off-white) !important;
      color: var(--navy) !important;
      padding: 2rem 1.75rem;
      border-radius: 0;
      border: 1px solid rgba(11,43,75,0.12);
      box-shadow: 0 20px 60px rgba(0,0,0,0.35);
      position: relative;
    }
    @media (min-width: 768px) { .lead-form-solid { padding: 2.5rem 2.25rem; } }
    .lead-form-solid::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(to right, var(--cyan), var(--navy-3));
    }
    .lead-form-solid .badge-rect {
      background: var(--navy);
      color: var(--ice);
      border-color: var(--navy);
    }
    .lead-form-solid .lf-title {
      font-family: 'Montserrat', sans-serif;
      color: var(--navy) !important;
      font-size: 1.6rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: none;
      margin-top: 0.5rem;
    }
    .lead-form-solid .lf-sub {
      color: rgba(11,43,75,0.65);
      font-size: 0.9rem;
      margin-top: 0.35rem;
    }
    .lead-form-solid .lf-field label {
      display: block;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--navy) !important;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      margin-bottom: 0.5rem;
      font-family: 'Montserrat', sans-serif;
    }
    .lead-form-solid .lf-field input,
    .lead-form-solid .lf-field select,
    .lead-form-solid .lf-field textarea {
      width: 100%;
      background: #fff !important;
      color: var(--navy) !important;
      border: 1px solid rgba(11,43,75,0.2) !important;
      padding: 0.85rem 1rem !important;
      border-radius: 0 !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 0.95rem !important;
      font-weight: 400 !important;
      transition: border-color .2s, box-shadow .2s;
      outline: none;
    }
    .lead-form-solid .lf-field input:focus,
    .lead-form-solid .lf-field select:focus,
    .lead-form-solid .lf-field textarea:focus {
      border-color: var(--cyan) !important;
      box-shadow: 0 0 0 3px rgba(74,159,209,0.22) !important;
    }
    .lead-form-solid .lf-field input::placeholder,
    .lead-form-solid .lf-field textarea::placeholder {
      color: rgba(11,43,75,0.4);
      font-weight: 300;
    }
    .lead-form-solid .lf-field select option { background: #fff; color: var(--navy); }
    .lead-form-solid .lf-field small.err {
      display: none;
      color: var(--urgency);
      font-size: 0.78rem;
      margin-top: 0.4rem;
    }
    .lead-form-solid .lf-field.has-error small.err { display: block; }
    .lead-form-solid .lf-field.has-error input,
    .lead-form-solid .lf-field.has-error select { border-color: var(--urgency) !important; }

    /* Intent chips estilo sólido */
    .lead-form-solid .lf-chip {
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      padding: 0.6rem 1.1rem;
      background: #fff;
      border: 1px solid rgba(11,43,75,0.2);
      color: var(--navy);
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: all .2s;
      border-radius: 0;
    }
    .lead-form-solid .lf-chip:hover { border-color: var(--cyan); }
    .lead-form-solid .lf-chip:has(input:checked) {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }

    /* Submit sólido navy con hover cyan */
    .lead-form-solid .lf-submit {
      width: 100%;
      margin-top: 1.75rem;
      background: var(--navy);
      color: #fff;
      padding: 1rem 1.5rem;
      border: none;
      border-radius: 0;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all .25s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }
    .lead-form-solid .lf-submit:hover {
      background: var(--cyan);
      color: var(--navy);
      letter-spacing: 0.24em;
    }
    .lead-form-solid .lf-legal {
      font-size: 0.75rem;
      color: rgba(11,43,75,0.6);
      margin-top: 1rem;
      line-height: 1.5;
    }

    /* ROI Form — override para asegurar legibilidad sobre glass */
    .roi-field label {
      color: var(--gold) !important;
      text-transform: uppercase !important;
      letter-spacing: 0.15em !important;
      font-size: 0.7rem !important;
      font-weight: 500 !important;
      margin-bottom: 0.6rem !important;
    }
    .roi-field input[type="number"],
    .roi-field select {
      background: rgba(15,27,41,0.65) !important;
      color: var(--cream) !important;
      border: 1px solid var(--border-strong) !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 1rem !important;
      font-weight: 400 !important;
      padding: 0.85rem 1.1rem !important;
      border-radius: 2px !important;
    }
    .roi-field input[type="number"]::placeholder { color: var(--cream-dim); }
    .roi-field select option { background: var(--navy-2); color: var(--cream); }
    .roi-field input:focus, .roi-field select:focus {
      border-color: var(--gold) !important;
      box-shadow: 0 0 0 3px rgba(194,155,97,0.2) !important;
      outline: none;
    }
    .roi-field input[type="range"] {
      background: rgba(194,155,97,0.18);
      height: 3px;
    }
    .roi-field input[type="range"]::-webkit-slider-thumb {
      background: var(--gold);
      border: 2px solid var(--cream);
      width: 18px; height: 18px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .roi-field input[type="range"]::-moz-range-thumb {
      background: var(--gold);
      border: 2px solid var(--cream);
      width: 18px; height: 18px;
    }

    /* Pill badge — estilo editorial rectangular */
    .pill {
      display:inline-flex; align-items:center; gap: 0.4rem;
      padding: 0.4rem 0.9rem;
      border-radius: 0;
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
    }
    .pill-preventa { background: transparent; color: var(--cyan); border: 1px solid var(--cyan); }
    .pill-construct { background: transparent; color: var(--ice); border: 1px solid rgba(168,200,224,0.5); }
    .pill-urgent { background: rgba(230,57,70,0.12); color: #ff8a95; border: 1px solid rgba(230,57,70,0.4); }

    /* Slider ROI */
    input[type="range"] {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 6px; background: var(--sand-2); border-radius: 999px; outline: none;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 22px; height: 22px; border-radius: 999px;
      background: var(--aqua); cursor: pointer; border: 3px solid #fff; box-shadow: var(--shadow-md);
    }
    input[type="range"]::-moz-range-thumb {
      width: 22px; height: 22px; border-radius: 999px;
      background: var(--aqua); cursor: pointer; border: 3px solid #fff;
    }

    /* Responsive nav */
    @media (max-width: 900px) {
      .nav-links-desktop { display: none; }
    }
    @media (min-width: 901px) {
      .nav-links-mobile { display: none; }
    }

    .mobile-menu { transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all .2s ease; }
    .mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

    /* Print-safe reduce */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    }