/* ==========================================================================
   QRA · Landing (home) — page-specific styles.
   Extracted from the canvas <style> block. Shared tokens live in tokens.css;
   Button / image placeholders in qra-components.css.
   ========================================================================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--surface-0);}
body{font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased;}
a{color:var(--text-link);text-decoration:none;}
a:hover{color:var(--text-link-hover);}
/* .qra-eyebrow / .qra-wrap now live in qra-components.css */
@keyframes qraWallUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes qraWallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes qraFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes qraMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes qraScrollDot{0%{opacity:0;transform:translateY(-5px)}25%{opacity:1}55%{opacity:1;transform:translateY(9px)}100%{opacity:0;transform:translateY(9px)}}
@keyframes qraScrollBounce{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(4px);opacity:1}}
/* Nav / nav-pill / dropdown / mega-menu now live in qra-components.css (shared). */
/* .qra-roll now lives in qra-components.css */

/* ==========================================================================
   Landing — content classes extracted from repeated inline styles.
   ========================================================================== */
/* AUTOMATIZAR panels (×5) */
.idx-panel-h3{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--display-sm);line-height:1.15;letter-spacing:-.02em;color:var(--text-strong);margin:0 0 var(--space-4);}
.idx-panel-p{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-muted);margin:0;}
.idx-check-ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:var(--space-3);}
.idx-check-li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-md);line-height:var(--leading-normal);color:var(--text-body);}
.idx-check-ico{flex-shrink:0;margin-top:2px;}

/* COMO FUNCIONA — scroll scene. The track is tall; the sticky pane holds the
   dial, and landing.js drives the ring, the badge and which scene is visible
   from the scroll progress. The sticky pane must stay the track's first child. */
.idx-func-track{position:relative;height:380vh;}
.idx-func-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:100px 24px 34px;box-sizing:border-box;background:radial-gradient(125% 95% at 50% 46%,var(--surface-0),rgba(255,255,255,0) 44%,rgba(107,63,255,.13) 82%);}
.idx-func-head{position:relative;z-index:1;text-align:center;width:100%;max-width:660px;flex:0 0 auto;}
.idx-func-h2{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(23px,2.8vw,32px);line-height:1.15;letter-spacing:-.02em;color:var(--text-strong);margin:0 0 10px;text-wrap:balance;}
.idx-func-lead{font-size:var(--text-base);line-height:1.5;color:var(--text-muted);margin:0;}
.idx-func-stage{position:relative;z-index:1;flex:1 1 auto;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;}
.idx-func-dial{position:relative;width:min(58vh,520px);aspect-ratio:1;}
.idx-func-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.idx-func-badgewrap{position:absolute;left:50%;top:clamp(56px,12%,84px);transform:translateX(-50%);z-index:2;}
.idx-func-badge{display:inline-flex;align-items:center;padding:6px 15px;border-radius:var(--radius-full);background:var(--surface-0);border:1px solid var(--border-default);box-shadow:var(--shadow-sm);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-strong);}
/* the four steps stack in the same box; only opacity changes */
.idx-func-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 12%;opacity:0;transition:opacity .45s ease;pointer-events:none;}
.idx-func-scene:first-child{opacity:1;}
.idx-func-h3{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.025em;color:var(--text-strong);margin:0 0 16px;text-wrap:balance;}
.idx-func-p{font-size:clamp(14px,1.2vw,16px);line-height:1.6;color:var(--text-muted);margin:0;max-width:34ch;}
.idx-func-scroll{position:relative;z-index:1;flex:0 0 auto;margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.idx-func-mouse{position:relative;width:26px;height:40px;display:block;}
/* gradient outline via a masked border */
.idx-func-mouse::before{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(180deg,var(--primary-500),var(--secondary-400));padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;}
.idx-func-wheel{position:absolute;left:0;right:0;top:6px;display:flex;justify-content:center;}
.idx-func-wheel span{width:4px;height:8px;border-radius:2px;background:linear-gradient(180deg,var(--primary-500),var(--secondary-400));animation:qraScrollDot 1.5s ease-in-out infinite;}
.idx-func-chev{animation:qraScrollBounce 1.5s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){
  .idx-func-wheel span,.idx-func-chev{animation:none;}
  .idx-func-scene{transition:none;}
}

/* SERVIÇOS cards (×4) */
.idx-servcard{cursor:pointer;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;min-height:268px;background:transparent;transition:transform .15s;}
.idx-servcard:hover{transform:translateY(-2px);}
.idx-servcard--feature{border:1.5px solid var(--ink-800);background:var(--ink-800);box-shadow:0 18px 40px rgba(21,13,51,.35);}
.idx-servcard--feature:hover{transform:translateY(-3px);}
.idx-servcard-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:auto;}
.idx-servcard-label{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.idx-servcard-label--feature{color:rgba(255,255,255,.7);}
.idx-servcard-tag{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-bold);color:rgba(255,255,255,.85);}
.idx-servcard-tag--free{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);padding:3px 11px;border-radius:var(--radius-3xl);background:var(--secondary-400);color:#fff;}
.idx-servcard-h3{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(22px,2vw,26px);letter-spacing:-.01em;color:#fff;margin:22px 0 12px;}
.idx-servcard-p{font-size:var(--text-base);line-height:var(--leading-normal);color:rgba(255,255,255,.72);margin:0 0 22px;}
.idx-servcard-p--feature{color:rgba(255,255,255,.85);}
.idx-servcard-arrow{color:#fff;display:inline-flex;align-items:center;}

/* SERVIÇOS marquee */
.idx-marq-word{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--display-sm);letter-spacing:-.01em;color:rgba(255,255,255,.9);}
.idx-marq-sep{color:var(--secondary-400);font-size:var(--text-2xl);line-height:1;}

/* ==========================================================================
   Layout containers — extracted from inline style="" so media queries can
   reach them at all. Vertical rhythm comes from .qra-section (fluid tokens).
   ========================================================================== */
/* HERO */
.idx-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--primary-50),var(--surface-0));}
.idx-hero-inner{position:relative;z-index:2;}
.idx-hero-stage{position:relative;height:clamp(280px,38vh,420px);margin-bottom:var(--space-2);}
.idx-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-7);align-items:end;}
.idx-hero-lead{max-width:440px;justify-self:end;}

