/* =====================================================
PARKINSON CARE
site.css
===================================================== */


/* =====================================================
VARIÁVEIS
===================================================== */

:root{
  --brand:#0f766e;
  --brand-2:#115e59;

  --bg:#ffffff;
  --text:#0b0f14;
  --muted:#5f6b7a;
  --surface:#f5f7f9;

  --radius:14px;
  --shadow:0 10px 30px rgba(2,6,23,.10);

  --max:1100px;
}

@media (prefers-color-scheme: dark){

:root{
  --bg:#0b0f14;
  --text:#e8eef6;
  --muted:#94a3b8;
  --surface:#0f172a;
}

}


/* =====================================================
RESET
===================================================== */

*{
box-sizing:border-box
}

html,body{
margin:0
}

html{
scroll-behavior:smooth
}

body{

background:var(--bg);
color:var(--text);

font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;

text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;

}

img{
max-width:100%;
height:auto;
display:block
}

a{
color:var(--brand);
text-decoration:none
}

a:hover{
text-decoration:underline
}

h1,h2,h3{
line-height:1.25;
margin:.5rem 0
}

p{
margin:.6rem 0
}


/* =====================================================
TIPOGRAFIA
===================================================== */

.small{
font-size:.92rem
}

.fine{
font-size:.85rem
}

.muted{
color:var(--muted)
}

.title{
font-size:clamp(1.7rem,2.8vw,2.4rem)
}

.lead{
color:var(--muted)
}

.tag{
display:inline-flex;
gap:.5rem;
align-items:center;

padding:.25rem .6rem;

border-radius:999px;
background:var(--surface);

font-weight:700;
font-size:.8rem
}


/* =====================================================
LAYOUT
===================================================== */

.container{
max-width:var(--max);
margin-inline:auto;
padding:0 1rem
}

.section{
padding:2.5rem 0
}

.grid{
display:grid;
gap:1rem
}

.grid-2{
grid-template-columns:repeat(2,1fr)
}

.grid-3{
grid-template-columns:repeat(3,1fr)
}

@media (max-width:900px){

.grid-2,
.grid-3{
grid-template-columns:1fr
}

}


/* =====================================================
HEADER
===================================================== */

header{

position:sticky;
top:0;

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

backdrop-filter:saturate(180%) blur(10px);

z-index:50;

border-bottom:1px solid rgba(0,0,0,.06);

}

.navwrap{

display:flex;
align-items:center;
justify-content:space-between;

padding:1rem 0;

}

/* LOGO */

.brand{
display:flex;
align-items:center;
gap:.6rem;
font-weight:800
}

.brand img{

height:70px;
width:auto;

}

/* mobile */

@media (max-width:768px){

.brand img{
height:50px
}

}


/* =====================================================
MENU
===================================================== */

nav{

display:flex;
align-items:center;
gap:.25rem;
flex-wrap:wrap

}

nav a{

display:block;

padding:.55rem .9rem;

border-radius:999px;

font-weight:600;

color:var(--text)

}

nav a:hover,
nav a[aria-current="page"]{

background:var(--surface);
text-decoration:none

}


/* =====================================================
MENU MOBILE
===================================================== */

details.menu{
display:none
}

@media (max-width:860px){

nav{
display:none
}

details.menu{
display:block
}

details.menu summary{

list-style:none;
cursor:pointer;

padding:.5rem .8rem;

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

background:var(--surface);

font-weight:600

}

details[open] .sheet{

position:absolute;

left:1rem;
right:1rem;
top:60px;

background:var(--bg);

border:1px solid rgba(0,0,0,.06);
border-radius:var(--radius);

box-shadow:var(--shadow);

padding:.5rem;

z-index:60

}

.sheet a{

display:block;

padding:.7rem .9rem;

border-radius:.75rem

}

.sheet a:hover{

background:var(--surface)

}

}


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

.card{

background:var(--surface);

border-radius:var(--radius);

padding:1rem;

box-shadow:var(--shadow)

}


/* =====================================================
BOTÕES
===================================================== */

.btn{

display:inline-flex;
align-items:center;
gap:.6rem;

padding:.75rem 1rem;

border-radius:12px;

border:0;

background:var(--brand);
color:#fff;

font-weight:700;

box-shadow:var(--shadow)

}

.btn:hover{
filter:brightness(.96)
}

.btn.secondary{
background:var(--brand-2)
}

