/* =====================================================================
   Sorria Passos — HOME (novo institucional, mobile-first editorial)
   Complementa styles.css (tokens, .wrap, .eyebrow, .ac, .pill, .btn-zap,
   .sticky, footer). Aqui ficam os componentes novos.
   ===================================================================== */

/* ---------- Header / nav responsiva ---------- */
.hnav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; gap:12px; padding:12px clamp(16px,4vw,40px);
  transition:background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.hnav.on{background:rgba(10,10,10,.9); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.hnav .brand img{height:30px; width:auto; display:block}
.hnav-links{display:none}
.hnav .pill{display:none}
.burger{
  margin-left:auto; width:44px; height:44px; display:grid; place-content:center; gap:5px;
  background:transparent; border:0; cursor:pointer; padding:0;
}
.burger span{display:block; width:24px; height:2px; background:#fff; border-radius:2px}

@media (min-width:860px){
  .burger{display:none}
  .hnav-links{display:flex; gap:clamp(14px,2vw,26px); margin-left:auto; align-items:center}
  .hnav-links a{
    text-decoration:none; color:var(--head); font-size:.9rem; font-weight:600;
    letter-spacing:.01em; white-space:nowrap; transition:color .15s;
  }
  .hnav-links a:hover, .hnav-links a.atual{color:var(--brand-2)}
  .hnav .pill{display:inline-flex; margin-left:18px}
}

/* ---------- Menu overlay (mobile) ---------- */
.menu{
  position:fixed; inset:0; z-index:150; background:var(--bg);
  display:flex; flex-direction:column; padding:16px 20px 26px;
  transform:translateY(-100%); transition:transform .42s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto; visibility:hidden;
}
.menu.open{transform:none; visibility:visible}
.menu-top{display:flex; align-items:center; justify-content:space-between; padding:6px 0 8px}
.menu-top img{height:28px; width:auto}
.menu-close{width:44px; height:44px; display:grid; place-items:center; background:transparent; border:0; color:#fff; cursor:pointer}
.menu-links{display:flex; flex-direction:column; margin-top:10px}
.menu-links a{
  display:flex; align-items:baseline; gap:16px; padding:19px 2px;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--head);
  font-family:var(--font-dp); text-transform:uppercase; font-size:1.9rem; line-height:1; letter-spacing:.02em;
}
.menu-links a .num{font-family:var(--font); font-size:.66rem; font-weight:700; letter-spacing:.14em; color:var(--brand-2)}
.menu-foot{margin-top:auto; padding-top:24px}
.menu-info{color:var(--muted); font-size:.82rem; line-height:1.6; text-align:center; margin:16px 0 0}

/* ---------- Hero editorial ---------- */
.ed-hero{
  position:relative; min-height:80svh; display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; padding:0 20px 40px; isolation:isolate;
}
.ed-hero .bg{position:absolute; inset:0; z-index:-2; background:#0A0A0A center/cover no-repeat}
.ed-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.42) 16%, rgba(10,10,10,.62) 40%, rgba(10,10,10,.85) 70%, rgba(10,10,10,.97) 100%);
}
.ed-eyebrow{font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:16px}
.ed-concept{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.ed-concept .r{height:1px; width:28px; background:rgba(255,255,255,.4); flex:none}
.ed-concept span{font-family:var(--font-ac); font-style:italic; color:#fff; font-size:1.05rem; line-height:1.2}
.ed-h1{
  font-family:var(--font-dp); text-transform:uppercase; color:#fff; font-weight:400;
  font-size:clamp(2.6rem,12vw,5.6rem); line-height:.94; letter-spacing:.01em; margin:0 0 18px; max-width:16ch;
}
.ed-h1 em{font-family:var(--font-ac); font-style:italic; text-transform:none; color:var(--brand-2); font-size:1.02em}
.ed-sub{color:rgba(255,255,255,.85); font-size:1.02rem; line-height:1.55; margin:0 0 26px; max-width:46ch}
.ed-cta{display:flex; flex-wrap:wrap; gap:12px}

@media (min-width:860px){
  .ed-hero{justify-content:center; min-height:92svh; padding:0 clamp(40px,7vw,96px)}
  .ed-hero::after{background:radial-gradient(130% 100% at 30% 40%, transparent 30%, rgba(10,10,10,.5) 100%), linear-gradient(90deg, rgba(10,10,10,.78), transparent 70%)}
  .ed-eyebrow{font-size:.74rem}
  .ed-sub{font-size:1.12rem}
}

/* ---------- Faixa-credo ---------- */
.creed{text-align:center; padding:clamp(60px,10vw,120px) 0}
.creed .r{width:48px; height:1.5px; background:var(--brand); margin:0 auto 24px}
.creed p{font-family:var(--font-ac); font-style:italic; font-size:clamp(1.9rem,5vw,3.2rem); line-height:1.18; color:var(--head); margin:0 auto; max-width:18ch}
.creed p em{color:var(--brand-2); font-style:italic}
.creed .by{display:block; margin-top:18px; font-family:var(--font); font-style:normal; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* ---------- Nossa história ---------- */
.hist .wrap{display:grid; gap:clamp(26px,5vw,56px)}
.hist-media{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; max-height:560px}
.hist-media img{width:100%; height:100%; object-fit:cover}
.hist-body p{margin:0 0 15px}
.hist-quote{
  margin:22px 0 0; padding:18px 22px; border-left:3px solid var(--brand); background:var(--card); border-radius:0 12px 12px 0;
  font-family:var(--font-ac); font-style:italic; font-size:1.3rem; line-height:1.3; color:var(--head);
}
@media (min-width:860px){
  .hist .wrap{grid-template-columns:0.9fr 1.1fr; align-items:center}
}

/* ---------- Diferenciais ---------- */
.difs-grid{display:grid; gap:14px; grid-template-columns:1fr}
.dif{padding:22px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md)}
.dif .ico{width:42px; height:42px; border-radius:11px; background:var(--brand-soft); color:var(--brand-2); display:grid; place-items:center; margin-bottom:14px}
.dif h3{margin:0 0 6px}
.dif p{margin:0; font-size:.94rem; color:var(--body)}
@media (min-width:640px){ .difs-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .difs-grid{grid-template-columns:repeat(3,1fr)} }

/* ---------- Tratamentos (carrossel -> grade) ---------- */
.carousel{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 22px 12px; margin:0; scroll-padding-left:22px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.tcard{
  flex:0 0 80%; scroll-snap-align:start; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .2s, transform .2s;
}
.tcard:hover{border-color:var(--line-2)}
.tcard .thumb{position:relative; aspect-ratio:4/3; overflow:hidden}
.tcard .thumb img{width:100%; height:100%; object-fit:cover; filter:brightness(.82) saturate(.92); transition:transform .5s}
.tcard:hover .thumb img{transform:scale(1.05)}
.tcard .thumb .n{position:absolute; top:12px; left:13px; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85)}
.tcard .body{padding:17px 18px 19px; display:flex; flex-direction:column; flex:1}
.tcard h3{font-family:var(--font-dp); text-transform:uppercase; letter-spacing:.03em; font-weight:400; font-size:1.55rem; color:#fff; margin:0 0 7px}
.tcard p{font-size:.9rem; color:var(--body); line-height:1.45; margin:0 0 14px; flex:1}
.tcard .mais{color:var(--brand-2); font-size:.82rem; font-weight:700}
.swipe-hint{padding:10px 20px 0; color:var(--muted); font-size:.76rem; letter-spacing:.04em}
.trat-note{margin:22px 20px 0; text-align:center; color:var(--body); font-size:.95rem}
.trat-note b{color:var(--head)}

@media (min-width:860px){
  .carousel{display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; margin:0; padding:0}
  .tcard{flex:none}
  .swipe-hint{display:none}
}

/* ---------- Nossa estrutura (carrossel de fotos) ---------- */
.estr-rail{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 22px 14px; scroll-padding-left:22px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.estr-rail::-webkit-scrollbar{display:none}
.estr-card{
  position:relative; flex:0 0 82%; scroll-snap-align:start; margin:0;
  border-radius:var(--r-md); overflow:hidden; aspect-ratio:3/4; border:1px solid var(--line);
}
.estr-card img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease}
.estr-card:hover img{transform:scale(1.04)}
.estr-card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,10,10,.78) 0%, rgba(10,10,10,.1) 38%, transparent 60%)}
.estr-card figcaption{
  position:absolute; left:16px; bottom:14px; z-index:1; color:#fff;
  font-family:var(--font-dp); text-transform:uppercase; letter-spacing:.04em; font-size:1.35rem; line-height:1;
}
.estr-card figcaption::before{content:""; display:inline-block; width:18px; height:2px; background:var(--brand); vertical-align:middle; margin-right:9px}
@media (min-width:860px){
  .estr-rail{padding:4px 40px 16px; scroll-padding-left:40px; gap:14px}
  .estr-card{flex:0 0 32%; aspect-ratio:4/5}
}

