/* ==========================================================================
   Bibiloni · Tribó Ortodòncia — Production stylesheet
   Premium · minimalist · warm luxury healthcare
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ivory:        #F6F1E8;
  --warm-white:   #FAF6EF;
  --sand:         #E8DDC9;
  --sand-soft:    #EFE6D6;
  --champagne:    #B89968;
  --champagne-2:  #C9A77A;
  --gold-deep:    #9C8253;
  --charcoal:     #1A1614;
  --matte-black:  #0E0C0A;
  --grey-warm:    #8B7E6E;
  --grey-line:    #E5DED1;
  --grey-50:      #F2EDE2;

  --bg:           var(--warm-white);
  --fg:           var(--charcoal);
  --muted:        var(--grey-warm);

  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);

  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 18px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .25s var(--ease);
  --t-med:  .5s var(--ease);
  --t-slow: .9s var(--ease);

  --shadow-soft: 0 30px 60px -30px rgba(26,22,20,.18), 0 8px 24px -16px rgba(26,22,20,.10);
  --shadow-card: 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -28px rgba(26,22,20,.20);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; transition:color var(--t-fast); }
a:hover{ color:var(--champagne); }
button{ font:inherit; cursor:pointer; border:0; background:transparent; color:inherit; }
ul{ list-style:none; padding:0; margin:0; }
input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--champagne); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--champagne); color:var(--ivory); }

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
.section{ padding: clamp(72px, 10vw, 140px) 0; position:relative; }
.section--dark{ background:var(--matte-black); color:var(--ivory); }
.section--feature{ background:var(--ivory); }
.section--clinic{ background:var(--warm-white); }
.section--team{ background:var(--ivory); }
.section--testimonials{ background:var(--sand-soft); }
.section--cta{ background:var(--matte-black); color:var(--ivory); padding: clamp(80px,10vw,120px) 0; }
.section--contact{ background:var(--warm-white); padding-bottom:0; }

.grid{ display:grid; gap: clamp(32px, 5vw, 72px); }
.grid--2{ grid-template-columns: 1fr; }
@media (min-width: 880px){ .grid--2{ grid-template-columns: 1fr 1fr; } }
.grid--align{ align-items:center; }

.section__head{ max-width: 760px; margin: 0 auto clamp(48px,6vw,80px); text-align:center; }

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 18px;
}
.eyebrow--light{ color:var(--champagne-2); }

.h2{
  font-family:var(--serif);
  font-weight:500;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height:1.08;
  letter-spacing:-.5px;
  margin:0 0 22px;
  color:var(--charcoal);
}
.h2--light{ color:var(--ivory); }

.lede{
  font-size: clamp(16px, 1.15vw, 18px);
  line-height:1.75;
  color:var(--charcoal);
  margin: 0 0 16px;
}
.lede--light{ color:#D9D2C3; }

.bullets{
  margin-top: 28px;
  display:flex; flex-direction:column; gap:12px;
  font-size: 15.5px;
}
.bullets li{
  position:relative;
  padding-left: 26px;
  color: var(--charcoal);
}
.bullets li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:14px; height:1px; background:var(--champagne);
}

.checklist{
  margin: 22px 0 30px;
  display:flex; flex-direction:column; gap:12px;
}
.checklist li{
  position:relative; padding-left:28px;
  font-size:15.5px;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:14px; height:14px; border:1px solid var(--champagne); border-radius:50%;
  background:
    radial-gradient(circle at center, var(--champagne) 0 3px, transparent 3.5px);
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--charcoal); --c:var(--ivory); --bd:var(--charcoal);
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 26px;
  font-size: 13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  background: var(--bg); color:var(--c); border:1px solid var(--bd);
  border-radius: 999px;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn--dark{ --bg:var(--charcoal); --c:var(--ivory); --bd:var(--charcoal); }
.btn--dark:hover{ --bg:var(--matte-black); color:var(--ivory); }
.btn--gold{ --bg:var(--champagne); --c:var(--matte-black); --bd:var(--champagne); }
.btn--gold:hover{ --bg:var(--champagne-2); color:var(--matte-black); }
.btn--ghost{ --bg:transparent; --c:var(--charcoal); --bd:var(--charcoal); }
.btn--ghost:hover{ --bg:var(--charcoal); color:var(--ivory); }
.btn--ghost-light{ --c:var(--ivory); --bd:rgba(246,241,232,.4); }
.btn--ghost-light:hover{ --bg:var(--ivory); color:var(--matte-black); --bd:var(--ivory); }
.btn--full{ width:100%; justify-content:center; }

.link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500;
  color: var(--gold-deep);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color var(--t-fast), color var(--t-fast), gap var(--t-fast);
}
.link:hover{ color:var(--charcoal); border-color: var(--champagne); gap:12px; }

/* ---------- Topbar ---------- */
.topbar{
  background: var(--matte-black);
  color: #D9D2C3;
  font-size: 13px;
}
.topbar__inner{
  display:flex; align-items:center; gap:16px;
  min-height: 38px;
}
.topbar__item{
  display:inline-flex; align-items:center; gap:8px;
  color:#D9D2C3;
}
.topbar__item:hover{ color:var(--champagne-2); }
.topbar__sep{ opacity:.4; }
.topbar__item--hide, .topbar__sep--hide{ display:none; }
@media (min-width: 720px){
  .topbar__item--hide, .topbar__sep--hide{ display:inline-flex; }
  .topbar__inner{ justify-content:flex-end; }
}

