/* ==========================================================================
COMPONENTS.CSS
========================================================================== */

/* ==========================================================================
BOTÃO PRINCIPAL
========================================================================== */

.btn-primary {

display: inline-flex;

align-items: center;
justify-content: center;

min-height: 58px;

padding:
1rem
2rem;

border-radius:
999px;

background:
var(--color-primary);

color:
var(--color-white);

font-weight:
600;

box-shadow:
var(--shadow-md);

transition:
var(--transition);
}

.btn-primary:hover {

background:
var(--color-primary-dark);

transform:
translateY(-2px);
}

/* ==========================================================================
BADGE
========================================================================== */

.hero-badge {

display: inline-flex;

align-items: center;

padding:
.75rem
1rem;

border-radius:
999px;

background:
var(--color-secondary);

color:
var(--color-primary-dark);

font-size:
.9rem;

font-weight:
600;

margin-bottom:
1rem;
}

/* ==========================================================================
CARDS
========================================================================== */

.card {

background:
var(--color-white);

padding:
2rem;

border-radius:
var(--radius-lg);

box-shadow:
var(--shadow-sm);

transition:
var(--transition);
}

.card:hover {

transform:
translateY(-4px);

box-shadow:
var(--shadow-md);
}

.card h3 {

margin-bottom:
.75rem;
}

/* ==========================================================================
ESCASSEZ
========================================================================== */

.availability .container {

background:
linear-gradient(
135deg,
#ffffff,
#f3f9ff
);

padding:
2rem;

border-radius:
var(--radius-xl);

border:
1px solid rgba(45,140,255,.15);

box-shadow:
var(--shadow-sm);
}

/* ==========================================================================
DOR
========================================================================== */

.pain-points li {

background:
var(--color-white);

padding:
1rem 1.25rem;

border-radius:
var(--radius-md);

border-left:
4px solid
var(--color-primary);

box-shadow:
var(--shadow-sm);
}

/* ==========================================================================
BENEFÍCIOS
========================================================================== */

.benefits li {

position:
relative;

background:
var(--color-white);

padding:
1rem 1.25rem 1rem 3rem;

border-radius:
var(--radius-md);

box-shadow:
var(--shadow-sm);
}

.benefits li::before {

content:
"✓";

position:
absolute;

left:
1rem;

color:
var(--color-success);

font-weight:
700;
}

/* ==========================================================================
SOBRE
========================================================================== */

.about-photo img {

width:
100%;

border-radius:
var(--radius-xl);

box-shadow:
var(--shadow-lg);
}

.about-content {

background:
var(--color-white);

padding:
2rem;

border-radius:
var(--radius-xl);

box-shadow:
var(--shadow-sm);
}

.about-content p + p {

margin-top:
1rem;
}

/* ==========================================================================
FAQ
========================================================================== */

.faq details {

background:
var(--color-white);

border-radius:
var(--radius-md);

box-shadow:
var(--shadow-sm);

overflow:
hidden;

margin-bottom:
1rem;
}

.faq summary {

cursor:
pointer;

padding:
1.25rem;

font-weight:
600;

list-style:
none;

position:
relative;

padding-right:
3rem;
}

.faq summary::-webkit-details-marker {

display:
none;
}

.faq summary::after {

content:
"+";

position:
absolute;

right:
1.25rem;

top:
50%;

transform:
translateY(-50%);

font-size:
1.5rem;
}

.faq details[open] summary::after {

content:
"−";
}

.faq details p {

padding:
0 1.25rem 1.25rem;
}

/* ==========================================================================
CTA FINAL
========================================================================== */

.cta-final .container {

text-align:
center;

background:
linear-gradient(
135deg,
var(--color-primary),
var(--color-primary-dark)
);

color:
white;

padding:
3rem 2rem;

border-radius:
var(--radius-xl);
}

.cta-final h2 {

color:
white;

margin-bottom:
1rem;
}

.cta-final p {

color:
rgba(255,255,255,.9);

margin-bottom:
1.5rem;
}

/* ==========================================================================
WHATSAPP FLOAT
========================================================================== */

.whatsapp-float {

position:
fixed;

right:
1rem;

bottom:
1rem;

width:
64px;

height:
64px;

border-radius:
50%;

background:
#25D366;

display:
flex;

align-items:
center;

justify-content:
center;

box-shadow:
var(--shadow-lg);

z-index:
999;

transition:
var(--transition);
}

.whatsapp-float:hover {

transform:
scale(1.08);
}

.whatsapp-float img {

width:
30px;

height:
30px;
}

/* ==========================================================================
CTA FIXO MOBILE
========================================================================== */

.mobile-cta {

position:
fixed;

left:
0;

bottom:
0;

width:
100%;

padding:
.5rem .75rem;

background:
rgba(255,255,255,.96);

backdrop-filter:
blur(8px);

-webkit-backdrop-filter:
blur(8px);

border-top:
1px solid
rgba(0,0,0,.08);

z-index:
998;
}

.mobile-cta-button {

display:
flex;

justify-content:
center;

align-items:
center;

min-height:
46px;

border-radius:
999px;

background:
var(--color-primary);

color:
white;

font-weight:
600;
}

/* ==========================================================================
LOCAIS DE ATENDIMENTO
========================================================================== */

.section-intro {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: 3rem;
  text-align: center;
}

.section-intro p {
  font-size: 1.05rem;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  font-size: .9rem;
  font-weight: 600;
}

.locations-grid {
  display: grid;
  gap: 1.5rem;
}

.location-card {
  background: var(--color-white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(45, 140, 255, .12);
}

.location-card--featured {
  border-color: rgba(45, 140, 255, .35);
  box-shadow: var(--shadow-md);
}

.location-card h3 {
  margin-bottom: .75rem;
  color: var(--color-primary-dark);
}

.location-card__info {
  margin-bottom: 1.25rem;
}

.location-card__list {
  display: grid;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.location-card__list li {
  color: var(--color-text-light);
}

.location-card__list strong {
  color: var(--color-text);
}

@media (min-width: 900px) {
  .locations-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {

.mobile-cta {

display:
  none;

}
}