/*
Theme Name: Ferreira Couto Advocacia
Theme URI: https://ferreiracouto.com
Author: Ferreira Couto Advocacia
Author URI: https://ferreiracouto.com
Description: Tema institucional do escritório Ferreira Couto Advocacia - Especialista em Direito de Trânsito
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ferreira-couto
*/

/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

::selection{background:#2A2A2A;color:#FFF}
::-moz-selection{background:#2A2A2A;color:#FFF}

:root{
  --background: #ffffff;
  --foreground: #0d0d0d;
  --card: #ffffff;
  --card-foreground: #0d0d0d;
  --muted: #f5f5f5;
  --muted-foreground: #666666;
  --accent: hsl(1,72%,50%);
  --accent-hover: hsl(356,77%,56%);
  --accent-foreground: #ffffff;
  --border: #e5e5e5;
  --surface-dark: #0d0d0d;
  --surface-dark-foreground: #ffffff;
  --surface-dark-muted: #b3b3b3;
  --radius: 0.375rem;
  --shadow-card: 0 4px 24px -4px rgba(0,0,0,0.08);
  --shadow-elevated: 0 12px 40px -8px rgba(0,0,0,0.15);
  --gradient-accent: linear-gradient(135deg, hsl(1,72%,50%), hsl(356,77%,56%));
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--background);
  color:var(--foreground);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit}

/* ===== UTILITIES ===== */
.container{width:100%;max-width:1400px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 2rem}}

.text-gradient-accent{
  background:var(--gradient-accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.bg-surface-dark{background:var(--surface-dark);color:var(--surface-dark-foreground)}
.bg-background{background:var(--background);color:var(--foreground)}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4{font-family:'Inter',sans-serif;font-weight:700;line-height:1.2}
.font-display{font-family:'Inter',sans-serif}
.font-body{font-family:'Inter',sans-serif}

/* ===== HEADER ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:var(--surface-dark);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:0.75rem;padding-bottom:0.75rem;
}
@media(min-width:1024px){
  .site-header .container{padding-top:1rem;padding-bottom:1rem}
}
.site-header .logo img{
  height:2rem;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);
}
@media(min-width:640px){.site-header .logo img{height:2.5rem}}
@media(min-width:1024px){.site-header .logo img{height:3rem}}

.site-header nav{display:flex;align-items:center;gap:1rem}
@media(min-width:640px){.site-header nav{gap:1.5rem}}
@media(min-width:1024px){.site-header nav{gap:2.5rem}}
.site-header nav a{
  font-size:11px;font-weight:500;
  color:var(--surface-dark-foreground);
  letter-spacing:0.05em;white-space:nowrap;
  transition:color 0.2s;
}
@media(min-width:640px){.site-header nav a{font-size:0.875rem}}
@media(min-width:1024px){.site-header nav a{font-size:1rem}}
.site-header nav a:hover{color:var(--surface-dark-muted)}

/* ===== HERO ===== */
.hero-section{
  background:var(--surface-dark);min-height:100vh;
  display:flex;align-items:center;padding-top:3.5rem;
}
@media(min-width:1024px){.hero-section{padding-top:4rem}}
.hero-section .container{padding-top:2rem;padding-bottom:2rem}
@media(min-width:1024px){.hero-section .container{padding-top:3rem;padding-bottom:3rem}}
.hero-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;gap:4rem}}

.hero-badge{
  display:inline-block;
  background:hsla(1,72%,50%,0.15);
  color:var(--accent);
  font-size:0.875rem;font-weight:600;
  padding:0.375rem 1rem;border-radius:9999px;margin-bottom:1.5rem;
}
.hero-title{
  font-size:2.25rem;font-weight:700;
  color:var(--surface-dark-foreground);
  line-height:1.1;margin-bottom:1.5rem;
}
@media(min-width:768px){.hero-title{font-size:3rem}}
@media(min-width:1024px){.hero-title{font-size:3.75rem}}
.hero-subtitle{font-size:1.125rem;color:var(--surface-dark-muted);margin-bottom:1rem;max-width:32rem}
.hero-proofs{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:1.5rem}
.hero-proof{display:flex;align-items:center;gap:0.5rem;color:var(--surface-dark-muted);font-size:0.875rem}
.hero-proof svg{width:1rem;height:1rem;color:var(--accent);flex-shrink:0}
.hero-cta{margin-top:2rem}
.hero-urgency{font-size:0.875rem;color:var(--surface-dark-muted);margin-top:0.75rem;max-width:32rem}

