/* Componentes da versão enxuta: mosaico do hero, cards de segmento, plano único, rodapé curto. */

/* ---------- largura: conteúdo em 1440, grades visuais em 1760 ---------- */
:root{ --wrap:1440px }
.wrap.wide{ max-width:1760px }
.secHead.row2{ max-width:none; display:grid; grid-template-columns:1.1fr .9fr; gap:24px 64px; align-items:end; margin-bottom:clamp(32px,4vw,52px) }
.secHead.row2 .lead{ margin:0; max-width:52ch; justify-self:end }
@media (max-width:900px){ .secHead.row2{ grid-template-columns:1fr } .secHead.row2 .lead{ justify-self:start } }

/* ---------- cards de segmento com foto ---------- */
.segs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.1vw,16px) }
.seg{ position:relative; display:flex; align-items:flex-end; aspect-ratio:5/4; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line2); background:var(--fossil); color:#fff; isolation:isolate; transition:transform .5s var(--ease), box-shadow .5s var(--ease) }
.seg .bg{ position:absolute; inset:0; background:center/cover no-repeat; transform:scale(1.02); transition:transform 1.1s var(--ease) }
.seg::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.66)); z-index:1; transition:opacity .5s }
.seg .in{ position:relative; z-index:2; padding:clamp(22px,2.4vw,34px); width:100%; transform:translateY(6px); transition:transform .5s var(--ease) }
.seg h3{ color:#fff; font-size:clamp(1.4rem,2vw,2rem); letter-spacing:-.025em }
.seg h3 i{ font-style:normal; color:var(--acc-dk) }
.seg p{ color:rgba(255,255,255,.82); font-size:clamp(13.5px,1vw,15px); margin-top:8px; max-width:34ch; opacity:.9 }
.seg .arr{ position:absolute; top:18px; right:18px; z-index:2; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); display:grid; place-items:center; transition:background .3s, transform .5s var(--ease) }
.seg .arr svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:1.8 }
.seg:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(0,0,0,.6) } .seg:hover .bg{ transform:scale(1.08) } .seg:hover .in{ transform:none } .seg:hover .arr{ background:var(--acc); transform:rotate(-45deg) }
@media (max-width:760px){ .segs{ grid-template-columns:1fr } .seg{ aspect-ratio:16/10 } }

/* ---------- três coisas: faixa com ícones grandes que se desenham ---------- */
.essGrid{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; background:var(--bg) }
.ess{ position:relative; padding:clamp(28px,3vw,44px); border-right:1px solid var(--line2); display:flex; flex-direction:column; gap:14px; min-height:100%; transition:background .3s }
.ess:last-child{ border-right:0 } .ess:hover{ background:var(--paper) }
.ess .num{ position:absolute; top:clamp(24px,2.6vw,36px); right:clamp(24px,2.6vw,36px); font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--dim) }
.ess .ic{ width:clamp(64px,6vw,84px); height:clamp(64px,6vw,84px); margin-bottom:6px }
.ess .ic svg{ width:100%; height:100%; fill:none; stroke:var(--acc); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.ess .ic path,.ess .ic rect,.ess .ic circle{ stroke-dasharray:220; stroke-dashoffset:220; transition:stroke-dashoffset 1.4s var(--ease) }
.ess .ic .d1{ transition-delay:.5s } .ess .ic .tick,.ess .ic .dot,.ess .ic .coin{ transition-delay:.9s }
[data-reveal].in .ess .ic path,[data-reveal].in .ess .ic rect,[data-reveal].in .ess .ic circle, html:not(.js) .ess .ic *{ stroke-dashoffset:0 }
.ess .ic .dot{ fill:var(--acc); animation:blink 2.6s ease-in-out infinite; animation-delay:2s }
.ess:hover .ic svg{ animation:nudge .6s var(--ease) }
@keyframes nudge{ 0%{ transform:translateY(0) } 40%{ transform:translateY(-4px) } 100%{ transform:translateY(0) } }
.ess h3{ font-size:clamp(1.25rem,1.6vw,1.6rem); letter-spacing:-.02em }
.ess p{ color:var(--mut); font-size:15px; line-height:1.6; max-width:38ch }
@media (max-width:900px){ .essGrid{ grid-template-columns:1fr } .ess{ border-right:0; border-bottom:1px solid var(--line2) } .ess:last-child{ border-bottom:0 } .ess .ic{ width:56px; height:56px } }

/* ---------- plano único ---------- */
.one{ display:grid; grid-template-columns:1.05fr .95fr; border:1px solid var(--acc); border-radius:var(--r-lg); background:var(--paper); overflow:hidden; box-shadow:var(--shadow); max-width:960px; margin:0 auto }
.one .l{ padding:clamp(28px,4vw,48px) }
.one .r{ padding:clamp(28px,4vw,48px); background:var(--acc-soft); border-left:1px solid var(--line2) }
.one .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); display:inline-block; margin-bottom:12px }
.one h3{ font-size:clamp(1.6rem,2.6vw,2.1rem); letter-spacing:-.03em }
.one .for{ color:var(--mut); font-size:15px; margin-top:8px; max-width:34ch }
.one .price{ display:flex; align-items:baseline; gap:6px; margin-top:26px }
.one .price b{ font-family:var(--display); font-size:clamp(48px,6vw,64px); font-weight:500; letter-spacing:-.045em; line-height:1 }
.one .price b small{ font-size:22px; margin-right:3px; letter-spacing:0 }
.one .price span{ color:var(--mut); font-size:15px }
.one .extra{ margin-top:10px; font-size:14px; color:var(--dim) } .one .extra b{ color:var(--ink); font-weight:500 }
.one .btns{ margin-top:28px }
.one .r h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; font-weight:500 }
.one ul{ display:grid; grid-template-columns:1fr; gap:10px }
.one li{ display:flex; gap:10px; font-size:14.5px; color:var(--mut) }
.one li svg{ width:16px; height:16px; flex:none; margin-top:3px; fill:none; stroke:var(--acc); stroke-width:2 }
.one li b{ color:var(--ink); font-weight:500 }
@media (max-width:760px){ .one{ grid-template-columns:1fr } .one .r{ border-left:0; border-top:1px solid var(--line2) } }

