/* usetesc.com — início: topo verde com a palavra que gira e o quadro "A semana da Casa Andrade".
   Mockups aprovados: docs/mockups/SiteInicioPropostaE4.dc.html (computador) e SiteInicioE4Mobile.dc.html
   (celular). A palavra do título, a coluna em destaque e a frase do bloco giram juntas (12,5 s). */
:root{--ini-bg:#FFF4EA;--ini-claro:#FFF4EA;--ini-hero:radial-gradient(120% 100% at 50% 0%,#17594F 0%,#125249 55%,#0F4C47 100%);
--k-off:#4B5563;--k-ana:#1F6F6A;--k-joao:#3B5BA9;--k-maria:#A8481A;--k-pedro:#7A4FB5;--k-lucia:#1F7A70;
--pilula-bg:#FFE3CC;--pilula-borda:#C2571A;--pilula-fg:#8A3F0E;--marca-verde:#C5E3DD;--marca-laranja:#FFF4EA;--bloco-borda:#C2571A;--mk:#FFD9B3;--faixa-a:rgba(188,232,216,.22);--faixa-b:rgba(188,232,216,.13);--faixa-c:rgba(188,232,216,.1);--faixa-linha:rgba(31,111,106,.05);--fx-bg:#FFFCF8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ini-bg:var(--bg);--ini-hero:radial-gradient(120% 100% at 50% 0%,#164A43 0%,#123B37 55%,#0E302D 100%);
--k-off:var(--muted);--k-ana:#8FD1C8;--k-joao:#A9C4FF;--k-maria:#FFB27A;--k-pedro:#D9BFFF;--k-lucia:#8CC8C1;
--pilula-bg:var(--accent-bg);--pilula-borda:var(--accent);--pilula-fg:var(--accent-fg);--marca-verde:rgba(143,209,200,.22);--marca-laranja:rgba(255,154,87,.22);--bloco-borda:var(--accent);--mk:rgba(255,154,87,.3);--faixa-a:rgba(143,209,200,.09);--faixa-b:rgba(143,209,200,.05);--faixa-c:rgba(143,209,200,.04);--faixa-linha:rgba(143,209,200,.08);--fx-bg:var(--surface)}}
:root[data-theme="dark"]{--ini-bg:var(--bg);--ini-hero:radial-gradient(120% 100% at 50% 0%,#164A43 0%,#123B37 55%,#0E302D 100%);
--k-off:var(--muted);--k-ana:#8FD1C8;--k-joao:#A9C4FF;--k-maria:#FFB27A;--k-pedro:#D9BFFF;--k-lucia:#8CC8C1;
--pilula-bg:var(--accent-bg);--pilula-borda:var(--accent);--pilula-fg:var(--accent-fg);--marca-verde:rgba(143,209,200,.22);--marca-laranja:rgba(255,154,87,.22);--bloco-borda:var(--accent);--mk:rgba(255,154,87,.3);--faixa-a:rgba(143,209,200,.09);--faixa-b:rgba(143,209,200,.05);--faixa-c:rgba(143,209,200,.04);--faixa-linha:rgba(143,209,200,.08);--fx-bg:var(--surface)}

body.ini{background:var(--ini-bg)}

/* Cabeçalho por cima do verde */
.hdv{position:absolute;top:5px;left:0;right:0;background:transparent;border-bottom:0}
.hdv .brand b{color:#fff}
.hdv .logo-claro{display:block;background:var(--ini-claro);border-radius:11px;padding:5px;width:40px;height:40px}
.hdv .logo-escuro{display:none}
.hdv .nav a{color:#CFE6E2}
.hdv .nav a:hover{color:#fff;background:rgba(255,255,255,.10)}
.hdv .tema{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.hdv .tema button{color:#CFE6E2}
.hdv .tema button:hover{color:#fff}
.hdv .tema button[aria-pressed="true"]{background:var(--ini-claro);border-color:var(--ini-claro);color:#0F4C47}
.hdv .btn1{background:var(--ini-claro);color:#0F4C47}
.hdv .menu-btn{background:transparent;border-color:var(--ini-claro);color:var(--ini-claro)}
.hdv>.wrap>.brand:focus-visible,.hdv .hd-dir>a:focus-visible,.hdv .menu-btn:focus-visible,.hdv .nav a:focus-visible,.hdv .tema button:focus-visible,.ini-hero :focus-visible{outline-color:#FFB27A;outline-offset:3px}

/* Topo verde */
.ini-hero{position:relative;background:var(--ini-hero);color:#fff;text-align:center;padding:141px 0 150px}
.faixa{position:absolute;left:0;right:0;top:0;display:flex;height:5px}
.faixa span{flex:1}
.faixa span:nth-child(1){background:#2E9C8F}.faixa span:nth-child(2){background:#6F8FD6}.faixa span:nth-child(3){background:#FF8A3D}.faixa span:nth-child(4){background:#B392E6}
.ini-hero .wrap{display:flex;flex-direction:column;align-items:center;gap:26px}
.ini-t{margin:0;font:800 60px/68px Nunito,system-ui,sans-serif;letter-spacing:-.02em;color:#fff}
.giro{--gh:1.36em;display:inline-block;height:var(--gh);margin:-.162em 0;overflow:hidden;vertical-align:bottom;font-size:112px;letter-spacing:-.035em}
.giro-fita{display:block;animation:giro 12.5s cubic-bezier(.7,0,.3,1) infinite}
.giro-fita span{display:block;height:var(--gh);line-height:var(--gh)}
.w-presenca{color:#8FD1C8}.w-rotina{color:#A9C4FF}.w-idade,.w-saude{color:#FFB27A}.w-pref{color:#D9BFFF}
.ini-lead{max-width:34em;font-size:var(--fs-title);line-height:29px;color:#CFE6E2}
.ini-acoes{display:flex;gap:12px;justify-content:center}
.btn-claro{background:var(--ini-claro);color:#0F4C47;border:2px solid var(--ini-claro)}
.btn-linha{background:transparent;color:var(--ini-claro);border:1.5px solid var(--ini-claro)}

/* Quadro da semana */
.ini-quadro{position:relative;z-index:1;margin-top:-112px}
.quadro{background:var(--surface);border:1.5px solid var(--teal);border-radius:28px;padding:32px 40px 30px;display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:center;box-shadow:0 30px 60px -30px rgba(15,76,71,.55)}
.quadro-g{display:flex;flex-direction:column;gap:14px}
.pilula{margin:0;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font:800 var(--fs-cardTitle)/24px Nunito,system-ui,sans-serif;color:var(--pilula-fg)}
.pilula svg{flex-shrink:0}
.marca{padding:0 4px;margin:0 -4px;background:linear-gradient(transparent 52%,var(--marca-verde) 52%,var(--marca-verde) 92%,transparent 92%)}
.marca.lj{background:linear-gradient(transparent 52%,var(--marca-laranja) 52%,var(--marca-laranja) 92%,transparent 92%)}
.colunas{display:flex;gap:14px;align-items:flex-end}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.col .num{font:800 var(--fs-title)/1 Nunito,system-ui,sans-serif;color:var(--k-off)}
.col .num small{font-size:var(--fs-bodySmall);font-weight:700}
.col .area{width:100%;height:168px;display:flex;align-items:flex-end}
.col .bar{width:100%;border-radius:14px 14px 6px 6px;opacity:.32;box-shadow:inset 0 2px 0 rgba(255,255,255,.45)}
.col .av{width:35px;height:35px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-body);font-weight:700;color:#fff}
.col b{font-size:var(--fs-body);line-height:18px}
.col .sub{position:relative;height:32px;width:100%;text-align:center;font-size:var(--fs-caption);line-height:18px;color:var(--muted)}
.col .tag{position:absolute;top:0;left:50%;display:block;width:calc(100% + 24px);height:100%;padding:0;border-radius:0;transform:translateX(-50%);background:var(--surface);font-size:var(--fs-caption);font-weight:700;letter-spacing:normal;line-height:16px;text-align:center;text-wrap:balance;opacity:0}
.p-ana .bar{height:88.7%;background:linear-gradient(180deg,#83AFAD 0%,#1F6F6A 70%)}.p-ana .av{background:#1F6F6A}
.p-joao .bar{height:83.9%;background:linear-gradient(180deg,#93A4CF 0%,#3B5BA9 70%)}.p-joao .av{background:#3B5BA9}
.p-maria .bar{height:97%;background:linear-gradient(180deg,#F2AC83 0%,#E8691F 70%)}.p-maria .av{background:#C2571A}
.p-pedro .bar{height:43.5%;background:linear-gradient(180deg,#B59ED6 0%,#7A4FB5 70%)}.p-pedro .av{background:#7A4FB5}
.p-lucia .bar{height:28%;background:linear-gradient(180deg,#8CC8C1 0%,#2E9C8F 70%)}.p-lucia .av{background:#1F7A70}
.p-ana .tag{color:var(--k-ana)}.p-joao .tag{color:var(--k-joao)}.p-maria .tag{color:var(--k-maria)}.p-pedro .tag{color:var(--k-pedro)}.p-lucia .tag{color:var(--k-lucia)}
/* Sem animação, fica parado no João (a primeira frase do bloco). */
.p-joao .bar{opacity:1;transform:translateY(-6px)}.p-joao .num{color:var(--k-joao)}.p-joao .tag{opacity:1}
.por-que{display:flex;flex-direction:column;gap:16px;background:var(--tint);border:1.5px solid var(--bloco-borda);border-radius:22px;padding:18px 18px 8px}
.por-que-t{display:flex;align-items:center;gap:10px;margin:0;font:800 var(--fs-body)/22px Nunito,system-ui,sans-serif;color:var(--ink)}
.por-que-t .q{width:29px;height:29px;border-radius:999px;background:var(--teal);color:var(--on-teal);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.frases{display:grid;padding-bottom:10px}
.frases p{grid-area:1/1;padding:0 2px;font-size:var(--fs-title);line-height:30px;color:var(--text);opacity:0}
.frases p:first-child{opacity:1}
.frases b{font-family:Nunito,system-ui,sans-serif}
.n-ana{color:var(--k-ana)}.n-joao{color:var(--k-joao)}.n-maria{color:var(--k-maria)}.n-pedro{color:var(--k-pedro)}.n-lucia{color:var(--k-lucia)}

.p-ana .bar{animation:col_ana 12.5s cubic-bezier(.3,.7,.2,1) infinite}.p-ana .num{animation:num_ana 12.5s ease-in-out infinite}.p-ana .tag{animation:tag_ana 12.5s ease-in-out infinite}
.p-joao .bar{animation:col_joao 12.5s cubic-bezier(.3,.7,.2,1) infinite}.p-joao .num{animation:num_joao 12.5s ease-in-out infinite}.p-joao .tag{animation:tag_joao 12.5s ease-in-out infinite}
.p-maria .bar{animation:col_maria 12.5s cubic-bezier(.3,.7,.2,1) infinite}.p-maria .num{animation:num_maria 12.5s ease-in-out infinite}.p-maria .tag{animation:tag_maria 12.5s ease-in-out infinite}
.p-pedro .bar{animation:col_pedro 12.5s cubic-bezier(.3,.7,.2,1) infinite}.p-pedro .num{animation:num_pedro 12.5s ease-in-out infinite}.p-pedro .tag{animation:tag_pedro 12.5s ease-in-out infinite}
.p-lucia .bar{animation:col_lucia 12.5s cubic-bezier(.3,.7,.2,1) infinite}.p-lucia .num{animation:num_lucia 12.5s ease-in-out infinite}.p-lucia .tag{animation:tag_lucia 12.5s ease-in-out infinite}
.frases p:nth-child(1){animation:cap_0 12.5s ease-in-out infinite}.frases p:nth-child(2){animation:cap_1 12.5s ease-in-out infinite}.frases p:nth-child(3){animation:cap_2 12.5s ease-in-out infinite}.frases p:nth-child(4){animation:cap_3 12.5s ease-in-out infinite}.frases p:nth-child(5){animation:cap_4 12.5s ease-in-out infinite}
@keyframes giro{0%,17%{transform:translateY(-0.0000%)}20%,37%{transform:translateY(-16.6667%)}40%,57%{transform:translateY(-33.3333%)}60%,77%{transform:translateY(-50.0000%)}80%,97%{transform:translateY(-66.6667%)}100%{transform:translateY(-83.3333%)}}
@keyframes col_ana{0%{opacity:.32;transform:none}78.5%{opacity:.32;transform:none}81%{opacity:1;transform:translateY(-6px)}100%{opacity:1;transform:translateY(-6px)}}
@keyframes num_ana{0%{color:var(--k-off)}78.5%{color:var(--k-off)}81%{color:var(--k-ana)}100%{color:var(--k-ana)}}
@keyframes tag_ana{0%{opacity:0}78.5%{opacity:0}81%{opacity:1}100%{opacity:1}}
@keyframes col_joao{0%{opacity:1;transform:translateY(-6px)}18%{opacity:1;transform:translateY(-6px)}20.5%{opacity:.32;transform:none}100%{opacity:.32;transform:none}}
@keyframes num_joao{0%{color:var(--k-joao)}18%{color:var(--k-joao)}20.5%{color:var(--k-off)}100%{color:var(--k-off)}}
@keyframes tag_joao{0%{opacity:1}18%{opacity:1}20.5%{opacity:0}100%{opacity:0}}
@keyframes col_maria{0%{opacity:.32;transform:none}18.5%{opacity:.32;transform:none}21%{opacity:1;transform:translateY(-6px)}38%{opacity:1;transform:translateY(-6px)}40.5%{opacity:.32;transform:none}100%{opacity:.32;transform:none}}
@keyframes num_maria{0%{color:var(--k-off)}18.5%{color:var(--k-off)}21%{color:var(--k-maria)}38%{color:var(--k-maria)}40.5%{color:var(--k-off)}100%{color:var(--k-off)}}
@keyframes tag_maria{0%{opacity:0}18.5%{opacity:0}21%{opacity:1}38%{opacity:1}40.5%{opacity:0}100%{opacity:0}}
@keyframes col_pedro{0%{opacity:.32;transform:none}38.5%{opacity:.32;transform:none}41%{opacity:1;transform:translateY(-6px)}58%{opacity:1;transform:translateY(-6px)}60.5%{opacity:.32;transform:none}100%{opacity:.32;transform:none}}
@keyframes num_pedro{0%{color:var(--k-off)}38.5%{color:var(--k-off)}41%{color:var(--k-pedro)}58%{color:var(--k-pedro)}60.5%{color:var(--k-off)}100%{color:var(--k-off)}}
@keyframes tag_pedro{0%{opacity:0}38.5%{opacity:0}41%{opacity:1}58%{opacity:1}60.5%{opacity:0}100%{opacity:0}}
@keyframes col_lucia{0%{opacity:.32;transform:none}58.5%{opacity:.32;transform:none}61%{opacity:1;transform:translateY(-6px)}78%{opacity:1;transform:translateY(-6px)}80.5%{opacity:.32;transform:none}100%{opacity:.32;transform:none}}
@keyframes num_lucia{0%{color:var(--k-off)}58.5%{color:var(--k-off)}61%{color:var(--k-lucia)}78%{color:var(--k-lucia)}80.5%{color:var(--k-off)}100%{color:var(--k-off)}}
@keyframes tag_lucia{0%{opacity:0}58.5%{opacity:0}61%{opacity:1}78%{opacity:1}80.5%{opacity:0}100%{opacity:0}}
@keyframes cap_0{0%{opacity:1;transform:none}18%{opacity:1;transform:none}20.5%{opacity:0;transform:translateY(8px)}100%{opacity:0;transform:translateY(8px)}}
@keyframes cap_1{0%{opacity:0;transform:translateY(8px)}18.5%{opacity:0;transform:translateY(8px)}21%{opacity:1;transform:none}38%{opacity:1;transform:none}40.5%{opacity:0;transform:translateY(8px)}100%{opacity:0;transform:translateY(8px)}}
@keyframes cap_2{0%{opacity:0;transform:translateY(8px)}38.5%{opacity:0;transform:translateY(8px)}41%{opacity:1;transform:none}58%{opacity:1;transform:none}60.5%{opacity:0;transform:translateY(8px)}100%{opacity:0;transform:translateY(8px)}}
@keyframes cap_3{0%{opacity:0;transform:translateY(8px)}58.5%{opacity:0;transform:translateY(8px)}61%{opacity:1;transform:none}78%{opacity:1;transform:none}80.5%{opacity:0;transform:translateY(8px)}100%{opacity:0;transform:translateY(8px)}}
@keyframes cap_4{0%{opacity:0;transform:translateY(8px)}78.5%{opacity:0;transform:translateY(8px)}81%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.ini-quadro+.sec{padding-top:88px}

@media (max-width:960px){
  .ini-t{font-size:46px;line-height:54px}
  .giro{font-size:84px;margin:-.156em 0}
  .quadro{grid-template-columns:1fr;gap:28px;padding:28px}
  .frases p{font-size:var(--fs-cardTitle);line-height:28px}
}
@media (max-width:880px){
  .js .hdv.aberto .menu .nav a{color:var(--text)}
  .js .hdv.aberto .menu .nav a:hover{color:var(--text);border-color:var(--ink)}
  .js .hdv.aberto .tema{background:var(--bg);border-color:var(--line)}
  .js .hdv.aberto .tema button{color:var(--muted)}
  .js .hdv.aberto .tema button[aria-pressed="true"]{background:var(--soft);border-color:var(--ink);color:var(--ink)}
  .js .hdv.aberto .menu :focus-visible{outline-color:var(--ink)}
}
@media (max-width:640px){
  .hdv .logo-claro{width:36px;height:36px;border-radius:10px}
  .ini-hero{padding:97px 0 104px}
  .ini-hero .wrap{gap:20px}
  .ini-t{font-size:var(--fs-display);line-height:38px;letter-spacing:-.015em}
  .giro{font-size:54px;margin:-.125em 0;letter-spacing:-.03em}
  .ini-lead{font-size:var(--fs-body);line-height:25px}
  .ini-acoes{flex-direction:column;gap:10px;width:100%}
  .ini-acoes .btn{width:100%;min-height:50px}
  .ini-quadro{margin-top:-76px}
  .quadro{border-radius:24px;padding:20px 16px 16px;gap:18px;box-shadow:0 24px 48px -28px rgba(15,76,71,.55)}
  .pilula{font-size:var(--fs-cardTitle);line-height:23px}
  .pilula svg{width:19px;height:19px}
  .colunas{gap:8px}
  .col{gap:6px}
  .col .num{font-size:var(--fs-title)}
  .col .num small{font-size:var(--fs-caption)}
  .col .area{height:128px}
  .col .bar{border-radius:12px 12px 5px 5px}
  .col .av{width:31px;height:31px;font-size:var(--fs-bodySmall)}
  .col b{font-size:var(--fs-bodySmall);line-height:16px}
  .col .sub{display:none}
  .por-que{border-radius:18px;padding:14px 14px 6px;gap:12px}
  .por-que-t{font-size:var(--fs-body)}
  .frases p{font-size:var(--fs-cardTitle);line-height:26px}
  .ini-quadro+.sec{padding-top:56px}
}
/* Botões do topo: hover com seta (mockup E4) */
.btn-claro,.btn-linha{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background-color .25s ease,border-color .25s ease,color .25s ease}
.seta{display:inline-flex;width:0;opacity:0;margin-left:-8px;overflow:hidden;transition:width .25s ease,opacity .25s ease,margin .25s ease}
@media (hover:hover){
  .btn-claro:hover{background:#fff;border-color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(0,0,0,.5),0 0 0 5px rgba(255,244,234,.22)}
  .btn-linha:hover{background:rgba(255,244,234,.14);border-color:#fff;color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(0,0,0,.55)}
  .btn-claro:hover .seta,.btn-linha:hover .seta{width:18px;opacity:1;margin-left:0}
}
.btn-claro:active,.btn-linha:active{transform:translateY(0);box-shadow:none}

/* "Três passos" e "Sua parte": marca-texto, faixa verde, cards com efeito */
.mk{padding:0 4px;margin:0 -4px;background:linear-gradient(transparent 58%,var(--mk) 58%,var(--mk) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.faixa-verde{background:radial-gradient(90% 140% at 50% 0%,var(--faixa-a) 0%,var(--faixa-b) 70%,var(--faixa-c) 100%);border-top:1px solid var(--faixa-linha);border-bottom:1px solid var(--faixa-linha)}
.recursos{gap:16px}
.recursos li.card{padding:20px}
/* Borda verde-escura no estado parado; o hover (.fx:hover, logo abaixo) continua mandando. */
.sec .card{border-color:var(--ink)}
.lead .quebra{display:block}
.fx{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease,background-color .3s ease;animation:sobe .6s ease-out backwards}
.fx::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#2E9C8F,#FF8A3D);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fx .ico,.fx .passo-n{transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,box-shadow .3s ease}
.fx h3.t{transition:color .3s ease}
@media (hover:hover){
  .fx:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(15,76,71,.45),0 2px 6px rgba(15,76,71,.08);border-color:var(--teal);background-color:var(--fx-bg)}
  .fx:hover::before{transform:scaleX(1)}
  .plano.fx:hover{border-color:var(--accent)}
  .fx:hover .ico{background:var(--accent-soft);transform:rotate(-10deg) scale(1.12);box-shadow:0 0 0 6px rgba(255,138,61,.15)}
  .fx:hover .passo-n{transform:scale(1.15);background:#FFB27A;color:#0F4C47;box-shadow:0 0 0 6px rgba(255,138,61,.18)}
  .fx:hover h3.t{color:var(--ink)}
}
.fx:nth-child(2){animation-delay:.08s}.fx:nth-child(3){animation-delay:.16s}.fx:nth-child(4){animation-delay:.24s}.fx:nth-child(5){animation-delay:.32s}.fx:nth-child(6){animation-delay:.4s}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Celular: efeitos acompanham a rolagem */
@media (max-width:640px){
  .recursos{gap:12px}
  #como,#como+.sec{overflow-x:clip}
  @supports (animation-timeline:view()){
    .fx{animation:entra linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
    .fx:nth-child(odd){--dx:-28px;--rot:-2deg}
    .fx:nth-child(even){--dx:28px;--rot:2deg}
    .fx::before{animation:barra linear both;animation-timeline:view();animation-range:cover 22% cover 48%}
    .fx .ico,.fx .passo-n{animation:surge linear both;animation-timeline:view();animation-range:entry 30% cover 38%}
    .mk{background-repeat:no-repeat;background-size:0% 100%;animation:pinta linear both;animation-timeline:view();animation-range:entry 60% cover 40%}
  }
}
@keyframes entra{from{opacity:0;transform:translate(var(--dx),48px) scale(.92) rotate(var(--rot))}to{opacity:1;transform:none}}
@keyframes barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes surge{from{opacity:0;transform:scale(.3) rotate(-120deg)}70%{opacity:1;transform:scale(1.15) rotate(8deg)}to{opacity:1;transform:none}}
@keyframes pinta{from{background-size:0% 100%}to{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){
  .giro-fita,.col .bar,.col .num,.col .tag,.frases p,.fx,.fx::before,.fx .ico,.fx .passo-n,.mk{animation:none!important}
  .fx::before{transform:scaleX(0)}
  .mk{background-size:100% 100%}
  .fx,.fx::before,.fx .ico,.fx .passo-n,.btn-claro,.btn-linha,.seta{transition:none}
}

/* "Casa de verdade" e "Planos" (regras de negócio, seções 18 a 21) */
.recursos.dois{grid-template-columns:repeat(2,minmax(0,1fr))}
.selo{align-self:flex-start;margin-top:6px;padding:3px 10px;border-radius:999px;background:var(--accent-bg);color:var(--accent-fg);font-size:var(--fs-caption);font-weight:600;line-height:18px}
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;margin:0;padding:0;list-style:none}
.plano{position:relative;display:flex;flex-direction:column;gap:6px;padding:28px 24px}
.plano h3.t{font-size:var(--fs-title)}
.plano .preco{margin:4px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plano .preco b{font-family:Nunito,system-ui,sans-serif;font-size:var(--fs-display);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.plano .preco span,.plano .anual{color:var(--muted);font-size:var(--fs-bodySmall)}
.plano .anual{margin:0}
.plano .itens{margin:14px 0 0;padding:16px 0 0;border-top:1px solid var(--line2);list-style:none;display:flex;flex-direction:column;gap:10px}
.plano .itens li{position:relative;padding-left:26px;font-size:var(--fs-body);line-height:22px}
.plano .itens li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:999px;background:var(--soft)}
.plano .itens li::after{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.plano .itens li.tudo{padding-left:0;font-weight:700;color:var(--ink)}
.plano .itens li.tudo::before,.plano .itens li.tudo::after{display:none}
.planos-nota{margin:24px 0 0;text-align:center;color:var(--muted);font-size:var(--fs-bodySmall);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.planos{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto}}
@media (max-width:640px){.recursos.dois{grid-template-columns:minmax(0,1fr)}#casa-real{overflow-x:clip}}
/* A animação de entrada inclina os cartões ainda fora da tela; sem o clip, no celular a página rolava para o lado. */
#conteudo{overflow-x:clip}
.card{min-width:0;overflow-wrap:break-word}

/* Baixe o app: cartão verde com texto e selos à esquerda e a tela Hoje do app à direita */
.baixar{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:48px;padding:56px 64px 0;border-radius:28px;background:var(--hero);color:var(--hero-fg);overflow:hidden}
.baixar-txt{padding-bottom:56px}
.baixar .cap{color:var(--hero-muted)}
.baixar .mk{--mk:rgb(255 138 61 / .3)}
.baixar .t{margin:8px 0 0;font:800 36px/44px Nunito,system-ui,sans-serif;color:var(--hero-fg);text-wrap:balance}
.baixar .lead{margin:12px 0 0;color:var(--hero-muted);max-width:460px}
.baixar-itens{display:flex;flex-direction:column;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.baixar-itens li{display:flex;align-items:center;gap:10px;font-weight:600}
.baixar-itens svg{flex-shrink:0;padding:3px;border-radius:999px;background:var(--accent);color:#1b1b1b}
.lojas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.baixar-cel{align-self:end;justify-self:center;width:300px;padding:12px 12px 0;border-radius:44px 44px 0 0;background:#0b0f0e;box-shadow:0 -10px 50px rgba(0,0,0,.25)}
.baixar-cel img{display:block;width:100%;height:auto;aspect-ratio:600/1000;object-fit:cover;object-position:top;border-radius:34px 34px 0 0}
@media (max-width:860px){
  .baixar{grid-template-columns:1fr;gap:8px;padding:36px 24px 0;text-align:left}
  .baixar-txt{padding-bottom:16px}
  .baixar .t{font-size:var(--fs-titleLg);line-height:32px}
  .lojas{flex-direction:column;align-items:stretch}.loja{justify-content:center}
  .baixar-cel{width:min(260px,80%);margin-top:16px}
}

/* "Por que TESC?": TASK, TÉSQUI, TESC. Cadeia de três cartões com setas entre eles (setas decorativas, aria-hidden). */
.nome-cadeia{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:12px;margin:0;padding:0;list-style:none}
.nome-cadeia .card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:28px 20px;text-align:center}
.nome-palavra{font:800 var(--fs-display)/1.1 Nunito,system-ui,sans-serif;letter-spacing:.02em;color:var(--ink)}
.nome-nota{font-size:var(--fs-bodySmall);line-height:1.4;color:var(--muted)}
.nome-seta{display:flex;align-items:center;justify-content:center;color:var(--ink)}
.sec .nome-final{background:var(--accent-bg);border-color:var(--accent)}
.nome-final img{margin-bottom:2px}
.nome-final .nome-nota{color:var(--accent-fg)}
@media (max-width:760px){
  .nome-cadeia{grid-template-columns:minmax(0,1fr);gap:8px}
  .nome-cadeia .card{padding:20px 16px}
  .nome-seta svg{transform:rotate(90deg)}
}

/* "Conheça os outros produtos da Três Limões": três cartões no formato "Capa" do Formatos v31 (cor do produto,
   logo no alto, pergunta como título, ilustração num painel com a base na borda de baixo e contorno na silhueta).
   As cores são as do próprio produto nos dois temas (tokens.json do v31): cada cartão traz o texto que passa AA em cima dela.
   As medidas em cqw seguem o v31 (cartão = container). Sem hover do .fx: o chamado do TESC continua sendo o principal. */
.outros{padding:56px 0 64px}
.outros .wrap{display:flex;flex-direction:column;gap:24px}
.outros h2.t{font-size:var(--fs-title);line-height:28px}
.outros-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.outros-card{--bg:#F4DA96;--fg:#211D18;--ln:#ddb346;--lo:#ebca76;container-type:inline-size;border-radius:16px;border:1px solid var(--ink);background:var(--bg);color:var(--fg);box-shadow:0 1px 3px var(--shadow);font-family:Epilogue,system-ui,sans-serif}
.outros--coda{--bg:#F9B8A5;--ln:#e46f4d;--lo:#f19b82}
.outros--player3{--bg:#E9E4FA;--fg:#101014;--ln:#9783de;--lo:#c8bdef}
.outros-in{display:flex;flex-direction:column;height:100%;padding:6cqw 7cqw 5cqw}
.outros-topo{display:flex;align-items:center;gap:3cqw;min-height:12.5cqw}
.outros-topo img{display:block;height:12.5cqw;width:auto}
.outros-topo img.outros-coda{height:10.5cqw}
.outros-topo b{font-size:7.4cqw;line-height:1}
.outros--tuta .outros-topo b{font-family:Epilogue,system-ui,sans-serif;font-weight:800}
.outros--player3 .outros-topo b{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700}
.outros-q{margin:6cqw 0 0;font-size:8cqw;line-height:1.12;color:inherit}
.outros--tuta .outros-q{font-family:Epilogue,system-ui,sans-serif;font-weight:800}
.outros--coda .outros-q{font-family:"Playfair Display",Georgia,serif;font-weight:600}
.outros--player3 .outros-q{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700}
.outros-q .und{display:inline-block;padding:0 .12em;margin:0 -.12em;border-radius:.06em;background:linear-gradient(transparent 68%,color-mix(in srgb,var(--ln) 20%,transparent) 68%,color-mix(in srgb,var(--ln) 20%,transparent) 92%,transparent 92%)}
.outros-painel{position:relative;flex:1;min-height:56cqw;margin-top:5cqw;border-radius:4cqw;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ln) 20%,transparent)}
.outros-painel img{position:absolute;left:50%;bottom:-3.5cqw;transform:translateX(-50%);height:108%;width:auto;max-width:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(.22cqw 0 0 var(--lo)) drop-shadow(-.22cqw 0 0 var(--lo)) drop-shadow(0 .22cqw 0 var(--lo)) drop-shadow(0 -.22cqw 0 var(--lo))}
.outros-pe{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-top:3cqw}
.outros-tag{font:700 12px/1.2 Inter,system-ui,sans-serif;padding:4px 10px;border:1px solid var(--fg);border-radius:999px;white-space:nowrap}
.outros-lk{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:700 var(--fs-body)/1.2 Inter,system-ui,sans-serif;color:var(--fg);text-underline-offset:4px;text-decoration-thickness:1.5px}
.outros-lk:hover{text-decoration-thickness:2.5px}
.outros-lk:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:6px}
@media (min-width:761px){.outros-q{min-height:3.36em}}
@media (max-width:760px){
  .outros{padding:40px 0 48px}
  .outros-lista{grid-template-columns:minmax(0,1fr)}
  .outros-card{max-width:420px;width:100%;margin:0 auto}
}