/* At Home Riviera Maya — shared styles for the home page and the owners page */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#123B3E;
  --ink-deep:#0B2A2C;
  --cenote:#1B8F86;
  --foam:#BFE6DF;
  --sand:#FBF3E2;
  --sand-dim:#F1E6CC;
  --paper:#FFFDF8;
  --coral:#C84F36;
  --coral-hover:#AD3F29;
  --muted:#52706D;
  --line:rgba(18,59,62,.16);
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(1.25rem,5vw,4rem);
  --max:1180px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:1rem}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:300}
.skip:focus{left:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:1.55rem}
p{max-width:62ch}
.lead{font-size:1.1rem;color:var(--muted);max-width:56ch;margin-top:1rem}

/* ── NAV ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:68px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0 var(--gutter);color:#fff;transition:background .25s,box-shadow .25s}
.nav.solid,.nav.scrolled{background:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.logo{font-family:var(--display);font-size:1.45rem;font-weight:600;text-decoration:none;letter-spacing:.005em;white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:1.75rem}
.nav-links{display:flex;gap:1.75rem;list-style:none}
.nav-links a{font-size:.95rem;text-decoration:none;opacity:.92;padding:.35rem 0;border-bottom:1px solid transparent}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1;border-bottom-color:currentColor}
.lang{display:flex;border:1px solid rgba(255,255,255,.4);border-radius:999px;overflow:hidden}
.lang button{font:inherit;font-size:.8rem;font-weight:500;background:transparent;color:#fff;border:0;padding:.3rem .7rem;cursor:pointer}
.lang button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.lang-m{display:none}
.nav-cta{font-size:.9rem;font-weight:500;text-decoration:none;background:var(--coral);color:#fff;padding:.6rem 1.15rem;border-radius:999px}
.nav-cta:hover{background:var(--coral-hover)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;color:inherit}
.burger span{display:block;width:22px;height:2px;background:currentColor;margin:5px auto;transition:transform .2s,opacity .2s}
@media(max-width:860px){
  .logo{font-size:1.15rem;line-height:1.05;white-space:normal;max-width:7.5rem}
  .lang-m{display:flex;margin-left:auto}
  .nav-right .lang{display:none}
  .lang button{padding:.3rem .6rem}
  .burger{display:block}
  .nav-right{position:fixed;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:1.25rem;background:var(--ink);padding:1.5rem var(--gutter) 2rem;transform:translateY(-120%);transition:transform .25s;visibility:hidden}
  .nav.open .nav-right{transform:none;visibility:visible}
  .nav.open{background:var(--ink)}
  .nav-links{flex-direction:column;gap:.9rem}
  .nav-links a{font-size:1.15rem}
}

/* ── BUTTONS ── */
.btn{display:inline-block;font:inherit;font-weight:500;font-size:1rem;text-decoration:none;border:0;border-radius:999px;padding:.9rem 1.7rem;cursor:pointer;background:var(--coral);color:#fff;transition:background .2s}
.btn:hover{background:var(--coral-hover)}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid currentColor}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.dark{background:var(--ink)}
.btn.dark:hover{background:var(--ink-deep)}

/* ── HERO (home) ── */
.hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;color:#fff;background:var(--ink-deep)}
.hero-img{position:absolute;inset:0;background:url('/photos/casa-cooper/cover.jpg') center 62%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,42,44,.55) 0%,rgba(11,42,44,.08) 34%,rgba(11,42,44,.72) 100%)}
.hero-content{position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;padding:8rem var(--gutter) 8.5rem}
.hero h1{font-size:clamp(2.7rem,7.2vw,5.6rem);font-weight:500;max-width:15ch;text-wrap:balance}
.hero .sub{margin-top:1.25rem;font-size:1.15rem;max-width:44ch;opacity:.95}

