@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap');

:root {
  --ivory:      #F2EDE6;
  --ivory-mid:  #D8CFC4;
  --sage:       #4A6B50;
  --sage-dark:  #35522A;
  --sage-light: #8AAE90;
  --mocha:      #7A5C3E;
  --mocha-dark: #5C4228;
  --lavande:    #C4B0CC;
  --brun:       #1A1210;
  --brun-mid:   #3D2E22;
  --brun-light: #6B5646;
  --ff-title: 'Poppins', sans-serif;
  --ff-body:  'Inter', sans-serif;
  --transition: 0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--ff-body); background: var(--ivory); color: var(--brun); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; font-weight: 400; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--ff-body); }

.label-sm { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--sage); display: block; }
.title-xl { font-family: var(--ff-title); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; line-height: 1.15; }
.title-lg { font-family: var(--ff-title); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.25; }
.title-md { font-family: var(--ff-title); font-size: 1.4rem; font-weight: 600; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 3px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; border: none; transition: var(--transition); }
.btn-primary { background: var(--sage); color: var(--ivory); }
.btn-primary:hover { background: var(--sage-dark); }
.btn-mocha { background: var(--mocha); color: var(--ivory); }
.btn-mocha:hover { background: var(--mocha-dark); }
.btn-outline { background: transparent; color: var(--ivory); border: 1px solid rgba(242,237,230,0.6); }
.btn-outline:hover { border-color: var(--ivory); background: rgba(242,237,230,0.08); }
.btn-ghost { background: transparent; color: var(--sage); border: 1px solid var(--sage); }
.btn-ghost:hover { background: var(--sage); color: var(--ivory); }
.btn-full { width: 100%; justify-content: center; }

/* NAVBAR */
.navbar { position: sticky; top: 0; z-index: 100; background: var(--ivory); border-bottom: 1px solid var(--ivory-mid); padding: 0 2rem; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.navbar-logo { font-family: var(--ff-title); font-size: 1.5rem; letter-spacing: 3px; color: var(--brun); }
.navbar-logo span { color: var(--sage); }
.navbar-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.navbar-links a { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brun-mid); transition: color var(--transition); font-weight: 500; }
.navbar-links a:hover { color: var(--sage); }
.navbar-actions { display: flex; align-items: center; gap: 1rem; }

/* BURGER */
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--brun); transition: var(--transition); }
.burger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4.5px); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4.5px); }

/* MOBILE MENU */
.mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; background: var(--ivory); border-bottom: 1px solid var(--ivory-mid); padding: 1.5rem 2rem 2rem; z-index: 99; flex-direction: column; gap: 0; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--brun-mid); padding: 1rem 0; border-bottom: 1px solid var(--ivory-mid); }
.mobile-menu .btn { margin-top: 1.5rem; }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, #2A3D2C 0%, #3D5440 40%, #5C7A58 75%, #8B7355 100%);
  padding: clamp(4rem, 10vw, 7rem) 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Pingos de água — círculos animados subtis */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(242, 237, 230, 0.04);
  animation: ripple 8s ease-in-out infinite;
  pointer-events: none;
}

.hero::before {
  width: 600px;
  height: 600px;
  top: -200px;
  left: -150px;
  animation-delay: 0s;
}

.hero::after {
  width: 400px;
  height: 400px;
  bottom: -150px;
  right: -100px;
  animation-delay: 3s;
  background: rgba(192, 169, 142, 0.06);
}

/* Pingos adicionais via JS não são necessários — 
   usamos pseudo-elementos + sombras para simular mais círculos */
.hero-inner {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  z-index: 1;
}

/* Círculo decorativo extra com box-shadow */
.hero-inner::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  box-shadow:
    0 0 0 60px rgba(242,237,230,0.02),
    0 0 0 120px rgba(242,237,230,0.015),
    0 0 0 200px rgba(242,237,230,0.01);
  animation: ripple 10s ease-in-out infinite;
  animation-delay: 1.5s;
  pointer-events: none;
  z-index: 0;
}

