/* v23.06 — camada final de responsividade do site público.
   A geometria visual salva para desktop não deve empurrar os componentes para fora
   do fluxo no celular. Cores, tipografia e acabamentos continuam vindo do painel. */

html,
body#white-text-site {
  max-width: 100%;
  overflow-x: clip;
}

body#white-text-site #conteudo,
body#white-text-site #conteudo > *,
body#white-text-site #conteudo :where(section, article, header, footer, div, figure, form, fieldset) {
  min-width: 0;
  box-sizing: border-box;
}

body#white-text-site :where(img, picture, video, iframe, canvas, svg) {
  max-width: 100%;
}

body#white-text-site :where(h1, h2, h3, h4, p, a, button, li, label, small, span) {
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  :root {
    --mobile-gutter: clamp(18px, 4.8vw, 30px);
    --header-h: 68px;
  }

  body#white-text-site .site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100%;
    min-width: 0;
    padding-inline: var(--mobile-gutter) !important;
    box-sizing: border-box;
  }

  body#white-text-site .site-header > .wordmark.wordmark-full {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(.68rem, 2.9vw, .88rem) !important;
    letter-spacing: .02em !important;
    gap: .22em !important;
    white-space: nowrap !important;
  }

  body#white-text-site .site-header > .wordmark.wordmark-full > span {
    font-size: inherit !important;
    letter-spacing: inherit !important;
  }

  body#white-text-site .site-header > .mobile-store-shortcut {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding-inline: 10px !important;
    font-size: .66rem !important;
  }

  body#white-text-site .site-header > .menu-toggle {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }

  body#white-text-site .main-nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: calc(var(--header-h) + 28px) 24px 36px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body#white-text-site main#conteudo > .section-wrap,
  body#white-text-site main#conteudo > .custom-content-section,
  body#white-text-site main#conteudo > .intro-strip {
    padding-inline: var(--mobile-gutter) !important;
  }

  body#white-text-site main#conteudo > section:not(#inicio) {
    scroll-margin-top: calc(var(--header-h) + 18px);
  }

  body#white-text-site main#conteudo > section.section-wrap:not(#inicio),
  body#white-text-site main#conteudo > .custom-content-section {
    padding-top: clamp(52px, 9vw, 72px) !important;
    padding-bottom: clamp(52px, 9vw, 72px) !important;
  }

  body#white-text-site .section-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 14px !important;
    width: 100%;
    max-width: 100%;
    margin-inline: 0 !important;
  }

  body#white-text-site .section-heading > *,
  body#white-text-site .section-note,
  body#white-text-site .about-copy,
  body#white-text-site .custom-content-inner {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    justify-self: stretch !important;
  }

  body#white-text-site .section-heading h2,
  body#white-text-site #loja .section-heading h2 {
    max-width: 100%;
    font-size: clamp(2.1rem, 7.8vw, 3.6rem) !important;
    line-height: .98;
    overflow-wrap: anywhere;
  }

  body#white-text-site .hero {
    width: 100%;
    min-width: 0;
    padding-inline: var(--mobile-gutter) !important;
  }

  body#white-text-site #inicio .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body#white-text-site #inicio .hero-copy > h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(2.25rem, 10vw, 3.65rem) !important;
    line-height: .98 !important;
    overflow-wrap: anywhere;
  }

  body#white-text-site #inicio .hero-copy > .hero-intro {
    width: 100% !important;
    max-width: 38ch !important;
  }

  body#white-text-site #inicio .hero-copy > .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body#white-text-site #inicio .hero-actions > :is(a, button) {
    max-width: 100%;
    min-height: 44px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body#white-text-site .intro-strip {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 12px !important;
    min-height: 0;
    padding-block: 20px !important;
  }

  body#white-text-site .intro-strip .strip-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 6px;
  }

  body#white-text-site .intro-strip .strip-copy small {
    margin: 0;
  }

  body#white-text-site .intro-strip .strip-scroll {
    align-self: flex-end;
  }

  body#white-text-site #projetos .filter-row,
  body#white-text-site #publicacoes .publication-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    margin-inline: -2px;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body#white-text-site #projetos .filter-row > .filter-button,
  body#white-text-site #publicacoes .publication-filters > .publication-filter {
    flex: 0 0 auto !important;
    max-width: none !important;
    min-height: 42px;
  }

  body#white-text-site #project-grid[data-presentation="carousel"] {
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 100%;
    gap: 14px !important;
    padding: 0 2px 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body#white-text-site #project-grid[data-presentation="carousel"] > .project-card {
    flex: 0 0 calc(100% - 4px) !important;
    width: calc(100% - 4px) !important;
    max-width: calc(100% - 4px) !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body#white-text-site #project-grid .project-image {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
  }

  body#white-text-site #project-grid .project-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100%;
    padding-top: 16px !important;
  }

  body#white-text-site #project-grid .project-meta > *,
  body#white-text-site #project-grid .project-actions {
    min-width: 0 !important;
    max-width: 100%;
  }

  body#white-text-site #project-grid .project-meta h3 {
    font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
    line-height: 1.05;
  }

  body#white-text-site #project-grid .project-summary {
    max-width: 100% !important;
  }

  body#white-text-site #project-grid .project-image .behance-open {
    opacity: 1 !important;
    transform: none !important;
    right: 10px !important;
    bottom: 10px !important;
    max-width: calc(100% - 20px) !important;
  }

  body#white-text-site #ilustracoes .illustration-grid[data-presentation="carousel"]:not(.is-circular-gallery) {
    display: flex !important;
    align-items: flex-start !important;
    width: 100%;
    max-width: 100%;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 2px 18px !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body#white-text-site #ilustracoes .illustration-grid[data-presentation="carousel"]:not(.is-circular-gallery) > .illustration-card {
    flex: 0 0 min(84vw, 360px) !important;
    width: min(84vw, 360px) !important;
    min-width: 0 !important;
  }

  body#white-text-site #ilustracoes .illustration-3d-stage {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(390px, 112vw, 440px) !important;
  }

  body#white-text-site #sobre .about-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    width: 100%;
    margin-bottom: 42px !important;
  }

  body#white-text-site #sobre .about-portrait {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    margin-inline: auto;
  }

  body#white-text-site #sobre .about-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  body#white-text-site #sobre .about-name {
    font-size: clamp(2.2rem, 9vw, 3.5rem) !important;
    overflow-wrap: anywhere;
  }

  body#white-text-site #sobre .profile-details {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
    width: 100%;
  }

  body#white-text-site #sobre .profile-column,
  body#white-text-site #sobre .profile-column:last-child {
    grid-column: auto !important;
    min-width: 0;
    width: 100%;
  }

  body#white-text-site #sobre .software-icons {
    justify-content: flex-start;
  }

  body#white-text-site #process-grid[data-presentation="carousel"] {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 2px 18px !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body#white-text-site #process-grid[data-presentation="carousel"] > .process-step {
    flex: 0 0 calc(100% - 4px) !important;
    width: calc(100% - 4px) !important;
    max-width: calc(100% - 4px) !important;
    min-width: 0 !important;
    min-height: 230px;
  }

  body#white-text-site #loja #store-home-root,
  body#white-text-site #loja #store-home-root > *,
  body#white-text-site #loja .store-grid,
  body#white-text-site #loja .store-toolbar {
    min-width: 0;
    max-width: 100%;
  }

  body#white-text-site #contato > h2 {
    max-width: 100%;
    font-size: clamp(2.2rem, 9vw, 3.6rem) !important;
    line-height: .98;
    overflow-wrap: anywhere;
  }

  body#white-text-site #contato .contact-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }

  body#white-text-site #contato .contact-bottom > * {
    max-width: 100%;
  }

  body#white-text-site #contato .contact-form {
    width: 100%;
    max-width: 100%;
    padding: clamp(14px, 4vw, 20px) !important;
  }

  body#white-text-site #contato .contact-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body#white-text-site #contato .contact-form :is(input, textarea, select) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body#white-text-site #contato .contact-form-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  body#white-text-site #contato .contact-form-actions > #contact-submit {
    align-self: flex-start;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  body#white-text-site #contato .contact-form-actions > #contact-status {
    flex: 1 1 auto !important;
    width: 100%;
    min-width: 0 !important;
  }

  body#white-text-site #contato .contact-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  body#white-text-site .site-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 28px var(--mobile-gutter) calc(28px + env(safe-area-inset-bottom)) !important;
    width: 100%;
    min-width: 0;
  }

  body#white-text-site .site-footer > * {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body#white-text-site .publication-viewer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  body#white-text-site .publication-viewer .viewer-figure,
  body#white-text-site .publication-viewer .viewer-figure img,
  body#white-text-site .publication-viewer .viewer-figure figcaption {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body#white-text-site .case-study-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
  }

  body#white-text-site .case-study-sections {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body#white-text-site .whatsapp-float {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 380px) {
  body#white-text-site .site-header > .mobile-store-shortcut {
    display: none !important;
  }

  body#white-text-site .site-header > .wordmark.wordmark-full {
    font-size: .68rem !important;
  }

  body#white-text-site #inicio .hero-actions > :is(a, button) {
    padding-inline: 14px !important;
    font-size: .68rem !important;
    letter-spacing: .05em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body#white-text-site #project-grid[data-presentation="carousel"],
  body#white-text-site #ilustracoes .illustration-grid[data-presentation="carousel"],
  body#white-text-site #process-grid[data-presentation="carousel"] {
    scroll-behavior: auto;
  }
}

