/* =================================
   CONSCIENTEMENTE — MOBILE
================================= */

@media (max-width:768px){

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

.site-header{
padding:1rem 1.4rem;
}

.nav{
flex-direction:column;
align-items:flex-start;
gap:10px;
position:relative;
}

.brand-title{
font-size:1.6rem;
line-height:1.2;
}

.brand-subtitle{
font-size:.9rem;
}

/* ==========================
   BOTON HAMBURGUESA
========================== */

.menu-toggle{
display:flex;
flex-direction:column;
justify-content:space-between;
width:28px;
height:20px;
background:none;
border:none;
cursor:pointer;
position:absolute;
right:10px;
top:10px;
}

.menu-toggle span{
display:block;
height:3px;
width:100%;
background:#333;
border-radius:3px;
transition:all .3s ease;
}

/* animación hamburguesa */

.menu-toggle.open span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.menu-toggle.open span:nth-child(2){
opacity:0;
}

.menu-toggle.open span:nth-child(3){
transform:rotate(-45deg) translate(5px,-5px);
}

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

.nav-menu{
display:none;
flex-direction:column;
gap:16px;
margin-top:18px;
}

.nav-menu.active{
display:flex;
}

.nav-menu a{
display:inline-block;
font-size:1.08rem;
border-bottom:2px solid transparent;
padding-bottom:4px;
}

.nav-menu a.active{
border-bottom:2px solid #6b4eff;
}

/* ==========================
   CONTENIDO GENERAL
========================== */

body{
padding-left:16px;
padding-right:16px;
}

/* ==========================
   BANNER
========================== */

.banner-wrapper{
min-height:420px;
margin-top:25px;
}

.banner-circle{
width:300px;
height:300px;
}

.banner-circle-text{
padding:3rem 2rem;
text-align:center;
}

.banner-circle-text h2{
line-height:1.2;
max-width:80%;
margin:auto;
}

.banner-circle-text p{
text-align:center;
max-width:85%;
margin:auto;
line-height:1.4;
}

.banner-button{
font-size:.95rem;
padding:.7rem 1.6rem;
}

/* ==========================
   SERVICIOS
========================== */

.service-card{
width:92%;
margin-left:auto;
margin-right:auto;
}

/* ==========================
   MODALES
========================== */

.modal-content{
width:92%;
max-height:85vh;
overflow-y:auto;
}

.modal img{
width:150px;
height:150px;
border-radius:50%;
object-fit:cover;
display:block;
margin:30px auto;
}

/* ==========================
   EQUIPO
========================== */

.team-photo{
width:170px;
height:170px;
margin:30px auto;
border-radius:50%;
overflow:hidden;
}

.team-photo img{
width:100%;
height:100%;
object-fit:cover;
}

/* ==========================
   CALENDARIO
========================== */

.calendar-container{
overflow-x:auto;
}

.calendar-container iframe{
min-width:700px;
height:650px;
border:0;
}

/* ==========================
   REDES
========================== */

.social-icons{
gap:2rem;
flex-wrap:wrap;
}

.social-icons img{
width:70px;
}

/* ==========================
   IMAGENES
========================== */

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

/* ==========================
   HEADER BLUR MENU
========================== */

.site-header.menu-open{
background:rgba(250,249,246,0.85);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:all .3s ease;
}

}