/*=========================================================
RILION GRACIE SAN RAFAEL
STYLE.CSS
=========================================================*/

body{

    font-family:var(--font-text);

    background:var(--black);

    color:var(--white);

    overflow-x:hidden;

    line-height:1.6;

}

/*=========================================================
CONTAINER
=========================================================*/

.container{

    width:100%;

    max-width:var(--container);

    margin:auto;

    /* El padding hace de aire lateral en pantallas chicas.
       Con box-sizing:border-box no agranda el contenedor. */

    padding-inline:var(--container-padding);

}

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

section{

    padding:var(--section-padding) 0;

    position:relative;

    /* Que el header fijo no tape el título
       cuando se llega por un link del menú */

    scroll-margin-top:var(--header-height);

}

/*=========================================================
TÍTULOS
=========================================================*/

.section-tag{

    display:inline-block;

    color:var(--primary);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

    text-transform:uppercase;

}

/* Todos los títulos de sección comparten tipografía y
   escala, tengan la clase .section-title o no.

   Si una sección necesita otro tamaño, se sobreescribe
   más abajo (ver #cta h2). */

section h2,
.section-title{

    font-family:var(--font-title);

    font-size:var(--fs-h2);

    line-height:1;

    margin-bottom:20px;

    overflow-wrap:break-word;

}

.section-description{

    max-width:720px;

    color:var(--gray-300);

    font-size:var(--fs-body);

}

/*=========================================================
TEXTOS DECORATIVOS

Estos textos no se pueden seleccionar, a propósito.

En el celular, un toque largo o un doble tap sobre un
título lo selecciona y lo pinta con el naranja del
::selection (está en reset.css), y parece un error de
diseño en vez de una selección.

OJO: esto va SÓLO en los títulos.

Los párrafos, la dirección, el teléfono y el usuario de
Instagram tienen que seguir siendo copiables, así que no
los agregues a esta lista.
=========================================================*/

.logo-text,
.hero-subtitle,
.hero-content h1,
.section-tag,
section h2,
.section-title{

    /* El prefijo -webkit- todavía hace falta en Safari iOS */

    -webkit-user-select:none;

    user-select:none;

}

/*=========================================================
BOTONES
=========================================================*/

/* min-height:48px = área táctil mínima recomendada
   para que el dedo no falle en mobile */

.btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    min-height:48px;

    padding:16px clamp(24px, 4vw, 38px);

    border-radius:60px;

    background:var(--primary);

    color:white;

    font-weight:700;

    text-align:center;

    transition:var(--transition);

}

.btn-secondary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-height:48px;

    padding:16px clamp(24px, 4vw, 38px);

    border-radius:60px;

    opacity:.85;

    border:2px solid var(--primary);

    color:white;

    text-align:center;

    transition:var(--transition);

}

/* Los :hover van dentro de @media (hover:hover) para que
   en pantallas táctiles no queden "trabados" después de
   tocar: el celular simula un hover que no se va solo. */

@media (hover:hover){

    .btn-primary:hover{

        transform:translateY(-4px);

        background:var(--primary-light);

    }

    .btn-secondary:hover{

        background:var(--primary);

        opacity:1;

    }

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

#header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

    z-index:999;

    transition:.35s ease;

}

#header.scrolled{

    background:rgba(5,5,5,.88);

    backdrop-filter:blur(18px);

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

}

.header-container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*=========================
LOGO
=========================*/

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:clamp(42px, 6vw, 54px);

}

.logo-text{

    display:flex;

    flex-direction:column;

    line-height:1;

}

.logo-text span{

    font-family:var(--font-title);

    font-size:clamp(1.05rem, 3vw, 1.35rem);

    letter-spacing:1px;

    white-space:nowrap;

}

.logo-text small{

    color:var(--primary);

    font-size:clamp(.62rem, 1.6vw, .72rem);

    letter-spacing:clamp(1px, .4vw, 3px);

    margin-top:3px;

    white-space:nowrap;

}

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

/* El menú de escritorio arranca oculto (mobile-first) y
   aparece a partir de 992px en responsive.css */

