/* ————— Las Tres Casitas ————— */

:root {
  --ink: #16211d;
  --ink-soft: #55635c;
  --line: #e4e7e3;
  --bg: #ffffff;
  --tint: #f6f8f6;
  --palm: #1e3a2f;
  --teal: #2f7d6b;
  --teal-dark: #245f52;
  --sand: #c9a86a;
  --white: #ffffff;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(22,33,29,.05), 0 8px 24px rgba(22,33,29,.07);
  --shadow-lg: 0 2px 4px rgba(22,33,29,.05), 0 18px 44px rgba(22,33,29,.11);
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: var(--sans); font-size: 16px; font-weight: 400;
  color: var(--ink); background: var(--bg); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; }
a { color: inherit; }

/* ————— Language switch ————— */
.lang-es { display: none; }
:root[data-lang="es"] .lang-en { display: none; }
:root[data-lang="es"] .lang-es { display: inline; }

/* ————— Buttons ————— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 500; line-height: 1;
  padding: .95rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-outline { background: transparent; color: var(--palm); border-color: var(--line); }
.btn-outline:hover { border-color: var(--palm); background: var(--tint); }
.btn-sm { padding: .7rem 1.15rem; font-size: .875rem; }
.btn-block { width: 100%; }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--teal); text-decoration: underline; text-underline-offset: 3px;
}

/* ————— Photo fallbacks ————— */
.ph { position: relative; overflow: hidden; background: var(--tint); }
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; }
.ph-fallback::before { content: ""; position: absolute; inset: 0; }
.ph[data-tone="sea"].ph-fallback::before    { background: linear-gradient(160deg,#8ec9c0,#3f8d7d 55%,#1e3a2f); }
.ph[data-tone="sand"].ph-fallback::before   { background: linear-gradient(160deg,#ecdcbb,#c9a86a 60%,#8a6f3e); }
.ph[data-tone="stone"].ph-fallback::before  { background: linear-gradient(160deg,#dcd4c6,#a89a83 60%,#6d604c); }
.ph[data-tone="forest"].ph-fallback::before { background: linear-gradient(160deg,#5c8b6c,#2d4f40 55%,#16281f); }
.ph[data-tone="river"].ph-fallback::before  { background: linear-gradient(160deg,#a6cfc5,#4f8579 55%,#24443c); }
.ph[data-tone="villa"].ph-fallback::before  { background: linear-gradient(160deg,#e8d8ba,#b09468 55%,#6e5636); }
.ph[data-tone="palm"].ph-fallback::before   { background: linear-gradient(160deg,#c9d5a4,#7c9367 55%,#3c5233); }

/* ————— Header ————— */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease;
}
.hdr.stuck { border-bottom-color: var(--line); box-shadow: 0 1px 12px rgba(22,33,29,.05); }
.hdr-inner {
  max-width: var(--maxw); margin: 0 auto; padding: .8rem clamp(1rem,4vw,2rem);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--palm); }
.brand-mark { width: 38px; height: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.brand-sub { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

.nav { display: flex; gap: 1.4rem; margin-left: auto; }
.nav a {
  font-size: .9rem; color: var(--ink-soft); text-decoration: none;
  padding: .3rem 0; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.nav a:hover { color: var(--palm); border-bottom-color: var(--teal); }

.hdr-actions { display: flex; align-items: center; gap: .7rem; }
.lang-btn {
  font: inherit; font-size: .78rem; font-weight: 500; letter-spacing: .1em;
  color: var(--ink-soft); background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: .45rem .75rem; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.lang-btn:hover { border-color: var(--palm); color: var(--palm); }
.menu-btn { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; flex-direction: column; gap: 5px; }
.menu-btn span { display: block; width: 22px; height: 2px; background: var(--palm); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ————— Hero ————— */
.hero {
  position: relative; min-height: min(90vh, 820px);
  display: flex; align-items: center; padding: 10rem 0 4rem;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { object-position: center 55%; }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.34) 42%, rgba(255,255,255,.5) 100%);
}
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem,4vw,2rem);
  text-shadow: 0 1px 2px rgba(255,255,255,.7), 0 2px 16px rgba(255,255,255,.6);
}
.hero-kicker { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; text-shadow: none; }
.pill {
  display: inline-block; font-size: .74rem; font-weight: 500; letter-spacing: .06em;
  background: var(--palm); color: var(--white); padding: .4rem .8rem; border-radius: 999px;
}
.pill-quiet { background: rgba(255,255,255,.9); color: var(--palm); border: 1px solid rgba(30,58,47,.18); }
.hero h1 { color: var(--palm); max-width: 22ch; }
.hero-sub { margin-top: 1rem; max-width: 46ch; font-size: 1.05rem; color: var(--ink); }

/* ————— Booking bar ————— */
.bookbar {
  margin-top: 2rem; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .6rem; display: grid; gap: .5rem;
  grid-template-columns: 1fr 1fr .8fr auto; align-items: end;
  max-width: 780px; text-shadow: none;
}
.bookbar-field { display: flex; flex-direction: column; gap: .2rem; padding: .5rem .75rem; border-radius: var(--radius-sm); }
.bookbar-field:hover { background: var(--tint); }
.bookbar-label { font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.bookbar input, .bookbar select {
  font: inherit; font-size: .95rem; color: var(--ink);
  border: 0; background: none; outline: none; padding: 0; width: 100%;
}
.bookbar-go { align-self: stretch; }
.bookbar-note { margin-top: .7rem; font-size: .88rem; color: var(--palm); background: rgba(255,255,255,.85); display: inline-block; padding: .4rem .8rem; border-radius: 999px; }
/* Author display would otherwise beat the UA rule for [hidden]. */
.bookbar-note[hidden] { display: none; }

/* ————— Sound button ————— */
.sound-btn {
  position: absolute; right: clamp(1rem,4vw,2rem); bottom: 1.5rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font: inherit; font-size: .78rem; color: var(--palm);
  background: rgba(255,255,255,.85); border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem .9rem; backdrop-filter: blur(4px);
}
.sound-btn:hover { background: var(--palm); color: var(--white); border-color: var(--palm); }
.sound-btn svg { width: 16px; height: 16px; }
.sound-btn .icon-sound { display: none; }
.sound-btn[aria-pressed="true"] .icon-sound { display: block; }
.sound-btn[aria-pressed="true"] .icon-muted { display: none; }

/* ————— Subpage head ————— */
.page-hero { background: var(--tint); border-bottom: 1px solid var(--line); }
.page-hero-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(6.5rem,11vw,9rem) clamp(1rem,4vw,2rem) clamp(2.5rem,5vw,3.5rem);
}
.page-hero h1 { color: var(--palm); max-width: 18ch; margin-top: .5rem; }
.page-hero-sub { margin-top: 1rem; max-width: 56ch; color: var(--ink-soft); font-size: 1.02rem; }
.page-hero-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }

/* ————— Trust strip ————— */
.trust { border-bottom: 1px solid var(--line); background: var(--white); }
.trust-list {
  list-style: none; max-width: var(--maxw); margin: 0 auto;
  padding: 1.6rem clamp(1rem,4vw,2rem); display: grid; gap: 1.2rem;
  grid-template-columns: repeat(4, 1fr);
}
.trust-list li { display: flex; flex-direction: column; gap: .15rem; }
.trust-list strong { font-size: .95rem; font-weight: 600; }
.trust-list span { font-size: .85rem; color: var(--ink-soft); }

/* ————— Sections ————— */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem,6vw,5rem) clamp(1rem,4vw,2rem); }
/* Tint paints edge to edge while the section keeps the same max-width and
   centring as every other one, so headings stay on the same left margin. */
.section-tint {
  background: var(--tint);
  box-shadow: 0 0 0 100vmax var(--tint);
  clip-path: inset(0 -100vmax);
}
.section-head { max-width: 60ch; margin-bottom: clamp(1.8rem,3vw,2.6rem); }
.section-head p { color: var(--ink-soft); margin-top: .6rem; }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.placeholder-note { font-size: .85rem; color: var(--sand); }

/* ————— Cards ————— */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2vw,1.6rem); }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-media { aspect-ratio: 4 / 3; }
.card-badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  background: rgba(255,255,255,.94); color: var(--palm);
  padding: .35rem .7rem; border-radius: 999px;
}
.card-body { padding: 1.2rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.specs { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .8rem; }
.specs li { font-size: .78rem; color: var(--ink-soft); background: var(--tint); border-radius: 999px; padding: .3rem .65rem; }
.card-text { font-size: .92rem; color: var(--ink-soft); }
.card-foot { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.price strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.price .per { font-size: .85rem; color: var(--ink-soft); margin-left: .2rem; }
.price small { display: block; font-size: .78rem; color: var(--ink-soft); }

/* ————— Wide card ————— */
.wide-card {
  margin-top: clamp(1rem,2vw,1.6rem); display: grid; grid-template-columns: 1.15fr 1fr;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.wide-card-body { padding: clamp(1.4rem,3vw,2.2rem); display: flex; flex-direction: column; gap: .7rem; }
.wide-card-body p { color: var(--ink-soft); }
.wide-card-foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wide-card-media { min-height: 240px; }
.whole-note { margin-top: 1.6rem; font-size: .95rem; color: var(--ink-soft); }
.whole-note strong { color: var(--ink); }

/* ————— Inside one casita (photo mosaic) ————— */
.inside { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.inside-head { margin-bottom: 1.1rem; }
.inside-head h3 { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 400; }
.inside-head p { margin-top: .3rem; font-size: .92rem; color: var(--ink-soft); }

/* Four columns by four rows: two 2x2 blocks, one tall 1x2 for the portrait
   photo, and six singles come to exactly sixteen cells, so nothing is left
   dangling. Below 900px the spans are dropped and only the lead keeps its
   2x2, which lands on exactly twelve cells at three columns and at two. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(108px, 12vw, 168px);
  grid-auto-flow: dense;
  gap: clamp(.5rem, 1.1vw, .8rem);
}
.mosaic .shot { aspect-ratio: auto; height: 100%; border-radius: var(--radius-sm); }
.mosaic-lead, .mosaic-wide { grid-column: span 2; grid-row: span 2; }
.mosaic-tall { grid-row: span 2; }

@media (max-width: 900px) {
  .mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(96px, 16vw, 150px); }
  .mosaic-wide, .mosaic-tall { grid-column: auto; grid-row: auto; }
}
@media (max-width: 620px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 38vw; }
}

/* ————— Amenities ————— */
.amenities { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.amenities li {
  display: flex; align-items: center; gap: .6rem; font-size: .92rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem 1rem;
}
.am-ic {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: var(--teal); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ————— Gallery ————— */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1.4vw, 1rem); }
.shot {
  aspect-ratio: 4 / 3; border-radius: var(--radius-sm); cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease;
}
.shot:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.shot img { transition: transform .4s ease; }
.shot:hover img { transform: scale(1.03); }
.gallery-note { margin-top: 1.4rem; font-size: .95rem; color: var(--ink-soft); }

/* ————— Lightbox ————— */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center;
  background: rgba(12,20,17,.92); padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--radius-sm); object-fit: contain; }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255,255,255,.14); color: #fff; border: 0;
  border-radius: 999px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.3); }
.lightbox-close { top: clamp(.8rem,3vw,1.6rem); right: clamp(.8rem,3vw,1.6rem); width: 44px; height: 44px; font-size: 1.9rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; }
.lightbox-prev { left: clamp(.5rem,2vw,1.6rem); }
.lightbox-next { right: clamp(.5rem,2vw,1.6rem); }

/* ————— Location ————— */
.location { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.2rem,3vw,2.4rem); align-items: start; }
.location-media { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.distances { list-style: none; border-top: 1px solid var(--line); }
.distances li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.distances b { font-weight: 600; white-space: nowrap; }
.map-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

/* Embedded map. The iframe has no intrinsic height, so the ratio is set here. */
.map { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.map #map {
  width: 100%; aspect-ratio: 16 / 8;
  border-radius: var(--radius); background: var(--tint); z-index: 0;
}
.map .leaflet-container { font: inherit; }
.map figcaption { margin-top: .7rem; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 620px) { .map #map { aspect-ratio: 4 / 3; } }

/* ————— Tiles ————— */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem,1.6vw,1.2rem); }
.tile { text-decoration: none; display: flex; flex-direction: column; gap: .55rem; }
.tile-media { aspect-ratio: 3 / 2; border-radius: var(--radius-sm); transition: transform .3s ease; }
.tile:hover .tile-media { transform: scale(1.015); }
.tile h3 { font-size: 1.02rem; }
.tile p { font-size: .85rem; color: var(--ink-soft); }

.neighbors { margin-top: clamp(2rem,4vw,3rem); }
.neighbors h3 { margin-bottom: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-size: .88rem; text-decoration: none; color: var(--palm);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem 1rem; transition: border-color .2s ease, background .2s ease;
}
.chip:hover { border-color: var(--teal); background: #fff; }

/* ————— Reviews ————— */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2vw,1.6rem); }
.quote { background: var(--tint); border-radius: var(--radius); padding: 1.5rem; }
.quote p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; }
.quote footer { margin-top: .9rem; font-size: .82rem; color: var(--ink-soft); }

/* ————— FAQ ————— */
.faq { max-width: 780px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .6rem; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1rem 1.2rem;
  font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--teal); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); font-size: .95rem; }

/* ————— Book ————— */
.book { scroll-margin-top: 90px; }
.book-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
/* A grid child defaults to min-width:auto and refuses to shrink below its
   content, so the email address on one unbreakable line was pushing this
   column to 403px inside a 358px phone and taking the whole page 30px wide. */
.book-inner > * { min-width: 0; }
.book-contact li, .book-contact a { overflow-wrap: anywhere; }
.book-copy p { color: var(--ink-soft); margin-top: .7rem; }
.book-contact { list-style: none; margin-top: 1.4rem; display: grid; gap: .3rem; }
.book-contact li { display: flex; flex-direction: column; font-size: .95rem; }
.book-contact .ct-label { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.book-contact a { color: var(--teal); }
.reassure { font-size: .88rem; color: var(--ink-soft); margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }

.book-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.2rem,2.5vw,1.8rem); }
.book-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: .8rem; }
.book-form label { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.book-form input, .book-form select, .book-form textarea {
  font: inherit; font-size: .95rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .85rem;
  background: var(--white); outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.book-form input:focus, .book-form select:focus, .book-form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,125,107,.12); }

