@font-face{font-family:'DIN Next LT Pro';src:url('/wp-content/themes/capi/assets/fonts/DINNextLTPro-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'DIN Next LT Pro';src:url('/wp-content/themes/capi/assets/fonts/DINNextLTPro-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'DIN Next LT Pro';src:url('/wp-content/themes/capi/assets/fonts/DINNextLTPro-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'DIN Next LT Pro';src:url('/wp-content/themes/capi/assets/fonts/DINNextLTPro-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:'DIN Next LT Pro';src:url('/wp-content/themes/capi/assets/fonts/DINNextLTPro-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'DIN Next LT Pro';src:url('/wp-content/themes/capi/assets/fonts/DINNextLTPro-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap;}


:root {
  --capi-green:       #2D9773;
  --capi-dark-bar:    #032025;
  --capi-bg:          #000000;
  --capi-teal-accent: #4FBAAD;
  --capi-divider:     rgba(255,255,255,.45);
  --container-px:     14.4%;
}
* { 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;
}

/* ── LOGIN BAR */
.login-bar {
  background: var(--capi-dark-bar);
  height: clamp(60px,5vw,90px);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--container-px);
  position: relative; z-index: 2;
}
.login-btn {
  display: inline-flex; align-items: center; gap: clamp(10px,.9vw,18px);
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-family: inherit; font-size: clamp(14px,1.05vw,19px); font-weight: 400;
}
.login-btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(36px,2.78vw,50px); aspect-ratio: 1;
  background: var(--capi-green); border-radius: 4px;
}
.login-btn__icon img { width: 40%; height: auto; }

/* ── SITE HEADER */
.site-header {
  background: var(--capi-bg);
  padding: clamp(36px,4.7vw,85px) var(--container-px);
  display: flex; align-items: center;
}
.site-header .logo { width: clamp(200px,26.7vw,480px); height: auto; display: block; }

/* ── MENU */
.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(18px,3vw,56px);
}
.header-menu a {
  color: #fff; text-decoration: none; font-weight: 400;
  font-size: clamp(13px,1.06vw,19px); letter-spacing: .02em;
  transition: opacity .15s ease;
}
.header-menu a:hover { opacity: .75; }
.header-menu a.is-active { font-weight: 700; }

/* ── PAGE TITLE (pattern: white bold line + teal italic line) */
.page-title-block {
  padding: clamp(44px,5vw,90px) var(--container-px) clamp(32px,3.5vw,60px);
}
.page-title-block .line1 {
  display: flex; align-items: center; gap: 1rem;
  font-size: clamp(26px,2.6vw,48px); font-weight: 300;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; line-height: 1;
}
.page-title-block .line1::before {
  content: '';
  display: block; width: clamp(20px,1.8vw,32px); height: 1px;
  background: var(--capi-divider); flex-shrink: 0;
}
.page-title-block .line2 {
  display: flex; align-items: center; gap: .75rem;
  font-size: clamp(26px,2.6vw,48px);
  font-weight: 300; font-style: italic;
  color: var(--capi-teal-accent); line-height: 1;
  padding-left: 1.6em;
}
.page-title-block .line2::after {
  content: '';
  display: block; flex: 1; height: 1px;
  background: var(--capi-divider);
  margin-right: calc(-1 * var(--container-px));
}

/* ── FOOTER */
.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; }

@media (max-width: 768px) {
  :root { --container-px: 24px; }
  .header-menu ul { gap: 14px; }
  .header-menu a { font-size: 13px; }
  .footer-capi { padding: 32px 24px; }
}


