/* ==========================================================================
   ASMX Negócios Imobiliários — Camada de identidade visual
   Guia de paleta v1.0 (Agosto/2026)

   O style.css do tema é Tailwind COMPILADO: as classes utilitárias trazem
   valores RGB fixos (laranja #ff5a3c do tema original). Este arquivo é a
   camada de override — toda cor de marca vive aqui.

   Regra 60-30-10:
     60% neutras  -> #FFFFFF / #F4F6F8 / #0A0A0A
     30% estrutura-> #0056A3 (azul corporativo) / #A0A0A0 (prata)
     10% acento   -> #00BFFF (cyan) para CTA, links ativos e hovers
   ========================================================================== */

:root {
    /* --- Paleta ASMX --- */
    --asmx-blue: #0056A3;
    --asmx-blue-dark: #003D75;
    --asmx-cyan: #00BFFF;
    --asmx-silver: #A0A0A0;
    --asmx-silver-light: #DCDCDE;
    --asmx-dark: #0A0A0A;
    --asmx-dark-2: #1A1A1A;
    --asmx-soft: #F4F6F8;
    --asmx-text: #333333;
    --asmx-text-muted: #666666;

    --asmx-gradient: linear-gradient(135deg, #0056A3 0%, #00BFFF 100%);
    --asmx-gradient-silver: linear-gradient(135deg, #E6E6E6 0%, #A0A0A0 100%);
    --asmx-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
    --asmx-glow: 0 4px 20px rgba(0, 191, 255, 0.35);

    /* Acento sensível ao contraste do fundo.
       Em fundo claro = azul #0056A3 (7.1:1, AAA).
       Em fundo escuro = cyan (o guia proíbe azul escuro sobre preto). */
    --asmx-accent: var(--asmx-blue);

    /* Tokens lidos pelos componentes não-Tailwind do style.css */
    --primary-color: #0056A3;
    --secondary-color: #0056A3;
    --heading-color: #0A0A0A;
    --paragraph-color: #333333;
    --section-bg-1: #F4F6F8;
    --section-bg-2: #0A0A0A;
    --border-color-1: #DCDCDE;
    --border-color-9: #DCDCDE;
}

/* Superfícies escuras trocam o acento para cyan (WCAG + guia §4.2).
   Custom properties herdam, então tudo abaixo do container se ajusta. */
header,
footer,
.hero,
.bg-section-bg-2,
.bg-overlay-primary,
.sticky-secondary.active,
.asmx-on-dark {
    --asmx-accent: var(--asmx-cyan);
    --secondary-color: #00BFFF;
}

/* Dentro do hero o cartão de busca volta a ser uma superfície clara */
.hero .bg-section-bg-1,
.hero .tab-contents {
    --asmx-accent: var(--asmx-blue);
    --secondary-color: #0056A3;
}

/* ==========================================================================
   1. Utilitários de acento (override do Tailwind compilado)
   ========================================================================== */

.text-secondary-color {
    --tw-text-opacity: 1;
    color: var(--asmx-accent);
}

.hover\:text-secondary-color:hover,
.group:hover .group-hover\:text-secondary-color {
    --tw-text-opacity: 1;
    color: var(--asmx-accent);
}

.border-secondary-color {
    --tw-border-opacity: 1;
    border-color: var(--asmx-accent);
}

/* Superfícies preenchidas usam azul fixo: precisam sustentar texto branco
   em qualquer fundo (cyan sólido + branco reprova no AA). */
.bg-secondary-color {
    --tw-bg-opacity: 1;
    background-color: rgb(0 86 163 / var(--tw-bg-opacity));
}

.hover\:bg-secondary-color:hover,
.group:hover .group-hover\:bg-secondary-color {
    --tw-bg-opacity: 1;
    background-color: rgb(0 86 163 / var(--tw-bg-opacity));
    color: #fff;
}

/* CTA primário: gradiente da marca (guia §3.1).
   Só onde há texto branco — preserva os chips translúcidos bg-opacity-10. */
.bg-secondary-color.text-white,
button.bg-secondary-color,
.hover\:bg-secondary-color:hover {
    background-image: var(--asmx-gradient);
    transition: box-shadow .3s ease, transform .3s ease, filter .3s ease;
}

.bg-secondary-color.text-white:hover,
button.bg-secondary-color:hover {
    box-shadow: var(--asmx-glow);
    filter: saturate(1.08);
}

/* Estado "hover para primário" dos botões do tema */
.hover\:bg-primary-color:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 61 117 / var(--tw-bg-opacity));
    background-image: none;
    box-shadow: var(--asmx-glow);
}

.text-primary-color {
    --tw-text-opacity: 1;
    color: rgb(0 86 163 / var(--tw-text-opacity));
}

.hover\:text-primary-color:hover {
    --tw-text-opacity: 1;
    color: rgb(0 86 163 / var(--tw-text-opacity));
}

/* ==========================================================================
   2. Neutros estruturais
   ========================================================================== */

