/* =========================================
   AEROCASPE - HISTORIA Y PRESENTE
========================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins', sans-serif;
    background:
        linear-gradient(rgba(7,20,34,.88), rgba(7,20,34,.94)),
        url("../img/historia.png") center/cover fixed;
    color:#1e293b;
    min-height:100vh;
}

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

.cabecera{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    min-height:110px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 55px;
    background:rgba(5,18,32,.76);
    border-bottom:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(12px);
    z-index:1000;
}

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

.logo{
    width:88px;
    height:88px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));
    transition:transform .3s ease;
}

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

.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:.96rem;
    font-weight:600;
    white-space:nowrap;
    transition:color .25s ease;
}

.menu-principal a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:#72c5ec;
    transition:width .3s ease;
}

.menu-principal a:hover,
.menu-principal a.activo{
    color:#8ed9fa;
}

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

/* =========================================
   ESTRUCTURA GENERAL
========================================= */

.pagina-historia{
    padding-top:145px;
}

.presentacion{
    width:min(1150px, 90%);
    margin:0 auto 55px;
    text-align:center;
    color:white;
    animation:aparecer .9s ease both;
}

.presentacion-etiqueta{
    margin-bottom:10px;
    font-size:.92rem;
    font-weight:600;
    letter-spacing:5px;
    text-transform:uppercase;
    color:#8ed9fa;
}

.presentacion h1{
    font-family:'Cinzel', serif;
    font-size:clamp(2.8rem, 6vw, 5.6rem);
    line-height:1.05;
    letter-spacing:4px;
    text-transform:uppercase;
    text-shadow:0 8px 25px rgba(0,0,0,.5);
}

.presentacion-texto{
    max-width:820px;
    margin:24px auto 0;
    font-size:1.18rem;
    line-height:1.85;
    color:rgba(255,255,255,.9);
}

/* =========================================
   BIBLIOTECA / DOS LIBROS
========================================= */

.biblioteca{
    width:min(1500px, 94%);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:stretch;
    gap:42px;
}

.libro{
    position:relative;
    min-height:100%;
    padding:52px 48px 38px;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 25px 65px rgba(0,0,0,.4);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.libro:hover{
    transform:translateY(-8px);
    box-shadow:0 35px 80px rgba(0,0,0,.5);
}

.cabecera-libro,
.foto-libro,
.texto-libro,
.pie-libro{
    position:relative;
    z-index:5;
}

.numero-capitulo{
    margin-bottom:11px;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
}

.cabecera-libro h2{
    font-family:'Cinzel', serif;
    font-size:clamp(1.75rem, 3vw, 2.7rem);
    line-height:1.22;
    margin-bottom:14px;
}

.subtitulo-libro{
    font-family:'Cormorant Garamond', serif;
    font-size:1.25rem;
    font-style:italic;
}

.foto-libro{
    margin:32px 0;
}

.foto-libro img{
    width:100%;
    height:310px;
    display:block;
    object-fit:cover;
}

.foto-libro figcaption{
    padding-top:13px;
    font-size:.9rem;
    line-height:1.55;
}

.texto-libro p{
    margin-bottom:18px;
    font-size:1.02rem;
    line-height:1.95;
}

.pie-libro{
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:30px;
    padding-top:21px;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.linea-decorativa{
    flex:1;
    height:1px;
}

/* =========================================
   LIBRO ANTIGUO
========================================= */

.libro-antiguo{
    color:#402b19;
    border:1px solid #7d5730;
    border-radius:4px 18px 8px 22px;
    transform:rotate(-.35deg);
    background:
        linear-gradient(rgba(95,58,22,.08), rgba(95,58,22,.08)),
        radial-gradient(circle at 13% 14%, rgba(85,48,16,.2) 0 4%, transparent 12%),
        radial-gradient(circle at 87% 82%, rgba(82,46,18,.17) 0 5%, transparent 14%),
        linear-gradient(105deg, #cfad71 0%, #ead39a 18%, #ddbd80 52%, #efdaa2 79%, #c79d61 100%);
    clip-path:polygon(
        1.5% 2%,
        17% .6%,
        30% 2.1%,
        48% .7%,
        66% 2.2%,
        85% .7%,
        98.5% 2.8%,
        99.2% 20%,
        98.2% 36%,
        99.4% 55%,
        98.1% 71%,
        99% 91%,
        96.7% 98.5%,
        79% 99.1%,
        62% 98.2%,
        45% 99.2%,
        27% 98.4%,
        4% 99%,
        1% 91%,
        1.8% 72%,
        .7% 54%,
        1.9% 34%
    );
}

.libro-antiguo::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.42;
    mix-blend-mode:multiply;
    background:
        repeating-linear-gradient(
            89deg,
            rgba(84,49,21,.045) 0 1px,
            transparent 1px 5px
        ),
        repeating-linear-gradient(
            2deg,
            rgba(255,255,255,.05) 0 1px,
            transparent 1px 7px
        );
}

.libro-antiguo::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    box-shadow:
        inset 0 0 45px rgba(56,26,8,.58),
        inset 0 0 120px rgba(52,23,6,.28);
}

.libro-antiguo .numero-capitulo{
    color:#805626;
}

.libro-antiguo .cabecera-libro h2{
    color:#4a2f17;
    text-shadow:0 1px rgba(255,255,255,.45);
}

.libro-antiguo .subtitulo-libro{
    color:#694620;
}

.foto-antigua{
    padding:10px;
    border:1px solid rgba(77,45,19,.65);
    background:rgba(72,40,15,.13);
    transform:rotate(-1deg);
    box-shadow:
        0 8px 18px rgba(68,37,13,.26),
        inset 0 0 18px rgba(71,36,10,.22);
}

.foto-antigua img{
    filter:sepia(.75) saturate(.72) contrast(1.04) brightness(.84);
    border:8px solid #d4b879;
    outline:1px solid rgba(72,40,18,.65);
}

.foto-antigua figcaption{
    font-family:'Cormorant Garamond', serif;
    font-size:1rem;
    color:#5b3b1c;
}

.texto-antiguo{
    font-family:'Cormorant Garamond', serif;
    font-size:1.14rem;
    font-weight:600;
}

.libro-antiguo .pie-libro{
    color:#6a441f;
    border-top:1px solid rgba(96,60,27,.4);
}

.libro-antiguo .linea-decorativa{
    background:rgba(96,60,27,.5);
}

/* Manchas y deterioro */

.mancha,
.esquina-rota{
    position:absolute;
    pointer-events:none;
    z-index:3;
}

.mancha{
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(79,42,14,.32) 0,
        rgba(96,56,19,.15) 38%,
        transparent 70%
    );
    filter:blur(1px);
}

