:root{
      --navy:#0D1B2A;
      --petrol:#0F4C4C;
      --copper:#C7923E;
      --cream:#F6F2E7;
      --sage:#7D8A84;
      --ink:#172536;
      --white:#fffdf8;
      --line:rgba(199,146,62,.34);
      --shadow:0 22px 60px rgba(13,27,42,.10);
      --radius:22px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}
    /* Progressive enhancement: sin JavaScript se muestra la página completa.
       Con JavaScript se activa el modo SPA. Evita el lienzo vacío en Quick Look/iOS. */
    main{min-height:calc(100vh - 145px)}
    .spa-view{display:block}
    .js .spa-view{display:none}
    .js .spa-view.is-active{display:block;animation:viewIn .32s ease both}
    /* SPA: ocultar vistas sin comprimir el lienzo visual. */
    .spa-view.is-active:not(.hero){min-height:calc(100svh - 142px)}
    .hero.spa-view.is-active{
      display:flex;
      align-items:center;
      min-height:0;
      padding-top:clamp(48px,5.5vh,64px);
      padding-bottom:clamp(56px,6.5vh,72px);
    }
    .hero.spa-view.is-active > .wrap{width:min(1180px,calc(100% - 40px))}
    @keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
    .navlinks a.route-link.is-active{color:var(--petrol);font-weight:800}
    .navlinks a.route-link.is-active:after{content:"";display:block;height:2px;border-radius:2px;background:var(--copper);margin-top:5px}

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .wrap{width:min(1180px,calc(100% - 40px));margin:auto}
    .serif{font-family:Georgia,"Times New Roman",serif}
    .eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:.76rem;font-weight:700;color:var(--copper)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:999px;padding:.92rem 1.3rem;font-weight:700;transition:.2s ease;border:1px solid transparent}
    .btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{transform:translateY(-2px);background:#14283e}
    .btn-ghost{border-color:rgba(13,27,42,.18);background:rgba(255,255,255,.42)}.btn-ghost:hover{border-color:var(--copper);transform:translateY(-2px)}
    header{position:sticky;top:0;z-index:50;background:rgba(246,242,231,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(13,27,42,.08)}
    nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand img{width:310px;max-height:70px;object-fit:cover;object-position:center}
    .navlinks{display:flex;align-items:center;gap:22px;font-size:.92rem;font-weight:650;color:#314053}
    .navlinks a:hover{color:var(--petrol)}
    .menu{display:none;border:0;background:transparent;font-size:1.6rem;color:var(--navy)}

    .hero{position:relative;overflow:hidden;padding:92px 0 88px;background:
      radial-gradient(circle at 82% 18%,rgba(15,76,76,.11),transparent 33%),
      linear-gradient(135deg,#fbf8f1 0%,var(--cream) 60%,#eee6d7 100%)}
    .hero:after{content:"";position:absolute;width:720px;height:720px;border:1px solid rgba(199,146,62,.35);border-radius:50%;right:-410px;bottom:-520px;box-shadow:0 0 0 42px rgba(15,76,76,.04),0 0 0 92px rgba(13,27,42,.035)}
    .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center;position:relative;z-index:2}
    h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;color:var(--navy);font-size:clamp(3rem,6vw,5.8rem);line-height:.98;margin:.32em 0 .3em;letter-spacing:-.045em}
    .hero p{font-size:1.18rem;max-width:650px;color:#435064;margin:0 0 30px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-card{position:relative;background:rgba(255,253,248,.72);border:1px solid rgba(199,146,62,.24);border-radius:34px;padding:24px;box-shadow:var(--shadow);width:min(100%,390px);justify-self:end}
    .hero-card img{width:100%;height:auto;max-height:330px;object-fit:contain;object-position:center;border-radius:18px}
    .mini-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
    .mini-proof div{padding:14px;border-radius:16px;background:rgba(13,27,42,.045);font-size:.82rem;text-align:center;color:#3a4758}

    section{padding:92px 0}
    .section-head{max-width:760px;margin-bottom:42px}
    .section-head h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.2rem,4vw,3.7rem);line-height:1.05;color:var(--navy);margin:.18em 0 .3em;font-weight:500;letter-spacing:-.03em}
    .section-head p{color:#5a6472;font-size:1.05rem}

    .about{background:#fffaf0}
    .about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
    .about-mark{background:var(--navy);border-radius:30px;padding:36px;min-height:438px;display:grid;place-items:center;position:relative;overflow:hidden}
    .about-mark:after{content:"";position:absolute;inset:auto -100px -130px auto;width:370px;height:370px;border:1px solid rgba(199,146,62,.45);border-radius:50%}
    .about-mark img{width:68%;max-width:288px;height:auto;object-fit:contain;background:#f8f3ea;border-radius:26px;padding:18px;box-shadow:0 16px 34px rgba(0,0,0,.16);position:relative;z-index:1}
    .quote{border-left:3px solid var(--copper);padding-left:22px;font-family:Georgia,"Times New Roman",serif;font-size:1.42rem;color:var(--navy);margin:28px 0}

    .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
    .service{padding:30px;border-radius:var(--radius);background:rgba(255,255,255,.62);border:1px solid rgba(13,27,42,.09);transition:.2s ease}
    .service:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(199,146,62,.35)}
    .service .num{font-family:Georgia,"Times New Roman",serif;color:var(--copper);font-size:1.1rem}
    .service h3{font-family:Georgia,"Times New Roman",serif;color:var(--navy);font-size:1.5rem;margin:.5rem 0}
    .service p{margin:0;color:#596474}

    .approach{background:var(--navy);color:#fff}
    .approach .section-head h2,.approach .section-head p{color:#fff}
    .values{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .value{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);padding:28px;border-radius:20px;min-height:220px}
    .value strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1.5rem;color:#f4d9a8;margin-bottom:10px;font-weight:500}
    .value p{color:#d6dee7;margin:0;font-size:.95rem}

    .process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
    .step{position:relative;padding:24px 20px 22px;border-top:1px solid var(--line)}
    .step span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--petrol);color:white;font-weight:800;margin-bottom:12px}
    .step h4{margin:0 0 8px;color:var(--navy);font-family:Georgia,"Times New Roman",serif;font-size:1.25rem}
    .step p{margin:0;color:#65707e;font-size:.92rem}

    .resources{background:#fffaf0}
    .resource-card{border:1px solid rgba(13,27,42,.09);border-radius:24px;padding:32px;background:white;display:flex;justify-content:space-between;align-items:center;gap:30px}
    .resource-card h3{font-family:Georgia,"Times New Roman",serif;color:var(--navy);font-size:1.65rem;margin:0 0 8px}
    .resource-card p{margin:0;color:#65707e}

    .contact{padding-bottom:105px}
    .contact-shell{display:grid;grid-template-columns:1.1fr .9fr;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(13,27,42,.08)}
    .contact-copy{padding:52px;background:#fffdf8}
    .contact-copy h2{font-family:Georgia,"Times New Roman",serif;font-size:3rem;color:var(--navy);font-weight:500;line-height:1.05;margin:.15em 0 .35em}
    .contact-copy p{color:#5a6472}
    .contact-links{display:grid;gap:10px;margin-top:28px}
    .contact-links a{padding:15px 17px;border:1px solid rgba(13,27,42,.1);border-radius:14px;background:#fff;display:flex;justify-content:space-between;align-items:center}
    .contact-links a:hover{border-color:var(--copper)}
    .contact-art{background:linear-gradient(145deg,var(--petrol),#082d33 60%,var(--navy));padding:48px;display:grid;place-items:center;position:relative;overflow:hidden}
    .contact-art img{width:min(330px,80%);filter:brightness(1.4) saturate(.75);mix-blend-mode:screen}
    .contact-art:after{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(199,146,62,.45);border-radius:50%;bottom:-330px;right:-230px}

    footer{background:#091725;color:#cdd6df;padding:26px 0;font-size:.9rem}
    .footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}
    .footer-inner b{color:#f4d9a8;font-weight:600}

    @media(max-width:900px){
      .navlinks{position:absolute;top:82px;left:0;right:0;background:var(--cream);padding:22px 20px;border-bottom:1px solid rgba(13,27,42,.08);display:none;flex-direction:column;align-items:flex-start}
      .navlinks.open{display:flex}.menu{display:block}.brand img{width:250px}
      .hero-grid,.about-grid,.contact-shell{grid-template-columns:1fr}.hero{padding-top:60px}.hero-card{width:min(100%,520px);max-width:520px;justify-self:center}
      .values,.process{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:620px){
      .wrap{width:min(100% - 26px,1180px)}.brand img{width:215px}.hero{padding:48px 0 62px}
      .hero.spa-view.is-active{min-height:0;padding-top:54px;padding-bottom:64px}
      .hero.spa-view.is-active > .wrap{width:min(100% - 26px,1180px)}
      .spa-view.is-active:not(.hero){min-height:calc(100svh - 132px)}
      .services-grid,.values,.process{grid-template-columns:1fr}
      .about-mark{min-height:300px;padding:30px}.contact-copy{padding:36px 26px}.contact-art{padding:36px 24px}
      .resource-card,.footer-inner{align-items:flex-start;flex-direction:column}.resource-card{display:flex}
      section{padding:70px 0}
    }