@media (max-width: 680px) {
  body#white-text-site .ve-mobile-flow-normalized {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    translate: none !important;
    overflow-wrap: anywhere;
  }

  body#white-text-site .ve-mobile-flow-normalized:is(img, picture, video, iframe) {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
  }
}


/* v23.07 — todos os cards de projetos compartilham a mesma moldura e proporção.
   A proporção não depende mais do formato original de cada imagem: o recorte é
   uniforme e a imagem preenche a moldura sem deformação. */
body#white-text-site #project-grid > .project-card > .project-image {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}
body#white-text-site #project-grid > .project-card > .project-image > .project-picture {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body#white-text-site #project-grid > .project-card > .project-image > .project-picture > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 680px) {
  body#white-text-site #project-grid[data-presentation="carousel"] > .project-card {
    flex: 0 0 calc(100% - 4px) !important;
    width: calc(100% - 4px) !important;
    max-width: calc(100% - 4px) !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  /* Mantém a composição textual no mesmo ritmo mesmo com títulos curtos/longos. */
  body#white-text-site #project-grid > .project-card {
    display: grid !important;
    grid-template-rows: auto minmax(124px, auto) minmax(4.8em, auto) !important;
    align-content: start !important;
    min-width: 0 !important;
  }
  body#white-text-site #project-grid .project-meta {
    min-height: 124px !important;
    align-content: start !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body#white-text-site #project-grid .project-meta > div:first-child {
    min-height: 72px !important;
  }
  body#white-text-site #project-grid .project-meta .project-type {
    min-height: 2.35em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  body#white-text-site #project-grid .project-meta h3 {
    min-height: 2.1em !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
  }
  body#white-text-site #project-grid .project-actions {
    min-height: 42px;
    align-items: center;
  }
  body#white-text-site #project-grid .project-summary {
    min-height: 4.8em !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden !important;
  }
}


