/* ==========================================================================
   VERSAO E — ONDA
   Organica e macia: nada tem canto vivo, as secoes se separam por curva em
   vez de linha reta, e o fundo tem manchas de cor que se movem devagar.
   E a mais acolhedora das seis, boa para quem atende filhote, idoso ou
   tem publico de tutor mais afetivo.
   Movimento: as pecas sobem flutuando e as manchas derivam sem parar.
   ========================================================================== */
#site-e{
  --ink:#3B2A4A; --bg:#FDF9FB; --lilas:#C9B6F0; --menta:#A8E6CF;
  --pessego:#FFD3B6; --rosa:#FFAAA6; --mut:#6E5C7D;
  --env:1120px; --padSecE:clamp(60px,8vw,110px); --padLatE:clamp(20px,5vw,36px);
  --r:34px; --rs:22px;
  --disp:'Baloo 2',system-ui,sans-serif;
  --corpo:'Nunito',system-ui,sans-serif;
  --mono:'DM Mono','Space Mono',monospace;
  background:var(--bg); color:var(--ink);
  font-family:var(--corpo); font-size:17.5px; line-height:1.7;
}
html[data-site="e"] body{background:#FDF9FB}

#site-e a{color:#8E6BC9; text-decoration:none}
#site-e a:hover{text-decoration:underline}
#site-e a:focus-visible,#site-e summary:focus-visible,#site-e button:focus-visible{
  outline:3px solid var(--lilas); outline-offset:3px}
#site-e ::selection{background:var(--menta); color:var(--ink)}

.e-env{max-width:var(--env); margin-inline:auto; padding-inline:var(--padLatE)}

.e-faixa{background:linear-gradient(90deg,var(--lilas),var(--menta),var(--pessego),var(--lilas));
  background-size:300% 100%; animation:eFaixa 24s linear infinite;
  color:var(--ink); font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; padding:11px 16px; text-align:center;
  white-space:nowrap; overflow:hidden}
@keyframes eFaixa{ to{background-position:300% 0} }

/* ---- manchas de fundo que derivam ---- */
.e-pts{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.e-pts::before,.e-pts::after{content:""; position:absolute; border-radius:50%; filter:blur(48px)}
.e-pts::before{width:340px; height:340px; background:var(--lilas); opacity:.45;
  top:-70px; left:-60px; animation:eDeriva 22s ease-in-out infinite alternate}
.e-pts::after{width:300px; height:300px; background:var(--menta); opacity:.45;
  bottom:-80px; right:-50px; animation:eDeriva 27s ease-in-out infinite alternate-reverse}
@keyframes eDeriva{ to{transform:translate(46px,32px) scale(1.12)} }

.e-topo{position:sticky; top:0; z-index:60; background:rgba(253,249,251,.9); backdrop-filter:blur(10px)}
.e-topo__i{max-width:var(--env); margin-inline:auto; padding:14px var(--padLatE);
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.e-logo{display:flex; flex-direction:column; min-width:0; color:var(--ink)}
.e-logo:hover{text-decoration:none}
.e-logo__n{font-family:var(--disp); font-weight:800; font-size:24px; line-height:1.05}
.e-logo__s{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut)}
.e-logo__q{display:none}
.e-menu{display:flex; gap:24px; font-size:15.5px; font-weight:700}
.e-menu a{color:var(--ink)}

.e-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:999px; font-family:var(--corpo); font-weight:800;
  font-size:16.5px; padding:15px 30px; background:var(--ink); color:#fff;
  cursor:pointer; box-shadow:0 6px 18px rgba(59,42,74,.18);
  transition:transform .18s ease, box-shadow .18s ease}
.e-btn--a1{background:var(--lilas); color:var(--ink); box-shadow:0 6px 18px rgba(201,182,240,.5)}
.e-btn--a2{background:var(--rosa); color:var(--ink)}
.e-btn--br{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 2px var(--lilas)}
.e-btn--ink{background:var(--ink)}
.e-btn--p{font-size:15px; padding:11px 22px}

