/* ===================================
   SEEI FITNESS & YOGA STUDIO
   PREMIUM DESIGN SYSTEM
=================================== */

:root{

--navy:#1D2939;
--blue:#6F90B5;
--sage:#9BAF98;
--gold:#C9B37E;
--cream:#F8F7F4;
--white:#FFFFFF;
--black:#111111;

--shadow:
0 20px 60px rgba(0,0,0,.08);

--shadow-hover:
0 30px 80px rgba(0,0,0,.15);

--radius:24px;

}

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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Montserrat',sans-serif;

background:var(--white);

color:var(--navy);

overflow-x:hidden;

}

.container{

width:90%;

max-width:1400px;

margin:auto;

}

/* ==========================
LOADER
========================== */

#loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:white;

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

z-index:99999;

transition:1s;

}

.loader-logo img{

width:180px;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.05);
}

100%{
transform:scale(1);
}

}

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

.header{

position:fixed;

top:0;
left:0;

width:100%;
height:90px;

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

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

backdrop-filter:blur(25px);

z-index:1000;

transition:.4s;

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

}

.header.scrolled{

height:75px;

box-shadow:0 10px 40px rgba(0,0,0,.08);

}

/* Logo */

.logo-container{

position:absolute;

left:40px;

}

.logo-container img{

height:55px;

transition:.4s;

}

/* Menu centrado */

nav ul{

display:flex;

gap:50px;

list-style:none;

}

nav ul li a{

text-decoration:none;

font-size:14px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

color:var(--navy);

position:relative;

transition:.3s;

}

nav ul li a:hover{

color:var(--blue);

}

nav ul li a::after{

content:"";

position:absolute;

bottom:-10px;
left:0;

width:0%;

height:2px;

background:var(--blue);

transition:.4s;

}

nav ul li a:hover::after{

width:100%;

}

/* Iconos */

.header-icons{

position:absolute;

right:40px;

display:flex;
gap:25px;

}

.header-icons a{

color:var(--navy);

font-size:20px;

transition:.3s;

}

.header-icons a:hover{

color:var(--blue);

transform:translateY(-3px);

}

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

.hero{

position:relative;

height:100vh;

overflow:hidden;

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

}

.hero video{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

}

.hero-overlay{

position:absolute;

width:100%;
height:100%;

background:

linear-gradient(
to bottom,
rgba(0,0,0,.35),
rgba(0,0,0,.55)
);

}

.hero-content{

position:relative;

z-index:10;

text-align:center;

max-width:1000px;

padding:0 20px;

}

.hero-logo{

width:180px;

margin-bottom:40px;

filter:drop-shadow(
0 10px 30px rgba(0,0,0,.2)
);

}

.hero h1{

font-family:'Cormorant Garamond',serif;

font-size:6rem;

line-height:1;

font-weight:700;

color:white;

margin-bottom:25px;

}

.hero p{

font-size:1.2rem;

letter-spacing:4px;

text-transform:uppercase;

color:white;

margin-bottom:40px;

}

/* ==========================
BUTTONS
========================== */

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

}

.btn-primary{

padding:18px 40px;

border-radius:50px;

text-decoration:none;

background:var(--blue);

color:white;

font-weight:600;

transition:.4s;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:
0 20px 50px rgba(111,144,181,.4);

}

.btn-secondary{

padding:18px 40px;

border-radius:50px;

text-decoration:none;

border:1px solid rgba(255,255,255,.5);

color:white;

transition:.4s;

}

.btn-secondary:hover{

background:white;

color:var(--navy);

}

/* ==========================
SECTIONS
========================== */

section{

padding:120px 0;

}

.section-header{

text-align:center;

margin-bottom:70px;

}

.section-header span{

color:var(--blue);

font-weight:600;

letter-spacing:3px;

font-size:13px;

}

.section-header h2{

font-family:'Cormorant Garamond',serif;

font-size:4rem;

margin-top:15px;

font-weight:600;

}