.hero-image-wrapper{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-elevated)}
.hero-image-wrapper img{width:100%;height:500px;object-fit:cover}
@media(min-width:1024px){.hero-image-wrapper img{height:600px}}
.hero-image-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,13,0.6),transparent)}
.hero-image-card{
  position:absolute;bottom:1.5rem;left:1.5rem;right:1.5rem;
  background:rgba(13,13,13,0.8);backdrop-filter:blur(8px);
  border-radius:calc(var(--radius) - 2px);padding:1rem;
  border:1px solid rgba(255,255,255,0.1);
}
.hero-image-card h3{color:var(--accent);font-size:1.5rem;font-weight:700}
.hero-image-card p{color:var(--surface-dark-muted);font-size:0.875rem;margin-top:0.25rem}

/* ===== INSTITUTIONAL / SOBRE ===== */
.institutional-section{background:var(--background);padding:3.5rem 0}
@media(min-width:1024px){.institutional-section{padding:4.5rem 0}}
.institutional-section .max-w-6xl{max-width:72rem;margin:0 auto}
.institutional-logo{display:flex;justify-content:center;margin-bottom:2rem}
.institutional-logo img{height:66px;width:auto;object-fit:contain}
.institutional-grid{display:grid;gap:2rem;align-items:stretch}
@media(min-width:1024px){.institutional-grid{grid-template-columns:1fr 1fr;gap:3rem}}
.structure-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.structure-grid img{aspect-ratio:1;border-radius:var(--radius);object-fit:cover;width:100%}
.institutional-text{font-size:1rem;color:var(--muted-foreground);line-height:1.8;text-align:justify;margin-bottom:1.25rem}
.authority-grid{display:grid;gap:0.375rem;margin-bottom:1.25rem}
@media(min-width:640px){.authority-grid{grid-template-columns:1fr 1fr}}
.authority-item{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--foreground)}
.authority-item svg{width:1rem;height:1rem;color:var(--accent);flex-shrink:0}
.director-card{display:flex;align-items:center;gap:1rem;padding-top:1rem}
.director-card img{width:6rem;height:8rem;flex-shrink:0;border-radius:var(--radius);object-fit:cover;object-position:top}
.director-label{font-size:11px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.25rem}
.director-name{font-size:1rem;font-weight:700;color:var(--foreground);line-height:1.2}
.director-role{font-size:0.875rem;color:var(--muted-foreground);margin-top:0.125rem}
.director-email{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.75rem;color:var(--muted-foreground);margin-top:0.375rem}
.director-email svg{width:0.75rem;height:0.75rem}

