/*
 * Quiet luxury v6
 *
 * A final, deliberately restrained layer shared by every public route and
 * booking surface. The goal is clarity: fewer visual effects, more consistent
 * rhythm, stronger typography and quieter controls.
 */

:root {
  --premium-ink: #17312c;
  --premium-ink-deep: #10231f;
  --premium-paper: #faf7f1;
  --premium-paper-muted: #f2ede4;
  --premium-white: #fffdf9;
  --premium-bronze: #966238;
  --premium-bronze-soft: #c49a70;
  --premium-line: rgb(23 49 44 / 13%);
  --premium-line-dark: rgb(240 201 142 / 18%);
  --premium-shadow-subtle: 0 18px 55px rgb(16 35 31 / 8%);
  --premium-shadow-media: 0 24px 70px rgb(7 24 20 / 13%);
  --premium-radius-control: 0.45rem;
  --premium-radius-panel: 0.65rem;
  --premium-gutter: clamp(1.25rem, 3.6vw, 3.75rem);
  --premium-section-space: clamp(5.25rem, 8vw, 7.75rem);

  --background: 40 38% 97%;
  --foreground: 165 30% 21%;
  --card: 40 45% 98%;
  --card-foreground: 165 37% 17%;
  --popover: 40 45% 98%;
  --popover-foreground: 165 37% 17%;
  --primary: 165 37% 15%;
  --primary-foreground: 40 38% 97%;
  --secondary: 29 42% 62%;
  --secondary-foreground: 165 37% 15%;
  --muted: 38 22% 91%;
  --muted-foreground: 165 16% 34%;
  --accent: 27 45% 40%;
  --accent-foreground: 40 38% 97%;
  --border: 36 22% 84%;
  --input: 40 48% 99%;
  --ring: 27 45% 40%;
  --radius: 0.55rem;
}

html {
  background: var(--premium-paper);
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgb(196 154 112 / 5%), transparent 26rem),
    var(--premium-paper);
  color: var(--premium-ink);
  font-size: 16px;
  letter-spacing: -0.008em;
  line-height: 1.65;
}

body > #root {
  isolation: isolate;
}

.container {
  max-width: 82rem !important;
  padding-left: var(--premium-gutter) !important;
  padding-right: var(--premium-gutter) !important;
}

:is(h1, h2, h3, h4, .font-display) {
  font-kerning: normal;
  font-optical-sizing: auto;
}

:is(h1, h2, h3) {
  font-weight: 500 !important;
  letter-spacing: -0.035em;
}

:where(p, li) {
  text-wrap: pretty;
}

::selection {
  background: rgb(196 154 112 / 34%);
  color: var(--premium-ink-deep);
}

/* Kicker labels should guide the eye, rather than compete with the headline. */
:is(
    .finca-kicker,
    .guide-kicker,
    .guide-hero-kicker,
    .interior-page-lead [class*="tracking-"],
    .luxury-page [class*="tracking-[0.4em]"],
    .room-collection [class*="tracking-[0.3"],
    .contact-suite [class*="tracking-[0.3"],
    .contact-form-suite [class*="tracking-[0.3"]
  ) {
  font-size: 0.6875rem !important;
  letter-spacing: 0.18em !important;
  line-height: 1.4 !important;
}

/* Navigation: lighter chrome, sharper hierarchy and less visual noise. */
header {
  transition:
    background-color 360ms ease,
    border-color 360ms ease,
    padding 360ms ease !important;
}

header[class*="bg-primary"] {
  -webkit-backdrop-filter: blur(22px) saturate(108%);
  backdrop-filter: blur(22px) saturate(108%);
  background: rgb(16 35 31 / 92%) !important;
  border-bottom-color: var(--premium-line-dark) !important;
  box-shadow: 0 8px 30px rgb(7 24 20 / 8%) !important;
  padding-bottom: 0.7rem !important;
  padding-top: 0.7rem !important;
}

header:not([class*="bg-primary"]) {
  padding-bottom: 1.15rem !important;
  padding-top: 1.15rem !important;
}

header nav > .container {
  max-width: 88rem !important;
}

.site-nav-brand > span:first-child {
  font-weight: 500;
  letter-spacing: -0.035em;
}

.site-nav-brand > span:last-child {
  letter-spacing: 0.22em !important;
}

