/* =========================================================
   STUDIO V PILATES — folha de estilo única
   Baseada no sistema visual do repositório original:
   assets/css/utils/colors.css, tipography.css,
   components/primary-button.css, secondary-button.css e
   os patterns em assets/images/.

   IDENTIDADE PRESERVADA
   - Paleta: #1C1D1D, #70D0B9, #5CB1C6, #595959
   - Gradiente menta→azul (o mesmo do logo.svg)
   - Poppins (títulos) + Roboto (corpo), mesmos pesos
   - Botão pílula 100px com deslize de gradiente no hover
   - Botão secundário: borda 1px, pílula, sombra e lift
   - home-bg.png como marca d'água no hero e no CTA final
   - pattern.svg como faixa divisória (165px)
   - pattern-y.svg / pattern-y-r.svg flanqueando o CTA final
   - Ritmo de seções: marca d'água → azul → preto → branco
   - Sobretítulos com letter-spacing .2em
   - Cantos de imagem em 8px

   AJUSTES DE CONTRASTE (público 60+, ver LEIA-ME)
   - Texto branco sobre a seção azul dava 2.45:1. Trocado
     pelo preto da própria marca: 6.89:1.
   - Texto branco sobre o gradiente dava 1.84:1. O gradiente
     segue idêntico; o texto do botão virou o preto da marca:
     9.18:1 no menta e 6.89:1 no azul.
   - --color-p (3.34:1) trocado por #444: 9.74:1.
   ========================================================= */

:root{
  /* --- paleta original (colors.css) --- */
  --color-1: #1C1D1D;
  --color-2: #70D0B9;
  --color-3: #FFFFFF;
  --color-4: #5CB1C6;
  --color-5: #595959;
  --gradient:       linear-gradient(90deg, var(--color-2), var(--color-4));
  --gradient-hover: linear-gradient(90deg, var(--color-4), var(--color-2));

  /* --- cores do pattern.svg --- */
  --pat-menta: #83D4AC;
  --pat-azul:  #63AEC1;
  --pat-slate: #293337;

  /* --- derivados acessíveis, o mais claros possível ---
     --display: só para texto GRANDE (>=24px bold). 3.55:1, mínimo WCAG
       para texto grande. Mantém o turquesa claro do H1 original.
     --marca / --marca-2: para texto PEQUENO e links. 4.79:1 e 4.56:1.
     O gradiente original NÃO é escurecido — ver .btn--wa. */
  --display-menta: #2E9880;
  --marca:         #23806D;
  --marca-2:       #278095;
  /* Gradiente dos botões: mesma família turquesa da marca, apenas
     profunda o bastante para aceitar TEXTO BRANCO. Com o rótulo em
     20px/700 (texto grande pela WCAG), o limiar é 3:1 — aqui dá
     3.55:1 e 4.56:1. Nada de preto no botão. */
  --grad-btn: linear-gradient(90deg, var(--color-2), var(--color-4), var(--color-2));

  /* --- superfícies e texto --- */
  --canvas:     var(--color-3);
  --canvas-alt: #EEF6F5;
  --ink:        var(--color-1);
  --ink-soft:   #444444;
  --linha:      #DCE8E6;

  /* --- tipografia original (tipography.css) --- */
  --display: "Poppins", system-ui, sans-serif;
  --corpo:   "Roboto", system-ui, -apple-system, sans-serif;

  --t-h1:   clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  --t-h2:   clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --t-h3:   clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --t-lead: clamp(1.18rem, 1.05rem + 0.5vw, 1.4rem);
  --t-base: clamp(1.125rem, 1.05rem + 0.25vw, 1.2rem);

  --gap-sec:  clamp(5rem, 3rem + 7vw, 9rem);
  --wrap:     1160px;
  --raio:     8px;      /* como .pilates-section__img */
  --raio-btn: 100px;    /* pílula original */
  --toque:    52px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:104px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--corpo); font-size:var(--t-base); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.18; margin:0 0 .5em; color:inherit; }
h1{ font-size:var(--t-h1); line-height:1.125; max-width:21ch; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); }
p{ margin:0 0 1em; }