/* ---------- Header ---------- */
.header{
  position: sticky; top:0; z-index: 40;
  background: rgba(250,246,239,.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), padding var(--t-fast);
}
.header.is-scrolled{
  background: rgba(250,246,239,.95);
  border-bottom-color: var(--grey-line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height: 84px;
  gap: 20px;
}
.header__logo img{ height: 44px; width:auto; }
.nav{ display:none; }
@media (min-width: 1024px){
  .nav{ display:block; }
}
.nav__list{
  display:flex; align-items:center; gap: 36px;
}
.nav__list a{
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--charcoal);
  position:relative;
  padding: 8px 0;
}
.nav__list a::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:0; height:1px; background:var(--champagne);
  transition: width var(--t-fast), left var(--t-fast);
}
.nav__list a:hover{ color:var(--charcoal); }
.nav__list a:hover::after{ width:100%; left:0; }

.header__cta{ display:none; padding:12px 22px; }
@media (min-width: 1024px){ .header__cta{ display:inline-flex; } }

.nav__toggle{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--charcoal);
}
@media (min-width: 1024px){ .nav__toggle{ display:none; } }

/* ---------- Mobile nav ---------- */
.mobile-nav{
  position: fixed; inset:0; z-index: 60;
  background: var(--warm-white);
  padding: 28px var(--gutter) 40px;
  display:flex; flex-direction:column;
  transform: translateY(-100%);
  transition: transform .45s var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav__top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 36px;
}
.mobile-nav__close{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--charcoal);
}
.mobile-nav nav ul{
  display:flex; flex-direction:column; gap: 8px;
}
.mobile-nav nav a{
  display:block;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.2;
  padding: 10px 0;
  color: var(--charcoal);
  border-bottom: 1px solid var(--grey-line);
}
.mobile-nav__cta{ margin-top: 28px; align-self:flex-start; }
.mobile-nav__foot{
  margin-top: auto; padding-top: 32px;
  display:flex; flex-direction:column; gap:6px;
  color: var(--muted); font-size:14px;
}