.e-hero{position:relative; padding:clamp(40px,7vw,86px) 0 clamp(70px,10vw,130px); overflow:hidden}
.e-hero__g{position:relative; z-index:1; max-width:var(--env); margin-inline:auto;
  padding-inline:var(--padLatE); display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(26px,5vw,60px); align-items:center}
.e-rot{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; background:#fff; border-radius:999px;
  padding:7px 15px; color:var(--mut); margin-bottom:20px; box-shadow:0 3px 10px rgba(59,42,74,.08)}
.e-h1{font-family:var(--disp); font-weight:800; font-size:clamp(36px,6vw,66px);
  line-height:1.06; margin:0 0 20px}
.e-mk{background:var(--menta); border-radius:14px; padding:.02em .18em}
.e-mk--1{background:var(--menta)} .e-mk--3{background:var(--pessego)}
.e-lead{font-size:18px; color:var(--mut); margin:0 0 28px; max-width:44ch}
.e-linha{display:flex; flex-wrap:wrap; gap:14px}
.e-dados{display:flex; gap:16px; margin-top:30px; flex-wrap:wrap}
.e-dados > div{background:#fff; border-radius:var(--rs); padding:16px 20px;
  box-shadow:0 4px 16px rgba(59,42,74,.07)}
.e-dado__v{font-family:var(--disp); font-weight:800; font-size:22px; line-height:1.1}
.e-dado__r{font-size:13px; color:var(--mut)}
.e-dado--d{background:var(--pessego) !important}
.e-hero__f{position:relative}
.e-mold{border-radius:44% 56% 52% 48% / 48% 44% 56% 52%; overflow:hidden;
  box-shadow:0 18px 44px rgba(59,42,74,.16); animation:eBolha 16s ease-in-out infinite}
@keyframes eBolha{ 50%{border-radius:52% 48% 44% 56% / 56% 52% 48% 44%} }
.e-mold img{display:block; width:100%}
.e-etq{position:absolute; z-index:2; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; background:#fff;
  border-radius:999px; padding:8px 14px; box-shadow:0 4px 14px rgba(59,42,74,.14)}
.e-etq--a{top:8px; left:-6px; animation:eFlut 6s ease-in-out infinite}
.e-etq--b{bottom:14px; right:-6px; background:var(--menta); animation:eFlut 7.5s ease-in-out infinite reverse}
@keyframes eFlut{ 50%{transform:translateY(-9px)} }