a{ color:var(--marca-2); text-underline-offset:.22em; text-decoration-thickness:.08em; }
a:hover{ color:var(--marca); }

:focus-visible{ outline:3px solid var(--marca-2); outline-offset:3px; border-radius:4px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--color-1); color:#fff; padding:1rem 1.5rem; text-decoration:none; }
.skip:focus{ left:0; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--estreito{ width:min(100% - 2.5rem, 760px); }

.h-min{ font-family:var(--display); font-size:.95rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; color:var(--color-5); margin:0 0 .7rem; }

/* sobretítulo — letter-spacing .2em como no original */
.eyebrow{ font-family:var(--display); font-size:.85rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em; color:var(--marca);
  margin:0 0 1.1rem; display:flex; align-items:center; gap:.85rem; }
.eyebrow::before{ content:""; width:34px; height:3px; border-radius:2px;
  background:var(--gradient); flex:none; }
.eyebrow--inv{ color:var(--color-2); }
.eyebrow--esc{ color:var(--pat-slate); }
.eyebrow--esc::before{ background:var(--color-3); }
.eyebrow--esc{ color:var(--pat-slate); }

/* =========================================================
   BOTÕES — primary-button.css e secondary-button.css
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:var(--toque); padding:.85rem 2rem;
  font-family:var(--display); font-size:1.12rem; font-weight:700; line-height:1.2;
  border:2px solid transparent; border-radius:var(--raio-btn);
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background-position 300ms ease-in-out, box-shadow 300ms cubic-bezier(.23,1,.32,1),
             transform 300ms cubic-bezier(.23,1,.32,1), background-color .15s ease, border-color .15s ease;
}
.btn--g{ min-height:62px; padding:1rem 2.6rem; font-size:1.25rem; }

/* Gradiente ORIGINAL preservado. O texto é o preto da marca, não branco:
   branco sobre o gradiente dá 1.84:1; o preto dá 9.18:1 e 6.89:1. */
.btn--wa{ color:#fff; background-image:var(--grad-btn);
  background-size:200%; background-position:left;
  box-shadow:0 10px 24px -12px rgba(38,124,140,.75); }
.btn--wa:hover{ color:#fff; background-position:right;
  box-shadow:0 14px 28px -12px rgba(38,124,140,.85); transform:translateY(-1px); }
.btn--wa:active{ transform:none; }

.btn--ghost{ background:transparent; color:var(--marca-2); border:2px solid var(--marca-2); }
.btn--ghost:hover{ color:var(--marca-2); box-shadow:rgba(0,0,0,.25) 0 8px 15px; transform:translateY(-2px); }

.ico-wa{ width:24px; height:24px; fill:currentColor; flex:none; }

/* =========================================================
   HEADER
   ========================================================= */
.hd{ position:sticky; top:0; z-index:80; background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--linha); backdrop-filter:saturate(1.1) blur(6px); }
.hd__in{ display:flex; align-items:center; gap:1.5rem; min-height:80px; }
.hd__logo{ flex:none; display:flex; align-items:center; }
.hd__logo img{ height:44px; width:auto; }
.hd__nav{ display:flex; gap:1.6rem; margin-left:auto; }
.hd__nav a{ font-family:var(--display); color:var(--ink); text-decoration:none;
  font-weight:500; font-size:1.02rem; padding:.5rem 0;
  border-bottom:2px solid transparent; transition:.3s; }
.hd__nav a:hover{ color:var(--marca); border-bottom-color:var(--color-4); }
.hd__cta{ flex:none; }

