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

body {
    font-family: 'Poppins', sans-serif;
    background: #000;
    color: #fff;
}


/* HEADER */

.main-header {
    background: #000;
}


/* parte superior */

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 60px;

}


/* logo izquierda */

.logo-left img {
    height: 38px;
}

/* =========================
   LOGO HEADER DESKTOP/MOBILE
========================= */

/* En ordenador desaparece */
.logo-left img {
    display: none;
}



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

.logo-center h1 {
    font-family: 'Oswald', sans-serif;

    font-size: 34px;
    font-weight: 700;

    letter-spacing: 6px;
    text-transform: uppercase;

    color: #fff;

    position: relative;

    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.08);

    transition: all 0.3s ease;
    text-decoration: none;
}

/* línea elegante */
.logo-center h1::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -10px;

    transform: translateX(-50%);

    width: 70%;
    height: 2px;

    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.8),
            transparent);
}

/* hover */
.logo-center h1:hover {
    letter-spacing: 8px;
}

/* hover premium */
.main-header:hover .logo-center h1 {
    letter-spacing: 10px;
    transform: scale(1.02);
}

.logo-center a {
    text-decoration: none;
    color: inherit;
}


/* nav */

.nav-bar {
    background: #000;
}

.nav-bar ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

.nav-bar li {
    margin: 0 25px;
}

.nav-bar a {
    text-decoration: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    padding: 18px 0;
    display: block;
    transition: 0.3s;
}

.nav-bar a:hover {
    color: #d9d9d9;
}


/* SECCIONES */

.section {
    padding: 100px 10%;
    text-align: center;
    background: #000;
}

.section.dark {
    background: #111;
}

.section h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.content-placeholder {
    max-width: 800px;
    margin: auto;
    color: #aaa;
}

/* HERO ACADEMY */

.hero-academy {
    position: relative;
    height: 85vh;

    /* 🔥 IMPORTANTE: quitamos background-image fijo */
    background-size: cover;
    background-position: 70% center;
    background-repeat: no-repeat;

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

    /* 🔥 transición suave */
    transition: opacity 0.8s ease-in-out;
}

/* CAPA EXTRA PARA TRANSICIÓN PRO (opcional pero top) */
.hero-academy::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 70% center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: opacity 1.5s ease-in-out;
}

/* IMAGEN (no necesaria pero la dejamos por si la usas) */
.hero-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* OVERLAY OSCURO */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* un poco más pro */
    background: linear-gradient(rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.65));

    z-index: 1;
}

/* CONTENIDO */
.hero-content {
   
    position: relative;
    z-index: 2;

    max-width: 900px;

    padding: 40px;

    display: flex;
    flex-direction: column;
    align-items: center;

    backdrop-filter: blur(2px);

   margin-top:300px;
}


.hero-content h1 {
    font-family: 'Oswald', sans-serif;

    font-size: 88px;
    font-weight: 600;

    letter-spacing: 6px;
    text-transform: uppercase;

    margin-bottom: 18px;

    color: #fff;

    text-shadow:
        0 4px 18px rgba(0,0,0,0.45);

    line-height: 1;
}

/* línea elegante */
.hero-content h1::after{
    content: "";

    position: absolute;

    left: 50%;
    bottom: -14px;

    transform: translateX(-50%);

    width: 140px;
    height: 2px;

    background: rgba(255,255,255,0.7);

    border-radius: 20px;
}

.hero-content p {
    font-size: 20px;

    color: rgba(255,255,255,0.82);

    line-height: 1.7;

    max-width: 900px;

    margin: 0 auto 38px;

    font-weight: 300;
}

/* BOTÓN */
.hero-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 18px 42px;

    border: 1px solid rgba(255,255,255,0.6);

    color: #fff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 500;

    letter-spacing: 3px;
    text-transform: uppercase;

    background: rgba(255,255,255,0.04);

    backdrop-filter: blur(8px);

    transition: all 0.35s ease;

    border-radius: 2px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.25);
}

.hero-btn:hover{
    background: #fff;
    color: #000;

    transform: translateY(-4px);

    box-shadow:
        0 15px 40px rgba(255,255,255,0.15);
}

/* ANIMACION HERO */

.fade-up {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 1.2s ease forwards;
}

.delay-1 {
    animation-delay: 0.4s;
}

.delay-2 {
    animation-delay: 0.8s;
}

/* KEYFRAME */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* SECCION QUE HACEMOS */

.que-hacemos {
    padding: 120px 10%;
    background: #f5f5f5;
    color: #111;
}

.qh-container {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1400px;
    margin: auto;
}

.qh-img {
    flex: 1;
}

.qh-img img {
    width: 100%;
    display: block;
}

.qh-text {
    flex: 1;
}