@keyframes ripple {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.hero .label-sm { color: var(--sage-light); justify-content: center; display: flex; margin-bottom: 1.5rem; position: relative; z-index: 1; }
.hero-title { color: var(--ivory); margin-bottom: 1rem; position: relative; z-index: 1; }
.hero-title em { font-style: italic; color: var(--lavande); }
.hero-sub { color: rgba(242,237,230,0.9); font-size: 16px; margin-bottom: 2.5rem; font-weight: 400; position: relative; z-index: 1; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* SECTION */
.section { padding: clamp(3rem, 8vw, 5rem) 2rem; scroll-margin-top: 64px; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header .title-lg { margin-top: 0.5rem; color: var(--brun); }

/* SERVICES */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; max-width: 860px; margin: 0 auto; }
.service-card { background: #fff; border: 1px solid var(--ivory-mid); border-radius: 10px; padding: 2rem; transition: var(--transition); position: relative; overflow: hidden; }
.service-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sage); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.service-card:hover::after { transform: scaleX(1); }
.service-card:hover { border-color: var(--sage-light); transform: translateY(-2px); }
.service-icon { font-size: 24px; margin-bottom: 1.25rem; }
.service-name { font-family: var(--ff-title); font-size: 1.3rem; font-weight: 400; margin-bottom: 0.5rem; }
.service-desc { font-size: 14px; color: var(--brun-mid); line-height: 1.75; margin-bottom: 1.25rem; }
.service-meta { display: flex; align-items: baseline; gap: 8px; }
.service-price { font-family: var(--ff-title); font-size: 1.6rem; color: var(--mocha); font-weight: 500; }
.service-duration { font-size: 13px; color: var(--brun-light); font-weight: 500; }

/* FOOTER */
.footer { background: var(--brun); padding: 3rem 2rem; text-align: center; }
.footer-logo { font-family: var(--ff-title); font-size: 1.4rem; letter-spacing: 3px; color: var(--ivory); margin-bottom: 0.75rem; }
.footer-logo span { color: var(--sage-light); }
.footer-sub { font-size: 13px; color: var(--sage-light); letter-spacing: 0.5px; margin-bottom: 2rem; }
.footer-sub a { color: var(--sage-light); text-decoration: underline; text-underline-offset: 3px; }
.footer-sub a:hover { color: var(--ivory); }
.footer-links { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.footer-links a { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(242,237,230,0.7); transition: color var(--transition); font-weight: 500; }
.footer-links a:hover { color: var(--ivory); }
.footer-copy { font-size: 12px; color: rgba(242,237,230,0.5); }

/* MODAL */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(42,31,26,0.72); z-index: 200; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.active { display: flex; }
.modal { background: var(--ivory); border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 400px; position: relative; animation: modalIn 0.3s ease; max-height: 90vh; overflow-y: auto; }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 22px; color: var(--brun-light); padding: 4px 8px; border-radius: 4px; transition: var(--transition); line-height: 1; }
.modal-close:hover { background: var(--ivory-mid); }
.modal-header { text-align: center; margin-bottom: 1.75rem; }
.modal-header .label-sm { color: var(--mocha); margin-bottom: 0.5rem; }
.modal-header p { font-size: 14px; color: var(--brun-mid); margin-top: 0.3rem; }

/* TABS */
.modal-tabs { display: flex; border-bottom: 1px solid var(--ivory-mid); margin-bottom: 1.75rem; }
.modal-tab { flex: 1; padding: 10px; background: none; border: none; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brun-light); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--transition); }
.modal-tab.active { color: var(--sage); border-bottom-color: var(--sage); }
.form-panel { display: none; }
.form-panel.active { display: block; }