/* botão hambúrguer no estilo do header.css original */
.hd__burger{ display:none; width:var(--toque); height:var(--toque); flex:none;
  background:rgba(92,177,198,.2); border:none; border-radius:var(--raio); cursor:pointer;
  padding:0; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.hd__burger span{ display:block; width:22px; height:2px; border-radius:3px;
  background:var(--marca-2); transition:.3s; }

.menu-mob{ display:none; }
.menu-mob[data-aberto="1"]{ display:flex; flex-direction:column; background:var(--canvas);
  border-top:1px solid var(--linha); border-radius:0 0 20px 20px;
  box-shadow:0 4px 2px -2px rgba(0,0,0,.2); padding:.5rem 1.25rem 1.25rem; }
.menu-mob a{ font-family:var(--display); color:var(--ink); text-decoration:none; font-weight:500;
  padding:.95rem .25rem; border-bottom:1px solid var(--linha);
  min-height:var(--toque); display:flex; align-items:center; justify-content:center; }
.menu-mob a:last-child{ border-bottom:none; }

/* =========================================================
   HERO — marca d'água home-bg.png, como .intro-section-bg
   ========================================================= */
.hero{
  background-color:var(--color-3);
  background-image:image-set(url("assets/images/home-bg.webp") type("image/webp"),
                   url("assets/images/home-bg.png") type("image/png"));
  background-repeat:no-repeat; background-position:center; background-size:cover;
  padding:clamp(3.5rem,2rem + 5vw,7rem) 0 clamp(4rem,2.5rem + 5vw,7rem);
}
.hero__in{ display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center; }
.hero h1{ margin-bottom:.5em; }
.hero h1 em{ font-style:normal; color:var(--color-2); }
.lead{ font-size:var(--t-lead); color:var(--ink-soft); max-width:34em; margin-bottom:2rem; }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; }

.hero__img{ margin:0; border-radius:var(--raio); overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(28,29,29,.45); }
.hero__img img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

.selos{ list-style:none; margin:0; padding:1.6rem 0 0;
  border-top:3px solid transparent; border-image:var(--gradient) 1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.selos strong{ display:block; font-family:var(--display); font-weight:600;
  font-size:1.24rem; color:var(--color-1); line-height:1.25; }
.selos span{ display:block; font-size:.98rem; color:var(--ink-soft); }

/* =========================================================
   SEÇÕES — ritmo do site original
   ========================================================= */
.sec{ padding:var(--gap-sec) 0; }
.sec--alt{ background:var(--canvas-alt); }

/* seção azul cheia, como .pilates-section-bg.bg-4 */
.sec--azul{ background:var(--color-4); color:var(--color-1); }
.sec--azul .sec__sub, .sec__sub--esc,

.sec--azul p, .sec--azul h2{ color:var(--linha); }

/* seção preta cheia, como .beneficios-section-bg.bg-1 */
.sec--dark{ background:var(--color-1); color:#fff; }
.sec--dark h2, .sec--dark h3{ color:#fff; }

.sec__t{ margin-bottom:.45em; max-width:18ch; }
.sec--dark .sec__t{ max-width:22ch; }
.sec__sub{ font-size:var(--t-lead); color:var(--ink-soft); max-width:56ch; margin-bottom:2.75rem; }
.sec__link{ margin-top:2.25rem; font-family:var(--display); font-weight:500; font-size:1.08rem; }
.sec--azul .sec__link a{ color:var(--color-1); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,1.5rem + 4vw,5rem); align-items:start; }
.grid-2--onde{ align-items:stretch; }
.sec--azul .grid-2{ align-items:stretch; }

/* =========================================================
   FAIXA DE PATTERN — o motivo da marca, como .pattern
   ========================================================= */
.pattern{
  height:165px; width:100%;
  background:url("assets/images/pattern.svg") repeat bottom;
  background-size:1440px auto;
}

/* ---------- faixa de diferencial (logo abaixo do hero) ---------- */
.dif{ background:var(--canvas-alt); padding:clamp(2.75rem,2rem + 2vw,4rem) 0; }
.dif__t{ font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem); margin-bottom:1.75rem; }
.dif__pts{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem 2.5rem; }
.dif__pts li{ padding-top:1.1rem; border-top:3px solid transparent; border-image:var(--gradient) 1; }
.dif__pts strong{ display:block; font-family:var(--display); font-weight:600;
  font-size:1.1rem; line-height:1.3; margin-bottom:.3rem; }
.dif__pts span{ color:var(--ink-soft); font-size:1.02rem; line-height:1.5; }
.dif__nota{ margin:1.9rem 0 0; padding-top:1.6rem; border-top:1px solid var(--linha);
  font-size:1.06rem; color:var(--ink-soft); max-width:78ch; }
.dif__nota::first-line{ font-weight:500; }

/* ---------- sinais: grade de cards (substitui o antigo checklist) ---------- */
.sinais{ list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.sinal{ background:#fff; border-radius:var(--raio); padding:1.6rem 1.5rem 1.7rem;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 2px 4px rgba(28,29,29,.06), 0 16px 34px -22px rgba(28,29,29,.45);
  transition:transform 300ms cubic-bezier(.23,1,.32,1), box-shadow 300ms ease; }
.sinal::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--gradient); }
.sinal:hover{ transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(28,29,29,.07), 0 24px 44px -22px rgba(28,29,29,.55); }
.sinal__tag{ display:inline-block; align-self:flex-start;
  font-family:var(--display); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--marca-2);
  background:var(--canvas-alt); border-radius:100px; padding:.35rem .8rem; margin-bottom:1rem; }