.qh-text h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.qh-text p {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.firma {
    text-align: center;
    margin-top: 40px;
}

.firma-logo {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    letter-spacing: 3px;
    opacity: 0.6;
    margin-bottom: 10px;
}

.director {
    font-size: 15px;
    color: #888;
}

.director strong {
    color: #111;
    font-weight: 600;
}

/* ANIMACION SCROLL */

.reveal {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* NUESTRA ACADEMIA */

.nuestra-academia {
    padding: 120px 10%;
    background: #f2f2f2;
    color: #111;
    text-align: center;
}

.nuestra-academia h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 38px;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.na-texto {
    max-width: 900px;
    margin: auto;
}

.na-texto p {
    margin-bottom: 25px;
    line-height: 1.8;
    color: #333;
    font-size: 16px;
}


/* GALERIA */

.na-galeria {
    display: flex;
    gap: 40px;
    margin-top: 70px;
    justify-content: center;
}

.na-img {
    flex: 1;
    overflow: hidden;
}

.na-img img {
    width: 100%;
    display: block;
    transition: transform 0.6s ease;
}

.na-img:hover img {
    transform: scale(1.05);
}

/* FILOSOFIA Y MISION */

.filosofia-mision {
    padding: 120px 10%;
    background: #f7f7f7;
    color: #111;
}

.fm-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.fm-col {
    flex: 1;
}

/* TITULO */

.titulo-linea {
    font-family: 'Oswald', sans-serif;
    font-size: 34px;
    margin-bottom: 25px;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

/* LINEA ANIMADA */

.titulo-linea::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: #111;
    transition: width 0.8s ease;
}

.reveal.active .titulo-linea::after {
    width: 60px;
}

.fm-col h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 34px;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.fm-col p {
    margin-bottom: 20px;
    line-height: 1.8;
    color: #333;
    font-size: 16px;
}

/* ICONO CENTRAL */

.fm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle {
    width: 70px;
    height: 70px;
    border: 1px solid #111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0.6;
}

@media(max-width:900px) {

    .fm-container {
        flex-direction: column;
        gap: 50px;
    }

}

/* CURSOS */

.cursos-academia {

    padding: 120px 8%;
    background: #f5f5f5;
    text-align: center;

}

/* TITULO ANIMADO */

.titulo-cursos {
    font-family: 'Poppins', sans-serif;
    font-size: 52px;
    letter-spacing: 4px;
    margin-bottom: 20px;
    text-transform: uppercase;

    /* 🔥 efecto brillo */
    background: linear-gradient(90deg, #969292, #241919, #a7a2a2);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shineTitulo 4s linear infinite;
}


/* ✨ animación */

@keyframes shineTitulo {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 200%;
    }
}


/* línea elegante debajo */

.titulo-cursos::after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    background: #000;
    margin: 10px auto 0;
    transition: 0.6s ease;
}

.titulo-cursos:hover::after {
    width: 80px;
}

.intro-cursos {

    max-width: 900px;
    margin: auto;
    margin-bottom: 70px;
    color: #555;
    line-height: 1.6;

}


/* GRID */

.grid-cursos {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

}


/* CARD */

.curso-card {

    text-decoration: none;
    color: #111;

}


/* IMAGEN */

.curso-img {

    position: relative;
    overflow: hidden;

}

.curso-img img {

    width: 100%;
    display: block;
    transition: opacity 0.4s ease;

}

/* imagen hover */

.img-hover {

    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;

}

.curso-card:hover .img-hover {

    opacity: 1;

}

.curso-card:hover .img-main {

    opacity: 0;

}


/* TEXTO */

.curso-info {

    padding: 15px 0;

}

.curso-info h3 {

    font-size: 20px;
    margin-bottom: 5px;

}

.curso-info p {

    color: #666;
    font-size: 14px;

}

@media(max-width:1000px) {

    .grid-cursos {

        grid-template-columns: 1fr 1fr;

    }

}

@media(max-width:600px) {

    .grid-cursos {

        grid-template-columns: 1fr;

    }

}

/*Curso iniciacion*/

.curso-detalle {

    padding: 120px 8%;
    background: #f5f5f5;

}

.curso-layout {
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 160px;
    align-items: start;
    padding-top: 80px;
}

.plazas {

    margin-top: 25px;
    margin-bottom: 40px;

}

.plazas-texto {

    font-weight: 600;
    margin-bottom: 8px;

}

.barra-plazas {

    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 10px;
    overflow: hidden;

}

.barra-ocupado {

    height: 100%;
    width: 40%;
    background: #000;
    transition: width .6s ease;

}

.plazas-numero {

    margin-top: 8px;
    font-size: 14px;
    color: #555;

}

.alerta-plazas {

    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;

}


/* IMAGEN */

.curso-imagen img {

    width: 100%;
    display: block;

}


/* INFO */

.curso-info {

    color: #111;
    max-width: 520px;

}

.curso-info h1 {

    font-family: 'Oswald', sans-serif;
    font-size: 42px;
    margin-bottom: 20px;
    color: #111;

}

.curso-info p,
.curso-info li {

    color: #333;
    line-height: 1.7;

}

.curso-fecha {

    font-weight: 600;
    margin-bottom: 15px;

}

.curso-alumnos {

    margin-bottom: 30px;

}


/* TITULOS */

.curso-info h3 {

    margin-top: 30px;
    margin-bottom: 10px;

}


/* LISTAS */

.horarios li,
.contenido li {

    margin-bottom: 8px;

}


/* PRECIOS */

.precio-box {

    margin-top: 30px;
    padding: 25px;
    border: 1px solid #ddd;
    background: white;

}

.precio-total {

    font-weight: bold;
    margin-bottom: 10px;

}


/* BOTON */

.btn-reservar {

    display: inline-block;
    margin-top: 30px;
    padding: 15px 40px;
    background: black;
    color: white;
    text-decoration: none;
    transition: 0.3s;

}

.btn-reservar:hover {

    background: #333;

}

/* 🔥 BLOQUES DESPLEGABLES */

.bloques {
    margin-top: 20px;
}

.bloque {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    background: white;
    overflow: hidden;
    transition: 0.3s;
}

.bloque-titulo {
    padding: 15px 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
}

.bloque-titulo:hover {
    background: #f0f0f0;
}

.bloque-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 20px;
}