/* chips à esquerda (lista de recursos do segmento) */
.chips.left{ justify-content:flex-start }
.chips span b{ color:var(--ink); font-weight:500 }

/* FAQ curta */
.faqs{ max-width:720px; margin:0 auto }
.faqs details{ border-bottom:1px solid var(--line2); padding:4px 0 }
.faqs summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; font-size:16.5px; font-weight:500 }
.faqs summary::-webkit-details-marker{ display:none }
.faqs summary i{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); position:relative; flex:none; transition:transform .3s var(--ease), border-color .2s }
.faqs summary i::before,.faqs summary i::after{ content:''; position:absolute; left:50%; top:50%; width:9px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%) }
.faqs summary i::after{ transform:translate(-50%,-50%) rotate(90deg) }
.faqs details[open]:not(.js) summary i, .faqs details.on summary i{ transform:rotate(45deg); border-color:var(--acc) }
.faqs .a{ color:var(--mut); font-size:15px; line-height:1.65; padding:0 0 18px; max-width:60ch }

/* ---------- rodapé curto ---------- */
.ftr.lean{ padding:clamp(40px,5vw,56px) 0 28px }
.ftr.lean .row1{ display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.ftr.lean .row1 p{ color:var(--mut); font-size:14.5px; max-width:44ch; margin:0 }
.ftr.lean .row2{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:28px; padding-top:22px; border-top:1px solid var(--line2) }
.ftr.lean nav{ display:flex; gap:6px 22px; flex-wrap:wrap }
.ftr.lean nav a{ font-size:14px; color:var(--mut); transition:color .14s } .ftr.lean nav a:hover{ color:var(--ink) }
.ftr.lean .tools{ display:flex; gap:8px; align-items:center }
.ftr.lean .base{ margin-top:22px; padding-top:0; border:0; font-size:13px; color:var(--dim) }


/* celular estreito: idioma e tema ficam só no menu; o botão principal continua no topo */
@media (max-width:480px){ .hdr .right .lang, .hdr .right .tbtn{ display:none } .hdr .right .btn.sm{ padding:9px 13px; font-size:13.5px } .hdr .wrap{ gap:14px } }

/* =====================================================================
   HERO 2 — mosaico de canto a canto, cartões vivos e movimento contido
   ===================================================================== */
.hero2 h1{ max-width:13ch; font-size:clamp(2.6rem,6.2vw,5.4rem) }
.hero2 .lead{ max-width:58ch }
.mosaic{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.1vw,16px); max-width:1760px; margin:clamp(44px,6vw,72px) auto 0; padding:0 var(--pad); text-align:left }
.tile{ position:relative; aspect-ratio:3/4; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line2); background:var(--fossil); isolation:isolate;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease); will-change:transform }
.tile:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(0,0,0,.55) }
/* fotos: Ken Burns lento + etiqueta */
.tile.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:kb 18s ease-in-out infinite alternate; transition:transform .8s var(--ease) }
.tile.photo:nth-child(3) img{ animation-delay:-6s } .tile.photo.five img{ animation-delay:-12s }
.tile.photo:hover img{ transform:scale(1.1); animation-play-state:paused }
.tile.photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.42)); z-index:1 }
.tile.photo span{ position:absolute; left:20px; bottom:18px; color:#fff; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; z-index:2; padding-left:14px }
.tile.photo span::before{ content:''; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--acc-dk) }
@keyframes kb{ from{ transform:scale(1.04) translate(0,0) } to{ transform:scale(1.12) translate(-1.5%,1.5%) } }
/* cartões */
.tile.acc,.tile.ink{ padding:clamp(18px,1.6vw,26px); display:flex; flex-direction:column; justify-content:space-between; border-color:transparent; gap:14px }
.tile.acc{ background:var(--acc); color:var(--acc-on) } .tile.ink{ background:var(--ink); color:var(--on-ink) }
.tile h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.05rem,1.35vw,1.4rem); letter-spacing:-.02em; line-height:1.12; color:inherit }
.tile p{ font-size:13px; opacity:.72; margin-top:7px; line-height:1.45 }
/* mini agenda (cartão verde) */
.mini{ font-family:var(--sans); font-size:12px; position:relative }
.agenda{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:10px 10px 8px; backdrop-filter:blur(6px) }
.agenda .mh{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; margin-bottom:6px }
.agenda .mh i{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:blink 2.4s ease-in-out infinite }
.agenda .sl{ display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:9px; background:rgba(255,255,255,.55); color:#14201b; margin-top:4px; position:relative; overflow:hidden }
.agenda .sl b{ font-family:var(--mono); font-weight:500; font-size:10.5px } .agenda .sl span{ display:flex; flex-direction:column; line-height:1.2; font-weight:500 } .agenda .sl small{ font-weight:400; opacity:.6; font-size:10px }
.agenda .sl em{ margin-left:auto; font-style:normal; font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc-dk); opacity:0; transform:translateX(6px); animation:confirm 9s var(--ease) infinite }
.agenda .sl.new{ animation:slotIn 9s var(--ease) infinite }
.agenda .pill{ position:absolute; right:10px; top:-12px; background:#14201b; color:#fff; font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:99px; opacity:0; animation:pillIn 9s var(--ease) infinite }
@keyframes blink{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
@keyframes slotIn{ 0%,18%{ opacity:0; transform:translateY(8px); max-height:0; padding-top:0; padding-bottom:0; margin-top:0 } 26%,100%{ opacity:1; transform:none; max-height:48px; padding-top:7px; padding-bottom:7px; margin-top:4px } }
@keyframes pillIn{ 0%,14%{ opacity:0; transform:translateY(6px) } 20%,42%{ opacity:1; transform:none } 48%,100%{ opacity:0; transform:translateY(-6px) } }
@keyframes confirm{ 0%,44%{ opacity:0; transform:translateX(6px) } 52%,100%{ opacity:1; transform:none } }
/* mini chat (cartão escuro): uma linha do tempo de 12s para as três mensagens */
/* mini caixa de entrada: três e-mails chegando em sequência (confirmação, lembrete, retorno) */
.mmail{ display:flex; flex-direction:column; gap:6px; min-height:128px; justify-content:flex-end }
.mmail .e{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:12px; background:color-mix(in oklab, currentColor 9%, transparent); opacity:0; transform:translateY(8px) scale(.98); transform-origin:top left; animation:12s var(--ease) infinite }
.mmail .e i{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--acc); color:var(--acc-on); font-style:normal; font-weight:600; font-size:11px; display:grid; place-items:center }
.mmail .e span{ display:flex; flex-direction:column; min-width:0; font-size:11px; line-height:1.3; opacity:.8 } .mmail .e span b{ font-weight:600; font-size:11.5px; opacity:1; color:inherit }
.mmail .e span b, .mmail .e span em{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-style:normal }
.mmail .e small{ margin-left:auto; flex:none; font-size:10px; opacity:.55 }
.mmail .e1{ animation-name:e1 } .mmail .e2{ animation-name:e2 } .mmail .e3{ animation-name:e3 }
@keyframes e1{ 0%,4%{ opacity:0; transform:translateY(8px) scale(.98) } 9%,95%{ opacity:1; transform:none } 100%{ opacity:0; transform:translateY(-4px) } }
@keyframes e2{ 0%,34%{ opacity:0; transform:translateY(8px) scale(.98) } 39%,95%{ opacity:1; transform:none } 100%{ opacity:0; transform:translateY(-4px) } }
@keyframes e3{ 0%,64%{ opacity:0; transform:translateY(8px) scale(.98) } 69%,95%{ opacity:1; transform:none } 100%{ opacity:0; transform:translateY(-4px) } }
/* entrada: cada peça sobe com atraso; rolagem: leve deriva alternada (só onde há suporte) */
html.js .mosaic .tile{ opacity:0; transform:translateY(28px) scale(.97); transition:opacity .9s var(--ease), transform .9s var(--ease) }
html.js .mosaic .tile:nth-child(1){ transition-delay:.15s } html.js .mosaic .tile:nth-child(2){ transition-delay:.25s } html.js .mosaic .tile:nth-child(3){ transition-delay:.35s } html.js .mosaic .tile:nth-child(4){ transition-delay:.45s } html.js .mosaic .tile:nth-child(5){ transition-delay:.55s }
html.js .mosaic.in .tile{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .tile.photo img,.agenda *,.mmail *{ animation:none !important; opacity:1 !important; transform:none !important } }
/* respostas */
@media (max-width:1180px){ .mosaic{ grid-template-columns:repeat(4,1fr) } .tile.five{ display:none } }
@media (max-width:820px){ .mosaic{ grid-template-columns:1fr 1fr; gap:10px } .tile{ aspect-ratio:4/5 } }
@media (max-width:480px){ .tile{ aspect-ratio:1/1.1 } .tile p{ display:none } .tile h3{ font-size:1rem } .agenda .sl:nth-child(3){ display:none } .mmail .e3{ display:none } .tile.five{ display:none } }

/* alvos de toque no celular: links de texto e rodapé com área de 44px */
.link{ padding:8px 0 }
.ftr.lean nav a{ padding:10px 0; display:inline-block }
.logo{ min-height:44px }
@media (max-width:359px){ :root{ --pad:14px } .hero2 h1{ font-size:2.3rem } .btn.lg{ padding:13px 20px; font-size:15px } }
/* mini agenda em telas estreitas: uma linha por horário, sem a pílula */
@media (max-width:480px){
  .agenda .pill{ display:none } .agenda .sl small{ display:none }
  .agenda .sl span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 } .agenda .sl{ gap:6px; padding:7px 8px }
  .agenda .sl em{ display:none } .tile h3{ font-size:.95rem } .mmail .e span{ font-size:10px }
}
@media (max-width:400px){ .agenda .sl b{ display:none } }