.sinal h3{ font-size:1.13rem; margin-bottom:.4em; line-height:1.25; }
.sinal p{ color:var(--ink-soft) !important; font-size:1rem; line-height:1.5; margin:0; }

/* faixa de autoridade em dor */
.autoridade{ margin-top:1.75rem; background:var(--color-1); color:#fff;
  border-radius:var(--raio); padding:2rem 2.25rem;
  position:relative; overflow:hidden; }
.autoridade::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--gradient); }
.autoridade__t{ font-family:var(--display); font-weight:600;
  font-size:clamp(1.2rem,1rem + .9vw,1.5rem); color:var(--color-2);
  line-height:1.3; margin:0 0 .75rem; max-width:34ch; }
.autoridade p{ color:rgba(255,255,255,.86) !important; font-size:1.05rem;
  line-height:1.6; margin:0; max-width:70ch; }
.autoridade__pts{ list-style:none; margin:0 0 1.75rem; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1rem 2.25rem; }
.autoridade__pts li{ position:relative; padding-left:1.9rem;
  color:rgba(255,255,255,.84); font-size:1.03rem; line-height:1.5; }
.autoridade__pts li::before{ content:""; position:absolute; left:0; top:.45rem;
  width:15px; height:8px; border-left:3px solid var(--color-2);
  border-bottom:3px solid var(--color-2); transform:rotate(-45deg); }
.autoridade__pts strong{ color:#fff; font-family:var(--display); font-weight:600; }
.autoridade .btn--wa{ background-image:none; background-color:var(--color-2); color:var(--color-1); }
.autoridade .btn--wa:hover{ background-color:var(--color-4); color:var(--color-1); }

.passos__zap{ margin:1rem 0 0; font-size:1rem; color:rgba(255,255,255,.7) !important; }

/* faixa "procurando para outra pessoa" */
.faixa-fam{ margin-top:1.75rem; background:#fff; border-radius:var(--raio);
  padding:1.9rem 2rem; display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
  position:relative; overflow:hidden;
  box-shadow:0 2px 4px rgba(28,29,29,.06), 0 16px 34px -22px rgba(28,29,29,.45); }
.faixa-fam::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--gradient); }
.faixa-fam__txt{ flex:1 1 380px; }
.faixa-fam h3{ font-size:1.2rem; margin-bottom:.35em; }
.faixa-fam p{ color:var(--ink-soft) !important; font-size:1.03rem; margin:0; max-width:60ch; }
.faixa-fam .btn{ flex:none; }

/* ---------- benefícios: grade de 3 colunas ---------- */
.benef{ list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem 2.75rem; }
.benef li{ padding-top:1.5rem; border-top:3px solid transparent; border-image:var(--gradient) 1; }
.benef img{ width:48px; height:48px; margin-bottom:1rem; }
.benef h3{ font-size:1.18rem; margin-bottom:.35em; }
.benef p{ color:var(--ink-soft); font-size:1.03rem; line-height:1.55; margin:0; }

/* ---------- passos (seção preta) ---------- */
.passos{ list-style:none; margin:2rem 0 2.5rem; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.passos li{ border-top:3px solid transparent; border-image:var(--gradient) 1; padding-top:1.5rem; }
.passos__n{ display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--gradient); color:var(--color-1);
  font-family:var(--display); font-size:1.3rem; font-weight:600; margin-bottom:1rem; }