/* ---------- Hero (dark text on light background) ---------- */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex; align-items:center;
  color: var(--matte-black);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position: center 30%;
  transform: scale(1.04);
  animation: heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(95deg,
      rgba(246,241,232,.94) 0%,
      rgba(246,241,232,.82) 38%,
      rgba(246,241,232,.45) 70%,
      rgba(246,241,232,.18) 100%),
    linear-gradient(180deg, rgba(26,22,20,.04) 0%, rgba(26,22,20,.10) 100%);
}
.hero__inner{
  padding: 140px 0 120px;
  max-width: 920px;
}
.hero__eyebrow span{
  display:inline-block;
  padding: 8px 14px;
  border:1px solid rgba(26,22,20,.30);
  border-radius:999px;
  font-size: 11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--matte-black);
  background: rgba(246,241,232,.6);
  backdrop-filter: blur(6px);
}
.hero__title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -1px;
  margin: 28px 0 24px;
  color: var(--matte-black);
}
.hero__title em{
  font-style: italic;
  color: var(--champagne);
  font-weight: 400;
}
.hero__lead{
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--charcoal);
  max-width: 560px;
  margin: 0 0 36px;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:14px;
}
.hero__actions .btn--ghost{
  --c: var(--matte-black);
  --bd: rgba(26,22,20,.35);
  background: rgba(246,241,232,.4);
}
.hero__actions .btn--ghost:hover{
  --bg: var(--matte-black); --c: var(--ivory); --bd: var(--matte-black);
}
.hero__meta{
  margin-top: 56px;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px; max-width: 640px;
  padding-top: 28px;
  border-top: 1px solid rgba(26,22,20,.18);
}
.hero__meta li{
  display:flex; flex-direction:column; gap:4px;
}
.hero__meta strong{
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  color: var(--matte-black);
  letter-spacing: 0;
}
.hero__meta span{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.hero__scroll{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  width:24px; height:40px;
  border:1px solid rgba(26,22,20,.5);
  border-radius:999px;
  display:none;
}
.hero__scroll span{
  display:block; width:2px; height:8px; background:var(--matte-black);
  margin: 6px auto 0; border-radius:2px;
  animation: scrollDot 1.8s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{ transform: translateY(0); opacity:.2; }
  40%{ opacity:1; }
  100%{ transform: translateY(14px); opacity:0; }
}
@media (min-width: 720px){ .hero__scroll{ display:block; } }

/* ---------- Philosophy ---------- */
.section--philosophy{ background: var(--warm-white); }
.philosophy__values{
  margin-top: clamp(60px, 7vw, 100px);
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 1px;
  background: var(--grey-line);
  border-top: 1px solid var(--grey-line);
  border-bottom: 1px solid var(--grey-line);
}
.value{
  background: var(--warm-white);
  padding: 40px 28px;
  display:flex; flex-direction:column; gap: 12px;
}
.value__num{
  font-family: var(--serif);
  font-style: italic;
  color: var(--champagne);
  font-size: 18px;
  letter-spacing: 1px;
}
.value h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 4px 0 4px;
  color: var(--charcoal);
}
.value p{ margin:0; color: var(--muted); font-size: 14.5px; line-height:1.65; }

/* ---------- Areas (treatments restructured: 2 disciplines) ---------- */
.areas{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255,255,255,.08);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 880px){ .areas{ grid-template-columns: 1fr 1fr; } }
.area{
  background: var(--matte-black);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 48px);
  display:flex; flex-direction:column; gap: 28px;
}
.area__head{ display:flex; flex-direction:column; gap: 10px; }
.area__tag{
  margin:0;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champagne-2);
}
.area__title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  color: var(--ivory);
  margin: 4px 0 6px;
}
.area__intro{
  margin: 0;
  color: #C8C0AE;
  font-size: 15.5px;
  line-height: 1.7;
}
.area__list{
  display:flex; flex-direction:column;
  border-top: 1px solid rgba(255,255,255,.08);
}
.area__list li{
  display:flex; gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.area__list li:last-child{ border-bottom: 0; }
.area__icon{
  flex-shrink: 0;
  width: 44px; height: 44px;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--champagne-2);
  border: 1px solid rgba(201,167,122,.30);
  border-radius: 50%;
  margin-top: 2px;
}
.area__list h4{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--ivory);
  margin: 0 0 4px;
}
.area__list p{
  margin: 0;
  color: #B6AE9C;
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---------- Process steps ---------- */
.steps{
  list-style: none;
  margin: 22px 0 30px;
  padding: 0;
  display:flex; flex-direction:column; gap: 14px;
  counter-reset: step;
}
.steps li{
  display:flex; gap: 18px; align-items:flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--grey-line);
}
.steps li:last-child{ border-bottom: 0; }
.steps li span{
  flex-shrink:0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--champagne);
  font-size: 18px;
  letter-spacing: 1px;
  min-width: 28px;
}
.steps li div{ font-size: 15.5px; line-height: 1.6; color: var(--charcoal); }
.steps li strong{ color: var(--charcoal); font-weight:500; }