/* ---------- Como funciona (etapas) ---------- */
.jsteps{display:grid; gap:12px}
.jstep{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
}
.jstep .num{
  font-family:var(--font-dp); font-size:1.7rem; line-height:1; color:var(--brand-2);
  width:40px; text-align:center; font-weight:400;
}
.jstep h3{margin:0 0 4px}
.jstep p{margin:0; font-size:.92rem; color:var(--body)}
@media (min-width:860px){
  .jsteps{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Tecnologia ---------- */
.tec-grid{display:grid; gap:12px; grid-template-columns:1fr}
.tec-item{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel)}
.tec-item .ico{width:40px; height:40px; border-radius:10px; background:var(--brand-soft); color:var(--brand-2); display:grid; place-items:center; flex:none}
.tec-item b{color:var(--head); display:block; margin-bottom:2px}
.tec-item span{font-size:.9rem; color:var(--body)}
@media (min-width:640px){ .tec-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .tec-grid{grid-template-columns:repeat(3,1fr)} }

/* ---------- Avaliações Google ---------- */
.reviews{background:var(--panel); border-block:1px solid var(--line)}
.rev-top{text-align:center; margin-bottom:26px}
.rev-score{display:flex; align-items:baseline; justify-content:center; gap:12px}
.rev-score b{font-family:var(--font-dp); font-size:4.2rem; line-height:1; color:#fff; font-weight:400}
.rev-stars{color:#FFB80C; font-size:1.25rem; letter-spacing:2px}
.rev-meta{color:var(--body); font-size:.95rem; margin-top:8px}
.rev-meta a{color:var(--brand-2); font-weight:700; text-decoration:none}
.rev-cards{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 20px 10px; margin:0 -20px; scrollbar-width:none}
.rev-cards::-webkit-scrollbar{display:none}
.rcard{flex:0 0 84%; scroll-snap-align:start; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:19px}
.rcard .rs{color:#FFB80C; font-size:.92rem; letter-spacing:2px; margin-bottom:9px}
.rcard p{font-size:.95rem; color:var(--head); line-height:1.5; margin:0 0 14px}
.rcard .who{display:flex; align-items:center; gap:11px}
.rcard .av{width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand-2); display:grid; place-items:center; font-weight:700; font-size:.92rem; flex:none}
.rcard .who b{color:var(--head); font-size:.86rem; display:block; line-height:1.2}
.rcard .who span{color:var(--muted); font-size:.72rem}
@media (min-width:860px){
  .rev-cards{display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; margin:0; padding:0}
  .rcard{flex:none}
}

/* ---------- Equipe ---------- */
.team{display:grid; gap:18px; grid-template-columns:1fr}
.member{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.member .ph{aspect-ratio:1/1; overflow:hidden; background:#1a1a1c}
.member .ph img{width:100%; height:100%; object-fit:cover}
.member .m-bio{padding:20px 22px 24px}
.member .m-bio b{font-size:1.15rem; color:var(--ink)}
.member .cro{display:block; color:var(--brand-2); font-size:.8rem; font-weight:700; letter-spacing:.04em; margin:4px 0 10px}
.member .m-bio p{margin:0; font-size:.93rem; color:var(--body)}
.team-note{margin-top:20px; padding:18px 22px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); color:var(--body); font-size:.95rem; text-align:center}
.team-note b{color:var(--head)}
@media (min-width:760px){ .team{grid-template-columns:1fr 1fr} }
/* CTA final reaproveita o bloco .final / .final-cta do styles.css */

/* ---------- Seções CLARAS (quebram o preto, dão ritmo) ---------- */
.sec-light{ background:var(--cream); color:#4b463d; }
.sec-light .eyebrow{ color:var(--brand); }
.sec-light .eyebrow::before{ background:var(--brand); }
.sec-light h2, .sec-light h3{ color:var(--ink-dark); }
.sec-light .ac{ color:var(--brand); }
.sec-light .lede{ color:#5a554b; }
.sec-light p{ color:#4b463d; }
.sec-light strong{ color:var(--ink-dark); }

/* Nossa história em claro */
.sec-light .hist-quote{ background:#fff; color:var(--ink-dark); border-left-color:var(--brand); box-shadow:0 10px 30px rgba(20,18,16,.06); }

/* Como funciona em claro */
.sec-light .jstep{ background:#fff; border-color:#e7e0d4; }
.sec-light .jstep h3{ color:var(--ink-dark); }
.sec-light .jstep p{ color:#5a554b; }

/* Tecnologia em claro */
.sec-light .tec-item{ background:#fff; border-color:#e7e0d4; }
.sec-light .tec-item b{ color:var(--ink-dark); }
.sec-light .tec-item span{ color:#5a554b; }

/* Avaliações em claro (sobrepõe o .reviews escuro) */
.sec-light.reviews{ background:var(--cream); border-block:1px solid #e7e0d4; }
.sec-light .rcard{ background:#fff; border-color:#e7e0d4; }
.sec-light .rcard p{ color:var(--ink-dark); }
.sec-light .rcard .who b{ color:var(--ink-dark); }
.sec-light .rev-score b{ color:var(--ink-dark); }
.sec-light .rev-meta{ color:#5a554b; }