.mancha-uno{
    width:170px;
    height:120px;
    top:7%;
    right:-35px;
    transform:rotate(18deg);
}

.mancha-dos{
    width:130px;
    height:100px;
    left:-35px;
    bottom:19%;
}

.mancha-tres{
    width:95px;
    height:85px;
    right:17%;
    bottom:2%;
}

.esquina-superior{
    top:-2px;
    left:-2px;
    width:92px;
    height:62px;
    background:
        linear-gradient(145deg, transparent 44%, rgba(73,41,16,.3) 45% 49%, #15100c 51%);
    clip-path:polygon(0 0, 100% 0, 57% 21%, 72% 47%, 38% 42%, 45% 76%, 0 100%);
    opacity:.62;
}

.esquina-inferior{
    right:-2px;
    bottom:-2px;
    width:105px;
    height:80px;
    background:
        linear-gradient(325deg, transparent 45%, rgba(66,34,11,.35) 46% 51%, #16110c 53%);
    clip-path:polygon(100% 100%, 0 100%, 36% 72%, 20% 48%, 57% 44%, 47% 17%, 100% 0);
    opacity:.62;
}

/* =========================================
   LIBRO MODERNO
========================================= */

.libro-moderno{
    color:#eff8ff;
    border:1px solid rgba(173,222,255,.34);
    border-radius:28px 7px 28px 7px;
    background:
        linear-gradient(145deg, rgba(11,54,89,.9), rgba(6,26,48,.96)),
        url("../img/historia-moderna.png") center/cover;
}

.libro-moderno::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(130deg, rgba(78,174,233,.21), transparent 34%),
        linear-gradient(to top, rgba(3,16,30,.8), rgba(4,20,37,.32));
}

.libro-moderno::after{
    content:"";
    position:absolute;
    inset:11px;
    z-index:2;
    border:1px solid rgba(164,222,255,.18);
    border-radius:22px 5px 22px 5px;
    pointer-events:none;
}

.libro-moderno .numero-capitulo{
    color:#86d9ff;
}

.libro-moderno .cabecera-libro h2{
    color:#ffffff;
    text-shadow:0 4px 15px rgba(0,0,0,.45);
}

.libro-moderno .subtitulo-libro{
    color:#c8ebff;
}

.foto-moderna{
    padding:9px;
    border:1px solid rgba(188,231,255,.38);
    border-radius:18px 4px 18px 4px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(5px);
    box-shadow:
        0 18px 30px rgba(0,0,0,.34),
        0 0 24px rgba(61,181,245,.1);
}

.foto-moderna img{
    border-radius:13px 3px 13px 3px;
    filter:saturate(1.14) contrast(1.04);
}

.foto-moderna figcaption{
    color:#c8eaff;
}

.texto-moderno p{
    color:rgba(241,249,255,.94);
}

.libro-moderno .pie-libro{
    color:#a6e1ff;
    border-top:1px solid rgba(181,228,255,.22);
}

.libro-moderno .linea-decorativa{
    background:rgba(154,220,255,.42);
}

/* Brillos modernos */

.brillo{
    position:absolute;
    z-index:3;
    pointer-events:none;
    border-radius:50%;
    filter:blur(4px);
}

.brillo-uno{
    width:260px;
    height:260px;
    top:-100px;
    right:-60px;
    background:radial-gradient(circle, rgba(82,198,255,.32), transparent 68%);
}

.brillo-dos{
    width:200px;
    height:200px;
    left:-85px;
    bottom:-80px;
    background:radial-gradient(circle, rgba(26,124,203,.28), transparent 70%);
}

/* =========================================
   RUTA DE FUTURO
========================================= */

.ruta-futuro{
    width:min(1450px, 94%);
    margin:90px auto;
    padding:65px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:28px;
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(12px);
    color:white;
    box-shadow:0 25px 60px rgba(0,0,0,.3);
}

.ruta-cabecera{
    max-width:850px;
    margin:0 auto 45px;
    text-align:center;
}

.ruta-etiqueta{
    margin-bottom:8px;
    color:#88d9ff;
    font-size:.84rem;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
}

.ruta-cabecera h2{
    font-family:'Cinzel', serif;
    margin-bottom:17px;
    font-size:clamp(2rem, 4vw, 3.4rem);
}

.ruta-cabecera > p:last-child{
    color:rgba(255,255,255,.82);
    line-height:1.8;
}

.ruta-pasos{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
}

.paso-ruta{
    padding:29px 26px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:18px;
    background:rgba(7,28,50,.62);
    transition:
        transform .3s ease,
        background .3s ease;
}

.paso-ruta:hover{
    transform:translateY(-7px);
    background:rgba(10,45,77,.82);
}

.numero-paso{
    display:inline-block;
    margin-bottom:24px;
    font-family:'Cinzel', serif;
    font-size:2.1rem;
    color:#81d6ff;
}

.paso-ruta h3{
    margin-bottom:13px;
    font-size:1.13rem;
}

.paso-ruta p{
    font-size:.94rem;
    line-height:1.75;
    color:rgba(255,255,255,.78);
}

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

.pie-pagina{
    padding:34px 20px;
    text-align:center;
    color:rgba(255,255,255,.72);
    background:#061523;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:.9rem;
}

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

@keyframes aparecer{
    from{
        opacity:0;
        transform:translateY(24px);
    }

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

.libro-antiguo{
    animation:aparecer .8s .1s ease both;
}

.libro-moderno{
    animation:aparecer .8s .22s ease both;
}

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

@media(max-width:1180px){

    .cabecera{
        padding:14px 28px;
    }

    .menu-principal{
        gap:16px;
    }

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

    .biblioteca{
        grid-template-columns:1fr;
        max-width:900px;
    }

    .libro-antiguo{
        transform:none;
    }

    .ruta-pasos{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:820px){

    .cabecera{
        position:relative;
        min-height:auto;
        flex-direction:column;
        gap:18px;
        padding:18px;
    }

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

    .menu-principal{
        justify-content:center;
        gap:13px 20px;
    }

    .pagina-historia{
        padding-top:60px;
    }

    .presentacion{
        margin-bottom:36px;
    }

    .presentacion h1{
        letter-spacing:2px;
    }

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

    .libro{
        padding:39px 30px 30px;
    }

    .foto-libro img{
        height:260px;
    }

    .ruta-futuro{
        padding:45px 26px;
    }
}

@media(max-width:600px){

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

    .biblioteca{
        width:92%;
        gap:28px;
    }

    .libro{
        padding:34px 23px 27px;
    }

    .texto-libro p{
        font-size:.96rem;
        line-height:1.82;
    }

    .foto-libro img{
        height:220px;
    }

    .pie-libro{
        flex-wrap:wrap;
    }

    .ruta-pasos{
        grid-template-columns:1fr;
    }

    .ruta-futuro{
        width:92%;
        margin-top:55px;
    }
}