/* v2308 — mantém o indicador de rolagem perfeitamente circular no mobile. */
@media (max-width: 680px) {
  html body#white-text-site .intro-strip > .strip-scroll {
    display: grid !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border-radius: 50% !important;
    align-self: center !important;
    place-items: center !important;
    line-height: 1 !important;
    writing-mode: horizontal-tb !important;
  }
}

/* O carrossel de publicações recebe gestos laterais sem bloquear o scroll vertical. */
html body#white-text-site #publication-viewport {
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}
html body#white-text-site #publication-track {
  -webkit-user-select: none;
  user-select: none;
}
html body#white-text-site #publication-track img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* v23.12 — alinhamento dos cartões desktop, inclusive cards inseridos pelo Supabase.
   Mantém categoria/título, ações e resumo em faixas verticais independentes. */
@media (min-width: 861px) {
  html body#white-text-site #project-grid[data-presentation="carousel"] > .project-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  html body#white-text-site #project-grid[data-presentation="carousel"] > .project-card > .project-image {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  html body#white-text-site #project-grid[data-presentation="carousel"] > .project-card > .project-meta {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 18px !important;
    box-sizing: border-box !important;
  }

  html body#white-text-site #project-grid[data-presentation="carousel"] > .project-card > .project-meta > div:first-child {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    flex: 0 0 120px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 120px !important;
    height: 120px !important;
    max-height: 120px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body#white-text-site #project-grid[data-presentation="carousel"] > .project-card > .project-meta > div:first-child > .project-type {
    display: -webkit-box !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 2.8em !important;
    max-height: 2.8em !important;
    margin: 0 0 7px !important;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body#white-text-site #project-grid[data-presentation="carousel"] > .project-card > .project-meta > div:first-child > h3 {
    display: -webkit-box !important;
    position: static !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 2.16em !important;
    margin: 0 !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body#white-text-site #project-grid[data-presentation="carousel"] > .project-card > .project-meta > .project-actions {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    flex: 0 0 42px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body#white-text-site #project-grid[data-presentation="carousel"] > .project-card > .project-meta > .project-actions > * {
    position: static !important;
    flex: 0 0 auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  html body#white-text-site #project-grid[data-presentation="carousel"] > .project-card > .project-summary {
    position: static !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 48ch !important;
    margin: 12px 0 0 !important;
    line-height: 1.72 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}


