/* ==========================================================
   ZUMBA · BIK
   zumba.css
==========================================================*/

:root{

--rosa:#e91e63;
--rosa-claro:#ff5c93;
--rosa-suave:#fff0f5;

--violeta:#8e24aa;

--gris:#666;
--gris-claro:#f6f6f6;

--texto:#222;

--blanco:#ffffff;

--sombra:0 15px 40px rgba(0,0,0,.12);

--radio:22px;

--transicion:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:Arial,Helvetica,sans-serif;

color:var(--texto);

line-height:1.7;

background:#fff;

overflow-x:hidden;

}

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

.hero-zumba{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background-image:

linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.45)),

url("../img/zumba/hero.webp");

background-size:cover;

background-position:center;

background-attachment:fixed;

}

.hero-overlay{

position:absolute;

inset:0;

background:linear-gradient(

180deg,

rgba(0,0,0,.15),

rgba(0,0,0,.45)

);

}

.hero-content{

position:relative;

z-index:2;

max-width:900px;

padding:40px;

color:#fff;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

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

border-radius:40px;

backdrop-filter:blur(8px);

font-size:.95rem;

margin-bottom:25px;

letter-spacing:1px;

}

.hero h1{

font-size:4.5rem;

font-weight:800;

margin-bottom:15px;

}

.hero-subtitle{

font-size:2rem;

font-weight:600;

margin-bottom:30px;

}

.hero p{

font-size:1.25rem;

margin-bottom:20px;

opacity:.95;

}

.btn{

display:inline-block;

padding:18px 42px;

background:var(--rosa);

color:white;

text-decoration:none;

font-weight:bold;

border-radius:40px;

transition:var(--transicion);

box-shadow:0 10px 30px rgba(233,30,99,.35);

}

.btn:hover{

transform:translateY(-4px);

background:var(--rosa-claro);

}

/*==================================================
SECCIONES
==================================================*/

section{

padding:90px 20px;

}

.container{

width:min(1200px,92%);

margin:auto;

}

.narrow{

max-width:820px;

margin:auto;

}

section h2{

font-size:2.6rem;

margin-bottom:30px;

text-align:center;

color:#222;

}

section p{

font-size:1.15rem;

margin-bottom:20px;

}

/*==================================================
INTRO
==================================================*/

.intro{

background:white;

text-align:center;

}

/*==================================================
VIDEO
==================================================*/

#video-zumba{

background:var(--gris-claro);

}

.video-wrapper{

margin-top:50px;

}

.video-placeholder{

height:520px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:white;

box-shadow:var(--sombra);

font-size:1.5rem;

color:#999;

}

/*==================================================
BENEFICIOS
==================================================*/

#beneficios{

background:white;

}

.beneficios-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.beneficio-card{

background:white;

padding:40px;

border-radius:var(--radio);

box-shadow:var(--sombra);

transition:.35s;

text-align:center;

}

.beneficio-card:hover{

transform:translateY(-10px);

}

.beneficio-card h3{

font-size:1.5rem;

margin-bottom:18px;

color:var(--rosa);

}

.beneficio-card p{

margin:0;

}

/*==================================================
HABILIDADES
==================================================*/

#clases{

background:linear-gradient(

180deg,

#fff,

#fff6fa

);

}

.section-intro{

text-align:center;

margin-bottom:40px;

font-size:1.2rem;

}

.habilidades-grid{

display:grid;

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

gap:25px;

margin-top:45px;

}

.habilidad{

background:white;

padding:22px 28px;

border-left:8px solid var(--rosa);

border-radius:16px;

font-size:1.1rem;

font-weight:600;

box-shadow:var(--sombra);

transition:.3s;

}

.habilidad:hover{

transform:translateX(10px);

}

/*==================================================
PARA QUIÉN
==================================================*/

#para-quien{

background:white;

}

/*==================================================
FRASE
==================================================*/

.impacto{

background:

linear-gradient(

135deg,

#e91e63,

#ff5c93

);

color:white;

text-align:center;

}

.impacto h2{

color:white;

font-size:3rem;

margin-bottom:25px;

}

.impacto p{

font-size:1.25rem;

opacity:.95;

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

#testimonios{

background:#fafafa;

}

.testimonios-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.testimonio{

background:white;

padding:40px;

border-radius:22px;

box-shadow:var(--sombra);

position:relative;

transition:all .35s ease;

}

.testimonio:hover{

transform:translateY(-8px);

}

.testimonio::before{

content:"“";

position:absolute;

top:10px;

left:25px;

font-size:5rem;

color:rgba(233,30,99,.12);

font-weight:bold;

}

.testimonio p{

font-size:1.1rem;

margin-bottom:25px;

position:relative;

z-index:2;

}