.passos h3{ margin-bottom:.4em; }
.passos p{ color:rgba(255,255,255,.88); font-size:1.05rem; margin:0; }
.passos__nota{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.22rem,1rem + 1vw,1.6rem); color:var(--color-2);
  max-width:26ch; margin-bottom:2.25rem; line-height:1.4; }


/* ---------- carrossel do studio ----------
   Sem rotação automática: o público inclui pessoas que leem e
   navegam devagar, e slide que troca sozinho é hostil. Avança
   por botão, por arrasto e por teclado. */
.carrossel{ position:relative; margin:2.5rem 0 0; }
.carrossel__trilho{
  list-style:none; margin:0; padding:0 0 .5rem;
  display:flex; gap:1.25rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.carrossel__trilho::-webkit-scrollbar{ display:none; }
.carrossel__slide{
  flex:0 0 78%; scroll-snap-align:center;
  border-radius:var(--raio); overflow:hidden; background:var(--canvas-alt);
  box-shadow:0 4px 10px rgba(28,29,29,.06), 0 26px 50px -30px rgba(28,29,29,.5);
}
.carrossel__slide img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

.carrossel__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:58px; height:58px; border-radius:50%; cursor:pointer;
  border:1px solid var(--linha); background:rgba(255,255,255,.96);
  color:var(--marca-2); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -6px rgba(28,29,29,.35);
  transition:background-color .2s ease, transform .2s ease;
}
.carrossel__nav svg{ width:26px; height:26px; }
.carrossel__nav:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.carrossel__nav[disabled]{ opacity:.35; cursor:default; transform:translateY(-50%); }
.carrossel__nav--ant{ left:-14px; }
.carrossel__nav--prox{ right:-14px; }

.carrossel__pontos{ display:flex; justify-content:center; gap:.6rem; margin-top:1.5rem; }
.carrossel__pontos button{
  width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.carrossel__pontos button::before{
  content:""; width:11px; height:11px; border-radius:50%;
  background:var(--linha); transition:background-color .2s ease, width .2s ease;
}
.carrossel__pontos button[aria-selected="true"]::before{
  width:34px; border-radius:6px; background:var(--gradient);
}

/* faixa com o que antes era legenda sobre a foto */
.espaco-pts{ list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem 2.5rem; }
.espaco-pts li{ padding-top:1.25rem; border-top:3px solid transparent; border-image:var(--gradient) 1; }
.espaco-pts strong{ display:block; font-family:var(--display); font-weight:600;
  font-size:1.12rem; margin-bottom:.25rem; }
.espaco-pts span{ color:var(--ink-soft); font-size:1.03rem; line-height:1.5; }

.equipe-cta{ margin:2rem 0 0; }

/* ---------- equipe ---------- */
.equipe{ list-style:none; margin:2rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; }
.equipe__c{ background:#fff; border-radius:var(--raio); overflow:hidden;
  box-shadow:0 2px 4px rgba(28,29,29,.04), 0 14px 32px -20px rgba(28,29,29,.3);
  display:flex; flex-direction:column; }
.equipe__c > picture{ display:block; }
.equipe__c > h3, .equipe__c > .equipe__reg{ padding-inline:1.9rem; }
.equipe__c > h3{ margin-top:1.6rem; }
.equipe__c > .equipe__form{ padding:0 1.9rem; margin-bottom:1rem !important; }
.equipe__c > .equipe__form:last-child{ padding-bottom:1.9rem; margin-bottom:0 !important; }

.equipe__c img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center; }

.equipe__c h3{ margin-bottom:.25em; font-size:1.32rem; }
.equipe__reg{ font-family:var(--display); font-size:.98rem; font-weight:600;
  color:var(--marca); margin-bottom:.5rem; }
.equipe__crefito{ display:block; font-family:var(--corpo); font-weight:400;
  font-size:.95rem; color:var(--ink-soft); margin-top:.2rem; letter-spacing:.02em; }
.equipe__c p{ color:var(--ink-soft); font-size:1.02rem; margin:0; }
.equipe__form{ margin-top:.5rem !important; font-size:1rem !important; line-height:1.55; }


