/* ============================================================================
   RAÍZES — Casa Tartaruga · Camada COMERCIAL / CONVERSÃO
   Complementa assets/raizes.css. Reaproveita os tokens da marca.
   Novos blocos: CTA WhatsApp · Suítes com valores · Carrossel (modal) ·
   Galeria premium + lightbox · Prova social (Google) · Localização + mapa ·
   Tudo incluso · CTA final · Botão flutuante WhatsApp.
   ========================================================================== */

/* ---------- WhatsApp · CTA verde de conversão -------------------------- */
:root { --wa: #1f9d57; --wa-deep: #178a4b; }

.btn-wa {
  background: var(--gold); color: var(--ink);
  box-shadow: 0 16px 40px -16px rgba(15,14,11,0.6);
}
.btn-wa:hover { background: var(--gold-light); }
.btn .wa-ico { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.btn-ghost-light {
  background: rgba(255,255,255,0.07); color: var(--cream);
  border: 1px solid var(--line-on-dark); backdrop-filter: blur(4px);
}
.btn-ghost-light:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* micro-CTA discreto (texto + seta) reaproveitando .link-quiet já existe */

/* ---------- HERO · ajustes de conversão -------------------------------- */
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--ui); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--cream);
  background: rgba(178,154,110,0.22); border: 1px solid var(--gold-light);
  padding: 0.5rem 1.1rem; margin-bottom: 1.8rem; backdrop-filter: blur(4px);
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #58d27e;
  box-shadow: 0 0 0 0 rgba(88,210,126,0.7); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(88,210,126,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(88,210,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(88,210,126,0); }
}
.hero-trust {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  margin-top: 2.2rem; color: var(--cream);
  font-family: var(--ui); font-size: 0.82rem; font-weight: 300;
}
.hero-trust .stars { color: var(--gold-light); letter-spacing: 0.12em; font-size: 0.92rem; }
.hero-trust b { font-weight: 500; }
.hero-trust .sep { width: 1px; height: 20px; background: var(--line-on-dark); }

/* ---------- A CASA · intro sem imagem (foto já aparece no hero) -------- */
.casa-intro {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(4rem,8vw,6.5rem) var(--pad-x) clamp(1.5rem,3vw,2.5rem);
}
.casa-intro .casa-title { margin-top: 1.1rem; }
.casa-intro .casa-lead { max-width: 60ch; }

/* ---------- SUÍTES · valores + interação ------------------------------- */
.suite { cursor: pointer; position: relative; overflow: hidden; }
.suite .slot, .suite .suite-photo { position: relative; }
.suite-photo { height: 250px; width: 100%; object-fit: cover; display: block;
  transition: transform 0.8s var(--ease); }
.suite:hover .suite-photo { transform: scale(1.05); }
.suite-photo-wrap { position: relative; overflow: hidden; height: 250px; }
.suite-cat {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--ui); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
  background: var(--gold); padding: 0.4rem 0.85rem;
}
.suite-cat.premium { background: var(--ink); color: var(--gold-light); border: 1px solid var(--gold-light); }
.suite-cat.master { background: var(--gold-deep); color: var(--cream); }
.suite-view {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: rgba(20,19,16,0.42); opacity: 0; transition: opacity 0.4s var(--ease);
}
.suite:hover .suite-view { opacity: 1; }
.suite-view span {
  font-family: var(--ui); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cream); border: 1px solid var(--cream);
  padding: 0.7rem 1.4rem; background: rgba(20,19,16,0.25);
}
.suite-price-row {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  margin: 1.3rem 0 0.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.suite-price-from { font-family: var(--ui); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); }
.suite-price { font-family: var(--display); font-size: 1.9rem; font-weight: 400; color: var(--ink); line-height: 1; }
.suite-price small { font-family: var(--ui); font-size: 0.72rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0.02em; }
.suite-actions { display: flex; gap: 0.7rem; margin-top: 1.3rem; }
.suite-actions .btn { flex: 1; justify-content: center; padding: 0.95rem 1rem; font-size: 0.64rem; }
.suite-note { margin-top: 0.9rem; font-size: 0.74rem; color: var(--text-muted); }

