/* ==================================================
   AEROCASPE - ESCUELA DE PARAMOTOR
================================================== */


/* ==================================================
   REINICIO GENERAL
================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins', Arial, sans-serif;

    background:#f4f7f9;
    color:#243746;

    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}


/* ==================================================
   CABECERA
================================================== */

.cabecera{
    position:absolute;

    top:0;
    left:0;

    z-index:1000;

    width:100%;

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

    padding:16px 55px;

    background:
        linear-gradient(
            to bottom,
            rgba(4,20,34,.88),
            rgba(4,20,34,.20),
            transparent
        );
}


.enlace-logo{
    display:block;
    line-height:0;
}


.logo{
    width:88px;
    height:88px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 7px 14px rgba(0,0,0,.45)
        );

    transition:
        transform .3s ease;
}


.logo:hover{
    transform:scale(1.06);
}


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

.menu-principal{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;

    gap:24px;
}


.menu-principal a{
    position:relative;

    color:#ffffff;

    text-decoration:none;

    font-size:.94rem;
    font-weight:600;

    white-space:nowrap;

    text-shadow:
        0 2px 7px rgba(0,0,0,.65);

    transition:
        color .25s ease;
}


.menu-principal a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:#75d3fa;

    transition:
        width .3s ease;
}


.menu-principal a:hover,
.menu-principal a.activo{
    color:#75d3fa;
}


.menu-principal a:hover::after,
.menu-principal a.activo::after{
    width:100%;
}


/* ==================================================
   PORTADA ESCUELA
================================================== */

.hero-escuela{
    position:relative;

    width:100%;
    min-height:78vh;

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

    overflow:hidden;

    padding:140px 6% 70px;

    color:#ffffff;
    text-align:center;

    background:
        linear-gradient(
            135deg,
            #061b2a,
            #0d3a55
        );
}


/*
   Fondo desenfocado.

   Esto rellena los laterales sin tener que estirar
   exageradamente el GIF principal.
*/

.hero-escuela::before{
    content:"";

    position:absolute;

    inset:-25px;

    z-index:0;

    background:
        url("../gif/paramotor.gif")
        center center / cover no-repeat;

    filter:
        blur(22px)
        saturate(1.15)
        brightness(.72);

    transform:scale(1.10);

    opacity:.80;
}


/* ==================================================
   GIF PRINCIPAL
================================================== */

.video-fondo{
    position:absolute;

    top:50%;
    left:50%;

    z-index:1;

    /*
       IMPORTANTE:

       No utilizamos width:100%.
       Así evitamos estirar un GIF de poca resolución
       hasta llenar toda una pantalla panorámica.
    */

    width:auto;

    height:min(78vh, 654px);

    max-width:100%;

    object-fit:contain;

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

    image-rendering:auto;

    filter:
        saturate(1.10)
        contrast(1.04)
        brightness(1.03);

    box-shadow:
        0 0 55px rgba(0,0,0,.30);
}


/* ==================================================
   OSCURECIMIENTO PORTADA
================================================== */

.capa-video{
    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            to bottom,
            rgba(2,15,26,.08) 0%,
            rgba(2,15,26,.20) 50%,
            rgba(2,15,26,.62) 100%
        );
}


/* ==================================================
   TEXTO PORTADA
================================================== */

.hero-contenido{
    position:relative;

    z-index:3;

    width:min(1000px, 94%);

    animation:
        entrada-texto
        1s ease both;
}


.hero-etiqueta{
    margin-bottom:14px;

    color:#8edcff;

    font-size:.84rem;
    font-weight:700;

    letter-spacing:5px;

    text-transform:uppercase;

    text-shadow:
        0 3px 10px rgba(0,0,0,.55);
}


.hero-contenido h1{
    margin-bottom:18px;

    font-family:'Cinzel', serif;

    font-size:
        clamp(2.7rem, 6vw, 5.3rem);

    line-height:1.05;

    letter-spacing:2px;

    text-transform:uppercase;

    text-shadow:
        0 8px 28px rgba(0,0,0,.72);
}


.hero-subtitulo{
    color:#f5fbff;

    font-size:
        clamp(1.15rem, 2.4vw, 1.9rem);

    font-weight:300;

    text-shadow:
        0 4px 14px rgba(0,0,0,.72);
}