.testimonio h4{

color:var(--rosa);

font-weight:700;

}

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

#horarios{

background:linear-gradient(180deg,#fff,#fff3f8);

text-align:center;

}

.horario-box{

max-width:650px;

margin:auto;

padding:55px;

background:white;

border-radius:28px;

box-shadow:var(--sombra);

}

.horario-box h2{

margin-bottom:20px;

}

.horario-box h3{

font-size:2rem;

margin-bottom:20px;

color:var(--rosa);

}

.hora{

font-size:3rem;

font-weight:800;

color:#222;

margin-bottom:25px;

}

.horario-box p{

font-size:1.15rem;

color:#666;

}

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

.cta-zumba{

background:

linear-gradient(

135deg,

#e91e63,

#ff5c93

);

text-align:center;

color:white;

}

.cta-zumba h2{

font-size:3rem;

color:white;

margin-bottom:25px;

}

.cta-zumba p{

font-size:1.3rem;

max-width:760px;

margin:auto auto 45px;

}

.btn-large{

font-size:1.2rem;

padding:20px 50px;

background:white;

color:var(--rosa);

border-radius:50px;

font-weight:bold;

transition:.35s;

}

.btn-large:hover{

background:#ffe6f0;

transform:translateY(-5px);

}

/*==================================================
CONTACTO
==================================================*/

.contact{

background:white;

text-align:center;

}

.contact h2{

margin-bottom:20px;

}

.contact p{

max-width:720px;

margin:auto auto 50px;

font-size:1.15rem;

}

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

.footer{

background:#222;

color:white;

padding:70px 30px;

}

.footer-container{

display:grid;

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

gap:45px;

max-width:1200px;

margin:auto;

}

.footer h3{

margin-bottom:20px;

color:#ff82b3;

}

.footer p{

color:#ddd;

line-height:1.9;

}

/*==================================================
ANIMACIONES
==================================================*/

.beneficio-card,

.habilidad,

.testimonio,

.horario-box{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*==================================================
SCROLL SUAVE
==================================================*/

html{

scroll-behavior:smooth;

}

/*==================================================
IMÁGENES DECORATIVAS
==================================================*/

.hero-zumba::after{

content:"";

position:absolute;

bottom:0;

left:0;

width:100%;

height:140px;

background:linear-gradient(

180deg,

rgba(255,255,255,0),

#fff

);

}

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

@media(max-width:900px){

.hero h1{

font-size:3.2rem;

}

.hero-subtitle{

font-size:1.5rem;

}

section{

padding:70px 20px;

}

.hora{

font-size:2.4rem;

}

.horario-box{

padding:40px;

}

}

/*==================================================
RESPONSIVE MÓVIL
==================================================*/

@media(max-width:640px){

.hero{

background-attachment:scroll;

}

.hero-content{

padding:20px;

}

.hero h1{

font-size:2.4rem;

}

.hero-subtitle{

font-size:1.2rem;

}

.hero p{

font-size:1rem;

}

section h2{

font-size:2rem;

}

.beneficio-card{

padding:28px;

}

.habilidad{

padding:18px;

font-size:1rem;

}

.testimonio{

padding:28px;

}

.testimonio::before{

font-size:3.8rem;

}

.hora{

font-size:2rem;

}

.btn{

padding:15px 30px;

}

.btn-large{

padding:18px 35px;

font-size:1rem;

}

.footer{

text-align:center;

}

.footer-container{

grid-template-columns:1fr;

}

}

/*==================================================
PEQUEÑOS DETALLES
==================================================*/

::selection{

background:var(--rosa);

color:white;

}

img{

max-width:100%;

display:block;

}

a{

transition:.3s;

}

button{

font-family:inherit;

}

iframe{

width:100%;

border:none;

border-radius:20px;

box-shadow:var(--sombra);

}

.video-placeholder:hover,

.horario-box:hover{

transform:translateY(-5px);

transition:.35s;

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

}
/*=========================================
HERO RESPONSIVE
=========================================*/

/* Escritorio */

.hero-zumba{

    background-image:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.45)),
    url("../img/zumba/hero.jpg");

    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;

}


/* Tablet */

@media (max-width:991px){

.hero-zumba{

    background-position:center center;

}

}


/* Móvil */

@media (max-width:768px){

.hero-zumba{

    background-image:
    linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.45)),
    url("../img/zumba/hero-mobile.jpg");

    background-size:cover;

    background-position:center top;

    min-height:100vh;

}

.hero-content{

    max-width:95%;

    padding:30px 20px;

}

.hero h1{

    font-size:2.8rem;

}

.hero-subtitle{

    font-size:1.35rem;

}

.hero p{

    font-size:1rem;

}

.btn-hero{

    width:100%;

    max-width:320px;

    margin:auto;

}

}