/* =========================================================
   Autoescola Mafro — style.css
   Tokens + estilos que vão além dos utilitários do Tailwind.
   ========================================================= */

/* Impede que o navegador infle a fonte com o ajuste de tamanho de texto
   do sistema (comum em Android), o que desenquadra o layout. O zoom por
   pinça do usuário continua funcionando normalmente. */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Gradientes decorativos do hero (substituem classes Tailwind arbitrárias
   complexas demais para o scanner de conteúdo da versão compilada). */
.bg-glow-amber { background: radial-gradient(ellipse at bottom left, rgba(224,169,22,0.12), transparent 45%); }
.bg-glow-white { background: radial-gradient(ellipse at top left, rgba(255,255,255,0.15), transparent 50%); }
.bg-glow-red   { background: radial-gradient(ellipse at top right, rgba(216,38,42,0.35), transparent 55%); }

:root {
  /* Cores da marca */
  --red-700: #B81E22;
  --red-600: #D8262A;
  --red-500: #E64548;
  --red-50:  #FDF1F1;

  --amber-700: #9C7308;
  --amber-600: #C6900A;
  --amber-500: #E0A916;
  --amber-50:  #FBF3DF;

  --ink-900: #17181C;
  --ink-700: #383A42;
  --ink-600: #52545C;
  --ink-400: #8B8D96;

  --mist-50:  #F7F7F8;
  --mist-100: #EFEFF1;
  --mist-200: #E3E4E8;

  --paper: #FFFFFF;

  --shadow-soft: 0 1px 2px rgba(23,24,28,0.04), 0 8px 24px -8px rgba(23,24,28,0.10);
  --shadow-card: 0 1px 1px rgba(23,24,28,0.03), 0 16px 32px -16px rgba(23,24,28,0.14);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red-100, #f7c9ca); color: var(--ink-900); }

/* Foco visível para acessibilidade */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--red-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mist-50); }
::-webkit-scrollbar-thumb { background: var(--mist-200); border-radius: 999px; border: 2px solid var(--mist-50); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

.card-surface {
  background: var(--paper);
  border: 1px solid var(--mist-100);
  box-shadow: var(--shadow-card);
}

/* Botão WhatsApp flutuante */
.fab-whats {
  box-shadow: 0 10px 30px -8px rgba(216,38,42,0.45);
}
.fab-whats::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--red-500);
  animation: pulse-ring 2.4s var(--ease-out-expo) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Accordion FAQ */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease-out-expo);
}
.faq-panel > div { overflow: hidden; }
.faq-item[data-open="true"] .faq-panel { grid-template-rows: 1fr; }
.faq-item[data-open="true"] .faq-chevron { transform: rotate(45deg); }
.faq-chevron { transition: transform .25s var(--ease-out-expo); }
.faq-item[data-open="true"] .faq-chevron-arrow { transform: rotate(180deg); }
.faq-chevron-arrow { transition: transform .25s var(--ease-out-expo); }

/* Slider de depoimentos */
.testi-track {
  transition: transform .6s var(--ease-out-expo);
}

/* Reveal genérico controlado via GSAP, fallback sem JS */
.reveal { opacity: 1; }
.js-ready .reveal { opacity: 0; }

/* Header com transição de fundo ao rolar */
#site-header {
  transition: background-color .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo), border-color .3s var(--ease-out-expo);
}

/* Modal */
.modal-overlay {
  transition: opacity .25s var(--ease-out-expo);
}
.modal-panel {
  transition: transform .3s var(--ease-out-expo), opacity .3s var(--ease-out-expo);
}

/* Utilitário: texto eyebrow (rótulo) */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-600);
}

/* Back to top */
#back-to-top {
  transition: opacity .25s var(--ease-out-expo), transform .25s var(--ease-out-expo);
}