/* ==========================================================================
   DHF Studios — Base + componentes do design system
   Reimplementação em CSS dos componentes React de referência
   (_ds_bundle.js): Button, Card, Tag, Input, Select, Tabs, SectionTitle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* figure/blockquote/figcaption trazem margens padrão do navegador
   (1em 40px) que estreitariam os cards de depoimento. */
h1, h2, h3, h4, p, figure, blockquote, figcaption, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }

a {
  color: var(--dhf-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--dhf-ink-70); text-decoration-color: var(--dhf-orange); }
a:active { color: var(--dhf-ink); }

::selection { background: var(--dhf-yellow); color: var(--dhf-ink); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background   var(--duration-fast) var(--ease-out),
    color        var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform    var(--duration-fast) var(--ease-out);
}

.btn:active { transform: scale(var(--press-scale)); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}

/* Tamanhos */
.btn--sm { font-size: var(--text-xs); padding: 8px 14px;  min-height: 34px; }
.btn--md { font-size: var(--text-sm); padding: 11px 20px; min-height: 44px; }
.btn--lg { font-size: var(--text-md); padding: 15px 28px; min-height: 54px; }

.btn--block { width: 100%; }

/* Variantes */
.btn--primary {
  background: var(--dhf-ink);
  color: var(--cream-1);
  border-color: var(--dhf-ink);
}
.btn--primary:hover { background: #242422; color: var(--cream-1); }

.btn--secondary {
  background: transparent;
  color: var(--dhf-ink);
  border-color: var(--dhf-ink);
}
.btn--secondary:hover { background: var(--dhf-ink); color: var(--cream-1); }

.btn--accent {
  background: var(--dhf-orange);
  color: var(--dhf-ink);
  border-color: var(--dhf-ink);
}
.btn--accent:hover { background: #ffb282; color: var(--dhf-ink); }

.btn--ghost {
  background: transparent;
  color: var(--dhf-ink);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--dhf-ink-08); color: var(--dhf-ink); }

.btn--inverse {
  background: var(--cream-1);
  color: var(--dhf-ink);
  border-color: var(--cream-1);
}
.btn--inverse:hover { background: var(--dhf-white); color: var(--dhf-ink); }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.card {
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  padding: var(--space-5);
  box-shadow: none;
  transition:
    transform  var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.card--paper  { background: var(--surface-card); color: var(--dhf-ink); }
.card--cream  { background: var(--cream-1);      color: var(--dhf-ink); }
.card--orange { background: var(--dhf-orange);   color: var(--dhf-ink); }
.card--blue   { background: var(--dhf-blue);     color: var(--dhf-ink); }
.card--pink   { background: var(--dhf-pink);     color: var(--dhf-ink); }
.card--green  { background: var(--dhf-green);    color: var(--dhf-ink); }
.card--yellow { background: var(--dhf-yellow);   color: var(--dhf-ink); }
.card--ink    { background: var(--dhf-ink);      color: var(--cream-1); }

.card--hairline { border: 1px solid var(--dhf-ink-18); }
.card--outlined { border: 2px solid var(--dhf-ink); }
.card--pad-6    { padding: var(--space-6); }

.card--elevated { box-shadow: var(--shadow-md); }

.card--interactive { cursor: pointer; }
.card--interactive:hover { transform: translateY(var(--hover-lift)); }
.card--interactive.card--elevated:hover { box-shadow: var(--shadow-lg); }

/* --------------------------------------------------------------------------
   Tag
   -------------------------------------------------------------------------- */

.tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--dhf-ink);
  background: transparent;
  color: var(--dhf-ink);
  cursor: default;
  transition:
    background var(--duration-fast) var(--ease-out),
    color      var(--duration-fast) var(--ease-out);
}

button.tag { cursor: pointer; font: inherit; font-size: var(--text-xs); }
button.tag:hover { background: var(--dhf-ink-08); }

.tag--selected,
button.tag[aria-pressed="true"] {
  background: var(--dhf-ink);
  color: var(--cream-1);
}
button.tag[aria-pressed="true"]:hover { background: var(--dhf-ink); }

/* --------------------------------------------------------------------------
   Campos de formulário — Input, Textarea, Select
   -------------------------------------------------------------------------- */

.field-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.field-control {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--dhf-ink);
  background: var(--surface-card);
  border: 1.5px solid var(--line-hairline);
  border-radius: var(--radius-md);
  padding: 0 14px;
  height: 44px;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.field-control:focus { border-color: var(--dhf-ink); box-shadow: none; }
.field-control::placeholder { color: var(--text-faint); }

textarea.field-control {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
}

.field-control--error { border-color: var(--dhf-pink); }

.field-hint {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-top: 6px;
}
.field-hint--error { color: var(--dhf-pink); }

.select-wrap { position: relative; }

select.field-control {
  padding: 0 38px 0 14px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.select-wrap::after {
  content: "\25BC";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 11px;
  color: var(--text-muted);
}

/* Alerta em rosa — usado no erro de login e no erro de arquivo do portal */
.alert {
  border: 1.5px solid var(--dhf-pink);
  background: rgba(248, 136, 187, .16);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--dhf-ink);
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: 1px solid var(--line-hairline);
}

.tabs--pill {
  gap: var(--space-2);
  border-bottom: none;
}

.tab {
  all: unset;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 0 14px;
  border-radius: 0;
  background: transparent;
  transition: color var(--duration-fast) var(--ease-out);
}
.tab[aria-selected="true"] {
  color: var(--dhf-ink);
  box-shadow: inset 0 -3px 0 0 var(--dhf-orange);
}

.tabs--pill .tab {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  box-shadow: none;
}
.tabs--pill .tab[aria-selected="true"] {
  color: var(--cream-1);
  background: var(--dhf-ink);
  box-shadow: none;
}
.tabs--pill .tab:focus-visible { box-shadow: var(--shadow-focus); }

/* --------------------------------------------------------------------------
   SectionTitle
   Bebas em caixa alta com a palavra em script sobreposta por baixo.
   -------------------------------------------------------------------------- */

.section-title { text-align: left; color: var(--dhf-ink); }
.section-title--cream { color: var(--cream-1); }

.section-title__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: var(--space-3);
}

.section-title__headline {
  margin: 0;
  font-family: var(--font-condensed);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-condensed);
  text-transform: uppercase;
  font-weight: 400;
}

.section-title__script {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: .8;
  margin-top: -.22em;
  margin-left: .06em;
}

/* Tamanhos alternativos do componente (sm/md/xl), caso sejam necessários */
.section-title--sm .section-title__headline,
.section-title--sm .section-title__script { font-size: var(--text-2xl); }
.section-title--md .section-title__headline,
.section-title--md .section-title__script { font-size: var(--text-4xl); }
.section-title--xl .section-title__headline,
.section-title--xl .section-title__script { font-size: var(--text-7xl); }

/* --------------------------------------------------------------------------
   Utilitários compartilhados
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}

.script { font-family: var(--font-display); text-transform: lowercase; }

/* Palavra em script embutida numa headline Bebas */
.script-inline {
  font-family: var(--font-display);
  text-transform: lowercase;
  letter-spacing: 0;
  line-height: .8;
  display: inline-block;
  transform: translateY(.06em);
}

/* Frutas gravadas: sempre decorativas, sempre sangrando por uma borda */
.fruit {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card--interactive:hover { transform: none; }
}