.equip-layout { display: flex; align-items: flex-start; gap: 0; padding-bottom: clamp(48px,5vw,90px); }
.equip-sidebar {
  flex: 0 0 clamp(160px,15vw,240px);
  background: var(--capi-green);
  padding: clamp(20px,2vw,36px) 0;
  min-height: 100%;
  position: sticky; top: 0; align-self: flex-start;
}
.equip-sidebar ul { list-style: none; padding: 0; margin: 0; }
.equip-sidebar li { border-bottom: 1px solid rgba(255,255,255,.12); }
.equip-sidebar a {
  display: block; padding: clamp(10px,1vw,16px) clamp(14px,1.2vw,22px);
  color: rgba(255,255,255,.8); text-decoration: none;
  font-size: clamp(12px,.88vw,14px); font-weight: 300;
  line-height: 1.35; transition: background .15s ease, color .15s ease;
}
.equip-sidebar a:hover { background: rgba(0,0,0,.15); color: #fff; }
.equip-sidebar a.is-active { background: rgba(0,0,0,.2); color: #fff; font-weight: 700; }
.equip-content { flex: 1; min-width: 0; padding: clamp(24px,2.5vw,44px) clamp(24px,3.5vw,60px); }
.equip-section-title {
  background: rgba(79,186,173,.18); border-left: 4px solid var(--capi-teal-accent);
  padding: clamp(12px,1.2vw,20px) clamp(16px,1.5vw,26px);
  font-size: clamp(14px,1.3vw,22px); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; margin: 0 0 clamp(24px,2.5vw,40px);
}
.equip-card { margin-bottom: clamp(44px,4.5vw,80px); }
.equip-card__header {
  background: rgba(79,186,173,.15); border-radius: 6px 6px 0 0;
  padding: clamp(10px,1vw,16px) clamp(16px,1.5vw,24px);
  font-size: clamp(14px,1.2vw,20px); font-weight: 700; color: #fff;
  letter-spacing: .03em; text-transform: uppercase;
}
.equip-card__body {
  display: flex; gap: clamp(16px,2vw,36px); align-items: flex-start;
  padding: clamp(20px,2vw,36px) 0;
}
.equip-card__img {
  flex: 0 0 clamp(200px,30vw,480px);
  border-radius: 6px; overflow: hidden; background: #111;
}
.equip-card__img img { width: 100%; height: auto; display: block; }
.equip-card__info { flex: 1; min-width: 0; }
.equip-specs {
  font-family: 'DIN Next LT Pro', system-ui, sans-serif;
  font-size: clamp(12px,.9vw,14px); font-weight: 700;
  line-height: 1.6; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.05); border-radius: 6px;
  padding: clamp(12px,1.2vw,20px); margin: 0 0 1.2em;
  white-space: pre-line;
}
.equip-desc {
  font-size: clamp(13px,1vw,16px); font-weight: 300;
  line-height: 1.65; color: rgba(255,255,255,.82); margin: 0 0 1.2em;
}
.equip-aquisicao {
  list-style: none; padding: 0; margin: 0;
  font-size: clamp(12px,.88vw,14px); font-weight: 300;
  color: rgba(255,255,255,.6); line-height: 1.7;
}
.equip-aquisicao li::before { content: "• "; color: var(--capi-teal-accent); }
.equip-coming-soon {
  display: inline-block; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25); border-radius: 4px;
  padding: 6px 16px; font-size: clamp(11px,.85vw,13px);
  color: rgba(255,255,255,.5); letter-spacing: .08em;
  text-transform: uppercase; margin-top: 1rem;
}
@media (max-width: 991px) {
  .equip-layout { flex-direction: column; }
  .equip-sidebar { position: static; width: 100%; }
  .equip-sidebar ul { display: flex; flex-wrap: wrap; }
  .equip-sidebar li { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.12); }
  .equip-card__body { flex-direction: column; }
  .equip-card__img { flex: none; width: 100%; max-width: 500px; }
}
/*
   * 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)
   */
  
    @font-face {
      font-family: 'DIN Next LT Pro';
      src: ;
      font-weight: 300; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'DIN Next LT Pro';
      src: ;
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'DIN Next LT Pro';
      src: ;
      font-weight: 700; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'DIN Next LT Pro';
      src: ;
      font-weight: 300; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'DIN Next LT Pro';
      src: ;
      font-weight: 400; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'DIN Next LT Pro';
      src: ;
      font-weight: 700; font-style: italic; font-display: swap;
    }

  :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: 3.2em;
    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%; }
    .hero p { max-width: 100%; }
    .footer-capi { padding: 32px 24px; }
    .footer-capi hr.endereco-divider { margin: 20px 0; }
    .page-bg__micro--left { width: 80%; opacity: .35; }
    .page-bg__micro--right { width: 140%; opacity: .35; left: auto; right: -40%; }
  }