/* ==========================================================================
   Dacorshop — Design System Global
   PageSpeed Optimized | Mobile-First
   ========================================================================== */

/* === RESET & BASE ======================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:1rem;line-height:1.6;color:#1a1208;background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}

/* === CSS VARIABLES ======================================================= */
:root{
  --c-primary:#243E78;          /* Azul para títulos */
  --c-primary-light:#395A99;    /* Azul principal da marca */
  --c-accent:#395A99;           /* Azul principal da marca (antigo dourado) */
  --c-accent-hover:#14244A;     /* Azul profundo */
  --c-beige:#F3F6FB;            /* Azul muito suave */
  --c-beige-dark:#EAF0FA;       /* Azul suave */
  --c-off-white:#F7F4EF;        /* Off-white */
  --c-white:#FFFFFF;
  --c-dark:#14244A;             /* Azul profundo */
  --c-text:#1F1F1F;             /* Texto escuro */
  --c-muted:#555555;            /* Texto secundário */
  --c-border:#D8E0EE;           /* Borda suave */
  --c-success:#25d366;          /* Verde do WhatsApp */
  --font-heading:'Playfair Display',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --sh-sm:0 2px 8px rgba(57,90,153,.08);
  --sh-md:0 4px 24px rgba(57,90,153,.12);
  --sh-lg:0 8px 40px rgba(57,90,153,.16);
  --trans:.28s cubic-bezier(0.25, 0.8, 0.25, 1);
  --w-max:1280px;
  --pad:clamp(1rem,4vw,2rem)
}

/* === TYPOGRAPHY =========================================================  */
h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:700;line-height:1.2;color:var(--c-primary)}
h1{font-size:clamp(1.8rem,4vw,2.8rem)}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:clamp(1.1rem,2vw,1.5rem)}
h4{font-size:1.1rem}
p{color:var(--c-text);line-height:1.7}
.section-label{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent);display:block;margin-bottom:.5rem}
.section-title{font-family:var(--font-heading);font-size:clamp(1.4rem,3vw,2rem);color:var(--c-primary);margin-bottom:.75rem}
.section-desc{font-size:1rem;color:var(--c-muted);max-width:56ch;margin:0 auto}

/* === LAYOUT ============================================================== */
.container{width:100%;max-width:var(--w-max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3rem,8vw,5rem)}
.section--alt{background:var(--c-beige)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1.5rem}
@media(max-width:600px){.grid-4{grid-template-columns:1fr 1fr;gap:1rem}}
.text-center{text-align:center}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}