/* ===== PAIN SECTION ===== */
.pain-section{padding:5rem 0;background:var(--background)}
.section-header{text-align:center;margin-bottom:4rem}
.section-header h2{font-size:1.875rem;font-weight:700;color:var(--foreground);margin-bottom:1rem}
@media(min-width:768px){.section-header h2{font-size:2.25rem}}
.section-header h2 span{color:var(--accent)}
.section-header p{color:var(--muted-foreground);max-width:42rem;margin:0 auto;font-size:1.125rem}
.pain-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.pain-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.pain-grid{grid-template-columns:repeat(4,1fr)}}
.pain-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.5rem;
  box-shadow:var(--shadow-card);transition:box-shadow 0.3s;
}
.pain-card:hover{box-shadow:var(--shadow-elevated)}
.pain-icon{
  width:3rem;height:3rem;border-radius:calc(var(--radius) - 2px);
  background:hsla(1,72%,50%,0.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.pain-icon svg{width:1.5rem;height:1.5rem;color:var(--accent)}
.pain-card h3{font-size:1.25rem;font-weight:600;color:var(--card-foreground);margin-bottom:0.5rem}
.pain-card p{font-size:0.875rem;color:var(--muted-foreground)}

/* ===== HOW IT WORKS ===== */
.how-section{padding:4rem 0;background:var(--surface-dark);color:var(--surface-dark-foreground)}
@media(min-width:1024px){.how-section{padding:5rem 0}}
.how-section .section-header h2{color:var(--surface-dark-foreground)}
.how-section .section-header p{color:var(--surface-dark-muted)}
.steps-grid{display:grid;gap:2rem}
@media(min-width:768px){.steps-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.steps-grid{grid-template-columns:repeat(4,1fr)}}
.step-card{text-align:center}
.step-icon{
  width:4rem;height:4rem;border-radius:9999px;
  background:hsla(1,72%,50%,0.15);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;transition:all 0.3s;
}
.step-card:hover .step-icon{box-shadow:0 0 20px hsla(1,72%,50%,0.3);transform:scale(1.1)}
.step-icon svg{width:1.75rem;height:1.75rem;color:var(--accent)}
.step-label{color:var(--accent);font-weight:700;font-size:0.875rem;letter-spacing:0.1em}
.step-card h3{font-size:1.25rem;font-weight:600;color:var(--surface-dark-foreground);margin:0.5rem 0}
.step-card p{font-size:0.875rem;color:var(--surface-dark-muted)}

/* ===== SERVICES ===== */
.services-section{padding:5rem 0;background:var(--background)}
@media(min-width:1024px){.services-section{padding:7rem 0}}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(min-width:768px){.services-grid{grid-template-columns:repeat(4,1fr)}}
.service-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.25rem;text-align:center;
  box-shadow:var(--shadow-card);transition:border-color 0.3s;
}
.service-card:hover{border-color:hsla(1,72%,50%,0.4)}
.service-card svg{width:2rem;height:2rem;color:var(--accent);margin:0 auto 0.75rem}
.service-card p{font-weight:500;color:var(--card-foreground);font-size:0.875rem}

/* ===== BENEFITS ===== */
.benefits-section{padding:4rem 0;background:var(--surface-dark)}
@media(min-width:1024px){.benefits-section{padding:5rem 0}}
.benefits-section .section-header h2{color:var(--surface-dark-foreground)}
.benefits-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.benefits-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.benefits-grid{grid-template-columns:repeat(5,1fr)}}
.benefit-card{text-align:center}
.benefit-icon{
  width:3.5rem;height:3.5rem;border-radius:9999px;
  background:hsla(1,72%,50%,0.15);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;
}
.benefit-icon svg{width:1.5rem;height:1.5rem;color:var(--accent)}
.benefit-card h3{font-size:1.125rem;font-weight:600;color:var(--surface-dark-foreground);margin-bottom:0.25rem}
.benefit-card p{font-size:0.875rem;color:var(--surface-dark-muted)}

/* ===== TESTIMONIALS ===== */
.testimonials-section{
  padding:3rem 0 2rem;
  background:var(--surface-dark);
  overflow:hidden;
}
@media(min-width:1024px){
  .testimonials-section{padding:4rem 0 2.5rem}
}
.testimonials-section .section-header{
  margin-bottom:2rem;
  text-align:center;
}
.testimonials-section .section-header h2{
  color:var(--surface-dark-foreground);
}
.testimonials-section .section-header p{
  color:var(--surface-dark-muted);
}

.testimonials-slider{
  position:relative;
  width:100%;
  padding:0 2.5rem;
}
@media(max-width:767px){
  .testimonials-slider{
    padding:0;
  }
}

.testimonials-viewport{
  overflow:hidden;
  width:100%;
}

.testimonials-track{
  display:flex;
  align-items:center;
  gap:0;
  will-change:transform;
  transition:transform 0.4s ease;
}

