/* ============================================================
   MaxPotencial - estilos custom (complementam o Tailwind estático)
   ============================================================ */

html, body {
  min-height: 100%;
}

body {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Scroll suave e compensação para skip-link */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

/* Focus visível - acessibilidade */
:focus-visible {
  outline: 2px solid rgb(56 189 248);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Reveal (fade + slide)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  transition-timing-function: ease-out;
  will-change: opacity, transform;
}
[data-reveal][data-reveal-dir="left"]  { transform: translate3d(-50px, 0, 0); }
[data-reveal][data-reveal-dir="right"] { transform: translate3d( 50px, 0, 0); }
[data-reveal][data-reveal-dir="up"]    { transform: translate3d(0, 30px, 0); }
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-panel {
  max-height: 0;
  opacity: 0;
}
.faq-item.is-open .faq-panel {
  max-height: 24rem;
  opacity: 1;
}
.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

/* ============================================================
   Modal
   ============================================================ */
body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0);
}

/* ============================================================
   Tabs
   ============================================================ */
.tab-trigger {
  color: rgb(148 163 184);
  padding: 0.5rem 1rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.tab-trigger:hover   { color: rgb(226 232 240); }
.tab-trigger.is-active {
  background: rgb(15 23 42);
  color: rgb(255 255 255);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Form fields
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(226 232 240);
}

.field-input {
  width: 100%;
  background: rgb(30 41 59 / 0.6);
  border: 1px solid rgb(51 65 85);
  color: rgb(255 255 255);
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.field-input::placeholder { color: rgb(100 116 139); }

.field-input:focus,
.field-input:focus-visible {
  border-color: rgb(56 189 248);
  box-shadow: 0 0 0 3px rgb(56 189 248 / 0.15);
  outline: none;
}

.field-input.has-error {
  border-color: rgb(239 68 68);
  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.15);
}

.field-error {
  display: none;
  font-size: 0.8rem;
  color: rgb(252 165 165);
  margin: 0;
}
.field-error.is-visible { display: block; }

/* Honeypot - escondido dos humanos, visível para bots */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ============================================================
   Slots de marcação
   ============================================================ */
.slot-btn {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(51 65 85);
  background: rgb(30 41 59 / 0.6);
  color: rgb(226 232 240);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
  font-family: inherit;
}
.slot-btn:hover {
  border-color: rgb(56 189 248);
  color: rgb(255 255 255);
}
.slot-btn.is-selected {
  background: linear-gradient(135deg, rgb(6 182 212), rgb(37 99 235));
  border-color: transparent;
  color: #fff;
}

/* ============================================================
   Toast
   ============================================================ */
.toast {
  min-width: 280px;
  max-width: 360px;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  color: #fff;
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  pointer-events: auto;
}
.toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}
.toast-success { background: linear-gradient(135deg, rgb(16 185 129), rgb(5 150 105)); }
.toast-error   { background: linear-gradient(135deg, rgb(239 68 68),  rgb(185 28 28));  }

/* ============================================================
   intl-tel-input overrides
   - Input e botão da bandeira combinam com o tema escuro (.field-input)
   - Dropdown mantém o default da lib (fundo claro, texto escuro) para
     legibilidade da longa lista de países
   ============================================================ */
.iti { width: 100%; display: block; }
.iti input.field-input[type=tel],
.iti input.field-input { width: 100%; }

/* Botão lateral (bandeira + "+351") integrado no input escuro */
.iti--separate-dial-code .iti__selected-flag {
  background-color: rgb(15 23 42 / 0.9);
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.iti__selected-flag:focus {
  outline: 2px solid rgb(56 189 248);
  outline-offset: -2px;
}
.iti--separate-dial-code .iti__selected-dial-code {
  color: rgb(226 232 240);
}

/* Dropdown de países - fundo escuro (igual à modal .bg-slate-900) com
   texto claro, para continuidade visual com o popup. */
.iti__dropdown-content {
  background-color: rgb(15 23 42);
  border: 1px solid rgb(51 65 85);
}
.iti__country-list {
  max-height: 260px;
  background-color: rgb(15 23 42);
  color: rgb(226 232 240);
}
.iti__country-list .iti__country,
.iti__country-list .iti__country-name { color: rgb(226 232 240); }
.iti__country-list .iti__dial-code { color: rgb(148 163 184); }
.iti__country.iti__highlight { background-color: rgb(30 41 59); }
.iti__divider { border-bottom-color: rgb(51 65 85); }

/* ============================================================
   Flatpickr overrides (carregado on-demand)
   ============================================================ */
.flatpickr-calendar {
  background: rgb(15 23 42);
  border: 1px solid rgb(51 65 85);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: rgb(37 99 235);
  border-color: rgb(37 99 235);
}
.flatpickr-day.today { border-color: rgb(56 189 248); }

/* ============================================================
   Acessibilidade - prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-parallax-hero] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  header, footer, nav, #modal, #modal-overlay, #toast-container { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}