.desktop-menu{

    display:none;

}

.desktop-menu ul{

    display:flex;

    gap:clamp(20px, 2.6vw, 38px);

}

.desktop-menu a{

    font-size:.95rem;

    font-weight:600;

    transition:.3s;

    position:relative;

}

.desktop-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

@media (hover:hover){

    .desktop-menu a:hover{

        color:var(--primary);

    }

    .desktop-menu a:hover::after{

        width:100%;

    }

}

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

/* En mobile este botón no se muestra: su lugar lo ocupa
   el mismo CTA dentro del menú desplegable.
   Aparece a partir de 992px (ver responsive.css). */

.btn-header{

    display:none;

    background:var(--primary);

    color:#fff;

    padding:14px 28px;

    border-radius:40px;

    font-size:.92rem;

    font-weight:700;

    transition:.3s;

}

@media (hover:hover){

    .btn-header:hover{

        background:var(--primary-light);

        transform:translateY(-2px);

    }

}

/*=========================================================
MENÚ MOBILE
=========================================================*/

/*=========================
BOTÓN HAMBURGUESA

Se muestra hasta 991px y se
convierte en una "X" cuando el
menú está abierto.

El estado vive en el atributo
aria-expanded (lo cambia menu.js),
así el CSS y el lector de pantalla
leen la misma verdad.
=========================*/

#menu-toggle{

    /* 44px = área táctil mínima */

    width:44px;

    height:44px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

}

#menu-toggle span{

    display:block;

    width:26px;

    height:2px;

    border-radius:2px;

    background:var(--white);

    transition:var(--transition);

}

/* Abierto: la primera y la última se cruzan,
   la del medio se desvanece */

#menu-toggle[aria-expanded="true"] span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

#menu-toggle[aria-expanded="true"] span:nth-child(2){

    opacity:0;

}

#menu-toggle[aria-expanded="true"] span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

/*=========================
OVERLAY

Ocupa toda la pantalla.
Arranca invisible y sin recibir
clicks; la clase .open lo muestra.
=========================*/

/* z-index 998 = JUSTO DEBAJO del #header (999).

   Es a propósito: el header tiene que quedar visible
   por encima del overlay, porque ahí está la "X" con la
   que se cierra el menú. Si el overlay quedara arriba,
   taparía el botón y no habría forma de cerrarlo.

   El padding-top de abajo reserva el alto del header
   para que los links no queden debajo. */

.mobile-menu{

    position:fixed;

    inset:0;

    z-index:998;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:clamp(18px, 4vh, 34px);

    padding:calc(var(--header-height) + 24px) var(--container-padding) 40px;

    background:rgba(5,5,5,.97);

    backdrop-filter:blur(12px);

    /* Si el menú es más alto que la pantalla
       (celular chico en horizontal), scrollea */

    overflow-y:auto;

    opacity:0;

    visibility:hidden;

    transition:
        opacity var(--transition),
        visibility var(--transition);

}

.mobile-menu.open{

    opacity:1;

    visibility:visible;

}

.mobile-menu ul{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:clamp(10px, 2vh, 20px);

    width:100%;

}

.mobile-menu a{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:48px;

    padding:4px 16px;

    font-family:var(--font-title);

    font-size:clamp(1.6rem, 7vw, 2.4rem);

    letter-spacing:1px;

    color:var(--white);

    transition:color var(--transition);

}

.mobile-menu a:hover,
.mobile-menu a:focus-visible{

    color:var(--primary);

}

/* CTA de WhatsApp dentro del menú */

.mobile-menu .btn-primary{

    width:100%;

    max-width:340px;

}

/* Fila de redes al pie del menú */

.mobile-menu-social{

    display:flex;

    justify-content:center;

    gap:14px;

}

.mobile-menu-social a{

    width:48px;

    height:48px;

    min-height:48px;

    padding:0;

    border-radius:50%;

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

    font-size:1.2rem;

    color:var(--primary);

}

