/* ==========================================================================
   01. FUNDAMENTOS — variáveis, reset e base global
   ========================================================================== */

  :root{
    --bg:#fbfbfd;
    --ink:#15131f;
    --ink-soft:#4a4658;
    --glass-edge:rgba(255,255,255,0.85);
    --peach:255,239,230;
    --cyan:96,205,244;
    --violet:141,124,242;
    --magenta:225,54,175;
    --pink-fade:255,205,232;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html,body{
    background:var(--bg);
    font-family:'Inter', sans-serif;
    color:var(--ink);
    overflow-x:hidden;
  }

  /* ==========================================================================
     02. CABEÇALHO — componente reutilizável
     ========================================================================== */

  /* ---- Header ---- */
  .site-header{
    position:absolute;
    top:0;
    left:0;
    z-index:10;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:28px 6vw;
    background:transparent;
  }
  .site-header.is-floating{
    position:fixed;
    top:18px;
    left:50%;
    width:min(1120px, calc(100% - 48px));
    padding:13px 18px;
    border:1px solid rgba(21,19,31,.09);
    border-radius:20px;
    background:rgba(255,255,255,.94);
    box-shadow:0 16px 42px rgba(24,18,57,.15);
    transform:translateX(-50%);
    animation:headerReveal .28s cubic-bezier(.2,.8,.2,1) both;
    backdrop-filter:blur(14px);
  }
  @keyframes headerReveal{ from{ opacity:0; transform:translate(-50%,-14px); } to{ opacity:1; transform:translate(-50%,0); } }
  .site-header.is-floating.is-hiding{ animation:headerHide .26s cubic-bezier(.4,0,1,1) both; pointer-events:none; }
  @keyframes headerHide{ from{ opacity:1; transform:translate(-50%,0); } to{ opacity:0; transform:translate(-50%,-14px); } }

  .header-logo{
    display:inline-flex;
    align-items:center;
    font-family:'Telegraf', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    font-size:22px;
    letter-spacing:-0.01em;
    color:var(--ink);
    white-space:nowrap;
    text-decoration:none;
    line-height:1;
  }
  .header-logo .brand-logo{
    display:block;
    height:1em;
    width:auto;
    max-width:none;
    object-fit:contain;
  }
  @media (min-width:901px){
    .header-logo{ font-size:33px; }
  }
  .site-header__nav-list{ display:flex; align-items:center; gap:4px; list-style:none; }

  .nav-pill-wrap{
    padding:2px;
    border-radius:999px;
    background:linear-gradient(90deg, rgb(var(--cyan)), rgb(var(--violet)));
    box-shadow:0 8px 24px -14px rgba(96,120,244,0.5);
  }

  .header-nav{
    display:flex;
    align-items:center;
    gap:4px;
    background:#fff;
    border-radius:999px;
    padding:6px;
  }

  .nav-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 16px;
    border-radius:999px;
    font-family:'Inter', sans-serif;
    font-weight:500;
    font-size:14.5px;
    color:var(--ink);
    text-decoration:none;
    white-space:nowrap;
    transition:background 200ms ease, color 200ms ease;
  }

  .nav-item:hover{
    background:rgba(21,19,31,0.06);
  }

  .nav-item svg{
    width:11px;
    height:11px;
    flex-shrink:0;
    opacity:0.6;
  }

  .header-actions{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .mobile-menu-button{
    display:none;
    width:44px;
    height:44px;
    border:1px solid rgba(21,19,31,.16);
    border-radius:50%;
    background:rgba(255,255,255,.88);
    color:var(--ink);
    cursor:pointer;
  }
  .mobile-menu-button span{ display:block; width:18px; height:1.5px; margin:4px auto; background:currentColor; transition:transform .2s ease,opacity .2s ease; }

  .btn-header{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:12px 24px;
    background:var(--ink);
    color:#fff;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    border-radius:999px;
    overflow:hidden;
    isolation:isolate;
    transition:transform 200ms ease, box-shadow 200ms ease;
  }
  .btn-header::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(120deg, rgb(var(--cyan)), rgb(var(--violet)), rgb(var(--magenta)));
    opacity:0;
    transition:opacity 260ms ease;
  }
  .btn-header:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px -12px rgba(225,54,175,0.45);
  }
  .btn-header:hover::before{ opacity:1; }
  .btn-header:focus-visible{
    outline:3px solid rgb(var(--violet));
    outline-offset:3px;
  }

  @media (max-width: 900px){
    .site-header{ padding:24px; }
    .header-actions .btn-header{ display:none; }
    .mobile-menu-button{ display:block; }
    .nav-pill-wrap{ position:absolute; top:76px; right:24px; left:24px; z-index:2; padding:1px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .2s ease,transform .2s ease,visibility .2s; }
    .nav-pill-wrap.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
    .header-nav{ display:flex; flex-direction:column; align-items:stretch; gap:2px; border-radius:23px; padding:8px; }
    .nav-item{ justify-content:space-between; padding:14px 16px; }
    .mobile-menu-button[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
    .mobile-menu-button[aria-expanded="true"] span:nth-child(2){ opacity:0; }
    .mobile-menu-button[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
    .site-header.is-floating{ top:12px; width:calc(100% - 32px); padding:10px 14px; border-radius:18px; }
  }

  .hero{
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;
    background:var(--bg);
  }

  /* ==========================================================================
     03. HERO — campo de vidro, conteúdo e chamadas
     ========================================================================== */

  /* ---- Glass slat field ---- */
  .glass-field{
    position:absolute;
    inset:0;
    display:flex;
    z-index:1;
  }

  .slat{
    position:relative;
    flex:1 1 0;
    height:100%;
    border-right:1px solid rgba(255,255,255,0.9);
    will-change:transform, filter;
    transition:transform 220ms cubic-bezier(.2,.8,.2,1), filter 220ms cubic-bezier(.2,.8,.2,1);
    transform-origin:center bottom;
  }

  .slat::before{
    /* glass highlight sheen */
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.08) 35%,
      rgba(255,255,255,0.28) 100%);
    pointer-events:none;
  }

  .slat::after{
    /* right-edge glass rim light */
    content:"";
    position:absolute;
    top:0; right:0; bottom:0;
    width:1px;
    background:rgba(255,255,255,0.9);
    box-shadow:0 0 8px rgba(255,255,255,0.6);
  }

  /* traveling light source that follows the cursor, screened over the slats */
  .light-cursor{
    position:absolute;
    z-index:2;
    width:520px;
    height:520px;
    border-radius:50%;
    pointer-events:none;
    mix-blend-mode:screen;
    opacity:0;
    transition:opacity 260ms ease;
    background:radial-gradient(circle,
      rgba(255,255,255,0.9) 0%,
      rgba(190,150,255,0.55) 30%,
      rgba(225,54,175,0.35) 55%,
      rgba(96,205,244,0.0) 75%);
    filter:blur(4px);
  }

  .hero.is-glass-hover .light-cursor{ opacity:1; }

  /* soft vignette so the content area stays legible */
  .hero-scrim{
    position:absolute;
    inset:0;
    z-index:3;
    background:linear-gradient(90deg,
      rgba(251,251,253,0.94) 0%,
      rgba(251,251,253,0.82) 32%,
      rgba(251,251,253,0.35) 52%,
      rgba(251,251,253,0.05) 68%,
      rgba(251,251,253,0) 100%);
    pointer-events:none;
  }

  /* ---- Content ---- */
  .hero-content{
    position:relative;
    z-index:4;
    max-width:640px;
    padding:0 6vw;
  }

  .wordmark{
    font-family:'Telegraf', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    font-size:clamp(64px, 11vw, 132px);
    line-height:0.92;
    letter-spacing:-0.01em;
    position:relative;
    color:var(--ink);
    width:fit-content;
    margin:0;
  }
  .wordmark .wordmark__logo{
    display:block;
    height:1em;
    width:auto;
    max-width:min(100%, 640px);
    object-fit:contain;
  }

  .subtitle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Open Sauce Sans', sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:18px;
  }

  .subtitle::before{
    content:"";
    display:block;
    width:22px;
    height:2px;
    background:linear-gradient(90deg, rgb(var(--cyan)), rgb(var(--magenta)));
    border-radius:2px;
  }

  .tagline{
    margin-top:32px;
    font-size:clamp(17px, 1.7vw, 20px);
    line-height:1.55;
    color:var(--ink-soft);
    max-width:480px;
  }

  .cta-group{
    margin-top:44px;
    display:flex;
    align-items:center;
    gap:22px;
  }

  .btn-primary{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 30px;
    background:var(--ink);
    color:#fff;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:15px;
    text-decoration:none;
    border-radius:999px;
    overflow:hidden;
    isolation:isolate;
    transition:transform 200ms ease, box-shadow 200ms ease;
  }
  .btn-primary::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(120deg, rgb(var(--cyan)), rgb(var(--violet)), rgb(var(--magenta)));
    opacity:0;
    transition:opacity 260ms ease;
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px -12px rgba(225,54,175,0.55);
  }
  .btn-primary:hover::before{ opacity:1; }
  .btn-primary:focus-visible{
    outline:3px solid rgb(var(--violet));
    outline-offset:3px;
  }

  .btn-secondary{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:15px;
    color:var(--ink);
    text-decoration:none;
    border-bottom:1px solid rgba(21,19,31,0.35);
    padding-bottom:2px;
    transition:border-color 200ms ease, color 200ms ease;
  }
  .btn-secondary:hover{
    color:rgb(var(--magenta));
    border-color:rgb(var(--magenta));
  }
  .btn-secondary:focus-visible{
    outline:3px solid rgb(var(--violet));
    outline-offset:3px;
  }

  @media (max-width: 720px){
    .hero{ align-items:flex-end; padding-bottom:64px; }
    .hero-content{ padding:0 24px; max-width:100%; }
    .hero-scrim{
      background:linear-gradient(0deg,
        rgba(251,251,253,0.96) 0%,
        rgba(251,251,253,0.7) 40%,
        rgba(251,251,253,0.15) 75%,
        rgba(251,251,253,0) 100%);
    }
    .cta-group{ flex-wrap:wrap; }
  }

  @media (prefers-reduced-motion: reduce){
    .slat{ transition:none; }
    .light-cursor{ display:none; }
  }

  /* ==========================================================================
     04. MÉTODO PRISMA
     ========================================================================== */

  /* ---- Método Prisma ---- */
  .method-section,
  .services-section{
    background:#fff;
    padding:clamp(88px, 12vw, 164px) 6vw;
  }

  .section-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Open Sauce Sans', sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .section-kicker::before{
    content:"";
    width:30px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg, rgb(var(--cyan)), rgb(var(--magenta)));
  }

  .method-intro{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(260px,.7fr);
    align-items:end;
    gap:48px;
    max-width:1280px;
    margin:0 auto 64px;
  }
  .section-title{
    margin-top:22px;
    max-width:800px;
    font-family:'Telegraf', sans-serif;
    font-size:clamp(38px, 5vw, 70px);
    line-height:.99;
    letter-spacing:-.055em;
  }
  .section-copy{
    color:var(--ink-soft);
    font-size:16px;
    line-height:1.65;
    max-width:410px;
    padding-bottom:4px;
  }

  .method-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr .85fr;
    grid-template-rows:300px 300px;
    gap:14px;
    max-width:1280px;
    margin:0 auto;
  }
  .method-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:0;
    padding:28px;
    overflow:hidden;
    border:1px solid rgba(21,19,31,.10);
    border-radius:22px;
    background:#f7f7fa;
  }
  .method-card--large{ grid-row:span 2; background:var(--ink); color:#fff; }
  .method-card--peach{ background:#fff0e8; }
  .method-card--blue{ background:#e9f8ff; }
  .method-card--violet{ background:#efedff; }
  .method-card__number{
    position:absolute;
    top:24px;
    left:28px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    opacity:.6;
  }
  .method-card__art{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow:hidden;
    color:inherit;
    pointer-events:none;
  }
  .method-card__placeholder{
    display:grid;
    place-items:center;
    width:54%;
    aspect-ratio:1;
    border:1px dashed currentColor;
    border-radius:18px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.11em;
    text-transform:uppercase;
    opacity:.25;
    transform:rotate(-9deg);
  }
  .method-card--large .method-card__placeholder{
    width:65%;
    border-radius:50%;
    transform:rotate(12deg);
  }
  .method-card h3{ position:relative; z-index:1; font-family:'Telegraf', sans-serif; font-size:clamp(23px,2.2vw,32px); letter-spacing:-.045em; }
  .method-card p{ position:relative; z-index:1; margin-top:10px; max-width:290px; color:inherit; font-size:14px; line-height:1.5; opacity:.72; }

  /* ==========================================================================
     05. SERVIÇOS
     ========================================================================== */

  /* ---- Serviços ---- */
  .services-section{ padding-top:clamp(90px, 13vw, 180px); }
  .services-header{ max-width:980px; margin:0 auto; text-align:center; }
  .services-header .section-kicker{ justify-content:center; }
  .services-header .section-kicker::before{ display:none; }
  .services-header .section-kicker{ color:#2441d8; }
  .services-header .section-title{ margin:20px auto 0; max-width:900px; font-size:clamp(38px,5.4vw,72px); }
  .service-tabs{
    display:flex;
    justify-content:center;
    gap:7px;
    max-width:max-content;
    margin:48px auto 32px;
    padding:6px;
    border:1px solid rgba(21,19,31,.12);
    border-radius:999px;
    background:#fff;
  }
  .service-tab{
    appearance:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:0;
    border-radius:999px;
    padding:13px 17px;
    background:transparent;
    color:var(--ink-soft);
    font:500 14px 'Inter',sans-serif;
    cursor:pointer;
    white-space:nowrap;
    transition:background .28s ease,color .28s ease,transform .28s ease;
  }
  .service-tab:hover{ background:#f1f0f6; color:var(--ink); }
  .service-tab[aria-selected="true"]{ background:#eaf8ff; color:#075e8b; }
  .service-tab:focus-visible{ outline:3px solid rgb(var(--violet)); outline-offset:3px; }
  .service-tab__dot{ width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.8; }
  .service-display{
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    min-height:520px;
    max-width:1420px;
    margin:0 auto;
    overflow:hidden;
    border:1px solid rgba(21,19,31,.13);
    border-radius:24px;
    background:#fff;
  }
  .service-content{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(36px,6vw,82px); }
  .service-label{ display:flex; align-items:center; gap:11px; color:var(--ink-soft); font-size:14px; font-weight:600; }
  .service-icon{ display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(21,19,31,.14); border-radius:12px; font-size:19px; }
  .service-content h3{ margin-top:60px; max-width:470px; font-family:'Telegraf',sans-serif; font-size:clamp(31px,3.7vw,54px); line-height:1.02; letter-spacing:-.055em; }
  .service-content p{ max-width:440px; margin-top:18px; color:var(--ink-soft); font-size:16px; line-height:1.65; }
  .service-content .btn-primary{ margin-top:42px; }
  .service-visual{
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:36px;
    background:var(--service-color,#e9f8ff);
    transition:background .45s ease;
  }
  .service-visual::before{ content:""; position:absolute; width:90%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.34); filter:blur(2px); }
  .visual-placeholder{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:min(100%,550px);
    height:350px;
    border:1.5px dashed rgba(21,19,31,.35);
    border-radius:20px;
    background:rgba(255,255,255,.46);
    color:rgba(21,19,31,.55);
    font-size:12px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    transition:opacity .25s ease,transform .35s ease;
  }
  .service-display.is-switching .visual-placeholder{ opacity:0; transform:translateY(12px) scale(.97); }
  @media (max-width:900px){ .method-intro{ grid-template-columns:1fr; gap:24px; } .method-grid{ grid-template-columns:1fr 1fr; grid-template-rows:330px 250px 250px; } .method-card--large{ grid-column:span 2; grid-row:auto; } .service-tabs{ max-width:100%; overflow-x:auto; justify-content:flex-start; } .service-display{ grid-template-columns:1fr; } .service-visual{ min-height:330px; } .service-content h3{ margin-top:34px; } }
  @media (max-width:560px){ .method-section,.services-section{ padding-right:24px; padding-left:24px; } .method-grid{ grid-template-columns:1fr; grid-template-rows:auto; } .method-card,.method-card--large{ min-height:260px; grid-column:auto; } .service-tabs{ margin-top:34px; } .service-tab{ padding:12px 14px; } .service-display{ border-radius:18px; } .service-content{ padding:36px 28px; } .visual-placeholder{ height:245px; } }

  /* Aproxima Método e Serviços sem alterar as demais proporções da página. */
  .method-section{ padding-bottom:clamp(64px, 7vw, 96px); }
  .services-section{ padding-top:clamp(72px, 8vw, 112px); }

  /* ==========================================================================
     06. PROJETOS E CASES
     ========================================================================== */

  /* ---- Cases ---- */
  .cases-section{ padding:clamp(100px, 13vw, 180px) 6vw; background:#fff; }
  .cases-heading{ display:flex; align-items:end; justify-content:space-between; gap:32px; max-width:1280px; margin:0 auto 54px; }
  .cases-heading .section-title{ max-width:640px; }
  .text-link{ display:inline-flex; align-items:center; gap:9px; padding-bottom:5px; border-bottom:1px solid var(--ink); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; transition:color .2s ease,border-color .2s ease,transform .2s ease; }
  .text-link:hover{ color:rgb(var(--magenta)); border-color:rgb(var(--magenta)); transform:translateX(3px); }
  .cases-heading .text-link{ padding:14px 20px; border:0; border-radius:999px; background:var(--ink); color:#fff; box-shadow:0 10px 22px rgba(21,19,31,.14); }
  .cases-heading .text-link:hover{ border-color:transparent; background:linear-gradient(110deg,rgb(var(--cyan)),rgb(var(--violet)),rgb(var(--magenta))); color:#fff; box-shadow:0 14px 28px rgba(118,86,212,.26); transform:translateY(-2px); }
  .cases-grid{ display:grid; grid-template-columns:1.22fr .78fr; gap:16px; max-width:1280px; margin:0 auto; }
  .case-card{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:390px; overflow:hidden; border-radius:22px; padding:30px; text-decoration:none; color:#fff; isolation:isolate; }
  .case-card::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(11,10,25,.83) 0%,rgba(11,10,25,.03) 72%); }
  .case-card--main{ min-height:590px; background:linear-gradient(135deg,#261c63,#6357e8 52%,#f164b4); }
  .case-card--warm{ background:linear-gradient(145deg,#f2ac72,#d44e77 48%,#47185d); }
  .case-card--cool{ background:linear-gradient(145deg,#0c637b,#19aecc 48%,#18336e); }
  .case-card__image{ position:absolute; inset:0; z-index:-2; overflow:hidden; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.62; }
  .case-card__image::before{ content:""; width:68%; aspect-ratio:4/3; border:1px dashed rgba(255,255,255,.8); border-radius:18px; transform:rotate(-5deg); }
  .case-card__image span{ position:absolute; }
  .case-card__tag{ display:inline-flex; width:max-content; margin-bottom:13px; padding:7px 10px; border:1px solid rgba(255,255,255,.38); border-radius:999px; background:rgba(255,255,255,.13); backdrop-filter:blur(8px); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
  .case-card h3{ max-width:470px; font-family:'Telegraf',sans-serif; font-size:clamp(28px,3.2vw,47px); line-height:1; letter-spacing:-.05em; }
  .case-card p{ max-width:420px; margin-top:12px; font-size:14px; line-height:1.55; opacity:.84; }
  .case-side{ display:grid; gap:16px; }
  .case-side .case-card{ min-height:287px; }
  .case-side .case-card h3{ font-size:clamp(25px,2.3vw,33px); }

  /* ==========================================================================
     07. QUEM SOMOS
     ========================================================================== */

  /* ---- Por que a Prisma ---- */
  .why-section{ padding:clamp(92px,12vw,164px) 6vw; background:#f7f7fa; }
  .why-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; max-width:1280px; margin:0 auto; }
  .why-intro{ position:sticky; top:32px; align-self:start; }
  .why-intro .section-title{ max-width:500px; }
  .why-intro .section-copy{ margin-top:24px; }
  .why-list{ border-top:1px solid rgba(21,19,31,.16); }
  .why-item{ display:grid; grid-template-columns:70px 1fr auto; gap:24px; align-items:center; min-height:132px; border-bottom:1px solid rgba(21,19,31,.16); }
  .why-number{ color:rgb(var(--violet)); font-size:13px; font-weight:600; letter-spacing:.08em; }
  .why-item h3{ font-family:'Telegraf',sans-serif; font-size:clamp(22px,2.2vw,30px); letter-spacing:-.045em; }
  .why-item p{ max-width:440px; margin-top:8px; color:var(--ink-soft); font-size:14px; line-height:1.55; }
  .why-arrow{ display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(21,19,31,.16); border-radius:50%; transition:background .42s cubic-bezier(.22,.75,.25,1),color .38s ease,transform .52s cubic-bezier(.18,.9,.25,1),border-color .38s ease,box-shadow .42s ease; will-change:transform; }
  .why-item:hover .why-arrow{ border-color:var(--ink); background:var(--ink); color:#fff; box-shadow:0 7px 16px rgba(21,19,31,.16); transform:rotate(45deg) scale(1.04); }

  /* ==========================================================================
     08. PERGUNTAS FREQUENTES
     ========================================================================== */

  /* ---- Perguntas frequentes ---- */
  .faq-section{ position:relative; overflow:hidden; padding:clamp(92px,12vw,150px) 6vw; background:#fff; }
  .faq-wrap{ position:relative; z-index:1; display:grid; grid-template-columns:.72fr 1.28fr; gap:72px; max-width:1280px; margin:0 auto; }
  .faq-intro{ align-self:start; }
  .faq-intro .section-title{ max-width:460px; }
  .faq-intro .section-copy{ margin-top:24px; }
  .faq-list{ border-top:1px solid rgba(21,19,31,.13); }
  .faq-item{ border-bottom:1px solid rgba(21,19,31,.13); }
  .faq-question{ position:relative; display:grid; grid-template-columns:42px 1fr 40px; align-items:center; width:100%; gap:15px; padding:22px 10px; border:0; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; isolation:isolate; transition:padding .3s ease,color .3s ease; }
  .faq-question::before{ content:""; position:absolute; inset:5px -10px; z-index:-1; border:1px solid rgba(255,255,255,.62); border-radius:16px; background:rgba(255,255,255,.22); box-shadow:inset 0 1px rgba(255,255,255,.55); backdrop-filter:blur(0px); opacity:0; transition:opacity .32s ease,background .32s ease,backdrop-filter .32s ease,box-shadow .32s ease; }
  .faq-question:hover::before,.faq-question[aria-expanded="true"]::before{ opacity:1; background:linear-gradient(110deg,rgba(205,243,255,.62),rgba(244,231,255,.53) 58%,rgba(255,221,241,.58)); backdrop-filter:blur(14px); box-shadow:0 13px 30px rgba(80,64,134,.10),inset 0 1px rgba(255,255,255,.76); }
  .faq-question:hover,.faq-question[aria-expanded="true"]{ padding-right:16px; padding-left:16px; }
  .faq-number{ color:rgb(var(--violet)); font-size:12px; font-weight:600; letter-spacing:.08em; }
  .faq-question h3{ font-family:'Telegraf',sans-serif; font-size:clamp(19px,2vw,26px); letter-spacing:-.04em; }
  .faq-symbol{ display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(21,19,31,.16); border-radius:50%; font-size:22px; font-weight:300; line-height:1; transition:transform .3s ease,background .3s ease,color .3s ease; }
  .faq-question[aria-expanded="true"] .faq-symbol{ background:var(--ink); color:#fff; transform:rotate(45deg); }
  .faq-answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1); }
  .faq-answer__inner{ min-height:0; overflow:hidden; }
  .faq-answer p{ max-width:650px; padding:0 66px 0; color:var(--ink-soft); font-size:15px; line-height:1.65; opacity:0; transform:translateY(-5px); transition:opacity .2s ease,transform .3s ease,padding .35s ease; }
  .faq-item.is-open .faq-answer{ grid-template-rows:1fr; }
  .faq-item.is-open .faq-answer p{ padding-bottom:28px; opacity:1; transform:translateY(0); }
  .faq-question:focus-visible{ outline:3px solid rgb(var(--violet)); outline-offset:4px; border-radius:14px; }

  .whatsapp-float{ position:fixed; right:28px; bottom:28px; z-index:20; display:inline-flex; align-items:center; gap:10px; padding:11px 16px 11px 12px; border:1px solid rgba(255,255,255,.76); border-radius:999px; background:rgba(23,18,46,.94); box-shadow:0 12px 30px rgba(22,16,53,.24); color:#fff; font-size:13px; font-weight:600; text-decoration:none; backdrop-filter:blur(12px); transition:transform .22s ease,box-shadow .22s ease,background .22s ease; }
  .whatsapp-float:hover{ transform:translateY(-4px); background:#25d366; box-shadow:0 17px 34px rgba(37,211,102,.28); }
  .whatsapp-float__icon{ display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:#25d366; color:#fff; }
  .whatsapp-float:hover .whatsapp-float__icon{ background:#fff; color:#1c9e4e; }
  .whatsapp-float:focus-visible{ outline:3px solid rgb(var(--cyan)); outline-offset:4px; }

  /* ==========================================================================
     09. RODAPÉ E CONTATO — componente reutilizável
     ========================================================================== */

  /* ---- Rodapé ---- */
  .site-footer{ overflow:hidden; color:#fff; background:#17122e; }
  .footer-cta{ position:relative; padding:clamp(76px,10vw,132px) 6vw; overflow:hidden; background:linear-gradient(115deg,#17122e 4%,#30218d 48%,#c33b9b 105%); }
  .footer-flare{ position:absolute; left:78%; top:70%; width:min(58vw,700px); aspect-ratio:1; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); opacity:.82; background:radial-gradient(circle,rgba(117,222,255,.78) 0%,rgba(108,83,255,.38) 25%,rgba(229,72,182,.10) 56%,transparent 70%); filter:blur(4px); transition:left .18s ease-out,top .18s ease-out,opacity .25s ease; }
  .footer-cta:hover .footer-flare{ opacity:1; }
  .footer-cta__inner{ position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; gap:44px; max-width:1280px; margin:0 auto; }
  .footer-cta .section-kicker{ color:rgba(255,255,255,.72); }
  .footer-cta h2{ max-width:820px; margin-top:22px; font-family:'Telegraf',sans-serif; font-size:clamp(42px,6vw,82px); line-height:.96; letter-spacing:-.06em; }
  .footer-button{ display:inline-flex; align-items:center; gap:10px; flex-shrink:0; padding:17px 27px; border-radius:999px; background:#fff; color:var(--ink); font-size:15px; font-weight:600; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
  .footer-button:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(11,5,42,.3); }
  .footer-main{ max-width:1280px; margin:0 auto; padding:70px 6vw 28px; }
  .footer-top{ display:grid; grid-template-columns:1.4fr repeat(3,.7fr); gap:36px; padding-bottom:70px; }
  .footer-logo{ font-family:'Telegraf',sans-serif; font-size:clamp(38px,5vw,60px); letter-spacing:-.06em; text-decoration:none;}
  .footer-note{ max-width:270px; margin-top:16px; color:rgba(255,255,255,.63); font-size:14px; line-height:1.55; }
  .footer-column h3{ margin-bottom:18px; color:rgba(255,255,255,.52); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
  .footer-column a,.footer-column p{ display:block; margin:0 0 11px; color:#fff; font-size:14px; line-height:1.4; text-decoration:none; }
  .footer-column a{ transition:color .2s ease; } .footer-column a:hover{ color:#9bddf5; }
  .footer-bottom{ display:flex; justify-content:space-between; gap:22px; padding-top:23px; border-top:1px solid rgba(255,255,255,.17); color:rgba(255,255,255,.55); font-size:12px; }
  .footer-bottom div{ display:flex; flex-wrap:wrap; gap:18px; } .footer-bottom a{ color:inherit; text-decoration:none; }
  @media (max-width:900px){ .cases-heading{ align-items:start; flex-direction:column; } .cases-grid{ grid-template-columns:1fr; } .case-card--main{ min-height:460px; } .case-side{ grid-template-columns:1fr 1fr; } .why-wrap,.faq-wrap{ grid-template-columns:1fr; gap:44px; } .why-intro{ position:static; } .footer-top{ grid-template-columns:1.2fr 1fr 1fr; } .footer-top .footer-column:last-child{ grid-column:2; } }
  @media (max-width:600px){ .cases-section,.why-section,.faq-section{ padding-right:24px; padding-left:24px; } .case-side{ grid-template-columns:1fr; } .case-card--main,.case-side .case-card{ min-height:340px; } .why-item{ grid-template-columns:40px 1fr; gap:12px; padding:23px 0; } .why-arrow{ display:none; } .faq-question{ grid-template-columns:32px 1fr 35px; gap:9px; padding:19px 4px; } .faq-question:hover,.faq-question[aria-expanded="true"]{ padding-right:10px; padding-left:10px; } .faq-answer p{ padding-right:14px; padding-left:42px; } .footer-cta__inner{ align-items:start; flex-direction:column; } .footer-main{ padding:52px 24px 24px; } .footer-top{ grid-template-columns:1fr 1fr; gap:36px 20px; } .footer-top > :first-child{ grid-column:span 2; } .footer-top .footer-column:last-child{ grid-column:auto; } .footer-bottom{ flex-direction:column; } }
  @media (max-width:900px){ .whatsapp-float{ display:none; } }
  @media (prefers-reduced-motion:reduce){ .footer-flare{ transition:none; } }

  /* ==========================================================================
     10. AJUSTES RESPONSIVOS E REFINAMENTOS
     ========================================================================== */

  /* Desktop: cadência mais compacta entre os blocos, preservando a versão mobile. */
  @media (min-width:901px){
    .method-section,.why-section,.faq-section{ padding-top:clamp(72px,7vw,100px); padding-bottom:clamp(72px,7vw,100px); }
    .services-section,.cases-section{ padding-top:clamp(16px,2vw,28px); padding-bottom:clamp(72px,7vw,100px); }
    .footer-cta{ padding-top:clamp(72px,7vw,100px); padding-bottom:clamp(72px,7vw,100px); }
    .method-intro{ margin-bottom:42px; }
    .cases-heading{ margin-bottom:40px; }
    .service-display{ min-height:460px; }
    .case-card--main{ min-height:500px; }
    .case-side .case-card{ min-height:242px; }
    .footer-top{ padding-bottom:54px; }
  }
  .service-tabs{ width:min(100%,1420px); max-width:1420px; overflow-x:auto; scrollbar-width:none; }
  .service-tabs::-webkit-scrollbar{ display:none; }

  /* ==========================================================================
     11. ANIMAÇÕES DE ENTRADA
     ========================================================================== */

  /* Entradas discretas: ritmo suave, sem competir com o conteúdo. */
  @media (prefers-reduced-motion:no-preference){
    .reveal-on-scroll{ opacity:0; transform:translateY(22px); transition:opacity .75s cubic-bezier(.2,.75,.25,1),transform .75s cubic-bezier(.2,.75,.25,1); transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; }
    .reveal-on-scroll.is-revealed{ opacity:1; transform:translateY(0); }
    .case-card.reveal-on-scroll{ transform:translateY(28px) scale(.985); }
    .case-card.reveal-on-scroll.is-revealed{ transform:translateY(0) scale(1); }
  }


/* ==========================================================================
   12. PÁGINA-MODELO — páginas informativas, editoriais e institucionais
   ========================================================================== */

.content-page{
  overflow:hidden;
  background:var(--bg);
  padding-top:clamp(126px,15vw,190px);
}
.content-page__shell{
  width:min(1280px,88vw);
  margin:0 auto;
}
.content-page__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink-soft);
  font:600 12px 'Open Sauce Sans',sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.content-page__eyebrow::before{
  content:"";
  width:30px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgb(var(--cyan)),rgb(var(--magenta)));
}
.content-page__title{
  max-width:980px;
  margin-top:24px;
  font:700 clamp(48px,7.5vw,108px)/.94 'Telegraf',sans-serif;
  letter-spacing:-.065em;
}
.content-page__lead{
  max-width:600px;
  margin:30px 0 0 auto;
  color:var(--ink-soft);
  font-size:clamp(18px,2vw,22px);
  line-height:1.55;
}
.content-page__hero-media{
  position:relative;
  display:grid;
  min-height:clamp(360px,52vw,650px);
  margin-top:clamp(58px,8vw,112px);
  overflow:hidden;
  border-radius:28px;
  background:#e9f8ff;
}
.content-page__hero-media .media-slot{
  width:100%;
  min-height:clamp(360px,52vw,650px);
  aspect-ratio:16/9;
}
.content-page__hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 52%,rgba(92,62,193,.13));
  pointer-events:none;
}
.media-slot{
  position:relative;
  display:grid;
  place-items:center;
  min-height:100%;
  overflow:hidden;
  border:1px dashed rgba(21,19,31,.28);
  background:
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.72) 0 8%,transparent 28%),
    linear-gradient(135deg,#f7f5ff 0%,#e8f8ff 48%,#ffeaf5 100%);
  color:rgba(21,19,31,.58);
}
.media-slot::before{
  content:"";
  position:absolute;
  width:56%;
  aspect-ratio:1;
  border:1px solid rgba(21,19,31,.14);
  border-radius:50%;
}
.media-slot__label{
  position:relative;
  z-index:1;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.68);
  font:600 11px 'Open Sauce Sans',sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.content-page__section{
  padding:clamp(88px,12vw,160px) 0;
}
.content-page__section--split{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
  align-items:start;
  gap:clamp(42px,9vw,140px);
}
.content-page__section-title{
  max-width:500px;
  font:700 clamp(36px,4.5vw,64px)/1 'Telegraf',sans-serif;
  letter-spacing:-.055em;
}
.content-page__copy{
  max-width:590px;
  color:var(--ink-soft);
  font-size:17px;
  line-height:1.72;
}
.content-page__copy p + p{ margin-top:20px; }
.content-page__quote{
  margin-top:44px;
  padding:26px 0 0 28px;
  border-left:2px solid rgb(var(--violet));
  color:var(--ink);
  font:500 clamp(20px,2.3vw,29px)/1.35 'Open Sauce Sans',sans-serif;
}
.content-page__image-pair{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
  min-height:540px;
}
.content-page__image-pair .media-slot{ min-height:280px; aspect-ratio:4/5; border-radius:22px; }
.content-page__image-pair .media-slot:nth-child(2){ margin-top:90px; }
.content-page__gallery{
  padding:clamp(70px,10vw,128px) 0;
  background:#fff;
}
.content-page__gallery-header{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:44px;
}
.content-page__gallery-header .content-page__section-title{ max-width:650px; }
.content-page__gallery-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-template-rows:300px 300px;
  gap:16px;
}
.content-page__gallery-grid .media-slot{
  min-height:0;
  height:100%;
  border-radius:22px;
}
.content-page__gallery-grid .media-slot:first-child{ grid-row:span 2; }
.content-page__cta{
  padding:clamp(88px,12vw,150px) 0;
}
.content-page__cta-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  overflow:hidden;
  padding:clamp(34px,6vw,82px);
  border-radius:28px;
  background:var(--ink);
  color:#fff;
}
.content-page__cta-card::before{
  content:"";
  position:absolute;
  width:52%;
  aspect-ratio:1;
  right:-9%;
  bottom:-52%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(225,54,175,.85),rgba(96,205,244,.35) 42%,transparent 68%);
  filter:blur(4px);
}
.content-page__cta-card > *{ position:relative; z-index:1; }
.content-page__cta-title{
  max-width:650px;
  font:700 clamp(35px,4.6vw,64px)/1 'Telegraf',sans-serif;
  letter-spacing:-.055em;
}
.content-page__cta-card .btn-primary{ flex:0 0 auto; background:#fff; color:var(--ink); }
.content-page__cta-card .btn-primary:hover{ color:#fff; }

@media (max-width:900px){
  .content-page__section--split{ grid-template-columns:1fr; }
  .content-page__lead{ margin-left:0; }
  .content-page__gallery-grid{ grid-template-columns:1fr 1fr; grid-template-rows:330px 240px 240px; }
  .content-page__gallery-grid .media-slot:first-child{ grid-column:span 2; grid-row:auto; }
  .content-page__cta-card{ align-items:flex-start; flex-direction:column; }
}
@media (max-width:560px){
  .content-page__shell{ width:min(100% - 48px,1280px); }
  .content-page__hero-media{ border-radius:20px; }
  .content-page__image-pair{ grid-template-columns:1fr; min-height:auto; }
  .content-page__image-pair .media-slot{ min-height:290px; }
  .content-page__image-pair .media-slot:nth-child(2){ margin-top:0; }
  .content-page__gallery-header{ align-items:flex-start; flex-direction:column; }
  .content-page__gallery-grid{ grid-template-columns:1fr; grid-template-rows:320px repeat(2,230px); }
  .content-page__gallery-grid .media-slot:first-child{ grid-column:auto; }
}


/* ==========================================================================
   13. MENU DE SERVIÇOS — navegação entre as páginas de serviço
   ========================================================================== */

.services-dropdown{ position:relative; }
.services-dropdown__toggle{
  border:0;
  background:transparent;
  cursor:pointer;
}
.services-dropdown__toggle svg{ transition:transform .22s ease; }
.services-dropdown.is-open .services-dropdown__toggle svg{ transform:rotate(180deg); }
.services-dropdown__menu{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  z-index:30;
  display:grid;
  min-width:238px;
  padding:8px;
  border:1px solid rgba(21,19,31,.10);
  border-radius:16px;
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 38px rgba(24,18,57,.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(-7px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  backdrop-filter:blur(14px);
}
.services-dropdown.is-open .services-dropdown__menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.services-dropdown__menu a{
  display:block;
  padding:11px 13px;
  border-radius:10px;
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.services-dropdown__menu a:hover,
.services-dropdown__menu a:focus-visible{
  background:#f1f0f6;
  color:rgb(var(--magenta));
  outline:none;
}

@media (max-width:900px){
  .services-dropdown{ width:100%; }
  .services-dropdown__toggle{ width:100%; justify-content:space-between; }
  .services-dropdown__menu{
    position:static;
    min-width:0;
    margin:0 8px;
    padding:4px;
    border-radius:14px;
    box-shadow:none;
    transform:none;
  }
  .services-dropdown.is-open .services-dropdown__menu{ transform:none; }
  .services-dropdown__menu a{ padding:12px 14px; }
}

/* ==========================================================================
   14. PÁGINAS INSTITUCIONAIS — Método, by PRISMA e Sobre
   ========================================================================== */

.services-dropdown:hover .services-dropdown__menu,.services-dropdown:focus-within .services-dropdown__menu{opacity:1;visibility:visible;transform:translateY(0)}
.services-dropdown:hover .services-dropdown__toggle svg,.services-dropdown:focus-within .services-dropdown__toggle svg{transform:rotate(180deg)}
.services-dropdown__menu a[aria-current="page"]{background:linear-gradient(105deg,rgba(96,205,244,.22),rgba(141,124,242,.18),rgba(225,54,175,.16));color:var(--ink);font-weight:600}
.site-header__nav-link[aria-current="page"]{background:rgba(21,19,31,.07)}
.method-page__hero,.lab-page__hero,.about-page__hero{padding-bottom:clamp(70px,9vw,120px)}
.method-page__philosophy,.about-page__story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);gap:clamp(48px,10vw,150px);padding:clamp(72px,10vw,132px) 0;border-top:1px solid rgba(21,19,31,.12)}
.method-page__steps{padding:clamp(90px,12vw,150px) 0}.method-page__steps>.section-title{max-width:620px;margin-top:20px}
.method-timeline{max-width:920px;margin:64px auto 0;list-style:none}.method-timeline li{display:grid;grid-template-columns:94px 1fr;gap:28px;padding:28px 0;border-top:1px solid rgba(21,19,31,.13)}.method-timeline li:last-child{border-bottom:1px solid rgba(21,19,31,.13)}.method-timeline li>span,.lab-page__grid span,.lab-page__notes span{color:rgb(var(--violet));font:600 12px 'Open Sauce Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}.method-timeline h3{font:700 clamp(25px,3vw,38px)/1 'Telegraf',sans-serif;letter-spacing:-.05em}.method-timeline p{max-width:460px;margin-top:11px;color:var(--ink-soft);font-size:15px;line-height:1.6}
.method-page__outcomes{padding:clamp(74px,10vw,130px) 0}.method-outcomes{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}.method-outcomes span{padding:13px 17px;border:1px solid rgba(21,19,31,.13);border-radius:999px;font-size:14px;font-weight:600}.method-outcomes span:nth-child(2n){background:#eaf8ff}.method-outcomes span:nth-child(3n){background:#f3efff}
.lab-page{background:#fff}.lab-page__intro{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(40px,8vw,120px);padding:clamp(64px,10vw,130px) 0}.lab-page__intro .media-slot{min-height:480px;border-radius:24px}.lab-page__intro .section-title,.about-page__prism .section-title{margin:20px 0}
.lab-page__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden;border:1px solid rgba(21,19,31,.12);border-radius:24px;background:rgba(21,19,31,.12)}.lab-page__grid article{min-height:270px;padding:clamp(28px,4vw,52px);background:#fff}.lab-page__grid article:nth-child(2),.lab-page__grid article:nth-child(3){background:#fafafd}.lab-page__grid h2{max-width:340px;margin-top:58px;font:700 clamp(27px,3.3vw,42px)/1 'Telegraf',sans-serif;letter-spacing:-.05em}.lab-page__grid p{max-width:350px;margin-top:12px;color:var(--ink-soft);font-size:14px;line-height:1.6}
.lab-page__notes{padding:clamp(90px,12vw,160px) 0}.lab-page__notes>div{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.lab-page__notes article{min-height:250px;padding:25px;border-top:2px solid var(--ink)}.lab-page__notes h2{margin-top:52px;font:700 clamp(24px,2.7vw,34px)/1.1 'Telegraf',sans-serif;letter-spacing:-.045em}
.about-page__prism{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(42px,9vw,135px);padding:clamp(82px,11vw,150px) 0;background:#fff}.about-page__prism .media-slot{min-height:440px;border-radius:50%}.about-page__principles{padding:clamp(90px,12vw,160px) 0}.about-page__principles>.section-title{max-width:680px;margin-top:20px}.about-page__principles>div{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:48px;background:rgba(21,19,31,.13);border:1px solid rgba(21,19,31,.13)}.about-page__principles span{padding:30px;background:#fff;font:600 clamp(17px,2vw,23px)/1.3 'Open Sauce Sans',sans-serif;letter-spacing:-.025em}
@media(max-width:900px){.method-page__philosophy,.about-page__story,.lab-page__intro,.about-page__prism{grid-template-columns:1fr}.lab-page__notes>div{grid-template-columns:1fr;gap:0}}@media(max-width:560px){.method-timeline li{grid-template-columns:1fr;gap:12px}.lab-page__grid,.about-page__principles>div{grid-template-columns:1fr}.lab-page__intro .media-slot{min-height:320px}.about-page__prism .media-slot{min-height:320px;border-radius:22px}}

/* ========================================================================== 
   15. COESÃO DAS PÁGINAS INTERNAS — ritmo, camadas e movimento
   ========================================================================== */

/* Um ritmo único: evita que o fim e o início de blocos vizinhos somem espaços excessivos. */
.content-page__section{padding:clamp(62px,7vw,96px) 0}
.content-page__gallery{padding:clamp(58px,7vw,94px) 0}
.content-page__cta{padding:clamp(62px,7vw,98px) 0}
.content-page__section + .content-page__image-pair{margin-top:clamp(-10px,-1vw,0px)}
.method-page__philosophy,.about-page__story{padding:clamp(58px,7vw,92px) 0}
.method-page__steps,.lab-page__notes,.about-page__principles{padding:clamp(66px,8vw,106px) 0}
.lab-page__intro,.about-page__prism{padding:clamp(58px,7vw,96px) 0}
.method-page__outcomes{padding:clamp(58px,7vw,94px) 0}

.content-page article{position:relative;isolation:isolate}
.content-page article::before{content:"";position:absolute;z-index:-1;top:150px;right:-20vw;width:52vw;height:680px;pointer-events:none;background:radial-gradient(ellipse,rgba(210,241,255,.48),rgba(241,227,255,.24) 40%,transparent 72%);filter:blur(18px)}
.content-page article::after{content:"";position:absolute;z-index:-1;top:36%;left:-30vw;width:58vw;height:560px;pointer-events:none;background:radial-gradient(ellipse,rgba(255,231,243,.40),rgba(232,241,255,.28) 38%,transparent 72%);filter:blur(22px)}
.content-page__hero-media,.content-page .media-slot{box-shadow:0 18px 48px rgba(48,32,111,.08),inset 0 1px rgba(255,255,255,.88)}
.content-page__hero-media{border:1px solid rgba(255,255,255,.74)}
.content-page__hero-media::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(108deg,rgba(255,255,255,.48),transparent 28%,rgba(255,255,255,.12) 52%,transparent 70%);mix-blend-mode:screen}
.content-page .media-slot{border-color:rgba(255,255,255,.78);transition:transform .6s cubic-bezier(.2,.75,.25,1),box-shadow .6s ease,filter .6s ease}
.content-page .media-slot::after{content:"";position:absolute;inset:-16%;pointer-events:none;opacity:.54;background:linear-gradient(112deg,transparent 20%,rgba(255,255,255,.64) 37%,rgba(142,125,242,.20) 45%,rgba(226,63,177,.15) 54%,transparent 68%);transform:translateX(-45%) rotate(-8deg);animation:prismaSheen 9s ease-in-out infinite}
.content-page .media-slot:hover{transform:translateY(-5px);filter:saturate(1.08);box-shadow:0 28px 58px rgba(48,32,111,.16),inset 0 1px rgba(255,255,255,.9)}
.content-page .media-slot__label{box-shadow:0 10px 25px rgba(44,34,88,.08)}
.method-timeline li,.lab-page__grid article,.lab-page__notes article,.about-page__principles span{transition:background .35s ease,transform .35s ease,box-shadow .35s ease}
.method-timeline li:hover{background:rgba(255,255,255,.7);transform:translateX(8px)}
.lab-page__grid article:hover,.lab-page__notes article:hover,.about-page__principles span:hover{background:linear-gradient(130deg,#fff,#f3f7ff 60%,#fff4fb);transform:translateY(-4px);box-shadow:0 18px 32px rgba(48,32,111,.08)}
@keyframes prismaSheen{0%,100%{transform:translateX(-46%) rotate(-8deg)}50%{transform:translateX(40%) rotate(-8deg)}}
@media(max-width:560px){.content-page article::before{top:220px;right:-60vw;width:120vw}.content-page article::after{left:-70vw;width:140vw}.content-page__section,.content-page__gallery,.content-page__cta{padding-top:56px;padding-bottom:56px}}
@media(prefers-reduced-motion:reduce){.content-page .media-slot::after{animation:none}.content-page .media-slot,.method-timeline li,.lab-page__grid article,.lab-page__notes article,.about-page__principles span{transition:none}}.language-switch{display:flex;gap:4px;padding:4px;border:1px solid rgba(21,19,31,.1);border-radius:999px;background:#fff}.language-switch__option{padding:7px 9px;border-radius:999px;color:var(--ink-soft);font-size:11px;font-weight:600;text-decoration:none}.language-switch__option.is-active{background:var(--ink);color:#fff}

/* ==========================================================================
   IMAGENS — preenchimento proporcional sem distorção
   ========================================================================== */

/* Base compartilhada: cobre o container, recorta excesso, mantém proporção */
.media-slot img,
.method-card__art img,
.case-card__image img,
.service-visual__image{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
}

/* Slots de conteúdo: frame absoluto dentro do container */
.media-slot img{
  position:absolute;
  inset:0;
  z-index:2;
}
.media-slot:has(img)::before,
.media-slot:has(img)::after{
  display:none;
}

/* Cards do método na home */
.method-card__art img{
  position:absolute;
  inset:0;
  opacity:.72;
}
.method-card:has(.method-card__art img){
  color:#fff;
}
.method-card:has(.method-card__art img) .method-card__art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(15,12,30,.05) 0%, rgba(15,12,30,.45) 50%, rgba(15,12,30,.78) 100%);
  pointer-events:none;
}
.method-card:has(.method-card__art img) .method-card__number,
.method-card:has(.method-card__art img) h3,
.method-card:has(.method-card__art img) p{
  z-index:2;
  color:#fff;
}

/* Visual dinâmico de serviços na home */
.service-visual__frame{
  position:relative;
  z-index:1;
  width:min(100%,550px);
  aspect-ratio:11/7;
  overflow:hidden;
  border-radius:20px;
  transition:opacity .25s ease,transform .35s ease;
}
.service-visual__image{
  position:absolute;
  inset:0;
  border-radius:0;
}
.service-display.is-switching .service-visual__frame{
  opacity:0;
  transform:translateY(12px) scale(.97);
}

/* Cards de cases na home */
.case-card__image img{
  position:absolute;
  inset:0;
}
.case-card__image:has(img)::before,
.case-card__image:has(img) span{
  display:none;
}

@media (max-width:900px){
  .service-visual__frame{
    width:100%;
    max-width:none;
    aspect-ratio:4/3;
  }
}
@media (max-width:560px){
  .content-page__hero-media .media-slot{
    aspect-ratio:4/3;
    min-height:240px;
  }
  .content-page__image-pair .media-slot{
    aspect-ratio:3/4;
    min-height:240px;
  }
  .service-visual__frame{
    aspect-ratio:4/3;
  }
}