/* ---------- Feature ---------- */
.feature__media img{
  width:100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  object-fit: cover;
  aspect-ratio: 5/4;
}
.feature__body .h2{ margin-bottom:18px; }

/* ---------- Clinic grid ---------- */
.clinic-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  justify-items: center;
}
@media (min-width: 820px){
  .clinic-grid{
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: stretch;
  }
}
.clinic-grid__item{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-lg);
  background: var(--sand-soft);
  margin: 0;
  width: 100%;
}
.clinic-grid__item img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: 50% 50%;
  aspect-ratio: 4/3;
  display:block;
  transition: transform .9s var(--ease);
}
.clinic-grid__item--lg img{
  aspect-ratio: 16/10;
  object-position: 50% 50%;
}
.clinic-grid__item:hover img{ transform: scale(1.04); }
.clinic-grid__item figcaption{
  position:absolute; left:18px; bottom:16px;
  background: rgba(14,12,10,.75);
  color: var(--ivory);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* ---------- Team ---------- */
.team__media img{
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/5;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.quote{
  margin: 24px 0 32px;
  padding: 24px 26px;
  background: var(--warm-white);
  border-left: 2px solid var(--champagne);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px,1.6vw,22px);
  line-height: 1.5;
  color: var(--charcoal);
}
.quote cite{
  display:block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 720px){ .gallery{ grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.gallery__item{
  margin:0;
  overflow:hidden;
  border-radius: var(--radius-lg);
  background: var(--sand-soft);
}
.gallery__item img{
  width:100%; aspect-ratio: 1/1; object-fit:cover;
  transition: transform .9s var(--ease), filter .5s var(--ease);
  filter: saturate(.95);
}
.gallery__item:hover img{ transform: scale(1.05); filter: saturate(1.05); }

/* ---------- Testimonials ---------- */
.testimonials{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 880px){ .testimonials{ grid-template-columns: repeat(3,1fr); } }
.testimonial{
  margin:0;
  background: var(--warm-white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display:flex; flex-direction:column; gap: 16px;
  box-shadow: var(--shadow-card);
}
.stars{
  color: var(--champagne);
  letter-spacing: 3px;
  font-size: 14px;
}
.testimonial blockquote{
  margin:0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--charcoal);
}
.testimonial figcaption{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- CTA ---------- */
.cta{
  display:flex; flex-direction:column; gap: 28px;
  align-items: flex-start;
}
@media (min-width: 880px){
  .cta{ flex-direction: row; align-items:center; justify-content: space-between; gap: 56px; }
}
.cta .h2{ max-width: 640px; margin-bottom: 16px; }
.cta__actions{ display:flex; gap: 12px; flex-wrap:wrap; }

/* ---------- Contact + Form ---------- */
.contact{ margin-bottom: clamp(64px, 8vw, 100px); }
.contact__list{
  margin: 28px 0 24px;
  display:flex; flex-direction:column; gap: 20px;
}
.contact__list li{
  display:flex; gap:16px; align-items:flex-start;
  color: var(--charcoal);
}
.contact__list svg{ color: var(--champagne); margin-top: 4px; flex-shrink:0; }
.contact__list strong{
  display:block;
  font-family: var(--sans); font-weight:500;
  font-size: 11px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.contact__list span, .contact__list a{ font-size: 15.5px; line-height:1.6; color: var(--charcoal); }
.contact__list a:hover{ color: var(--champagne); }

.contact__social{
  margin-top: 8px; display:flex; gap: 10px;
}
.contact__social a{
  width: 40px; height: 40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 50%;
  border: 1px solid var(--grey-line);
  color: var(--charcoal);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.contact__social a:hover{ background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }

.form{
  background: var(--ivory);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--grey-line);
}
.field{ display:flex; flex-direction:column; gap: 6px; margin-bottom: 18px; }
.field-row{ display:grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px){ .field-row{ grid-template-columns: 1fr 1fr; gap: 16px; } }
.field label{
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-weight:500;
}
.field input, .field select, .field textarea{
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--grey-line);
  background: transparent;
  padding: 10px 0 12px;
  font-size: 15.5px;
  color: var(--charcoal);
  border-radius: 0;
  transition: border-color var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-bottom-color: var(--champagne);
}
.field textarea{ resize: vertical; min-height: 90px; }
.field select{
  appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23B89968' stroke-width='1.4' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position: right 4px center; background-size: 10px;
  padding-right: 22px;
}

.check{
  display:flex; align-items:flex-start; gap: 10px;
  font-size: 13px; color: var(--muted);
  margin: 14px 0 22px;
  line-height: 1.5;
}
.check input{
  width:16px; height:16px; margin-top:2px;
  accent-color: var(--champagne);
}
.check a{ color: var(--charcoal); text-decoration: underline; text-underline-offset: 3px; }

.form__status{
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--gold-deep);
  min-height: 1.2em;
}
.form__status.is-error{ color:#9C3A2D; }

/* ---------- Map ---------- */
.map{
  width:100%;
  height: clamp(320px, 50vw, 520px);
  filter: grayscale(.45) contrast(.95);
  background: var(--sand-soft);
}
.map iframe{
  width:100%; height:100%; border:0; display:block;
}

/* ---------- Footer ---------- */
.footer{
  background: var(--matte-black);
  color: #C8C0AE;
  padding: clamp(56px, 7vw, 88px) 0 28px;
}
.footer__inner{
  display:grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 720px){
  .footer__inner{ grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; }
}
.footer__brand img{ height: 48px; width:auto; margin-bottom: 18px; }
.footer__brand p{
  max-width: 360px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #B6AE9C;
  margin: 0;
}
.footer__col h4{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champagne-2);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer__col ul{ display:flex; flex-direction:column; gap: 10px; font-size: 14.5px; }
.footer__col a{ color: #C8C0AE; }
.footer__col a:hover{ color: var(--ivory); }

.footer__legal{
  display:flex; flex-direction:column; gap: 12px;
  justify-content: space-between; align-items:flex-start;
  padding-top: 28px;
  font-size: 12.5px; color: #8C8473;
}
@media (min-width: 720px){
  .footer__legal{ flex-direction: row; align-items:center; }
}
.footer__links{ display:flex; gap: 22px; }
.footer__links a{ color: #8C8473; }
.footer__links a:hover{ color: var(--ivory); }

/* ---------- Floating WhatsApp ---------- */
.float-wa{
  position: fixed; right: 18px; bottom: 18px;
  width: 54px; height: 54px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -10px rgba(37,211,102,.55), 0 6px 14px -8px rgba(0,0,0,.3);
  z-index: 50;
  transition: transform var(--t-fast);
}
.float-wa:hover{ transform: translateY(-2px); color:#fff; }

/* ---------- Reveal animations ---------- */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in{ opacity: 1; transform: none; }
.reveal--delay{ transition-delay: .12s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__media img{ animation:none; transform:none; }
}

/* ---------- Body lock when mobile-nav open ---------- */
body.nav-open{ overflow: hidden; }

/* ---------- Print ---------- */
@media print{
  .header, .topbar, .mobile-nav, .float-wa, .hero__scroll, .map{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding: 24px 0; }
}