/* =========================
   UI – Minimal & Luxo (PT)
   Paleta oficial + tipografia definida
   ========================= */

/* Paleta */
:root{
  --color1:#d2b48c; /* destaque/botões */
  --color2:#ddc7a6; /* fundos suaves */
  --color3:#e8dabf; /* respiro/detalhes */
  --black:#0b0b0b;
  --white:#ffffff;

  --container: 1200px;

  --radius-xl: 16px;
  --radius-lg: 12px;
  --radius-md: 8px;

  --shadow-soft: 0 8px 24px rgba(0,0,0,.08);
}
.brand__mark {
  width: 60px;
  height: auto;
  display: inline-block;
}
.brand__name {
  font-weight: 600;
  letter-spacing: .6px;
}

/* Reset essencial */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--black);
  background:var(--white);
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Tipografia */
h1,h2,h3,h4{
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  margin:0 0 .5rem 0;
  letter-spacing:.2px;
}
h1{ font-size: clamp(2.2rem, 3.6vw, 4rem); font-weight:600; }
h2{ font-size: clamp(1.6rem, 2.4vw, 2.4rem); font-weight:600; }
p{ margin:.2rem 0 1rem; }

/* Utilitários */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

/* ===== HEADER ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:115px;
}
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--black);
}

.brand__name{ font-weight:600; letter-spacing:.6px; }

.nav__toggle{
  display:none; background:none; border:0; font-size:1.4rem; cursor:pointer;
}
.nav__list{
  display:flex; gap:24px; list-style:none; margin:0; padding:0;
}
.nav__list a{
  text-decoration:none; color:var(--black);
  padding:10px 5; position:relative;
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--black); transition:.25s ease;
}
.nav__list a:hover::after{ width:100%; }

/* Botões */
.btn{
  appearance:none; border:1px solid transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.25rem; border-radius:var(--radius-lg);
  font-weight:600; text-decoration:none;
  box-shadow:var(--shadow-soft);
}
.btn--sm{ padding:.6rem .9rem; box-shadow:none; }
.btn--primary{
  background:var(--color1); color:var(--black);
  border-color:rgba(0,0,0,.1);
}
.btn--primary:hover{ transform:translateY(-1px); }
.btn--ghost{
  background:transparent; color:var(--black);
  border-color:var(--black);
}
.btn--ghost:hover{ background:var(--black); color:var(--color1); }