.mobile-menu-social a:hover,
.mobile-menu-social a:focus-visible{

    border-color:var(--primary);

    background:rgba(245,130,32,.12);

}

/* Bloquea el scroll del fondo mientras el menú está abierto.
   La clase la pone y la saca menu.js. */

body.menu-open{

    overflow:hidden;

}

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

#home{

    position:relative;

    min-height:100svh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    padding-top:clamp(90px,7vw,130px);

    /* Suficiente aire abajo para que la flecha
       .scroll-down no se monte sobre los botones */

    padding-bottom:clamp(85px,7vw,100px);

}


.hero-bg{

    position:absolute;

    inset:0;

    z-index:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:
            brightness(.48)
            contrast(1.08)
            saturate(1.05);

}

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.78)
    );

}

.hero-content{

    position:relative;

    z-index:2;

    width:100%;

    max-width:var(--container);

    margin:auto;

    padding-inline:var(--container-padding);

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero-logo{

    width:clamp(110px,9vw,180px);

    height:auto;

    margin-bottom:clamp(18px,2vw,30px);

}

.hero-subtitle{

    display:block;

    color:var(--primary);

    font-size:var(--fs-small);

    letter-spacing:clamp(2px, .8vw, 4px);

    margin-bottom:20px;

    font-weight:700;

}


.hero-content h1{

    font-family:var(--font-title);

    font-size:var(--fs-h1);

    line-height:.95;

    margin-bottom:25px;

    /* Corta palabras larguísimas antes que
       desbordar en pantallas angostas */

    overflow-wrap:break-word;

    /* Reparte las palabras parejo entre renglones para que
       no quede una sola palabra colgada en la última línea
       (en 320px pasaba con "TATAMI").

       Los navegadores que no lo soportan lo ignoran y
       cortan como siempre. */

    text-wrap:balance;

}

.hero-content h1 span{

    display:block;

    color:var(--primary);

}

.hero-content p{

    max-width:700px;

    margin:0 auto clamp(28px, 4vw, 45px);

    color:var(--gray-200);

    font-size:var(--fs-body);

}

/* En mobile los botones se apilan a lo ancho;
   desde 480px se ponen uno al lado del otro
   (ver responsive.css) */

.hero-buttons{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:14px;

    width:100%;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

    width:100%;

    max-width:340px;

}

.scroll-down{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    font-size:28px;

    color:var(--primary);

    animation:float 2s infinite;

}

@keyframes float{

    0%,100%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,12px);

    }

}
/*=========================================================
ABOUT
=========================================================*/

#about{

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(
        circle at 70% 35%,
        rgba(255,120,0,.08),
        transparent 35%
    ),

    linear-gradient(
        180deg,
        #0c0c0c,
        #070707
    );

}

.text-Orange {
    color: #ff7a00;
    font-weight: 700;
}

/* Una columna en mobile, dos desde 992px
   (ver responsive.css) */

.about-container{

    display:grid;

    grid-template-columns:1fr;

    gap:clamp(32px, 6vw, 90px);

    align-items:center;

}

#about::before{

    content:"";

    position:absolute;
    inset:0;

    background:url("../assets/images/texture.webp") center/cover;

    opacity:.06;

    pointer-events:none;

}

.about-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:flex-end;

}

.about-image::before{

    content:"";

    position:absolute;

    /* El resplandor naranja acompaña el tamaño de
       la foto en vez de quedar fijo en 560px */

    width:min(560px, 110%);

    aspect-ratio:1;

    left:50%;

    top:45%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,140,0,.22) 0%,
            rgba(255,140,0,.12) 35%,
            rgba(255,140,0,.05) 55%,
            transparent 75%
        );

    filter:blur(50px);

    opacity:.8;

    z-index:-2;

}

.about-image img{

    width:80%;

    max-width:500px;

    height:auto;

    border-radius:0;

    box-shadow:none;

    filter:

    drop-shadow(0 12px 18px rgba(0,0,0,.25))

    drop-shadow(0 35px 55px rgba(0,0,0,.35))

    drop-shadow(0 65px 80px rgba(0,0,0,.20));
}