/* ==========================
PHILOSOPHY
========================== */

.philosophy-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.philosophy-grid p{

font-size:1.1rem;

line-height:2;

}

.philosophy-grid img{

width:100%;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

/* ==========================
CLASSES
========================== */

.class-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.class-card{

padding:40px;

background:white;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.4s;

cursor:pointer;

}

.class-card:hover{

transform:translateY(-10px);

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

}

.class-card h3{

font-family:'Cormorant Garamond',serif;

font-size:2rem;

margin-bottom:15px;

color:var(--blue);

}

.class-card p{

line-height:1.8;

}

/* ===================================
   INSTRUCTORES
=================================== */

.trainer-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:40px;

}

.trainer-card{

background:white;

border-radius:30px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

text-align:center;

}

.trainer-card:hover{

transform:translateY(-12px);

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

}

.trainer-image{

height:320px;

background:
linear-gradient(
135deg,
var(--blue),
var(--sage)
);

}

.trainer-card h3{

font-family:'Cormorant Garamond',serif;

font-size:2rem;

margin-top:25px;

}

.trainer-card p{

padding:20px 30px 35px;

line-height:2;

color:#666;

}

/* ===================================
   MEMBERSHIP
=================================== */

.membership{

background:var(--cream);

}

.plans{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.plan{

background:white;

padding:50px;

border-radius:30px;

text-align:center;

box-shadow:var(--shadow);

transition:.4s;

}

.plan:hover{

transform:translateY(-12px);

}

.plan.featured{

background:var(--blue);

color:white;

transform:scale(1.05);

}

.plan h3{

font-family:'Cormorant Garamond',serif;

font-size:2.5rem;

margin-bottom:20px;

}

.price{

font-size:3rem;

font-weight:700;

margin-bottom:30px;

}

.plan ul{

list-style:none;

}

.plan ul li{

padding:12px 0;

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

}

.plan.featured ul li{

border-bottom:1px solid rgba(255,255,255,.15);

}

/* ===================================
   TESTIMONIOS
=================================== */

.testimonials{

background:white;

}

.testimonial-slider{

max-width:900px;

margin:auto;

position:relative;

}

.testimonial{

display:none;

text-align:center;

padding:60px;

}

.testimonial.active{

display:block;

animation:fadeIn .8s ease;

}

.testimonial p{

font-size:1.4rem;

line-height:2;

font-style:italic;

}

.testimonial h4{

margin-top:25px;

font-size:1.4rem;

color:var(--gold);

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ===================================
   INSTAGRAM
=================================== */

.instagram{

background:var(--cream);

}

.instagram-grid{

display:grid;

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

gap:20px;

}

.instagram-grid div{

height:320px;

border-radius:25px;

overflow:hidden;

background:
linear-gradient(
135deg,
var(--blue),
var(--sage)
);

transition:.5s;

cursor:pointer;

}

.instagram-grid div:hover{

transform:scale(1.03);

}

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

.cta{

background:

linear-gradient(
135deg,
var(--navy),
#2f425d
);

color:white;

text-align:center;

}

.cta h2{

font-family:'Cormorant Garamond',serif;

font-size:4rem;

margin-bottom:20px;

}

.cta p{

font-size:1.2rem;

margin-bottom:40px;

}

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

footer{

background:#10151d;

color:white;

padding:100px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:
2fr 1fr 1fr;

gap:50px;

margin-bottom:50px;

}

.footer-logo{

width:180px;

}

footer h4{

margin-bottom:20px;

font-size:1.2rem;

}

footer ul{

list-style:none;

}

footer ul li{

margin-bottom:15px;

opacity:.8;

}

.copyright{

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

padding-top:30px;

text-align:center;

opacity:.7;

}

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

.whatsapp{

position:fixed;

bottom:30px;

right:30px;

width:70px;

height:70px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:35px;

text-decoration:none;

z-index:999;

box-shadow:
0 15px 35px rgba(37,211,102,.4);

transition:.4s;

}

.whatsapp:hover{

transform:scale(1.1);

}

/* ===================================
   SCROLLBAR
=================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f3f3f3;

}

::-webkit-scrollbar-thumb{

background:var(--blue);

border-radius:50px;

}

/* ===================================
   DARK MODE
=================================== */

body.dark{

background:#10151d;

color:white;

}

body.dark .class-card,
body.dark .trainer-card,
body.dark .plan{

background:#18202c;

color:white;

}

body.dark .header{

background:
rgba(16,21,29,.85);

}

body.dark .membership{

background:#111827;

}

body.dark .instagram{

background:#111827;

}

/* ===================================
   REVEAL ANIMATIONS
=================================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

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

.mobile-toggle{

display:none;

font-size:28px;

cursor:pointer;

}

/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1200px){

.hero h1{

font-size:5rem;

}

.section-header h2{

font-size:3.2rem;

}

}

@media(max-width:992px){

nav ul{

gap:25px;

}

.hero h1{

font-size:4rem;

}

.philosophy-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.instagram-grid{

grid-template-columns:
repeat(2,1fr);

}

}

@media(max-width:768px){

.header{

justify-content:space-between;

padding:0 25px;

}

.logo-container{

position:relative;

left:auto;

}

nav{

display:none;

}

.mobile-toggle{

display:block;

}

.hero{

height:90vh;

}

.hero-logo{

width:140px;

}

.hero h1{

font-size:3rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.section-header h2{

font-size:2.5rem;

}

.instagram-grid{

grid-template-columns:1fr;

}

.price{

font-size:2.5rem;

}

}

@media(max-width:480px){

.hero h1{

font-size:2.3rem;

}

.section-header h2{

font-size:2rem;

}

.plan{

padding:35px;

}

.class-card{

padding:30px;

}

}

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

.page-hero{

padding-top:180px;

padding-bottom:120px;

background:
linear-gradient(
135deg,
var(--navy),
var(--blue)
);

color:white;

text-align:center;

}

.page-hero h1{

font-family:'Cormorant Garamond',serif;

font-size:5rem;

margin-bottom:20px;

}

.page-hero p{

font-size:1.2rem;

opacity:.9;

}

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

.badge{

display:inline-block;

margin-top:20px;

padding:10px 18px;

border-radius:50px;

background:var(--blue);

color:white;

font-size:14px;

font-weight:600;

}

/* ===================================
   HORARIOS
=================================== */

.schedule-section{

background:var(--cream);

}

.schedule-header{

text-align:center;

margin-bottom:50px;

}

.schedule-header h2{

font-family:'Cormorant Garamond',serif;

font-size:3rem;

margin-bottom:15px;

}

.schedule-table{

overflow-x:auto;

}

.schedule-table table{

width:100%;

border-collapse:collapse;

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

}

.schedule-table th{

background:var(--navy);

color:white;

padding:20px;

}

.schedule-table td{

padding:20px;

text-align:center;

font-size:14px;

border:1px solid #eee;

font-weight:600;

}

.schedule-table span{

display:block;

font-size:12px;

margin-top:8px;

opacity:.8;

}

/* COLORES DE CLASES */

.power{
background:#dbeafe;
}

.box{
background:#fee2e2;
}

.dance{
background:#fef3c7;
}

.sculpt{
background:#e9d5ff;
}

.yoga{
background:#dcfce7;
}

.stretch{
background:#cffafe;
}

.step{
background:#fce7f3;
}

.yin{
background:#ede9fe;
}

/* LEYENDA */

.legend{

padding:100px 0;

}

.legend h2{

text-align:center;

margin-bottom:40px;

font-family:'Cormorant Garamond',serif;

font-size:3rem;

}

.legend-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:20px;

}

.legend-item{

padding:20px;

border-radius:16px;

text-align:center;

font-weight:600;

}

/* ===================================
   TRAINERS PAGE
=================================== */

.trainers-page{

background:white;

}

.trainer-profile{

display:grid;

grid-template-columns:
1fr 1fr;

gap:80px;

align-items:center;

margin-bottom:120px;

}

.trainer-profile.reverse{

direction:rtl;

}

.trainer-profile.reverse .trainer-info{

direction:ltr;

}

.trainer-photo{

height:550px;

border-radius:30px;

background:
linear-gradient(
135deg,
var(--blue),
var(--sage)
);

box-shadow:var(--shadow);

}

.trainer-role{

display:inline-block;

padding:10px 18px;

background:var(--cream);

border-radius:50px;

font-size:13px;

font-weight:600;

margin-bottom:20px;

}

.trainer-info h2{

font-family:'Cormorant Garamond',serif;

font-size:4rem;

margin-bottom:20px;

}

.trainer-info p{

line-height:2;

font-size:1.05rem;

margin-bottom:30px;

}

.trainer-specialties{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:30px;

}

.trainer-specialties span{

padding:10px 18px;

border-radius:50px;

background:var(--blue);

color:white;

font-size:14px;

}

.trainer-social{

display:flex;

gap:20px;

}

.trainer-social a{

width:50px;

height:50px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:var(--navy);

color:white;

text-decoration:none;

transition:.4s;

}

.trainer-social a:hover{

transform:translateY(-5px);

background:var(--blue);

}

@media(max-width:900px){

.trainer-profile{

grid-template-columns:1fr;

gap:40px;

}

.trainer-profile.reverse{

direction:ltr;

}

.trainer-photo{

height:420px;

}

.trainer-info h2{

font-size:3rem;

}

}

/* ===================================
   MEMBERSHIP PAGE
=================================== */

.membership-pricing{

background:var(--cream);

}

.pricing-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:40px;

}