/* ---------- MODAL · carrossel da suíte --------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(15,14,11,0.92); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: clamp(1rem,4vw,3rem);
}
.modal.open { display: flex; animation: modalIn 0.4s var(--ease); }
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  width: min(1080px, 100%); max-height: 92vh; background: var(--paper);
  display: grid; grid-template-columns: 1.25fr 0.75fr; overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.7);
}
.modal-stage { position: relative; background: var(--ink); min-height: 360px; }
.modal-stage img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 92vh; }
.modal-counter {
  position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 3;
  font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--cream);
  background: rgba(15,14,11,0.55); padding: 0.4rem 0.8rem;
}
.modal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(250,247,240,0.9); color: var(--ink); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease);
}
.modal-arrow:hover { background: var(--gold); }
.modal-arrow.prev { left: 1rem; }
.modal-arrow.next { right: 1rem; }
.modal-dots { position: absolute; left: 0; right: 0; bottom: 1.1rem; z-index: 3;
  display: flex; gap: 0.5rem; justify-content: center; }
.modal-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(250,247,240,0.45); padding: 0; }
.modal-dots button.active { background: var(--gold); width: 22px; border-radius: 4px; }
.modal-info { padding: clamp(1.8rem,3vw,2.8rem); display: flex; flex-direction: column; overflow-y: auto; }
.modal-cat { font-family: var(--ui); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.7rem; }
.modal-name { font-family: var(--display); font-size: 2.2rem; font-weight: 400; color: var(--ink); line-height: 1; margin-bottom: 1rem; }
.modal-desc { font-size: 0.92rem; font-weight: 300; color: var(--text-soft); line-height: 1.8; }
.modal-specs { list-style: none; margin: 1.4rem 0; display: flex; flex-direction: column; gap: 0.55rem; }
.modal-specs li { font-size: 0.85rem; color: var(--text-soft); padding-left: 1.4rem; position: relative; }
.modal-specs li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); font-size: 0.7rem; top: 0.15rem; }
.modal-price { margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.modal-price .suite-price { font-size: 2.2rem; }
.modal-info .btn { width: 100%; justify-content: center; margin-top: 1.3rem; }
.modal-thumbs { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.modal-thumbs img { width: 100%; height: 54px; object-fit: cover; cursor: pointer; opacity: 0.55; transition: opacity 0.3s var(--ease); }
.modal-thumbs img.active { opacity: 1; outline: 2px solid var(--gold); }
.modal-close {
  position: fixed; top: 1.4rem; right: 1.6rem; z-index: 1002;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-on-dark);
  background: rgba(20,19,16,0.6); color: var(--cream); font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease);
}
.modal-close:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* ---------- GALERIA PREMIUM + lightbox --------------------------------- */
.gallery { background: var(--paper); }
.gallery-head { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end;
  margin-bottom: clamp(2.5rem,5vw,4rem); }
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px; gap: clamp(0.7rem,1.1vw,1.1rem); grid-auto-flow: dense;
}
.gphoto { position: relative; overflow: hidden; cursor: pointer; background: var(--areia); }
.gphoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
.gphoto:hover img { transform: scale(1.06); }
.gphoto::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,14,11,0.5), transparent 45%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.gphoto:hover::after { opacity: 1; }
.gphoto .gcap {
  position: absolute; left: 1rem; bottom: 0.85rem; z-index: 2; color: var(--cream);
  font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.04em;
  opacity: 0; transform: translateY(6px); transition: all 0.4s var(--ease);
}
.gphoto:hover .gcap { opacity: 1; transform: none; }
.g-tall { grid-row: span 2; }
.g-wide { grid-column: span 2; }
.gallery-cta { text-align: center; margin-top: clamp(2.2rem,4vw,3.2rem); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(12,11,9,0.95); align-items: center; justify-content: center; padding: 3vw; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 30px 90px -20px rgba(0,0,0,0.8); }
.lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(250,247,240,0.12); color: var(--cream); font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center; transition: background 0.3s var(--ease);
}
.lb-arrow:hover { background: var(--gold); color: var(--ink); }
.lb-arrow.prev { left: 2vw; } .lb-arrow.next { right: 2vw; }
.lb-counter { position: absolute; bottom: 2.2rem; left: 0; right: 0; text-align: center;
  color: var(--on-dark-soft); font-family: var(--ui); font-size: 0.78rem; letter-spacing: 0.14em; }

/* ---------- PROVA SOCIAL · Google -------------------------------------- */
.reviews { background: var(--cream); }
.reviews-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem);
  align-items: center; margin-bottom: clamp(2.5rem,5vw,4rem); }
