/* =====================================
   OFFICE
===================================== */

/* ========= NAV TABS ========= */

.office-nav{
display:flex;
justify-content:center;
gap:40px;
margin:40px 0 60px;
border-bottom:none;
padding-bottom:12px;
}

.office-nav button{
background:none;
border:none;
font-family:var(--font-primary);
font-size:0.9rem;
letter-spacing:1px;
cursor:pointer;
color:#666;
padding:6px 2px;
position:relative;
transition:color .3s;
}

.office-nav button:hover{
color:#111;
}

.office-nav button.active::after{
content:"";
position:absolute;
left:0;
bottom:-13px;
width:100%;
height:1px;
background:#111;
}


/* ========= TAB SECTIONS ========= */

.office-tab{
display:none;
padding-top:80px;
padding-bottom:80px;
}

.office-tab.active{
display:block;
}


/* =====================================
   PERFIL
===================================== */

.office-intro{
max-width:750px;
margin:0 auto;
padding:0 40px;
text-align:left;
}

.office-intro h2{
font-family:var(--font-primary);
font-size:1.2rem;
font-weight:500;
letter-spacing:1px;
text-align:center;
margin-bottom:80px;
margin-top:0;
}

.office-profile-image{
width:100%;
margin-bottom:30px;
filter:grayscale(100%);
}

.office-intro p{
font-size:0.92rem;
line-height:1.8;
color:#444;
margin-bottom:22px;
}

.office-intro p:last-child{
margin-bottom:0;
}


/* =====================================
   SOCIOS + EQUIPO
===================================== */

.office-team{
max-width:1400px;
margin:0 auto;
padding:0 80px;
}

.office-team h2{
text-align:center;
font-family:var(--font-primary);
font-size:1.2rem;
letter-spacing:1px;
margin-bottom:60px;
}

.team-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:50px;
max-width:1100px;
margin:0 auto;
}

.team-member{
text-align:center;
text-decoration:none;
color:var(--color-text);
}

.team-member img{
width:85%;
aspect-ratio:3/4;
object-fit:cover;
margin:0 auto 15px;
filter:grayscale(100%);
transition:filter .4s, transform .4s;
}

.team-member:hover img{
filter:grayscale(0%);
transform:scale(1.03);
}

.team-member h3{
font-family:var(--font-primary);
font-size:1rem;
margin-top:18px;
margin-bottom:4px;
}

.team-member span{
font-family:var(--font-primary);
font-size:0.75rem;
letter-spacing:1.6px;
text-transform:uppercase;
color:var(--color-muted);
}


/* =====================================
   MISIÓN Y VISIÓN
===================================== */

.office-values{
max-width:1000px;
margin:0 auto;
padding:0 60px;
}

.office-values h2{
font-family:var(--font-primary);
font-size:1.2rem;
font-weight:500;
letter-spacing:1px;
text-align:center;
margin-bottom:60px;
}

.office-values-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:120px;
max-width:900px;
margin:0 auto;
text-align:left;
}

.office-value-item h3{
font-family:var(--font-primary);
font-size:0.9rem;
font-weight:500;
letter-spacing:1px;
margin-bottom:10px;
}

.office-value-item p{
font-size:0.92rem;
line-height:1.8;
color:#444;
}


/* =====================================
   VALORES
===================================== */

.office-values-list{
max-width:1000px;
margin:0 auto;
padding:0 40px;
text-align:center;
}

.office-values-list h2{
font-family:var(--font-primary);
font-size:1.2rem;
font-weight:500;
letter-spacing:1px;
margin-bottom:60px;
}

.values-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px 80px;
list-style:none;
padding:0;
margin:0;
text-align:left;
}

.values-grid li{
font-size:0.9rem;
line-height:1.6;
color:#555;
}

.values-grid span{
display:block;
font-weight:500;
margin-bottom:6px;
color:#222;
}


/* =====================================
   CLOSING PHRASE
===================================== */

.office-closing{
max-width:600px;
margin:80px auto 120px;
text-align:center;
font-family:var(--font-primary);
font-size:0.85rem;
letter-spacing:2px;

line-height:1.6;
color:#444;
}


/* =====================================
   RESPONSIVE
===================================== */

@media (max-width:768px){

.team-grid{
grid-template-columns:repeat(2,1fr);
}

.office-values-grid{
grid-template-columns:1fr;
gap:40px;
}

.values-grid{
grid-template-columns:1fr;
gap:30px;
}

}

@media (max-width:600px){

.team-grid{
grid-template-columns:1fr;
}

}

/* =====================================
   TEAM MEMBER PAGE
===================================== */

.partner-hero{
display:grid;
grid-template-columns:420px 1fr;
gap:80px;
max-width:1000px;
margin:120px auto;
padding:0 40px;
align-items:center;
}

.partner-image img{
width:100%;
max-width:420px;
filter:grayscale(100%);
}

.partner-content h1{
font-family:var(--font-secondary);
font-size:2.2rem;
font-weight:400;
letter-spacing:0.2px;
margin-bottom:12px;
}

.partner-content span{
font-family:var(--font-primary);
font-size:0.75rem;
letter-spacing:2px;
text-transform:uppercase;
color:var(--color-muted);
}

.partner-content p{
font-size:0.95rem;
line-height:1.8;
color:#444;
margin-bottom:20px;
max-width:520px;
}

@media (max-width:768px){

.partner-hero{
grid-template-columns:1fr;
gap:40px;
margin:80px auto;
}

.partner-image img{
max-width:340px;
margin:0 auto;
}

.partner-content{
text-align:center;
}

.partner-content p{
margin-left:auto;
margin-right:auto;
}

}

@media (max-width:600px){

.office-nav{
flex-wrap:wrap;
gap:12px 24px;
justify-content:center;
}

.office-nav button{
font-size:0.85rem;
letter-spacing:0.8px;
}

}