/* ---------- modalidades ---------- */
.mods{ list-style:none; margin:2rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.mod{ background:#fff; border-radius:var(--raio); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 2px 4px rgba(28,29,29,.04), 0 12px 28px -18px rgba(28,29,29,.28);
  transition:transform 300ms cubic-bezier(.23,1,.32,1), box-shadow 300ms ease; }
.mod:hover{ transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(28,29,29,.05), 0 20px 40px -20px rgba(28,29,29,.38); }
.mod picture{ display:block; }
.mod img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.mod__txt{ padding:1.5rem 1.6rem 1.75rem; flex:1;
  border-top:3px solid transparent; border-image:var(--gradient) 1; border-left:0; border-right:0; border-bottom:0; }
.mod__txt h3{ font-size:1.22rem; margin-bottom:.4em; }
.mod__txt p{ color:var(--ink-soft); font-size:1.03rem; margin:0; }

/* ---------- outros serviços ---------- */
.outros{ list-style:none; margin:2rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.outros li{ background:var(--canvas-alt); border-radius:var(--raio); padding:1.6rem 1.75rem;
  position:relative; overflow:hidden; }
.outros li::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--gradient); }
.outros h3{ font-size:1.16rem; margin-bottom:.35em; }
.outros p{ color:var(--ink-soft); font-size:1.03rem; margin:0; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--linha); }
.faq details{ border-bottom:1px solid var(--linha); }
.faq summary{ list-style:none; cursor:pointer; position:relative;
  font-family:var(--display); font-weight:500; font-size:1.12rem;
  padding:1.35rem 3rem 1.35rem 0; min-height:var(--toque); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:.6rem; top:1.75rem;
  width:14px; height:14px;
  border-right:3px solid var(--marca); border-bottom:3px solid var(--marca);
  transform:rotate(45deg); transition:.3s; }
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.95rem; }
.faq details p{ margin:0 0 1.5rem; color:var(--ink-soft); max-width:62ch; }

/* ---------- onde fica ---------- */
.ender{ font-style:normal; margin-bottom:2rem; }
.ender p{ margin-bottom:.75rem; }
.horarios{ border-collapse:collapse; width:100%; max-width:400px; margin-bottom:1rem; }
.horarios th, .horarios td{ text-align:left; padding:.7rem 0;
  border-bottom:1px solid var(--linha); font-weight:400; }
.horarios th{ font-family:var(--display); font-weight:500; }
.horarios td{ text-align:right; color:var(--ink-soft); }

.mapa{ min-height:380px; border-radius:var(--raio); overflow:hidden;
  background:var(--canvas-alt); display:flex; }
.mapa iframe{ width:100%; height:100%; min-height:380px; border:0; }
.mapa__btn{ width:100%; border:2px dashed var(--color-4); background:var(--canvas-alt);
  border-radius:var(--raio); cursor:pointer; font-family:var(--corpo);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; padding:2rem; }