/* ---- secoes separadas por curva ---- */
.e-sec{position:relative; padding:var(--padSecE) 0}
.e-sec--br{background:#fff; border-radius:var(--r) var(--r) 0 0; margin-top:-30px}
.e-sec--bg{background:#F6EFFA}
.e-sec--mint{background:#EFFBF5}
.e-sec--esc{background:var(--ink); color:#F6EFFA; border-radius:var(--r)}
.e-sec--esc .e-ap{color:#C9B6D6}
.e-sec--esc .e-card{background:#4C3860}
.e-sec--esc .e-card__p{color:#C9B6D6}
.e-sec--acc{background:linear-gradient(135deg,var(--lilas),var(--menta)); border-radius:var(--r)}
.e-cab{max-width:var(--env); margin:0 auto clamp(28px,4vw,48px); padding-inline:var(--padLatE);
  display:grid; grid-template-columns:1.3fr .7fr; gap:24px; align-items:end}
.e-tit{font-family:var(--disp); font-weight:800; font-size:clamp(28px,4.4vw,46px);
  line-height:1.1; margin:10px 0 0}
.e-ap{font-size:16px; color:var(--mut); margin:0}

.e-grade{max-width:var(--env); margin-inline:auto; padding-inline:var(--padLatE);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px}
.e-card{background:#fff; border-radius:var(--r); padding:28px 26px 30px;
  box-shadow:0 6px 22px rgba(59,42,74,.07); transition:transform .2s ease, box-shadow .2s ease}
.e-card__n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--mut); margin-bottom:12px}
.e-card__h{font-family:var(--disp); font-weight:800; font-size:21px; line-height:1.15; margin:0 0 8px}
.e-card__p{font-size:15.5px; color:var(--mut); margin:0}

.e-dest{grid-column:1/-1; background:linear-gradient(135deg,var(--pessego),var(--rosa));
  border-radius:var(--r); padding:clamp(30px,4.5vw,52px); display:grid; gap:18px;
  position:relative; overflow:hidden}
.e-dest__m{position:absolute; right:-14px; bottom:-24px; width:180px; height:180px; opacity:.2; fill:#fff}
.e-dest__s{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase}
.e-dest__h{font-family:var(--disp); font-weight:800; font-size:clamp(24px,3.6vw,38px); line-height:1.1; margin:0}

.e-duo{max-width:var(--env); margin-inline:auto; padding-inline:var(--padLatE);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center}
.e-passos{position:relative; padding-left:48px}
.e-passos__l{position:absolute; left:16px; top:6px; bottom:6px; width:3px;
  background:linear-gradient(var(--lilas),var(--menta)); border-radius:3px}
.e-passo{position:relative; padding-bottom:26px}
.e-passo__n{position:absolute; left:-48px; width:34px; height:34px; border-radius:50%;
  background:var(--lilas); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:700}
.e-passo__h{font-family:var(--disp); font-weight:800; font-size:20px; margin:0 0 4px}
.e-passo__p{font-size:15.5px; color:var(--mut); margin:0}
.e-selo{display:inline-flex; gap:8px; align-items:center; background:#fff; border-radius:999px;
  padding:9px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; box-shadow:0 3px 12px rgba(59,42,74,.09)}
.e-pat{opacity:.08}

.e-faq details{background:#fff; border-radius:var(--rs); padding:18px 24px; margin-bottom:12px;
  box-shadow:0 4px 16px rgba(59,42,74,.06)}
.e-faq summary{display:flex; gap:14px; align-items:center; cursor:pointer; list-style:none;
  font-family:var(--disp); font-weight:800; font-size:18.5px}
.e-faq summary::-webkit-details-marker{display:none}
.e-faq__n{font-family:var(--mono); font-size:11px; color:#8E6BC9; flex:none}
.e-faq__q{flex:1}
.e-faq__m{width:28px; height:28px; border-radius:50%; background:var(--menta);
  display:flex; align-items:center; justify-content:center; font-size:17px;
  transition:transform .3s ease}
.e-faq details[open] .e-faq__m{transform:rotate(135deg)}
.e-faq p{margin:12px 0 0; color:var(--mut); font-size:16px}

.e-depo{background:#fff; border-radius:var(--r); padding:26px; font-size:18px;
  box-shadow:0 6px 22px rgba(59,42,74,.07)}
.e-depo__a{font-size:14px; color:var(--mut); margin-top:10px}
.e-estrelas{color:var(--rosa); letter-spacing:2px}
.e-form{display:grid; gap:12px}

.e-rod{background:var(--ink); color:#F6EFFA; padding:clamp(52px,8vw,84px) 0 32px;
  border-radius:var(--r) var(--r) 0 0}
.e-rod .e-env{display:grid; gap:24px}
.e-rod__l{font-family:var(--disp); font-weight:800; font-size:32px}
.e-rod__c p{color:#C9B6D6; margin:0}
.e-rod__k{display:flex; flex-wrap:wrap; gap:18px; margin-top:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em}
.e-rod a{color:var(--menta)}
.e-rod__f{margin-top:28px; padding-top:18px; border-top:1px solid #55406B;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:#9B87AC}

.e-zap{position:fixed; right:18px; bottom:78px; z-index:70; width:58px; height:58px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--menta); color:var(--ink); box-shadow:0 10px 26px rgba(168,230,207,.6);
  animation:eFlut 5s ease-in-out infinite}
.e-zap:hover{background:var(--lilas)}

#site-e .a-brinca{
  --laranja:var(--pessego); --fur-escuro:#E0A377; --coral:var(--rosa);
  --ameixa:var(--ink); --verde:var(--ink); --sombra-dog:#B9A6C8;
  --creme:#fff; --tinta:#fff; --n5:var(--lilas);
  --raio:var(--rs); --raioG:var(--r)}

#site-e .rv{transform:translateY(30px) scale(.98)}
#site-e .rv.on{transform:none}

@media (max-width:900px){ .e-hero__g,.e-cab,.e-duo{grid-template-columns:1fr} .e-menu{display:none}
  .e-etq--a{left:6px} .e-etq--b{right:6px} }
@media (max-width:560px){
  .e-topo__i{gap:12px} .e-logo__n{font-size:19px} .e-logo__s{display:none}
  .e-dados{gap:12px} .e-dados > div{flex:1 1 100%}
}
@media (prefers-reduced-motion: reduce){
  #site-e .rv{transform:none !important}
  .e-faixa,.e-pts::before,.e-pts::after,.e-mold,.e-etq--a,.e-etq--b,.e-zap{animation:none !important}
  .e-card,.e-btn{transition:none}
}

/* ==========================================================================
   HERO DA ONDA — COLUNA CENTRAL
   Composicao vertical e centralizada: o retrato vem PRIMEIRO, redondo e
   grande, e o texto desce embaixo dele. Nada fica lado a lado. E a
   diferenca estrutural que separa esta versao da Marcante.
   A secao termina numa curva de verdade, nao numa linha reta.
   Movimento: o retrato entra girando e crescendo, as etiquetas flutuam
   em volta e o titulo aparece palavra por palavra, saindo de um desfoque.
   ========================================================================== */
.e-hero{padding:clamp(30px,5vw,60px) 0 clamp(80px,12vw,150px)}
.e-coluna{position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; text-align:center; max-width:820px}
.e-retrato{position:relative; margin-bottom:clamp(24px,4vw,40px)}
.e-retrato__q{width:clamp(190px,34vw,290px); aspect-ratio:1; overflow:hidden;
  border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;
  box-shadow:0 22px 50px rgba(59,42,74,.2);
  opacity:0; transform:scale(.72) rotate(-8deg);
  animation:eEntra 1s cubic-bezier(.2,.8,.25,1.05) .1s forwards, eBolha 16s ease-in-out 1.2s infinite}
@keyframes eEntra{ to{opacity:1; transform:none} }
.e-retrato__q img{display:block; width:100%; height:100%; object-fit:cover}
.e-hero .e-etq{position:absolute; opacity:0}
.e-hero .e-etq--a{top:12%; left:-18%;
  animation:eSurge .5s ease .7s forwards, eFlut 6s ease-in-out 1.2s infinite}
.e-hero .e-etq--b{bottom:10%; right:-16%; background:var(--menta);
  animation:eSurge .5s ease .85s forwards, eFlut 7.5s ease-in-out 1.35s infinite reverse}
@keyframes eSurge{ to{opacity:1} }
.e-hero .e-rot{margin-bottom:16px}
.e-hero .e-h1{font-size:clamp(32px,6vw,60px); margin:0 0 18px; max-width:16ch}
.e-hero .e-lead{margin:0 auto 26px; max-width:52ch}
.e-hero .e-linha{justify-content:center}
.e-hero .e-dados{justify-content:center; margin-top:28px}

/* a palavra sai do desfoque */
#site-e .escrevendo-p .wrd{display:inline-block; opacity:0; filter:blur(9px);
  transform:translateY(.3em);
  animation:ePalavra .7s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(.45s + var(--i) * 85ms)}
@keyframes ePalavra{ to{opacity:1; filter:blur(0); transform:none} }

/* a curva que fecha a secao */
.e-curva{position:absolute; left:0; right:0; bottom:-1px; height:clamp(40px,7vw,90px);
  background:#fff; border-radius:100% 100% 0 0 / 100% 100% 0 0}
.e-hero{position:relative}
.e-sec--br{margin-top:0}

@media (max-width:620px){
  .e-hero .e-etq--a{left:-6%} .e-hero .e-etq--b{right:-4%}
}
@media (prefers-reduced-motion: reduce){
  .d-peca,.e-retrato__q,.e-hero .e-etq{animation:none !important;
    opacity:1 !important; transform:none !important; clip-path:none !important}
  #site-d .escrevendo-p .wrd,#site-e .escrevendo-p .wrd{animation:none !important;
    opacity:1 !important; filter:none !important; transform:none !important}
}

/* ==========================================================================
   COR DO TEXTO DOS BOTOES — CORRECAO DE PESO DE REGRA
   "#site-e a{color:#8E6BC9}" tem especificidade (1,0,1) e vencia
   ".e-btn{color:#fff}", que tem (0,1,0). Por isso o botao "Agendar consulta"
   aparecia com texto roxo em cima de roxo escuro.
   ========================================================================== */
#site-e a.e-btn{color:#fff}
#site-e a.e-btn--a1,#site-e a.e-btn--a2,#site-e a.e-btn--br{color:var(--ink)}
#site-e a.e-btn--ink{color:#fff}
#site-e a.e-btn:hover,#site-e a.e-btn:focus-visible{text-decoration:none}

/* ==========================================================================
   TONS DOS CARTOES — POR CLASSE, NAO POR POSICAO
   Antes o tom vinha de :nth-child(3n+1..3). Como uma das grades tem um
   destaque como primeiro filho e a outra nao, a contagem escorregava. Pior:
   na secao escura, o fundo pastel do :nth-child ganhava da regra da secao
   mas a cor do texto continuava clara, entao os titulos dos cartoes ficavam
   brancos em cima de lilas claro e desapareciam.
   Agora o tom e classe no HTML, e a cor do texto acompanha o cartao.
   ========================================================================== */
#site-e .e-card--li{background:#F3EBFF}
#site-e .e-card--me{background:#E4F8EF}
#site-e .e-card--pe{background:#FFF0E4}
#site-e .e-card,#site-e .e-card .e-card__h{color:var(--ink)}
#site-e .e-card .e-card__n,#site-e .e-card .e-card__p{color:var(--mut)}

/* ==========================================================================
   O CARTAO PRECISA APARECER
   Pastel claro sobre fundo quase branco nao lia como cartao. Ele ganha um
   contorno de um fio e uma sombra difusa de verdade, que e o repouso do
   gesto descrito abaixo.
   ========================================================================== */
.e-card{border:1px solid rgba(59,42,74,.09);
  box-shadow:0 2px 3px rgba(59,42,74,.05), 0 16px 30px -18px rgba(59,42,74,.45)}
#site-e .e-sec--esc .e-card{border-color:rgba(255,255,255,.14)}
.e-faq details{border:1px solid rgba(59,42,74,.09)}

/* ==========================================================================
   INTERACAO DA VERSAO ONDA — O PULINHO E O HALO
   Aqui o gesto e o oposto do da Marcante: nada de sombra dura. A peca da um
   pulinho com um leve exagero na volta (a curva de bezier passa de 1 e
   volta), afunda de verdade no clique, e em volta do botao acende um anel
   macio, no mesmo espirito das manchas de fundo que derivam.
   ========================================================================== */
.e-btn{position:relative;
  transition:transform .3s cubic-bezier(.34,1.5,.64,1), box-shadow .3s ease, filter .2s ease}
.e-btn::after{content:""; position:absolute; inset:-5px; border-radius:inherit;
  border:2px solid currentColor; opacity:0; transform:scale(.82);
  pointer-events:none;
  transition:opacity .38s ease, transform .38s cubic-bezier(.34,1.5,.64,1)}
.e-btn:hover{transform:translateY(-4px) scale(1.03)}
.e-btn:hover::after,.e-btn:focus-visible::after{opacity:.34; transform:scale(1)}
.e-btn:active{transform:translateY(0) scale(.955); transition-duration:.09s}

.e-card{transition:transform .3s cubic-bezier(.34,1.5,.64,1), box-shadow .3s ease}
.e-card:hover{transform:translateY(-7px);
  box-shadow:0 3px 5px rgba(59,42,74,.06), 0 26px 42px -20px rgba(59,42,74,.5)}
.e-card:active{transform:translateY(-2px) scale(.99); transition-duration:.09s}

.e-etq{transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.e-etq:hover{transform:translateY(-4px) scale(1.06)}

.e-faq details{transition:transform .3s cubic-bezier(.34,1.5,.64,1), box-shadow .3s ease}
.e-faq details:hover,.e-faq details[open]{transform:translateY(-3px);
  box-shadow:0 18px 30px -18px rgba(59,42,74,.5)}
.e-faq__m{transition:transform .35s cubic-bezier(.34,1.5,.64,1), background .25s ease}
.e-faq summary:hover .e-faq__m{transform:scale(1.12)}

@media (prefers-reduced-motion: reduce){
  .e-btn,.e-btn::after,.e-card,.e-etq,.e-faq details,.e-faq__m{transition:none}
  .e-btn:hover,.e-card:hover,.e-etq:hover,.e-faq details:hover{transform:none}
}

/* ==========================================================================
   ONDA — O CARTAO PRECISA LER COMO CARTAO
   A primeira tentativa foi so uma sombra difusa, e sombra difusa some
   quando o cartao e claro e o fundo tambem e claro: nao havia diferenca de
   luminosidade suficiente para o olho separar as duas superficies.
   Aqui a separacao passa a vir de tres coisas somadas, e nao de uma so:
     1. o fundo das secoes desce um tom, entao o cartao fica mais claro
        que o que esta atras dele;
     2. o cartao ganha um contorno de 2px no tom escuro da propria cor,
        que e o que da o ar de peca desenhada de proposito;
     3. a sombra fica mais curta e mais escura, colada na peca, em vez de
        um borrao largo e fraco.
   O contorno na cor do proprio cartao mantem o clima macio da versao. Um
   contorno cinza uniforme resolveria o contraste, mas deixaria a Onda com
   cara de formulario.
   ========================================================================== */
#site-e{--bg:#F6EFF5}
html[data-site="e"] body{background:#F6EFF5}
#site-e .e-sec--br{background:#F1E9F2}
#site-e .e-sec--bg{background:#EDE2F5}
#site-e .e-sec--mint{background:#E4F4EC}

#site-e .e-card{
  border:2px solid var(--fio-card,rgba(59,42,74,.14));
  box-shadow:0 3px 0 var(--fio-card,rgba(59,42,74,.14)),
             0 12px 20px -12px rgba(59,42,74,.45);
}
#site-e .e-card--li{background:#F6EFFF; --fio-card:#D7C2F2}
#site-e .e-card--me{background:#E9FAF2; --fio-card:#A9E0C6}
#site-e .e-card--pe{background:#FFF3E9; --fio-card:#F5C89F}

/* no repouso o cartao tem uma sombra solida curta embaixo do contorno; no
   hover ele sobe e a sombra vira difusa, que e o pulinho da versao */
#site-e .e-card:hover{
  box-shadow:0 1px 0 var(--fio-card,rgba(59,42,74,.14)),
             0 22px 34px -16px rgba(59,42,74,.5);
}

/* dentro da secao escura o contorno claro e que separa */
#site-e .e-sec--esc .e-card{border-color:rgba(255,255,255,.22)}
#site-e .e-sec--esc .e-card--li{--fio-card:rgba(215,194,242,.55)}
#site-e .e-sec--esc .e-card--me{--fio-card:rgba(169,224,198,.55)}
#site-e .e-sec--esc .e-card--pe{--fio-card:rgba(245,200,159,.55)}

/* o FAQ acompanha o mesmo desenho, senao ele volta a sumir no fundo */
#site-e .e-faq details{border:2px solid rgba(59,42,74,.13);
  box-shadow:0 3px 0 rgba(59,42,74,.13)}
#site-e .e-faq details:hover,#site-e .e-faq details[open]{
  box-shadow:0 1px 0 rgba(59,42,74,.13), 0 18px 28px -16px rgba(59,42,74,.45)}

/* ==========================================================================
   TESTE — BOTAO PRETO COM CONTORNO AMARELO, NA ONDA
   O movimento e o do modelo pedido: sombra solida deslocada para a
   esquerda e para baixo, e no hover a peca anda 5px para a direita e 5px
   para cima, abrindo a distancia ate a sombra. A curva cubic-bezier passa
   de 1 e volta, entao o movimento ultrapassa um pouco antes de assentar.

   As cores nao sao mais preto e amarelo. Preto e amarelo puxava a Onda
   para um lugar que nao e o dela: a versao inteira e feita de pastel e
   canto redondo, e o par preto/amarelo aparecia como um adesivo colado
   por cima. No lugar dele entram duas cores que ja pertencem a versao:
     - a ameixa escura (--ink), que ja e a cor do texto de todo o site,
       faz o papel do preto;
     - um coral saturado, que e a versao forte do rosa que ja existe na
       paleta, faz o papel do amarelo.
   O coral e a unica cor da versao com forca para virar contorno, entao
   ele fica onde precisa chamar - o botao. Os cartoes usam a ameixa: seis
   contornos coral na mesma tela viraria barulho.
   Tudo daqui para baixo pode ser removido inteiro sem tocar no resto.
   ========================================================================== */
#site-e{
  --coral:#FF6F61;
  --ameixa:#3B2A4A;
}

/* ---- os botoes: ameixa cheia, contorno e sombra coral ---- */
#site-e .e-btn,
#site-e a.e-btn,
#site-e a.e-btn--a1,
#site-e a.e-btn--a2,
#site-e a.e-btn--br,
#site-e a.e-btn--ink{
  font-size:1rem;
  padding:0.8em 2em;
  background:var(--ameixa);
  background-image:none;
  border:3px solid var(--coral);
  border-radius:1em;
  color:#fff;
  font-weight:bolder;
  transition:cubic-bezier(0.68,-0.55,0.265,1.55) 0.4s;
  box-shadow:-5px 5px 0px 0px var(--coral);
}
#site-e .e-btn:hover,
#site-e a.e-btn:hover{
  transform:translate(5px,-5px);
  background:var(--ameixa);
  color:#fff;
}
#site-e .e-btn:active,
#site-e a.e-btn:active{transform:translate(0,0)}
/* o anel macio que existia antes brigaria com o contorno coral */
#site-e .e-btn::after{display:none}
#site-e .e-btn--p{font-size:.85rem; padding:0.6em 1.4em; box-shadow:-4px 4px 0px 0px var(--coral)}

/* ---- os cartoes: pastel da propria versao, contorno e sombra ameixa ---- */
#site-e .e-card{
  border:3px solid var(--ameixa);
  border-radius:1em;
  color:var(--ameixa);
  transition:cubic-bezier(0.68,-0.55,0.265,1.55) 0.4s;
  box-shadow:-5px 5px 0px 0px var(--ameixa);
}
#site-e .e-card--li{background:#F1E6FF}
#site-e .e-card--me{background:#DFF7EC}
#site-e .e-card--pe{background:#FFEEDF}
#site-e .e-card:hover{
  transform:translate(5px,-5px);
  box-shadow:-5px 5px 0px 0px var(--ameixa);
}
#site-e .e-card .e-card__h{color:var(--ameixa); font-weight:bolder}
#site-e .e-card .e-card__p{color:#5A4A69}
#site-e .e-card .e-card__n{color:var(--coral)}

