/* ============================================
   EasySale Landing Page — Custom Styles
   Complementa o Tailwind CDN com estilos que
   não são possíveis apenas com classes utilitárias
   ============================================ */

/* ---- Reset & Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Profile Toggle: hide wrong profile content ---- */
/* Use visibility + height collapse for inline elements (spans inside shared containers) */
body.perfil-consignadora [data-perfil="revendedora"],
body.perfil-revendedora [data-perfil="consignadora"] {
  display: none !important;
}

/* For section-level elements, use a stacking approach to prevent layout shifts */
/* This applies to siblings with different data-perfil in the same parent */

/* ---- Consistent layout between profile toggles ---- */
/* Ensure hero elements maintain consistent height regardless of text content */
/* This prevents "jumping" when toggling between Consignadoras and Revendedoras */

/* Desktop/Laptop: Fix hero headline height */
@media (min-width: 1024px) {
  #hero-headline {
    min-height: 13rem;
    /* 3 lines of lg:text-7xl */
    display: flex;
    align-items: flex-start;
  }

  #hero-subheadline {
    min-height: 5rem;
    /* ensure consistent subtitle area */
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  #hero-headline {
    min-height: 8rem;
    /* 2 lines of md:text-6xl */
  }

  #hero-subheadline {
    min-height: 4.5rem;
  }
}

/* Feature cards: ensure consistent height across profiles */
#funcionalidades .group {
  min-height: 220px;
}

/* ---- Header scroll state ---- */
#site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* ---- FAQ Accordion ---- */
.faq-item .faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-item.open .faq-content {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}

.faq-item .faq-chevron {
  transition: transform 0.2s ease;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-trigger:hover {
  text-decoration: none;
}

/* ---- ParaQuemE cards ---- */
.paraquem-card .paraquem-indicator {
  display: none;
}

.paraquem-card.active .paraquem-indicator {
  display: flex;
}

.paraquem-card .paraquem-gradient {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.paraquem-card.active .paraquem-gradient {
  opacity: 0.05;
}

/* ---- Depoimentos carousel transitions ---- */
#depoimento-texto,
#depoimento-nome,
#depoimento-empresa {
  transition: opacity 0.3s ease;
}

/* ---- Dot indicator active state (gradient bg) ---- */
.dot-active {
  background-image: linear-gradient(135deg, #F7941D 0%, #D91C80 100%);
}

/* ---- Selection color ---- */
::selection {
  background-color: rgba(247, 148, 29, 0.2);
  color: #1E1E3F;
}

/* ---- Smooth scrollbar ---- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}