.bg-section-bg-2 {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 10 / var(--tw-bg-opacity));
}

.bg-section-bg-1 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 246 248 / var(--tw-bg-opacity));
}

.text-heading-color {
    --tw-text-opacity: 1;
    color: rgb(10 10 10 / var(--tw-text-opacity));
}

.text-paragraph-color {
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity));
}

/* Scrim do hero: escurece o topo (legibilidade do header e do H1) e
   alivia no miolo para a fachada do imóvel aparecer. */
.bg-overlay-primary {
    background-color: transparent;
    background-image: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.88) 0%,
        rgba(10, 10, 10, 0.58) 32%,
        rgba(10, 10, 10, 0.50) 62%,
        rgba(10, 10, 10, 0.82) 100%
    );
}

/* ==========================================================================
   3. Header — versão escura premium (guia §3.3)
   A logo é cromada (prata metálica + azul): exige fundo escuro p/ brilhar.
   ========================================================================== */

img.logo-nav {
    width: 165px;
    height: auto;
}

.sticky-secondary.active {
    background: var(--asmx-dark);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* Páginas internas (sem banner atrás): header sólido desde o topo */
.sticky-header.sticky-secondary.listagem {
    background-color: var(--asmx-dark);
}

header nav ul li a {
    transition: color .25s ease;
}

/* ==========================================================================
   4. Hero / busca
   ========================================================================== */

@media (min-width: 1200px) {
    .width-nav {
        width: 50%;
    }
}

.hero-form .location-select::before {
    content: "\f3c5";
}

.hero-form .nice-select::before {
    color: var(--asmx-blue);
}

.hero-tab .tab-links .active button {
    background-image: var(--asmx-gradient);
    background-color: var(--asmx-blue);
    color: #fff;
}

/* ==========================================================================
   5. Chips / badges translúcidos (Sobre Nós, Blog, Propriedades)
   bg-secondary-color + bg-opacity-10 -> tinta azul suave sobre branco
   ========================================================================== */

#about-us .bg-secondary-color,
#blog .bg-secondary-color,
#propriedades .bg-secondary-color {
    --tw-bg-opacity: 1;
    background-image: none;
}

#about-us .bg-secondary-color.bg-opacity-10,
#blog .bg-secondary-color.bg-opacity-10,
#propriedades .bg-secondary-color.bg-opacity-10 {
    background-color: rgba(0, 86, 163, 0.10);
    background-image: none;
}

/* ==========================================================================
   6. Cards de imóvel (guia §3.2)
   ========================================================================== */

.property-card,
.asmx-card {
    background-color: #fff;
    border: 1px solid var(--asmx-silver-light);
    box-shadow: var(--asmx-shadow-card);
    transition: box-shadow .3s ease, transform .3s ease;
}

.property-card:hover,
.asmx-card:hover {
    box-shadow: 0 10px 30px rgba(0, 86, 163, 0.12);
    transform: translateY(-4px);
}

.asmx-price {
    color: var(--asmx-blue);
    font-weight: 700;
}

/* ==========================================================================
   7. Listagem de imóveis
   ========================================================================== */

#listagem-imoveis .bg-secondary-color:hover {
    color: rgb(255, 255, 255);
}

.filter-button {
    text-align: center;
    margin-top: 20px;
}

.filter-class {
    width: 70%;
}

/* ==========================================================================
   8. Botão scroll-to-top
   ========================================================================== */

.scroll-up:hover {
    background-image: var(--asmx-gradient);
    background-color: var(--asmx-blue);
    color: #fff;
    box-shadow: var(--asmx-glow);
}

/* ==========================================================================
   9. Rodapé (guia §3.3)
   ========================================================================== */

footer {
    background-color: var(--asmx-dark);
}

footer .text-paragraph-color,
footer p {
    color: var(--asmx-silver);
}

footer a:hover {
    color: var(--asmx-cyan);
}

/* Faixa de contato dos corretores */
.asmx-broker-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.asmx-broker {
    line-height: 1.45;
}

.asmx-broker strong {
    color: #fff;
    font-weight: 600;
    display: block;
}

.asmx-broker span {
    color: var(--asmx-silver);
    font-size: 13px;
    display: block;
}

