/* ==========================================================
   DESCARGABLES.CSS
   Sección: eBook Hackeando la norma ISO 27001
   ========================================================== */

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

:root{
    --line:rgba(255,255,255,.1);
    --muted:#bfd1e8;
    --accent:#49a6ff;
}

/* ==========================
   SECCIÓN EBOOK
========================== */

.ebook1{
    display:grid;
    grid-template-columns:1.8fr .8fr .9fr;
    gap:42px;
    align-items:center;

    padding:60px 50px;

    background:
        radial-gradient(circle at 20% 0%,
        #154c8c 0,
        #0b2f5d 28%,
        #071b38 70%,
        #051225 100%);

    border-radius:24px;
    color:#eef6ff;
    overflow:hidden;
    position:relative;
}

.ebook1 p{
    color:var(--muted);
    line-height:1.7;
}

.btn1{
    display:inline-block;
    padding:15px 34px;
    border-radius:40px;
    background:#ffffff;
    color:#0b2f5d;
    text-decoration:none;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.btn1:hover{
    background:var(--accent);
    color:#ffffff;
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(73,166,255,.35);
}

.book{
    justify-self:center;
    width:220px;
    height:300px;
    border-radius:20px;
    background:#24364d;
    padding:12px;
    transform:perspective(900px) rotateY(-18deg);
}

.cover{
    position:relative;
    overflow:hidden;
    height:100%;
    border-radius:12px;
    background:
      radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 30%),
      linear-gradient(180deg,#2d8cff,#1455cb);
    box-shadow:inset 0 0 40px rgba(255,255,255,.08);
}

.side{
    border-left:1px solid var(--line);
    padding-left:22px;
}

.side .row{
    display:flex;
    justify-content:space-between;
    padding:13px 0;
    border-bottom:1px solid var(--line);
}

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

@media (max-width:1000px){

    .ebook1{
        grid-template-columns:1fr;
        text-align:center;
    }

    .book{
        margin:auto;
    }

    .side{
        border:0;
        padding:0;
    }
}

.grid{position:absolute;inset:0;background:
repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(255,255,255,.08) 24px),
repeating-linear-gradient(90deg,transparent,transparent 23px,rgba(255,255,255,.06) 24px);
animation:gridMove 10s linear infinite;}
.scan{position:absolute;left:-20%;top:0;width:140%;height:5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);box-shadow:0 0 18px #8fd4ff;animation:scanner 3.5s linear infinite;}
.dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 15px #fff;}
.d1{top:25%;left:25%;animation:blink 2s infinite;}
.d2{top:60%;left:70%;animation:blink 2.8s infinite;}
.d3{top:75%;left:40%;animation:blink 3.5s infinite;}
.pulse{position:absolute;border:2px solid rgba(255,255,255,.25);border-radius:50%;animation:ring 4s infinite;}
.p1{width:90px;height:90px;top:28%;left:50%;}
.p2{width:55px;height:55px;top:55%;left:22%;animation-delay:1.5s;}
@keyframes scanner{from{top:-10%}to{top:110%}}
@keyframes gridMove{from{transform:translateY(0)}to{transform:translateY(24px)}}
@keyframes blink{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.5)}}
@keyframes ring{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2);opacity:0}}


.ebook-screen{position:relative;background:linear-gradient(180deg,#0d2448,#133d74);display:flex;align-items:center;justify-content:center;overflow:hidden}
.page{position:absolute;width:82%;height:82%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:18px;color:#fff;opacity:0;animation:pages 9s infinite}
.page h3{margin:0 0 10px;font-size:20px;color:#8fd4ff}
.page p{color:#dbeeff;font-size:14px;line-height:1.5}
.page2{animation-delay:3s}
.page3{animation-delay:6s}
.shine{position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:shineMove 3s linear infinite}
@keyframes pages{
0%,30%{opacity:1;transform:scale(1)}
33%,100%{opacity:0}
}
@keyframes shineMove{
from{left:-40%}to{left:120%}
}