/* Layout: "arcada colonial" — un arco de la Zona Colonial enmarca el horizonte caribeño; bandas alternas de piedra coralina y mar profundo. */
:root{
--stone:#e7e3da; --stone-2:#dcd6ca; --line:#c3bcad;
--ocean:#0d3440; --ocean-2:#0a2a33; --sea:#3fa7a0; --sea-lt:#8fd0ca;
--ink:#14262b; --muted:#4c5d61; --caoba:#7b3a26; --sand:#f3efe7;
--display:"Libre Caslon Display","Libre Caslon Text",Georgia,"Times New Roman",serif;
--serif:"Libre Caslon Text",Georgia,serif;
--sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
--mono:"IBM Plex Mono",Menlo,Consolas,monospace;
--gutter:clamp(16px,5vw,72px); --max:1200px;
color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--stone);color:var(--ink);font-family:var(--sans);font-size:clamp(16px,.45vw + 14px,18px);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.005em}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
.ref{font-family:var(--mono);font-size:.74rem;line-height:1.5}
/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--stone) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ocean)}
.brand .mk{width:24px;height:30px}
.brand span{display:grid;line-height:1.05}
.brand b{font-family:var(--display);font-weight:400;font-size:1.12rem;letter-spacing:.06em;white-space:nowrap}
.brand small{font-family:var(--sans);font-weight:600;font-size:.58rem;letter-spacing:.42em;color:var(--caoba)}
nav ul{display:flex;gap:clamp(14px,2.2vw,30px);list-style:none;margin:0;padding:0}
nav a{font-weight:500;font-size:.86rem;text-decoration:none;color:var(--muted);transition:color .2s}
nav a:hover{color:var(--ocean)}
.lang{display:flex;gap:2px}
.lang a{font-weight:600;font-size:.72rem;letter-spacing:.16em;padding:6px 8px;text-decoration:none;color:var(--muted);border:1px solid transparent}
.lang a[aria-current]{color:var(--ocean);border-color:var(--ocean)}
@media (max-width:860px){nav{display:none}}
/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:end;padding-block:clamp(48px,7vw,104px) 0}
.hero .eyebrow{color:var(--caoba);display:flex;gap:12px;align-items:center}
.hero .eyebrow::before{content:"";width:28px;height:2px;background:var(--caoba)}
.hero h1{font-size:clamp(2.3rem,4.2vw + .7rem,4.6rem);line-height:1.04;color:var(--ocean);margin-block:22px 24px}
.hero h1 em{font-family:var(--serif);font-style:italic;color:var(--caoba);font-size:.92em}
.lead{max-width:36ch;font-size:1.12em;color:var(--muted);margin:0 0 34px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:clamp(48px,7vw,104px)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.04em;text-decoration:none;border:1.5px solid var(--ocean);border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn.solid{background:var(--ocean);color:var(--sand)}
.btn.solid:hover{background:var(--ocean-2)}
.btn.ghost{color:var(--ocean);background:transparent}
.btn.ghost:hover{background:color-mix(in srgb,var(--ocean) 8%,transparent)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.archbox{align-self:end;justify-self:end;width:min(100%,400px)}
.archbox svg{display:block;width:100%;height:auto}
.coords{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:10px 4px 14px;color:var(--muted)}
.coords span{white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
.sun{animation:rise 2.4s cubic-bezier(.2,.7,.2,1) both}
.w1{animation:drift 14s linear infinite}
.w2{animation:drift 20s linear infinite reverse}
}
@keyframes rise{from{transform:translateY(70px)}to{transform:translateY(0)}}
@keyframes drift{to{transform:translateX(100px)}}
@media (max-width:860px){
.hero .wrap{grid-template-columns:minmax(0,1fr)}
.archbox{order:-1;justify-self:start;width:min(56%,240px)}
.ctas{padding-bottom:56px}
}
/* sections */
section{scroll-margin-top:64px}
.sec{padding-block:clamp(72px,9vw,124px)}
.band{background:var(--stone-2)}
.dark{background:var(--ocean);color:var(--sand)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.head h2{font-size:clamp(1.9rem,2.6vw + .8rem,3.2rem);line-height:1.08;color:var(--ocean)}
.dark .head h2{color:var(--sand)}
.head p{margin:0;max-width:56ch;color:var(--muted)}
.dark .head p{color:#b9cdd0}
.head .eyebrow{color:var(--caoba);display:block;margin-bottom:16px}
.dark .head .eyebrow{color:var(--sea-lt)}
@media (max-width:760px){.head{grid-template-columns:minmax(0,1fr)}}
/* services */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.pillar{border-top:2px solid var(--ocean);padding-top:22px;display:flex;flex-direction:column;gap:14px}
.pillar .ref{color:var(--caoba)}
.pillar h3{font-size:1.7rem;line-height:1.15;color:var(--ocean)}
.pillar p{margin:0;color:var(--muted)}
.pillar ul{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.pillar li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.95em;display:flex;gap:10px}
.pillar li::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--sea)}
@media (max-width:900px){.pillars{grid-template-columns:minmax(0,1fr)}}
/* residence */
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #2a5662}
.route{padding:28px clamp(16px,2.4vw,32px) 30px 0;display:grid;gap:10px;align-content:start}
.route+.route{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid #2a5662}
.route .k{font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sea-lt)}
.route .fig{font-family:var(--display);font-size:clamp(2.2rem,3vw + .6rem,3.4rem);line-height:1;font-variant-numeric:tabular-nums lining-nums;color:var(--sand)}
.route .unit{font-size:.92em;color:#b9cdd0}
.route .ref{color:#8fb3b8}
.note{margin:28px 0 0;padding-top:18px;border-top:1px solid #2a5662;color:#b9cdd0;font-size:.92em;max-width:72ch}
@media (max-width:860px){.routes{grid-template-columns:minmax(0,1fr)}.route+.route{padding-left:0;border-left:0;border-top:1px solid #2a5662}}
/* corridor */
.corr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:start}
.corr p{margin:0 0 18px;max-width:58ch}
.corr .muted{color:var(--muted)}
.facts{display:grid;gap:0;border-top:2px solid var(--ocean)}
.fact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.fact span{color:var(--muted);font-size:.95em}
.fact strong{font-family:var(--display);font-weight:400;font-size:1.7rem;color:var(--ocean);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.sister{display:inline-flex;margin-top:8px}
@media (max-width:860px){.corr{grid-template-columns:minmax(0,1fr)}}
/* method */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.5vw,36px)}
.step{display:grid;gap:12px;align-content:start}
.step .n{font-family:var(--display);font-size:3rem;line-height:1;color:var(--caoba);font-variant-numeric:lining-nums}
.step h3{font-size:1.35rem;color:var(--ocean);padding-top:12px;border-top:1px solid var(--ocean)}
.step p{margin:0;color:var(--muted);font-size:.95em}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.steps{grid-template-columns:minmax(0,1fr)}}
/* contact */
.contact .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.contact h2{font-size:clamp(2rem,3.2vw + .7rem,3.6rem);line-height:1.08;color:var(--sand);margin-top:16px}
.contact .eyebrow{color:var(--sea-lt)}
.mail{display:grid;gap:14px}
.mail .addr{font-family:var(--display);font-size:clamp(1.3rem,1.6vw + .8rem,2.1rem);user-select:all;overflow-wrap:anywhere;color:var(--sand)}
.mail .row{display:flex;flex-wrap:wrap;gap:12px}
.dark .btn.solid{background:var(--sand);color:var(--ocean);border-color:var(--sand)}
.dark .btn.solid:hover{background:#fff}
.dark .btn.ghost{color:var(--sand);border-color:#5d8790}
.dark .btn.ghost:hover{border-color:var(--sand);background:rgba(255,255,255,.06)}
.mail .note2{margin:0;color:#b9cdd0;font-size:.92em}
@media (max-width:860px){.contact .wrap{grid-template-columns:minmax(0,1fr)}}
footer{background:var(--ocean-2);color:#9fb8bc}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-block:26px;font-size:.88rem}
footer a{color:var(--sand)}