.bloque-contenido p {
    margin: 10px 0;
    color: #333;
}


/* ACTIVO */

.bloque.activo .bloque-contenido {
    max-height: 500px;
    padding: 15px 20px;
}

/*Curso perfeccionamiento*/

.curso-perfeccionamiento {
    padding: 120px 6%;
    background: #0a0a0a;
    color: #fff;
}


/* CONTENEDOR */

.titulo-perf {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}


/* SUBTITULO */

.pre-title {
    display: block;
    font-size: 13px;
    letter-spacing: 6px;
    color: #777;
    margin-bottom: 15px;
    opacity: 0;
    animation: fadeUp 1s ease forwards;
}


/* TITULO */

.main-title {
    font-family: 'Oswald', sans-serif;
    font-size: 58px;
    letter-spacing: 2px;
    font-weight: 700;
    display: inline-block;
}


/* LETRAS */

.main-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
    animation: letterReveal 0.6s ease forwards;
}


/* DELAYS AUTOMÁTICOS */

.main-title span:nth-child(n) {
    animation-delay: calc(0.04s * var(--i));
}


/* fallback (por si no usas --i) */
.main-title span:nth-child(1) {
    animation-delay: 0.05s;
}

.main-title span:nth-child(2) {
    animation-delay: 0.1s;
}

.main-title span:nth-child(3) {
    animation-delay: 0.15s;
}

.main-title span:nth-child(4) {
    animation-delay: 0.2s;
}

.main-title span:nth-child(5) {
    animation-delay: 0.25s;
}

.main-title span:nth-child(6) {
    animation-delay: 0.3s;
}

.main-title span:nth-child(7) {
    animation-delay: 0.35s;
}

.main-title span:nth-child(8) {
    animation-delay: 0.4s;
}

.main-title span:nth-child(9) {
    animation-delay: 0.45s;
}

.main-title span:nth-child(10) {
    animation-delay: 0.5s;
}

.main-title span:nth-child(11) {
    animation-delay: 0.55s;
}

.main-title span:nth-child(12) {
    animation-delay: 0.6s;
}

.main-title span:nth-child(13) {
    animation-delay: 0.65s;
}

.main-title span:nth-child(14) {
    animation-delay: 0.7s;
}

.main-title span:nth-child(15) {
    animation-delay: 0.75s;
}

.main-title span:nth-child(16) {
    animation-delay: 0.8s;
}

.main-title span:nth-child(17) {
    animation-delay: 0.85s;
}

.main-title span:nth-child(18) {
    animation-delay: 0.9s;
}

.main-title span:nth-child(19) {
    animation-delay: 0.95s;
}

.main-title span:nth-child(20) {
    animation-delay: 1s;
}


/* ANIMACIÓN LETRAS */

@keyframes letterReveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* SUBE EL SUBTITULO */

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* LÍNEA PRO */

.title-line {
    margin: 25px auto 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: lineExpand 1.2s ease forwards;
    animation-delay: 1s;
}

@keyframes lineExpand {
    to {
        width: 220px;
    }
}


/* HOVER PREMIUM */

.main-title:hover span {
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(255, 255, 255, 0.4),
        0 0 40px rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    transition: 0.3s;
}

/* ✨ EFECTO BRILLO QUE RECORRE EL TEXTO */

.main-title {
    position: relative;
    overflow: hidden;
}

/* CAPA DE BRILLO */

.main-title::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;

    /* 🔥 BRILLO PRO */
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 30%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0.15) 70%,
            transparent 100%);

    transform: skewX(-25deg);

    /* ANIMACIÓN CONSTANTE */
    animation: shineMove 4s ease-in-out infinite;
}

/* MOVIMIENTO */

@keyframes shineMove {
    0% {
        left: -120%;
    }

    100% {
        left: 120%;
    }
}


/* GRID */

.cursos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;

    justify-content: flex-start;

    max-width: 1380px;
    margin: 0 auto;
}

/* CARD */

.perf-card {
    position: relative;
    width: 420px;
    /* 🔥 MÁS GRANDE */
    height: 520px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 6px;
    transform: translateY(40px) scale(0.95);
    opacity: 0;
    transition: 0.6s ease;
}


/* IMAGEN */