/* ---------- "veja o sistema": abas com painel, página do cliente e celular ---------- */
.views{ position:relative }
.vtabs{ position:relative; display:inline-flex; gap:4px; padding:4px; border-radius:99px; border:1px solid var(--line2); background:var(--bg); margin-bottom:clamp(24px,3vw,40px) }
.vtabs button{ position:relative; z-index:1; padding:10px 18px; border-radius:99px; font-size:14px; font-weight:500; color:var(--mut); transition:color .25s; white-space:nowrap }
.vtabs button[aria-selected="true"]{ color:var(--ink) }
.vtabs .ind{ position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:99px; background:var(--paper); border:1px solid var(--line); box-shadow:0 6px 18px -12px rgba(0,0,0,.5); transition:left .45s var(--ease), width .45s var(--ease) }
.stage{ display:grid }
.stage .view{ grid-area:1/1; opacity:0; transform:translateY(14px) scale(.985); pointer-events:none; transition:opacity .5s var(--ease), transform .6s var(--ease) }
.stage .view.on{ opacity:1; transform:none; pointer-events:auto; position:relative; z-index:1 }
.stage .cap{ text-align:center; color:var(--mut); font-size:15px; max-width:60ch; margin:clamp(20px,2.6vw,32px) auto 0 }
.showcase .dash{ margin-top:0; max-width:1320px }
/* aparelhos com telas reais da área do cliente */
.phones{ display:flex; justify-content:center; align-items:flex-end; gap:clamp(16px,3vw,56px); padding-top:10px }
.frame{ --fr:clamp(34px,3.2vw,46px); --fp:clamp(8px,.8vw,11px); width:clamp(240px,27vw,390px); aspect-ratio:390/844; border-radius:var(--fr); background:#0e0f0d; padding:var(--fp); box-shadow:0 40px 90px -40px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.09); position:relative; overflow:hidden; display:flex; flex-direction:column }
.frame .bar{ height:clamp(26px,2.4vw,34px); background:#141311; border-radius:calc(var(--fr) - var(--fp)) calc(var(--fr) - var(--fp)) 0 0; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(16px,1.6vw,22px); color:#F3EFE7; font-family:var(--mono); font-size:clamp(9px,.8vw,11px); flex:none }
.frame .bar i{ width:26%; height:60%; background:#0e0f0d; border-radius:99px }
.frame img{ width:100%; flex:1; min-height:0; object-fit:cover; object-position:top; border-radius:0 0 calc(var(--fr) - var(--fp)) calc(var(--fr) - var(--fp)); display:block }
.frame.b{ margin-bottom:clamp(20px,4vw,72px) }
.view.on .frame.a{ animation:rise .9s var(--ease) both } .view.on .frame.b{ animation:rise .9s var(--ease) .12s both }
@keyframes rise{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
.showcase .phoneWrap{ display:flex; justify-content:center }
@media (max-width:640px){ .vtabs{ display:flex; width:100%; overflow-x:auto; scrollbar-width:none } .vtabs::-webkit-scrollbar{ display:none } .vtabs button{ flex:1; padding:10px 12px; font-size:13px } .phones{ flex-direction:column; align-items:center; gap:18px } .frame{ width:min(100%,340px) } .frame.b{ margin-bottom:0 } }
.vtabs .sm{ display:none } @media (max-width:640px){ .vtabs .lg{ display:none } .vtabs .sm{ display:inline } }

/* ---------- depoimentos ---------- */
.quotes3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.1vw,16px) }
.quote{ margin:0; padding:clamp(24px,2.6vw,36px); border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--line2); display:flex; flex-direction:column; gap:18px; transition:transform .5s var(--ease), border-color .3s }
.quote:hover{ transform:translateY(-4px); border-color:var(--line) }
.quote .stars{ display:flex; gap:3px } .quote .stars svg{ width:14px; height:14px; fill:var(--acc) }
.quote blockquote{ margin:0; font-family:var(--display); font-weight:500; font-size:clamp(1.1rem,1.35vw,1.35rem); letter-spacing:-.015em; line-height:1.35; flex:1 }
.quote figcaption{ display:flex; align-items:center; gap:12px } .quote figcaption i{ width:38px; height:38px; border-radius:50%; background:var(--acc-soft); color:var(--acc); display:grid; place-items:center; font-style:normal; font-weight:600; font-size:14px; flex:none }
.quote figcaption span{ display:flex; flex-direction:column; line-height:1.3 } .quote figcaption b{ font-weight:500; font-size:14.5px } .quote figcaption small{ color:var(--mut); font-size:13px }
@media (max-width:900px){ .quotes3{ grid-template-columns:1fr } }
/* ---------- preço: fatos + plano largo ---------- */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.1vw,16px); margin-bottom:clamp(10px,1.1vw,16px) }
.fact{ padding:clamp(18px,2vw,26px); border-radius:var(--r-lg); border:1px solid var(--line2); background:var(--bg); display:flex; flex-direction:column; gap:6px }
.fact b{ font-family:var(--display); font-weight:500; font-size:clamp(1.8rem,2.8vw,2.6rem); letter-spacing:-.04em; line-height:1 } .fact span{ color:var(--mut); font-size:14px }
.priceSec .one{ max-width:none; grid-template-columns:1.2fr .8fr } .priceSec .one .r ul{ grid-template-columns:1fr 1fr; gap:10px 22px }
@media (max-width:900px){ .facts{ grid-template-columns:1fr 1fr } .priceSec .one{ grid-template-columns:1fr } .priceSec .one .r ul{ grid-template-columns:1fr } }
@media (max-width:420px){ .facts{ grid-template-columns:1fr 1fr; gap:8px } .fact{ padding:14px } }
/* segmento: um aparelho só, centralizado */
.phones.one-phone .frame{ width:clamp(260px,26vw,380px) }

