/* ==========================================================================
   WeMails — site institucional. Visual moderno inspirado no Hostino (Brandio).
   Tema claro, gradientes índigo/violeta, cartões arredondados, i18n-ready.
   ========================================================================== */

:root{
  --brand:#5b4cf5; --brand2:#8a63ff; --brand3:#a855f7;
  --pink:#ff5c93; --cyan:#1fc7e0; --amber:#ffb020; --green:#22c37a; --blue:#3b82f6;
  --ink:#171430; --ink2:#3a3556; --muted:#6c6a86; --line:#eceaf5;
  --bg:#ffffff; --bg2:#f6f6fc; --bg3:#f1f0fb;
  --card:#ffffff; --shadow:0 18px 50px rgba(38,23,96,.10); --shadow-sm:0 8px 24px rgba(38,23,96,.08);
  --radius:18px; --radius-lg:26px;
  --grad:linear-gradient(135deg,#5646f2 0%,#7b5cff 52%,#9b5cf6 100%);
  --grad-soft:linear-gradient(135deg,#efeaff,#f6efff);
  --wrap:1180px;
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.site{
  margin:0; font-family:var(--ff); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.6; font-size:16.5px;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:800}
img{max-width:100%}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-weight:700; font-size:.98rem; padding:.72rem 1.35rem; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 12px 26px rgba(91,76,245,.34)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(91,76,245,.42)}
.btn-outline{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-outline:hover{border-color:var(--brand); color:var(--brand)}
.btn-white{background:#fff; color:var(--brand)}
.btn-white:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.18)}
.btn-ghost-w{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4)}
.btn-ghost-w:hover{background:rgba(255,255,255,.2)}
.btn-lg{padding:.92rem 1.7rem; font-size:1.05rem}
.btn-block{display:flex; width:100%}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; gap:1.2rem; height:72px}
.brandmark{display:inline-flex; align-items:center; gap:.5rem; font-size:1.28rem; font-weight:800; letter-spacing:-.02em}
.brandmark .logo{display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--grad); color:#fff; box-shadow:0 8px 18px rgba(91,76,245,.35)}
.brandmark .wm{display:inline-flex}
.brandmark b{color:var(--ink)}
.brandmark .accent{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.site-nav{display:flex; gap:1.5rem; margin-left:.5rem}
.site-nav a{color:var(--ink2); font-weight:600; font-size:.97rem; transition:.15s}
.site-nav a:hover{color:var(--brand)}
.hbtns{margin-left:auto; display:flex; align-items:center; gap:.6rem}

/* seletor de idioma (sem JS: <details>) */
.lang-pick{position:relative}
.lang-pick>summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .7rem; border-radius:999px; border:1.5px solid var(--line); font-weight:600; font-size:.92rem; color:var(--ink2)}
.lang-pick>summary::-webkit-details-marker{display:none}
.lang-pick>summary:hover{border-color:var(--brand); color:var(--brand)}
.lang-pick[open]>summary{border-color:var(--brand); color:var(--brand)}
.lang-menu{position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:.4rem; min-width:172px; z-index:60}
.lang-menu a{display:block; padding:.5rem .7rem; border-radius:9px; font-weight:600; font-size:.93rem; color:var(--ink2)}
.lang-menu a:hover{background:var(--bg2); color:var(--brand)}
.lang-menu a.on{color:var(--brand); background:var(--grad-soft)}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--grad); color:#fff;
  padding:104px 0 190px; text-align:center}
.hero::before,.hero::after{content:""; position:absolute; border-radius:50%; filter:blur(10px); opacity:.5}
.hero::before{width:420px;height:420px; background:radial-gradient(circle,#b98bff,transparent 60%); top:-120px; left:-80px}
.hero::after{width:520px;height:520px; background:radial-gradient(circle,#5cc8ff,transparent 60%); bottom:-220px; right:-120px}
.hero .wrap{position:relative; z-index:2; max-width:900px}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3); padding:.4rem .9rem; border-radius:999px; font-weight:600; font-size:.86rem;
  letter-spacing:.01em; margin-bottom:1.5rem}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.7rem); font-weight:800; margin-bottom:1.2rem}
