/*
Theme Name: LeãoNobre - Lions Esquadrias
Theme URI: https://lionsesquadriasdealuminio.com.br
Author: LeãoNobre
Description: Tema WordPress para Lions Esquadrias de Alumínio, réplica do site original.
Version: 1.0
Text Domain: leaonobre
*/

:root{
  --color-bg: #0b0b0b;
  --color-bg-alt: #151515;
  --color-gold: #c9a14a;
  --color-gold-hover: #d8b768;
  --color-text: #ffffff;
  --color-text-muted: rgba(255,255,255,.68);
  --font-primary: 'Montserrat', sans-serif;
  --container-w: 1224px;
}

*{ box-sizing: border-box; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-primary); font-weight:600; line-height:1.3; margin:0; }
.container{ max-width: var(--container-w); margin:0 auto; padding:0 24px; }
.eyebrow{
  display:inline-block;
  font-size:14px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--color-gold);
  margin-bottom:16px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 40px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  border-radius:2px;
  transition: all .25s ease;
  cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{ background: var(--color-gold); color:#0b0b0b; }
.btn-primary:hover{ background: var(--color-gold-hover); }
.btn-outline{ border-color: rgba(255,255,255,.35); color:#fff; }
.btn-outline:hover{ border-color: var(--color-gold); color: var(--color-gold); }

/* Header */
.site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:50;
  padding:28px 0;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.site-header .logo img{ height:85px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:40px; }
.main-nav a{ font-size:16px; letter-spacing:.02em; font-weight:500; }
.main-nav a:not(.btn):hover{ color: var(--color-gold); }
.nav-toggle{ display:none; }
.mobile-nav-header{ display:none; }

/* Hero */
.hero{
  position:relative;
  min-height:760px;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,11,.55) 0%, rgba(11,11,11,.75) 60%, #0b0b0b 100%);
}
.hero .container{
  position:relative;
  z-index:2;
  padding-top:140px;
  padding-bottom:80px;
  max-width:1224px;
  width:100%;
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}
.hero h1{
  font-size:64px;
  max-width:820px;
  text-transform:uppercase;
  margin-bottom:24px;
}
.hero h1 .gold{ color: var(--color-gold); }
.hero p{
  font-size:18px;
  color: var(--color-text-muted);
  max-width:520px;
  margin-bottom:40px;
}
.hero .actions{ display:flex; gap:20px; flex-wrap:wrap; }

/* Feature strip */
.feature-strip{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.feature-strip .container{
  display:flex;
  justify-content:center;
  gap:24px;
  padding:32px 24px;
  max-width:1224px;
  margin:0 auto;
}
.feature-item:not(:first-child){
  border-left:1px solid rgba(255,255,255,.15);
  padding-left:24px;
}
.feature-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:left;
  font-size:14px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color: var(--color-text-muted);
  padding:8px;
}
.feature-item img{ width:32px; height:32px; flex-shrink:0; }
.feature-item strong{ color:#fff; font-weight:600; }

/* Section generic */
.section{ padding:75px 0; }
.section-head{ max-width:640px; margin:0 auto 64px; text-align:center; }
.section-head h2{ font-size:40px; text-transform:uppercase; }
.section-projects{ background: var(--color-bg-alt); }

/* Projects grid (home) */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.project-card{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  aspect-ratio:4/5;
}
.project-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.project-card:hover img{ transform:scale(1.06); }
.project-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,11,0) 40%, rgba(11,11,11,.9) 100%);
}
.project-card span{
  position:absolute; left:24px; bottom:24px; z-index:2;
  font-size:20px; font-weight:600; text-transform:uppercase;
}

/* Quem somos */
.about-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  height:440px;
  max-width:1224px;
  margin:0 auto;
}
.about-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  overflow:hidden;
  padding:32px max(24px, calc((100% - 1224px)/2 + 24px)) 32px 64px;
  align-items: flex-start;
}
.about-text h2{ font-size:30px; text-transform:none; margin-bottom:14px; max-width:480px; }
.about-text p{ color:var(--color-text-muted); margin-bottom:24px; font-size:15px; max-width:460px; }
.about-image{ width:100%; height:100%; overflow:hidden; }
.about-image img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 960px){
  .about-section{ grid-template-columns:1fr; height:auto; }
  .about-text{ height:auto; padding:48px 24px; order:2; }
  .about-image{ order:1; height:320px; }
}

/* Testimonials */
.testimonials{ background: var(--color-bg-alt); }
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.testimonial{
  background: var(--color-bg);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  padding:32px;
  display:flex;
  flex-direction:column;
  height:100%;
}
.testimonial .quote-icon{ width:28px; height:auto; margin-bottom:16px; opacity:.85; }
.testimonial p{ color:var(--color-text-muted); font-size:16px; margin-bottom:24px; }
.testimonial .person{ display:flex; align-items:center; gap:12px; margin-top:auto;}
.testimonial .avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.testimonial .author{ font-weight:600; text-transform:uppercase; font-size:14px; letter-spacing:.03em; }
.testimonial .location{ color: var(--color-gold); font-size:13px; margin-top:2px; }

