/* ==========================================================================
   OliveiraCode · Link Hub · Responsivo (mobile first)
   Base = 360–430px. Ajustes para telas muito pequenas, tablet e desktop.
   ========================================================================== */

/* Telas muito estreitas (320px) */
@media (max-width: 359.98px) {
  :root { --gutter: 14px; }
  .link-card { grid-template-columns: 40px minmax(0, 1fr) 32px; gap: 12px; padding: 12px; }
  .link-card__icon { width: 40px; height: 40px; }
  .link-card__arrow { width: 32px; height: 32px; }
  .link-card--primary { grid-template-columns: 42px minmax(0, 1fr) 36px; padding: 16px 12px 16px 14px; }
  .link-card--primary .link-card__icon { width: 42px; height: 42px; }
  .link-card--primary .link-card__arrow { width: 36px; height: 36px; }
  .link-card--primary .link-card__title { font-size: 17.5px; }
  .link-card__desc { font-size: 13px; }
  .status { letter-spacing: .14em; }
  .closing__frame { padding: 32px 16px 26px; }
}

/* Mobile estreito: tracking menor para o eyebrow caber em uma linha */
@media (max-width: 399.98px) {
  .eyebrow { gap: 8px; font-size: 10.5px; letter-spacing: .12em; }
  .status { font-size: 10px; }
}

/* Celulares baixos (ex.: 320×568, 360×640): hero compacto, CTA na dobra */
@media (max-width: 639.98px) and (max-height: 700px) {
  :root { --brand-w: clamp(200px, min(72vw, 33svh), 300px); }
  .intro { gap: 10px; }
  .headline { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.1rem); }
  .lede { font-size: 14.5px; line-height: 1.45; }
  .status { margin-top: 0; padding-block: 6px; }
  .links { margin-top: 22px; }
}

/* Telas baixas (paisagem em celular): logo menor para o CTA aparecer cedo */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --brand-w: clamp(200px, 40svh, 300px); }
}

/* Tablet */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .links__list { gap: 12px; }
  .link-card { min-height: 84px; padding: 16px 18px 16px 18px; gap: 16px; }
  .link-card--primary { min-height: 108px; padding: 20px 18px 20px 20px; }
  .link-card__title { font-size: 17px; }
  .link-card__desc { font-size: 14px; }
  .closing__frame { padding: 48px 40px 40px; }

  .footer__row {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: left;
  }
  .footer__brand { justify-self: start; }
  .footer__credit { justify-self: end; text-align: right; }
}

/* Desktop: palco ampliado, serviços em grade, HUD editorial e sinal */
@media (min-width: 1024px) {
  :root {
    --col: 600px;
    --brand-w: clamp(300px, 46svh, 460px);
  }

  .page { padding-top: 30px; }

  .services { max-width: var(--wide); }
  .services .section-head {
    grid-template-columns: 1fr 1.4fr;
    align-items: end;
    gap: 40px;
  }
  .services .section-title { justify-self: end; text-align: right; max-width: 20ch; }
  .services__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 44px;
  }
  .service {
    grid-template-columns: 1fr;
    grid-template-areas: 'idx' 'title' 'desc' 'tag';
    row-gap: 10px;
    padding: 26px 32px 30px 0;
  }
  .service + .service { padding-left: 28px; }
  .service + .service::after {
    content: '';
    position: absolute;
    inset: 26px auto 30px 0;
    width: 1px;
    height: auto;
    background: var(--hairline);
  }
  .service:last-child::after { inset: 26px auto 30px 0; width: 1px; height: auto; }
  .service + .service::before { left: 28px; }
  .service__index { padding-top: 0; margin-bottom: 6px; }
  .service__title { font-size: 21px; }

  .ticker { margin-inline: calc(50% - 50vw); }

  .closing { max-width: 760px; }
  .closing__frame { padding: 64px 56px 52px; }

  /* Partículas e sinais: só desktop, ativados pelo motion.js */
  .atmosphere__particles.is-on { display: block; }

  .signal {
    display: block;
    position: absolute;
    top: 18%;
    width: 1px;
    height: 64%;
    background: linear-gradient(180deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
    overflow: hidden;
  }
  .signal--left { left: 48px; }
  .signal--right { right: 48px; }
  .signal span {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 11%;
    background: linear-gradient(180deg, transparent, rgba(53, 180, 255, .85), transparent);
    opacity: 0;
  }

  .hud {
    display: block;
    position: fixed;
    inset: 22px;
    z-index: 0;
    pointer-events: none;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted-2);
    animation: oc-ambient 1.6s .9s var(--ease-premium) both;
  }
  .hud i { color: var(--blue); }
  .hud__corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(139, 192, 241, .28);
  }
  .hud__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
  .hud__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
  .hud__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
  .hud__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
  .hud__label { position: absolute; line-height: 14px; }
  .hud__label--tl { top: 0; left: 26px; }
  .hud__label--tr { top: 0; right: 26px; }
  .hud__label--bl { bottom: 0; left: 26px; }
  .hud__label--br { bottom: 0; right: 26px; font-variant-numeric: tabular-nums; }
}

/* Desktops baixos (1280×800, 1366×768): compacta o hero para o CTA aparecer */
@media (min-width: 1024px) and (max-height: 880px) {
  :root { --brand-w: clamp(260px, 37svh, 380px); }
  .page { padding-top: 22px; }
  .headline { font-size: clamp(2.4rem, 1rem + 2.6vw, 3rem); }
  .intro { gap: 12px; margin-top: 14px; }
  .links { margin-top: 30px; }
}

@media (min-width: 1024px) and (max-height: 700px) {
  .hud__label--bl, .hud__label--br { display: none; }
}

@media (min-width: 1440px) {
  :root { --brand-w: clamp(320px, 48svh, 500px); }
}

/* Alto contraste forçado (Windows) */
@media (forced-colors: active) {
  .link-card, .cta, .status, .closing__frame { border: 1px solid CanvasText; }
  .brand__logo { mix-blend-mode: normal; forced-color-adjust: none; }
}