.img-box {
    width: 100%;
    height: 100%;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s ease;
}


/* OVERLAY PRO */

.perf-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0.1) 100%);
    opacity: 0.8;
    transition: 0.4s;
}


/* INFO */

.perf-info {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    transform: translateY(30px);
    opacity: 0;
    transition: 0.5s;
}

.perf-info h3 {
    font-size: 28px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}


/* ESTADOS (BADGES PRO) */

.estado {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 3px;
    background: #fff;
    color: #000;
    margin-top: 5px;
}

.disponible {
    background: #25D366;
    color: #fff;
}

.agotado .estado {
    background: #ff3b3b;
    color: #fff;
}


/* BOTÓN PREMIUM */

.btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 22px;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 1px;
    transition: .3s;
    border-radius: 2px;
}

.btn:hover {
    background: #000;
    color: #fff;
    border: 1px solid #fff;
}


/* ✨ HOVER PRO */

.perf-card:hover {
    transform: scale(1.05);
    z-index: 2;
}

.perf-card:hover img {
    transform: scale(1.15);
}

.perf-card:hover .perf-overlay {
    opacity: 1;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.95),
            rgba(0, 0, 0, 0.4));
}

.perf-card:hover .perf-info {
    transform: translateY(0);
    opacity: 1;
}


/* AGOTADO */

.perf-card.agotado img {
    filter:  brightness(0.9);
}


/* SCROLL ANIMATION PRO */

.perf-card.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: 0.8s ease;
}


/* BOTÓN WHATSAPP */

.whatsapp-box {
    text-align: center;
    margin-top: 80px;
}

.btn-whatsapp {
    display: inline-block;
    padding: 18px 40px;
    background: #eaeaea;
    color: #000;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* HOVER PRO */

.btn-whatsapp:hover {
    background: #25D366;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
}

/*curso one to one*/

.one-to-one {
    padding: 140px 10%;
    background: #000;
    text-align: center;
    color: white;
}


/* TITULO */

.oto-header {
    max-width: 700px;
    margin: auto;
    margin-bottom: 80px;
}

.oto-header h2 {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 4px;
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}

.oto-header h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 42px;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.oto-header p {
    color: #aaa;
    line-height: 1.6;
}


/* GRID */

.oto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}


/* TARJETAS */

.oto-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 0.5s;
}


/* IMAGEN */

.oto-img {
    position: relative;
    overflow: hidden;
}

.oto-img img {
    width: 100%;
    height: 520px;
    /* 🔥 MÁS GRANDE */
    object-fit: cover;
    transition: transform .7s ease;
}


/* OVERLAY */

.oto-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
    text-align: left;
}


/* TEXTO */

.oto-overlay h4 {
    font-size: 20px;
    letter-spacing: 2px;
    color: #ddd;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.oto-overlay span {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}


/* ✨ BRILLO SUTIL EN PRECIO */

.oto-overlay span::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent);
    transform: skewX(-20deg);
    transition: 0.8s;
}

.oto-card:hover .oto-overlay span::after {
    left: 120%;
}


/* HOVER */

.oto-card:hover img {
    transform: scale(1.12);
}

.oto-card:hover {
    transform: translateY(-8px);
}


/* SPOTLIGHT EFFECT */

.oto-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.7));
    opacity: 0;
    transition: 0.4s;
}

.oto-card:hover::after {
    opacity: 1;
}


/* BOTON */

.btn-whatsapp {
    display: inline-block;
    margin-top: 80px;
    padding: 18px 45px;

    /* 🔥 PLATEADO PREMIUM */
    background: linear-gradient(135deg, #e6e6e6, #bfbfbf, #f2f2f2);
    color: #000;

    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: .3s;
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #ffffff, #d9d9d9, #ffffff);
    transform: translateY(-3px);
}


/* RESPONSIVE */

@media(max-width:900px) {

    .oto-grid {
        grid-template-columns: 1fr;
    }

}

/* CURSO ONLINE */

.online-coming {

    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #000;
    color: #fff;

}

.online-content h1 {

    font-family: 'Oswald', sans-serif;
    font-size: 60px;
    letter-spacing: 6px;
    margin-bottom: 20px;

}

.online-content p {

    font-size: 18px;
    color: #aaa;
    max-width: 600px;
    margin: auto;
    margin-bottom: 20px;

}

.online-sub {

    font-size: 14px;
    letter-spacing: 2px;
    color: #666;

}

/* 1 TO 1 PAGE */

.one-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    min-height: 90vh;
    align-items: center;
    background-color: #ffffff;



}


/* IZQUIERDA */

.one-left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 40px;
}

.one-left img {
    width: 90%;
    max-height: 600px;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 0.9;
    transition: 0.5s;
}

.one-left img:hover {
    transform: scale(1.03);
    opacity: 1;
}


/* CENTRO */

.one-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 80px 60px;
    background: #f5f5f5;
    color: #111;
}

.one-center h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 56px;
    letter-spacing: 6px;
    margin-bottom: 30px;
}

.one-center p {
    max-width: 520px;
    line-height: 1.8;
    color: #333;
    font-size: 16px;
}