/* CTA final e rodapé acompanham a largura das grades */
.cta{ padding:clamp(56px,8vw,104px) var(--pad) }
.priceSec .one{ max-width:none }

/* ---------- planos: cabeçalho com os dois planos + checklist lado a lado ---------- */
.duo{ display:flex; flex-direction:column; align-items:center }
.vtabs button{ transition:color .3s var(--ease), transform .18s var(--ease) } .vtabs button:active{ transform:scale(.96) }
.vtabs.bill .ind{ transition:left .55s var(--ease), width .55s var(--ease) }
.vtabs.bill button em{ font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); margin-left:6px }
.cmp{ --c1:minmax(0,1.5fr); --c2:minmax(0,1fr); width:100%; max-width:1160px; border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--paper); overflow:hidden; box-shadow:var(--shadow) }
.cmp .hd,.cmp .rows li,.cmp .lbl{ display:grid; grid-template-columns:var(--c1) var(--c2) var(--c2) }
.cmp .hd > *{ padding:clamp(22px,2.6vw,36px); min-width:0 }
.cmp .intro h3{ font-size:clamp(1.3rem,1.9vw,1.7rem); letter-spacing:-.03em; max-width:14ch } .cmp .intro p{ color:var(--mut); font-size:14.5px; margin-top:10px; max-width:34ch }
.cmp .tier{ border-left:1px solid var(--line2); display:flex; flex-direction:column; position:relative }
.cmp .tier.pro{ background:linear-gradient(180deg, var(--acc-soft), transparent 70%) }
.tier .name{ font-family:var(--display); font-weight:500; font-size:clamp(1.35rem,2vw,1.7rem); letter-spacing:-.03em; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.tier .name em{ font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-on); background:var(--acc); padding:5px 9px; border-radius:99px }
.tier .for{ color:var(--mut); font-size:14px; margin-top:8px; max-width:30ch; flex:1 }
.tier .price{ display:flex; align-items:baseline; gap:6px; margin-top:20px }
.tier .price b{ font-family:var(--display); font-size:clamp(38px,4.4vw,52px); font-weight:500; letter-spacing:-.045em; line-height:1; display:inline-flex; align-items:baseline }
.tier .price b small{ font-size:18px; margin-right:3px; letter-spacing:0 } .tier .price b .n{ font:inherit; color:inherit; display:inline-block }
.tier .price .n{ font-variant-numeric:tabular-nums; will-change:transform, opacity }
.tier .price .per{ color:var(--mut); font-size:14px }
.tier .extra{ margin-top:8px; font-size:13.5px; color:var(--dim); min-height:2.9em; display:grid } .tier .extra b{ color:var(--ink); font-weight:500 }
.tier .extra > span{ grid-area:1/1; transition:opacity .38s var(--ease), transform .38s var(--ease) }
.tier .extra .a{ opacity:0; transform:translateY(6px) } .duo.annual .tier .extra .m{ opacity:0; transform:translateY(-6px) } .duo.annual .tier .extra .a{ opacity:1; transform:none }
.tier .btn{ margin-top:16px; width:100%; justify-content:center }
.cmp .lbl{ display:none }
.cmp .rows li{ border-top:1px solid var(--line2) }
.cmp .rows li span{ padding:14px clamp(22px,2.6vw,36px); font-size:14.5px; color:var(--mut); display:block; align-self:center; line-height:1.45 }
.cmp .rows li{ min-height:52px }
.cmp .rows li span b{ color:var(--ink); font-weight:500 }
.cmp .rows li .c{ display:grid; place-items:center; border-left:1px solid var(--line2); font-style:normal; color:var(--dim); font-size:14px }
.cmp .rows li .c svg{ width:20px; height:20px; fill:none; stroke:var(--acc); stroke-width:2.2 }
.cmp .rows li .c.pro{ background:color-mix(in oklab, var(--acc) 6%, transparent) }
.cmp .rows li.txt .c{ font-family:var(--display); font-weight:500; font-size:15px; color:var(--ink); letter-spacing:-.01em } .cmp .rows li.txt .c.pro{ color:var(--acc) }
/* extras do Pro: sem moldura — só um halo suave atrás do check */
.cmp .rows li.plus span{ color:var(--ink) }
.cmp .rows li.plus .c.pro{ background:color-mix(in oklab, var(--acc) 9%, transparent) }
.cmp .rows li.plus .c.pro svg{ width:20px; height:20px; stroke-width:2.4; filter:drop-shadow(0 0 3px color-mix(in oklab, var(--acc) 55%, transparent)) }
.cmp .rows li.plus .c.pro::after{ content:""; position:absolute; left:50%; top:50%; width:92px; height:92px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; background:radial-gradient(circle, color-mix(in oklab, var(--acc) 14%, transparent), transparent 60%); animation:glowRow 4s ease-in-out infinite }
.cmp .rows li .c{ position:relative; overflow:hidden }
@keyframes glowRow{ 0%,100%{ opacity:.35 } 50%{ opacity:.8 } }
.cmp .rows li:first-of-type{ border-top:1px solid var(--line) }
/* a coluna Pro segue as bordas arredondadas do cartão */
.cmp .hd .tier.pro{ border-top-right-radius:calc(var(--r-lg) - 1px) }
.cmp .rows li:last-child .c.pro{ border-bottom-right-radius:calc(var(--r-lg) - 1px) }
.cmp .rows li:last-child{ border-bottom-left-radius:calc(var(--r-lg) - 1px) }
.duo .note{ margin-top:22px; font-size:14px; color:var(--dim); text-align:center; max-width:60ch }
@media (prefers-reduced-motion:reduce){ .cmp .rows li.plus .c.pro::after{ animation:none } }
@media (max-width:820px){
  .cmp{ --c1:minmax(0,1fr); --c2:72px }
  .cmp .hd{ grid-template-columns:1fr 1fr } .cmp .intro{ grid-column:1 / -1; border-bottom:1px solid var(--line2) } .cmp .intro h3{ max-width:none } .cmp .intro p{ max-width:none }
  .cmp .tier:not(.pro){ border-left:0 } .cmp .hd > *{ padding:18px 16px }
  .tier .for{ display:none } .tier .price{ margin-top:12px } .tier .price b{ font-size:30px } .tier .price b small{ font-size:14px } .tier .price .per{ font-size:12.5px }
  .tier .extra{ font-size:12px; min-height:3.2em } .tier .btn{ padding:11px 10px; font-size:13.5px }
  .cmp .lbl{ display:grid; position:sticky; top:68px; z-index:2; background:var(--paper); border-top:1px solid var(--line) }
  .cmp .lbl b{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:center; padding:10px 0; border-left:1px solid var(--line2) } .cmp .lbl b.pro{ color:var(--acc); background:color-mix(in oklab, var(--acc) 6%, transparent) }
  .cmp .rows li:first-of-type{ border-top-color:var(--line2) }
  .cmp .rows li span{ padding:12px 16px; font-size:13.5px } .cmp .rows li{ min-height:48px }
}
@media (max-width:360px){ .cmp{ --c2:60px } .tier .name em{ display:none } }
/* mensal x anual, na página de preço */
.g2.cycles{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,20px); max-width:960px; margin:0 auto }
.card.cycle .rw{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 0; border-top:1px solid var(--line2) }
.card.cycle .eyebrow{ margin-bottom:10px } .card.cycle .rw:first-of-type{ border-top:0; padding-top:4px }
.card.cycle .rw span{ color:var(--mut); font-size:14px } .card.cycle .rw b{ font-family:var(--display); font-weight:500; font-size:1.35rem; letter-spacing:-.03em; text-align:right }
.card.cycle .rw b small{ display:block; font-family:var(--sans); font-size:12.5px; color:var(--dim); letter-spacing:0; font-weight:400 }
.card.cycle .rw.eco b{ color:var(--acc) }
@media (max-width:640px){ .g2.cycles{ grid-template-columns:1fr } }