.about-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.about-content h2{

    margin-bottom:30px;

}

.about-content p{

    margin-bottom:22px;

    color:var(--gray-200);

    font-size:var(--fs-body);

}

/* En mobile el botón ocupa el ancho disponible */

.about-content .btn-primary{

    width:100%;

    max-width:340px;

}

.about-card{

    background:#111;

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

    border-radius:20px;

    min-height:220px;

    padding:30px 24px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.35s;

}

.about-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary); 

}

.about-card span{

    display:block;

    font-size:.95rem;

    font-weight:600;

}



/* =======================================================
   LOGROS Y RECONOCIMIENTOS
======================================================= */
/*==================================================
                ACHIEVEMENTS
==================================================*/

#achievements{

    position:relative;

    padding:var(--section-padding) 0;

    background:
        linear-gradient(
            180deg,
            #080808,
            #0d0d0d
        );

}

.achievements-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

#achievements h2{

    margin:15px 0 clamp(30px, 4vw, 50px);

}

#achievements h2::after{

    content:"";

    display:block;

    width:90px;

    height:3px;

    margin:22px auto 0;

    background:var(--primary);

    border-radius:50px;

}


.achievement-slider{

    width:100%;

    overflow:hidden;

    position:relative;

}

.achievement-track{

    display:flex;

    align-items:center;

    width:max-content;

    animation:achievementScroll 30s linear infinite;

}

/* La separación va como margin de cada medalla y NO como
   gap del track. Con gap, el translateX(-50%) de la
   animación se corre medio espacio y el bucle da un salto;
   con margin, cada medalla mide siempre lo mismo (ancho +
   separación) y la vuelta al inicio es exacta. */

.achievement-item{

    flex:0 0 auto;

    width:clamp(100px, 22vw, 150px);

    height:clamp(115px, 25vw, 170px);

    margin-inline:clamp(9px, 2.4vw, 17px);

    display:flex;

    justify-content:center;

    align-items:center;

    perspective:1200px;

}
.achievement-item img{

    width:clamp(72px, 16vw, 110px);

    transition:

        transform .45s ease,

        filter .45s ease;

    filter:

        drop-shadow(0 10px 18px rgba(0,0,0,.45));

}
@media (hover:hover){

    .achievement-item:hover img{

        transform:

            translateY(-14px)

            rotateY(12deg)

            scale(1.12);

        filter:

            drop-shadow(0 18px 30px rgba(0,0,0,.55))

            drop-shadow(0 0 22px rgba(255,140,0,.55));

    }

    .achievement-slider:hover .achievement-track{

        animation-play-state:paused;

    }

}

@keyframes achievementScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}


/*=========================================================
TRAINING
=========================================================*/

#training{

    background:#070707;

}

/* 1 columna en mobile → 2 en tablet → 4 en desktop
   (los saltos están en responsive.css) */

.training-grid{

    margin-top:clamp(36px, 5vw, 70px);

    display:grid;

    grid-template-columns:1fr;

    gap:var(--gap-grid);

}

/* Es flex en columna para que .training-content pueda
   estirarse con flex:1 y el botón se pegue abajo con
   margin-top:auto */

.training-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#101010;

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

    transition:.35s;

    display:flex;

    flex-direction:column;

    min-height:clamp(340px, 48vw, 420px);

    width:100%;

}

.training-card img{

    width:100%;

    height:clamp(160px, 22vw, 190px);

    object-fit:cover;

    display:block;

    flex-shrink:0;

    transition:transform .45s ease, filter .45s ease;

}

.training-content{

    padding:clamp(18px, 3vw, 22px);

    display:flex;

    flex-direction:column;

    flex:1;

}

.training-content span{

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

}

.training-content h3{

    margin:10px 0;

    font-size:var(--fs-h3);

    line-height:1;

    font-family:var(--font-title);

}

.training-content p{

    color:var(--gray-300);

    font-size:var(--fs-small);

}