header nav button[class*="uppercase"] {
  font-size: 0.6875rem !important;
  letter-spacing: 0.14em !important;
}

.site-nav-language {
  background: rgb(247 241 230 / 5%) !important;
  border-color: rgb(247 241 230 / 15%) !important;
  border-radius: var(--premium-radius-control) !important;
  padding: 0.25rem !important;
}

.site-nav-language > button {
  border-radius: calc(var(--premium-radius-control) - 0.12rem) !important;
  min-height: 2rem;
  padding-left: 0.65rem !important;
  padding-right: 0.65rem !important;
}

header nav > div > div[class*="md:hidden"] > button:last-child {
  border-radius: var(--premium-radius-control) !important;
  box-shadow: none !important;
}

/* Home hero: cinematic photography with an editorial, readable foreground. */
.home-hero {
  min-height: 94svh !important;
}

.home-hero-shade {
  background:
    linear-gradient(
      90deg,
      rgb(5 16 13 / 78%) 0%,
      rgb(5 16 13 / 48%) 36%,
      rgb(5 16 13 / 13%) 68%,
      rgb(5 16 13 / 32%) 100%
    ),
    linear-gradient(180deg, rgb(5 16 13 / 48%), transparent 44%, rgb(5 16 13 / 67%));
}

.home-hero .hero-copy-reveal-title {
  font-weight: 500 !important;
  letter-spacing: -0.052em !important;
  text-shadow: 0 16px 48px rgb(0 0 0 / 26%) !important;
}

.home-hero .hero-copy-reveal-title > span {
  color: #e6b680 !important;
}

.home-hero .hero-copy-reveal-body {
  max-width: 35rem !important;
}

.home-hero .hero-copy-reveal-body p {
  color: rgb(250 247 241 / 86%) !important;
  font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
  letter-spacing: 0.005em !important;
  line-height: 1.75 !important;
}