.mapa__btn span{ font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--marca); }
.mapa__btn small{ font-size:1rem; color:var(--ink-soft); }
.mapa__btn:hover{ background:#E2F0EE; }

/* =========================================================
   CTA FINAL — marca d'água + patterns laterais,
   como .cta-section-bg de espaco/cta.css
   ========================================================= */
.final{
  /* camadas, de cima para baixo: véu branco -> patterns -> marca d'água.
     O véu rebaixa os patterns a textura de marca em vez de confete. */
  background:
    linear-gradient(rgba(255,255,255,.66), rgba(255,255,255,.66)),
    url("assets/images/pattern-y.svg")   left center / 118px auto no-repeat,
    url("assets/images/pattern-y-r.svg") right center / 134px auto no-repeat,
    image-set(url("assets/images/home-bg.webp") type("image/webp"),
              url("assets/images/home-bg.png")  type("image/png")) center / cover no-repeat;
  background-color:var(--color-3);
  padding:clamp(5rem,3rem + 5vw,7.5rem) 0; min-height:560px;
  display:flex; align-items:center; text-align:center; color:var(--color-1);
}
.final h2{ color:var(--color-1); margin-inline:auto; max-width:25ch; }
.final p{ font-size:var(--t-lead); color:var(--ink-soft);
  max-width:48ch; margin-inline:auto; margin-bottom:2.25rem; }
.final .btn{ max-width:500px; width:100%; }
.final__alt{ font-size:1.05rem; margin:1.75rem 0 0; color:var(--ink-soft); }
.final__alt a{ color:var(--marca); font-weight:500; }

/* ---------- rodapé ---------- */
.ft{ background:var(--color-1); color:#fff; padding:4rem 0 2rem; }
.ft__in{ display:grid; grid-template-columns:auto repeat(3,1fr); gap:2.5rem; align-items:start; }
.ft__logo{ width:160px; }
.ft .h-min{ color:var(--color-2); }
.ft p{ font-size:1.03rem; color:rgba(255,255,255,.82); }
.ft a{ color:#fff; transition:.3s; }
.ft a:hover{ color:var(--color-2); }
.ft__reg{ font-size:.92rem !important; color:rgba(255,255,255,.6) !important; margin-top:1.25rem; }
.ft__cp{ text-align:center; font-size:.95rem; color:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.16); margin:3rem 0 0; padding-top:1.75rem; }

/* ---------- prova social ---------- */
.depos{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.depo{ background:#fff; border-radius:var(--raio); padding:2rem 2rem 1.9rem;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  box-shadow:0 2px 4px rgba(28,29,29,.04), 0 14px 32px -20px rgba(28,29,29,.3); }
.depo::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--gradient); }
.depo__st{ width:96px; height:auto; margin-bottom:1.1rem; }
.depo blockquote{ margin:0 0 1.4rem; font-size:1.06rem; line-height:1.6; flex:1; }
.depo blockquote::before{ content:"“"; }
.depo blockquote::after{ content:"”"; }
.depo cite{ font-family:var(--display); font-style:normal; font-weight:600; font-size:1.02rem; }
.depo cite span{ display:block; font-family:var(--corpo); font-weight:400;
  font-size:.95rem; color:var(--ink-soft); }

/* ---------- barra fixa mobile ---------- */
.barra{ display:none; }

/* =========================================================
   RESPONSIVO — breakpoint 1200px como no original
   ========================================================= */
@media (max-width:1200px){
  .hd__nav{ display:none; }
  .hd__burger{ display:flex; margin-left:auto; }
  .hd__cta{ display:none; }
  .hero__in{ grid-template-columns:1fr; }
  .hero__img{ order:-1; }
  .hero__img img{ aspect-ratio:16/10; }
  h1{ max-width:none; }
  .grid-2{ grid-template-columns:1fr; }
  .passos{ grid-template-columns:repeat(2,1fr); }
  .galeria, .equipe, .outros, .depos{ grid-template-columns:repeat(2,1fr); }
    .ft__in{ grid-template-columns:1fr 1fr; }
  .pattern{ height:120px; }
  /* patterns laterais saem no mobile, como no original */
  .final{ background:image-set(url("assets/images/home-bg.webp") type("image/webp"),
              url("assets/images/home-bg.png") type("image/png")) no-repeat center;
  background-size:cover; }
}

@media (max-width:640px){
  :root{ --gap-sec:clamp(3.25rem,2rem + 6vw,4.5rem); }
  html{ scroll-padding-top:88px; }
  body{ padding-bottom:84px; }

  .hd__in{ min-height:68px; }
  .hd__logo img{ height:36px; }

  .hero__acoes{ flex-direction:column; align-items:stretch; }
  .hero__acoes .btn{ width:100%; }
  .selos{ grid-template-columns:1fr; gap:.9rem; }
  .selos li{ display:flex; gap:.5rem; align-items:baseline; }
  .selos strong{ font-size:1.08rem; }

  .passos, .equipe, .outros, .depos, .mods, .benef, .espaco-pts, .dif__pts{ grid-template-columns:1fr; }

  .equipe-cta .btn{ width:100%; }
  .carrossel__slide{ flex-basis:92%; }
  .carrossel__nav{ width:52px; height:52px; }
  .sinais{ grid-template-columns:1fr; gap:1rem; }
  .faixa-fam{ padding:1.6rem; }
  .autoridade{ padding:1.6rem; }
  .autoridade__pts{ grid-template-columns:1fr; gap:.9rem; }
  .autoridade .btn{ width:100%; }
  .faixa-fam .btn{ width:100%; }
  .galeria{ grid-template-columns:1fr; grid-auto-rows:230px; }
  .galeria__gd{ grid-column:auto; grid-row:span 1; }
  .galeria__gd p{ font-size:1.02rem; padding:3rem 1.25rem 1.1rem; }
  .ft__in{ grid-template-columns:1fr; gap:2rem; }
  .sec__t{ max-width:none; }
  .mapa, .mapa iframe{ min-height:300px; }
  .pattern{ height:90px; background-size:900px auto; }

  .barra{ display:flex; gap:.6rem; position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:.7rem .85rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.98); border-top:1px solid var(--linha); }
  .barra__wa{ flex:1; display:flex; align-items:center; justify-content:center; gap:.55rem;
    min-height:56px; border-radius:var(--raio-btn);
    background-image:var(--grad-btn); background-size:200%; background-position:left;
    color:#fff; font-family:var(--display); font-weight:700;
    font-size:1.1rem; text-decoration:none; }
  /* botão único: uma barra, uma ação. O telefone segue acessível
     na seção "Onde fica" e no CTA final. */
}

@media print{ .hd, .barra, .mapa, .pattern{ display:none; } }


/* =========================================================
   AJUSTES DE UX MOBILE
   Auditoria em 390px apontou: links de texto com altura de
   19–24px (mínimo recomendado 44px), tipografia auxiliar
   abaixo de 16px e página muito longa. Corrigido abaixo.
   ========================================================= */
@media (max-width:640px){

  /* --- alvos de toque: todo link de texto vira área de 44px --- */
  .sec__link a,
  .ender a,
  .final__alt a,
  .ft__col a,
  .depo cite a{
    display:inline-flex; align-items:center; min-height:44px;
    padding-block:.35rem;
  }
  .ft__col p{ display:flex; flex-direction:column; gap:.15rem; }
  .hd__logo{ min-height:48px; align-items:center; }
  .horarios th, .horarios td{ padding:.95rem 0; }

  /* --- tipografia auxiliar: nada abaixo de 16px --- */
  .eyebrow, .h-min{ font-size:1rem; letter-spacing:.14em; }
  .selos span{ font-size:1rem; }
  .depo cite span{ font-size:1rem; }
  .sinal__tag{ font-size:1rem; letter-spacing:.08em; padding:.35rem .8rem; }
  .mapa__btn small{ font-size:1rem; }
  .ft__reg{ font-size:1rem !important; }
  .equipe__form{ font-size:1.02rem !important; }
  .equipe__reg{ font-size:1.02rem; }
  .ft__cp{ font-size:1rem; }

  /* --- reduz a altura da página: duas colunas onde cabe --- */
  /* coluna única, mas com o card compacto: a etiqueta fica na
     mesma linha do título e a descrição ocupa a largura toda.
     Mantém a leitura confortável sem alongar demais a página. */
  .sinais{ grid-template-columns:1fr; gap:.85rem; }
  .sinal{ display:grid; grid-template-columns:auto 1fr;
    align-items:center; gap:.55rem .9rem; padding:1.15rem 1.25rem 1.3rem; }
  .sinal__tag{ grid-column:1; margin:0; align-self:center; }
  .sinal h3{ grid-column:2; margin:0; font-size:1.1rem; }
  .sinal p{ grid-column:1 / -1; font-size:1.05rem; }
  .benef{ grid-template-columns:repeat(2,1fr); gap:1.75rem 1.25rem; }
  .benef h3{ font-size:1.08rem; }
  .benef p{ font-size:1rem; }
  .mod img{ aspect-ratio:16/9; }

  /* --- o menu aberto não pode empurrar o conteúdo para fora --- */
  .menu-mob[data-aberto="1"]{ max-height:calc(100vh - 68px); overflow-y:auto; }
}

/* telas muito estreitas: volta para coluna única */
@media (max-width:379px){
  .benef{ grid-template-columns:1fr; }
  .sinal{ grid-template-columns:1fr; }
  .sinal h3{ grid-column:1; }
}