.pricing-card{

background:white;

padding:50px;

border-radius:30px;

text-align:center;

box-shadow:var(--shadow);

position:relative;

transition:.4s;

}

.pricing-card:hover{

transform:translateY(-10px);

}

.featured-plan{

border:3px solid var(--blue);

transform:scale(1.05);

}

.popular-tag{

position:absolute;

top:-15px;
left:50%;

transform:translateX(-50%);

padding:10px 25px;

background:var(--blue);

color:white;

border-radius:50px;

font-size:13px;

font-weight:600;

}

.membership-price{

font-size:4rem;

font-weight:700;

margin:30px 0;

color:var(--navy);

}

.membership-price span{

display:block;

font-size:14px;

font-weight:500;

color:#666;

}

.pricing-card ul{

list-style:none;

margin-bottom:30px;

}

.pricing-card ul li{

padding:15px 0;

border-bottom:1px solid #eee;

}

/* TABLA */

.benefits-table{

padding:120px 0;

}

.benefits-table h2{

text-align:center;

margin-bottom:50px;

font-family:'Cormorant Garamond',serif;

font-size:3rem;

}

.benefits-table table{

width:100%;

border-collapse:collapse;

background:white;

box-shadow:var(--shadow);

overflow:hidden;

border-radius:20px;

}