.one-center {
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.15);
}


/* DERECHA */

.one-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 25px;
    padding-left: 40px;
}

.one-right img {
    width: 90%;
    max-height: 320px;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 0.9;
    transition: 0.5s;
}

.one-right img:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* BLOQUE PRO */

.one-precio-pro {
    padding: 80px 0 100px;
    margin-top: -60px;
    display: flex;
    justify-content: center;
    background-color: #ffffff;

}




/* TARJETA */

.precio-card {
    position: relative;
    width: 450px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    transition: 0.5s;
    margin-top: -40px;
}


/* IMAGEN */

.precio-card img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    filter: grayscale(100%);
    transition: 0.6s;
}


/* OVERLAY */

.precio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 25px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: #fff;
    transform: translateY(40px);
    opacity: 0;
    transition: 0.5s;
}


/* TEXTO */

.precio-label {
    font-size: 12px;
    letter-spacing: 3px;
    opacity: 0.7;
}

.precio-overlay h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    letter-spacing: 4px;
    margin-top: 10px;
}


/* HOVER */

.precio-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.precio-card:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.precio-card:hover .precio-overlay {
    transform: translateY(0);
    opacity: 1;
}

.precio-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 50%, rgba(0, 0, 0, 0.6));
    opacity: 0;
    transition: 0.4s;
}

.precio-card:hover::after {
    opacity: 1;
}


/* FOOTER */

.footer-academy {
    background: #000;
    color: #fff;
    padding: 80px 10% 40px;
}


/* CONTENEDOR */

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}


/* TITULOS */

.footer-academy h4 {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    margin-bottom: 20px;
}


/* ICONOS */

.social-icons{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.social-icons a{
    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
}

.social-icons i{
    color: #fff;
    font-size: 26px;

    transition: 0.3s ease;
}

.social-icons i:hover{
    transform: translateY(-4px) scale(1.08);

    opacity: 0.7;
}

.cutz-logo img{
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;

    transition: 0.3s ease;
}

.cutz-logo img:hover{
    transform: scale(1.12);
}
/* LISTA */

.footer-right ul {
    list-style: none;
}

.footer-right li {
    margin-bottom: 10px;
}

.footer-right a {
    text-decoration: none;
    color: #ccc;
    font-size: 14px;
    transition: 0.3s;
}

.footer-right a:hover {
    color: #fff;
}


/* COPYRIGHT */

.footer-bottom {
    text-align: center;
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.footer-bottom p {
    font-size: 13px;
    color: #888;
}


/* RESPONSIVE */

@media(max-width:900px) {

    .one-layout {
        grid-template-columns: 1fr;
    }

    .one-right {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
    }

}


/* SHOWS ACADEMY */

/* SECCIÓN */

.shows-gallery {
    background: #000;
    padding: 120px 0;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

/* TITULO */

.titulo-shows {
    font-size: 50px;
    letter-spacing: 4px;
    margin-bottom: 100px;
    font-family: 'Oswald', sans-serif;
}

/* CONTENEDOR */

.carousel {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 520px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* TARJETAS */

.card {
    position: absolute;
    width: 340px;
    /* 🔥 MÁS GRANDE */
    height: 500px;
    /* 🔥 MÁS GRANDE */
    border-radius: 24px;
    overflow: hidden;
    transition: 1s cubic-bezier(.77, 0, .18, 1);

    /* 🔥 MÁS SUAVE */
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

/* IMAGEN */

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
    transition: 1s;
}

/* POSICIONES (movimiento más natural) */

.left {
    transform: translateX(-420px) scale(0.85);
    opacity: 0.4;
    z-index: 1;
}

.center {
    transform: translateX(0) scale(1.15);
    z-index: 3;
}

.right {
    transform: translateX(420px) scale(0.85);
    opacity: 0.4;
    z-index: 1;
}

/* INFO MEJORADA */

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    opacity: 0;
    transform: translateY(40px);
    transition: 0.6s;
}

/* TEXTO */

.overlay h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.overlay p {
    font-size: 14px;
    color: #ccc;
}

/* SOLO ACTIVA */

.center .overlay {
    opacity: 1;
    transform: translateY(0);
}

.center img {
    filter: brightness(1);
}

/* NEÓN MÁS FINO */

.center {
    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.3),
        0 0 40px rgba(255, 255, 255, 0.2),
        0 0 80px rgba(255, 255, 255, 0.15);
}

/* EFECTO PROFUNDIDAD */

.left img,
.right img {
    filter: brightness(0.4) blur(1px);
}

/* MOVIMIENTO REAL */

.move-left {
    transform: translateX(-420px) scale(0.85);
}

.move-center {
    transform: translateX(0) scale(1.15);
}

.move-right {
    transform: translateX(420px) scale(0.85);
}


/*Reserva studiop*/

/* ESTUDIO */

.estudio {
    display: flex;
    min-height: 100vh;
    background: #000;
    color: #fff;
}


/* TEXTO IZQUIERDA */

.estudio-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10%;
}


/* TITULO */

.estudio-texto h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    letter-spacing: 4px;
    margin-bottom: 25px;
}