/* ---------- movimento: entradas escalonadas dentro dos blocos revelados ---------- */
.cmp .hd > *, .cmp .rows li{ transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(.12s + var(--k,0) * 50ms) }
html.js .cmp:not(.in) .hd > *, html.js .cmp:not(.in) .rows li{ opacity:0; transform:translateY(12px) }
.cmp.settled .hd > *, .cmp.settled .rows li{ transition-delay:0s }
.card.cycle .rw{ transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(.2s + var(--k,0) * 80ms) }
html.js .card.cycle:not(.in) .rw{ opacity:0; transform:translateX(-8px) }
.mosaic .tile{ transition:transform .6s var(--ease), box-shadow .6s var(--ease), opacity .8s var(--ease); transition-delay:calc(var(--k,0) * 80ms) }
html.js .mosaic:not(.in) .tile{ opacity:0; transform:translateY(22px) scale(.985) }
.mosaic.settled .tile{ transition-delay:0s }
.essGrid .ess{ transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(.1s + var(--k,0) * 110ms) }
html.js .essGrid:not(.in) .ess{ opacity:0; transform:translateY(14px) }
.essGrid.settled .ess{ transition-delay:0s }
/* FAQ: abre e fecha com altura animada e resposta em fade */
.faqs details .wrapA{ display:grid; grid-template-rows:0fr; padding-bottom:0; transition:grid-template-rows .42s var(--ease), padding-bottom .42s var(--ease) }
.faqs details.on .wrapA{ grid-template-rows:1fr; padding-bottom:18px }
.faqs details .wrapA > .a{ padding-bottom:0 }
.faqs details .wrapA > .a{ min-height:0; overflow:hidden; opacity:0; transform:translateY(-4px); transition:opacity .32s var(--ease), transform .32s var(--ease) }
.faqs details.on .wrapA > .a{ opacity:1; transform:none; transition-delay:.08s }
.faqs details .wrapA > .a{ transition-delay:0s }
.faqs summary{ transition:color .2s var(--ease) } .faqs summary:hover{ color:var(--acc) } .faqs summary:hover i{ border-color:var(--acc) }
.faqs summary i{ transition:transform .45s var(--ease), border-color .25s var(--ease), background .25s var(--ease) }
.faqs details.on summary i{ background:color-mix(in oklab, var(--acc) 12%, transparent) }
@media (prefers-reduced-motion:reduce){
  .cmp .hd > *, .cmp .rows li, .card.cycle .rw, .mosaic .tile, .essGrid .ess, .tier .extra > span, .faqs details .wrapA, .faqs details .wrapA > .a{ transition:none !important }
}