/* FORM */
.form-group { margin-bottom: 1.1rem; }
.form-label { display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brun-mid); margin-bottom: 5px; font-weight: 600; }
.form-input { width: 100%; padding: 12px 14px; background: #fff; border: 1px solid var(--ivory-mid); border-radius: 6px; font-family: var(--ff-body); font-size: 15px; color: var(--brun); outline: none; transition: border-color var(--transition); font-weight: 400; }
.form-input:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(74,107,80,0.1); }
.form-input::placeholder { color: var(--brun-light); opacity: 0.6; }
.form-error { display: none; font-size: 12px; color: #b94040; margin-top: 4px; }
.form-error.visible { display: block; }
.form-footer { text-align: center; margin-top: 1rem; font-size: 13px; color: var(--brun-light); }
.form-footer a { color: var(--sage); }

/* ALERTS */
.alert { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 1rem; display: none; }
.alert.visible { display: block; }
.alert-error { background: #fdf0f0; color: #b94040; border: 1px solid #f5c6c6; }
.alert-success { background: #f0f7f1; color: var(--sage-dark); border: 1px solid var(--sage-light); }

/* ANIM SCROLL */
.anim-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.anim-up.visible { opacity: 1; transform: translateY(0); }

/* RESPONSIVE */
@media (max-width: 768px) {
  .navbar-links, .navbar-actions { display: none; }
  .burger { display: flex; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; justify-content: center; max-width: 280px; }
}

/* ABOUT TEXT */
.about-text { max-width: 560px; margin: 0 auto; text-align: center; color: var(--brun-mid); font-size: 15px; line-height: 1.8; }

/* MASSAGISTES */
.massagistes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; max-width: 800px; margin: 0 auto; }
.massagiste-card { background: #fff; border: 1px solid var(--ivory-mid); border-radius: 10px; overflow: hidden; text-align: center; transition: var(--transition); }
.massagiste-card:hover { border-color: var(--sage-light); transform: translateY(-2px); }
.massagiste-photo { width: 100%; height: 220px; object-fit: cover; display: block; background: var(--ivory-mid); }
.massagiste-photo-placeholder { width: 100%; height: 220px; background: linear-gradient(135deg, var(--sage-light) 0%, var(--ivory-mid) 100%); display: flex; align-items: center; justify-content: center; font-family: var(--ff-title); font-size: 2.5rem; font-weight: 600; color: var(--sage-dark); }
.massagiste-card-body { padding: 1.25rem 1.5rem; }
.massagiste-name { font-family: var(--ff-title); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; }
.massagiste-spec { font-size: 12px; color: var(--brun-mid); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500; }

/* GALLERY */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 860px; margin: 0 auto; border-radius: 8px; overflow: hidden; }
.gallery-item { aspect-ratio: 4/3; overflow: hidden; background: var(--ivory-mid); position: relative; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: linear-gradient(135deg, var(--ivory-mid), var(--sage-light)); }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* RGPD BANNER */
.rgpd-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--brun); color: var(--ivory); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; z-index: 999; flex-wrap: wrap; font-size: 13px; line-height: 1.5; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); }
.rgpd-banner p { flex: 1; min-width: 200px; color: rgba(242,237,230,0.85); }
.rgpd-banner p a { color: var(--sage-light); text-decoration: underline; }
.rgpd-banner-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
.rgpd-banner.hidden { display: none; }
@media (max-width: 600px) { .rgpd-banner { padding: 1rem; } .rgpd-banner-actions { width: 100%; } }

/* CONFIANCE */
.confiance-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem; 
  max-width: 680px; 
  margin: 0 auto; 
}
.confiance-item { text-align: center; padding: 1.5rem 1rem; }
.confiance-number { font-family: var(--ff-title); font-size: 2.5rem; color: var(--sage); font-weight: 400; line-height: 1; }
.confiance-label { font-size: 13px; color: var(--brun-mid); margin-top: 0.5rem; font-weight: 500; }

