/*
 * Auditoria de acabamento do portfólio
 * Camada final carregada de forma síncrona no <head> para evitar mudança visual após o primeiro paint.
 */

:root {
  --ls-focus-ring: color-mix(in srgb, var(--theme-accent, #344055) 72%, #ffffff 28%);
  --ls-reading-width: 72ch;
  --ls-card-pad: 24px;
  --ls-card-gap: 16px;
  --ls-section-heading-max: 880px;
}

html {
  scroll-padding-top: 96px;
}

body:not(.admin-body) {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body:not(.admin-body) main section,
body:not(.admin-body) [id] {
  scroll-margin-top: 96px;
}

/* Leitura e hierarquia */
body:not(.admin-body) h1,
body:not(.admin-body) h2,
body:not(.admin-body) h3,
body:not(.admin-body) .page-title,
body:not(.admin-body) .section-title {
  text-wrap: balance;
}

body:not(.admin-body) p,
body:not(.admin-body) li,
body:not(.admin-body) .page-description,
body:not(.admin-body) .section-description {
  text-wrap: pretty;
}

body:not(.admin-body) .page-description,
body:not(.admin-body) .section-description,
body:not(.admin-body) .about-lead,
body:not(.admin-body) .cpx-desc,
body:not(.admin-body) .home-hero-v2__description,
body:not(.admin-body) .home-method__intro,
body:not(.admin-body) .home-contact-cta__description {
  max-width: var(--ls-reading-width);
}

/* Escala final de títulos de seção. Evita páginas com títulos visualmente maiores que outras. */
html body:not(.admin-body) main :where(
  .section-title,
  .about-section-head h2,
  .about-objective h2,
  .about-goals h2,
  .cpx-level-head h2,
  .contact-card-heading h2,
  .contact-direct-card h2,
  .projects-contact-strip__inner h2,
  .home-method__header h2,
  .home-contact-cta__title
) {
  font-size: var(--ls-section-title-size, 1.52rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.03em !important;
}

html body.home-page-v2 main .home-method__header h2,
html body.home-page-v2 main .home-contact-cta__title {
  max-width: var(--ls-section-heading-max) !important;
}

/* Corpo de texto consistente entre cards e páginas */
html body:not(.admin-body) main :where(
  .about-side p,
  .about-edu p,
  .about-goals li,
  .cpx-skill-desc,
  .cpx-level-card .cpx-skill-desc,
  .timeline-card p,
  .timeline-card li,
  .project-card p,
  .contact-card-heading p,
  .contact-direct-card > p,
  .home-method__item p
) {
  font-size: var(--ls-card-body-size, 1rem) !important;
  line-height: var(--ls-body-line-height, 1.66) !important;
}

/* Foco de teclado consistente */
body:not(.admin-body) :where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--ls-focus-ring) !important;
  outline-offset: 3px !important;
}

body:not(.admin-body) :where(input, textarea, select):focus-visible {
  border-color: var(--theme-accent, #344055) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, #344055) 12%, transparent) !important;
}

/* Alvos clicáveis mais confortáveis */
body:not(.admin-body) .btn,
body:not(.admin-body) .filter-btn,
body:not(.admin-body) .showcase-filter,
body:not(.admin-body) .theme-toggle,
body:not(.admin-body) .menu-toggle {
  min-height: 44px;
}

/* Navegação: aceita tanto a classe antiga quanto a classe canônica. */
body:not(.admin-body) .nav-links a.active,
body:not(.admin-body) .nav-links a[aria-current="page"] {
  color: var(--theme-text, #0D1A34);
  background: color-mix(in srgb, var(--theme-surface-muted, #E7EBF0) 76%, transparent);
}

/* Cards: interação discreta e previsível */
body:not(.admin-body) :where(
  .project-card,
  .timeline-card,
  .cert-card,
  .about-side,
  .about-edu,
  .cpx-card,
  .cpx-level-card,
  .contact-form-card,
  .contact-direct-card,
  .contact-availability-card
) {
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.admin-body) :where(.project-card, .timeline-card, .cert-card, .about-edu, .cpx-card, .cpx-level-card) {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  body:not(.admin-body) :where(.project-card, .timeline-card, .cert-card, .about-edu, .cpx-card, .cpx-level-card):hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--theme-border-strong, #C9D0D6) 74%, var(--theme-accent, #344055) 26%) !important;
  }
}

/* HOME: hierarquia mais limpa e mesma régua das páginas internas */
html body.home-page-v2 main .home-projects-section .section-title {
  font-size: var(--ls-page-title-size, 2.35rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}

html body.home-page-v2 main .home-projects-section .section-title span {
  white-space: normal !important;
}

html body.home-page-v2 main .home-method__header,
html body.home-page-v2 main .home-projects-section .section-head {
  align-items: start !important;
}

html body.home-page-v2 main .home-method__grid {
  background: color-mix(in srgb, var(--theme-surface-strong, #F8FAFC) 34%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html body.home-page-v2 main .home-method__item {
  min-height: 250px;
  display: flex;
  flex-direction: column;
}

html body.home-page-v2 main .home-method__number {
  margin-bottom: 24px !important;
}

html body.home-page-v2 main .home-method__item h3 {
  margin-bottom: 12px !important;
}

/* SOBRE: cards com ritmo e altura equilibrados */
html body:not(.admin-body) .about-bridge {
  align-items: stretch !important;
}

html body:not(.admin-body) .about-side {
  min-height: 0 !important;
  height: 100%;
  padding: var(--ls-card-pad) !important;
  display: flex;
  flex-direction: column;
}

html body:not(.admin-body) .about-side .about-chips {
  margin-top: auto !important;
  padding-top: 20px;
}

html body:not(.admin-body) .about-education-grid {
  align-items: stretch;
}

html body:not(.admin-body) .about-edu {
  height: 100%;
  padding: var(--ls-card-pad) !important;
}

html body:not(.admin-body) .about-goals li {
  min-height: 56px;
  display: flex;
  align-items: center;
}

/* EXPERIÊNCIAS: largura de leitura e separação interna mais uniforme */
html body:not(.admin-body) .timeline {
  display: grid;
  gap: 24px;
}

html body:not(.admin-body) .timeline-card {
  margin-bottom: 0 !important;
  padding: var(--ls-card-pad) !important;
}

html body:not(.admin-body) .timeline-card > p {
  max-width: 86ch;
}

html body:not(.admin-body) .timeline-card .clean-list {
  margin-top: 18px;
  margin-bottom: 0;
}

html body:not(.admin-body) .timeline-card .tech-list {
  margin-top: 20px;
}

/* PROJETOS: capas, cards e filtros com comportamento previsível */
html body:not(.admin-body) .projects-page-grid {
  align-items: stretch;
}

html body:not(.admin-body) .projects-page-grid .project-card {
  min-height: 100%;
}

html body:not(.admin-body) .project-card :where(img, video) {
  object-fit: cover;
}

html body:not(.admin-body) .projects-page-hero__pillars {
  align-self: stretch;
}

html body:not(.admin-body) .projects-page-hero__pillar {
  min-height: 112px;
  align-content: center;
}

html body:not(.admin-body) .projects-filter-bar {
  margin-top: 24px !important;
}

/* COMPETÊNCIAS: remove alturas rígidas que causavam overflow com a nova tipografia */
html body:not(.admin-body) .cpx-bento {
  grid-template-rows: none !important;
  align-items: stretch;
}

html body:not(.admin-body) .cpx-card {
  min-height: 260px;
  height: 100%;
}

html body:not(.admin-body) .cpx-card--big {
  min-height: 540px;
}

html body:not(.admin-body) .cpx-card-inner {
  height: 100%;
  padding: var(--ls-card-pad) !important;
  display: flex;
  flex-direction: column;
}

html body:not(.admin-body) .cpx-card .cpx-level-row {
  margin-top: auto !important;
  padding-top: 18px;
}

html body:not(.admin-body) .cpx-level-grid {
  align-items: stretch;
}

html body:not(.admin-body) .cpx-level-card {
  height: 100%;
  padding: 20px !important;
}

html body:not(.admin-body) .cpx-summary article {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* CONTATO: todos os kickers usam a mesma bolinha visual do rótulo principal */
html body .contact-page .section-kicker::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 50% !important;
  background: var(--theme-accent, #344055) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-accent, #344055) 13%, transparent) !important;
}

/* Remove a bolinha verde antiga do card de disponibilidade */
html body .contact-page .contact-availability-card__dot {
  display: none !important;
}

/* Reorganiza o card de disponibilidade sem a coluna da bolinha verde */
html body .contact-page .contact-availability-card {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

html body:not(.admin-body) .contact-layout {
  align-items: stretch !important;
}

html body:not(.admin-body) .contact-form-card,
html body:not(.admin-body) .contact-direct-card {
  height: 100%;
}

html body:not(.admin-body) .contact-direct-card {
  display: flex;
  flex-direction: column;
}

html body:not(.admin-body) .contact-direct-list {
  margin-top: auto !important;
  padding-top: 24px;
}

/* Elementos ambientais nunca interferem na leitura/interação. */
body:not(.admin-body) :where(.about-particles, .competencies-particles, .home-hero-v2__ambient, .ambient-particles, [data-ambient-layer]) {
  pointer-events: none !important;
  user-select: none !important;
}

/* As partículas devem ocupar a página inteira das páginas que usam ambiente decorativo. */
html body:not(.admin-body) .competencies-showcase .competencies-particles,
html body:not(.admin-body) .about-showcase .about-particles {
  position: absolute;
  inset: 0 !important;
  width: 100%;
  height: 100%;
}

/* Filtros não quebram o layout em telas intermediárias. */
body:not(.admin-body) :where(.projects-filters, .filters) {
  max-width: 100%;
}

@media (max-width: 1100px) {
  html body:not(.admin-body) .cpx-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body:not(.admin-body) .cpx-card--big {
    grid-row: auto !important;
    min-height: 360px;
  }

  html body:not(.admin-body) .cpx-card--wide {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 980px) {
  body:not(.admin-body) .section-head,
  body:not(.admin-body) .home-projects-section .section-head,
  body:not(.admin-body) .about-section-head,
  body:not(.admin-body) .cpx-level-head {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  body:not(.admin-body) :where(.projects-filters, .filters) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding-bottom: 6px;
  }

  body:not(.admin-body) :where(.projects-filters, .filters) > * {
    flex: 0 0 auto;
  }

  html body:not(.admin-body) .contact-layout,
  html body:not(.admin-body) .projects-page-hero__grid,
  html body:not(.admin-body) .contact-page-hero__grid {
    grid-template-columns: 1fr !important;
  }

  html body:not(.admin-body) .contact-direct-list {
    margin-top: 24px !important;
    padding-top: 0;
  }
}

/* Notebook comum: primeiro viewport compacto sem esmagar a composição. */
@media (min-width: 921px) and (max-height: 800px) {
  html body.home-page-v2 main .home-hero-v2 {
    min-height: 560px !important;
    padding-bottom: 24px !important;
  }

  html body.home-page-v2 main .home-hero-v2__profile {
    min-height: 480px !important;
  }

  html body.home-page-v2 main .home-tech-ribbon__group {
    padding-block: 11px !important;
  }
}

@media (max-width: 720px) {
  html body:not(.admin-body) .cpx-bento,
  html body:not(.admin-body) .cpx-level-grid,
  html body:not(.admin-body) .cpx-summary {
    grid-template-columns: 1fr !important;
  }

  html body:not(.admin-body) .cpx-card,
  html body:not(.admin-body) .cpx-card--big {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 82px;
  }

  body:not(.admin-body) main section,
  body:not(.admin-body) [id] {
    scroll-margin-top: 82px;
  }

  body:not(.admin-body) .container {
    width: min(100% - 28px, var(--container, 1180px));
  }

  body:not(.admin-body) .page-description,
  body:not(.admin-body) .section-description,
  body:not(.admin-body) .about-lead,
  body:not(.admin-body) .cpx-desc {
    line-height: 1.65 !important;
  }

  body:not(.admin-body) .btn {
    justify-content: center;
  }

  html body.home-page-v2 main .home-method__item {
    min-height: 0;
  }

  html body:not(.admin-body) .timeline-card,
  html body:not(.admin-body) .about-side,
  html body:not(.admin-body) .about-edu,
  html body:not(.admin-body) .cpx-card-inner {
    padding: 20px !important;
  }
}

/* Acessibilidade para usuários que pedem menos movimento. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Audit 01/10/2026: public pages share one spacing and component scale. */
html body:not(.admin-body) {
  --ls-tag-bg: rgba(176, 169, 241, .10);
  --ls-tag-border: rgba(176, 169, 241, .34);
  --ls-tag-text: #0D1A34;
}

html[data-theme="dark"] body:not(.admin-body) {
  --ls-tag-bg: rgba(176, 169, 241, .12);
  --ls-tag-border: rgba(176, 169, 241, .38);
  --ls-tag-text: #E7EBF0;
}

/* Technologies are metadata, not body-list items. Keep the approved compact size. */
html body:not(.admin-body) :is(.card-14__tags, .home-project-reference-card__tags, .tech-list) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ls-space-1, 8px) !important;
  padding: 0;
  list-style: none;
}

html body:not(.admin-body) :is(main, .modal) :is(.card-14__tags li, .home-project-reference-card__tags li, .tech-list > span, .about-chips > span, .cpx-chips > span) {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 9px !important;
  border: 1px solid var(--ls-tag-border) !important;
  border-radius: 999px !important;
  background: var(--ls-tag-bg) !important;
  color: var(--ls-tag-text) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--ls-tag-size, .66rem) !important;
  font-weight: 700;
  line-height: 1.15 !important;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

/* A consistent gutter and usable width, including the previous About exception. */
@media screen {
  html body:not(.admin-body) main > section > .container.container,
  html body:not(.admin-body) > .header .container,
  html body:not(.admin-body) > .footer .container {
    width: min(var(--ls-content-width), calc(100% - var(--ls-page-gutter) * 2)) !important;
    max-width: var(--ls-content-width) !important;
    margin-inline: auto;
  }
}

html body:not(.admin-body) main :is(.projects-page-grid, .projects-page-hero__pillars, .about-bridge, .about-how__grid, .about-education-grid, .about-goals__grid, .cpx-level-grid, .cert-grid) {
  gap: var(--ls-grid-gap, 20px) !important;
}

html body:not(.admin-body) main :is(.page-grid, .contact-page-hero__grid, .contact-layout, .resume-hero__grid, .resume-layout) {
  gap: var(--ls-block-gap, 32px) !important;
}

html body:not(.admin-body) main :is(.about-how, .about-education, .about-goals, .cpx-level-section, .cpx-summary) {
  margin-top: var(--ls-section-y, 64px) !important;
  padding-top: 0 !important;
}

html body:not(.admin-body) main :is(.about-how__head, .about-section-head, .about-goals__head, .cpx-level-head) {
  margin-bottom: var(--ls-block-gap, 32px) !important;
}

html body:not(.admin-body) main :is(.portfolio-centered-heading, .about-kicker-row) + :is(h1, h2, .page-title) {
  margin-top: var(--ls-kicker-title-gap, 16px) !important;
}

html body:not(.admin-body) main :is(.portfolio-centered-intro, .about-how__head, .about-section-head, .about-goals__head) > p {
  margin-top: var(--ls-title-copy-gap, 20px) !important;
  line-height: var(--ls-body-line-height, 1.66) !important;
}

html body:not(.admin-body) main :is(.about-how__head, .about-goals__head) h2 {
  font-family: var(--font-ui) !important;
  font-size: var(--ls-section-title-size) !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
}

html body:not(.admin-body) main :is(.card-14__title, .about-edu h3, .about-how__card h3, .about-goal-card h3, .cert-card h3) {
  font-family: var(--font-ui) !important;
  font-size: var(--ls-card-title-size) !important;
  font-weight: 700;
  line-height: 1.3 !important;
  letter-spacing: -.02em;
}

html body:not(.admin-body) main :is(.about-side, .about-edu, .about-how__card, .about-goal-card, .cert-card, .contact-direct-card, .contact-form-card, .contact-availability-card, .card-14__body) {
  min-width: 0;
  padding: var(--ls-card-pad) !important;
}

html body:not(.admin-body) main :is(.about-side, .about-edu, .about-how__card, .about-goal-card, .cert-card, .contact-direct-card, .contact-form-card, .contact-availability-card, .card-14__card) {
  border-radius: 20px !important;
}

html body:not(.admin-body) main :is(.card-14__desc, .about-side p, .about-edu p, .about-how__card p, .about-goal-card p, .cert-card p) {
  line-height: var(--ls-body-line-height, 1.66) !important;
}

html body:not(.admin-body) main :is(.card-14__tags, .home-project-reference-card__tags) {
  margin-bottom: var(--ls-space-3, 16px) !important;
}

html body:not(.admin-body) main .card-14__chip {
  margin-bottom: var(--ls-space-2, 12px);
}

html body:not(.admin-body) main .card-14__desc {
  min-height: calc(var(--ls-body-size, 1rem) * var(--ls-body-line-height, 1.66) * 3);
  margin-bottom: var(--ls-space-3, 16px);
}

html body:not(.admin-body) :is(.btn, .filter-btn, .about-edu-action) {
  font-family: var(--font-ui) !important;
  font-size: var(--ls-control-text-size, .875rem);
  min-height: 44px;
}

/* Keep the original compact footer and allow its text to wrap on small screens. */
html body:not(.admin-body) > .footer {
  min-height: 0 !important;
  padding-block: var(--ls-space-5, 32px) !important;
}

html body:not(.admin-body) > .footer .footer-grid {
  gap: var(--ls-space-4, 24px) !important;
  flex-wrap: wrap;
}

html body:not(.admin-body) > .footer p {
  white-space: normal !important;
}

html body:not(.admin-body) > .footer .socials {
  flex-wrap: wrap;
  gap: var(--ls-space-2, 12px) !important;
}

@media (max-width: 640px) {
  html body:not(.admin-body) { --ls-card-pad: 20px; }
}

html body:not(.admin-body) main p {
  line-height: var(--ls-body-line-height, 1.66) !important;
}

html body.home-page-v2 main .home-project-reference-card:not(.home-project-reference-card--featured) .home-project-reference-card__body h3 {
  font-size: var(--ls-card-title-size) !important;
  line-height: 1.3 !important;
}

/* Cards fill their grid column instead of keeping a legacy 360px cap. */
html body:not(.admin-body) main .projects-page-grid .card-14__card {
  max-width: none;
  display: flex;
  flex-direction: column;
}

html body:not(.admin-body) main .projects-page-grid .card-14__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

html body:not(.admin-body) main .card-14__foot {
  margin-top: auto;
}

html body.home-page-v2 main .home-project-reference-card:not(.home-project-reference-card--featured) .home-project-reference-card__body {
  padding: var(--ls-card-pad) !important;
}

html body:not(.admin-body) main .card-14__chip {
  align-self: flex-start;
  max-width: 100%;
}

/* Hover is a preview; keep the selected category visually distinct. */
html body:not(.admin-body) .filter-btn:not(.is-active):is(:hover, :focus-visible) {
  background: #ECEAFB !important;
  border-color: #B0A9F1 !important;
  color: #0D1A34 !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] body:not(.admin-body) .filter-btn:not(.is-active):is(:hover, :focus-visible) {
  background: #30384E !important;
  border-color: #9A92D4 !important;
  color: #F8FAFC !important;
}

html body:not(.admin-body) .filter-btn:focus-visible {
  outline: 2px solid #9487E9;
  outline-offset: 3px;
}

/* Layout guard: animated/decorative elements must never create horizontal page drift */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body:not(.admin-body) {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}

body:not(.admin-body) > main,
body.home-page-v2 > main,
body.home-page-v2 .home-hero-v2,
body.home-page-v2 .home-projects-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body:not(.admin-body) .container {
  width: min(var(--container, 1180px), calc(100% - 40px));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.home-page-v2 .home-hero-v2__grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.home-page-v2 .home-hero-v2__grid > *,
body.home-page-v2 .home-hero-v2__content {
  min-width: 0;
}

body.home-page-v2 .home-tech-ribbon {
  width: 100%;
  max-width: 100vw;
  overflow: hidden !important;
}