/* texto legal: tabela e listas */
.prose table{ width:100%; border-collapse:collapse; font-size:15px; margin:8px 0 24px } .prose th{ text-align:left; font-weight:500; padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px; letter-spacing:.02em; color:var(--dim) }
.prose td{ padding:11px 12px; border-bottom:1px solid var(--line2); color:var(--mut); vertical-align:top; line-height:1.5 } .prose td:last-child{ white-space:nowrap; color:var(--ink) }
.prose ul{ padding-left:20px; margin-bottom:16px } .prose li{ margin-bottom:8px }
@media (max-width:560px){ .prose td:last-child{ white-space:normal } }

/* aceite dos termos no cadastro */
.fld.chk label{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:14px; color:var(--mut); line-height:1.5 }
.fld.chk input{ appearance:none; width:18px; height:18px; flex:none; margin-top:2px; border:1px solid var(--line); border-radius:5px; background:var(--paper); display:grid; place-items:center; transition:border-color .2s var(--ease), background .2s var(--ease) }
.fld.chk input::after{ content:''; width:10px; height:6px; border:2px solid var(--acc-on); border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px) scale(.6); opacity:0; transition:opacity .15s, transform .2s var(--ease) }
.fld.chk input:checked{ background:var(--acc); border-color:var(--acc) } .fld.chk input:checked::after{ opacity:1; transform:rotate(-45deg) translate(1px,-1px) scale(1) }
.fld.chk input:focus-visible{ outline:2px solid var(--acc); outline-offset:2px } .fld.chk.bad input{ border-color:var(--bad) }
.fld.chk .link{ font-size:inherit }