.testimonial-slide{
  flex:0 0 33.333333%;
  min-width:33.333333%;
  padding:0 0.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media(max-width:991px){
  .testimonial-slide{
    flex:0 0 50%;
    min-width:50%;
  }
}
@media(max-width:767px){
  .testimonial-slide{
    flex:0 0 100%;
    min-width:100%;
    padding:0;
  }
}

.testimonial-card{
  overflow:hidden;
  border-radius:0.75rem;
  box-shadow:var(--shadow-elevated);
  border:1px solid rgba(255,255,255,0.1);
  background:transparent;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.testimonial-card img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.testimonials-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:2.5rem;
  height:2.5rem;
  border-radius:9999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  transition:all 0.2s ease;
  backdrop-filter:blur(6px);
}
.testimonials-nav:hover{
  background:rgba(255,255,255,0.22);
}
.testimonials-nav.prev{left:0}
.testimonials-nav.next{right:0}

@media(max-width:767px){
  .testimonials-nav{
    display:flex;
    width:2.75rem;
    height:2.75rem;
    font-size:1.25rem;
  }
  .testimonials-nav.prev{left:0.25rem}
  .testimonials-nav.next{right:0.25rem}
}

/* ===== FAQ ===== */
.faq-section{padding:4rem 0;background:var(--surface-dark)}
@media(min-width:1024px){.faq-section{padding:5rem 0}}
.faq-section .section-header h2{color:var(--surface-dark-foreground)}
.faq-list{max-width:48rem;margin:0 auto;display:flex;flex-direction:column;gap:0.75rem}
.faq-item{border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius);overflow:hidden}
.faq-question{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem;text-align:left;font-weight:500;
  color:var(--surface-dark-foreground);transition:background 0.2s;
}
.faq-question:hover{background:rgba(179,179,179,0.1)}
.faq-question svg{width:1.25rem;height:1.25rem;color:var(--accent);flex-shrink:0;margin-left:1rem;transition:transform 0.3s}
.faq-item.open .faq-question svg{transform:rotate(180deg)}
.faq-answer{padding:0 1.25rem 1.25rem;font-size:0.875rem;color:var(--surface-dark-muted);line-height:1.7;display:none}
.faq-item.open .faq-answer{display:block}

/* ===== CTA ===== */
.cta-section{padding:5rem 0;background:var(--background)}
@media(min-width:1024px){.cta-section{padding:7rem 0}}
.cta-content{text-align:center;max-width:42rem;margin:0 auto}
.cta-content h2{font-size:1.875rem;font-weight:700;color:var(--foreground);margin-bottom:1rem}
@media(min-width:768px){.cta-content h2{font-size:2.25rem}}
.cta-content h2 span{color:var(--accent)}
.cta-content>p{color:var(--muted-foreground);font-size:1.125rem;margin-bottom:0.75rem}
.cta-sub{color:var(--muted-foreground);margin-bottom:2.5rem}
.cta-sub p{margin:0.25rem 0}
.cta-checks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0.75rem;margin-top:0.75rem}
.cta-check{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.875rem;color:var(--muted-foreground)}
.cta-check svg{width:1rem;height:1rem;color:var(--accent)}
.cta-email{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.875rem;color:var(--muted-foreground);margin-top:1rem;transition:color 0.2s}
.cta-email:hover{color:var(--foreground)}
.cta-email svg{width:1rem;height:1rem}

/* ===== WHATSAPP BUTTON ===== */
.btn-whatsapp{
  display:inline-flex;align-items:center;gap:0.75rem;
  background:var(--accent);color:var(--accent-foreground);
  font-weight:600;font-size:1.125rem;
  padding:1rem 2rem;border-radius:calc(var(--radius) - 2px);
  box-shadow:var(--shadow-elevated);
  transition:all 0.3s;
}
.btn-whatsapp:hover{background:var(--accent-hover);transform:scale(1.02)}
.btn-whatsapp svg{width:1.75rem;height:1.75rem;min-width:28px;fill:currentColor}

.whatsapp-fixed{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;
  background:var(--accent);color:var(--accent-foreground);
  width:3.5rem;height:3.5rem;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-elevated);transition:all 0.3s;
  opacity:0;pointer-events:none;transform:translateY(0.75rem);
}
.whatsapp-fixed.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.whatsapp-fixed:hover{background:var(--accent-hover);transform:scale(1.1)}
.whatsapp-fixed svg{width:28px;height:28px;fill:currentColor}

/* ===== FOOTER ===== */
.site-footer{
  background:var(--surface-dark);color:var(--surface-dark-foreground);
  border-top:1px solid rgba(255,255,255,0.1);
  padding:0.75rem 0 1.5rem;
}
@media(min-width:640px){.site-footer{padding-bottom:0.75rem}}
@media(min-width:1024px){.site-footer{padding:1rem 0}}
.site-footer .container{text-align:center}
.site-footer p{font-size:11px;line-height:1.4;max-width:36rem;margin:0.25rem auto;color:rgba(179,179,179,0.6)}
.site-footer .footer-links{color:rgba(179,179,179,0.4)}
.site-footer .footer-copy{color:rgba(179,179,179,0.4)}

/* ===== ANIMATIONS ===== */
.animate-in,
.animate-left,
.animate-right{
  opacity:0;
  transform:translate3d(0,0,0);
}