/* na secao escura a ameixa some no fundo: la quem contorna e o claro */
#site-e .e-sec--esc .e-card{border-color:#FFF; box-shadow:-5px 5px 0px 0px rgba(255,255,255,.85)}
#site-e .e-sec--esc .e-card:hover{box-shadow:-5px 5px 0px 0px rgba(255,255,255,.85)}

@media (prefers-reduced-motion: reduce){
  #site-e .e-btn,#site-e .e-card{transition:none}
  #site-e .e-btn:hover,#site-e .e-card:hover{transform:none}
}

/* ==========================================================================
   O DESTAQUE DA HERO APARECE JUNTO COM A ESCRITA
   O trecho destacado do titulo e um <span> unico com cor de fundo. O fundo
   e do span, e quem entra aos poucos sao as palavras DENTRO dele - entao a
   faixa colorida ja estava desenhada na tela antes de existir texto nela, e
   as palavras iam se encaixando num lugar que ja estava pintado.

   A correcao tira a cor do span e passa para cada palavra. Como cada
   palavra ja entra com seu proprio atraso, a faixa se forma junto com o
   texto, no mesmo ritmo.

   O par padding/margem existe para o desenho nao mexer no texto: o recuo
   pinta um pouco alem de cada palavra e a margem negativa devolve
   exatamente o mesmo tanto, entao a linha quebra igual a antes. E o recuo
   e maior que um espaco, entao as faixas de duas palavras vizinhas se
   encostam e formam uma faixa continua em vez de retangulos soltos.

   Sem JavaScript nada disso acontece: a classe .escrevendo-p so existe
   quando o script rodou, e ai o destaque antigo continua valendo.
   ========================================================================== */