.rating-card {
  background: var(--paper); border: 1px solid var(--line); padding: clamp(1.8rem,3vw,2.4rem);
  display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap;
}
.rating-score { font-family: var(--display); font-size: 4.2rem; font-weight: 300; color: var(--ink); line-height: 1; }
.rating-meta .stars { color: #e8a800; font-size: 1.2rem; letter-spacing: 0.1em; }
.rating-meta .src { font-family: var(--ui); font-size: 0.82rem; color: var(--text-muted); margin-top: 0.4rem; }
.rating-meta .src b { color: var(--text); font-weight: 500; }
.g-mark { font-family: var(--ui); font-weight: 600; letter-spacing: 0.02em; }
.g-mark .b { color: #4285F4; } .g-mark .r { color: #EA4335; } .g-mark .y { color: #FBBC05; }
.g-mark .b2 { color: #4285F4; } .g-mark .g { color: #34A853; } .g-mark .r2 { color: #EA4335; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.review {
  background: var(--paper); border: 1px solid var(--line); padding: clamp(1.5rem,2.4vw,2rem);
  display: flex; flex-direction: column;
}
.review-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.review-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.2rem; color: var(--cream); background: var(--gold-deep); flex-shrink: 0; }
.review-who { font-family: var(--ui); font-size: 0.86rem; font-weight: 500; color: var(--text); }
.review-when { font-family: var(--ui); font-size: 0.72rem; color: var(--text-muted); }
.review .stars { color: #e8a800; font-size: 0.86rem; letter-spacing: 0.08em; margin-bottom: 0.8rem; }
.review p { font-size: 0.9rem; font-weight: 300; color: var(--text-soft); line-height: 1.75; }
.review .gicon { margin-top: 1rem; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; }
.reviews-cta { text-align: center; margin-top: clamp(2.2rem,4vw,3rem); }

/* ---------- LOCALIZAÇÃO + mapa ----------------------------------------- */
.locate { background: var(--ink); }
.locate-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2.5rem,5vw,5rem); align-items: center; }
.locate-address {
  margin: 1.8rem 0; padding: 1.6rem 0; border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
  font-size: 0.95rem; font-weight: 300; color: var(--on-dark); line-height: 1.9;
}
.locate-address strong { display: block; font-family: var(--display); font-size: 1.2rem; color: var(--cream); margin-bottom: 0.4rem; font-weight: 400; }
.locate-points { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.6rem 0 2rem; }
.locate-points li { list-style: none; font-size: 0.88rem; font-weight: 300; color: var(--on-dark-soft);
  padding-left: 1.5rem; position: relative; }
.locate-points li::before { content: '◇'; position: absolute; left: 0; color: var(--gold); font-size: 0.6rem; top: 0.25rem; }
.map-frame {
  position: relative; border: 1px solid var(--line-on-dark); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ink-2);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.25) contrast(1.03); }

/* ---------- TUDO INCLUSO / BENEFÍCIOS ---------------------------------- */
.included { background: var(--paper); }
.included-head { text-align: center; max-width: 680px; margin: 0 auto clamp(2.8rem,5vw,4rem); }
.included-head .h-display { margin-top: 1.2rem; }
.included-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
.incl { background: var(--paper); padding: clamp(1.6rem,2.4vw,2.2rem); transition: background 0.4s var(--ease); }
.incl:hover { background: var(--cream); }
.incl-mark { font-family: var(--display); font-size: 1rem; color: var(--gold-deep); margin-bottom: 1.1rem; }
.incl h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 500; color: var(--text); margin-bottom: 0.5rem; }
.incl p { font-size: 0.84rem; font-weight: 300; color: var(--text-muted); line-height: 1.7; }

/* ---------- CTA FINAL -------------------------------------------------- */
.closer { position: relative; min-height: 78svh; display: flex; align-items: center;
  text-align: center; padding: clamp(5rem,9vw,8rem) var(--pad-x); overflow: hidden;
  background: linear-gradient(140deg,#1d1c18,#2a261e 55%,#3a3325); }
.closer-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.closer-overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(18,17,13,0.74), rgba(18,17,13,0.86)); }
.closer-inner { position: relative; z-index: 2; max-width: 880px; margin-inline: auto; }
.closer-text { font-family: var(--display); font-weight: 300; line-height: 1.18;
  font-size: clamp(2rem,5vw,3.8rem); color: var(--cream); margin: 1.8rem 0 1.6rem; text-wrap: balance; }
.closer-text em { font-style: italic; color: var(--gold-light); }
.closer-sub { font-size: 1rem; font-weight: 300; color: var(--on-dark-soft); line-height: 1.85;
  max-width: 52ch; margin: 0 auto 2.6rem; }
.closer-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.closer-micro { margin-top: 1.8rem; font-family: var(--ui); font-size: 0.78rem; color: var(--on-dark-muted); letter-spacing: 0.04em; }

/* ---------- BOTÃO FLUTUANTE WHATSAPP ----------------------------------- */
.wa-float {
  position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index: 900;
  display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none;
  background: var(--wa); color: #fff; padding: 0.95rem 1.4rem; border-radius: 999px;
  font-family: var(--ui); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em;
  box-shadow: 0 16px 40px -10px rgba(20,80,45,0.55); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -10px rgba(20,80,45,0.65); }
.wa-float .wa-ico { width: 22px; height: 22px; }
.wa-float .wa-label { white-space: nowrap; }
@media (max-width: 560px) { .wa-float .wa-label { display: none; } .wa-float { padding: 0.95rem; } }

/* ---------- RESPONSIVO da camada comercial ----------------------------- */
@media (max-width: 1000px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .g-wide { grid-column: span 2; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .included-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .modal-box { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
  .modal-stage { min-height: 280px; max-height: 46vh; }
  .reviews-head, .locate-grid, .gallery-head { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .g-tall { grid-row: span 2; }
  .included-grid { grid-template-columns: 1fr; }
  .suite-actions { flex-direction: column; }
  .gphoto .gcap { opacity: 1; transform: none; }
}