/* PROBLEMA — the scrolling card wall */
.idx-problema{position:relative;overflow:hidden;background:var(--surface-1);}
.idx-problema-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-7);flex-wrap:wrap;margin:0 auto var(--space-6);}
.idx-wall{position:relative;height:clamp(360px,48vh,520px);overflow:hidden;}
.idx-wall-row{display:flex;gap:var(--space-4);padding:0 var(--gutter);height:100%;max-width:1440px;margin:0 auto;align-items:flex-start;}
.idx-wall-col{flex:1;min-width:0;height:100%;overflow:hidden;}

/* PROBLEMA — team-overlay experiment (test/problem-people-photos).
   No sticky pin — normal page scroll. Cards behind become desaturated ambient;
   the 5 team photos swap based on scroll progress (JS: initProblemaTeam). */
.idx-problema[data-team-overlay] .idx-wall{filter:saturate(.12) opacity(.42);transition:filter .4s ease;}
.idx-team-overlay{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(94vw,1440px);aspect-ratio:21/9;pointer-events:none;z-index:5;}
.idx-team-overlay img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center;opacity:0;transition:opacity .45s ease;will-change:opacity;}
.idx-team-overlay img[data-active="true"]{opacity:1;}

/* PROBLEMA — desktop breath: min-height gives the section a vertical stage,
   space-between anchors the head to the top and the wall (with its bottom-pinned
   team overlay) to the bottom, so the gap between them reads as a deliberate
   pause between question ("is this stealing your time?") and evidence (people
   emerging from the ambient wall). Mobile/tablet keep normal flow — the head
   already breathes because the wall drops to 2 columns. */
@media(min-width:1024px){
  .idx-problema{min-height:clamp(820px,92vh,1040px);display:flex;flex-direction:column;justify-content:space-between;}
  .idx-problema-head{margin-bottom:0;}
}

/* AUTOMATIZAR — the active [data-auto-panel] is display:contents (landing.js),
   so its two children ARE grid items here, alongside the fallback card. */
