/* Layout: sticky navy bar, hero, areas grid, how-it-works steps, about with portrait, FAQ, contact card */
  :root{
    --navy:#0B1A2E;
    --navy-2:#13263f;
    --navy-3:#1b3252;
    --gold:#B4924F;
    --gold-light:#CDB37E;
    --paper:#FBFAF7;
    --band:#F2EEE5;
    --ink:#1A1A1A;
    --muted:#6b6b63;
    --line: rgba(180,146,79,0.28);
    --maxw: 1120px;
    --ok:#5FAE7B; --mid:#E3AE45; --high:#E2695A; --na:#8C97A6;
  }
  :root{ --head:#0B1A2E; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#09131F; --band:#0E1C30; --ink:#E6E3DC; --muted:#A9B2BF; --head:#F3EFE8;
      --line: rgba(205,179,126,0.22);
    }
    :root:not([data-theme="light"]) .home-card.feature{ background: var(--navy-2); }
  }
  :root[data-theme="dark"]{
    --paper:#09131F; --band:#0E1C30; --ink:#E6E3DC; --muted:#A9B2BF; --head:#F3EFE8;
    --line: rgba(205,179,126,0.22);
  }
  :root[data-theme="dark"] .home-card.feature{ background: var(--navy-2); }

  *{ box-sizing: border-box; }
  body{
    margin:0;
    font-family:'Jost', Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  body::before{
    content:""; position:fixed; inset:0 0 auto; height: env(safe-area-inset-top, 0px);
    z-index:60; background: var(--navy);
  }
  img, svg{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  .wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 20px; }
  .section-pad{ padding: 64px 0; }
  h1,h2,h3{ font-family:'Playfair Display', Georgia, serif; margin:0; text-wrap: balance; }
  .eyebrow{
    font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold); font-weight:500;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
    background: rgba(11,26,46,0.96);
    backdrop-filter: blur(6px);
  }
  .nav-inner{
    max-width: var(--maxw); margin:0 auto; padding: 14px 20px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand{ display:flex; flex-direction:column; line-height:1; color:#fff; }
  .brand b{
    font-family:'Playfair Display', serif; font-size:16px; letter-spacing:0.04em; font-weight:600;
  }
  .brand span{ font-size:9px; letter-spacing:0.28em; color: var(--gold-light); margin-top:3px; }
  nav.links{ display:none; gap: 22px; }
  nav.links a{
    font-size: 13px; letter-spacing:0.04em; color: rgba(255,255,255,0.82);
    transition: color .15s;
  }
  nav.links a:hover{ color: var(--gold-light); }
  .nav-cta{
    display:none;
    font-size:12.5px; letter-spacing:0.04em; font-weight:500;
    background: var(--gold); color: var(--navy);
    padding: 9px 18px; border-radius: 2px;
  }
  .menu-btn{
    background:none; border:1px solid rgba(255,255,255,0.3); color:#fff;
    width:38px; height:38px; border-radius:2px; font-size:16px;
  }
  @media (min-width: 1020px){
    nav.links{ display:flex; }
    .nav-cta{ display:inline-block; }
    .menu-btn{ display:none; }
  }
  .mobile-menu{
    display:none; flex-direction:column; gap:2px;
    background: var(--navy-2); border-top:1px solid rgba(255,255,255,0.08);
  }
  .mobile-menu.open{ display:flex; }
  .mobile-menu a{
    color:#fff; padding:14px 20px; font-size:14px; border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .mobile-menu .nav-cta{ display:block; margin:14px 20px; text-align:center; color: var(--navy); }

  /* ---------- HERO ---------- */
  .hero{
    background: radial-gradient(ellipse 900px 500px at 15% -10%, #16304f 0%, var(--navy) 55%, var(--navy) 100%);
    color:#fff; position:relative; overflow:hidden;
    padding: 72px 0 86px;
  }
  .hero::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(circle at 85% 20%, rgba(180,146,79,0.14), transparent 45%);
  }
  .hero-inner{ position:relative; z-index:1; max-width: 640px; }
  .hero h1{
    font-size: clamp(30px, 6vw, 46px); line-height:1.12; font-weight:600;
    margin-top:14px; color:#fff;
  }
  .hero p.lede{
    font-weight:300; font-size:16px; line-height:1.65;
    color: rgba(255,255,255,0.78); max-width: 480px; margin-top:18px;
  }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
  .btn{
    display:inline-flex; align-items:center; gap:9px;
    padding: 13px 24px; border-radius:2px; font-size:14px; letter-spacing:0.03em; font-weight:500;
    border:1px solid transparent; cursor:pointer;
  }
  .btn-gold{ background: var(--gold); color: var(--navy); }
  .btn-gold:hover{ background: var(--gold-light); }
  .btn-ghost{ border-color: rgba(255,255,255,0.35); color:#fff; }
  .btn-ghost:hover{ border-color: var(--gold-light); color: var(--gold-light); }
  .hero-tags{
    display:flex; flex-wrap:wrap; gap: 10px 22px; margin-top:38px;
    border-top: 1px solid rgba(255,255,255,0.14); padding-top:22px;
  }
  .hero-tags span{
    font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
    color: rgba(255,255,255,0.62);
  }

  /* ---------- SECTION HEAD ---------- */
  .section-head{ max-width: 560px; margin-bottom: 40px; }
  .section-head h2{ font-size: clamp(24px,4vw,32px); font-weight:600; margin-top:12px; color:var(--navy); }
  .section-head p{ font-weight:300; color: var(--muted); margin-top:12px; line-height:1.6; font-size:15px; }

  /* ---------- AREAS ---------- */
  .areas{ background: var(--paper); }
  .area-grid{
    display:grid; grid-template-columns: 1fr; gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  @media (min-width:700px){ .area-grid{ grid-template-columns: 1fr 1fr; } }
  .area-card{
    background: var(--paper); padding: 30px 28px; position:relative;
    display:flex; flex-direction:column; min-width:0;
  }
  .area-card .num{
    font-family:'Playfair Display', serif; font-style:italic; color: var(--gold); font-size:14px;
  }
  .area-card h3{ font-size:18px; font-weight:600; color: var(--navy); margin-top:10px; }
  .area-card p{
    font-weight:300; font-size:14px; line-height:1.6; color: var(--muted); margin-top:8px; flex:1;
  }
  .area-card .icon{ margin-bottom:6px; opacity:0.9; }
  .pdf-link{
    margin-top:18px; align-self:flex-start;
    font-size:12.5px; letter-spacing:0.05em; font-weight:500; color: var(--navy);
    border-bottom:1px solid var(--gold); padding-bottom:2px;
  }
  .pdf-link:hover{ color: var(--gold); }
  button.pdf-link{ background:none; border-top:0; border-left:0; border-right:0; font-family:inherit; cursor:pointer; padding-left:0; padding-right:0; }

  /* ---------- BROCHURE VIEWER ---------- */
  .viewer{
    position:fixed; inset:0; z-index:100; background: rgba(8,16,29,0.97);
    display:flex; flex-direction:column;
  }
  .viewer[hidden]{ display:none; }
  .viewer-bar{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 12px max(18px, env(safe-area-inset-left, 0px));
    border-bottom:1px solid rgba(205,179,126,0.25); color:#fff;
  }
  .viewer-title{ font-family:'Playfair Display', serif; font-size:16px; font-weight:600; min-width:0; }
  .viewer-close{
    background:none; border:1px solid rgba(255,255,255,0.4); color:#fff; border-radius:2px;
    padding:8px 16px; font-family:inherit; font-size:13px; letter-spacing:0.04em; cursor:pointer; flex:none;
  }
  .viewer-close:hover{ border-color: var(--gold-light); color: var(--gold-light); }
  .viewer-body{
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding: 20px max(14px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  }
  .viewer-pages{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
  .viewer-pages img{ width:100%; height:auto; aspect-ratio:1100 / 1557; display:block; background:#0B1A2E; box-shadow:0 4px 24px rgba(0,0,0,0.4); }
  .viewer-cta{ max-width:860px; margin:22px auto 0; text-align:center; }

  /* ---------- HOW IT WORKS ---------- */
  .how{ background: var(--band); }
  .steps{ display:grid; grid-template-columns:1fr; gap:34px; counter-reset: step; }
  @media (min-width:800px){ .steps{ grid-template-columns: repeat(3, 1fr); gap:40px; } }
  .step{ border-top:1px solid var(--gold); padding-top:18px; min-width:0; }
  .step .n{
    font-family:'Playfair Display', serif; font-style:italic; font-size:30px; color: var(--gold); line-height:1;
  }
  .step h3{ font-size:19px; font-weight:600; color: var(--navy); margin-top:14px; }
  .step p{ font-weight:300; font-size:14.5px; line-height:1.65; color: var(--muted); margin:8px 0 0; }

  /* ---------- CALCULADORA Y FORMULARIOS ---------- */
  .calc-form{ margin-top:8px; }
  .calc-grid{ display:grid; grid-template-columns:1fr; gap:18px 24px; }
  @media (min-width:760px){ .calc-grid{ grid-template-columns:1fr 1fr; } }
  .calc-grid label, .calc-grid .wide{ display:flex; flex-direction:column; gap:7px; font-size:13.5px; font-weight:400; letter-spacing:.02em; color:var(--muted); }
  .calc-grid .wide{ grid-column:1/-1; }
  .calc-grid input, .calc-grid select, .calc-grid textarea{
    font:inherit; font-size:16px; font-weight:300; color:var(--ink,#14233A); background:var(--card,#fff);
    border:1px solid rgba(180,146,79,.5); border-radius:2px; padding:12px 13px; width:100%; min-height:46px;
  }
  .calc-grid textarea{ resize:vertical; }
  .calc-grid input:focus, .calc-grid select:focus, .calc-grid textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; }
  .calc-grid small{ font-size:12px; font-weight:300; }
  .calc-checks{ display:grid; gap:10px; margin:22px 0 26px; }
  .chk{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:300; color:var(--muted); cursor:pointer; }
  .chk input{ width:18px; height:18px; accent-color:var(--gold); flex:none; }
  .calc-err{ color:#B3402E; font-size:14px; margin-top:14px; }
  .calc-result{ margin-top:40px; border-top:1px solid var(--gold); padding-top:24px; }
  .calc-result h3, .calc-notes h3{ font-size:20px; font-weight:600; color:var(--head,var(--navy)); }
  .calc-table{ width:100%; border-collapse:collapse; margin-top:14px; }
  .calc-table td{ padding:11px 0; border-bottom:1px solid rgba(180,146,79,.3); font-size:15px; font-weight:300; color:var(--muted); vertical-align:top; }
  .calc-table td:last-child{ text-align:right; white-space:nowrap; padding-left:16px; color:var(--head,var(--navy)); font-weight:400; }
  .calc-table small{ display:block; font-size:12px; margin-top:2px; }
  .calc-total{ font-size:18px; margin:18px 0 22px; color:var(--head,var(--navy)); }
  .calc-total b{ font:600 26px 'Playfair Display',serif; color:var(--gold); margin-left:6px; }
  .calc-notes{ margin-top:46px; }
  .calc-notes ul{ margin:12px 0 0; padding-left:20px; }
  .calc-notes li{ font-weight:300; font-size:14.5px; line-height:1.65; color:var(--muted); margin:8px 0; text-align:justify; hyphens:none; }
  .cform{ background:var(--band,transparent); }
  .mail-hint{ font-weight:300; font-size:13.5px; line-height:1.7; color:var(--muted); margin:14px 0 0; }
  .mail-hint b{ font-weight:400; color:var(--head,var(--navy)); word-break:break-all; }
  .mail-hint .pdf-link{ margin-left:6px; }

  .calc-done{ margin-top:34px; border:1px solid var(--gold); padding:34px 26px; text-align:center; max-width:640px; background:rgba(180,146,79,.06); animation: viewIn .4s ease both; }
  .calc-done h3{ font-size:22px; font-weight:600; color:var(--head,var(--navy)); margin:14px 0 8px; }
  .calc-done p{ font-weight:300; font-size:15px; line-height:1.65; color:var(--muted); margin:0 auto 22px; max-width:500px; }
  .calc-done .calc-fine{ font-size:12.5px; letter-spacing:.06em; margin:16px 0 0; }
  .calc-check{ width:58px; height:58px; border-radius:50%; border:1px solid var(--gold); color:var(--gold); display:inline-flex; align-items:center; justify-content:center; }

  .calc-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 30px; }
  .calc-tabs button{ font:inherit; font-size:14px; font-weight:400; letter-spacing:.02em; color:var(--muted); background:none; border:1px solid rgba(180,146,79,.5); border-radius:2px; padding:10px 15px; cursor:pointer; min-height:44px; }
  .calc-tabs button:hover{ border-color:var(--gold); }
  .calc-tabs button.on{ background:var(--gold); border-color:var(--gold); color:#0B1A2E; }
  .calc-panel[hidden]{ display:none; }
  .calc-title{ font-size:22px; font-weight:600; color:var(--head,var(--navy)); margin:0 0 6px; }
  .calc-intro{ font-weight:300; font-size:15px; line-height:1.65; color:var(--muted); margin:0 0 22px; max-width:680px; }
  .calc-grid input, .calc-grid select, .calc-grid textarea{ background:#fff; color:#14233A; color-scheme:light; }
  .calc-grid input::placeholder, .calc-grid textarea::placeholder{ color:#7C8696; opacity:1; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .calc-grid input, :root:not([data-theme="light"]) .calc-grid select, :root:not([data-theme="light"]) .calc-grid textarea{ background:#0E1C30; color:#F3EFE8; color-scheme:dark; }
    :root:not([data-theme="light"]) .calc-grid input::placeholder, :root:not([data-theme="light"]) .calc-grid textarea::placeholder{ color:#8E99A8; }
  }
  :root[data-theme="dark"] .calc-grid input, :root[data-theme="dark"] .calc-grid select, :root[data-theme="dark"] .calc-grid textarea{ background:#0E1C30; color:#F3EFE8; color-scheme:dark; }
  :root[data-theme="dark"] .calc-grid input::placeholder, :root[data-theme="dark"] .calc-grid textarea::placeholder{ color:#8E99A8; }

  .ac-list{ list-style:none; padding:0; margin:14px 0 0; }
  .ac-list li{ font-weight:300; font-size:13.5px; line-height:1.5; color:var(--muted); padding:5px 0 5px 18px; position:relative; }
  .ac-list li::before{ content:""; position:absolute; left:0; top:14px; width:9px; height:1px; background:var(--gold); }
  /* visor: desplazamiento natural */
  .viewer-body{ overscroll-behavior:contain; scroll-behavior:auto; }
  .viewer-pages img{ background:#ECE9E2; opacity:0; transition:opacity .35s ease; }
  .viewer-pages img.ok{ opacity:1; }
  .viewer-count{ font-size:12px; letter-spacing:.12em; color:rgba(255,255,255,.65); margin-left:auto; margin-right:14px; white-space:nowrap; }

  .cmp-steps{ margin-top:8px; }
  @media (min-width:800px){ .cmp-steps{ grid-template-columns: repeat(3, 1fr); row-gap:44px; } }
  .cmp-services{ margin-top:56px; border-top:1px solid var(--gold); padding-top:26px; }
  .cmp-services h3{ font-size:21px; font-weight:600; color:var(--head,var(--navy)); }
  .cmp-services ul{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:1fr; gap:0 48px; }
  @media (min-width:800px){ .cmp-services ul{ grid-template-columns:1fr 1fr; } }
  .cmp-services li{ font-weight:300; font-size:15px; line-height:1.55; color:var(--muted); padding:12px 0 12px 22px; border-bottom:1px solid rgba(180,146,79,.3); position:relative; }
  .cmp-services li::before{ content:""; position:absolute; left:0; top:21px; width:10px; height:1px; background:var(--gold); }
  .cmp-note{ font-style:italic; font-weight:300; font-size:14px; line-height:1.65; color:var(--muted); margin:22px 0 4px; max-width:640px; }

  /* ---------- ABOUT ---------- */
  .about{ background: var(--navy); color:#fff; }
  .about .eyebrow{ color: var(--gold-light); }
  .about h2{ color:#fff; font-size: clamp(26px,4.4vw,36px); font-weight:600; margin-top:12px; }
  .about-sub{ margin:8px 0 0; font-weight:300; font-size:14px; letter-spacing:0.12em; text-transform:uppercase; color: rgba(255,255,255,0.62); }
  .about-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:36px; margin-top:34px; align-items:start; }
  @media (min-width: 900px){ .about-grid{ grid-template-columns: minmax(0,0.78fr) minmax(0,1.22fr); gap:60px; } }
  .portrait{ margin:0; width:100%; max-width:460px; }
  .portrait img{
    width:100%; height:auto; aspect-ratio:1100 / 1429; object-fit:cover;
    border:1px solid rgba(205,179,126,0.45);
  }
  .about-main{ display:flex; flex-direction:column; gap:34px; min-width:0; }
  .about p{ font-weight:300; line-height:1.75; font-size:15.5px; color: rgba(255,255,255,0.84); margin:0; }
  .about p + p{ margin-top:16px; }
  .block{ border-top:1px solid rgba(205,179,126,0.35); padding-top:18px; }
  .block > .eyebrow{ display:block; margin-bottom:16px; }
  .edu{ display:flex; flex-direction:column; gap:18px; }
  .edu-item h3{ font-size:17px; font-weight:600; color:#fff; line-height:1.3; }
  .edu-item span{ display:block; margin-top:4px; font-weight:300; font-size:14px; color: rgba(255,255,255,0.7); }
  .quote{
    margin-top:20px; font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
    font-size:15px; line-height:1.55; color: var(--gold-light);
  }
  .track{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px 28px; list-style:none; margin:0; padding:0; }
  @media (min-width:620px){ .track{ grid-template-columns: 1fr 1fr; } }
  .track li{ font-size:15px; line-height:1.45; color:#fff; padding-left:16px; position:relative; font-weight:400; }
  .track li::before{ content:""; position:absolute; left:0; top:0.62em; width:7px; height:1px; background: var(--gold-light); }
  .how-work{ display:flex; flex-direction:column; gap:14px; }
  .how-work p{ font-size:15px; }
  .how-work b{ color:#fff; font-weight:500; }

  /* ---------- FAQ ---------- */
  .faq{ background: var(--paper); }
  .faq-list{ max-width: 760px; border-top:1px solid var(--line); }
  .faq-list details{ border-bottom:1px solid var(--line); }
  .faq-list summary{
    list-style:none; cursor:pointer; padding:20px 36px 20px 0; position:relative;
    font-family:'Playfair Display', serif; font-size:17px; font-weight:600; color: var(--navy); line-height:1.35;
  }
  .faq-list summary::-webkit-details-marker{ display:none; }
  .faq-list summary::after{
    content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
    font-family:'Jost', sans-serif; font-weight:300; font-size:24px; color: var(--gold);
  }
  .faq-list details[open] summary::after{ content:"\2212"; }
  .faq-list details p{
    margin:0; padding:0 36px 22px 0; font-weight:300; font-size:15px; line-height:1.7; color: var(--muted);
  }

  /* ---------- CONTACT / FOOTER ---------- */
  .contact{ background: var(--band); }
  .contact-card{
    background: var(--navy); color:#fff; padding: 46px 32px;
    display:grid; grid-template-columns:1fr; gap:30px;
    position:relative; overflow:hidden;
  }
  @media (min-width:860px){ .contact-card{ grid-template-columns: 1.1fr 0.9fr; padding:56px 60px; } }
  .contact-card::before{
    content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
    border:1px solid rgba(180,146,79,0.25); border-radius:50%;
  }
  .contact-left{ position:relative; }
  .contact-left .eyebrow{ color: var(--gold-light); }
  .contact-left h2{ color:#fff; font-size: clamp(24px,4vw,30px); font-weight:600; margin-top:12px; }
  .contact-left p{ font-weight:300; color: rgba(255,255,255,0.78); margin:14px 0 0; max-width:420px; line-height:1.6; font-size:15px; }
  .contact-left .btn{ margin-top:22px; }
  .contact-info{ display:flex; flex-direction:column; gap:16px; justify-content:center; position:relative; min-width:0; }
  .contact-row .lab{ font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color: var(--gold-light); }
  .contact-row .val{ font-size:14.5px; color:#fff; margin-top:3px; font-weight:300; overflow-wrap:anywhere; }
  .contact-row .val a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(205,179,126,.5); }
  .contact-row .val a:hover{ color:var(--gold-light); }

  footer{
    text-align:center; padding: 26px 20px 26px;
    background: var(--navy); color: rgba(255,255,255,0.55); font-size:12px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  footer .social{ display:flex; gap:18px; justify-content:center; margin-bottom:14px; }
  footer .social a{ color: rgba(255,255,255,0.75); font-size:13px; }
  footer .social a:hover{ color: var(--gold-light); }

  /* ---------- WHATSAPP BUTTONS ---------- */
  .sticky-cta{
    position: fixed; left:0; right:0; bottom:0; z-index:50;
    background: var(--navy);
    border-top:1px solid rgba(180,146,79,0.3);
    padding: 12px max(18px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    display:flex; align-items:center; justify-content:center;
  }
  .sticky-cta a{
    width:100%; max-width:420px; text-align:center;
    background: var(--gold); color: var(--navy); font-weight:600;
    padding:13px 0; border-radius:3px; font-size:14.5px; letter-spacing:0.02em;
  }
  .wa-float{
    display:none; position:fixed; z-index:50;
    right: calc(28px + env(safe-area-inset-right, 0px));
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--gold); color: var(--navy);
    align-items:center; gap:10px; padding:14px 22px 14px 18px;
    border-radius:40px; font-weight:600; font-size:14px; letter-spacing:0.02em;
    box-shadow: 0 6px 22px rgba(11,26,46,0.28);
    transition: background .15s, transform .15s;
  }
  .wa-float:hover{ background: var(--gold-light); transform: translateY(-2px); }
  @media (min-width: 860px){ .sticky-cta{ display:none; } .wa-float{ display:inline-flex; } }
  @media (max-width: 859px){ body{ padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }
  

  /* ---------- NAV ACTIVE + VIEWS ---------- */
  nav.links a{ padding:6px 0; border-bottom:1px solid transparent; }
  nav.links a[aria-current="page"]{ color: var(--gold-light); border-bottom-color: var(--gold); }
  .mobile-menu a[aria-current="page"]{ color: var(--gold-light); }
  main{ display:block; min-height:62vh; }
  .view{ animation: viewIn .35s ease both; }
  @keyframes viewIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){ .view{ animation:none; } .wa-float{ transition:none; } .dx-bar i{ transition:none; } }

  /* ---------- HOME CARDS ---------- */
  .home{ background: var(--paper); }
  .home-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background: var(--line); border:1px solid var(--line); }
  @media (min-width:800px){ .home-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
  .home-card{ background: var(--paper); padding:30px 28px; display:flex; flex-direction:column; min-width:0; }
  .home-card h3{ font-size:19px; font-weight:600; color: var(--navy); }
  .home-card p{ font-weight:300; font-size:14.5px; line-height:1.65; color: var(--muted); margin:10px 0 0; flex:1; }
  .home-card .go{ margin-top:20px; font-size:12.5px; letter-spacing:0.05em; font-weight:500; color: var(--navy); border-bottom:1px solid var(--gold); align-self:flex-start; padding-bottom:2px; }
  .home-card:hover .go{ color: var(--gold); }
  .home-card.feature{ background: var(--navy); }
  .home-card.feature h3{ color:#fff; }
  .home-card.feature p{ color: rgba(255,255,255,0.78); }
  .home-card.feature .go{ color: var(--gold-light); }

  /* ---------- DIAGNOSTICO ---------- */
  .dx{ background: radial-gradient(ellipse 900px 500px at 15% -10%, #16304f 0%, var(--navy) 55%, var(--navy) 100%); color:#fff; min-height:70vh; }
  .dx-wrap{ max-width:720px; }
  .dx h2{ color:#fff; font-size: clamp(26px,4.6vw,38px); line-height:1.15; font-weight:600; margin-top:12px; }
  .dx .lead{ color: rgba(255,255,255,0.8); font-weight:300; line-height:1.7; margin:16px 0 0; font-size:16px; }
  .dx .eyebrow{ color: var(--gold-light); }
  .dx-areas{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:26px 0 0; padding:0; list-style:none; }
  .dx-areas li{ border:1px solid rgba(205,179,126,0.4); padding:7px 14px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color: var(--gold-light); }
  .dx-note{ font-size:13px; color: rgba(255,255,255,0.66); line-height:1.65; margin:22px 0 0; font-weight:300; }
  .dx .btn{ margin-top:30px; }
  .dx-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; color: rgba(255,255,255,0.72); }
  .dx-area{ color: var(--gold-light); font-weight:500; letter-spacing:0.16em; text-transform:uppercase; font-size:11.5px; }
  .dx-bar{ height:2px; background: rgba(255,255,255,0.16); margin:14px 0 38px; position:relative; }
  .dx-bar i{ position:absolute; left:0; top:0; bottom:0; width:0; background: var(--gold); transition: width .3s; }
  .dx-q{ font-family:'Playfair Display', Georgia, serif; font-size: clamp(22px,4.2vw,29px); line-height:1.3; font-weight:600; color:#fff; margin:0; outline:none; }
  .dx-opts{ display:flex; flex-direction:column; gap:12px; margin-top:28px; }
  .dx-opt{ text-align:left; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.22); color:#fff; padding:16px 18px; font:inherit; font-size:15.5px; line-height:1.4; border-radius:2px; cursor:pointer; transition: border-color .15s, background .15s; }
  .dx-opt:hover{ border-color: var(--gold-light); background: rgba(205,179,126,0.08); }
  .dx-opt[aria-pressed="true"]{ border-color: var(--gold); background: rgba(180,146,79,0.18); }
  .dx-back{ margin-top:26px; background:none; border:0; color: rgba(255,255,255,0.7); font:inherit; font-size:14px; cursor:pointer; padding:6px 0; }
  .dx-back:hover{ color: var(--gold-light); }
  .dx-back[hidden]{ display:none; }
  .dx-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:30px; }
  .dx-card{ border:1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); padding:18px 18px 20px; min-width:0; }
  .dx-card span{ display:block; font-size:14px; color: rgba(255,255,255,0.72); }
  .dx-card b{ display:flex; align-items:center; gap:10px; margin-top:12px; font-weight:500; font-size:16px; }
  .dot{ width:12px; height:12px; border-radius:50%; flex:none; }
  .dot.bajo{ background: var(--ok); } .dot.medio{ background: var(--mid); } .dot.alto{ background: var(--high); } .dot.na,.dot.def{ background: var(--na); }
  .dx-detail{ margin-top:34px; border-top:1px solid rgba(205,179,126,0.35); }
  .dx-detail details{ border-bottom:1px solid rgba(255,255,255,0.14); }
  .dx-detail summary{ list-style:none; cursor:pointer; padding:18px 34px 18px 0; position:relative; display:flex; align-items:center; gap:12px; font-family:'Playfair Display', serif; font-size:17px; font-weight:600; }
  .dx-detail summary::-webkit-details-marker{ display:none; }
  .dx-detail summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-family:'Jost', sans-serif; font-weight:300; font-size:24px; color: var(--gold-light); }
  .dx-detail details[open] summary::after{ content:"\2212"; }
  .dx-detail .body{ padding:0 0 20px; }
  .dx-detail .body p{ margin:0; font-weight:300; font-size:15px; line-height:1.65; color: rgba(255,255,255,0.82); }
  .dx-detail ul{ margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
  .dx-detail li{ position:relative; padding-left:16px; font-size:14.5px; line-height:1.55; color: rgba(255,255,255,0.88); font-weight:300; }
  .dx-detail li::before{ content:""; position:absolute; left:0; top:0.7em; width:7px; height:1px; background: var(--gold-light); }
  .dx-send{ margin-top:34px; border:1px solid rgba(205,179,126,0.4); padding:24px; }
  .dx-send h3{ color:#fff; font-size:20px; font-weight:600; }
  .dx-send p{ margin:10px 0 0; font-weight:300; font-size:14.5px; line-height:1.65; color: rgba(255,255,255,0.78); }
  .dx-send label{ display:block; margin-top:18px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--gold-light); }
  .dx-send input{ width:100%; margin-top:8px; padding:14px; font:inherit; font-size:15px; color:#fff; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.26); border-radius:2px; }
  .dx-send input::placeholder{ color: rgba(255,255,255,0.45); }
  .dx-send .btn{ margin-top:20px; }
  .dx-reset{ display:inline-block; margin:22px 0 0 18px; background:none; border:0; border-bottom:1px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.8); font:inherit; font-size:13.5px; cursor:pointer; padding:2px 0; }
  .dx-reset:hover{ color: var(--gold-light); border-color: var(--gold-light); }
  .dx-legal{ font-size:12.5px; line-height:1.65; color: rgba(255,255,255,0.58); margin:26px 0 0; font-weight:300; }

  /* ---------- JUSTIFIED TEXT ---------- */
  .hero p.lede, .section-head p, .area-card p, .home-card p, .step p, .about p, .how-work p,
  .faq-list details p, .contact-left p, .dx .lead, .dx-note, .dx-legal, .dx-detail .body p, .dx-send p{
    text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal;
  }
  /* ---------- HEADINGS (claro/oscuro) ---------- */
  .section-head h2,.area-card h3,.step h3,.faq-list summary,.home-card h3,.home-card .go,.pdf-link{ color: var(--head); }
  .home-card.feature h3{ color:#fff; }
  .home-card.feature .go{ color: var(--gold-light); }
  .area-card p, .home-card p, .step p, .faq-list details p, .section-head p{ color: var(--muted); }

  /* ---------- REVEAL ---------- */
  .js .reveal{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
  .js .reveal.in{ opacity:1; transform:none; }
  @keyframes rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
  .hero-inner > *{ animation: rise .8s ease both; }
  .hero-inner > *:nth-child(2){ animation-delay:.08s; } .hero-inner > *:nth-child(3){ animation-delay:.16s; }
  .hero-inner > *:nth-child(4){ animation-delay:.24s; } .hero-inner > *:nth-child(5){ animation-delay:.32s; }
  @media (prefers-reduced-motion: reduce){
    .js .reveal{ opacity:1; transform:none; transition:none; }
    .hero-inner > *, .dx-q.swap, .dx-opts.swap, .meter i{ animation:none !important; }
  }

  /* ---------- MONOGRAM ---------- */
  .hero-mono{ position:absolute; right:-30px; top:50%; width:440px; height:420px; transform: translateY(-50%); fill: var(--gold-light); opacity:0.07; pointer-events:none; }
  @media (max-width:700px){ .hero-mono{ width:300px; height:290px; right:-70px; top:30%; opacity:0.045; } }

  /* ---------- AREA CARDS ---------- */
  .area-card{ flex-direction:row; align-items:stretch; gap:20px; transition: background .25s; }
  .area-card::before, .home-card::before{ content:''; position:absolute; left:0; top:0; height:2px; width:0; background: var(--gold); transition: width .4s ease; }
  .area-card:hover::before, .home-card:hover::before{ width:100%; }
  .area-card:hover{ background: var(--band); }
  .ac-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .area-card p{ flex:0 0 auto; }
  @media (max-width:480px){ .area-card p{ text-align:left; } }
  .area-card .pdf-link{ margin-top:16px; }
  .ac-top{ display:flex; align-items:center; gap:14px; }
  .icon-frame{ display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; border:1px solid var(--line); color: var(--gold); flex:none; transition: border-color .25s, background .25s; }
  .area-card:hover .icon-frame{ border-color: var(--gold); background: rgba(180,146,79,0.08); }
  .thumb{ flex:none; width:96px; align-self:flex-start; padding:0; border:1px solid var(--line); background: var(--navy); cursor:pointer; box-shadow: 0 6px 18px rgba(11,26,46,0.18); transition: transform .3s ease, box-shadow .3s ease, border-color .3s; }
  .thumb img{ width:100%; height:auto; aspect-ratio:1100/1557; display:block; }
  .area-card:hover .thumb, .thumb:hover{ transform: translateY(-4px) rotate(-1deg); box-shadow: 0 12px 26px rgba(11,26,46,0.28); border-color: var(--gold); }
  @media (max-width:420px){ .thumb{ width:74px; } .area-card{ gap:14px; padding:26px 20px; } }
  .home-card{ position:relative; transition: background .25s; }
  .home-card:not(.feature):hover{ background: var(--band); }
  .home-card.feature:hover{ background: var(--navy-3); }

  /* ---------- CONTACT STRIP ---------- */
  .strip{ background: var(--navy-2); border-top:1px solid rgba(205,179,126,0.3); position:relative; }
  .strip::before{ content:''; position:absolute; left:50%; top:-5px; width:9px; height:9px; background: var(--gold); transform: translateX(-50%) rotate(45deg); }
  .strip-in{ display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:30px; padding-bottom:28px; }
  .strip-mono{ width:44px; height:42px; fill: var(--gold-light); }
  .strip-items{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 38px; }
  .strip-items a{ display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; font-size:14px; font-weight:300; overflow-wrap:anywhere; text-align:center; }
  .strip-items a span{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color: var(--gold-light); font-weight:500; }
  .strip-items a:hover{ color: var(--gold-light); }
  body[data-view="contacto"] .strip, body[data-view="diagnostico"] .strip{ display:none; }

  /* ---------- DIAGNOSTICO: movimiento y medidor ---------- */
  @keyframes swapIn{ from{ opacity:0; transform: translateX(14px); } to{ opacity:1; transform:none; } }
  .dx-q.swap, .dx-opts.swap{ animation: swapIn .38s ease both; }
  .dx-opts.swap{ animation-delay:.06s; }
  .dx-bar{ height:3px; }
  .dx-bar i{ transition: width .45s ease; }
  .dx-bar i::after{ content:''; position:absolute; right:-5px; top:-3px; width:8px; height:8px; background: var(--gold-light); transform: rotate(45deg); box-shadow: 0 0 10px rgba(205,179,126,0.7); }
  .dx-sum{ margin:18px 0 0; font-size:13px; letter-spacing:0.06em; color: var(--gold-light); font-weight:400; }
  .meter{ display:flex; gap:5px; margin-top:16px; }
  .meter i{ flex:1; height:5px; background: rgba(255,255,255,0.14); transform-origin:left; animation: fillIn .6s ease both; }
  .meter i:nth-child(2){ animation-delay:.12s; } .meter i:nth-child(3){ animation-delay:.24s; }
  .m-bajo i:nth-child(1){ background: var(--ok); }
  .m-medio i:nth-child(-n+2){ background: var(--mid); }
  .m-alto i{ background: var(--high); }
  .m-na i, .m-def i{ background: rgba(255,255,255,0.08); }
  @keyframes fillIn{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

  /* ---------- LEGAL PAGE ---------- */
  .legal{ background: var(--paper); }
  .legal-wrap{ max-width:760px; }
  .legal h2{ font-size: clamp(26px,4.4vw,36px); font-weight:600; margin-top:12px; color: var(--head); }
  .legal h3{ font-size:19px; font-weight:600; color: var(--head); margin-top:34px; }
  .legal p, .legal li{ font-weight:300; font-size:15.5px; line-height:1.75; color: var(--muted); margin:10px 0 0; }
  .legal ul{ margin:10px 0 0; padding-left:20px; }
  .legal a{ color: var(--gold); border-bottom:1px solid var(--gold); }
  .legal .upd{ font-size:13px; letter-spacing:0.04em; margin-top:34px; }
  footer .legal-links{ margin:10px 0 14px; }
  footer .legal-links a{ color: rgba(255,255,255,0.62); font-size:12px; border-bottom:1px solid rgba(255,255,255,0.25); }
  footer .legal-links a:hover{ color: var(--gold-light); }