.home-hero-ledger {
  background: transparent !important;
  border-top: 1px solid rgb(250 247 241 / 20%);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.home-hero-ledger-item {
  font-size: 0.625rem !important;
  letter-spacing: 0.19em !important;
}

/* A shared, calm vertical rhythm across every public section. */
:is(
    .luxury-signature,
    .luxury-review-suite,
    .como-included-suite,
    .luxury-section,
    .luxury-restoration,
    .contact-suite,
    .contact-care-strip,
    .contact-form-suite,
    .checkin-prep-suite,
    .guide-section
  ) {
  padding-bottom: var(--premium-section-space) !important;
  padding-top: var(--premium-section-space) !important;
}

:is(
    .luxury-signature,
    .como-included-suite,
    .room-collection,
    .contact-suite,
    .contact-form-suite,
    .checkin-prep-suite,
    .guide-section-light
  ) {
  background-color: var(--premium-paper) !important;
}

:is(.luxury-review-suite, .contact-care-strip, .guide-section-warm) {
  background-color: var(--premium-paper-muted) !important;
}

:is(
    .luxury-signature,
    .luxury-review-suite,
    .como-included-suite,
    .luxury-section,
    .luxury-restoration,
    .contact-suite,
    .contact-care-strip,
    .contact-form-suite,
    .checkin-prep-suite,
    .guide-section
  )::before,
:is(
    .luxury-signature,
    .luxury-review-suite,
    .como-included-suite,
    .luxury-section,
    .luxury-restoration,
    .contact-suite,
    .contact-care-strip,
    .contact-form-suite,
    .checkin-prep-suite,
    .guide-section
  )::after {
  opacity: 0.08 !important;
}

/* The ledger becomes an elegant divider rather than another card. */
.finca-ledger-strip {
  background: var(--premium-paper) !important;
  padding-bottom: clamp(3.25rem, 5vw, 4.75rem) !important;
  padding-top: clamp(3.25rem, 5vw, 4.75rem) !important;
}

.finca-ledger-shell {
  background: transparent !important;
  border-color: var(--premium-line) !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  padding-bottom: clamp(2rem, 4vw, 3.25rem) !important;
  padding-top: clamp(2rem, 4vw, 3.25rem) !important;
}

.finca-ledger-stamp {
  display: none !important;
}

.finca-ledger-number {
  color: rgb(150 98 56 / 55%) !important;
}

.finca-ledger-text {
  color: rgb(23 49 44 / 82%) !important;
}

/* Surfaces: architectural hairlines replace app-like cards and heavy depth. */
:is(
    .premium-surface,
    .luxury-room-copy,
    .luxury-card,
    .luxury-review-card,
    .contact-care-card,
    .luxury-contact-overview,
    .checkin-step-card,
    .checkin-arrival-bar,
    .guide-card,
    .guide-dark-card,
    .guide-intro-card,
    .guide-honest-panel,
    .ssg-card
  ) {
  border-color: var(--premium-line) !important;
  border-radius: var(--premium-radius-panel) !important;
  box-shadow: none !important;
}

.premium-surface {
  background: rgb(255 253 249 / 70%) !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(
      .premium-surface,
      .luxury-card,
      .luxury-review-card,
      .contact-care-card,
      .checkin-step-card,
      .guide-card
    ):hover {
    border-color: rgb(150 98 56 / 30%) !important;
    box-shadow: var(--premium-shadow-subtle) !important;
    transform: none !important;
  }
}

:is(.luxury-signature-main, .luxury-signature-float, .como-included-card) {
  border-radius: var(--premium-radius-panel) !important;
  box-shadow: var(--premium-shadow-media) !important;
}

.luxury-signature-badge {
  border-radius: var(--premium-radius-control) !important;
  box-shadow: 0 16px 45px rgb(7 24 20 / 13%) !important;
}

.luxury-review-card {
  background: #18332e !important;
  border-color: rgb(240 201 142 / 16%) !important;
}

/* Accommodation: let the images dominate and keep the information effortless. */
.room-collection {
  padding-bottom: clamp(5.5rem, 9vw, 8.5rem) !important;
  padding-top: clamp(7rem, 10vw, 9.5rem) !important;
}

.interior-page-lead {
  border-color: var(--premium-line) !important;
}

.interior-page-lead h1,
.premium-hero-title,
.guide-hero-title {
  letter-spacing: -0.045em !important;
}

.interior-page-lead [class*="rounded-full"] {
  border-radius: var(--premium-radius-control) !important;
}

.luxury-room-row {
  gap: clamp(2rem, 4.5vw, 4.5rem) !important;
}

.luxury-room-gallery > .group {
  border-color: rgb(23 49 44 / 12%) !important;
  border-radius: var(--premium-radius-panel) !important;
  box-shadow: var(--premium-shadow-media) !important;
}

.luxury-room-gallery > .group > div[class*="top-6"] {
  background: rgb(8 25 21 / 48%) !important;
  border-color: rgb(250 247 241 / 17%) !important;
  border-radius: var(--premium-radius-control) !important;
  box-shadow: none !important;
}

.luxury-room-gallery > .group > button {
  background: rgb(250 247 241 / 91%) !important;
  border-color: rgb(23 49 44 / 15%) !important;
  border-radius: var(--premium-radius-control) !important;
  box-shadow: 0 10px 28px rgb(7 24 20 / 11%) !important;
}

.luxury-room-copy {
  background: transparent !important;
  border-color: transparent !important;
  padding-left: clamp(0rem, 2vw, 1.5rem) !important;
  padding-right: clamp(0rem, 2vw, 1.5rem) !important;
}

.luxury-room-copy::before {
  background: var(--premium-bronze) !important;
  opacity: 0.75;
  width: 1px !important;
}

.room-index {
  color: rgb(150 98 56 / 22%) !important;
  font-size: clamp(3rem, 4vw, 4.25rem) !important;
}

.luxury-room-copy > div[class*="grid-cols-2"] {
  background: var(--premium-line) !important;
  border-color: var(--premium-line) !important;
  border-radius: var(--premium-radius-control) !important;
}

.luxury-room-copy > div[class*="grid-cols-2"] > div {
  background: rgb(255 253 249 / 74%) !important;
}

/* Booking and form controls: precise, calm and consistent. */
.luxury-booking-bar {
  filter: none !important;
}

.luxury-booking-shell {
  background: rgb(23 49 44 / 7%) !important;
  border-radius: var(--premium-radius-panel) !important;
  box-shadow: 0 22px 58px rgb(16 35 31 / 13%) !important;
  padding: 3px !important;
}

.luxury-booking-form {
  border-radius: calc(var(--premium-radius-panel) - 3px) !important;
  box-shadow: none !important;
}

.booking-field {
  min-height: 4.75rem !important;
}

.booking-field > span:first-child {
  border-radius: var(--premium-radius-control) !important;
}

:is(.luxury-cta, .booking-submit-panel button) {
  border-radius: var(--premium-radius-control) !important;
  box-shadow: none !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  min-height: 3.25rem;
}

@media (hover: hover) and (pointer: fine) {
  :is(.luxury-cta, .booking-submit-panel button):hover {
    box-shadow: 0 12px 30px rgb(16 35 31 / 13%) !important;
  }
}

:is([role="dialog"], .contact-form-suite, .guide-private-card)
  :is(input, select, textarea) {
  background: var(--premium-white) !important;
  border-color: rgb(23 49 44 / 17%) !important;
  border-radius: var(--premium-radius-control) !important;
  box-shadow: none !important;
}

:is([role="dialog"], .contact-form-suite, .guide-private-card)
  :is(input, select, textarea):focus {
  border-color: rgb(150 98 56 / 60%) !important;
  box-shadow: 0 0 0 3px rgb(150 98 56 / 9%) !important;
}

[role="dialog"] {
  background: var(--premium-paper) !important;
  border-color: rgb(23 49 44 / 14%) !important;
  border-radius: var(--premium-radius-panel) !important;
  box-shadow: 0 32px 100px rgb(7 24 20 / 24%) !important;
}

[role="dialog"] > div > div:first-child > button[aria-label] {
  border-radius: var(--premium-radius-control) !important;
}

/* Contact, arrival and private-guide surfaces share the same restraint. */
.luxury-contact-overview {
  background: transparent !important;
  padding: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.luxury-contact-overview div[class*="rounded-full"] {
  border-radius: var(--premium-radius-control) !important;
  box-shadow: none !important;
}

.luxury-contact-overview button {
  border-radius: var(--premium-radius-control) !important;
  box-shadow: none !important;
}

.contact-care-card,
.checkin-step-card {
  background: rgb(255 253 249 / 62%) !important;
}

.checkin-arrival-bar {
  background: var(--premium-ink) !important;
  border-color: rgb(240 201 142 / 18%) !important;
}

.guide-private-card,
.guide-intro-card,
.guide-honest-panel {
  border-radius: var(--premium-radius-panel) !important;
  box-shadow: var(--premium-shadow-subtle) !important;
}

.guide-nav-pill {
  border-radius: var(--premium-radius-control) !important;
  letter-spacing: 0.12em !important;
}

.guide-image-plate {
  border-radius: var(--premium-radius-panel) !important;
  box-shadow: var(--premium-shadow-media) !important;
}

.guide-card-rule {
  opacity: 0.55;
}

/* SEO and legal pages no longer look like generic card grids. */
section[class*="pt-36"][class*="bg-primary"] [class*="rounded-2xl"] {
  border-radius: var(--premium-radius-control) !important;
  box-shadow: none !important;
}

section:has(> .container [class*="lg:sticky"]) [class*="rounded-[1."] {
  border-radius: var(--premium-radius-panel) !important;
  box-shadow: none !important;
}

.py-24.px-4 > .max-w-5xl.mx-auto > .bg-card.rounded-3xl {
  background: rgb(255 253 249 / 70%) !important;
  border-color: var(--premium-line) !important;
  border-radius: var(--premium-radius-panel) !important;
  box-shadow: none !important;
  max-width: 58rem;
}

.py-24.px-4 > .max-w-5xl.mx-auto > .bg-card.rounded-3xl
  :is(.rounded-2xl, .rounded-xl) {
  border-radius: var(--premium-radius-control) !important;
  box-shadow: none !important;
}

/* Server-rendered first paint follows the same visual rules. */
.ssg-hero::after {
  background:
    linear-gradient(90deg, rgb(5 16 13 / 78%), rgb(5 16 13 / 22%) 66%),
    linear-gradient(180deg, rgb(5 16 13 / 42%), transparent 45%, rgb(5 16 13 / 64%)) !important;
}

.ssg-title {
  font-weight: 500 !important;
  letter-spacing: -0.05em !important;
  text-shadow: 0 16px 48px rgb(0 0 0 / 26%);
}

.ssg-copy {
  color: rgb(250 247 241 / 86%) !important;
}

.ssg-card {
  background: rgb(255 253 249 / 70%) !important;
}

/* Footer: one strong closing gesture, with everything else kept quiet. */
.site-footer {
  background: #122722 !important;
  padding-bottom: clamp(3rem, 5vw, 4.5rem) !important;
  padding-top: clamp(5rem, 8vw, 7rem) !important;
}

.site-footer::before,
.site-footer::after {
  opacity: 0.08 !important;
}

.site-footer h2 {
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
}

.site-footer .luxury-cta {
  border-radius: var(--premium-radius-control) !important;
}

.finca-contact-letter {
  background: var(--premium-paper) !important;
  border-color: var(--premium-line) !important;
  border-radius: var(--premium-radius-panel) !important;
  box-shadow: none !important;
}

.finca-contact-line {
  border-color: var(--premium-line) !important;
}

.finca-contact-line:hover {
  transform: none !important;
}

/* Keep the floating contact route useful without turning it into a badge. */
[aria-label$="WhatsApp"] {
  background: #1f6b4f !important;
  border: 1px solid rgb(255 255 255 / 22%) !important;
  border-radius: var(--premium-radius-control) !important;
  box-shadow: 0 12px 32px rgb(12 66 46 / 18%) !important;
}

/* Mobile is composed as a cover: simple, tactile and free of cramped chrome. */
@media (max-width: 767px) {
  :root {
    --premium-gutter: 1.15rem;
    --premium-section-space: 4.75rem;
  }

  .home-hero {
    align-items: flex-end !important;
    min-height: 90svh !important;
  }

  .home-hero-shade {
    background: linear-gradient(
      180deg,
      rgb(5 16 13 / 54%) 0%,
      rgb(5 16 13 / 13%) 38%,
      rgb(5 16 13 / 82%) 100%
    );
  }

  .home-hero-content {
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding-bottom: 4.75rem !important;
    padding-left: var(--premium-gutter) !important;
    padding-right: var(--premium-gutter) !important;
    text-align: left !important;
  }

  .home-hero .hero-copy-reveal-kicker {
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
  }

  .home-hero .hero-copy-reveal-kicker > span:last-child {
    display: none;
  }

  .home-hero .hero-copy-reveal-title {
    font-size: clamp(3.65rem, 17vw, 5.15rem) !important;
    line-height: 0.88 !important;
    margin-bottom: 1.5rem !important;
  }

  .home-hero .hero-copy-reveal-body {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 31rem !important;
    padding: 0 !important;
  }

  header > div.fixed.inset-0[class*="z-[60]"] {
    background: #122722 !important;
  }

  header > div.fixed.inset-0[class*="z-[60]"]
    > div
    > div:first-child
    > button {
    border-color: rgb(250 247 241 / 12%) !important;
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    padding-bottom: 0.8rem !important;
    padding-top: 0.8rem !important;
  }

  .finca-ledger-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .luxury-room-row {
    gap: 2rem !important;
  }

  .luxury-room-gallery {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .luxury-room-gallery > .group {
    height: 100% !important;
  }

  .luxury-room-copy {
    border-top: 1px solid var(--premium-line) !important;
    padding: 2rem 0 0 !important;
  }

  .luxury-room-copy::before {
    display: none !important;
  }

  .luxury-booking-bar {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .luxury-booking-form > .grid {
    gap: 1px !important;
  }

  .booking-field {
    min-height: 4.4rem !important;
  }

  .contact-suite .luxury-contact-overview {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .site-footer h2 {
    font-size: clamp(2.6rem, 12vw, 4rem) !important;
  }

  .py-24.px-4 > .max-w-5xl.mx-auto > .bg-card.rounded-3xl {
    padding: 1.35rem !important;
  }
}

@media (max-width: 380px) {
  .home-hero .hero-copy-reveal-title {
    font-size: 3.45rem !important;
  }

  .site-nav-language > svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  header,
  .premium-surface,
  .luxury-room-gallery img,
  .luxury-signature-main img,
  .luxury-signature-float img,
  .como-included-card img {
    transition-duration: 1ms !important;
  }
}