.training-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:clamp(12px, 2vw, 18px);

    padding:clamp(20px, 4vw, 30px);

    background:
        linear-gradient(
            rgba(15,15,15,.93),
            rgba(15,15,15,.93)
        );

    backdrop-filter:blur(5px);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:
        opacity .35s,
        transform .35s,
        visibility .35s;

    overflow-y:auto;

    z-index:20;

}

.training-overlay.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.training-overlay span{

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.training-overlay h3{

    font-family:var(--font-title);

    font-size:var(--fs-h3);

    line-height:1;

}

.training-overlay p{

    color:#f1f1f1;

    line-height:1.75;

    font-size:var(--fs-small);

    flex:1;

    overflow-y:auto;

    padding-right:8px;

}

.training-btn{

    margin-top:auto;

    align-self:flex-start;

    min-height:44px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:50px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.close-training{

    margin-top:20px;

    align-self:flex-start;

    min-height:44px;

    background:none;

    border:2px solid var(--primary);

    color:#fff;

    padding:10px 24px;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

}

@media (hover:hover){

    .training-btn:hover{

        transform:translateY(-2px);

        box-shadow:0 12px 30px rgba(245,130,32,.35);

    }

    .close-training:hover{

        background:var(--primary);

    }

    .training-card:hover{

        transform:translateY(-8px);

        border-color:var(--primary);

        box-shadow:0 20px 50px rgba(245,130,32,.12);

    }

    .training-card:hover img{

        transform:scale(1.08);

        filter:brightness(.88);

    }

}
.training-overlay p::-webkit-scrollbar{

    width:6px;

}

.training-overlay p::-webkit-scrollbar-track{

    background:#1b1b1b;

    border-radius:20px;

}

.training-overlay p::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

.training-overlay p::-webkit-scrollbar-thumb:hover{

    background:#ff9d35;

}

/* Los breakpoints de .training-grid viven en responsive.css */


/*====================================
=            SEMINARIOS
====================================*/

#seminars{
    background:#070707;
    padding:var(--section-padding) 0;
}

/* El min() es la clave: sin él, minmax(420px,...) fuerza
   420px de ancho aunque la pantalla mida 360px y la
   página desborda a lo ancho.

   Con min(100%, 420px) la columna nunca pide más de lo
   que hay disponible. */

.seminars-grid{
    margin-top:clamp(36px, 5vw, 70px);
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap:var(--gap-grid);
}

.seminar-card{

    position:relative;
    overflow:hidden;

    min-height:clamp(400px, 60vw, 460px);

    border-radius:24px;

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

    background:#111;

    transition:.35s;

}

@media (hover:hover){

    .seminar-card:hover{

        transform:translateY(-8px);

        border-color:var(--primary);

        box-shadow:0 20px 60px rgba(245,130,32,.18);

    }

    .seminar-card:hover img{

        transform:scale(1.05);

    }

    .seminar-btn:hover{

        transform:scale(1.08) rotate(90deg);

    }

    .close-seminar:hover{

        background:var(--primary);

    }

}

.seminar-card img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.45s;

}

/*==========================
    VISTA NORMAL
==========================*/

.seminar-content{

    position:absolute;
    inset:0;

    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:clamp(22px, 4vw, 32px);

    background:linear-gradient(
        to top,
        rgba(0,0,0,.92),
        rgba(0,0,0,.20),
        transparent
    );

}

.seminar-content span{

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:8px;

}

.seminar-content h3{

    color:#fff;

    font-family:var(--font-title);

    font-size:var(--fs-h3);

    margin-bottom:20px;

    /* Deja libre la esquina donde está el botón "+"
       para que el título no se le meta debajo */

    padding-right:64px;

}

.seminar-btn{

    position:absolute;

    right:22px;

    bottom:22px;

    width:52px;

    height:52px;

    border-radius:50%;

    border:none;

    background:var(--primary);

    color:#fff;

    font-size:2rem;

    font-weight:300;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;
}

/*==========================
      OVERLAY
==========================*/

