/*
   * SITE CAPI — HOME (built from SITE_CAPI_1_HOME.psd via psd-toolkit + psd_layout_to_bs5)
   *
   * Canvas referência: 1800 × 2260
   * Top-level groups: fundo (bg), Testeira (header), TEXTO CENTRAL (hero), RODAPE (footer)
   *
   * Cores sampled:
   *   page bg base (Rectangle 11):    #000000
   *   login bar (Rectangle 15):       #032025
   *   header banner (Rectangle 12):   #000000 + gradient overlay (sobre microscopia)
   *   menu strip (Rectangle 13):      #2D9773
   *   footer band (Rectangle 14):     #2D9773
   *
   * Tipografia: DIN Next LT Pro (proprietária Linotype, fornecida em FONTES.zip)
   *   Hero headline: LightItalic 77.73px (4.32vw @ 1800)
   *   Hero body:     LightItalic 31.59px (1.75vw)
   *   Footer texts:  Bold 24.69px (1.37vw)
   *   Menu items:    Regular ~17px (estimado)
   */
  
    
    
    
    
    
    

  :root {
    --capi-green: #2D9773;
    --capi-dark-bar: #032025;
    --capi-bg: #000000;
    --capi-divider: rgba(255, 255, 255, .55);
    --container-px: 14.4%;  /* margem horizontal padrão do design */
  }

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

  body {
    background: var(--capi-bg);
    color: #fff;
    font-family: 'DIN Next LT Pro', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
  }

  /* =============================================================
     PAGE BACKGROUND — microscopias com SCREEN blend sobre o preto
     ============================================================= */
  .page-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  /* Textura base (Rectangle 11 copy 2 do PSD) — granulação que cobre todo o canvas */
  .page-bg__texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  .page-bg__micro {
    position: absolute;
    mix-blend-mode: screen;
    opacity: .85;
  }
  .page-bg__micro--left {
    /* IMG-20251218-WA0019 — bbox (-95, -9, 746, 1179) no canvas 1800x2260 */
    top: -.4%;
    left: -5.3%;
    width: 41.4%;
    height: auto;
  }
  .page-bg__micro--right {
    /* IMG-20251218-WA0022 — bbox (1166, 332, 1800, 1800) — extrapola pra direita */
    top: 14.7%;
    left: 64.8%;
    width: 100%;
    height: auto;
  }

  /* z-stack — todo conteúdo acima do bg */
  .login-bar, .site-header, .hero, .footer-capi { position: relative; z-index: 1; }

  /* =============================================================
     LOGIN BAR — top dark strip (90px), botão à direita
     ============================================================= */
  .login-bar {
    background: var(--capi-dark-bar);
    height: clamp(43px, 3.6vw, 65px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--container-px);
  }
  .login-btn {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, .67vw, 12px);
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: clamp(12px, .83vw, 15px);
    font-weight: 400;
  }
  .login-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(26px, 2vw, 36px);
    aspect-ratio: 1;
    background: var(--capi-green);
    border-radius: 4px;
  }
  .login-btn__icon img { width: 40%; height: auto; }

  /* =============================================================
     HEADER BANNER — banda escura com microscopia, logo grande centrado
     ============================================================= */
  .site-header {
    /* sem bg próprio: usa o page-bg (preto + microscopias) */
    /* PSD: 85px acima da logo, 57px abaixo (assimétrico) */
    padding: clamp(40px, 4.72vw, 85px) var(--container-px) clamp(27px, 3.17vw, 57px);
    display: flex;
    align-items: center;
  }
  .site-header .logo {
    width: clamp(220px, 26.7vw, 480px);
    height: auto;
    display: block;
  }

  /* =============================================================
     MENU STRIP — banda verde com itens horizontais
     ============================================================= */
  .header-menu {
    background: var(--capi-green);
    padding: 0 var(--container-px);
    height: clamp(52px, 5.22vw, 94px);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .header-menu ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 56px);
  }
  .header-menu a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    font-size: clamp(14px, 1.06vw, 19px);
    letter-spacing: .02em;
    transition: opacity .15s ease;
  }
  .header-menu a:hover { opacity: .75; }
  .header-menu a.is-active { font-weight: 700; }

  /* =============================================================
     HERO — texto central left-aligned (max 55% width)
     ============================================================= */
  .hero {
    /* PSD: top gap menu→headline = 427px (23.7vw @1800), bottom gap p→footer = 477px (26.5vw)
       left = 370/1800 = 20.55%, right = 428/1800 = 23.78% */
    padding-top: clamp(100px, 23.72vw, 427px);
    padding-bottom: clamp(120px, 26.5vw, 477px);
    padding-left: clamp(24px, 20.55vw, 370px);
    padding-right: clamp(24px, 23.78vw, 428px);
    max-width: 100%;
  }
  .hero h1 {
    font-family: 'DIN Next LT Pro';
    font-style: italic;
    font-weight: 300;
    font-size: clamp(36px, 4.32vw, 78px);
    /* PSD: leading real ~88.08px / size 77.73px = 1.13 */
    line-height: 1.13;
    letter-spacing: .01em;
    text-transform: uppercase;
    /* PSD: h1 bottom y=1050, p top y=1148 → gap 98px (5.44vw @1800) */
    margin: 0 0 clamp(40px, 5.44vw, 98px);
    color: #fff;
    max-width: 47.7vw;
  }
  /* PSD line 2 "por meio da imagem.": MediumItalic (500), color #4EB9AD */
  .hero h1 .indent {
    display: inline-block;
    padding-left: 6.67vw;
    font-weight: 500;
    color: #4EB9AD;
    white-space: nowrap;
  }
  .hero p {
    font-family: 'DIN Next LT Pro';
    font-style: italic;
    font-weight: 300;
    font-size: clamp(16px, 1.75vw, 32px);
    line-height: 1.415;
    letter-spacing: .01em;
    color: #fff;
    margin: 0 0 1.2em;
    max-width: 55.7vw;
  }
  .hero p strong { font-weight: 700; font-style: italic; }

  /* =============================================================
     FOOTER (RODAPE) — col-md-5 endereco + col-md-2 redes + col-md-3 logo
     align-items-center referenciado ao Line 1 da col endereço (y=2066)
     ============================================================= */
  .footer-capi {
    background: var(--capi-green);
    color: #fff;
    padding-top: clamp(36px, 3.28vw, 64px);
    padding-bottom: clamp(48px, 4.22vw, 80px);
    padding-left: 14.39%;
    padding-right: 11.28%;
  }
  .footer-capi .endereco-title {
    font-weight: 700;
    font-size: clamp(15px, 1.37vw, 22px);
    line-height: 1.25;
    margin-bottom: .35em;
  }
  .footer-capi .endereco-text {
    font-weight: 300;
    font-size: clamp(14px, 1.18vw, 19px);
    line-height: 1.45;
  }
  .footer-capi hr.endereco-divider {
    border: 0;
    border-top: 1px solid var(--capi-divider);
    margin: clamp(14px, 1.4vw, 24px) 0;
    opacity: 1;
  }
  .footer-capi .social-row {
    gap: clamp(10px, 1.22vw, 22px);
  }
  .footer-capi .social-row a {
    display: inline-flex;
    width: clamp(30px, 2.61vw, 47px);
    aspect-ratio: 1;
    transition: transform .15s ease;
  }
  .footer-capi .social-row a:hover { transform: translateY(-2px); }
  .footer-capi .social-row img { width: 100%; height: 100%; display: block; }
  .footer-capi .logo-capi { max-width: 100%; height: auto; display: block; }

  /* =============================================================
     RESPONSIVO MOBILE
     ============================================================= */
  @media (max-width: 768px) {
    :root { --container-px: 24px; }
    .login-bar { padding-right: var(--container-px); }
    .header-menu ul { gap: 14px; font-size: 13px; }
    .header-menu a { font-size: 13px; }
    .hero { max-width: 100%; padding: 50px var(--container-px); }
    .hero h1 { max-width: 100%; }
    /* let the second line wrap on small screens (no fixed indent → no overflow) */
    .hero h1 .indent { padding-left: 0; white-space: normal; }
    .hero p { max-width: 100%; }
    .footer-capi { padding: 32px 24px; }
    .footer-capi hr.endereco-divider { margin: 20px 0; }
    /* keep the microscopy art subtle so hero text stays legible over it */
    .page-bg__micro--left { width: 80%; opacity: .18; }
    .page-bg__micro--right { width: 130%; opacity: .18; left: auto; right: -30%; }
  }

/* === intro preloader (PSD 0) === */
.intro-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #263D3B url(/wp-content/themes/capi-site/assets/intro/grafismo.png) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .6s ease;
}
.intro-overlay__logo {
  width: min(48vw, 640px); height: auto;
  opacity: 0; transform: scale(.94);
  animation: introLogoIn .9s ease .15s forwards;
}
@keyframes introLogoIn {
  to { opacity: 1; transform: scale(1); }
}
.intro-overlay.is-done { opacity: 0; pointer-events: none; }
.intro-overlay.is-removed { display: none; }
@media (prefers-reduced-motion: reduce) {
  .intro-overlay { transition: none; }
  .intro-overlay__logo { animation: none; opacity: 1; transform: none; }
}