/* ── SEARCH ── */
.search-wrap{position:relative;z-index:5;margin-top:-4.2rem}
.search{background:var(--sand);border-radius:6px;padding:1.25rem 1.25rem 1.35rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.8fr) auto;gap:1rem;align-items:end;box-shadow:0 18px 50px -20px rgba(11,42,44,.55)}
.field{min-width:0}
.field input[type=date]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;text-align:left;line-height:1.2}
.field input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.2em}
.field label{display:block;font-size:.85rem;font-weight:500;color:var(--muted);margin-bottom:.3rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:4px;padding:.8rem .85rem;min-height:48px}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--cenote);outline-offset:1px;border-color:var(--cenote)}
.search .btn{height:48px;padding-top:0;padding-bottom:0}
.search-note{grid-column:1/-1;font-size:.9rem;color:var(--muted);min-height:1.3em}
.search-note.err{color:var(--coral)}
@media(max-width:820px){
  .search{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .search .field.guests{grid-column:1/2}
  .search .btn{grid-column:2/3}
  .hero-content{padding-bottom:5.5rem}
  .search-wrap{margin-top:-3rem}
}
@media(max-width:480px){.search{grid-template-columns:minmax(0,1fr)}.search .field.guests,.search .btn{grid-column:auto}.search .btn{width:100%}}

/* ── SECTIONS ── */
section{padding:clamp(4rem,9vw,7rem) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.result-line{font-size:1rem;color:var(--muted);min-height:1.5em}
.result-line button{font:inherit;color:var(--coral);background:none;border:0;text-decoration:underline;cursor:pointer;margin-left:.5rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.chip{font:inherit;font-size:.92rem;padding:.5rem 1.05rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── HOME CARDS ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:2.25rem 1.75rem}
.home{display:block;text-decoration:none;color:inherit}
.home .ph{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--sand-dim)}
.home .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.home:hover .ph img{transform:scale(1.035)}
.pill{position:absolute;left:.75rem;top:.75rem;font-size:.82rem;font-weight:500;padding:.3rem .7rem;border-radius:999px;background:#fff;color:var(--ink)}
.pill.open{background:var(--cenote);color:#fff}
.pill.no{background:rgba(18,59,62,.88);color:#fff}
.home.dim .ph img{filter:grayscale(.7) brightness(.85)}
.home .area{font-size:.9rem;color:var(--muted);margin-top:.9rem}
.home h3{margin-top:.15rem}
.home .meta{font-size:.95rem;color:var(--muted);margin-top:.35rem}
.home .go{display:inline-block;margin-top:.6rem;font-weight:500;color:var(--coral);border-bottom:1px solid currentColor}
.empty{padding:2rem;background:var(--sand);border-radius:4px;max-width:60ch}

/* ── WHY DIRECT ── */
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem;margin-top:3rem}
.three>div{border-top:3px solid var(--cenote);padding-top:1.25rem}
.three p{margin-top:.6rem;color:var(--muted)}
@media(max-width:820px){.three{gap:2rem}}

/* ── REVIEWS ── */
.reviews{background:var(--ink);color:#fff}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:3rem}
.quotes blockquote{padding:0 2rem;border-left:1px solid rgba(255,255,255,.22)}
.quotes blockquote:first-child{padding-left:0;border-left:0}
.quotes p{font-family:var(--display);font-size:1.5rem;line-height:1.3}
.quotes cite{display:block;margin-top:1rem;font-style:normal;font-size:.92rem;opacity:.75}
@media(max-width:860px){.quotes{grid-template-columns:1fr;gap:2rem}.quotes blockquote{padding:0;border:0}}

/* ── OWNER BAND ── */
.owner-band{background:var(--sand-dim)}
.owner-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.owner-band p{color:var(--muted);margin-top:.75rem}

/* ── FOOTER ── */
footer{background:var(--ink-deep);color:rgba(255,255,255,.85);padding:3.5rem 0 5rem}
.foot{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.foot .logo{color:#fff;font-size:1.6rem}
.foot ul{list-style:none;display:grid;gap:.45rem}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.copy{margin-top:2.5rem;font-size:.85rem;opacity:.65}

/* ── WHATSAPP ── */
.wa{position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;width:56px;height:56px;border-radius:50%;background:#1FA855;display:grid;place-items:center;box-shadow:0 8px 24px -8px rgba(0,0,0,.5)}
.wa svg{width:30px;height:30px;fill:#fff}

/* ── OWNERS PAGE ── */
.o-hero{background:var(--ink);color:#fff;padding:9rem 0 4.5rem}
.o-hero h1{font-size:clamp(2.6rem,6.4vw,5rem);max-width:16ch;text-wrap:balance}
.o-hero .sub{margin-top:1.25rem;font-size:1.15rem;max-width:52ch;opacity:.92}
.o-hero .actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.o-hero .since{margin-top:2.25rem;font-size:.95rem;opacity:.75}
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.9rem 2rem}
.ticks li{padding-left:1.6rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:.8rem;height:2px;background:var(--cenote)}
@media(max-width:600px){.ticks{grid-template-columns:1fr}}
.alt{background:var(--sand)}
.steps{list-style:none;counter-reset:s;display:grid;gap:1.75rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.2rem 1fr;gap:1rem}
.steps li::before{content:counter(s);font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--cenote)}
.steps p{color:var(--muted);margin-top:.25rem}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.areas figure{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/5}
.areas img{width:100%;height:100%;object-fit:cover}
.areas figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1rem 1rem;color:#fff;font-family:var(--display);font-size:1.5rem;background:linear-gradient(0deg,rgba(11,42,44,.85),transparent)}
@media(max-width:700px){.areas{grid-template-columns:1fr}.areas figure{aspect-ratio:16/10}}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,5rem)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-grid .info a{display:block;margin-top:.6rem;font-weight:500}
form.stack{display:grid;gap:1rem}
form.stack .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){form.stack .two{grid-template-columns:1fr}}
.ok{color:var(--cenote);font-weight:500;display:none}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
section[id],[id].hero,.search-wrap{scroll-margin-top:80px}