/* === BUTTONS ============================================================= */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.75rem;border-radius:var(--r-sm);font-weight:600;font-size:.95rem;transition:var(--trans);white-space:nowrap}
.btn-primary{background:var(--c-accent);color:#fff}
.btn-primary:hover{background:var(--c-accent-hover);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-outline{border:2px solid var(--c-accent);color:var(--c-accent)}
.btn-outline:hover{background:var(--c-accent);color:#fff}
.btn-white{background:#fff;color:var(--c-primary)}
.btn-white:hover{background:var(--c-beige);transform:translateY(-1px)}
.btn-whatsapp{background:#25d366;color:#fff}
.btn-whatsapp:hover{background:#1da851;transform:translateY(-1px);box-shadow:0 4px 20px rgba(37,211,102,.35)}
.btn-lg{padding:1rem 2.25rem;font-size:1.05rem}

/* === NAV ================================================================= */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--c-border);transition:box-shadow var(--trans)}
.navbar.scrolled{box-shadow:var(--sh-md)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:110px;max-width:var(--w-max);margin-inline:auto;padding-inline:var(--pad)}
.nav-logo img{height:88px;width:auto;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--c-text);transition:color var(--trans)}
.nav-links a:hover,.nav-links a.active{color:var(--c-accent)}
.nav-cta, .nav-cta-d{display:flex;align-items:center;gap:0.75rem}
.btn-nav-orcamento {
  background: var(--c-accent);
  color: #FFFFFF;
  padding: 0.55rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: var(--trans);
}
.btn-nav-orcamento:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
}
.btn-nav-whats {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #25d366;
  color: #fff;
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: var(--trans);
}
.btn-nav-whats:hover {
  background: #1da851;
  transform: translateY(-1px);
}
.btn-nav-whats svg {
  fill: currentColor;
  flex-shrink: 0;
  transition: transform var(--trans);
}
.hamburger{display:none;flex-direction:column;gap:5px;padding:4px;cursor:pointer}
.hamburger span{display:block;width:24px;height:2px;background:var(--c-primary);transition:var(--trans);border-radius:2px}
.mobile-menu{display:none;position:fixed;top:110px;left:0;right:0;bottom:0;background:#fff;z-index:999;padding:2rem var(--pad);flex-direction:column;gap:1.5rem;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:1.1rem;font-weight:500;padding:.75rem 0;border-bottom:1px solid var(--c-border);color:var(--c-text)}
body.menu-open{overflow:hidden}

@media(max-width:900px){
  .nav-inner{height:80px !important}
  .mobile-menu{top:80px !important}
  .hero, .city-hero, .about-hero, .contact-hero{margin-top:80px !important}

  .nav-links{display:none}
  .nav-cta, .nav-cta-d{display:flex !important;gap:0.5rem}
  .btn-nav-orcamento{display:none !important}
  .btn-nav-whats{padding:0.45rem 0.75rem !important;font-size:0.8rem !important}
  .btn-nav-whats svg{width:15px !important;height:15px !important;margin-right:0 !important}
  .nav-logo img{height:60px !important;width:auto !important;object-fit:contain !important}
  .hamburger{display:flex}
}

@media(max-width:520px){
  .btn-nav-whats span{display:none !important}
  .btn-nav-whats{padding:0.45rem 0.55rem !important}
  .nav-logo img{height:54px !important;max-width:180px !important}
}

/* === HERO SLIDER ========================================================= */
.hero{margin-top:110px;position:relative;overflow:hidden;background:var(--c-beige)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero-slide.active{position:relative;opacity:1}
.hero-slide img{width:100%;aspect-ratio:16/5;object-fit:cover}
.hero-mobile{display:none}
.hero-desktop{display:block}
.hero-dots{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:10}
.hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer;transition:var(--trans)}
.hero-dot.active{background:#fff;width:24px;border-radius:4px}
@media(max-width:768px){.hero-desktop{display:none}.hero-mobile{display:block}.hero-slide img{aspect-ratio:3/4}}

/* === PRODUCT CARDS ======================================================= */
.product-card{background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);transition:transform var(--trans),box-shadow var(--trans);display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.product-card__img{overflow:hidden;aspect-ratio:4/3;background:var(--c-beige)}
.product-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.product-card:hover .product-card__img img{transform:scale(1.05)}
.product-card__body{padding:1.25rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.product-card__title{font-family:var(--font-heading);font-size:1.15rem;color:var(--c-primary)}
.product-card__desc{font-size:.9rem;color:var(--c-muted);flex:1}
.product-card__link{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--c-accent);margin-top:.5rem}
.product-card__link svg{width:14px;height:14px;transition:transform var(--trans)}
.product-card:hover .product-card__link svg{transform:translateX(3px)}

/* === FEATURES ============================================================ */
.feature-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;padding:1.5rem}
.feature-icon{width:64px;height:64px;border-radius:50%;background:var(--c-beige);display:flex;align-items:center;justify-content:center}
.feature-icon svg{width:28px;height:28px;color:var(--c-accent)}
.feature-title{font-family:var(--font-heading);font-size:1.1rem;color:var(--c-primary)}
.feature-text{font-size:.9rem;color:#1F1F1F}

/* === GALLERY GRID ======================================================== */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:.75rem}
.gallery-item{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1;background:var(--c-beige)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.gallery-item:hover img{transform:scale(1.06)}

/* === FAQ ================================================================= */
.faq-item{border-bottom:1px solid var(--c-border)}
.faq-question{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1.1rem 0;font-weight:600;font-size:1rem;color:var(--c-primary);text-align:left;gap:1rem}
.faq-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--c-beige);display:flex;align-items:center;justify-content:center;transition:var(--trans)}
.faq-item.open .faq-icon{background:var(--c-accent);transform:rotate(45deg)}
.faq-icon svg{width:10px;height:10px;color:var(--c-primary);transition:color var(--trans)}
.faq-item.open .faq-icon svg{color:#fff}
.faq-answer{display:none;padding-bottom:1.1rem;font-size:.95rem;color:#1F1F1F;line-height:1.7}
.faq-item.open .faq-answer{display:block}

/* === TESTIMONIALS ======================================================== */
.testimonial-card{background:#fff;border-radius:var(--r-md);padding:1.75rem;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:1rem}
.testimonial-stars{color:var(--c-primary-light);font-size:1rem;letter-spacing:2px}
.testimonial-text{font-size:.95rem;color:var(--c-text);font-style:italic;line-height:1.7}
.testimonial-author{display:flex;align-items:center;gap:.75rem}
.testimonial-avatar{width:44px;height:88px;border-radius:50%;background:var(--c-beige-dark);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:1.1rem;color:var(--c-primary);font-weight:700}
.testimonial-name{font-weight:600;font-size:.9rem;color:var(--c-primary)}
.testimonial-city{font-size:.8rem;color:var(--c-muted)}

/* === CTA BAND ============================================================ */
.cta-band{background:linear-gradient(135deg,var(--c-primary-light) 0%,var(--c-dark) 100%);padding:clamp(3rem,6vw,4.5rem) var(--pad);text-align:center}
.cta-band h2{color:#fff;font-family:var(--font-heading);font-size:clamp(1.5rem,3vw,2.2rem)}
.cta-band p{color:rgba(255,255,255,.82);max-width:50ch;margin:.75rem auto 2rem}

/* === WHATSAPP FLOAT ====================================================== */
.wa-float{position:fixed;bottom:1.5rem;right:1.5rem;z-index:900;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.45);transition:transform var(--trans);animation:wa-pulse 2.5s infinite}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:30px;height:30px;fill:#fff}
@keyframes wa-pulse{0%,100%{box-shadow:0 4px 16px rgba(37,211,102,.45)}50%{box-shadow:0 4px 28px rgba(37,211,102,.7)}}

/* === BREADCRUMB ========================================================== */
.breadcrumb{padding:.75rem 0;display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;font-size:.85rem;color:var(--c-muted)}
.breadcrumb a{color:var(--c-muted);transition:color var(--trans)}
.breadcrumb a:hover{color:var(--c-accent)}
.breadcrumb span{color:var(--c-muted)}

/* === PRODUCT PAGE BANNER ================================================= */
.cat-banner{position:relative;overflow:hidden;background:var(--c-primary)}
.cat-banner img{width:100%;max-height:380px;object-fit:cover;opacity:.75}
.cat-banner-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}
.cat-banner-text h1{color:#fff;font-size:clamp(1.8rem,5vw,3rem)}
.cat-banner-text p{color:rgba(255,255,255,.85);font-size:1rem;max-width:50ch;margin-top:.5rem}

/* === BENEFITS LIST ======================================================= */
.benefits-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem}
.benefit-item{display:flex;gap:1rem;padding:1.25rem;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.benefit-icon{flex-shrink:0;width:42px;height:42px;border-radius:var(--r-sm);background:var(--c-beige);display:flex;align-items:center;justify-content:center}
.benefit-icon svg{width:20px;height:20px;color:var(--c-accent)}
.benefit-text h4{font-size:.95rem;color:var(--c-primary);margin-bottom:.25rem}
.benefit-text p{font-size:.85rem;color:var(--c-muted);line-height:1.5}

/* === FOOTER ============================================================== */
footer{background:var(--c-dark);color:rgba(255,255,255,.75);font-size:.9rem}
.footer-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:2.5rem;padding-block:3rem}
.footer-brand img{height:40px;margin-bottom:1rem}
.footer-brand p{font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.6)}
.footer-col h4{font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:1rem}
.footer-col ul{display:flex;flex-direction:column;gap:.6rem}
.footer-col a{color:rgba(255,255,255,.6);transition:color var(--trans)}
.footer-col a:hover{color:var(--c-accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-block:.9rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.4)}

/* === CITY PAGE SPECIFIC ================================================== */
.city-hero{background:linear-gradient(135deg,var(--c-primary-light) 0%,var(--c-dark) 100%);padding:clamp(4rem,10vw,6rem) var(--pad);text-align:center;margin-top:110px}
.city-hero h1{color:#fff;font-size:clamp(1.8rem,4.5vw,2.8rem)}
.city-hero p{color:rgba(255,255,255,.82);max-width:55ch;margin:.75rem auto 2rem;font-size:1.05rem}
.city-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.5rem}
.city-links a{font-size:.8rem;padding:.35rem .85rem;border:1px solid rgba(255,255,255,.3);border-radius:99px;color:rgba(255,255,255,.7);transition:var(--trans)}
.city-links a:hover{border-color:#fff;color:#fff}

/* === ABOUT PAGE ========================================================== */
.about-hero{background:var(--c-beige);padding:clamp(4rem,8vw,6rem) var(--pad);margin-top:110px;text-align:center}
.about-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:1.5rem;text-align:center}
.stat-item h3{font-size:2.2rem;color:var(--c-accent)}
.stat-item p{font-size:.9rem;color:var(--c-muted)}

/* === CONTACT ============================================================= */
.contact-hero{background:var(--c-beige);padding:clamp(3rem,8vw,5rem) var(--pad);margin-top:110px;text-align:center}
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.5rem}
.contact-card{background:#fff;border-radius:var(--r-md);padding:2rem 1.5rem;text-align:center;box-shadow:var(--sh-sm)}
.contact-card .ci{width:52px;height:52px;border-radius:50%;background:var(--c-beige);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.contact-card .ci svg{width:24px;height:24px;color:var(--c-accent)}
.contact-card h4{color:var(--c-primary);margin-bottom:.5rem}
.contact-card p,.contact-card a{color:var(--c-muted);font-size:.9rem}

/* === ANIMATIONS ========================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* === SCROLLBAR =========================================================== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--c-beige)}
::-webkit-scrollbar-thumb{background:var(--c-accent);border-radius:3px}

/* === UTILS =============================================================== */
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}
.mt-auto{margin-top:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* === ATUACAO SECTION (5-CARDS GRID) ======================================= */
.atuacao-section {
  background-color: var(--c-beige);
  padding-block: clamp(3rem, 8vw, 5rem);
}
.atuacao-section .section-label {
  color: var(--c-primary-light);
  text-align: center;
}
.atuacao-section .section-title {
  color: var(--c-primary);
  text-align: center;
}
.atuacao-section .section-desc {
  text-align: center;
  color: var(--c-muted);
}
.atuacao-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 2.5rem auto 0;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.atuacao-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(57, 90, 153, 0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-decoration: none !important;
}
.atuacao-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(57, 90, 153, 0.12);
  border-color: var(--c-primary-light);
}
.atuacao-card__header {
  background-color: #FFFFFF;
  padding: 1.5rem 1rem 0.5rem;
  text-align: center;
  transition: background-color 0.3s ease;
  border-bottom: none;
}
.atuacao-card__header h3 {
  color: var(--c-primary);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}
.atuacao-card__header p {
  color: var(--c-primary-light);
  font-size: 0.75rem;
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.atuacao-card__body {
  padding: 1rem 1.25rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
}
.atuacao-card__body p {
  font-size: 0.88rem;
  color: #1F1F1F;
  line-height: 1.6;
}
.atuacao-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-primary-light);
  margin-top: auto;
  transition: color 0.3s ease;
  position: relative;
}
.atuacao-card__link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--c-accent-hover);
  transition: width 0.3s ease;
}
.atuacao-card:hover .atuacao-card__link {
  color: var(--c-accent-hover);
}
.atuacao-card:hover .atuacao-card__link::after {
  width: 100%;
}
@media (max-width: 1200px) {
  .atuacao-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .atuacao-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 520px) {
  .atuacao-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .atuacao-card {
    width: 100%;
  }
}