/* CTA */
.cta{
  position:relative;
  padding:0;
  background: var(--color-bg);
  border-top:1px solid rgba(255,255,255,.08);
}
.cta .container{
  display:flex;
  align-items:center;
  gap:32px;
  text-align:left;
  padding-top:0;
  padding-bottom:0;
}
.cta .cta-photo{
  width:215px;
  height:204px;
  object-fit:cover;
  flex-shrink:0;
  display:none;
}
.cta .divider{
  width:1px;
  align-self:stretch;
  margin:32px 0;
  background: rgba(255,255,255,.15);
  flex-shrink:0;
  display:none;
}
.cta .cta-text{ flex:1; padding:40px 0; }
.cta .cta-text .eyebrow{ display:block; margin-bottom:8px; }
.cta h2{ font-size:24px; font-weight:600; text-transform:none; margin-bottom:8px; }
.cta p{ color:var(--color-text-muted); font-size:14px; margin:0; }
.cta .cta-action{ flex-shrink:0; padding:40px 0; text-align:center; }
.cta small{ display:block; margin-top:12px; color: var(--color-text-muted); font-size:12px; }
@media (min-width: 960px){
  .cta .cta-photo{ display:block; }
  .cta .divider{ display:block; }
}
@media (max-width: 959px){
  .cta .container{ flex-direction:column; align-items:stretch; text-align:center; padding:60px 24px; }
  .cta .cta-text{ padding:0 0 24px; }
  .cta .cta-action{ padding:0; }
}

/* Footer */
.site-footer{ padding:80px 0 32px; background: var(--color-bg-alt); }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:48px;
  margin-bottom:64px;
}
.footer-brand img{ height:70px; margin-bottom:16px; }
.footer-brand p{ color: var(--color-text-muted); font-size:14px; }
.footer-col h4{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--color-gold); margin-bottom:12px;
}
.footer-col p, .footer-col a{ color: var(--color-text-muted); font-size:15px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;
  font-size:13px;
  color: var(--color-text-muted);
  text-align:center;
}

/* Catálogo page */
.page-hero{
  padding:200px 0 90px;
  text-align:left;
  background-size:cover;
  background-position:center;
  position:relative;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,11,.6) 0%, rgba(11,11,11,.8) 60%, #0b0b0b 100%);
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero .eyebrow{ display:block; }
.page-hero h1{ font-size:48px; text-transform:uppercase; max-width:640px; margin:0 0 20px; }
.page-hero h1 .gold{ color: var(--color-gold); }
.page-hero p{ color: var(--color-text-muted); max-width:520px; margin:0 0 32px; }

.catalog-grid{ margin-bottom:64px; }

.catalog-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  border:1px solid var(--color-gold);
  border-radius:10px;
  overflow:hidden;
}
.catalog-intro .intro-text{ padding:48px; display:flex; flex-direction:column; justify-content:center; }
.catalog-intro .intro-icon{ width:36px; height:36px; margin-bottom:20px; }
.catalog-intro h2{ font-size:28px; text-transform:none; margin-bottom:16px; }
.catalog-intro p{ color:var(--color-text-muted); margin-bottom:24px; }
.catalog-intro .intro-image{ min-height:280px; }
.catalog-intro .intro-image img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; }
@media (max-width: 800px){
  .catalog-intro{ grid-template-columns:1fr; }
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.catalog-card{
  overflow:hidden;
}
.catalog-card .thumb{ aspect-ratio:4/3; overflow:hidden; border-radius:4px; }
.catalog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.catalog-card:hover .thumb img{ transform:scale(1.06); }
.catalog-card .body{ padding:20px 0 0; }
.catalog-card h3{ font-size:18px; font-weight:600; text-transform:none; margin-bottom:8px; }
.catalog-card p{ color:var(--color-text-muted); font-size:14px; margin-bottom:16px; }
.catalog-card .link{
  font-size:13px; letter-spacing:.05em; text-transform:uppercase; color: var(--color-gold);
  display:inline-flex; align-items:center; gap:8px;
  transition: gap .2s ease;
}
.catalog-card .link:hover{ gap:12px; }
.catalog-card .link img{ width:14px; height:auto; }

/* Responsive */
@media (max-width: 960px){
  .hero h1{ font-size:40px; }
  .feature-strip .container{ flex-direction:column; gap:16px; align-items:center; }
  .feature-item{ justify-content:center; border-left:none !important; padding-left:0; text-align:left; }
  .feature-item:not(:first-child){ padding-left:0; }
  .projects-grid, .testimonials-grid, .catalog-grid{ grid-template-columns:1fr; }
  .about, .catalog-intro{ grid-template-columns:1fr; gap:32px; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .section{ padding:72px 0; }
  .main-nav{
  position:fixed;
  top:16px; right:16px; left:16px;
  bottom:auto;
  width:auto;
  height:auto;
  max-height:calc(100vh - 32px);
  background:#0b0b0b;
  border-radius:16px;
  flex-direction:column;
  align-items:center;
  padding:24px;
  gap:28px;
  transform:translateX(120%);
  transition:transform .3s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.main-nav.open{ transform:translateX(0); }
.mobile-nav-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.mobile-nav-header img{ height:70px; width:auto; }
.nav-close{ background:none; border:none; color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.main-nav a{ text-align:center; }
  .nav-toggle{ display:block; background:none; border:none; color:#fff; font-size:28px; cursor:pointer; }
}

.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:60px;
  height:60px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  z-index:999;
  transition:transform .2s ease;
}
.whatsapp-float:hover{
  transform:scale(1.08);
  color:#fff;
}
@media (max-width:600px){
  .whatsapp-float{ width:52px; height:52px; right:16px; bottom:16px; }
}