/* ==========================================================
   OFÍCIO Instituto de Liderança — Design System
   CSS Custom Properties para Light Theme
   ========================================================== */

/* ── Light Theme (padrão) ─────────────────────────────── */
:root {
  --color-surface:                   #faf9f5;
  --color-surface-dim:               #dadad6;
  --color-surface-bright:            #faf9f5;
  --color-surface-container-lowest:  #ffffff;
  --color-surface-container-low:     #f4f4f0;
  --color-surface-container:         #eeeeea;
  --color-surface-container-high:    #e8e8e4;
  --color-surface-container-highest: #e3e3df;
  --color-surface-variant:           #e3e3df;
  --color-surface-tint:              #5d5c74;
  --color-surface-bright-alt:        #faf9f5;

  --color-on-surface:                #1a1c1a;
  --color-on-surface-variant:        #47464c;
  --color-on-background:             #1a1c1a;
  --color-background:                #faf9f5;

  --color-primary:                   #00000b;
  --color-on-primary:                #ffffff;
  --color-primary-container:         #1a1a2e;
  --color-on-primary-container:      #83829b;
  --color-primary-fixed:             #e2e0fc;
  --color-primary-fixed-dim:         #c6c4df;
  --color-on-primary-fixed:          #1a1a2e;
  --color-on-primary-fixed-variant:  #45455b;
  --color-inverse-primary:           #c6c4df;

  --color-secondary:                 #5e5e5e;
  --color-on-secondary:              #ffffff;
  --color-secondary-container:       #e0dfdf;
  --color-on-secondary-container:    #626362;
  --color-secondary-fixed:           #e3e2e1;
  --color-secondary-fixed-dim:       #c7c6c5;
  --color-on-secondary-fixed:        #1a1c1c;
  --color-on-secondary-fixed-variant:#464746;

  --color-tertiary:                  #695d3c;
  --color-on-tertiary:               #ffffff;
  --color-tertiary-container:        #b9aa83;
  --color-on-tertiary-container:     #493f20;
  --color-tertiary-fixed:            #f2e1b7;
  --color-tertiary-fixed-dim:        #d5c59d;
  --color-on-tertiary-fixed:         #231b02;
  --color-on-tertiary-fixed-variant: #514627;

  --color-outline:                   #78767d;
  --color-outline-variant:           #c8c5cd;

  --color-error:                     #ba1a1a;
  --color-on-error:                  #ffffff;
  --color-error-container:           #ffdad6;
  --color-on-error-container:        #93000a;

  --color-inverse-surface:           #2f312e;
  --color-inverse-on-surface:        #f1f1ed;
}

/* ── Base Reset & Tipografia ──────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Skip to content (acessibilidade) ────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 1rem;
}

/* ── Grid Editorial ───────────────────────────────────── */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (min-width: 768px) {
  .editorial-grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

/* ── Bordas Blueprint ─────────────────────────────────── */
.blueprint-border         { border: 1px solid var(--color-outline-variant); }
.blueprint-border-bottom  { border-bottom: 1px solid var(--color-outline-variant); }
.blueprint-border-top     { border-top: 1px solid var(--color-outline-variant); }
.luxury-divider           { border-bottom: 1px solid var(--color-outline-variant); }

/* ── Formulários ──────────────────────────────────────── */
.form-input {
  border: none !important;
  border-bottom: 1px solid var(--color-outline-variant) !important;
  background-color: transparent !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--color-on-surface);
  width: 100%;
  font-size: 1rem;
  line-height: 1.6;
  transition: border-color 0.2s ease;
}
.form-input:focus {
  outline: none !important;
  border-bottom-color: var(--color-primary) !important;
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
}

/* ── Botões Primários ─────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background-color: var(--color-primary-container);
  color: var(--color-on-primary);
  border: 1px solid var(--color-primary-container);
  padding: 12px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
  text-decoration: none;
  border-radius: 0;
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-3px);
  box-shadow: 0 16px 28px -12px rgba(0,0,0,0.4);
}

.btn-secondary {
  display: inline-block;
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 12px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
  text-decoration: none;
  border-radius: 0;
}
.btn-secondary:hover {
  background-color: var(--color-surface-container-low);
  transform: translateY(-3px);
}

/* ── Menu Mobile ──────────────────────────────────────── */
#mobile-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-outline-variant);
  padding: 1.5rem 20px;
  gap: 1.25rem;
  z-index: 49;
}
#mobile-menu.open { display: flex; }

/* ── Nav link ativo ───────────────────────────────────── */
nav a[aria-current="page"] {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
}

/* ── Accordion (FAQ) ──────────────────────────────────── */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}
.accordion-btn .accordion-icon {
  transition: transform 0.3s ease;
}
.accordion-btn.open .accordion-icon {
  transform: rotate(180deg);
}

/* ── Material Symbols ─────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

/* ── Utilitários de imagem ────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.img-grayscale {
  filter: grayscale(100%);
  transition: filter 0.6s ease, transform 0.1s linear;
}
.img-grayscale:hover { filter: grayscale(20%); }

/* ── Seleção de texto ─────────────────────────────────── */
::selection {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary);
}

/* ── Scrollbar (WebKit) ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface-container-low); }
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-outline); }

/* ── Focus visible (acessibilidade) ──────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Flip Card (Depoimentos) ──────────────────────────── */
.flip-card {
  perspective: 1200px;
  min-height: 320px;
  cursor: pointer;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}
@media (hover: hover) and (pointer: fine) {
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.flip-card-back {
  transform: rotateY(180deg);
}

/* ── Scroll Reveal / Parallax: controlados via GSAP + ScrollTrigger em assets/js/motion.js ── */

/* ── Marquee (faixa de destaque animada) ───────────────── */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background-color: var(--color-primary-container);
  border-bottom: 1px solid var(--color-outline-variant);
  padding: 14px 0;
}
.marquee-track {
  display: inline-flex;
  width: max-content;
  will-change: transform;
  animation: marquee-scroll 26s linear infinite;
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--color-primary-fixed-dim);
  padding: 0 32px;
  white-space: nowrap;
}
.marquee-track span::after {
  content: '✦';
  margin-left: 32px;
  font-style: normal;
  opacity: 0.5;
  font-size: 12px;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ── Split reveal do título (Hero) ─────────────────────── */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.split-word > span {
  display: inline-block;
  will-change: transform;
}

/* ── Header dinâmico no scroll ─────────────────────────── */
#site-header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
}
#site-header.scrolled {
  background-color: rgba(250, 249, 245, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#site-header.scrolled > div {
  transition: padding 0.3s ease;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* ── Underline animado na navegação ───────────────────── */
header nav a[href]:not([aria-current="page"]) {
  position: relative;
}
header nav a[href]:not([aria-current="page"])::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 1px;
  background-color: var(--color-primary);
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1);
}
header nav a[href]:not([aria-current="page"]):hover::after {
  width: 100%;
}

/* ── Elevação de cards no hover ───────────────────────── */
main article.blueprint-border {
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease, background-color 0.3s ease;
}
main article.blueprint-border:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -18px rgba(0,0,0,0.18);
}

/* ── Parallax de imagens no hero ──────────────────────── */
.parallax-frame { position: relative; }
.parallax-img {
  transform: scale(1.15);
  will-change: transform;
}
.flip-card-front::after {
  content: "toque para ler mais";
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-outline);
  opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {
  .flip-card-front::after { content: none; }
}