.btn.ghost{

background:transparent;

color:var(--brand);

border:1px solid var(--brand)

}


/* =====================================================
HERO
===================================================== */

.hero{
padding:2rem 0 1rem
}


/* =====================================================
MAPA
===================================================== */

.mapcard{

padding:0;
overflow:hidden;

border-radius:12px

}

.mapcard iframe{

width:100%;
height:280px;
border:0

}


/* =====================================================
FOOTER
===================================================== */

footer{

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

color:var(--muted);

margin-top:2rem

}

.footwrap{
padding:1.5rem 0
}

.footgrid{

display:grid;

gap:1rem;

grid-template-columns:repeat(3,1fr)

}

@media (max-width:900px){

.footgrid{
grid-template-columns:1fr
}

}

.foot-bottom{

display:flex;

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

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

padding-top:.75rem;
margin-top:1rem

}


/* =====================================================
CAROUSEL HERO
===================================================== */

.hero-carousel{

position:relative;

overflow:hidden;

border-radius:18px;

margin:1.5rem 0 2.5rem;

box-shadow:0 20px 50px rgba(0,0,0,.12)

}

.hero-track{

display:flex;

transition:transform .6s ease

}

.hero-slide{

min-width:100%;

position:relative

}

.hero-slide img{

width:100%;

height:clamp(320px,60vh,600px);

object-fit:cover

}

.hero-overlay{

position:absolute;

inset:0;

background:linear-gradient(to right,rgba(0,0,0,.65),rgba(0,0,0,.2));

color:#fff;

display:flex;

flex-direction:column;

justify-content:center;

padding:clamp(1rem,5vw,4rem);

max-width:650px

}

.hero-overlay h1{

font-size:clamp(1.6rem,3vw,2.8rem);

margin-bottom:.6rem

}

.hero-overlay p{

margin-bottom:1.2rem;

font-size:1.05rem

}


/* BOTÕES */

.hero-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

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

backdrop-filter:blur(6px);

border:none;

color:#fff;

font-size:1.8rem;

padding:.4rem .8rem;

cursor:pointer;

border-radius:8px;

z-index:5

}

.hero-btn.prev{
left:15px
}

.hero-btn.next{
right:15px
}


/* INDICADORES */

.hero-dots{

position:absolute;

bottom:15px;

width:100%;

display:flex;

justify-content:center;

gap:.5rem

}

.hero-dots span{

width:10px;
height:10px;

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

border-radius:50%;

cursor:pointer;

transition:.3s

}

.hero-dots span.active{

background:#fff;

transform:scale(1.2)

}


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

.carousel{
position:relative;
overflow:hidden
}

.carousel-track{

display:flex;

gap:1rem;

overflow-x:auto;

scroll-snap-type:x mandatory;

padding-bottom:.5rem;

-webkit-overflow-scrolling:touch

}

.carousel-track::-webkit-scrollbar{
display:none
}

.carousel-card{

flex:0 0 85%;

scroll-snap-align:start;

background:var(--surface);

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:1rem

}

@media (min-width:900px){

.carousel-card{
flex-basis:32%
}

}


/* =====================================================
LISTAS COLUNAS
===================================================== */

.cols-2{

columns:2;

column-gap:1.25rem;

padding-left:1rem

}

@media (max-width:700px){

.cols-2{
columns:1
}

}
/* ================================
WHATSAPP FLOATING
================================ */

#whatsappWidget{
position:fixed;
bottom:25px;
right:25px;
z-index:999999;
font-family:system-ui;
}

#waFloating{
background:#25D366;
color:white;
border:none;
padding:14px 18px;
border-radius:30px;
font-weight:600;
cursor:pointer;
box-shadow:0 10px 25px rgba(0,0,0,.2);
}

#waPopup{
display:none;
background:white;
width:280px;
padding:16px;
border-radius:12px;
box-shadow:0 20px 40px rgba(0,0,0,.25);
margin-bottom:10px;
}

#waPopup input,
#waPopup textarea{
width:100%;
margin-bottom:8px;
padding:10px;
border-radius:8px;
border:1px solid #ddd;
}

#waPopup textarea{
height:70px;
resize:none;
}

#waEnviar{
background:#25D366;
border:none;
color:white;
padding:12px;
border-radius:8px;
width:100%;
cursor:pointer;
font-weight:600;
}