.hero h1 .g{background:linear-gradient(90deg,#ffe27a,#ffd0f0); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{font-size:1.16rem; color:rgba(255,255,255,.92); max-width:720px; margin:0 auto 2rem}
.hero .cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.hero .note{margin-top:1.6rem; font-size:.9rem; color:rgba(255,255,255,.82); max-width:640px; margin-left:auto; margin-right:auto}

/* onda separadora */
.wave{position:absolute; left:0; right:0; bottom:-1px; z-index:1; line-height:0}
.wave svg{width:100%; height:90px; display:block}

/* faixa de stats sobreposta ao hero */
.stats-band{position:relative; z-index:5; margin-top:-92px; padding:0}
.stats-band .grid{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow);
  display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden}
.stat{padding:2rem 1.4rem; text-align:center}
.stat+.stat{border-left:1px solid var(--line)}
.stat .n{font-size:2rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat .l{color:var(--muted); font-size:.94rem; margin-top:.25rem}

/* ---------- Faixa de provedores ---------- */
.providers{padding:52px 0; border-bottom:1px solid var(--line)}
.providers .lead{text-align:center; color:var(--muted); font-weight:600; margin:0 0 1.7rem; font-size:1rem}
.prov-row{display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem 1rem}
.prov{display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:1rem; color:var(--ink2);
  padding:.5rem .95rem .5rem .55rem; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:.18s}
.prov:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.prov .ic{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; flex:none}
.prov .ic svg{width:16px; height:16px}

/* ---------- Seções ---------- */
section{padding:88px 0}
.section-head{text-align:center; max-width:660px; margin:0 auto 3rem}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.5rem); margin-bottom:.8rem}
.section-head p{color:var(--muted); font-size:1.1rem}
.alt{background:var(--bg2)}

/* ---------- Features ---------- */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.feature{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.7rem;
  box-shadow:var(--shadow-sm); transition:.2s}