.seminar-overlay{

    position:absolute;

    inset:0;

    z-index:5;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:clamp(12px, 2vw, 18px);

    padding:clamp(22px, 4vw, 35px);

    background:rgba(10,10,10,.94);

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

}

.seminar-overlay.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.seminar-overlay span{

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

}

.seminar-overlay h3{

    color:#fff;

    font-family:var(--font-title);

    font-size:var(--fs-h3);

}

.seminar-overlay p{

    color:#ddd;

    line-height:1.8;

    font-size:var(--fs-small);

    overflow:auto;

    flex:1;

}

/* Scroll elegante */

.seminar-overlay p::-webkit-scrollbar{

    width:6px;

}

.seminar-overlay p::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:999px;

}

/*==========================
        BOTÓN
==========================*/

.close-seminar{

    width:min(180px, 100%);

    min-height:48px;

    align-self:flex-start;

    border-radius:999px;

    border:2px solid var(--primary);

    background:transparent;

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

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

#cta{

    position:relative;

    overflow:hidden;

    padding:clamp(80px, 12vw, 170px) 0;

    text-align:center;

    background:#050505;

}

.cta-bg{

    position:absolute;

    inset:0;

    background:

        url("../assets/images/particles.webp"),

        radial-gradient(circle at center,
        rgba(245,130,32,.18),
        transparent 55%),

        linear-gradient(
        rgba(0,0,0,.88),
        rgba(0,0,0,.92));

    background-size:cover;

    opacity:.9;

}

#cta .container{

    position:relative;

    z-index:2;

}

/* Este título es el más grande de la página,
   por eso lleva su propia escala */

#cta h2{

    font-size:clamp(2.3rem, 7vw, 6rem);

    line-height:.95;

    margin:25px auto;

    max-width:900px;

}

#cta p{

    max-width:700px;

    margin:auto;

    color:var(--gray-200);

    font-size:var(--fs-body);

}

/* Apilados en mobile, en fila desde 480px
   (ver responsive.css) */

.cta-buttons{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-top:clamp(34px, 5vw, 60px);

}

.cta-buttons .btn-primary,
.cta-buttons .btn-secondary{

    width:100%;

    max-width:340px;

}



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

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

#schedule{

    background:#070707;

    padding:var(--section-padding) 0;

}

/* 1 columna en mobile → 2 en tablet → 3 en desktop
   (los saltos están en responsive.css) */

.schedule-grid{

    margin-top:clamp(34px, 5vw, 60px);

    display:grid;

    grid-template-columns:1fr;

    gap:var(--gap-grid);

}

/* CARD */

.schedule-card{

    position:relative;

    padding:clamp(24px, 4vw, 32px) clamp(20px, 3.5vw, 28px);

    border-radius:28px;
    
    min-height:200px;

    background:
    linear-gradient(
        180deg,
        #151515 0%,
        #111111 70%,
        rgba(245,130,32,.18) 100%
    );
    display:flex;

    flex-direction:column;

    border:1px solid rgba(245,130,32,.18);

    transition:.35s;

    overflow:hidden;

}

.schedule-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(245,130,32,.18),
        transparent 45%
    );

    opacity:0;

    transition:.35s;

}

@media (hover:hover){

    .schedule-card:hover{

        transform:translateY(-10px);

        border-color:var(--primary);

        box-shadow:
        0 20px 60px rgba(245,130,32,.18);

    }

    .schedule-card:hover::before{

        opacity:1;

    }

}

/* TITULO */

.schedule-card h3{

    font-family:var(--font-title);

    font-size:var(--fs-h3);

    margin-bottom:12px;

    color:#fff;

}

.card-subtitle{

    color:var(--gray-300);

    line-height:1.6;

    font-size:var(--fs-small);

    margin-bottom:clamp(18px, 3vw, 28px);

}

.schedule-card hr{

    border:none;

    height:1px;

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

    margin:clamp(18px, 3vw, 28px) 0;

}

/* LISTA */

.schedule-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.schedule-card li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ececec;

    margin-bottom:8px;

    font-size:var(--fs-body);

}

.schedule-card li i{

    color:var(--primary);

    font-size:18px;

}