/* ---- Onda ---- */
#site-e .escrevendo-p .e-mk{background:none; padding:0}
#site-e .escrevendo-p .e-mk .wrd{
  background:var(--menta);
  border-radius:.32em;
  padding:.06em .2em;
  margin:0 -.2em;
}
#site-e .escrevendo-p .e-mk--3 .wrd{background:var(--pessego)}

/* Com movimento reduzido as palavras aparecem todas de uma vez, entao a
   faixa aparece inteira - que e o comportamento certo nesse caso. */

/* ==========================================================================
   TEMA DA MARCA - ONDA
   Alem das variaveis, aqui e preciso repetir os fundos de secao: no bloco
   de cartoes eles foram escritos com cor fixa, e cor fixa nao acompanha
   troca de tema.
   ========================================================================== */
#site-e[data-tema="marca"]{
  --ink:#1D3446; --bg:#F6FAFC; --lilas:#CBE0EF; --menta:#DCE9F2;
  --pessego:#F7E3B0; --rosa:#5B8FB9; --mut:#4C6577;
  --coral:#F2D492; --ameixa:#1D3446}
#site-e[data-tema="marca"] .e-sec--br{background:#E6EFE2}
#site-e[data-tema="marca"] .e-sec--bg{background:#E1EDDD}
#site-e[data-tema="marca"] .e-sec--mint{background:#E4F1E6}
#site-e[data-tema="marca"] .e-card--li{background:#EEF6EA; --fio-card:#BFDDB8}
#site-e[data-tema="marca"] .e-card--me{background:#E9F4E6; --fio-card:#A8CBA0}
#site-e[data-tema="marca"] .e-card--pe{background:#FAF3E2; --fio-card:#E8D5A3}
html[data-site="e"] #site-e[data-tema="marca"]{
  --ink:#1D3446; --bg:#F6FAFC; --lilas:#CBE0EF; --menta:#DCE9F2;
  --pessego:#F7E3B0; --rosa:#5B8FB9; --mut:#4C6577;
  --coral:#F2D492; --ameixa:#1D3446}