.benefits-table th{

background:var(--navy);

color:white;

padding:20px;

}

.benefits-table td{

padding:20px;

text-align:center;

border:1px solid #eee;

}

/* FAQ */

.faq-section{

background:var(--cream);

}

.faq-section h2{

text-align:center;

margin-bottom:50px;

font-family:'Cormorant Garamond',serif;

font-size:3rem;

}

.faq-item{

background:white;

padding:30px;

border-radius:20px;

margin-bottom:20px;

box-shadow:var(--shadow);

}

.faq-item h3{

margin-bottom:15px;

}

/* ===================================
   TIENDA
=================================== */

.shop-section{

padding:120px 0;

background:var(--cream);

}

.shop-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:35px;

}

.product-card{

background:white;

padding:25px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.4s;

text-align:center;

}

.product-card:hover{

transform:translateY(-10px);

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

}

.product-image{

height:260px;

border-radius:20px;

margin-bottom:20px;

background:
linear-gradient(
135deg,
var(--blue),
var(--sage)
);

}

.product-card h3{

font-family:'Cormorant Garamond',serif;

font-size:2rem;

margin-bottom:10px;

}

.product-price{

font-size:1.4rem;

font-weight:700;

color:var(--blue);

margin:20px 0;

}

/* CARRITO */