.schedule-card .hour{

    margin-left:30px;

    color:var(--primary);

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:24px;

}

/* BOTON */

.btn-card{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:auto;

    min-height:48px;

    padding:16px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

@media (hover:hover){

    .btn-card:hover{

        transform:translateY(-3px);

        box-shadow:
        0 15px 35px rgba(245,130,32,.35);

    }

}

/* .btn-card.outline (botón "Consultar") hoy se ve igual
   que .btn-card: sus reglas eran idénticas y se borraron
   para no duplicar. La clase queda en el HTML como enganche
   por si más adelante querés diferenciarlo. */

/* Los breakpoints de .schedule-grid viven en responsive.css */

.schedule-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(245,130,32,.18);

    filter:blur(80px);

    right:-80px;

    bottom:-80px;

    z-index:0;

    opacity:.35;

}

.schedule-card > *{

    position:relative;

    z-index:2;

}

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

.contact-intro{

    max-width:720px;

    color:var(--gray-300);

    font-size:var(--fs-body);

}

/* Datos y mapa apilados en mobile; en dos columnas
   desde 992px (ver responsive.css) */

.contact-grid{

    margin-top:clamp(36px, 5vw, 70px);

    display:grid;

    grid-template-columns:1fr;

    gap:clamp(24px, 3.5vw, 50px);

    align-items:stretch;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:clamp(18px, 3vw, 24px);

    background:#101010;

    border-radius:18px;

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

    text-decoration:none;

    color:#fff;

    transition:.35s;

}

@media (hover:hover){

    .contact-item:hover{

        border-color:var(--primary);

        transform:translateX(8px);

    }

}

.contact-item i{

    /* flex-shrink:0 para que el círculo no se achate
       cuando el texto de al lado es largo */

    flex-shrink:0;

    width:clamp(44px, 10vw, 54px);

    aspect-ratio:1;

    border-radius:50%;

    background:#171717;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:22px;

}

.contact-item strong{

    display:block;

    margin-bottom:8px;

    font-size:1rem;

}

.contact-item span{

    color:#bdbdbd;

    line-height:1.6;

}

.contact-info .btn-primary{

    margin-top:15px;

}

/*=========================
MAPA

.contact-map es el marco redondeado
y #academy-map es el div que Leaflet
llena por dentro.

La altura la define el marco; el div
de adentro la copia con height:100%.
=========================*/

.contact-map{

    overflow:hidden;

    border-radius:24px;

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

    height:clamp(320px, 55vw, 520px);

}

#academy-map{

    width:100%;

    height:100%;

}


.leaflet-container{

    filter:

        grayscale(.15)

        contrast(1.08)

        brightness(.95);

}

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

#footer{

    background:#050505;

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

}

/* Una columna en mobile, tres desde 768px
   (ver responsive.css) */

.footer-container{

    display:grid;

    grid-template-columns:1fr;

    gap:clamp(32px, 4vw, 60px);

    padding:clamp(48px, 7vw, 80px) 0;

}

.footer-brand img{

    width:clamp(90px, 14vw, 120px);

    margin-bottom:25px;

}

.footer-brand p{

    color:var(--gray-300);

    font-size:var(--fs-small);

    max-width:420px;

}

.footer-links,
.footer-social{

    display:flex;

    flex-direction:column;

    /* Poco gap porque cada link ya tiene min-height:40px */

    gap:6px;

}

.footer-links h4,
.footer-social h4{

    color:var(--primary);

    margin-bottom:12px;

}

.footer-links a,
.footer-social a{

    display:flex;

    align-items:center;

    gap:10px;

    /* Área táctil cómoda en la lista de links */

    min-height:40px;

    color:var(--gray-300);

    transition:.3s;

}

.footer-links a:hover,
.footer-social a:hover,
.footer-links a:focus-visible,
.footer-social a:focus-visible{

    color:var(--primary);

}

.footer-bottom{

    text-align:center;

    padding:25px;

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

    color:var(--gray-400);

    font-size:.9rem;

}