/* ===== HERO ===== */
.hero{
  position:relative; min-height:72vh; display:grid; place-items:center;
  isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.6)),
    url('../img/fundo.jpg') center/cover no-repeat;
  filter:saturate(110%) contrast(98%);
}
.hero__content{
  text-align:center; max-width:980px;
}
.hero__title{
  color:var(--white);
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.hero__sub{
  color:#000000; font-weight:500; margin-bottom:1.4rem;
  text-shadow: 0 1px 20px rgba(0,0,0,.35);
}
.hero__actions{ display:flex; gap:14px; justify-content:center; }

/* ===== FOOTER ===== */
.site-footer{
  margin-top:72px;
  background:#121212; color:#d9d9d9;
}
.footer__grid{
  display:grid; gap:32px;
  grid-template-columns: 1.2fr .8fr .8fr;
  padding:48px 24px;
}
.footer__logo{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.footer__tagline{ color:#bdbdbd; margin-top:.25rem; }
.footer__hours, .footer__address, .footer__contact{ margin:.6rem 0; }
.footer__col h4{
  color:#f1f1f1; margin-bottom:.8rem; font-size:1.05rem; letter-spacing:.3px;
}
.footer__col ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer__col a{ color:#dcdcdc; text-decoration:none; }
.footer__col a:hover{ color:var(--color1); }

.footer__bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:14px 0;
  background:#0f0f0f;
}
.footer__bottom__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.footer__social{ display:flex; gap:16px; }
.footer__social a{ color:#dcdcdc; text-decoration:none; }
.footer__social a:hover{ color:var(--color1); }
.footer__copy{ margin:0; color:#bdbdbd; }
.footer__top{ color:#dcdcdc; text-decoration:none; }
.footer__top:hover{ color:var(--color1); }
/* ===== FOOTER – Contato ===== */
.footer__contact {
  margin-top: .8rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.footer__contact a {
  color: #dcdcdc; /* cor clara do texto */
  text-decoration: none;
  transition: color .25s ease, transform .25s ease;
  display: inline-block;
}

.footer__contact a:hover {
  color: var(--color1); /* destaque dourado/nude */
  transform: translateX(3px); /* leve movimento para a direita */
}

.footer__contact br {
  line-height: 1.2;
}

/* =========================
   TOPBAR (desktop only)
   ========================= */
.topbar{
  display:none;
  background:#000; color:#f0f0f0;
  font-size:.92rem; letter-spacing:.08em;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:center; gap:28px;
  padding:10px 24px;
}
.topbar__addr{ opacity:.9; }
.topbar__whats{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#f0f0f0; text-decoration:none; font-weight:600;
}
.topbar__whats .ico{ width:18px; height:18px; fill:#fff; opacity:.95; }
.topbar__social{ display:flex; gap:14px; margin-left:28px; }
.topbar__social a{ display:inline-grid; place-items:center; width:22px; height:22px; }
.topbar__social .ico{ width:20px; height:20px; fill:#fff; opacity:.92; transition:transform .2s ease, opacity .2s ease; }
.topbar__social a:hover .ico{ transform:translateY(-2px); opacity:1; }

/* Mostrar a topbar apenas em telas >= 992px */
@media (min-width: 992px){
  .topbar{ display:block; }
}

/* Ajuste do header quando tem topbar */
.site-header{ top:0; }

/* =========================
   SOCIAL DOCK FIXO
   ========================= */
.social-dock{
  position:fixed; z-index:70;
  bottom:16px; right:16px;
  display:flex; gap:10px;
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.08);
  padding:8px 10px; border-radius:999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.social-dock a{ width:28px; height:28px; display:inline-grid; place-items:center; }
.social-dock .ico{ width:20px; height:20px; fill:#fff; opacity:.92; transition:transform .2s ease, filter .2s ease; }
.social-dock a:hover .ico{ transform:translateY(-2px); filter: drop-shadow(0 0 0 var(--color1)); }

/* versão mobile: barra central inferior, mais discreta */
@media (max-width: 600px){
  .social-dock{
    left:50%; right:auto; transform:translateX(-50%);
    bottom:12px; padding:7px 10px; gap:8px;
  }
}



/* ===== Responsividade ===== */
@media (max-width: 960px){
  .nav__toggle{ display:block; }
  .nav__list{ position:absolute; right:24px; top:72px; background:#fff; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow-soft); display:none; flex-direction:column; }
  .nav__list.is-open{ display:flex; }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__bottom__inner{ flex-direction:column; align-items:flex-start; }
}





/* ===== SOBRE NÓS ===== */
.about{
  background: var(--color3); /* #e8dabf — nude claro */
  padding: clamp(56px, 8vw, 96px) 0;
}

.about__grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.eyebrow{
  display:inline-block;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(0,0,0,.65);
  margin-bottom: .75rem;
}

.about__title{
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.15;
  color: var(--black);
  margin-bottom: .8rem;
}

.about__desc{
  max-width: 56ch;
  color: rgba(0,0,0,.78);
  margin-bottom: 1.4rem;
}

/* botão escuro no estilo da ref */
.btn--dark{
  background: #2c2c2c;
  color: #fff;
  border-color: #2c2c2c;
}
.btn--dark:hover{
  transform: translateY(-1px);
  background: #000;
  color: var(--color1); /* leve toque da paleta no hover */
}

/* imagem à direita, com respiro */
.about__media{
  margin: 0;
}
.about__media img{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

/* responsivo */
@media (max-width: 960px){
  .about__grid{
    grid-template-columns: 1fr;
  }
  .about__media{ order: -1; } /* imagem sobe no mobile se preferir inverter, remova se não quiser */
}


/* ===== INSPIRE-SE ===== */
.inspire{
  background:#fff;
  padding: clamp(56px, 8vw, 96px) 0;
}

.inspire__head{
  text-align:center;
  margin-bottom: clamp(28px, 5vw, 44px);
}
.inspire__title{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height:1.2;
  color: var(--black);
}
.inspire__meta{
  margin-top:.4rem;
  font-size:.92rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(0,0,0,.6);
}

.inspire__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
}

/* FLIP CARD */
.flip-card{
  margin:0; position:relative;
}
.flip-card__inner{
  position:relative; width:100%; aspect-ratio: 4/3;
  perspective: 1000px; transform-style:preserve-3d;
  border-radius: var(--radius-xl); overflow:hidden;
  box-shadow: var(--shadow-soft);
}
.flip-card__face{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; backface-visibility: hidden;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.flip-card__front{ transform: rotateY(0deg); }
.flip-card__back { transform: rotateY(180deg); }

/* Hover (apenas em dispositivos com hover) */
@media (hover:hover){
  .flip-card:hover .flip-card__front{ transform: rotateY(-180deg); }
  .flip-card:hover .flip-card__back { transform: rotateY(0deg); }
}

/* Legendas */
.flip-card__caption{
  display:flex; justify-content:center; gap:.5rem;
  font-family:"Playfair Display", Georgia, serif;
  color: var(--black);
  margin-top:.75rem;
}
.flip-card__name{
  font-style: italic;
}
.flip-card__by{
  font-family:"Montserrat", system-ui, sans-serif;
  color: rgba(0,0,0,.6);
}

/* Acentos com a paleta */
.flip-card__caption .flip-card__name::after{
  content:"";
  display:block; height:2px; width:36px; margin:.35rem auto 0;
  background: var(--color1);
  opacity:.85;
}

/* Responsivo: 2 colunas tablet, 1 coluna mobile */
@media (max-width: 1024px){
  .inspire__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .inspire__grid{ grid-template-columns: 1fr; }
}
.inspire__btn {
  text-align: center;
  margin-top: clamp(24px, 4vw, 40px);
}

.inspire__btn .btn--primary {
  background: var(--color1);
  color: var(--black);
  font-weight: 600;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.1);
  transition: background .3s ease, transform .2s ease;
}

.inspire__btn .btn--primary:hover {
  background: var(--black);
  color: var(--color1);
  transform: translateY(-2px);
}


/* ===== FAQ ===== */
.faq{
  background: #ffffff; /* Nude claro */
  padding: clamp(56px, 8vw, 96px) 0;
}

.faq__grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.faq__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.faq__title{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height:1.2;
  color: var(--black);
  margin-bottom: 1rem;
}

.faq__list{
  max-width: 700px;
}

.faq__item{
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.faq__question{
  background:none;
  border:none;
  width:100%;
  text-align:left;
  padding:1rem 0;
  font-family:"Montserrat", sans-serif;
  font-size:1rem;
  font-weight:600;
  color: var(--black);
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.faq__icon{
  font-size:1.4rem;
  color: var(--color1);
  transition: transform .3s ease;
}

.faq__answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}

.faq__answer p{
  margin:0 0 1rem;
  font-size:.95rem;
  color:rgba(0,0,0,.75);
  line-height:1.5;
}

/* Estado ativo */
.faq__item.active .faq__answer{
  max-height:300px;
}

.faq__item.active .faq__icon{
  transform: rotate(45deg);
}

/* Responsivo */
@media (max-width: 960px){
  .faq__grid{
    grid-template-columns: 1fr;
  }
  .faq__media{
    order: -1; /* imagem vem antes no mobile */
  }
}

/* ===== CTA FINAL ===== */
.cta{
  background:#e8dabf;
  padding: clamp(64px, 9vw, 120px) 0;
}
.cta__box{
  text-align:center;
  max-width: 780px;
}
.cta__title{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height:1.2;
  color: var(--black);
  margin-bottom:.6rem;
}
.cta__sub{
  color: rgba(0,0,0,.72);
  max-width:58ch;
  margin:0 auto 1.2rem;
}

/* ===== MODAL BASE ===== */
.modal{ position:fixed; inset:0; display:none; z-index:100; }
.modal.is-open{ display:block; }
.modal__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter: blur(4px);
}
.modal__content{
  position:relative; z-index:1;
  width:min(680px, 92vw); margin: 1vh auto;
  background:#fff; border-radius:16px; padding:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}
.modal__close{
  position:absolute; top:8px; right:10px;
  width:36px; height:36px; border-radius:8px;
  border:1px solid rgba(0,0,0,.1); background:#fff; cursor:pointer;
  font-size:1.2rem;
}
.modal__title{
  font-family:"Playfair Display", Georgia, serif;
  margin:0 0 .25rem; color:#111; font-size:1.6rem;
}
.modal__desc{ margin:0 0 1rem; color:rgba(0,0,0,.7); }

.form__row{ display:grid; gap:.35rem; margin-bottom:.9rem; }
.form__grid{ display:grid; gap:.9rem; grid-template-columns: 1fr 1fr; }
.form input, .form select{
  width:100%; padding:.85rem .9rem; border-radius:12px;
  border:1px solid rgba(0,0,0,.12); background:#fff;
  font: inherit;
}
.form input:focus, .form select:focus{
  outline:2px solid var(--color1); border-color:transparent;
}
.form__submit{ width:100%; margin-top:.4rem; }

/* estágios do modal (form x ok) */
.modal__stage.is-hidden{ display:none; }

/* toques de marca */
.btn--dark{
  background:#2c2c2c; color:#fff; border-color:#2c2c2c;
}
.btn--dark:hover{ background:#000; color:var(--color1); }




/* ===== MODELOS (página) ===== */
.models{ background:#fff; padding: clamp(56px, 8vw, 96px) 0; }

.models__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom: clamp(24px, 5vw, 40px);
}

.models__title{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height:1.2; color: var(--black);
  text-align:center; margin:0 auto;
}

.models__controls{
  display:flex; align-items:center; gap:18px; margin-left:auto;
}

.models__count{ font-size:.95rem; color:rgba(0,0,0,.65); }

.models__filter{ position:relative; }
.models__filter select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:.6rem 2.2rem .6rem .8rem;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px; background:#fff; color:var(--black);
  font-family:"Montserrat",sans-serif; cursor:pointer;
}
.select-caret{ position:absolute; right:.6rem; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:var(--black); opacity:.6; pointer-events:none; }

.models__grid{ margin-top: 8px; }

.models__cta{
  text-align:center; margin-top: clamp(24px, 4vw, 40px);
}
.models__cta .btn--primary{
  background: var(--color1); color: var(--black);
  border:1px solid rgba(0,0,0,.1);
}
.models__cta .btn--primary:hover{
  background: var(--black); color: var(--color1);
}

/* responsivo: empilhar controles */
@media (max-width: 960px){
  .models__head{
    flex-direction:column; align-items:center;
  }
  .models__controls{ margin-left:0; }
}


/* ===== PÁGINA SOBRE ===== */
.aboutpage{
  background:#fff;
  padding: clamp(40px, 6vw, 72px) 0;
}

.bio__intro{
  text-align:center;
  max-width: 900px;
}
.bio__title{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height:1.2;
  margin: 0 0 .4rem;
  color: var(--black);
}
.bio__lead{
  margin: 0 auto 2rem;
  max-width: 68ch;
  color: rgba(0,0,0,.75);
  font-size: 1.05rem;
}

/* Retrato com texto sobreposto */
.portrait{
  position: relative;
  margin: 0;
  width: min(1100px, 92vw);
  margin-inline: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.portrait__img{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
}
.portrait__overlay{
  position:absolute; inset:0;
}
.portrait__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: clamp(16px, 3.5vw, 36px);
  text-align:left;
  color:#fff;
}
.portrait__quote{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height:1.15;
  margin:0 0 .35rem;
  font-style: italic;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.portrait__name{
  display:inline-block;
  font-family:"Montserrat", system-ui, sans-serif;
  font-weight:600;
  letter-spacing:.08em;
  text-transform: none;
  background: rgba(0,0,0,.45);
  padding:.35rem .6rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
}

/* detalhe da marca */
.portrait__name::after{
  content:"";
  display:block;
  height:3px; width:42px; margin:.45rem 0 0;
  background: var(--color1); /* #d2b48c */
  opacity:.9;
  border-radius: 2px;
}

/* responsivo */
@media (max-width: 640px){
  .portrait__caption{ padding: 16px; }
  .portrait__name{ background: rgba(0,0,0,.35); }
}



/* ===== CUIDADOS (página) ===== */


/* ===== CUIDADOS (página) ===== */
.care {
  background: var(--color3); /* nude claro */
  padding: clamp(48px, 7vw, 96px) 0;
}

.care__head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.care__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  margin: 0 0 .4rem;
  color: var(--black);
}

.care__lead {
  color: rgba(0,0,0,.75);
  margin: 0 auto 2rem;
  max-width: 70ch;
}

/* Lista alternada */
.care__list {
  display: grid;
  gap: clamp(22px, 3.5vw, 36px);
  margin: 12px auto 0;
  max-width: 1000px; /* deixa o miolo mais estreito e elegante */
}

.care__item {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: 1fr 1fr; /* padrão: texto | foto */
  align-items: center;
  overflow: hidden;
}

.care--alt {
  grid-template-columns: 1fr 1fr; /* padrão invertido: foto | texto */
}

.care__text {
  padding: clamp(20px, 4vw, 48px);
}

.care__text h3 {
  font-family: "Playfair Display", Georgia, serif;
  margin: 0 0 .5rem;
  color: var(--black);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
}

.care__text p {
  margin: 0;
  color: rgba(0,0,0,.75);
}

/* Mídia quadrada estilo post do Instagram */
.care__media {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
}

.care__media img {
  width: 85%;
  height: 85%;
  object-fit: cover; /* crop bonito, sem distorcer */
}

.care__cta {
  text-align: center;
  margin-top: clamp(28px, 5vw, 44px);
}

.care__cta .btn--primary {
  background: var(--color1);
  color: var(--black);
  border: 1px solid rgba(0,0,0,.1);
}

.care__cta .btn--primary:hover {
  background: var(--black);
  color: var(--color1);
}


/* Espaço extra quando o texto está do lado direito */
.care__item:not(.care--alt) .care__text {
  padding-left: clamp(40px, 5vw, 64px); /* empurra mais para a direita */
}

/* Espaço extra quando o texto está do lado esquerdo (em itens alternados) */
.care__item.care--alt .care__text {
  padding-right: clamp(40px, 5vw, 64px);
}

/* Responsivo */
@media (max-width: 980px) {
  .care__item,
  .care--alt {
    grid-template-columns: 1fr;
  }
  .care__media {
    aspect-ratio: 1 / 1; /* mantém quadrado no mobile */
    max-height: 360px;
  }
}

@media (max-width: 560px) {
  .care__media {
    height: auto;
  }
}
/* Responsivo */
@media (max-width: 980px) {
  /* Empilha em 1 coluna */
  .care__item,
  .care--alt {
    grid-template-columns: 1fr;
  }

  /* Em TODOS os itens no mobile: FOTO em cima, TEXTO embaixo */
  .care__media { order: 0; }
  .care__text  { order: 1; }

  /* Mantém quadrado e controla altura */
  .care__media {
    aspect-ratio: 1 / 1;
    max-height: 360px;
  }

  /* Padding mais leve no mobile (remove empurrões laterais) */
  .care__text {
    padding: clamp(16px, 4vw, 24px);
  }
  .care__item:not(.care--alt) .care__text,
  .care__item.care--alt .care__text {
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
  }
}

@media (max-width: 560px) {
  .care__media { height: auto; }
}





/* ===== FAQ (seção relacionada) ===== */
.faq__grid {
  align-items: start;
}

.faq__media {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.faq__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== CONTATO (página) ===== */
.contact{
  background:#fff;
  padding: clamp(48px, 7vw, 100px) 0;
}

.contact__grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr; /* texto | form */
  gap: clamp(24px, 4vw, 48px);
  align-items:start;
}

.contact__intro{
  max-width: 720px;
}
.contact__title{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height:1.2;
  margin:.25rem 0 .6rem;
  color: var(--black);
}
.contact__rule{
  display:block; width:56px; height:2px; background: var(--color1);
  margin: .6rem 0 1rem;
}
.contact__intro p{
  color: rgba(0,0,0,.75);
  margin: 0 0 1rem;
}
.contact__whats{
  color: var(--black); font-weight:600; text-decoration:none;
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.contact__whats:hover{
  color: var(--color1); border-bottom-color: var(--color1);
}

/* Form */
.contact__formwrap{
  width:100%;
}
.contact__form{
  display:grid; gap:14px;
}

.field{ display:grid; gap:.4rem; }
.field label{
  font-size:.92rem; color:rgba(0,0,0,.75);
}
.field input, .field textarea, .field select{
  width:100%;
  padding:.9rem 1rem;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font:inherit; color: var(--black);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--color1);
  border-color: transparent;
}

/* Select com caret */
.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; }
.select-wrap .select-caret{
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; fill:rgba(0,0,0,.6); pointer-events:none;
}

/* Status de sucesso */
.contact__status{
  display:flex; align-items:center; gap:.6rem;
  padding:.8rem 1rem; border:1px solid rgba(0,0,0,.08);
  background: #f7fff5; border-radius:12px;
  color:#1b5e20;
}
.status-dot{
  width:14px; height:14px; border-radius:50%;
  background:#2ecc71; display:inline-block;
  box-shadow: 0 0 0 3px rgba(46,204,113,.15);
}

.contact__submit{
  justify-self: start;
  background: var(--color1); color: var(--black);
  border:1px solid rgba(0,0,0,.1);
}
.contact__submit:hover{
  background: var(--black); color: var(--color1);
}

/* Responsivo */
@media (max-width: 980px){
  .contact__grid{ grid-template-columns: 1fr; }
  .contact__submit{ justify-self: stretch; }
}

/* ===== SERVIÇOS ===== */
.services{
  background:#fff;
  padding: clamp(48px, 7vw, 96px) 0;
}

.service{
  display:grid;
  grid-template-columns: 1.1fr 1.2fr .7fr; /* texto | foto grande | coluna lateral */
  grid-template-areas: "text main side";
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
  background: var(--color3);                 /* nude claro do projeto */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 28px);
  margin-bottom: clamp(20px, 3.5vw, 36px);
  box-shadow: var(--shadow-soft);
}

/* TEXTO (esquerda) */
.service__text{ grid-area:text; }
.service__title{
  font-family:"Playfair Display", Georgia, serif;
  color: var(--black);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height:1.15;
  margin: 0 0 .4rem;
}
.service__desc{
  color: rgba(0,0,0,.78);
  margin: 0 0 .9rem;
  max-width: 44ch;
}
.hl{ color: var(--color1); } /* destaque sutil com o dourado */

/* FOTO GRANDE (meio) */
.service__media--main{
  grid-area: main;
  aspect-ratio: 16 / 10;       /* retângulo como no modelo */
  border-radius: 18px;
  overflow: hidden;
  background:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.service__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* COLUNA LATERAL (direita): ícone + foto menor */
.service__side{ grid-area: side; display:grid; gap: clamp(12px, 2vw, 18px); }
.service__icon{
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background:#fff;
  display:grid; place-items:center; overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.service__icon img{ width:70%; height:auto; object-fit:contain; }

.service__media--side{
  aspect-ratio: 3 / 4;         /* retângulo vertical como no modelo */
  border-radius: 18px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Botão no padrão do site */
.service .btn--primary{
  background: var(--color1);
  color: var(--black);
  border: 1px solid rgba(0,0,0,.1);
}
.service .btn--primary:hover{
  background: var(--black);
  color: var(--color1);
}

/* Layout padrão (desktop) mantém como está */
.service__media-group {
  display: grid;
  grid-template-columns: 1fr auto; /* principal | coluna lateral */
  gap: 16px;
}

/* ===== MOBILE: layout igual ao mock ===== */
@media (max-width: 640px){
  /* Controle de tamanho no mobile */
  :root {
    --service-mobile-scale: 1.3; /* 1.0 = tamanho atual, >1 = maior, <1 = menor */
  }

  .service{
    grid-template-columns: 1fr calc(120px * var(--service-mobile-scale));
    grid-template-areas:
      "main side"
      "text text";
    gap: calc(12px * var(--service-mobile-scale));
    padding: 16px;
  }

  :root {
  --main-media-width: 100%;   /* largura padrão */
  --main-media-height: auto;  /* altura padrão */
}

.service__media--main {
  grid-area: main;
  width: var(--main-media-width);
  height: var(--main-media-height);
  aspect-ratio: 16 / 10; /* mantém proporção */
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.service__media--main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


  /* COLUNA LATERAL */
  .service__side{
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: calc(12px * var(--service-mobile-scale));
  }

  /* Ícone e foto menor */
  .service__icon,
  .service__media--side{
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    transform: scale(var(--service-mobile-scale));
    transform-origin: center;
  }
}


/* ===== SERVICES INDEX (mosaico) ===== */
.servicesindex{
  background: #e8dabf;
  padding: clamp(40px, 6vw, 90px) 0;
}

/* GRID 3 colunas com o vídeo central ocupando 2 linhas */
.servicesindex__grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr; /* esq | vídeo | dir */
  grid-template-rows: auto auto;
  gap: clamp(14px, 2.4vw, 22px);
  grid-template-areas:
    "leftTop hero rightTop"
    "leftBot hero rightBot";
}

/* Áreas */
.svc-card:nth-of-type(1){ grid-area: leftTop; }
.svc-hero                 { grid-area: hero; }
.svc-card:nth-of-type(2){ grid-area: rightTop; }
.svc-card:nth-of-type(3){ grid-area: leftBot; }
.svc-card:nth-of-type(4){ grid-area: rightBot; }

/* Cards genéricos */
.svc-card{
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 22px);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vw, 12px);
}
.svc-card--light{ background: var(--color3); color: var(--black); }
.svc-card--dark {
  background: var(--black);
  color: var(--color3);
  border-color: rgba(0,0,0,.4);
}

.svc-title{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height:1.2;
  margin:0;
}
.svc-sub{
  margin:0;
  color: rgba(0,0,0,.7);
}
.svc-card--dark .svc-sub{ color: rgba(255,255,255,.85); }

/* Listas de serviços */
.svc-list{
  list-style:none; padding:0; margin:.2rem 0 0; display:grid; gap:.6rem;
}
.svc-list li strong{
  font-weight:600; font-family:"Montserrat", system-ui, sans-serif; display:block;
  color: inherit;
}
.svc-list li span{ display:block; opacity:.9; }

/* Hero (vídeo) */
.svc-hero{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,.06);
  background:#000;
  display:grid;
}
.svc-hero__video{
  width:100%; height:100%; object-fit:cover; aspect-ratio: 3/4; /* vertical elegante */
}
.svc-hero__play{
  position:absolute; inset:auto 0 0 auto;
  width:0; height:0; overflow:hidden; border:0; padding:0; /* decorativo/dispensável */
}

/* Social links */
.svc-social{
  display:grid; gap:.6rem; margin-top:.2rem;
}
.svc-social__link{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .8rem;
  background:#fff; color:var(--black);
  border:1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  width: fit-content;
}
.svc-card--dark .svc-social__link{ background: rgba(255,255,255,.06); color:#fff; border-color:transparent; }
.svc-social__link:hover{ transform: translateY(-1px); }
.svc-social .ico{ width:18px; height:18px; fill: currentColor; }

/* CTA */
.svc-cta .btn--primary{
  background: var(--color1);
  color: var(--black);
  border: 1px solid rgba(0,0,0,.1);
  margin-top: .2rem;
}
.svc-cta .btn--primary:hover{ background: var(--black); color: var(--color1); }

/* ===== Responsivo ===== */
@media (max-width: 1100px){
  .servicesindex__grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "leftTop rightTop"
      "leftBot rightBot";
  }
  .svc-hero__video{ aspect-ratio: 16/9; }
}

@media (max-width: 680px){
  .servicesindex__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "leftTop"
      "leftBot"
      "rightTop"
      "rightBot";
  }
  .svc-hero__video{ aspect-ratio: 4/5; }
}