:root {
    --fondo: #031326;
    --fondo-secundario: #071d38;
    --tarjeta: #0b294d;
    --celeste: #00d4ff;
    --azul: #2674ff;
    --texto: #f5f8ff;
    --texto-suave: #b9c8dc;
    --linea: rgba(255, 255, 255, 0.12);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--fondo);
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.7;
}

.header {
    min-height: 78px;
    padding: 18px 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(3, 19, 38, 0.96);
    border-bottom: 1px solid var(--linea);
    position: sticky;
    top: 0;
    z-index: 10;
}

.logo {
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 900;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.logo span {
    color: var(--celeste);
    font-size: 1.4rem;
    font-style: italic;
}

.volver {
    padding: 10px 18px;
    color: var(--texto);
    text-decoration: none;
    border: 1px solid var(--celeste);
    border-radius: 30px;
    transition: 0.3s;
}

.volver:hover {
    color: var(--fondo);
    background: var(--celeste);
}

main {
    padding: 70px 24px;
}

.tutorial {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.categoria {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 14px;
    color: var(--celeste);
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: 30px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

h1 {
    max-width: 850px;
    margin-bottom: 24px;
    font-size: clamp(2.2rem, 6vw, 4.3rem);
    line-height: 1.08;
    letter-spacing: -2px;
}

.introduccion {
    max-width: 780px;
    color: var(--texto-suave);
    font-size: 1.18rem;
}

.datos {
    margin: 28px 0 55px;
    padding-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    color: var(--texto-suave);
    border-bottom: 1px solid var(--linea);
}

.riesgo {
    margin-bottom: 24px;
    padding: 30px;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 22px;
    background: linear-gradient(145deg, var(--fondo-secundario), var(--tarjeta));
    border: 1px solid var(--linea);
    border-radius: 22px;
}

.numero {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    color: var(--fondo);
    background: var(--celeste);
    border-radius: 16px;
    font-size: 1.5rem;
    font-weight: 900;
}

.riesgo h2 {
    margin-bottom: 8px;
    font-size: 1.55rem;
}

.riesgo p {
    color: var(--texto-suave);
}

.consejo {
    margin-top: 18px;
    padding: 16px 18px;
    background: rgba(0, 212, 255, 0.08);
    border-left: 4px solid var(--celeste);
    border-radius: 6px 14px 14px 6px;
}

.consejo strong {
    color: var(--celeste);
}

.imagen-paso {
    width: min(100%, 520px);
    margin: 22px auto 0;
}

.imagen-paso img {
    width: 100%;
    display: block;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 18px;
}

.aviso {
    margin: 0 0 28px;
    padding: 20px 22px;
    color: var(--texto-suave);
    background: rgba(255, 205, 0, 0.08);
    border-left: 4px solid #ffcd00;
    border-radius: 6px 16px 16px 6px;
}

.proteccion {
    margin-top: 55px;
    padding: 38px;
    background: linear-gradient(135deg, #0d3564, #071d38);
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: 24px;
}

.proteccion h2 {
    margin-bottom: 20px;
    font-size: 2rem;
}

.proteccion ul {
    padding-left: 24px;
}

.proteccion li {
    margin-bottom: 12px;
    color: var(--texto-suave);
}

.proteccion li::marker {
    color: var(--celeste);
}

.mensaje-final {
    margin-top: 35px;
    padding: 38px;
    text-align: center;
    background: var(--celeste);
    color: var(--fondo);
    border-radius: 24px;
}

.mensaje-final h2 {
    margin-bottom: 10px;
    font-size: 1.8rem;
}

.mensaje-final p {
    max-width: 680px;
    margin: 0 auto;
}

footer {
    padding: 30px 20px;
    color: var(--texto-suave);
    text-align: center;
    border-top: 1px solid var(--linea);
}

footer a {
    color: var(--celeste);
}

.politica h2 {
    margin: 42px 0 12px;
    color: var(--texto);
    font-size: 1.65rem;
}

.politica p,
.politica li {
    color: var(--texto-suave);
}

.politica ul {
    margin: 14px 0 0;
    padding-left: 24px;
}

.politica li {
    margin-bottom: 10px;
}

.politica a {
    color: var(--celeste);
}

.fuente {
    margin-top: 28px;
    color: var(--texto-suave);
    font-size: 0.92rem;
}

.fuente a {
    color: var(--celeste);
}

@media (max-width: 650px) {
    .header {
        padding: 15px 20px;
    }

    .volver {
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    main {
        padding: 45px 16px;
    }

    h1 {
        font-size: 2.35rem;
        letter-spacing: -1px;
    }

    .introduccion {
        font-size: 1.05rem;
    }

    .riesgo {
        padding: 22px;
        grid-template-columns: 1fr;
    }

    .proteccion,
    .mensaje-final {
        padding: 26px 22px;
    }
}


.mini-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.mini-nav a{color:var(--texto-suave);text-decoration:none;font-weight:700}.mini-nav a:hover,.mini-nav a[aria-current="page"]{color:var(--celeste)}
.contenido-ampliado,.autor-box,.relacionados{margin-top:55px}.contenido-ampliado>h2,.relacionados>h2{font-size:2rem;margin-bottom:12px}.contenido-ampliado>p{color:var(--texto-suave);margin-bottom:22px}
.faq-list{display:grid;gap:14px}.faq-list details{background:var(--fondo-secundario);border:1px solid var(--linea);border-radius:16px;padding:18px 20px}.faq-list summary{cursor:pointer;font-weight:800;color:var(--texto)}.faq-list details p{margin-top:12px;color:var(--texto-suave)}
.resumen-practico p{color:var(--texto-suave);margin-bottom:18px}.autor-box{display:grid;grid-template-columns:74px 1fr;gap:22px;align-items:start;padding:28px;background:linear-gradient(145deg,var(--fondo-secundario),var(--tarjeta));border:1px solid var(--linea);border-radius:22px}.autor-iniciales{width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:var(--celeste);color:var(--fondo);font-size:1.35rem;font-weight:900}.autor-box h2{font-size:1.35rem}.autor-box p{color:var(--texto-suave)}.autor-box a{color:var(--celeste);font-weight:800}.autor-etiqueta{font-size:.75rem;letter-spacing:1.5px}
.relacionados-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.relacionados-grid a{display:flex;flex-direction:column;gap:8px;padding:20px;text-decoration:none;background:var(--fondo-secundario);border:1px solid var(--linea);border-radius:16px;color:var(--texto)}.relacionados-grid span{color:var(--celeste);font-size:.72rem;text-transform:uppercase;font-weight:900}.relacionados-grid a:hover{border-color:var(--celeste);transform:translateY(-2px)}
.hub-intro{max-width:1120px}.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.hub-card{overflow:hidden;background:linear-gradient(145deg,var(--fondo-secundario),var(--tarjeta));border:1px solid var(--linea);border-radius:22px}.hub-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.hub-card>div{padding:24px}.hub-card>div>p:first-child{color:var(--celeste);text-transform:uppercase;font-weight:900;font-size:.75rem;letter-spacing:1px}.hub-card h2{font-size:1.45rem;margin:8px 0}.hub-card p{color:var(--texto-suave)}.hub-card a{display:inline-block;margin-top:14px;color:var(--celeste);font-weight:900;text-decoration:none}
.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:34px 0}.contact-options article{padding:28px;background:var(--fondo-secundario);border:1px solid var(--linea);border-radius:20px}.contact-options h2{margin:0 0 10px}.contact-options p{margin-bottom:20px}.contact-button{display:inline-block;padding:12px 18px;border-radius:30px;background:var(--celeste);color:var(--fondo)!important;text-decoration:none;font-weight:900}
@media(max-width:760px){.header{align-items:flex-start;gap:14px}.mini-nav{gap:10px 14px}.mini-nav a{font-size:.9rem}.hub-grid,.contact-options,.relacionados-grid{grid-template-columns:1fr}.autor-box{grid-template-columns:1fr}.autor-iniciales{width:56px;height:56px}main{padding:46px 18px}.riesgo{grid-template-columns:1fr;padding:22px}.numero{width:48px;height:48px}h1{font-size:clamp(2rem,11vw,3rem);letter-spacing:-1px}}

.contenido-ampliado>p{color:var(--texto-suave);margin:0 0 16px}.fuentes{margin-top:42px;padding:24px;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.25);border-radius:18px}.fuentes h2{margin-bottom:8px}.fuentes p{color:var(--texto-suave)}.fuentes a{color:var(--celeste)}
.topic-visual{min-height:150px;display:grid;place-items:center;padding:30px;background:radial-gradient(circle at 70% 20%,rgba(0,212,255,.35),transparent 34%),linear-gradient(135deg,#082a54,#020b18);border-bottom:1px solid var(--linea)}.topic-visual span{max-width:260px;text-align:center;color:var(--celeste);font-size:1.25rem;font-weight:900;text-transform:uppercase;letter-spacing:2px}.proyecto-portada{margin:34px auto;max-width:760px}.proyecto-portada img{width:100%;max-height:680px;object-fit:contain;background:#020b18;border:1px solid var(--linea);border-radius:24px}.project-tech{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.project-tech span{padding:7px 12px;border-radius:30px;background:rgba(0,212,255,.1);color:var(--celeste);font-weight:800}