/* ==================================================
   AEROCASPE - PÁGINA PRINCIPAL
================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    overflow-x:hidden;

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

    background:#f4f7f6;
    color:#263746;
}

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


/* ==================================================
   CABECERA Y MENÚ
================================================== */

.cabecera{
    position:absolute;
    top:0;
    left:0;
    z-index:1000;

    width:100%;

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

    padding:15px 55px;

    background:linear-gradient(
        to bottom,
        rgba(3,17,29,.80),
        rgba(3,17,29,.18),
        transparent
    );
}

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

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

    object-fit:contain;

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

    transition:
        transform .3s ease,
        filter .3s ease;
}

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

    filter:drop-shadow(
        0 10px 18px rgba(0,0,0,.55)
    );
}

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

    gap:26px;
}

.menu-principal a,
.cabecera nav a{
    position:relative;

    color:#ffffff;
    text-decoration:none;

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

    white-space:nowrap;

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

    transition:color .25s ease;
}

.menu-principal a::after,
.cabecera nav a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    border-radius:4px;

    background:#86d9ff;

    transition:width .3s ease;
}

.menu-principal a:hover,
.menu-principal a.activo,
.cabecera nav a:hover{
    color:#86d9ff;
}

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


/* ==================================================
   PORTADA PRINCIPAL
================================================== */

.hero{
    position:relative;

    min-height:100vh;

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

    overflow:hidden;

    padding:155px 7% 95px;

    color:#ffffff;
    text-align:center;

    background:#071c2d;
}

.hero::before{
    content:"";

    position:absolute;
    inset:-20px;
    z-index:0;

    background:
        url("../img/portada.png")
        center/cover no-repeat;

    animation:
        zoom-portada
        18s ease-in-out
        infinite alternate;
}

.hero::after{
    content:"";

    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            to bottom,
            rgba(2,14,24,.34) 0%,
            rgba(2,14,24,.29) 42%,
            rgba(2,14,24,.76) 100%
        );
}


/* ==================================================
   CARTEL DE BIENVENIDA
================================================== */

.cartel-bienvenida{
    position:relative;
    z-index:5;

    width:min(970px, 100%);

    margin:auto;

    padding:35px 42px;

    color:#ffffff;
    text-align:center;

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

    background:rgba(3,22,38,.24);

    backdrop-filter:blur(3px);

    animation:
        entrada-cartel
        1.25s ease both;
}

.cartel-bienvenida .linea{
    display:block;

    width:150px;
    height:2px;

    margin:20px auto;

    border-radius:5px;

    background:
        linear-gradient(
            to right,
            transparent,
            #8edcff,
            transparent
        );
}

.cartel-bienvenida > p{
    margin-bottom:12px;

    color:#98ddfa;

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

    letter-spacing:7px;
    text-transform:uppercase;
}

.cartel-bienvenida h1{
    margin-bottom:18px;

    font-family:'Cinzel', serif;

    font-size:clamp(3.5rem, 9vw, 7.4rem);
    line-height:.95;

    font-weight:700;
    letter-spacing:8px;

    text-transform:uppercase;

    text-shadow:
        0 8px 24px rgba(0,0,0,.58),
        0 1px 1px rgba(255,255,255,.20);
}

.cartel-bienvenida h2{
    color:#eef9ff;

    font-size:clamp(1.35rem, 3vw, 2.3rem);
    font-weight:300;

    text-shadow:
        0 4px 15px rgba(0,0,0,.58);
}


/* Texto inferior de la portada */

.hero-contenido{
    position:absolute;
    left:50%;
    bottom:42px;
    z-index:5;

    width:min(900px, 88%);

    transform:translateX(-50%);

    text-align:center;
}

.hero-frase{
    color:rgba(255,255,255,.94);

    font-size:1.05rem;
    line-height:1.75;

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


/* ==================================================
   PRESENTACIÓN DEL ENTORNO
================================================== */

.entorno-presentacion{
    position:relative;

    overflow:hidden;

    padding:105px 25px;

    background:
        radial-gradient(
            circle at top right,
            rgba(62,166,218,.14),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(201,142,69,.08),
            transparent 30%
        ),
        #f8fafc;
}

.entorno-contenedor{
    width:min(1050px, 92%);

    margin:auto;

    text-align:center;
}

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

    color:#3485b5;

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

    letter-spacing:5px;
    text-transform:uppercase;
}