/* FAQ */
.faq-list { max-width: 640px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--ivory-mid); }
.faq-question { width: 100%; background: none; border: none; text-align: left; padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--ff-body); font-size: 15px; color: var(--brun); cursor: pointer; gap: 1rem; font-weight: 500; }
.faq-icon { font-size: 20px; color: var(--sage); transition: transform var(--transition); flex-shrink: 0; line-height: 1; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer p { padding: 0 0 1.25rem; font-size: 15px; color: var(--brun-mid); line-height: 1.8; }

/* STRIP CTA */
.strip-cta { background: var(--mocha); padding: 4rem 2rem; text-align: center; }
.strip-cta .title-md { color: var(--ivory); font-weight: 300; margin-bottom: 0.5rem; }
.strip-cta .title-md em { font-style: italic; }
.strip-cta p { color: rgba(242,237,230,0.8); font-size: 15px; margin-bottom: 2rem; }

/* MODAL RESERVA STEPS */
.steps-nav { display: flex; gap: 0; margin-bottom: 2rem; border-bottom: 1px solid var(--ivory-mid); }
.step-dot { flex: 1; padding: 8px 4px; text-align: center; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--brun-light); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.step-dot.active { color: var(--sage); border-bottom-color: var(--sage); font-weight: 600; }
.step-dot.done { color: var(--sage-light); }
.step-panel { display: none; }
.step-panel.active { display: block; }

.massagiste-option { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ivory-mid); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: var(--transition); background: #fff; width: 100%; text-align: left; }
.massagiste-option:hover { border-color: var(--sage); }
.massagiste-option.selected { border-color: var(--sage); background: #f0f5f1; }
.massagiste-option-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sage-light); display: flex; align-items: center; justify-content: center; font-family: var(--ff-title); font-size: 1rem; color: var(--sage-dark); flex-shrink: 0; font-weight: 600; }
.massagiste-option-info strong { display: block; font-size: 14px; color: var(--brun); font-weight: 600; }
.massagiste-option-info span { font-size: 12px; color: var(--brun-light); }

.service-option { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid var(--ivory-mid); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: var(--transition); background: #fff; width: 100%; text-align: left; }
.service-option:hover { border-color: var(--sage); }
.service-option.selected { border-color: var(--sage); background: #f0f5f1; }
.service-option-name { font-size: 14px; color: var(--brun); font-weight: 500; }
.service-option-meta { font-size: 12px; color: var(--brun-light); }
.service-option-price { font-family: var(--ff-title); font-size: 1.2rem; color: var(--mocha); font-weight: 600; }

.slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 0.5rem; }
.slot-btn { padding: 10px 4px; border: 1px solid var(--ivory-mid); border-radius: 6px; background: #fff; font-size: 13px; color: var(--brun); cursor: pointer; transition: var(--transition); text-align: center; font-weight: 500; }
.slot-btn:hover { border-color: var(--sage); background: #f0f5f1; }
.slot-btn.selected { background: var(--sage); color: var(--ivory); border-color: var(--sage); }
.slot-btn.indisponible { background: var(--ivory-mid); color: var(--brun-light); cursor: not-allowed; opacity: 0.5; }

.step-actions { display: flex; gap: 8px; margin-top: 1.5rem; }
.step-actions .btn { flex: 1; justify-content: center; }
.btn-back { background: transparent; color: var(--brun-mid); border: 1px solid var(--ivory-mid); }
.btn-back:hover { border-color: var(--brun-mid); }

.booking-summary { background: var(--ivory); border: 1px solid var(--ivory-mid); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: 14px; }
.booking-summary-row { display: flex; justify-content: space-between; padding: 4px 0; }
.booking-summary-row span:first-child { color: var(--brun-light); }
.booking-summary-row span:last-child { color: var(--brun); font-weight: 600; }

/* MOBILE — legibilidade melhore */
@media (max-width: 480px) {
  body { font-size: 16px; }
  .faq-question { font-size: 14px; }
  .service-desc { font-size: 14px; }
  .hero-sub { font-size: 15px; }
  .modal { padding: 1.75rem 1.25rem; }
  .steps-nav { font-size: 10px; }
  .slots-grid { grid-template-columns: repeat(3, 1fr); }
  .confiance-number { font-size: 2rem; }
}

 /* ← adicione 2 ligne  */
  .footer-sub { font-size: 12px; line-height: 1.8; }
  .footer-sub a { display: inline-block; }

  @media (max-width: 480px) {
  .confiance-grid { grid-template-columns: repeat(2, 1fr); }
}