.asmx-broker a {
    color: var(--asmx-cyan);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.asmx-broker a:hover {
    text-decoration: underline;
}

.asmx-creci {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    border: 1px solid var(--asmx-silver);
    color: var(--asmx-silver-light);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ==========================================================================
   10. Botão flutuante de WhatsApp
   ========================================================================== */

.asmx-whatsapp-float {
    position: fixed;
    left: 3%;
    bottom: 50px;
    z-index: 60;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    box-shadow: 0 6px 22px rgba(37, 211, 102, .45);
    transition: transform .25s ease, box-shadow .25s ease;
}

.asmx-whatsapp-float:hover {
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(37, 211, 102, .6);
}

@media (min-width: 1024px) {
    .asmx-whatsapp-float {
        bottom: 70px;
        width: 60px;
        height: 60px;
        font-size: 30px;
    }
}

/* ==========================================================================
   11. Seleções e foco — acento cyan
   ========================================================================== */

::selection {
    background: var(--asmx-cyan);
    color: var(--asmx-dark);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--asmx-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 191, 255, .18);
}

/* ==========================================================================
   12. Utilitários ausentes do Tailwind compilado
   O style.css do tema é um build fechado: várias classes usadas nas views
   nunca foram geradas. A mais grave é .pt-200px — usada no breadcrumb de
   17 páginas, sem ela o título colide com o header fixo.
   ========================================================================== */

.pt-200px { padding-top: 200px; }
.pt-20px  { padding-top: 20px; }
.pt-0     { padding-top: 0; }
.pb-20px  { padding-bottom: 20px; }
.py-20px  { padding-top: 20px; padding-bottom: 20px; }
.py-90px  { padding-top: 90px; padding-bottom: 90px; }
.p-20px   { padding: 20px; }
.mb-20px  { margin-bottom: 20px; }
.mt-20px  { margin-top: 20px; }

.gap-2 { gap: 0.5rem; }
.space-y-10px > :not([hidden]) ~ :not([hidden]) { margin-top: 10px; }

.max-w-800px { max-width: 800px; }
.w-40px  { width: 40px; }
.h-40px  { height: 40px; }
.w-80px  { width: 80px; }
.top-100px { top: 100px; }
.right-15px { right: 15px; }
.text-right { text-align: right; }
.resize-none { resize: none; }
.last\:border-0:last-child { border-width: 0; }
.bg-whiteColor { background-color: #fff; }

.col-span-3 { grid-column: span 3 / span 3; }

@media (min-width: 768px) {
    .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:col-span-5   { grid-column: span 5 / span 5; }
    .md\:col-span-7   { grid-column: span 7 / span 7; }
}

@media (min-width: 992px) {
    .lg\:text-40px   { font-size: 40px; }
    .lg\:max-w-\[980px\] { max-width: 980px; }
}

@media (min-width: 1300px) {
    .\32 xl\:text-lg { font-size: 1.125rem; }
    .\33 xl\:px-\[2\%\] { padding-left: 2%; padding-right: 2%; }
}

@media (min-width: 1400px) {
    .\33 xl\:text-6xl { font-size: 3.75rem; }
    .\33 xl\:leading-1\.3 { line-height: 1.3; }
}

@media (min-width: 1600px) {
    .\34 xl\:px-\[5\%\] { padding-left: 5%; padding-right: 5%; }
    .\34 xl\:text-7xl { font-size: 4.5rem; }
    .\34 xl\:leading-1\.3 { line-height: 1.3; }
    .\34 xl\:min-h-\[800px\] { min-height: 800px; }
}

/* ==========================================================================
   13. Galeria do imóvel
   As fotos vêm em retrato (3:4) e paisagem (4:3) misturados. O Swiper
   dimensiona o wrapper pela slide mais alta, o que deixava um vão enorme
   embaixo das horizontais. Fixa a proporção e recorta.
   ========================================================================== */

.property-gallery-slider .swiper-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--asmx-soft);
}

.property-gallery-slider {
    position: relative;
    overflow: hidden;
}

.property-gallery-slider .swiper-button-next,
.property-gallery-slider .swiper-button-prev {
    width: 44px;
    height: 44px;
    background: rgba(10, 10, 10, .55);
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background .25s ease;
}

.property-gallery-slider .swiper-button-next:hover,
.property-gallery-slider .swiper-button-prev:hover {
    background: var(--asmx-blue);
}

.property-gallery-slider .swiper-button-next::after,
.property-gallery-slider .swiper-button-prev::after {
    font-size: 17px;
    font-weight: 700;
}

.property-gallery-slider .swiper-pagination {
    position: static;
    margin-top: 14px;
}

.property-gallery-slider .swiper-pagination-bullet {
    background: var(--asmx-silver);
    opacity: .55;
}

.property-gallery-slider .swiper-pagination-bullet-active {
    background: var(--asmx-cyan);
    opacity: 1;
}

/* ==========================================================================
   14. Descrição rica do imóvel (HTML vindo do editor)
   O reset do tema zera list-style e margens; devolve hierarquia ao texto.
   ========================================================================== */

.property-description p { margin-bottom: 16px; }

.property-description h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--asmx-dark);
    margin: 26px 0 12px;
}

.property-description ul {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 768px) {
    .property-description ul { grid-template-columns: 1fr 1fr; }
}

.property-description ul li {
    position: relative;
    padding-left: 26px;
    color: var(--asmx-text);
}

.property-description ul li::before {
    content: "\f00c";                      /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--asmx-blue);
    position: absolute;
    left: 0;
    top: 3px;
}

.property-description strong { color: var(--asmx-dark); font-weight: 700; }