/* Nuvro Websites — estilos exclusivos da página /websites.
   Reaproveita os tokens e componentes de nuvro-home.css (--green, --cyan,
   --blue, --ink, --muted, --line, .button, .section-pad, .section-heading,
   .section-kicker, .reveal, header e footer). Tudo aqui usa o prefixo .ws-
   para não conflitar com estilos globais. */

/* ── Hero ─────────────────────────────────────────────── */
.ws-hero{min-height:auto;padding-top:176px;padding-bottom:110px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;position:relative}
.ws-hero-copy{min-width:0;position:relative;z-index:2}
.ws-hero h1{font:600 clamp(40px,4.9vw,68px)/1.05 'Manrope',sans-serif;letter-spacing:-.05em;margin:24px 0 26px}
.ws-hero h1 em{font-family:var(--serif);font-weight:400;color:var(--green)}
.ws-hero-text{max-width:580px;color:var(--muted);font-size:18px;line-height:1.65;margin:0}
.ws-hero-actions{display:flex;align-items:center;gap:30px;margin-top:40px}

/* Mockup abstrato de site (CSS puro: sem imagem, sem salto de layout) */
.ws-hero-visual{position:relative;min-width:0;height:470px;display:grid;place-items:center}
.ws-mock-browser{width:100%;max-width:470px;border-radius:14px;overflow:hidden;background:#f4f8f5;box-shadow:0 40px 90px rgba(0,0,0,.45);transform:perspective(1100px) rotateY(-8deg) rotateX(3deg)}
.ws-mock-bar{height:36px;background:#dce6df;display:flex;align-items:center;gap:5px;padding:0 13px}
.ws-mock-bar i{width:6px;height:6px;border-radius:50%;background:#9db0a5}
.ws-mock-bar b{flex:1;height:12px;margin-left:10px;border-radius:99px;background:#eaf1ec}
.ws-mock-body{padding:18px}
.ws-mock-nav{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.ws-mock-nav span{width:44px;height:11px;border-radius:4px;background:#11271f}
.ws-mock-nav em{width:26px;height:6px;border-radius:4px;background:#c3d3c9}
.ws-mock-nav em:first-of-type{margin-left:auto}
.ws-mock-hero{padding:20px;border-radius:10px;background:linear-gradient(135deg,#11271f,#1d4536)}
.ws-mock-hero u{display:block;width:78%;height:15px;border-radius:5px;background:rgba(255,255,255,.9)}
.ws-mock-hero s{display:block;width:55%;height:8px;border-radius:5px;background:rgba(255,255,255,.4);margin-top:10px}
.ws-mock-hero em{display:block;width:88px;height:26px;border-radius:7px;background:var(--green);margin-top:18px}
.ws-mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.ws-mock-cards p{height:62px;margin:0;border-radius:8px;background:#e2ebe4}
.ws-mock-phone{position:absolute;right:-6px;bottom:-14px;width:118px;height:224px;border-radius:20px;padding:8px;background:#0a1814;border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 60px rgba(0,0,0,.5);z-index:3}
.ws-mock-phone-screen{height:100%;border-radius:14px;background:#f4f8f5;padding:12px}
.ws-mock-phone-screen span{display:block;width:34px;height:8px;border-radius:4px;background:#11271f}
.ws-mock-phone-screen u{display:block;width:100%;height:44px;border-radius:8px;background:linear-gradient(135deg,#11271f,#1d4536);margin-top:12px}
.ws-mock-phone-screen s{display:block;width:80%;height:7px;border-radius:4px;background:#cfdcd4;margin-top:12px}
.ws-mock-phone-screen em{display:block;width:100%;height:22px;border-radius:6px;background:var(--green);margin-top:14px}

/* ── Introdução ───────────────────────────────────────── */
.ws-intro{padding-top:120px;padding-bottom:125px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 3fr;gap:40px}
.ws-intro-text{font:500 clamp(26px,3vw,44px)/1.28 'Manrope',sans-serif;letter-spacing:-.03em;max-width:920px;color:#8d9d95;margin:0}
.ws-intro-text strong{font-weight:500;color:var(--ink)}

/* ── Tipos de projeto (fundo claro) ───────────────────── */
.ws-types{padding-top:120px;padding-bottom:130px;background:#eef3ef;color:#08130f}
.ws-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ws-type-card{background:#fff;border-radius:20px;padding:38px 34px 34px;display:flex;flex-direction:column;box-shadow:0 18px 45px rgba(14,48,34,.07)}
.ws-type-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:23px;color:#08130f;background:linear-gradient(145deg,var(--cyan),var(--green));margin-bottom:26px}
.ws-type-card h3{font:600 27px 'Manrope',sans-serif;letter-spacing:-.03em;margin:0 0 14px}
.ws-type-card>p{color:#586760;line-height:1.7;font-size:15px;margin:0}
.ws-type-card ul{list-style:none;padding:0;margin:22px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.ws-type-card li{padding:8px 11px;border-radius:6px;background:#eaf2ec;color:#2f5943;font-size:11px;font-weight:600}
.ws-type-use{margin:24px 0 0!important;padding-top:20px;border-top:1px solid #e3ebe5;font-size:13px;line-height:1.6;color:#586760}
.ws-type-use strong{color:#0b5c38}

/* ── O que entregamos (fundo escuro) ──────────────────── */
.ws-deliver{padding-top:130px;padding-bottom:140px;background:#07120f}
.ws-deliver .section-heading{color:var(--ink)}
.ws-deliver .section-heading>p{color:var(--muted)}
.ws-deliver h2 em{font-family:var(--serif);font-weight:400;color:var(--green)}
.ws-deliver-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px;border-top:1px solid var(--line)}
.ws-deliver-grid li{padding:24px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.ws-deliver-grid strong{font:600 15px 'Manrope',sans-serif;color:var(--ink);position:relative;padding-left:22px}
.ws-deliver-grid strong:before{content:'✓';position:absolute;left:0;color:var(--green);font-size:13px}
.ws-deliver-grid span{font-size:13px;color:#83938b;line-height:1.6;padding-left:22px}

/* ── Processo (fundo claro) ───────────────────────────── */
.ws-process{padding-top:125px;padding-bottom:135px;background:linear-gradient(135deg,#e8f0eb,#f7faf7);color:#08130f}
.ws-process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d3e0d7;border-bottom:1px solid #d3e0d7}
.ws-process-step{padding:32px 28px 38px;border-right:1px solid #d3e0d7;min-height:290px;display:flex;flex-direction:column}
.ws-process-step:last-child{border-right:0}
.ws-process-step>span{font:700 11px 'Manrope',sans-serif;letter-spacing:.12em;color:#0b8c50}
.ws-process-step h3{font:600 21px 'Manrope',sans-serif;letter-spacing:-.025em;margin:42px 0 14px}
.ws-process-step p{font-size:13px;color:#56665e;line-height:1.7;margin:0}

/* ── Diferenciais (fundo escuro) ──────────────────────── */
.ws-diff{padding-top:130px;padding-bottom:130px;background:var(--bg);display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.ws-diff h2{font:600 clamp(36px,4.2vw,58px)/1.1 'Manrope',sans-serif;letter-spacing:-.045em;margin:16px 0 26px}
.ws-diff h2 em{font-family:var(--serif);font-weight:400;color:var(--green)}
.ws-diff-copy>p:not(.section-kicker){color:var(--muted);line-height:1.75;max-width:520px;margin:0}
.ws-diff-panel{background:#0a1814;border:1px solid var(--line);border-radius:20px;padding:10px 32px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.ws-diff-panel>div{display:grid;grid-template-columns:44px 1fr;column-gap:17px;padding:22px 0;border-bottom:1px solid var(--line)}
.ws-diff-panel>div:last-child{border-bottom:0}
.ws-diff-icon{grid-row:1/3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(53,231,123,.1);color:var(--green)}
.ws-diff-panel strong{font:600 15px 'Manrope',sans-serif}
.ws-diff-panel p{font-size:12.5px;color:#83968c;margin:5px 0 0;line-height:1.55}

/* ── Demonstrações (continua no escuro) ───────────────── */
.ws-showcase{padding-top:120px;padding-bottom:135px;background:var(--bg);border-top:1px solid var(--line)}
.ws-showcase .section-heading{color:var(--ink)}
.ws-showcase .section-heading>p{color:var(--muted)}
.ws-showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ws-demo{background:#0a1814;border:1px solid var(--line);border-radius:18px;padding:18px 18px 26px}
.ws-demo-art{height:200px;border-radius:12px;position:relative;overflow:hidden;padding:16px}
.ws-demo-art i{display:block;width:38px;height:8px;border-radius:4px;background:rgba(255,255,255,.75)}
.ws-demo-art b{display:block;width:72%;height:14px;border-radius:5px;background:rgba(255,255,255,.9);margin-top:22px}
.ws-demo-art u{display:block;width:50%;height:8px;border-radius:4px;background:rgba(255,255,255,.45);margin-top:10px}
.ws-demo-art s{display:block;width:74px;height:24px;border-radius:7px;margin-top:18px}
.ws-demo-a{background:linear-gradient(140deg,#11271f,#1d4536)}
.ws-demo-a s{background:var(--green)}
.ws-demo-b{background:linear-gradient(140deg,#10233a,#1c3f63)}
.ws-demo-b s{background:var(--cyan)}
.ws-demo-c{background:linear-gradient(140deg,#151a35,#2b326b)}
.ws-demo-c s{background:var(--blue)}
.ws-demo-flag{display:inline-block;margin:20px 0 0;padding:6px 10px;border:1px solid var(--line);border-radius:99px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#8ea097}
.ws-demo h3{font:600 20px 'Manrope',sans-serif;letter-spacing:-.025em;margin:14px 0 10px;color:var(--ink)}
.ws-demo>p:last-child{font-size:13px;color:#83938b;line-height:1.65;margin:0}

/* ── FAQ (fundo claro) ────────────────────────────────── */
.ws-faq{padding-top:125px;padding-bottom:130px;background:#eef3ef;color:#08130f}
.ws-faq-list{border-top:1px solid #d8e2db}
.ws-faq-item{border-bottom:1px solid #d8e2db}
.ws-faq-item summary{padding:24px 44px 24px 0;font:600 17px 'Manrope',sans-serif;letter-spacing:-.02em;cursor:pointer;position:relative;list-style:none;line-height:1.45}
.ws-faq-item summary::-webkit-details-marker{display:none}
.ws-faq-item summary:after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:#0b8c50;line-height:1}
.ws-faq-item[open] summary:after{content:'–'}
.ws-faq-item summary:focus-visible{outline:2px solid #0b8c50;outline-offset:3px;border-radius:4px}
.ws-faq-item p{margin:0 0 26px;padding-right:44px;color:#56665e;line-height:1.75;font-size:15px}

/* ── CTA final ────────────────────────────────────────── */
.ws-cta{padding-top:105px;padding-bottom:115px;text-align:center;background:var(--green);color:#06120d}
.ws-cta .section-kicker{color:#255d3b}
.ws-cta h2{font:600 clamp(34px,5.4vw,72px)/1.08 'Manrope',sans-serif;letter-spacing:-.045em;margin:24px 0 18px}
.ws-cta h2 em{font-family:var(--serif);font-weight:400;color:#075b32}
.ws-cta-lead{max-width:560px;margin:0 auto 40px;color:#205d38;line-height:1.6}

/* ── Foco visível em toda a página ────────────────────── */
.ws-type-card a:focus-visible,.ws-demo a:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ── Tablet ───────────────────────────────────────────── */
@media (max-width:900px){
  .ws-hero{grid-template-columns:1fr;padding-top:150px;padding-bottom:80px;gap:50px}
  .ws-hero-visual{height:400px}
  .ws-intro{grid-template-columns:1fr}
  .ws-type-grid{grid-template-columns:1fr 1fr}
  .ws-type-grid .ws-type-card:last-child{grid-column:1/-1}
  .ws-deliver-grid{gap:0 40px}
  .ws-process-grid{grid-template-columns:1fr 1fr}
  .ws-process-step:nth-child(2){border-right:0}
  .ws-process-step:nth-child(-n+2){border-bottom:1px solid #d3e0d7}
  .ws-diff{grid-template-columns:1fr;gap:50px}
  .ws-showcase-grid{grid-template-columns:1fr 1fr}
  .ws-showcase-grid .ws-demo:last-child{grid-column:1/-1}
}

/* ── Celular (validado a partir de 320px) ─────────────── */
@media (max-width:640px){
  .ws-hero{padding-top:128px;padding-bottom:64px;gap:38px}
  .ws-hero h1{font-size:35px;letter-spacing:-.045em}
  .ws-hero-text{font-size:16px}
  .ws-hero-actions{flex-direction:column;align-items:stretch;gap:16px}
  .ws-hero-actions .button{width:100%}
  .ws-hero-actions .text-link{text-align:center}
  .ws-hero-visual{height:auto;padding-bottom:70px}
  .ws-mock-browser{max-width:100%;transform:none}
  .ws-mock-body{padding:14px}
  .ws-mock-cards p{height:48px}
  .ws-mock-phone{width:96px;height:184px;right:0;bottom:0}
  .ws-intro{padding-top:80px;padding-bottom:85px}
  .ws-intro-text{font-size:24px;line-height:1.32}
  .ws-types{padding-top:80px;padding-bottom:85px}
  .ws-type-grid{grid-template-columns:1fr;gap:16px}
  .ws-type-card{padding:28px 24px}
  .ws-type-card h3{font-size:24px}
  .ws-deliver{padding-top:85px;padding-bottom:90px}
  .ws-deliver-grid{grid-template-columns:1fr;gap:0}
  .ws-process{padding-top:85px;padding-bottom:90px}
  .ws-process-grid{grid-template-columns:1fr}
  .ws-process-step{min-height:0;padding:26px 0 30px;border-right:0!important;border-bottom:1px solid #d3e0d7!important}
  .ws-process-step:last-child{border-bottom:0!important}
  .ws-process-step h3{margin-top:22px;font-size:19px}
  .ws-diff{padding-top:85px;padding-bottom:90px;gap:38px}
  .ws-diff-panel{padding:6px 20px}
  .ws-showcase{padding-top:85px;padding-bottom:90px}
  .ws-showcase-grid{grid-template-columns:1fr;gap:16px}
  .ws-demo-art{height:172px}
  .ws-faq{padding-top:85px;padding-bottom:90px}
  .ws-faq-item summary{font-size:16px;padding:20px 34px 20px 0}
  .ws-faq-item p{font-size:14px;padding-right:0;margin-bottom:22px}
  .ws-cta{padding-top:80px;padding-bottom:85px}
  .ws-cta h2{font-size:36px}
  .ws-cta .button{width:100%}
}

@media (max-width:360px){
  .ws-hero h1{font-size:31px}
  .ws-intro-text{font-size:21px}
  .ws-mock-phone{width:82px;height:158px}
  .ws-cta h2{font-size:31px}
}

@media (prefers-reduced-motion:reduce){
  .ws-mock-browser{transform:none}
}