/* =========================================================
   Home / Landing � estilos que nao dependem do Tailwind build
   ========================================================= */

/* ---------- HERO ---------- */
.home-hero {
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    background: #000400;
    color: #f7f7f5;
}

.home-hero-bg {
    position: absolute;
    inset: 0;
}

.home-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0.22;
}

.home-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 4, 0, 0.7) 0%, rgba(0, 4, 0, 0.82) 48%, rgba(0, 4, 0, 0.96) 100%);
}

.home-hero-shell {
    position: relative;
    z-index: 10;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.home-hero-nav {
    flex-shrink: 0;
    width: min(94vw, 80rem);
    margin: 1.75rem auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    border-radius: 1rem;
    background: rgba(0, 4, 0, 0.78);
    border: 1px solid rgba(247, 247, 245, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
    .home-hero-nav {
        margin-top: 2.25rem;
        padding: 1rem 2.25rem;
    }
}

.home-hero-nav a.logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.home-hero-nav .hero-nav-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .home-hero-nav .hero-nav-logo {
        height: 48px;
    }
}

.home-hero-menu {
    display: none;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .home-hero-menu {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .home-hero-menu {
        gap: 2.5rem;
    }
}

.home-hero-menu a {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(247, 247, 245, 0.92);
    text-decoration: none;
    transition: color 0.2s ease;
}

.home-hero-menu a:hover {
    color: #f0d202;
}

.home-hero-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f7f7f5;
    cursor: pointer;
}

@media (min-width: 768px) {
    .home-hero-burger {
        display: none;
    }
}

.home-hero-copy {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.5rem 1.5rem 6.5rem;
}

@media (min-width: 768px) {
    .home-hero-copy {
        padding: 2rem 2.5rem 7rem;
    }
}

.home-hero-copy-inner {
    text-align: center;
    max-width: 56rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-hero-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(2.25rem, 6vw, 5.5rem);
    line-height: 0.95;
    color: #f7f7f5;
    margin: 0 0 1.25rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.home-hero-lead {
    color: rgba(247, 247, 245, 0.88);
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.65;
    max-width: 36rem;
    margin: 0 auto;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.home-hero-pills {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 20;
    padding: 0 1rem;
    pointer-events: none;
}

.home-hero-pills-inner {
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    max-width: 64rem;
    margin: 0 auto;
}

.home-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 9999px;
    background: rgba(0, 4, 0, 0.82);
    border: 1px solid rgba(240, 210, 2, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.home-pill .material-symbols-outlined {
    color: #f0d202;
    font-size: 1.15rem;
}

.home-pill span:last-child {
    color: #f7f7f5;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.home-pill-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 9999px;
    background: #f0d202;
    border: 1px solid #f0d202;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.home-pill-rating .stars {
    color: #000400;
    font-size: 0.875rem;
    line-height: 1;
}

.home-pill-rating .label {
    color: #000400;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Semaforo / fita: tamanho forcado (utilitarios w-* podem faltar no Tailwind) */
.home-hero .hero-signal-float {
    position: absolute !important;
    z-index: 2;
    right: -2.5rem !important;
    left: auto !important;
    top: 7rem !important;
    width: 6.5rem !important;
    max-width: 28vw !important;
    height: auto !important;
    opacity: 0.45 !important;
    pointer-events: none;
}

@media (min-width: 768px) {
    .home-hero .hero-signal-float {
        right: 1rem !important;
        top: 9rem !important;
        width: 10rem !important;
        opacity: 0.55 !important;
    }
}

@media (min-width: 1024px) {
    .home-hero .hero-signal-float {
        right: 2.5rem !important;
        top: 8rem !important;
        width: 12rem !important;
        opacity: 0.6 !important;
    }
}

.home-hero .hero-tape {
    position: absolute !important;
    z-index: 2;
    opacity: 0.5;
    pointer-events: none;
}

@media (min-width: 768px) {
    .home-hero .hero-tape {
        opacity: 0.65;
    }
}

.home-hero .hero-yellow-degrade {
    height: 10rem !important;
    z-index: 5;
    pointer-events: none;
}

@media (min-width: 768px) {
    .home-hero .hero-yellow-degrade {
        height: 14rem !important;
    }
}

/* Titulo sempre legivel (shine quebrava com fill transparente) */
.home-hero-title {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
}

.home-hero-title .hero-slide-item,
.home-hero-title .hero-slide-item.animate-hero-shine {
    color: #f7f7f5 !important;
    -webkit-text-fill-color: #f7f7f5 !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    animation: none !important;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}

.home-hero-lead {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
}

/* ---------- SECOES GERAIS ---------- */
.home-section-title { color: #111111; }
.home-section-lead { color: #3a3a3a; }
.home-card {
    background: #ffffff;
    border: 1px solid #e8e8e4;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}
.home-card-dark {
    background: #111111;
    border: 1px solid #2a2a2a;
    color: #f7f7f5;
}
.home-card-gap { gap: 1.5rem; }
@media (min-width: 768px) {
    .home-card-gap { gap: 1.75rem; }
}
.home-muted { color: #4a4a4a; }
.home-ink { color: #111111; }
.home-cream { color: #f7f7f5; }
.home-cream-soft { color: rgba(247, 247, 245, 0.85); }
.home-yellow { color: #f0d202; }
.home-bg-cream { background: #f7f7f5; }
.home-bg-ink { background: #111111; }
.home-bg-yellow { background: #f0d202; }

#servicos .grid { gap: 1.75rem; }
@media (min-width: 768px) {
    #servicos .grid { gap: 2rem; }
}
#servicos .service-card,
#servicos [class*="rounded"] {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.07);
}

#dor .grid { gap: 1.5rem; }
@media (min-width: 768px) {
    #dor .grid { gap: 1.75rem; }
}

#faq details,
#legislacao p,
#legislacao li { color: inherit; }
#faq summary { color: #111111; }
#faq details p { color: #3a3a3a; }

/* =========================================================
   Polyfill � cores do Blade ausentes no tailwind.css compilado
   (so #000400 e #f0d202 existem no build atual)
   ========================================================= */

.text-\[\#f7f7f5\] { color: #f7f7f5; }
.text-\[\#f7f7f5\]\/65 { color: rgba(247, 247, 245, 0.65); }
.text-\[\#f7f7f5\]\/75 { color: rgba(247, 247, 245, 0.75); }
.text-\[\#f7f7f5\]\/80 { color: rgba(247, 247, 245, 0.8); }
.text-\[\#f7f7f5\]\/90 { color: rgba(247, 247, 245, 0.9); }
.text-\[\#111111\] { color: #111111; }
.text-\[\#111111\]\/25 { color: rgba(17, 17, 17, 0.25); }
.text-\[\#2c2c2c\] { color: #2c2c2c; }
.text-\[\#5a5a5a\] { color: #5a5a5a; }
.text-\[\#c4ab00\] { color: #c4ab00; }
.text-\[\#1a1a1a\] { color: #1a1a1a; }
.text-\[\#20c45b\] { color: #20c45b; }
.text-\[\#25D366\] { color: #25D366; }
.text-\[\#fafaf7\] { color: #fafaf7; }

.bg-\[\#f7f7f5\] { background-color: #f7f7f5; }
.bg-\[\#f5f4ef\] { background-color: #f5f4ef; }
.bg-\[\#fafaf7\] { background-color: #fafaf7; }
.bg-\[\#111111\] { background-color: #111111; }
.bg-\[\#1a1a1a\] { background-color: #1a1a1a; }
.bg-\[\#2c2c2c\] { background-color: #2c2c2c; }
.bg-\[\#20c45b\] { background-color: #20c45b; }
.bg-\[\#25D366\] { background-color: #25D366; }
.bg-\[\#c4ab00\] { background-color: #c4ab00; }

.border-\[\#111111\] { border-color: #111111; }
.border-\[\#f7f7f5\] { border-color: #f7f7f5; }
.border-\[\#f5f4ef\] { border-color: #f5f4ef; }
.border-\[\#c4ab00\] { border-color: #c4ab00; }

.hover\:text-\[\#c4ab00\]:hover { color: #c4ab00; }
.hover\:text-\[\#f0d202\]:hover { color: #f0d202; }
.hover\:bg-\[\#1a1a1a\]:hover { background-color: #1a1a1a; }
.hover\:bg-\[\#fafaf7\]:hover { background-color: #fafaf7; }
.hover\:bg-\[\#000400\]\/90:hover { background-color: rgba(0, 4, 0, 0.9); }
.hover\:border-\[\#f0d202\]:hover { border-color: #f0d202; }
.group:hover .group-hover\:text-\[\#c4ab00\] { color: #c4ab00; }

.from-\[\#f0d202\]\/30 { --tw-gradient-from: rgba(240, 210, 2, 0.3) var(--tw-gradient-from-position); --tw-gradient-to: rgba(240, 210, 2, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-\[\#000400\]\/10 { --tw-gradient-to: rgba(0, 4, 0, 0.1) var(--tw-gradient-to-position); }
.to-\[\#f5f4ef\] { --tw-gradient-to: #f5f4ef var(--tw-gradient-to-position); }

.gap-7 { gap: 1.75rem; }
.md\:gap-7 { gap: 1.75rem; }
@media (min-width: 768px) {
    .md\:gap-7 { gap: 1.75rem; }
    .md\:gap-8 { gap: 2rem; }
    .md\:p-7 { padding: 1.75rem; }
}
.gap-2\.5 { gap: 0.625rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.bottom-5 { bottom: 1.25rem; }

#dor { background-color: #f0d202; color: #111111; }
#sobre,
#legislacao { background-color: #000400; color: #f7f7f5; }
#diferenciais { background-color: #f0d202; color: #111111; }
#servicos,
#depoimentos,
#faq { background-color: #f5f4ef; color: #111111; }
#blog { background-color: #ffffff; color: #111111; }
#localizacao,
.site-footer { background-color: #000400; color: #f7f7f5; }
#cta-final { background-color: #f0d202; }

#sobre h2,
#legislacao h2 { color: #f7f7f5; }
#sobre .text-\[\#f0d202\],
#legislacao .text-\[\#f0d202\] { color: #f0d202; }

#servicos h2,
#depoimentos h2,
#blog h2,
#faq h2,
#diferenciais h2,
#dor h2 { color: #111111; }

.dor-resolution {
    background: #000400;
    color: #f7f7f5;
}
.dor-resolution h3 { color: #f0d202; }
.dor-resolution p { color: rgba(247, 247, 245, 0.8); }