/* Morada Carmem — Refúgio Atlântico Editorial
   Fundos areia/concha, acentos musgo/oceano/terracota, composição assimétrica,
   textura natural e animações discretas. Fontes: Cormorant Garamond + DM Sans. */

:root {
  --sand: #f4f0e9;
  --cream: #f9f7f2;
  --ink: #243b35;
  --deep: #17332f;
  --moss: #6d7b60;
  --terra: #b9654b;
  --line: #d8d2c6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sand); color: var(--ink); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; }

.site-shell { overflow: hidden; background: var(--sand); }

.topbar { height: 82px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; width: 100%; z-index: 10; color: #fff; border-bottom: 1px solid rgba(255,255,255,.22); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 185px; letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; }
.brand span { display: flex; gap: 5px; align-items: baseline; font-family: 'Cormorant Garamond', serif; font-size: 23px; line-height: 1; }
.brand strong { font-weight: 600; }
.brand em { font-style: italic; font-weight: 400; }
.main-nav { display: flex; align-items: center; gap: 32px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.main-nav a { opacity: .9; transition: opacity .2s ease; }
.main-nav a:hover { opacity: 1; }
.top-cta { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.7); }
.menu-toggle { display: none; color: inherit; background: none; border: 0; }

.hero { min-height: 780px; height: 92vh; position: relative; display: flex; align-items: flex-end; padding: 0 8vw 13vh; background-size: cover; background-position: center; color: #fff; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,35,31,.66) 0%, rgba(12,35,31,.28) 50%, rgba(12,35,31,.05) 100%), linear-gradient(0deg, rgba(10,22,19,.45), transparent 45%); }
.hero-content { position: relative; max-width: 640px; animation: rise .8s cubic-bezier(.23,1,.32,1) both; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--terra); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.eyebrow span { display: block; width: 28px; height: 1px; background: currentColor; }
.eyebrow.light { color: #f3d4c9; }
h1, h2, h3 { margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: -.045em; }
h1 { margin: 25px 0 22px; font-size: clamp(58px, 7.5vw, 112px); line-height: .84; }
h1 i, h2 i, h3 i { font-style: italic; font-weight: 400; }
.hero-copy { width: 330px; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.86); margin: 0 0 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: transform .18s ease, background .18s ease, color .18s ease; cursor: pointer; }
.button:active { transform: scale(.97); }
.button-light { background: #f7f2ea; color: var(--ink); }
.button-light:hover { background: #fff; transform: translateY(-2px); }
.button-dark { background: var(--ink); color: var(--sand); }
.button-dark:hover { background: var(--terra); transform: translateY(-2px); }
.button-terra { background: var(--terra); color: #fff; }
.button-terra:hover { background: #a7553d; transform: translateY(-2px); }
.hero-meta { position: absolute; right: 5vw; bottom: 46px; display: flex; align-items: center; gap: 12px; font-size: 9px; letter-spacing: .16em; opacity: .8; }
.meta-line { width: 45px; height: 1px; background: currentColor; }
.scroll-cue { position: absolute; left: 5vw; bottom: 43px; display: flex; align-items: center; gap: 12px; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; opacity: .8; }
.scroll-cue div { width: 38px; height: 1px; background: #fff; }

.section-pad { padding: 128px 10vw; }
.intro { display: grid; grid-template-columns: 90px 1fr 220px; gap: 52px; min-height: 560px; align-items: center; background: var(--cream); }
.intro-aside { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0 30px; color: var(--terra); }
.section-number { font: 500 14px 'Cormorant Garamond', serif; }
.vertical-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: .15em; }
.intro-copy { max-width: 650px; }
h2 { font-size: clamp(48px, 5.8vw, 80px); line-height: .9; }
.intro-copy h2 { margin: 22px 0 30px; }
.body-large { max-width: 495px; font: 400 20px/1.5 'Cormorant Garamond', serif; color: #53625b; }
.intro-signature { display: flex; align-items: center; gap: 12px; margin-top: 37px; color: var(--terra); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.signature-line { width: 54px; height: 1px; background: var(--terra); }
.intro-stats { border-left: 1px solid var(--line); padding-left: 30px; display: flex; flex-direction: column; gap: 38px; }
.intro-stats div { display: flex; align-items: baseline; gap: 12px; }
.intro-stats strong { font: 500 42px 'Cormorant Garamond', serif; }
.intro-stats span { font-size: 10px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: #718078; }

.rooms { background: var(--sand); }
.section-heading, .location-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 62px; }
.section-heading h2, .location-head h2 { margin-top: 20px; }
.text-link { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; transition: gap .2s ease; }
.text-link:hover { gap: 13px; }
.room-feature { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; background: var(--cream); }
.room-feature + .room-feature { margin-top: 56px; }
.room-feature--flip .room-image-wrap { order: 2; }
.room-feature--flip .room-copy { order: 1; }
.room-image-wrap { position: relative; height: 550px; overflow: hidden; }
.room-image-wrap img, .experience-image img, .location-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.23,1,.32,1); }
.room-image-wrap:hover img, .experience-image:hover img, .location-image:hover img { transform: scale(1.035); }
.image-caption { position: absolute; left: 24px; bottom: 20px; color: #fff; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.room-copy { padding: 60px clamp(35px, 6vw, 95px); }
.room-index { color: var(--terra); font-size: 10px; letter-spacing: .12em; }
h3 { font-size: clamp(48px, 5vw, 72px); line-height: .85; margin: 30px 0 25px; }
.room-copy p { max-width: 315px; color: #617069; font-size: 14px; line-height: 1.75; }
.amenities { display: flex; gap: 18px; flex-wrap: wrap; margin: 28px 0 32px; color: var(--terra); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.amenities span { padding-right: 18px; border-right: 1px solid var(--line); }
.amenities span:last-child { border: 0; }
.rooms-note { margin: 46px 0 0; color: #718078; font-size: 12px; letter-spacing: .04em; }

.experience { display: grid; grid-template-columns: .83fr 1.17fr; gap: 7vw; align-items: center; background: var(--deep); color: #fff; padding-top: 110px; padding-bottom: 110px; }
.experience-copy { padding-left: 4vw; max-width: 480px; }
.experience-copy h2 { margin: 22px 0 28px; }
.experience-copy > p:not(.eyebrow) { color: rgba(255,255,255,.7); line-height: 1.75; font-size: 14px; max-width: 390px; margin: 0 0 32px; }
.experience-image { position: relative; height: 520px; }
.light-caption { color: #fff; }

.location { background: var(--cream); }
.location-intro { max-width: 340px; color: #68766e; font-size: 14px; line-height: 1.7; margin: 0; }
.location-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 9vw; align-items: stretch; }
.location-image { min-height: 480px; position: relative; }
.nearby-list { display: flex; flex-direction: column; justify-content: center; }
.nearby-item { display: grid; grid-template-columns: 35px 1fr 18px; gap: 15px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.nearby-item > span { color: var(--terra); font: 500 14px 'Cormorant Garamond', serif; }
.nearby-item strong { font: 500 24px 'Cormorant Garamond', serif; }
.nearby-item p { margin: 4px 0 0; color: #829087; font-size: 10px; letter-spacing: .05em; }
.coordinates { display: flex; align-items: center; gap: 10px; color: var(--terra); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 36px; }

.booking { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; align-items: center; background: var(--moss); color: #fff; }
.booking-intro { max-width: 475px; }
.booking-intro h2 { margin: 22px 0 24px; }
.booking-intro > p:not(.eyebrow) { color: rgba(255,255,255,.73); line-height: 1.7; font-size: 14px; max-width: 400px; }
.booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.booking-form label { display: flex; flex-direction: column; gap: 8px; color: #e8e5d9; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.booking-form input, .guest-control { width: 100%; height: 50px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35); color: #fff; padding: 0 14px; outline: 0; }
.booking-form input:focus, .guest-control:focus-within { border-color: #fff; }
.guest-control { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.guest-control button { display: grid; place-items: center; color: #fff; border: 0; background: none; padding: 6px; cursor: pointer; min-width: 44px; min-height: 44px; }
.guest-control span { font-size: 13px; letter-spacing: 0; }
.booking-form input::-webkit-calendar-picker-indicator { filter: invert(1); }
.booking-form .button { grid-column: 1 / -1; justify-self: start; margin-top: 14px; }
.form-notice { grid-column: 1 / -1; color: #f8d8cc; font-size: 12px; line-height: 1.5; margin: 0; }

.footer { padding: 72px 10vw 27px; background: #1c332f; color: #eae7dc; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.footer-brand .brand-mark { width: 34px; height: 34px; }
.footer-brand > span { display: flex; gap: 5px; align-items: baseline; font-family: 'Cormorant Garamond', serif; font-size: 23px; line-height: 1; color: #fff; margin-top: 14px; }
.footer-brand strong { font-weight: 600; }
.footer-brand em { font-style: italic; font-weight: 400; }
.footer-brand p { margin: 22px 0 0; color: #9bab9f; font: italic 20px 'Cormorant Garamond', serif; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.footer-links > div { display: flex; flex-direction: column; gap: 12px; }
.footer-label { color: #9bab9f; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 6px; }
.footer-links a { display: flex; align-items: center; gap: 7px; font-size: 12px; transition: color .2s ease; }
.footer-links a:hover { color: #e1a18d; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; margin-top: 15px; color: #8b9c91; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 900px) {
  .topbar { padding: 0 6vw; }
  .main-nav { display: none; position: absolute; top: 82px; left: 0; width: 100%; padding: 25px 6vw; flex-direction: column; align-items: flex-start; gap: 20px; background: var(--deep); }
  .main-nav.is-open { display: flex; }
  .top-cta { display: none; }
  .menu-toggle { display: block; min-width: 44px; min-height: 44px; }
  .hero { min-height: 680px; height: 88vh; padding: 0 8vw 95px; }
  .hero-meta { right: 8vw; bottom: 35px; }
  .scroll-cue { left: 8vw; bottom: 35px; }
  .section-pad { padding: 90px 8vw; }
  .intro { grid-template-columns: 1fr; gap: 25px; }
  .intro-aside { display: none; }
  .intro-stats { border-left: 0; border-top: 1px solid var(--line); padding: 25px 0 0; flex-direction: row; gap: 40px; }
  .room-feature, .experience, .location-grid, .booking { grid-template-columns: 1fr; gap: 40px; }
  .room-feature--flip .room-image-wrap { order: 0; }
  .room-feature--flip .room-copy { order: 0; }
  .room-image-wrap { height: 440px; }
  .room-copy { padding: 25px 8vw 65px; }
  .experience-copy { padding: 0; }
  .experience-image { height: 400px; }
  .location-image { min-height: 400px; }
  .location-head, .section-heading { display: block; }
  .location-intro { margin-top: 25px; }
  .text-link { display: inline-flex; margin-top: 25px; }
  .footer { padding: 60px 8vw 25px; grid-template-columns: 1fr; gap: 45px; }
  .footer-bottom { grid-column: auto; gap: 15px; flex-direction: column; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 58px; }
  .hero-copy { width: auto; max-width: 300px; }
  .hero-meta { display: none; }
  .section-pad { padding-top: 72px; padding-bottom: 72px; }
  .intro-stats { gap: 20px; }
  .intro-stats strong { font-size: 35px; }
  .intro-stats span { font-size: 9px; }
  .booking-form { grid-template-columns: 1fr; }
  .booking-form .button { width: 100%; }
  .footer-links { grid-template-columns: 1fr; }
}