/* =========================================================
   Deferrone Home Care — estilo único do site
   Paleta tirada do material do cliente (cartaz/vídeo):
   azul-marinho #0E2E72, azul royal #0366BB, dourado #F5A215
   ========================================================= */

:root{
  --azul-900:#08214F;
  --azul-800:#0E2E72;
  --azul-700:#123C8E;
  --azul-600:#0F62AE;
  --azul-400:#4E9BCE;
  --azul-200:#A9D2EC;
  --azul-100:#DCEDF8;
  --azul-050:#EFF6FC;

  --creme:#FBF8F2;
  --areia:#EADFC9;
  --dourado:#F5A215;
  --dourado-esc:#C97F09;

  --tinta:#16232E;
  --tinta-2:#3E4F5C;

  --wa:#1FA855;
  --wa-esc:#158043;

  --branco:#fff;
  --borda:#E4EAF0;

  --r-g:22px;
  --r-m:14px;
  --r-p:10px;

  --sombra:0 1px 2px rgba(8,33,79,.05), 0 10px 30px rgba(8,33,79,.07);
  --sombra-f:0 2px 6px rgba(8,33,79,.08), 0 18px 44px rgba(8,33,79,.12);

  --topo-h:66px;

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--fonte);
  font-size:17px;
  line-height:1.65;
  color:var(--tinta);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; }
img{ height:auto; }
a{ color:inherit; }

h1,h2,h3{ margin:0 0 .5em; line-height:1.18; letter-spacing:-.015em; font-weight:800; }
h2{ font-size:clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem); color:var(--azul-900); }
h3{ font-size:1.14rem; color:var(--azul-900); }
p{ margin:0 0 1em; }

.wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 20px; }
.wrap--estreito{ max-width:800px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--azul-800); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--dourado); outline-offset:3px; border-radius:6px; }

/* ---------------- TOPO ---------------- */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--borda);
}
.topo__in{ display:flex; align-items:center; justify-content:space-between; height:var(--topo-h); gap:14px; }

.marca{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.marca__ic{ width:46px; height:34px; flex:0 0 auto; display:block; }
.marca__txt{ display:flex; flex-direction:column; line-height:1.05; }
.marca__txt strong{ font-size:1.1rem; font-weight:800; color:var(--azul-800); letter-spacing:-.02em; }
.marca__txt em{
  font-style:normal; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dourado-esc); font-weight:800; margin-top:1px;
}