/* ==================================================
   PRESENTACIÓN
================================================== */

.presentacion{
    padding:90px 25px;

    background:
        radial-gradient(
            circle at top right,
            rgba(90,185,225,.13),
            transparent 34%
        ),
        #ffffff;
}


.presentacion-contenido{
    width:min(1050px, 92%);

    margin:auto;
}


.presentacion-texto{
    max-width:900px;

    margin:auto;

    text-align:center;
}


.seccion-etiqueta{
    margin-bottom:12px;

    color:#3187b2;

    font-size:.82rem;
    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;
}


.presentacion-texto h2{
    margin-bottom:25px;

    color:#173f5d;

    font-family:'Cinzel', serif;

    font-size:
        clamp(2rem, 4vw, 3.3rem);

    line-height:1.22;
}


.presentacion-texto p{
    max-width:850px;

    margin:0 auto 18px;

    color:#526979;

    font-size:1.08rem;

    line-height:1.85;

    text-align:center;
}


/* ==================================================
   FORMACIÓN
================================================== */

.formacion{
    width:100%;

    padding:100px 5%;

    overflow:hidden;

    color:#ffffff;

    background:
        radial-gradient(
            circle at top right,
            rgba(105,207,244,.13),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0b3049,
            #17617f
        );
}


/* ==================================================
   CABECERA FORMACIÓN
================================================== */

.formacion-cabecera{
    width:min(900px, 92%);

    margin:0 auto 50px;

    text-align:center;
}


.formacion-cabecera .seccion-etiqueta{
    color:#8fe2ff;
}


.formacion-cabecera h2{
    margin-bottom:18px;

    color:#ffffff;

    font-family:'Cinzel', serif;

    font-size:
        clamp(2.2rem, 5vw, 4rem);

    line-height:1.2;

    text-shadow:
        0 4px 12px rgba(0,0,0,.25);
}


.formacion-cabecera > p:last-child{
    max-width:760px;

    margin:auto;

    color:rgba(255,255,255,.88);

    font-size:1.08rem;

    line-height:1.8;
}


/* ==================================================
   CUADRÍCULA DE TARJETAS
================================================== */

.lista-formacion{
    width:min(1250px, 100%);

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:22px;
}


/* ==================================================
   TARJETA GIRATORIA
================================================== */

.tarjeta-formacion{
    position:relative;

    min-width:0;

    min-height:225px;

    perspective:1200px;

    background:transparent;

    transition:
        transform .35s ease;
}


.tarjeta-formacion:hover{
    transform:translateY(-6px);
}


/* ==================================================
   CARAS
================================================== */

.cara-frontal,
.cara-trasera{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:flex;

    flex-direction:column;

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

    padding:28px 24px;

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

    border-radius:18px;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    box-shadow:
        0 16px 35px rgba(0,0,0,.22);

    transition:
        transform .65s ease;
}


/* ==================================================
   CARA DELANTERA
================================================== */

.cara-frontal{
    color:#ffffff;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.07)
        );

    backdrop-filter:blur(7px);

    transform:rotateY(0deg);
}


.cara-frontal span{
    width:48px;
    height:48px;

    display:flex;

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

    margin-bottom:17px;

    border-radius:50%;

    color:#0b3049;

    background:#8fe2ff;

    font-size:1.35rem;
    font-weight:800;

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


.cara-frontal h3{
    color:#ffffff;

    font-size:1.05rem;
    font-weight:600;

    line-height:1.45;
}


/* ==================================================
   CARA TRASERA
================================================== */

.cara-trasera{
    color:#ffffff;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            #1b7195,
            #0d3d59
        );

    transform:
        rotateY(180deg);
}


.cara-trasera h4{
    margin-bottom:14px;

    color:#9be7ff;

    font-size:1.08rem;
    font-weight:700;
}


.cara-trasera p{
    color:rgba(255,255,255,.94);

    font-size:.91rem;

    line-height:1.65;
}


/* ==================================================
   GIRO
================================================== */

.tarjeta-formacion:hover .cara-frontal{
    transform:
        rotateY(-180deg);
}


.tarjeta-formacion:hover .cara-trasera{
    transform:
        rotateY(0deg);
}


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

