:root{
  --blue:#073f5c;
  --blue2:#0b4968;
  --salmon:#f6ab82;
  --cream:#f7f3ea;
  --mist:#c8dbe3;
  --muted:#8b8d8f;
  --line:rgba(255,255,255,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blue);color:var(--cream);font-family:'Lato',Arial,sans-serif;font-weight:300;line-height:1.55}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.topbar{position:sticky;top:0;z-index:20;height:82px;background:rgba(7,63,92,.97);display:flex;align-items:center;padding:0 clamp(24px,4vw,64px);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.brand{display:inline-flex;align-items:center;line-height:1}
.brand img{display:block;width:112px;height:auto;object-fit:contain}

/* HERO — real photographic background reconstructed from the Framer reference.
   All logo/copy are live HTML, never baked into a JPG. */
.hero{min-height:calc(100vh - 82px);position:relative;overflow:hidden;background-image:url('assets/hero-luna-clean.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat;display:grid;grid-template-columns:1fr 1fr;align-items:end;padding:clamp(38px,5vw,78px) clamp(28px,4.5vw,72px)}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(3,34,51,.14))}
.hero-copy{position:relative;z-index:2;max-width:520px}
.hero-left h1.hero-logo{margin:0 0 26px;line-height:1}
.hero-logo img{display:block;width:clamp(170px,22vw,330px);height:auto;object-fit:contain}
.hero-left p,.hero-right p{font-size:clamp(.98rem,1.15vw,1.18rem);color:#fff;text-shadow:0 1px 7px rgba(0,0,0,.16)}
.hero-right{justify-self:end;align-self:end;padding-bottom:4%;text-align:left}
.hero-quote{font-size:clamp(1.12rem,1.6vw,1.55rem)!important;line-height:1.3}

.deep{background:var(--blue)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:700px;border-top:1px solid var(--line)}
.media{min-height:500px;padding:clamp(28px,4vw,58px)}
.media img{border-radius:0}
.copy{padding:clamp(50px,6vw,96px);display:flex;flex-direction:column;justify-content:center}
.copy h2,.chapter-copy h2,.contact h2,.card h3{font-family:'Libre Caslon Text',Georgia,serif;font-weight:400;line-height:1.12;margin:0 0 42px}
.copy h2{font-size:clamp(2rem,3.25vw,3.8rem)}
.salmon{color:var(--salmon)}
.light{color:var(--cream)}
.small-copy{max-width:560px;font-size:clamp(.98rem,1.15vw,1.16rem)}

/* NUESTRO ESPÍRITU — image brought back to the same visual scale as the previous sections. */
.chapter{display:grid;grid-template-columns:1fr 1fr;min-height:700px;border-top:1px solid var(--line);align-items:center}
.chapter-image{width:calc(100% - clamp(56px,8vw,116px));height:500px;margin:auto;object-fit:cover}
.chapter-copy{padding:clamp(50px,6vw,96px);display:flex;flex-direction:column;justify-content:center}
.chapter-copy h2{font-size:clamp(2.2rem,3.5vw,4rem)}
.chapter-copy p{font-size:clamp(.98rem,1.15vw,1.16rem);max-width:540px}

/* The three closing themes are stacked rows in Framer, not three desktop columns. */
.cards{display:block;border-top:1px solid var(--line)}
.card{background:var(--blue);display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:640px;border-bottom:1px solid var(--line);padding:0}
.card img{height:500px;width:calc(100% - clamp(56px,8vw,116px));margin:auto;object-fit:cover;grid-column:1;grid-row:1 / span 4}
.card h3,.card p{grid-column:2;margin-left:clamp(50px,6vw,96px);margin-right:clamp(50px,6vw,96px)}
.card h3{font-size:clamp(1.8rem,2.5vw,2.9rem);margin-top:auto;margin-bottom:22px;align-self:end}
.card p{font-size:1rem;margin-top:0;margin-bottom:18px}
.card p:last-child{margin-bottom:auto}

.conversation{border-top:1px solid var(--line);min-height:520px;display:grid;place-items:center;text-align:center;padding:72px 24px}
.conversation-copy{max-width:720px;font-size:clamp(1rem,1.25vw,1.18rem)}
.eyebrow{font-family:'Libre Caslon Text',Georgia,serif;font-size:clamp(1.85rem,2.6vw,2.8rem);letter-spacing:.04em}
.meta{margin-top:40px}
.contact{border-top:1px solid var(--line);padding:clamp(68px,8vw,110px) 24px}
.contact-inner{max-width:390px;margin:0 auto}
.contact h2{text-align:center;font-size:clamp(2.1rem,3.2vw,3.5rem);margin-bottom:52px}
form{display:grid;gap:18px}
label{display:grid;gap:8px;color:#9ea1a3;font-size:.92rem}
input,textarea{width:100%;border:0;border-radius:7px;padding:13px 15px;background:#b9ced7;color:#173648;font:inherit;outline:none}
textarea{resize:vertical}
button{border:0;border-radius:7px;padding:13px 24px;background:#f2b9a6;color:var(--blue);font-weight:700;cursor:pointer}
button:hover{filter:brightness(1.04)}
button:disabled{opacity:.65;cursor:wait}
.hidden{display:none}
.footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:22px clamp(24px,4vw,64px);font-family:'Libre Caslon Text',Georgia,serif}
.footer-logo img{display:block;width:76px;height:auto;object-fit:contain}

@media(max-width:900px){
  .topbar{height:70px}
  .hero{min-height:calc(100vh - 70px);grid-template-columns:1fr;padding:38px 28px;background-position:center center}
  .hero-left{align-self:end}.hero-logo img{width:220px}.hero-right{justify-self:start;padding:28px 0 0}
  .split,.chapter,.card{grid-template-columns:1fr;min-height:auto}
  .media{min-height:420px;padding:22px}
  .copy{padding:46px 28px}.reverse-mobile .copy{order:2}.reverse-mobile .media{order:1}
  .chapter-image{width:calc(100% - 44px);height:auto;aspect-ratio:4/3;margin:22px auto}
  .chapter-copy{padding:46px 28px}
  .card{padding:0 0 44px}.card img{grid-column:1;grid-row:1;width:calc(100% - 44px);height:auto;aspect-ratio:4/3;margin:22px auto 30px}
  .card h3,.card p{grid-column:1;margin-left:28px;margin-right:28px}.card h3{margin-top:0;align-self:auto}
  .conversation{min-height:480px}.footer{font-size:.86rem}
}
@media(max-width:520px){
  .hero{padding:28px 22px;min-height:86vh;background-position:center center}.hero-logo img{width:185px}.hero-left p,.hero-right p{font-size:.95rem}.copy h2{font-size:2.05rem}.media{min-height:340px;padding:18px}.footer{flex-direction:column;gap:8px}
}

.form-success{text-align:center;padding:16px 0 8px;color:var(--cream)}
.form-success h3{font-family:'Libre Caslon Text',Georgia,serif;font-size:clamp(2.6rem,5vw,4.5rem);font-weight:400;margin:0 0 18px}
.form-success p{font-size:1.05rem;margin:0}