.idx-auto-grid{display:grid;grid-template-columns:1.1fr 1fr .95fr;gap:var(--space-6);align-items:start;}
.idx-auto-stage{position:relative;height:clamp(320px,40vh,400px);background:var(--surface-1);border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:36px;}

/* SERVIÇOS */
.idx-serv-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--space-6);align-items:stretch;}
.idx-serv-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}

/* ==========================================================================
   FAQ — server-rendered (ADR 0002); landing.js only flips [data-active] on the
   Tema panels and [aria-expanded] on the questions. Everything below is gated
   on html.js so that WITHOUT JavaScript every Tema and every answer stays
   visible: the tabs disappear and the FAQ degrades to a plain titled list.
   The `js` class is set inline in <head> (layout.php), so nothing flashes.
   ========================================================================== */
.idx-faq{background:var(--surface-0);}
.idx-faq-wrap{max-width:920px;}
.idx-faq-head{margin-bottom:var(--space-6);}
.idx-faq-h2{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--display-lg);line-height:var(--leading-tight);letter-spacing:-.025em;color:var(--text-strong);margin:0;}

/* Tema switcher — only meaningful once JS is driving it. */
.idx-faq-tabs{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:var(--space-3);}
html:not(.js) .idx-faq-tabs{display:none;}
.idx-faq-tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:0 0 2px;cursor:pointer;font-family:var(--font-body);font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--text-subtle);transition:color .15s;}
.idx-faq-tab:hover{color:var(--text-strong);}
.idx-faq-tab[aria-selected="true"]{font-weight:var(--weight-bold);color:var(--primary-600);border-bottom-color:var(--primary-500);}

/* Tema panel. The h3 is the no-JS heading; the tabs replace it once JS runs. */
.idx-faq-panel{display:flex;flex-direction:column;}
html.js .idx-faq-panel[data-active="false"]{display:none;}
.idx-faq-panel-h3{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-xl);color:var(--text-strong);margin:var(--space-6) 0 var(--space-2);}
html.js .idx-faq-panel-h3{display:none;}

.idx-faq-item{border-top:1px solid var(--border-default);}
.idx-faq-item:first-of-type{border-top:none;}
.idx-faq-q{appearance:none;background:none;border:none;width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:18px 0;cursor:pointer;color:var(--text-muted);}
.idx-faq-qt{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--text-strong);}
.idx-faq-ico{flex-shrink:0;display:inline-flex;transition:transform .2s;}
.idx-faq-q[aria-expanded="true"] .idx-faq-ico{transform:rotate(45deg);}
/* sem JS o botão não colapsa nada — esconder o +/× evita prometer o que não cumpre */
html:not(.js) .idx-faq-ico{display:none;}
html.js .idx-faq-q[aria-expanded="false"] + .idx-faq-a{display:none;}
.idx-faq-at{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-muted);margin:0;padding:0 0 20px;}

/* ==========================================================================
   Responsive — --bp-lg 1024 / --bp-md 768 / --bp-sm 640 (see docs/adr/0001)
   ========================================================================== */
@media(max-width:1023px){
  .idx-hero-grid,.idx-serv-grid{grid-template-columns:1fr;gap:var(--space-5);}
  .idx-hero-lead{max-width:none;justify-self:stretch;}
  .idx-auto-grid{grid-template-columns:1fr 1fr;}
  .idx-auto-card{grid-column:1 / -1;}
  /* a 4-column wall at tablet width leaves ~150px per card — drop the last one */
  .idx-wall-col:nth-child(n+4){display:none;}
}
@media(max-width:767px){
  .idx-auto-grid{grid-template-columns:1fr;}
  .idx-wall-col:nth-child(n+3){display:none;}
  .idx-wall{height:clamp(300px,44vh,380px);}
  /* the scroll scene: a 58vh dial on a short phone crushes the copy under it */
  .idx-func-track{height:300vh;}
  .idx-func-dial{width:min(88vw,460px);}
  .idx-func-sticky{padding:88px var(--gutter) 24px;}
  /* keep copy inside the ring — 4% let lines touch the stroke on ~390px screens */
  .idx-func-scene{padding:0 15%;}
  .idx-func-h3{font-size:clamp(22px,5.4vw,28px);margin:0 0 10px;}
  .idx-func-p{font-size:14px;line-height:1.5;max-width:22ch;}
  /* Team overlay on phones: intentionally wider than the viewport — section
     overflow:hidden clips the sides, so figures read larger without introducing
     horizontal page scroll. */
  .idx-team-overlay{width:140vw;left:50%;transform:translateX(-50%);}
}
@media(max-width:639px){
  .idx-serv-cards{grid-template-columns:1fr;}
  .idx-servcard{min-height:0;padding:var(--space-5);}
}