.contacto-escuela{
    padding:100px 25px;

    color:#ffffff;

    text-align:center;

    background:
        radial-gradient(
            circle at top,
            rgba(67,174,220,.18),
            transparent 43%
        ),
        linear-gradient(
            135deg,
            #164b68,
            #08263a
        );
}


.contacto-escuela-contenido{
    width:min(850px, 92%);

    margin:auto;
}


.contacto-escuela .seccion-etiqueta{
    color:#8edfff;
}


.contacto-escuela h2{
    margin-bottom:20px;

    font-family:'Cinzel', serif;

    font-size:
        clamp(2.2rem, 5vw, 3.8rem);
}


.contacto-escuela p:not(.seccion-etiqueta){
    max-width:700px;

    margin:0 auto 30px;

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

    line-height:1.8;
}


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

.boton-whatsapp{
    display:inline-flex;

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

    padding:16px 32px;

    border-radius:50px;

    color:#ffffff;

    background:#25d366;

    text-decoration:none;

    font-weight:700;

    box-shadow:
        0 14px 30px rgba(0,0,0,.25);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.boton-whatsapp:hover{
    transform:
        translateY(-4px);

    background:#159f49;

    box-shadow:
        0 20px 35px rgba(0,0,0,.30);
}


/* ==================================================
   PIE
================================================== */

.pie-pagina{
    padding:30px 20px;

    background:#082033;

    color:rgba(255,255,255,.80);

    text-align:center;

    font-size:.88rem;
}


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

@keyframes entrada-texto{

    from{
        opacity:0;

        transform:
            translateY(24px);
    }

    to{
        opacity:1;

        transform:
            translateY(0);
    }

}


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

@media(max-width:1100px){

    .cabecera{
        padding:15px 28px;
    }


    .menu-principal{
        gap:15px;
    }


    .menu-principal a{
        font-size:.84rem;
    }


    .lista-formacion{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .tarjeta-formacion{
        min-height:220px;
    }

}


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

@media(max-width:800px){

    .cabecera{
        position:relative;

        flex-direction:column;

        padding:18px;

        gap:16px;

        background:#0b2a40;
    }


    .logo{
        width:76px;
        height:76px;
    }


    .menu-principal{
        justify-content:center;

        gap:12px 18px;
    }


    .hero-escuela{
        min-height:650px;

        padding:80px 6% 70px;
    }


    /*
       En móvil podemos mostrar el GIF casi
       a su tamaño original porque la pantalla
       también es vertical.
    */

    .video-fondo{
        height:min(620px, 92%);

        max-width:100%;
    }


    .presentacion{
        padding:
            70px 22px;
    }


    .formacion{
        padding:
            80px 22px;
    }


    .lista-formacion{
        grid-template-columns:1fr;
    }


    /*
       En móviles no dependemos del hover.
       Mostramos las dos caras una debajo de otra.
    */

    .tarjeta-formacion{
        min-height:auto;

        transform:none;
    }


    .cara-frontal,
    .cara-trasera{
        position:relative;

        inset:auto;

        height:auto;

        min-height:150px;

        transform:none;
    }


    .cara-frontal{
        border-radius:
            18px 18px 0 0;
    }


    .cara-trasera{
        border-radius:
            0 0 18px 18px;
    }


    .tarjeta-formacion:hover{
        transform:none;
    }


    .tarjeta-formacion:hover .cara-frontal,
    .tarjeta-formacion:hover .cara-trasera{
        transform:none;
    }

}


/* ==================================================
   MÓVILES PEQUEÑOS
================================================== */

@media(max-width:520px){

    .menu-principal a{
        font-size:.76rem;
    }


    .hero-escuela{
        min-height:600px;
    }


    .hero-etiqueta{
        letter-spacing:3px;
    }


    .hero-contenido h1{
        font-size:
            clamp(2.4rem, 12vw, 3.5rem);
    }


    .presentacion-texto p{
        font-size:1rem;

        text-align:left;
    }


    .contacto-escuela{
        padding:
            75px 20px;
    }

}


/* ==================================================
   PERSONAS QUE PREFIEREN MENOS ANIMACIÓN
================================================== */

@media(prefers-reduced-motion:reduce){

    *{
        animation:none !important;
        transition:none !important;
    }

}