/* v23.13 — correções da auditoria visual (10/11/2026). */
/* Mensagem de status do formulário: nunca ao lado do botão no celular. */
html body#white-text-site #contato .contact-form-actions { flex-wrap: nowrap !important; }

/* Número das ilustrações em uma linha só. */
html body#white-text-site #ilustracoes .illustration-3d-card .illustration-index { white-space: nowrap !important; flex: 0 0 auto !important; font-size: 12px !important; }

/* Títulos dos cards: cortar por linha, não no meio da palavra. */
html body#white-text-site #project-grid > .project-card > .project-meta > div:first-child > h3 { overflow-wrap: break-word !important; word-break: normal !important; hyphens: auto; }

/* Nenhum texto abaixo de 12 px. */
html body#white-text-site :is(
  .mock-label, .behance-open, .case-study-open, .project-type, .illustration-index,
  .about-copy small, .detail-list span, .profile-column small, .software-tile small,
  .site-header .wordmark span, .mobile-store-shortcut, .language-toggle,
  .hero-secondary-link, .text-link, .admin-footer-link, .site-footer > span,
  .filter-button > span, #contact-submit
) { font-size: 12px !important; }
html body#white-text-site #ilustracoes .illustration-3d-card .project-type { font-size: 12px !important; }

/* Título da capa no celular: sem espaçamento negativo. */
@media (max-width: 680px) {
  html body#white-text-site .hero h1 { letter-spacing: 0 !important; }
  html body#white-text-site .mobile-store-shortcut { min-height: 44px !important; }
}
html body#white-text-site #contato .contact-form-actions > #contact-submit { font-size: 12px !important; }
html body .site-header > a.wordmark.wordmark-full,
html body .site-header > a.wordmark.wordmark-full > span { font-size: max(12px, clamp(.82rem, 1.05vw, 1.08rem)) !important; }
html body#white-text-site .site-footer .wordmark span, html body#white-text-site .site-footer > span { font-size: 12px !important; }