/* ==========================================================================
   PORQUÊ A QRA — Carta do Founder.
   Layout: strip de 3 fotos no topo + bloco editorial (meta em coluna estreita
   à esquerda, pull-quote HUGE + corpo em coluna larga à direita, assinatura
   ao fundo). Cross-page com growth.css / .g-porque — ver docs/adr/0016.
   ========================================================================== */
.idx-porque{background:var(--surface-1);color:var(--text-body);position:relative;overflow:hidden;}
.idx-porque-wrap{padding-top:clamp(72px,9vw,132px);padding-bottom:clamp(72px,9vw,132px);}

/* Strip de 3 fotos ------------------------------------------------------- */
.idx-porque-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,20px);margin-bottom:clamp(56px,7vw,120px);}
.idx-porque-fig{margin:0;overflow:hidden;background:var(--surface-2);aspect-ratio:3 / 4;}
.idx-porque-fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;}

/* Bloco editorial -------------------------------------------------------- */
.idx-porque-grid{display:grid;grid-template-columns:minmax(160px,220px) minmax(0,1fr);grid-template-areas:"meta pull" ".    body" ".    sig";column-gap:clamp(24px,4vw,96px);row-gap:clamp(48px,6vw,96px);align-items:start;}
.idx-porque-meta{grid-area:meta;}
.idx-porque-pull{grid-area:pull;}
.idx-porque-body{grid-area:body;}
.idx-porque-sig{grid-area:sig;}

/* Meta (parênteses tipográficos) */
.idx-porque-eyebrow,.idx-porque-h2{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--text-muted);letter-spacing:0;text-transform:none;margin:0;}
.idx-porque-eyebrow{margin-bottom:10px;}
.idx-porque-eyebrow::before,.idx-porque-h2::before{content:"(";}
.idx-porque-eyebrow::after,.idx-porque-h2::after{content:")";}

/* Pull-quote HUGE com aspa decorativa */
.idx-porque-pull{margin:0;position:relative;padding-left:clamp(48px,4.5vw,88px);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(32px,5.4vw,68px);line-height:1.02;letter-spacing:-.03em;color:var(--text-strong);text-wrap:balance;}
.idx-porque-pull::before{content:"\201C";position:absolute;left:0;top:-.12em;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:1.35em;line-height:1;color:var(--primary-500);}

/* Corpo */
.idx-porque-body{max-width:65ch;color:var(--text-body);font-size:var(--text-lg);line-height:1.7;}
.idx-porque-body p{margin:0 0 1.2em;}
.idx-porque-body p:last-child{margin-bottom:0;}

/* Assinatura */
.idx-porque-sig{padding-top:clamp(16px,2vw,32px);border-top:1px solid var(--ink-200);}
.idx-porque-name{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(20px,2vw,28px);color:var(--text-strong);margin:0;}
.idx-porque-role{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);margin:6px 0 0;}

@media(max-width:1023px){
  .idx-porque-grid{grid-template-columns:1fr;grid-template-areas:"meta" "pull" "body" "sig";row-gap:clamp(32px,5vw,56px);}
  .idx-porque-fig{aspect-ratio:3 / 4;}
}
@media(max-width:639px){
  .idx-porque-strip{gap:6px;margin-bottom:clamp(40px,8vw,64px);}
  .idx-porque-pull{padding-left:44px;font-size:clamp(26px,7vw,40px);}
  .idx-porque-pull::before{font-size:1.25em;}
  .idx-porque-body{font-size:var(--text-md);}
}