.entorno-presentacion h2,
.lugares-encabezado h2{
    color:#123b5c;

    font-family:'Cinzel', serif;

    font-size:clamp(2.1rem, 5vw, 3.6rem);
    line-height:1.2;
}

.linea-titulo{
    width:85px;
    height:3px;

    margin:25px auto 34px;

    border-radius:5px;

    background:
        linear-gradient(
            to right,
            #286b94,
            #67c6ee
        );
}

.entorno-texto{
    margin-bottom:20px;

    color:#4b5f70;

    font-size:1.15rem;
    line-height:2;

    text-align:justify;
}


/* ==================================================
   ZONA DE TARJETAS
================================================== */

.lugares-destacados{
    padding:100px 4%;

    background:
        linear-gradient(
            rgba(5,23,38,.96),
            rgba(5,23,38,.98)
        ),
        url("../img/portada.png")
        center/cover fixed;
}

.lugares-encabezado{
    max-width:850px;

    margin:0 auto 55px;

    color:#ffffff;
    text-align:center;
}

.lugares-encabezado h2{
    margin-bottom:15px;

    color:#ffffff;
}

.lugares-encabezado > p:last-child{
    color:rgba(255,255,255,.72);
}

.tarjetas-grid{
    width:min(1550px, 100%);

    margin:auto;

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

    gap:24px;
}


/* ==================================================
   TARJETAS INTERACTIVAS
================================================== */