/* v23.14 — carrossel de publicações: interação confiável e tipografia sem caixas. */
html body#white-text-site #publicacoes .publication-viewport {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}
html body#white-text-site #publicacoes .publication-card,
html body#white-text-site #publicacoes .publication-meta-copy {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
html body#white-text-site #publicacoes .publication-category {
  display: block;
  width: auto;
  min-width: 0;
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mustard, #C0924D);
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: .12em;
  white-space: normal;
  overflow-wrap: normal;
}
html body#white-text-site #publicacoes .publication-title {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cream, #EEE6D3);
  font-size: clamp(1.05rem, 4.8vw, 1.25rem);
  line-height: 1.18;
  overflow-wrap: break-word;
  word-break: normal;
}
html body#white-text-site #publicacoes .publication-open-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  place-items: center;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  overflow: visible;
  white-space: nowrap;
}
html body#white-text-site #publicacoes .publication-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}
html body#white-text-site #publicacoes .publication-controls .publication-control {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  place-items: center;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  white-space: nowrap;
}
/* Os filtros continuam clicáveis, mas deixam de parecer palavras dentro de caixas. */
html body#white-text-site #publicacoes .publication-filter {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  width: auto;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(238,230,211,.72);
  font-size: .82rem;
  line-height: 1;
  letter-spacing: .035em;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
html body#white-text-site #publicacoes .publication-filter[aria-pressed="true"] {
  background: transparent;
  border: 0;
  color: var(--cream, #EEE6D3);
  font-weight: 700;
}
html body#white-text-site #publicacoes .publication-filter[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 2px;
  left: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--mustard, #C0924D);
}
@media (max-width: 680px) {
  html body#white-text-site #publicacoes .publication-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
  }
  html body#white-text-site #publicacoes .publication-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 8px;
    scrollbar-width: none;
  }
  html body#white-text-site #publicacoes .publication-filters::-webkit-scrollbar { display: none; }
  html body#white-text-site #publicacoes .publication-controls {
    align-self: flex-end;
    gap: 10px;
  }
  html body#white-text-site #publicacoes .publication-controls .publication-control {
    flex-basis: 46px;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
  }
  html body#white-text-site #publicacoes .publication-card {
    flex: 0 0 min(340px, calc(100vw - 2 * var(--mobile-gutter, 18px)));
    width: min(340px, calc(100vw - 2 * var(--mobile-gutter, 18px)));
    max-width: calc(100vw - 2 * var(--mobile-gutter, 18px));
  }
  html body#white-text-site #publicacoes .publication-meta {
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
}


/* v23.15 — swipe nativo do carrossel de publicações em Android/iOS. */
html body#white-text-site #publicacoes .publication-viewport {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x pan-y pinch-zoom !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
html body#white-text-site #publicacoes .publication-viewport::-webkit-scrollbar { display: none; }
html body#white-text-site #publicacoes .publication-track {
  display: flex;
  width: max-content;
  transform: none !important;
  transition: none !important;
}
html body#white-text-site #publicacoes .publication-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


/* v23.16 — wordmark público: "DESIGNER" acompanha exatamente o tamanho do nome.
   Corrige a regra genérica de acessibilidade que aplicava 12px ao span do cabeçalho. */
@media (max-width: 680px) {
  html body#white-text-site:not(#unused) .site-header > a.wordmark.wordmark-full {
    font-size: max(12px, clamp(.68rem, 2.9vw, .88rem)) !important;
  }
}
html body#white-text-site :is(
  #white-text-site .site-header > a.wordmark.wordmark-full > span
) {
  font-size: inherit !important;
  letter-spacing: inherit !important;
}