/* ————— Footer ————— */
.footer { background: var(--palm); color: #dfe8e2; padding: clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 2rem; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: center; }
.footer-brand { display: flex; flex-direction: column; gap: .2rem; }
.footer .brand-mark { width: 60px; margin-bottom: .6rem; color: #dfe8e2; }
.footer .brand-name { font-family: var(--serif); font-size: 1.2rem; color: #fff; }
.footer .brand-sub { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer-nav a { font-size: .88rem; text-decoration: none; opacity: .85; }
.footer-nav a:hover { opacity: 1; }
.footer-fine { max-width: var(--maxw); margin: 2rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .78rem; opacity: .6; }

/* ————— Mobile reserve bar ————— */
.mobile-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--white); border-top: 1px solid var(--line);
  padding: .7rem clamp(1rem,4vw,1.5rem); align-items: center; justify-content: space-between; gap: 1rem;
  box-shadow: 0 -4px 18px rgba(22,33,29,.07);
}
.mobile-bar-price strong { font-family: var(--serif); font-size: 1.1rem; }
.mobile-bar-price small { display: block; font-size: .75rem; color: var(--ink-soft); }

/* ————— Reveal ————— */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ————— Responsive ————— */
@media (max-width: 1000px) {
  .cards, .quotes { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .amenities { grid-template-columns: repeat(3, 1fr); }
  .trust-list { grid-template-columns: repeat(2, 1fr); }
  .wide-card, .location, .book-inner { grid-template-columns: 1fr; }
  .wide-card-media { min-height: 200px; order: -1; }
  .bookbar { grid-template-columns: 1fr 1fr; }
  .bookbar-go { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .nav {
    position: fixed; inset: 62px 0 auto; z-index: 99;
    flex-direction: column; gap: 0; background: var(--white);
    border-bottom: 1px solid var(--line); padding: .5rem clamp(1rem,4vw,2rem) 1rem;
    display: none; box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .hdr-actions .btn { display: none; }
  .menu-btn { display: flex; }
  .hdr-inner { gap: .8rem; }
  .hdr-actions { margin-left: auto; }
  .mobile-bar { display: flex; }
  body { padding-bottom: 72px; }
  .sound-btn { bottom: 1rem; }
}
@media (max-width: 620px) {
  .cards, .quotes, .tiles { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .amenities { grid-template-columns: repeat(2, 1fr); }
  .trust-list { grid-template-columns: 1fr; gap: .9rem; }
  .bookbar { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
}

/* ————— Unit pages ————— */
/* One page per property, so each can rank for its own search term. */
.unit { padding-top: 4.5rem; }
.crumbs {
  max-width: var(--maxw); margin: 0 auto; padding: 1.2rem clamp(1rem,4vw,2rem) 0;
  font-size: .85rem; color: var(--ink-soft);
}
.crumbs a { color: var(--teal); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 .4rem; opacity: .5; }

.unit-head { padding-bottom: 1rem; }
.unit-head h1 {
  font-family: var(--serif); font-weight: 400; line-height: 1.15;
  font-size: clamp(1.7rem, 4vw, 2.7rem); margin: .3rem 0 .9rem; max-width: 20ch;
}
.unit-head .specs { margin-bottom: 1rem; }
.unit-lead { max-width: 58ch; color: var(--ink-soft); font-size: 1.02rem; }
.price-big { margin-top: 1.2rem; }
.price-big strong { font-size: 1.8rem; }
.unit-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

.sibling-list { list-style: none; display: grid; gap: .6rem; }
.sibling-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .9rem 1.1rem;
}
.sibling-list a { color: var(--palm); font-weight: 500; text-decoration: none; }
.sibling-list a:hover { color: var(--teal); text-decoration: underline; }
.sibling-list span { font-size: .88rem; color: var(--ink-soft); }

.card-link { color: inherit; text-decoration: none; }
.card-link:hover { color: var(--teal); text-decoration: underline; }

/* ————— One photo per unit page ————— */
/* The rest live in .photo-rest, out of the layout but still in the markup so
   the lightbox collects them. */
.unit-hero {
  aspect-ratio: 3 / 2; width: 100%; border-radius: var(--radius-sm);
  cursor: zoom-in; transition: box-shadow .25s ease;
}
.unit-hero:hover { box-shadow: var(--shadow-lg); }
.unit-hero img { transition: transform .5s ease; }
.unit-hero:hover img { transform: scale(1.02); }
.photo-hint { margin-top: .8rem; font-size: .9rem; color: var(--ink-soft); }
.photo-rest[hidden] { display: none; }

/* Six neighbours read better in threes than in a four-wide row. */
.neighbor-tiles { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .neighbor-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ————— Content pages ————— */
.unit-lede { max-width: 56ch; font-size: 1.08rem; color: var(--ink-soft); margin-top: .5rem; }
.prose > p, .prose > ul, .prose > dl, .prose > h2 { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 500;
  margin: 2.2rem 0 .7rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: .9rem; }
.prose a { color: var(--teal-dark); text-underline-offset: 3px; }
.prose a:hover { color: var(--teal); }
.page-date { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1.6rem; }

.plain-list { list-style: none; display: grid; gap: .5rem; margin-bottom: 1rem; }
.plain-list li { padding-left: 1.1rem; position: relative; }
.plain-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
}

.contact-list {
  display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.6rem;
  background: var(--tint); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin-bottom: 2rem;
}
.contact-list dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); padding-top: .18rem;
}
.contact-list dd { margin: 0; }
@media (max-width: 560px) {
  .contact-list { grid-template-columns: 1fr; gap: .15rem; }
  .contact-list dt { padding-top: .8rem; }
}

/* ————— Preferred sources ————— */
/* Google renders its own button inside this box, so the only job here is to
   give it room and put it where a footer link would sit. */
.footer-pref {
  max-width: var(--maxw); margin: 0 auto;
  padding: 1.1rem clamp(1rem,4vw,2rem) 0;
  min-height: 2.2rem;
}

/* ————— WhatsApp ————— */
/* WhatsApp is the phone here, so it gets a button that follows the page down
   rather than a link buried in the footer. WhatsApp's own green, because a
   recoloured one reads as somebody else's button. */
.wa-fab {
  position: fixed; right: clamp(1rem, 4vw, 1.75rem); bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: 95; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 2px 5px rgba(22,33,29,.16), 0 10px 26px rgba(22,33,29,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-fab:hover, .wa-fab:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.wa-fab:focus-visible { outline: 3px solid var(--palm); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } }
@media print { .wa-fab { display: none; } }

/* ————— What the booking form says back ————— */
/* The form used to submit into nothing and say nothing. Whatever it does now,
   the guest gets told. */
.form-note {
  margin-top: .9rem; padding: .85rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--tint);
  font-size: .94rem; color: var(--ink-soft);
}
.form-note.ok { border-color: var(--teal); color: var(--ink); }
.form-note.bad { border-color: var(--sand); color: var(--ink); }
.form-note a { color: var(--teal-dark); font-weight: 600; }

/* The sticky price bar owns the bottom of a phone screen, so the button sits
   above it rather than behind it. */
@media (max-width: 880px) {
  .wa-fab { bottom: 84px; }
}

/* ————— How the house divides ————— */
/* A diagram of the arrangement, not a floor plan — it exists to make "four
   bedrooms, two front doors" land faster than a sentence can. */
/* ————— The owners ————— */
/* Elsa and Florencio, on the About page. A long stay is money sent to someone
   you have never met, so the one photograph of a face on this site earns its
   place. It floats beside the text on a wide screen and sits above it on a
   phone. */
.owners { margin: 0 0 1.6rem; max-width: 300px; }
.owners img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.owners figcaption { margin-top: .7rem; font-size: .9rem; color: var(--ink-soft); }
@media (min-width: 720px) {
  .owners { float: right; margin: .3rem 0 1.4rem 2rem; max-width: 280px; }
}

.house-diagram { max-width: 560px; color: var(--palm); }
.house-diagram svg { width: 100%; height: auto; display: block; }
.house-diagram text { font-family: var(--sans); }
.house-diagram figcaption {
  margin-top: .9rem; font-size: .9rem; color: var(--ink-soft); max-width: 58ch;
}

/* ————— The whole house ————— */
/* Four bedrooms under one roof is the thing nothing else in Costambar offers,
   so it runs the full width of the grid rather than sitting as a fourth tile
   stranded on its own row. */
.card-feature { grid-column: 1 / -1; }
@media (min-width: 781px) {
  .card-feature { flex-direction: row; align-items: stretch; }
  .card-feature .card-media { flex: 0 0 42%; aspect-ratio: auto; }
  .card-feature .card-body { justify-content: center; padding: 1.6rem 1.8rem; }
  .card-feature .card-text { font-size: 1rem; max-width: 54ch; }
}

/* ————— Where to eat ————— */
.eat-list { margin-top: 1rem; }
.eat-list dt { font-weight: 600; margin-top: 1rem; }
.eat-list dt:first-child { margin-top: 0; }
.eat-list dd { margin: .2rem 0 0; color: var(--ink-soft); }

/* ————— Landing pages ————— */
/* The French and German pages are not translations of the site; this line is
   how somebody who wants the rest of it gets there. */
.landing-more { max-width: 68ch; color: var(--ink-soft); }
.landing-more a { color: var(--teal-dark); font-weight: 600; }

.tile-note { font-size: .92rem; color: var(--ink-soft); margin-top: .4rem; }
.tile-note a { color: var(--teal-dark); font-weight: 600; }

/* ————— Language row ————— */
/* Four languages, on every page. The French and German pages were previously
   reachable only through the sitemap, which is how a page gets discovered and
   never indexed. */
.footer-langs {
  max-width: var(--maxw); margin: 0 auto;
  padding: .9rem clamp(1rem,4vw,2rem) 0;
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  font-size: .85rem;
}
.footer-langs a { color: rgba(255,255,255,.72); }
.footer-langs a:hover { color: #fff; }

/* ————— Cookie consent ————— */
/* Germany and France are priority markets, so analytics stays off until this
   says otherwise. It sits above the WhatsApp button rather than over it. */
.consent {
  /* Above the WhatsApp button, not over it: the button is bottom-right and
     fixed, and a banner across the bottom covered it on a phone. */
  position: fixed; left: 1rem; right: 1rem; bottom: 9.5rem; z-index: 300;
  max-width: 34rem; margin: 0 auto; padding: 1rem 1.1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); font-size: .9rem; color: var(--ink);
  display: flex; flex-direction: column; gap: .8rem;
}
.consent p { margin: 0; color: var(--ink-soft); }
.consent a { color: var(--teal-dark); font-weight: 600; }
.consent-buttons { display: flex; gap: .6rem; justify-content: flex-end; }
@media (min-width: 640px) {
  .consent { flex-direction: row; align-items: center; bottom: 1rem; }
  .consent-buttons { flex: none; }
}