.feature:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.fic{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#fff; margin-bottom:1.15rem}
.fic svg{width:26px; height:26px}
.feature:nth-child(1) .fic{background:linear-gradient(135deg,#5646f2,#8a63ff)}
.feature:nth-child(2) .fic{background:linear-gradient(135deg,#22c37a,#12b0a5)}
.feature:nth-child(3) .fic{background:linear-gradient(135deg,#3b82f6,#1fc7e0)}
.feature:nth-child(4) .fic{background:linear-gradient(135deg,#ff5c93,#ff8f5c)}
.feature:nth-child(5) .fic{background:linear-gradient(135deg,#a855f7,#6d5efc)}
.feature:nth-child(6) .fic{background:linear-gradient(135deg,#ffb020,#ff7a45)}
.feature h3{font-size:1.2rem; margin-bottom:.55rem}
.feature p{color:var(--muted); font-size:.98rem; margin:0}

/* ---------- Como funciona ---------- */
.steps3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; position:relative}
.step3{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem 1.7rem; text-align:center;
  position:relative; box-shadow:var(--shadow-sm)}
.step3 .n{width:52px; height:52px; margin:0 auto 1.1rem; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:1.3rem; color:#fff; background:var(--grad); box-shadow:0 10px 22px rgba(91,76,245,.32)}
.step3 h3{font-size:1.18rem; margin-bottom:.5rem}
.step3 p{color:var(--muted); font-size:.98rem; margin:0}

/* ---------- Pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; align-items:stretch}
.plan{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.6rem; display:flex;
  flex-direction:column; box-shadow:var(--shadow-sm); position:relative; transition:.2s}
.plan:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.plan.pop{border:2px solid transparent; background:
   linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; box-shadow:var(--shadow)}
.plan .tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff;
  font-size:.74rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:.32rem .85rem; border-radius:999px;
  box-shadow:0 8px 18px rgba(91,76,245,.35); white-space:nowrap}
.plan h3{font-size:1.32rem; margin-bottom:.35rem}
.plan .price{font-size:2.2rem; font-weight:800; letter-spacing:-.03em; margin:.2rem 0 1.1rem; color:var(--ink)}
.plan .price small{font-size:.9rem; font-weight:600; color:var(--muted); letter-spacing:0}
.plan .plimits{font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 .7rem}
.plan ul{list-style:none; padding:0; margin:0 0 1.6rem; display:grid; gap:.62rem}
.plan li{position:relative; padding-left:1.7rem; color:var(--ink2); font-size:.95rem}
.plan li::before{content:""; position:absolute; left:0; top:.28rem; width:18px; height:18px; border-radius:50%;
  background:var(--grad-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b4cf5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}
.plan li.seat{padding-left:1.7rem; font-weight:700; color:var(--brand)}
.plan li.seat::before{background:var(--grad-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b4cf5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center/13px no-repeat}
.plan .go{margin-top:auto}

/* ---------- CTA band ---------- */
.cta-band{background:var(--grad); border-radius:var(--radius-lg); padding:3.4rem 2rem; text-align:center; color:#fff;
  position:relative; overflow:hidden; box-shadow:0 26px 60px rgba(91,76,245,.32)}
.cta-band::after{content:""; position:absolute; width:300px; height:300px; border-radius:50%; top:-120px; right:-60px;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%)}
.cta-band h2{font-size:clamp(1.7rem,3.4vw,2.3rem); margin-bottom:.6rem; position:relative}
.cta-band p{color:rgba(255,255,255,.9); margin:0 0 1.7rem; font-size:1.1rem; position:relative}
.cta-band .btn{position:relative}

/* ---------- Footer (claro, combina com o tema) ---------- */
.site-footer{background:var(--bg2); color:var(--muted); padding:64px 0 30px; border-top:1px solid var(--line)}
.site-footer .brandmark b,.site-footer .brandmark{color:var(--ink)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.6rem; border-bottom:1px solid var(--line)}
.foot-brand p{color:var(--muted); margin:1rem 0 0; max-width:300px; font-size:.95rem}
.foot-col h4{color:var(--ink); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem}
.foot-col a{display:block; color:var(--ink2); padding:.32rem 0; font-size:.95rem; transition:.15s}
.foot-col a:hover{color:var(--brand)}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:1.7rem}
.foot-bottom .cp{color:var(--muted); font-size:.9rem}
.foot-bottom .cp .company{display:block; color:#9c99b3; font-size:.84rem; margin-top:.2rem}
.foot-bottom .links{display:flex; gap:1.3rem; flex-wrap:wrap}
.foot-bottom .links a{color:var(--ink2); font-size:.9rem}
.foot-bottom .links a:hover{color:var(--brand)}

/* ---------- Páginas institucionais (legal/suporte) ---------- */
.page{padding:70px 0 90px}
.page .wrap{max-width:820px}
.page h1{font-size:clamp(2rem,4vw,2.7rem); margin-bottom:.6rem}
.page .updated{color:var(--muted); font-size:.92rem; margin-bottom:2.4rem}
.page h2{font-size:1.4rem; margin:2.4rem 0 .8rem}
.page h3{font-size:1.12rem; margin:1.6rem 0 .5rem}
.page p,.page li{color:var(--ink2); font-size:1.02rem}
.page ul{padding-left:1.2rem}
.page a.inl{color:var(--brand); font-weight:600}
.page .lead{font-size:1.15rem; color:var(--muted); margin-bottom:2rem}

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .features,.steps3{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .site-nav{display:none}
}
@media (max-width:620px){
  .features,.steps3,.plans{grid-template-columns:1fr}
  .stats-band .grid{grid-template-columns:1fr}
  .stat+.stat{border-left:0; border-top:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr}
  .hbtns .btn-outline{display:none}
  .hero{padding:72px 0 150px}
}