.shop-cart{

position:absolute;

right:40px;

cursor:pointer;

font-size:24px;

}

.shop-cart span{

position:absolute;

top:-10px;
right:-15px;

width:22px;
height:22px;

border-radius:50%;

background:red;

color:white;

font-size:12px;

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

}

.cart-panel{

position:fixed;

top:0;
right:-420px;

width:400px;

height:100vh;

background:white;

box-shadow:
-10px 0 40px rgba(0,0,0,.15);

padding:40px;

transition:.5s;

z-index:9999;

overflow-y:auto;

}

.cart-panel.open{

right:0;

}

.cart-panel h2{

margin-bottom:30px;

font-family:'Cormorant Garamond',serif;

font-size:2.5rem;

}

.cart-footer{

margin-top:40px;

}

.clear-btn{

width:100%;

padding:15px;

margin:20px 0;

border:none;

background:#ef4444;

color:white;

cursor:pointer;

border-radius:10px;

}

#cart-items div{

padding:15px 0;

border-bottom:1px solid #eee;

}

/* ===================================
   CONTACT PAGE
=================================== */

.contact-page{

background:var(--cream);

}

.contact-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:60px;

}

.contact-info h2,
.contact-form-card h2{

font-family:'Cormorant Garamond',serif;

font-size:3rem;

margin-bottom:20px;

}

.contact-info p{

line-height:1.8;

}

.contact-item{

display:flex;

gap:20px;

align-items:flex-start;

margin:30px 0;

}

.contact-item i{

font-size:22px;

color:var(--blue);

width:30px;

}

.business-hours{

margin-top:40px;

padding:30px;

background:white;

border-radius:20px;

box-shadow:var(--shadow);

}

.business-hours ul{

list-style:none;

margin-top:15px;

}

.business-hours li{

padding:10px 0;

}

.contact-form-card{

background:white;

padding:40px;

border-radius:30px;

box-shadow:var(--shadow);

}

.contact-form-card form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea{

padding:18px;

border:1px solid #ddd;

border-radius:14px;

font-family:inherit;

font-size:15px;

}

.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus{

outline:none;

border-color:var(--blue);

}

/* MAPA */

.map-section iframe{

width:100%;

height:500px;

border:none;

}

/* RESPONSIVE */

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

}

/* ==========================
EVENTOS
========================== */

.events-hero{

    padding:120px 0 60px;

    text-align:center;

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

}

.events-hero h1{

    font-size:4rem;

    margin-bottom:20px;

}

.events-hero p{

    max-width:700px;

    margin:auto;

}

.events-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(350px,1fr));

    gap:40px;

}

.event-card{

    background:white;

    border-radius:30px;

    overflow:hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);

    transition:.4s;
}

.event-card:hover{

    transform:translateY(-10px);

}

.event-image{

    height:260px;

    overflow:hidden;

}

.event-image img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.event-date{

    position:absolute;

    top:20px;
    right:20px;

    background:#6F90B5;

    color:white;

    padding:12px 18px;

    border-radius:12px;

    font-weight:600;

}

.event-content{

    padding:30px;

}

.event-content h3{

    margin-bottom:15px;

}

.newsletter{

    padding:120px 0;

    text-align:center;

}

.newsletter-form{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:30px;

}

.newsletter-form input{

    width:350px;

    height:55px;

    padding:0 20px;

    border:1px solid #ddd;

    border-radius:12px;

}

.newsletter-form button{

    height:55px;

    padding:0 30px;

    border:none;

    border-radius:12px;

    background:#6F90B5;

    color:white;

    cursor:pointer;

}