.tarjeta-info{
    position:relative;

    min-height:560px;

    overflow:hidden;
    isolation:isolate;

    cursor:pointer;

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

    box-shadow:
        0 20px 45px rgba(0,0,0,.36);

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

.tarjeta-info:hover{
    transform:translateY(-8px);

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

.tarjeta-fondo{
    position:absolute;
    inset:0;
    z-index:-3;

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

    transition:transform .7s ease;
}

.tarjeta-info::before{
    content:"";

    position:absolute;
    inset:0;
    z-index:-2;

    background:
        linear-gradient(
            to top,
            rgba(2,14,25,.98) 0%,
            rgba(4,20,34,.58) 52%,
            rgba(3,15,26,.14) 100%
        );
}

.tarjeta-info::after{
    content:"";

    position:absolute;
    inset:0;
    z-index:-1;

    background:
        linear-gradient(
            145deg,
            rgba(5,30,50,.97),
            rgba(8,48,76,.94)
        );

    opacity:0;

    transition:opacity .45s ease;
}


/* Fotografías de cada tarjeta */

.tarjeta-pista .tarjeta-fondo{
    background-image:
        url("../img/pista-detalle.png");
}

.tarjeta-motorland .tarjeta-fondo{
    background-image:
        url("../img/motorland.png");
}

.tarjeta-caspe .tarjeta-fondo{
    background-image:
        url("../img/caspe.png");
}

.tarjeta-embalse .tarjeta-fondo{
    background-image:
        url("../img/mar-aragon.png");
}


/* Contenido visible inicialmente */

.tarjeta-resumen{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:3;

    padding:32px;

    color:#ffffff;

    transition:
        opacity .35s ease,
        transform .45s ease;
}

.tarjeta-icono{
    display:block;

    margin-bottom:14px;

    font-size:2.4rem;
}

.tarjeta-resumen h3{
    margin-bottom:8px;

    font-size:1.55rem;
}

.tarjeta-resumen p{
    color:rgba(255,255,255,.76);

    font-size:.94rem;
    line-height:1.55;
}


/* Información desplegable */

.tarjeta-detalles{
    position:absolute;
    inset:0;
    z-index:4;

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

    padding:34px;

    overflow-y:auto;

    color:#ffffff;

    opacity:0;
    transform:translateY(25px);

    transition:
        opacity .42s ease,
        transform .42s ease;
}

.tarjeta-detalles h3{
    margin-bottom:23px;

    color:#91dcff;

    font-size:1.55rem;
}

.tarjeta-detalles p,
.tarjeta-detalles li{
    color:rgba(255,255,255,.91);

    font-size:.93rem;
    line-height:1.65;
}

.tarjeta-detalles p{
    margin-bottom:14px;
}

.tarjeta-detalles ul{
    list-style:none;
}

.tarjeta-detalles li{
    padding:9px 0;

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

.tarjeta-detalles strong{
    color:#9bddfa;
}

.tarjeta-detalles::-webkit-scrollbar{
    width:6px;
}

.tarjeta-detalles::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
}

.tarjeta-detalles::-webkit-scrollbar-thumb{
    background:rgba(145,220,255,.65);

    border-radius:10px;
}


/* Efecto al pasar el cursor */

.tarjeta-info:hover .tarjeta-fondo{
    transform:scale(1.12);
}

.tarjeta-info:hover::after{
    opacity:1;
}

.tarjeta-info:hover .tarjeta-resumen{
    opacity:0;

    transform:translateY(25px);
}

.tarjeta-info:hover .tarjeta-detalles{
    opacity:1;

    transform:translateY(0);
}


/* ==================================================
   PIE DE PÁGINA
================================================== */

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

    color:rgba(255,255,255,.72);
    background:#041521;

    text-align:center;
    font-size:.88rem;
}


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

@keyframes entrada-cartel{

    from{
        opacity:0;

        transform:
            translateY(35px)
            scale(.97);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes zoom-portada{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.06);
    }
}


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

@media(max-width:1200px){

    .cabecera{
        padding:15px 28px;
    }

    .menu-principal,
    .cabecera nav{
        gap:17px;
    }

    .menu-principal a,
    .cabecera nav a{
        font-size:.86rem;
    }

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


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

@media(max-width:800px){

    .cabecera{
        position:relative;

        flex-direction:column;
        justify-content:center;

        padding:18px;

        gap:17px;

        background:#071c2d;
    }

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

    .menu-principal,
    .cabecera nav{
        justify-content:center;

        gap:13px 20px;
    }

    .hero{
        min-height:720px;

        padding:90px 6% 120px;
    }

    .cartel-bienvenida{
        padding:28px 20px;
    }

    .cartel-bienvenida h1{
        letter-spacing:4px;
    }

    .hero-contenido{
        bottom:30px;
    }

    .tarjetas-grid{
        grid-template-columns:1fr;

        max-width:620px;
    }

    .tarjeta-info{
        min-height:440px;
    }

    /*
       En móvil no existe el cursor.
       Los detalles se muestran directamente.
    */

    .tarjeta-info::after{
        opacity:.80;
    }

    .tarjeta-resumen{
        position:relative;

        padding:30px 30px 8px;

        opacity:1;
        transform:none;
    }

    .tarjeta-detalles{
        position:relative;

        padding:12px 30px 32px;

        opacity:1;
        transform:none;

        overflow:visible;
    }

    .tarjeta-info:hover .tarjeta-resumen{
        opacity:1;
        transform:none;
    }
}


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

@media(max-width:520px){

    .menu-principal a,
    .cabecera nav a{
        font-size:.78rem;
    }

    .hero{
        min-height:680px;
    }

    .cartel-bienvenida > p{
        letter-spacing:4px;
    }

    .cartel-bienvenida h1{
        font-size:3rem;
        letter-spacing:2px;
    }

    .cartel-bienvenida h2{
        font-size:1.3rem;
    }

    .hero-frase{
        font-size:.9rem;
    }

    .entorno-presentacion,
    .lugares-destacados{
        padding-top:75px;
        padding-bottom:75px;
    }

    .entorno-texto{
        font-size:1rem;
        text-align:left;
    }
}


/* ==================================================
   MENOS ANIMACIÓN
================================================== */

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

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

/* ==================================================
   NUEVO INICIO AEROCASPE
   ALOJAMIENTO + EXPERIENCIAS + BOTONES
================================================== */


/* ==================================================
   BOTONES GENERALES DEL INICIO
================================================== */

.hero-botones{
    width:100%;

    margin-top:27px;

    display:flex;

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

    flex-wrap:wrap;

    gap:14px;
}


.boton-inicio{
    display:inline-flex;

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

    gap:9px;

    padding:15px 29px;

    border-radius:50px;

    text-decoration:none;

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

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


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


/* BOTÓN AZUL */

.boton-inicio-principal{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #168fc4,
            #0c749f
        );

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


.boton-inicio-principal:hover{
    background:
        linear-gradient(
            135deg,
            #1da5dc,
            #0b709a
        );

    box-shadow:
        0 19px 40px rgba(0,0,0,.32);
}


/* BOTÓN OSCURO */

.boton-inicio-oscuro{
    color:#ffffff;

    background:#123e5b;

    box-shadow:
        0 12px 25px rgba(18,62,91,.20);
}


.boton-inicio-oscuro:hover{
    background:#08283d;
}


/* ==================================================
   AJUSTE DE PORTADA PARA EL NUEVO BOTÓN
================================================== */

.hero-contenido{
    bottom:30px;
}


.hero-frase{
    margin-bottom:0;
}


/* ==================================================
   ALOJAMIENTO EN LA PÁGINA PRINCIPAL
================================================== */

.inicio-estancia{
    position:relative;

    padding:95px 5%;

    overflow:hidden;

    color:#ffffff;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(83,199,239,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(77,146,178,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #103b56 0%,
            #092e45 48%,
            #061e2e 100%
        );
}


/* DECORACIÓN SUAVE */

.inicio-estancia::before{
    content:"";

    position:absolute;

    width:400px;
    height:400px;

    top:-230px;
    right:-160px;

    border-radius:50%;

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


.inicio-estancia::after{
    content:"";

    position:absolute;

    width:280px;
    height:280px;

    left:-150px;
    bottom:-150px;

    border-radius:50%;

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


/* CONTENEDOR */

.inicio-estancia-contenido{
    position:relative;

    z-index:2;

    width:min(1230px,100%);

    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.05fr);

    gap:65px;

    align-items:center;
}


/* ==================================================
   TEXTO ALOJAMIENTO
================================================== */

.inicio-estancia-texto{
    min-width:0;
}


.inicio-estancia-etiqueta{
    margin-bottom:12px;

    color:#8edfff;

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

    letter-spacing:4px;

    text-transform:uppercase;
}


.inicio-estancia h2{
    margin-bottom:23px;

    color:#ffffff;

    font-family:'Cinzel',serif;

    font-size:
        clamp(2.25rem,4.5vw,3.8rem);

    line-height:1.18;

    text-shadow:
        0 5px 18px rgba(0,0,0,.20);
}


.inicio-estancia-texto p:not(.inicio-estancia-etiqueta){
    margin-bottom:17px;

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

    font-size:1rem;

    line-height:1.85;
}


.inicio-estancia-texto strong{
    color:#ffffff;
}


/* BOTÓN CLARO DE ALOJAMIENTO */

.boton-estancia{
    margin-top:10px;

    color:#092a3e;

    background:
        linear-gradient(
            135deg,
            #a6e8ff,
            #78d3f5
        );

    box-shadow:
        0 15px 32px rgba(0,0,0,.22);
}


.boton-estancia:hover{
    color:#08283d;

    background:#ffffff;

    box-shadow:
        0 20px 40px rgba(0,0,0,.28);
}


/* ==================================================
   TARJETAS PEQUEÑAS ALOJAMIENTO
================================================== */

.inicio-estancia-servicios{
    display:grid;

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

    gap:15px;
}


.mini-servicio{
    min-width:0;

    min-height:108px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:20px;

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

    border-radius:17px;

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

    backdrop-filter:blur(7px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.10);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.mini-servicio:hover{
    transform:translateY(-5px);

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

    border-color:
        rgba(142,223,255,.28);
}


.mini-servicio > span{
    flex-shrink:0;

    width:52px;
    height:52px;

    display:flex;

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

    border-radius:15px;

    background:
        rgba(142,223,255,.12);

    font-size:1.85rem;
}


.mini-servicio strong{
    display:block;

    margin-bottom:4px;

    color:#ffffff;

    font-size:.94rem;
    font-weight:700;
}


.mini-servicio small{
    display:block;

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

    font-size:.75rem;

    line-height:1.45;
}


/* ==================================================
   EXPERIENCIAS DE VUELO EN EL INICIO
================================================== */

.inicio-experiencia{
    position:relative;

    padding:100px 5%;

    overflow:hidden;

    text-align:center;

    background:
        radial-gradient(
            circle at top left,
            rgba(64,175,220,.13),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(82,160,197,.08),
            transparent 30%
        ),
        #ffffff;
}


.inicio-experiencia-contenido{
    position:relative;

    z-index:2;

    width:min(880px,92%);

    margin:auto;
}


.inicio-experiencia .seccion-etiqueta{
    margin-bottom:12px;
}


.inicio-experiencia h2{
    margin-bottom:22px;

    color:#123b5c;

    font-family:'Cinzel',serif;

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

    line-height:1.2;
}


.inicio-experiencia p:not(.seccion-etiqueta){
    max-width:740px;

    margin:0 auto 30px;

    color:#526878;

    font-size:1.05rem;

    line-height:1.9;
}


/* ==================================================
   SECCIÓN FINAL
================================================== */

.entorno-final{
    padding-top:100px;
    padding-bottom:100px;

    background:
        radial-gradient(
            circle at top right,
            rgba(67,168,216,.12),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            #f8fafb,
            #eef4f7
        );
}


.cierre-botones{
    margin-top:32px;

    display:flex;

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

    flex-wrap:wrap;

    gap:14px;
}


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

@media(max-width:1050px){

    .inicio-estancia-contenido{
        grid-template-columns:1fr;

        gap:45px;
    }


    .inicio-estancia-texto{
        width:min(800px,100%);

        margin:auto;

        text-align:center;
    }


    .inicio-estancia-servicios{
        width:min(800px,100%);

        margin:auto;
    }

}


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

@media(max-width:800px){

    .hero-contenido{
        bottom:27px;
    }


    .hero-botones{
        margin-top:18px;
    }


    .inicio-estancia{
        padding:
            75px 20px;
    }


    .inicio-estancia-contenido{
        gap:37px;
    }


    .inicio-estancia-servicios{
        grid-template-columns:1fr;
    }


    .mini-servicio{
        min-height:94px;
    }


    .inicio-experiencia{
        padding:
            80px 20px;
    }


    .cierre-botones{
        flex-direction:column;
    }


    .cierre-botones .boton-inicio{
        width:min(390px,100%);
    }

}


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

@media(max-width:520px){

    .boton-inicio{
        width:100%;

        max-width:350px;

        padding:14px 20px;

        font-size:.87rem;
    }


    .inicio-estancia{
        padding:
            65px 16px;
    }


    .inicio-estancia h2{
        font-size:
            clamp(2rem,10vw,2.8rem);
    }


    .inicio-estancia-etiqueta{
        letter-spacing:3px;
    }


    .mini-servicio{
        padding:17px;
    }


    .mini-servicio > span{
        width:46px;
        height:46px;

        font-size:1.6rem;
    }


    .inicio-experiencia{
        padding:
            70px 16px;
    }


    .entorno-final{
        padding-top:75px;
        padding-bottom:75px;
    }

}

/* ==================================================
   NUEVA ESTRUCTURA INICIO - AEROCASPE
================================================== */


/* ==================================================
   ACCESOS PRINCIPALES
================================================== */

.accesos-aerocaspe{
    padding:100px 5%;

    background:
        linear-gradient(
            180deg,
            #f7fafb,
            #edf3f6
        );
}

.accesos-contenedor{
    width:min(1250px,100%);

    margin:auto;

    display:grid;

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

    gap:28px;
}


/* ==================================================
   TARJETA DE ACCESO
================================================== */

.acceso-card{
    position:relative;

    min-height:410px;

    display:flex;

    align-items:flex-start;

    gap:28px;

    padding:42px;

    overflow:hidden;

    border-radius:25px;

    box-shadow:
        0 20px 50px rgba(18,58,82,.12);

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

.acceso-card:hover{
    transform:translateY(-7px);

    box-shadow:
        0 30px 65px rgba(18,58,82,.20);
}


/* ==================================================
   PILOTOS
================================================== */

.acceso-pilotos{
    color:#ffffff;

    background:
        radial-gradient(
            circle at top right,
            rgba(118,217,255,.18),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #0d3b57,
            #061e2e
        );
}


/* ==================================================
   ESTANCIA
================================================== */

.acceso-estancia{
    color:#173e59;

    border:
        1px solid rgba(22,92,128,.12);

    background:
        radial-gradient(
            circle at top right,
            rgba(88,180,218,.13),
            transparent 35%
        ),
        #ffffff;
}


/* ==================================================
   ICONOS
================================================== */

.acceso-icono{
    flex-shrink:0;

    width:72px;
    height:72px;

    display:flex;

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

    border-radius:20px;

    font-size:2.5rem;
}

.acceso-pilotos .acceso-icono{
    background:
        rgba(255,255,255,.10);
}

.acceso-estancia .acceso-icono{
    background:#e7f5fb;
}


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

.acceso-texto{
    min-width:0;
}

.acceso-etiqueta{
    margin-bottom:9px;

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

    letter-spacing:3px;

    text-transform:uppercase;
}

.acceso-pilotos .acceso-etiqueta{
    color:#8edfff;
}

.acceso-estancia .acceso-etiqueta{
    color:#278ab7;
}

.acceso-card h2{
    margin-bottom:18px;

    font-family:'Cinzel',serif;

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

    line-height:1.2;
}

.acceso-pilotos h2{
    color:#ffffff;
}

.acceso-estancia h2{
    color:#143d59;
}

.acceso-card p:not(.acceso-etiqueta){
    margin-bottom:27px;

    font-size:.97rem;

    line-height:1.82;
}

.acceso-pilotos p:not(.acceso-etiqueta){
    color:
        rgba(255,255,255,.79);
}

.acceso-estancia p:not(.acceso-etiqueta){
    color:#566d79;
}


/* ==================================================
   BOTONES DE ACCESO
================================================== */

.boton-acceso{
    display:inline-flex;

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

    gap:9px;

    padding:14px 26px;

    border-radius:50px;

    text-decoration:none;

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

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

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

.boton-acceso-azul{
    color:#092b40;

    background:#8edfff;

    box-shadow:
        0 13px 28px rgba(0,0,0,.20);
}

.boton-acceso-azul:hover{
    background:#ffffff;
}

.boton-acceso-claro{
    color:#ffffff;

    background:#168fc4;

    box-shadow:
        0 12px 26px rgba(22,143,196,.20);
}

.boton-acceso-claro:hover{
    background:#0c719f;
}


/* ==================================================
   EXPERIENCIAS
================================================== */

.experiencia-inicio{
    padding:100px 5%;

    text-align:center;

    background:
        radial-gradient(
            circle at top left,
            rgba(68,173,219,.12),
            transparent 34%
        ),
        #ffffff;
}

.experiencia-inicio-contenido{
    width:min(850px,92%);

    margin:auto;
}

.experiencia-inicio h2{
    margin-bottom:20px;

    color:#123b5c;

    font-family:'Cinzel',serif;

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

    line-height:1.2;
}

.experiencia-inicio p:not(.seccion-etiqueta){
    max-width:720px;

    margin:0 auto 29px;

    color:#526878;

    font-size:1.03rem;

    line-height:1.85;
}

.boton-experiencia{
    display:inline-flex;

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

    gap:9px;

    padding:15px 29px;

    border-radius:50px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #168fc4,
            #0c729d
        );

    text-decoration:none;

    font-weight:700;

    box-shadow:
        0 14px 30px rgba(15,102,144,.22);

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

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

    box-shadow:
        0 20px 40px rgba(15,102,144,.30);
}


/* ==================================================
   CIERRE
================================================== */

.cierre-inicio{
    padding:95px 5%;

    background:
        radial-gradient(
            circle at top right,
            rgba(62,166,218,.12),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f8fafc,
            #eef4f7
        );

    text-align:center;
}

.cierre-inicio-contenido{
    width:min(900px,92%);

    margin:auto;
}

.cierre-inicio h2{
    color:#123b5c;

    font-family:'Cinzel',serif;

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

    line-height:1.2;
}

.cierre-inicio p:not(.seccion-etiqueta){
    max-width:760px;

    margin:auto;

    color:#536b79;

    font-size:1.04rem;

    line-height:1.85;
}


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

@media(max-width:1000px){

    .accesos-contenedor{
        grid-template-columns:1fr;
    }

    .acceso-card{
        min-height:auto;
    }

}


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

@media(max-width:700px){

    .accesos-aerocaspe{
        padding:75px 18px;
    }

    .acceso-card{
        flex-direction:column;

        padding:32px 25px;
    }

    .acceso-icono{
        width:62px;
        height:62px;

        font-size:2.1rem;
    }

    .boton-acceso{
        width:100%;
    }

    .experiencia-inicio{
        padding:80px 18px;
    }

    .boton-experiencia{
        width:min(380px,100%);
    }

    .cierre-inicio{
        padding:75px 18px;
    }

}