.menu-bt{
  width:44px; height:44px; border:1px solid var(--borda); background:#fff;
  border-radius:12px; display:flex; flex-direction:column; gap:5px;
  align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.menu-bt span{ display:block; width:20px; height:2px; background:var(--azul-800); border-radius:2px; transition:transform .22s ease, opacity .18s ease; }
.menu-bt[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-bt[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-bt[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu{
  position:fixed; inset:var(--topo-h) 0 auto 0;
  background:#fff; border-bottom:1px solid var(--borda);
  display:flex; flex-direction:column; padding:8px 20px 20px;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  box-shadow:var(--sombra);
  max-height:calc(100vh - var(--topo-h)); overflow:auto;
}
.menu.is-open{ transform:none; opacity:1; pointer-events:auto; }
.menu a{
  text-decoration:none; padding:13px 2px; font-weight:600; color:var(--azul-900);
  border-bottom:1px solid var(--borda);
}
.menu a:last-child{ border-bottom:0; }
.menu__cta{
  margin-top:12px; background:var(--wa); color:#fff !important; text-align:center;
  border-radius:12px; padding:14px !important; border:0 !important; font-weight:700;
}

/* ---------------- HERO ---------------- */
.hero{ position:relative; overflow:hidden; background:var(--azul-900); color:#fff; }
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(3,102,187,.55), transparent 60%),
    radial-gradient(760px 460px at 96% 6%, rgba(245,162,21,.22), transparent 62%),
    linear-gradient(168deg, #0E2E72 0%, #08214F 58%, #061B41 100%);
}
.hero__bg::after{
  content:""; position:absolute; inset:0; opacity:.16;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.55) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 72%);
  mask-image:linear-gradient(to bottom, #000 0%, transparent 72%);
}
.hero__in{ position:relative; padding:54px 20px 60px; text-align:center; }

.hero__tag{
  display:inline-block; margin:0 0 18px;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--azul-200);
  border:1px solid rgba(169,210,236,.35); border-radius:999px; padding:7px 15px;
  background:rgba(255,255,255,.05);
}
.hero__h1{
  font-size:clamp(2rem, 1.35rem + 3.2vw, 3.5rem);
  margin:0 0 14px; color:#fff; letter-spacing:-.025em;
  max-width:21ch; margin-inline:auto;
}
.hero__script{
  margin:0 auto 22px; max-width:34ch;
  color:var(--dourado); font-size:clamp(1.02rem, .95rem + .5vw, 1.3rem);
  font-weight:600; font-style:italic; letter-spacing:.005em;
}
.hero__sub{
  max-width:600px; margin:0 auto 28px;
  font-size:clamp(1rem, .96rem + .3vw, 1.14rem);
  color:#D6E6F2;
}
.hero__bts{ display:flex; flex-direction:column; gap:12px; max-width:400px; margin:0 auto; }
.hero__nota{ margin:24px 0 0; font-size:.86rem; color:#9FBDD4; }

/* ---------------- BOTÕES ---------------- */
.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 24px; border-radius:14px; font-weight:700; font-size:1rem;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  line-height:1.2; text-align:center;
}
.bt:hover{ transform:translateY(-2px); }
.bt--wa{ background:var(--wa); color:#fff; box-shadow:0 8px 22px rgba(31,168,85,.28); }
.bt--wa:hover{ background:var(--wa-esc); }
.bt--ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.35); }
.bt--ghost:hover{ background:rgba(255,255,255,.14); }
.bt--full{ width:100%; }

/* ---------------- SELOS ---------------- */
.selos{ background:var(--creme); border-bottom:1px solid var(--areia); }
.selos__in{ display:grid; gap:14px; padding-top:26px; padding-bottom:26px; }
.selo{
  background:#fff; border:1px solid var(--borda); border-radius:var(--r-m);
  padding:18px 18px 16px; display:grid; gap:4px;
  box-shadow:0 1px 2px rgba(8,33,79,.04);
}
.selo svg{ color:var(--azul-600); }
.selo b{ color:var(--azul-900); font-size:1.02rem; }
.selo span{ color:var(--tinta-2); font-size:.93rem; line-height:1.5; }

/* ---------------- SEÇÕES GENÉRICAS ---------------- */
.secao{ padding:58px 0; }
.secao--azul{ background:var(--azul-050); }
.secao--claro{ background:var(--creme); }
.secao--escuro{
  background:linear-gradient(170deg, var(--azul-800), var(--azul-900) 72%);
  color:#fff;
}

.secao__cab{ max-width:660px; margin:0 auto 32px; text-align:center; }
.secao__cab--claro h2{ color:#fff; }
.secao__sub{ color:var(--tinta-2); font-size:1.04rem; margin:0; }
.secao__sub--claro{ color:#C7DCEC; }
.secao__sub--esq{ text-align:left; max-width:none; }

.olho{
  margin:0 0 10px; font-size:.75rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dourado-esc);
}
.olho--claro{ color:var(--dourado); }

/* ---------------- PLAYER ---------------- */
.player{
  max-width:400px; margin:0 auto;
  border-radius:var(--r-g); overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  background:#000; line-height:0;
}
.player video{ width:100%; height:auto; display:block; }
.player__nota{
  text-align:center; margin:16px 0 0; color:#9FBDD4; font-size:.88rem;
}

/* ---------------- SOBRE ---------------- */
.sobre{ padding:58px 0; }
.sobre__in{ display:grid; gap:28px; margin-bottom:26px; }
.sobre__txt p{ color:var(--tinta-2); }

.sobre__foto{ margin:0; }
.sobre__foto img{
  width:100%; border-radius:var(--r-g); display:block;
  box-shadow:var(--sombra-f); object-fit:cover;
}
.sobre__foto figcaption{
  margin-top:10px; text-align:center; font-size:.88rem; color:var(--tinta-2);
}

.lista-check{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px; }
.lista-check li{
  position:relative; padding-left:34px; color:var(--tinta); font-weight:600; font-size:1rem;
}
.lista-check li::before{
  content:""; position:absolute; left:0; top:2px; width:22px; height:22px;
  border-radius:50%; background:var(--azul-100);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2E72' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>");
  background-size:13px 13px; background-repeat:no-repeat; background-position:center;
}

.cartao-frase{
  background:linear-gradient(150deg, var(--azul-800), var(--azul-900));
  color:#fff; border-radius:var(--r-g); padding:28px 26px 26px;
  box-shadow:var(--sombra-f); position:relative; overflow:hidden; text-align:center;
}
.cartao-frase::after{
  content:""; position:absolute; right:-50px; bottom:-70px; width:210px; height:210px;
  border-radius:50%; background:rgba(245,162,21,.14);
}
.cartao-frase__aspas{ color:rgba(245,162,21,.55); display:block; margin:0 auto 8px; }
.cartao-frase p{
  position:relative; font-size:clamp(1.15rem, 1.05rem + .7vw, 1.5rem);
  font-weight:800; line-height:1.3; letter-spacing:-.02em; margin:0 auto 12px; max-width:26ch;
}
.cartao-frase span{ position:relative; color:var(--azul-200); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }

/* ---------------- CARDS DE SERVIÇO ---------------- */
.cards{ display:grid; gap:20px; }
.card{
  background:#fff; border:1px solid var(--borda); border-radius:var(--r-g);
  padding:26px 24px 24px; box-shadow:var(--sombra); position:relative;
  display:flex; flex-direction:column;
}
.card--destaque{ border-color:var(--dourado); box-shadow:var(--sombra-f); }
.card__selo{
  position:absolute; top:-12px; left:24px; z-index:2;
  background:var(--dourado); color:#3a2600; font-size:.7rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px;
}
.card__ic{
  width:56px; height:56px; border-radius:16px; background:var(--azul-100);
  display:flex; align-items:center; justify-content:center; color:var(--azul-800);
  margin-bottom:16px;
}
.card__foto{ margin:0 0 16px; border-radius:var(--r-m); overflow:hidden; line-height:0; }
.card__foto img{ width:100%; height:190px; object-fit:cover; object-position:center 8%; display:block; }
.card > p{ color:var(--tinta-2); font-size:.99rem; }
.mini{ list-style:none; margin:4px 0 22px; padding:0; display:grid; gap:8px; }
.mini li{ position:relative; padding-left:20px; font-size:.95rem; color:var(--tinta-2); }
.mini li::before{
  content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--dourado);
}
.card__bt{
  margin-top:auto; display:block; text-align:center; text-decoration:none;
  background:var(--azul-800); color:#fff; font-weight:700; padding:14px 18px;
  border-radius:12px; transition:background .16s ease;
}
.card__bt:hover{ background:var(--azul-600); }

/* ---------------- PASSOS ---------------- */
.passos{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.passo{
  background:#fff; border:1px solid var(--borda); border-radius:var(--r-m);
  padding:22px 22px 18px; position:relative; box-shadow:0 1px 2px rgba(8,33,79,.04);
}
.passo__n{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--azul-800); color:#fff; font-weight:800; font-size:1.05rem;
  margin-bottom:12px;
}
.passo p{ margin:0; color:var(--tinta-2); font-size:.97rem; }

/* ---------------- SINAIS ---------------- */
.sinais{ display:grid; gap:10px; margin-bottom:30px; }
.sinal{
  background:#fff; border:1px solid var(--areia); border-radius:var(--r-p);
  padding:14px 16px; font-size:.99rem; color:var(--tinta);
  display:flex; gap:10px; align-items:flex-start; line-height:1.5;
}
.sinal span{ color:var(--dourado-esc); font-weight:900; font-size:1.3rem; line-height:1.1; }

.cta-faixa{
  background:var(--azul-800); color:#fff; border-radius:var(--r-g);
  padding:26px 24px; display:grid; gap:16px; text-align:center;
  box-shadow:var(--sombra-f);
}
.cta-faixa p{ margin:0; color:#D6E6F2; font-size:1.02rem; }
.cta-faixa strong{ color:#fff; display:block; }

/* ---------------- DIFERENCIAIS ---------------- */
.difs{ display:grid; gap:16px; }
.dif{
  border-left:4px solid var(--dourado); background:var(--azul-050);
  border-radius:0 var(--r-m) var(--r-m) 0; padding:20px 22px;
}
.dif h3{ margin-bottom:6px; }
.dif p{ margin:0; color:var(--tinta-2); font-size:.97rem; }

/* ---------------- REGIÃO ---------------- */
.regiao__in{ display:grid; gap:26px; }
.cidades{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.cidade{
  background:#fff; border:1px solid var(--azul-200); color:var(--azul-800);
  border-radius:999px; padding:8px 15px; font-size:.92rem; font-weight:600;
}
.cidade--main{ background:var(--azul-800); border-color:var(--azul-800); color:#fff; }

.regiao__box{
  background:#fff; border:1px solid var(--borda); border-radius:var(--r-g);
  padding:26px 24px; box-shadow:var(--sombra); align-self:start;
}
.regiao__box p{ color:var(--tinta-2); font-size:.97rem; }

/* ---------------- FAQ ---------------- */
.faq{ display:grid; gap:10px; }
.faq__item{
  background:#fff; border:1px solid var(--borda); border-radius:var(--r-m);
  overflow:hidden; box-shadow:0 1px 2px rgba(8,33,79,.04);
}
.faq__item summary{
  cursor:pointer; list-style:none; padding:18px 52px 18px 20px;
  font-weight:700; color:var(--azul-900); position:relative; font-size:1.01rem;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:20px; top:50%; width:11px; height:11px;
  border-right:2.5px solid var(--dourado-esc); border-bottom:2.5px solid var(--dourado-esc);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq__item[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.faq__item[open] summary{ background:var(--azul-050); }
.faq__c{ padding:4px 20px 18px; }
.faq__c p{ margin:0; color:var(--tinta-2); font-size:.97rem; }

/* ---------------- CONTATO ---------------- */
.contato{
  background:linear-gradient(165deg, var(--azul-800), var(--azul-900) 70%);
  color:#fff; position:relative; overflow:hidden;
}
.contato::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(700px 340px at 50% 0%, rgba(3,102,187,.38), transparent 65%);
}
.contato__in{ position:relative; padding:54px 20px 58px; text-align:center; }
.contato h2{ color:#fff; }
.contato__sub{ max-width:560px; margin:0 auto 28px; color:#D6E6F2; font-size:1.04rem; }
.contato__nota{ margin:26px 0 0; color:#9FBDD4; font-size:.88rem; }

.fones{ display:grid; gap:12px; max-width:760px; margin:0 auto; text-align:left; }
.fone{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-m); padding:15px 18px; color:#fff;
  transition:background .16s ease, transform .16s ease, border-color .16s ease;
}
.fone:hover{ background:rgba(255,255,255,.13); transform:translateY(-2px); }
.fone svg{ flex:0 0 auto; color:var(--azul-200); }
.fone--wa{ background:rgba(31,168,85,.18); border-color:rgba(31,168,85,.45); }
.fone--wa:hover{ background:rgba(31,168,85,.28); }
.fone--wa svg{ color:#5FE39A; }
.fone span{ display:flex; flex-direction:column; min-width:0; }
.fone b{ font-size:1.06rem; letter-spacing:.01em; }
.fone em{
  font-style:normal; font-size:.8rem; color:#A9C6DC; margin-top:1px;
  overflow-wrap:anywhere;
}

/* ---------------- RODAPÉ ---------------- */
.rodape{ background:#061B41; color:#B9CDDD; padding:34px 0 26px; }
.rodape__marca{ display:flex; align-items:center; gap:12px; }
.rodape__marca img{ width:52px; height:39px; flex:0 0 auto; }
.rodape__marca strong{ color:#fff; font-size:1.08rem; display:block; }
.rodape__marca p{ margin:3px 0 0; font-size:.9rem; max-width:44ch; }
.rodape__nav{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:22px 0 20px; }
.rodape__nav a{ color:#B9CDDD; text-decoration:none; font-size:.94rem; }
.rodape__nav a:hover{ color:#fff; text-decoration:underline; }
.rodape__fim{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.12); padding-top:16px; margin:0;
  font-size:.85rem; color:#8FA9BD;
}

/* ---------------- BOTÃO FLUTUANTE ---------------- */
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; align-items:center; gap:9px;
  background:var(--wa); color:#fff; text-decoration:none;
  padding:13px 18px 13px 15px; border-radius:999px; font-weight:700;
  box-shadow:0 10px 26px rgba(31,168,85,.4);
  transition:transform .16s ease, background .16s ease;
}
.wa-float:hover{ transform:translateY(-2px); background:var(--wa-esc); }
.wa-float span{ font-size:.96rem; }

/* ---------------- DESKTOP ---------------- */
@media (min-width:700px){
  .selos__in{ grid-template-columns:repeat(3,1fr); padding-top:32px; padding-bottom:32px; }
  .hero__bts{ flex-direction:row; justify-content:center; max-width:none; }
  .sinais{ grid-template-columns:1fr 1fr; }
  .difs{ grid-template-columns:1fr 1fr; }
  .passos{ grid-template-columns:1fr 1fr; }
  .fones{ grid-template-columns:1fr 1fr; }
  .cta-faixa{ grid-template-columns:1fr auto; text-align:left; align-items:center; padding:28px 30px; }
  .cta-faixa strong{ display:inline; }
  .rodape__in{ display:grid; grid-template-columns:1fr auto; align-items:start; gap:10px 40px; }
  .rodape__nav{ margin:0; justify-content:flex-end; }
  .rodape__fim{ grid-column:1 / -1; margin-top:22px; }
}

@media (min-width:900px){
  .topo{ --topo-h:76px; }
  .menu-bt{ display:none; }
  .menu{
    position:static; flex-direction:row; align-items:center; gap:24px;
    background:none; border:0; box-shadow:none; padding:0; max-height:none; overflow:visible;
    transform:none; opacity:1; pointer-events:auto;
  }
  .menu a{ border:0; padding:6px 0; font-size:.95rem; }
  .menu a:not(.menu__cta):hover{ color:var(--azul-600); }
  .menu__cta{ margin:0; padding:12px 20px !important; border-radius:999px; font-size:.94rem; }

  .hero__in{ padding:88px 20px 96px; }
  .secao,.sobre{ padding:80px 0; }
  .sobre__in{ grid-template-columns:1.3fr .8fr; gap:52px; align-items:center; margin-bottom:34px; }
  .cards{ grid-template-columns:repeat(3,1fr); gap:22px; }
  .card__foto img{ height:210px; }
  .passos{ grid-template-columns:repeat(4,1fr); }
  .regiao__in{ grid-template-columns:1.45fr .8fr; gap:46px; align-items:start; }
  .contato__in{ padding:84px 20px 88px; }
  .wa-float{ right:24px; bottom:24px; }
}

/* ---------------- MOVIMENTO ---------------- */
.rev{ opacity:0; transform:translateY(18px); }
.rev.is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rev{ opacity:1; transform:none; }
}

@media print{
  .topo,.wa-float,.menu-bt,.player{ display:none; }
}