/* TEXTO */

.estudio-texto p {
    max-width: 500px;
    line-height: 1.7;
    color: #ccc;
    font-size: 15px;
    margin-bottom: 40px;
}


/* BOTÓN */

.btn-estudio {
    display: inline-block;
    padding: 15px 30px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    width: fit-content;
}


/* HOVER BOTÓN */

.btn-estudio:hover {
    background: #fff;
    color: #000;
}


/* IMAGEN DERECHA */

.estudio-img {
    flex: 1;
    overflow: hidden;
}

.estudio-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* FEATURES ESTUDIO */

.features-estudio {
    background: #f2f2f2;
    padding: 80px 8%;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    text-align: center;
    flex-wrap: wrap;
}


/* ITEM */

.feature {
    flex: 1;
    min-width: 220px;
    max-width: 300px;
    margin: auto;
}


/* ICONO */

.feature i {
    font-size: 40px;
    margin-bottom: 20px;
    color: #111;
}


/* TITULO */

.feature h3 {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 600;
    color: #000;  
}


/* TEXTO */

.feature p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}


/*curso de inicio*/

/* CHECKOUT CURSO */

.checkout {
    display: flex;
    min-height: calc(100vh - 120px);
    background: #000;
    color: #fff;
}

/* RESUMEN */

.resumen {
    width: 40%;
    padding: 80px 60px;
    background: #0a0a0a;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.resumen h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

.resumen ul {
    list-style: none;
    padding: 0;
}

.resumen li {
    margin-bottom: 20px;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.resumen span {
    display: block;
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
}

/* FORMULARIO */

.formulario {
    width: 60%;
    padding: 80px 60px;
}

.formulario h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    margin-bottom: 40px;
}

/* GRID */

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

input {
    padding: 14px;
    background: #111;
    border: none;
    color: #fff;
    border-radius: 6px;
}

input:focus {
    background: #1a1a1a;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
}


/* OPCIONES */

.opciones {
    margin-bottom: 30px;
}

.opciones p {
    color: #aaa;
    margin-bottom: 15px;
    font-size: 14px;
}

/* RADIO CUSTOM */

.radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 25px;
    cursor: pointer;
    font-size: 14px;
    color: #ccc;
    position: relative;
}

.radio input {
    display: none;
}

.radio span {
    width: 18px;
    height: 18px;
    border: 2px solid #555;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: 0.3s;
}

.radio span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.3s;
}

/* ACTIVO */

.radio input:checked+span {
    border-color: #fff;
}

.radio input:checked+span::after {
    transform: translate(-50%, -50%) scale(1);
}

/* HOVER */

.radio:hover span {
    border-color: #aaa;
}


/* CHECKBOX CUSTOM */

.checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #aaa;
    position: relative;
}

.check input {
    display: none;
}

.check span {
    width: 18px;
    height: 18px;
    border: 2px solid #555;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    transition: 0.3s;
}

/* TICK */

.check span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: translate(-50%, -60%) rotate(45deg) scale(0);
    transition: 0.3s;
}

/* ACTIVO */

.check input:checked+span {
    border-color: #fff;
    background: #111;
}

.check input:checked+span::after {
    transform: translate(-50%, -60%) rotate(45deg) scale(1);
}

/* HOVER */

.check:hover span {
    border-color: #aaa;
}

/* BOTÓN */

.btn {
    width: 100%;
    padding: 16px;
    background: #fff;
    color: #000;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.btn:hover {
    background: #ddd;
}

/* RESPONSIVE */

@media(max-width:900px) {

    .checkout {
        flex-direction: column;
    }

    .resumen,
    .formulario {
        width: 100%;
    }

}

/* BLOQUE FINAL */

.info-extra {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* BOTÓN CONTENIDO CURSO */

.contenido-curso {
    margin-bottom: 40px;
}

.contenido-curso a {
    display: inline-block;
    padding: 16px 40px;
    border: 1px solid #fff;
    text-decoration: none;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    transition: 0.3s;
}

.contenido-curso a:hover {
    background: #fff;
    color: #000;
}

/* TEXTO INFO */

.contacto-info p {
    margin: 8px 0;
    color: #aaa;
    font-size: 14px;
}

.contacto-info strong {
    color: #fff;
}

/* =========================
   AVISO LEGAL ACADEMY
========================= */

.aviso-legal-academy {

    min-height: 100vh;

    background:
        linear-gradient(to right,
            rgba(20,20,20,0.98),
            rgba(10,10,10,0.96));

    padding: 120px 20px;

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

    color: #fff;
}

/* CONTENEDOR */

.legal-container {

    width: 100%;
    max-width: 900px;
}

/* TITULO */

.legal-container h1 {

    text-align: center;

    color: #ff1e1e;

    font-size: 52px;

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

    letter-spacing: 3px;

    margin-bottom: 15px;
}

/* LINEA */

.line {

    width: 90px;
    height: 3px;

    background: #fff;

    margin: 0 auto 60px;

    border-radius: 20px;
}

/* BLOQUE INFO */

.legal-content {

    margin-bottom: 70px;
}

.legal-content p {

    margin-bottom: 22px;

    font-size: 18px;

    line-height: 1.8;

    color: rgba(255,255,255,0.92);
}

.legal-content strong {

    color: #fff;
}

/* SECCIONES */

.legal-section {

    margin-bottom: 60px;
}

.legal-section h2 {

    color: #ff1e1e;

    font-size: 34px;

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

    letter-spacing: 2px;

    margin-bottom: 20px;
}

.legal-section p {

    font-size: 18px;

    line-height: 1.9;

    color: rgba(255,255,255,0.88);

    max-width: 850px;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .aviso-legal-academy {

        padding: 90px 25px;
    }

    .legal-container h1 {

        font-size: 40px;
    }

    .legal-section h2 {

        font-size: 26px;
    }

    .legal-content p,
    .legal-section p {

        font-size: 16px;

        line-height: 1.7;
    }

}


/* =========================
   POLÍTICA PRIVACIDAD
========================= */

.aviso-legal-academy {

    min-height: 100vh;

    background:
        linear-gradient(to right,
            rgba(20,20,20,0.98),
            rgba(10,10,10,0.96));

    padding: 120px 20px;

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

    color: #fff;
}

/* CONTENEDOR */

.legal-container {

    width: 100%;
    max-width: 900px;
}

/* TITULO */

.legal-container h1 {

    text-align: center;

    color: #ff1e1e;

    font-size: 52px;

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

    letter-spacing: 3px;

    margin-bottom: 15px;
}

/* LINEA */

.line {

    width: 90px;
    height: 3px;

    background: #fff;

    margin: 0 auto 60px;

    border-radius: 20px;
}

/* SECCIONES */

.legal-section {

    margin-bottom: 60px;
}

/* SUBTITULOS */

.legal-section h2 {

    color: #ff1e1e;

    font-size: 34px;

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

    letter-spacing: 2px;

    margin-bottom: 20px;
}

/* PARRAFOS */

.legal-section p {

    font-size: 18px;

    line-height: 1.9;

    color: rgba(255,255,255,0.9);

    max-width: 850px;
}

/* TEXTO DESTACADO */

.legal-section strong {

    color: #fff;
}

/* LISTAS */

.legal-section ul {

    padding-left: 22px;

    margin-top: 15px;
}

.legal-section li {

    margin-bottom: 16px;

    font-size: 18px;

    line-height: 1.8;

    color: rgba(255,255,255,0.9);
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .aviso-legal-academy {

        padding: 90px 25px;
    }

    .legal-container h1 {

        font-size: 40px;
    }

    .legal-section h2 {

        font-size: 26px;
    }

    .legal-section p,
    .legal-section li {

        font-size: 16px;

        line-height: 1.7;
    }

}



/* =========================
   LEGAL PAGE
========================= */

.legal-page {
    min-height: 100vh;

    padding: 100px 20px;

    background:
        linear-gradient(to right,
            #111 0%,
            #1b1b1b 50%,
            #111 100%);

    color: #fff;

    font-family: 'Poppins', sans-serif;
}

/* CONTENEDOR */

.legal-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* TITULO */

.legal-container h1 {
    text-align: center;

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

    font-size: 62px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 20px;

    background: linear-gradient(90deg, #ffb3b3, #ff0000);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* LINEA */

.legal-line {
    width: 80px;
    height: 3px;

    margin: 0 auto 50px;

    border-radius: 30px;

    background: linear-gradient(90deg, #ffffff, #ff0000, #ffffff);
}

/* INTRO */

.intro {
    font-size: 20px;

    line-height: 1.7;

    color: rgba(255,255,255,0.9);

    margin-bottom: 70px;

    max-width: 950px;
}

/* BLOQUES */

.legal-block {
    margin-bottom: 70px;
}

/* SUBTITULOS */

.legal-block h2 {
    color: #ff0000;

    font-size: 38px;

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

    letter-spacing: 1px;

    margin-bottom: 25px;
}

/* TEXTO */

.legal-block p,
.legal-block li {
    font-size: 19px;

    line-height: 1.9;

    color: rgba(255,255,255,0.92);
}

/* LISTA */

.legal-block ul {
    padding-left: 25px;
}

.legal-block li {
    margin-bottom: 18px;
}

/* NEGRITA */

.legal-block strong {
    color: #fff;
}

/* LINKS */

.legal-block a {
    color: #ff0000;

    font-weight: 600;

    text-decoration: underline;
}

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

@media (max-width: 768px) {

    .legal-page {
        padding: 70px 25px;
    }

    .legal-container h1 {
        font-size: 42px;
        line-height: 1.2;
    }

    .intro {
        font-size: 17px;
    }

    .legal-block h2 {
        font-size: 28px;
    }

    .legal-block p,
    .legal-block li {
        font-size: 16px;
    }

}


/* =========================
   CONFIGURAR COOKIES
========================= */

.legal-page {
    min-height: 100vh;

    background:
        linear-gradient(
            90deg,
            #1d1d1d 0%,
            #111 20%,
            #1a1a1a 50%,
            #111 80%,
            #1d1d1d 100%
        );

    padding: 120px 20px 80px;

    color: #fff;

    font-family: 'Poppins', sans-serif;
}

/* CONTENEDOR */

.legal-container {
    max-width: 900px;
    margin: 0 auto;
}

/* TITULO */

.legal-container h1 {
    text-align: center;

    font-size: 62px;

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

    letter-spacing: 2px;

    margin-bottom: 20px;

    background: linear-gradient(90deg, #ffb3b3, #ff0000);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* LINEA */

.legal-line {
    width: 90px;
    height: 3px;

    margin: 0 auto 50px;

    background: linear-gradient(90deg, #fff, red, #fff);

    border-radius: 20px;
}

/* INTRO */

.intro {
    text-align: center;

    font-size: 26px;

    line-height: 1.8;

    color: #f1f1f1;

    margin-bottom: 50px;
}

/* FORMULARIO */

.cookies-form {
    display: flex;
    flex-direction: column;

    gap: 22px;

    align-items: flex-start;

    max-width: 700px;

    margin: 0 auto;
}

/* LABELS */

.cookies-form label {
    font-size: 23px;

    color: #fff;

    display: flex;
    align-items: center;

    gap: 14px;
}

/* CHECKBOX */

.cookies-form input[type="checkbox"] {
    width: 20px;
    height: 20px;

    accent-color: red;

    cursor: pointer;
}

/* BOTON */

.cookies-form button {
    margin-top: 20px;

    padding: 14px 30px;

    background: red;

    color: #fff;

    border: none;

    border-radius: 6px;

    font-size: 17px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s ease;
   
}


 .cookies-form button a {
    color: #fff;
    text-decoration: none;
}

.cookies-form button a:visited {
    color: #fff;
}

.cookies-form button a:hover {
    color: #000;
}


.cookies-form button:hover {
    background: #fff;
    color: #000;
}

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

@media (max-width: 768px) {

    .legal-page {
        padding: 90px 20px 60px;
    }

    .legal-container h1 {
        font-size: 42px;
    }

    .intro {
        font-size: 18px;
    }

    .cookies-form label {
        font-size: 18px;
        line-height: 1.6;
    }

    .cookies-form button {
        width: 100%;
        text-align: center;
    }

}

/* =========================
   COOKIE BANNER PRO
========================= */

.cookie-banner {

    position: fixed;

    bottom: 25px;
    left: 50%;

    transform: translateX(-50%);

    width: 92%;
    max-width: 600px;

    background:
        linear-gradient(
            145deg,
            rgba(15,15,15,0.98),
            rgba(5,5,5,0.98)
        );

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 24px;

    padding: 30px;

    z-index: 999999;

    backdrop-filter: blur(18px);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.65),
        0 0 30px rgba(255,0,0,0.06);

    animation: cookieFade 0.5s ease;
}

/* CONTENIDO */

.cookie-content {

    display: flex;
    flex-direction: column;
}

/* TITULO */

.cookie-content h4 {

    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 38px;

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

    letter-spacing: 1px;

    color: #fff;

    margin-bottom: 18px;
}


/* TEXTO */

.cookie-content p {

    color: rgba(255,255,255,0.72);

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 28px;

    max-width: 95%;
}

/* BOTONES */

.cookie-actions {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;
}

/* BOTON PRINCIPAL */

.cookie-btn {

    background:
        linear-gradient(
            135deg,
            #ff1a1a,
            #cc0000
        );

    color: #fff;

    border: none;

    padding: 16px 26px;

    border-radius: 14px;

    cursor: pointer;

    font-size: 15px;
    font-weight: 600;

    letter-spacing: 0.5px;

    transition: all 0.35s ease;

    box-shadow:
        0 10px 25px rgba(255,0,0,0.25);
}

.cookie-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 35px rgba(255,0,0,0.35);

    background:
        linear-gradient(
            135deg,
            #ff3333,
            #ff0000
        );
}

/* BOTONES SECUNDARIOS */

.cookie-secondary {

    background: rgba(255,255,255,0.03);

    color: #fff;

    border: 1px solid rgba(255,255,255,0.08);

    padding: 16px 24px;

    border-radius: 14px;

    cursor: pointer;

    font-size: 15px;
    font-weight: 500;

    transition: all 0.35s ease;
}

.cookie-secondary:hover {

    background: #fff;

    color: #000;

    transform: translateY(-3px);
}

/* ANIMACION */

@keyframes cookieFade {

    from {

        opacity: 0;

        transform:
            translateX(-50%)
            translateY(40px)
            scale(0.96);
    }

    to {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }

}

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

@media (max-width: 768px) {

    .cookie-banner {

        width: calc(100% - 24px);

        bottom: 12px;

        padding: 24px;

        border-radius: 20px;
    }

    .cookie-content h4 {

        font-size: 28px;
    }

    .cookie-content p {

        font-size: 15px;

        max-width: 100%;
    }

    .cookie-actions {

        flex-direction: column;
    }

    .cookie-btn,
    .cookie-secondary {

        width: 100%;
    }

}