/* ======================================================
   RESET GENERAL
====================================================== */

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

/* ======================================================
   BASE GENERAL
====================================================== */

html,
body{
    background:#2f2f2f;
    color:#cfcfcf;

    font-family:Arial, Helvetica, Verdana, sans-serif;
    font-size:13px;
    line-height:1.35;

    overflow-x:hidden;
}

/* ======================================================
   WRAPPER GENERAL
====================================================== */

.wrapper{

    width:600px;
    max-width:600px;

    margin:0 auto;

    padding:10px 12px 18px 12px;

    background:#2f2f2f;

    border:1px solid #555;

    box-shadow:
        0 0 0 1px #222,
        0 0 18px rgba(0,0,0,.7);

    position:relative;
}

/* ======================================================
   HEADER
====================================================== */

#headerbox{

    width:600px;

    margin:16px auto 8px auto;

    text-align:left;
}

.cyberfractal{

    font-family:"Times New Roman", Times, serif;

    font-size:40px;

    font-style:italic;

    font-weight:normal;

    line-height:1;

    color:#f1e4b6;

    text-shadow:
        0 0 2px rgba(255,235,180,.55),
        0 0 5px rgba(0,0,0,.65);
}

/* ======================================================
   LINKS
====================================================== */

a{
    color:#d6d6d6;
    text-decoration:none;
}

a:hover{
    color:#fff;
    text-decoration:underline;
}

/* ======================================================
   NAV SUPERIOR
====================================================== */

nav table{
    width:100%;
    border-collapse:collapse;
}

nav td{
    text-align:center;
    padding:6px;
}

nav a{
    font-size:12px;
    white-space:nowrap;
}

/* ======================================================
   TABLAS
====================================================== */

table{
    border-collapse:collapse;
    table-layout:fixed;
}

.tabla-principal{
    width:600px;
    margin:0 auto;
}

.tabla-interna{
    width:100%;
}

/* ======================================================
   COLUMNAS
====================================================== */

.col-izquierda{

    width:380px;

    padding:10px;

    vertical-align:top;
}

.col-derecha{

    width:220px;

    padding:6px;

    vertical-align:top;

    text-align:center;

    overflow:visible;
}

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

p,
td,
li,
span{

    font-size:13px;

    line-height:1.35;

    color:#cfcfcf;
}

/* ======================================================
   IMÁGENES
====================================================== */

img{

    display:block;

    margin-left:auto;
    margin-right:auto;

    height:auto;
}

/* ======================================================
   MARCOS
====================================================== */

.imagen-marco{

    border:5px solid rgba(0,0,0,.35);

    background:#111;

    padding:5px;
}

.imagen-contenedor{

    width:100%;

    text-align:center;

    margin:10px 0;
}

.imagen-contenedor img{

    display:inline-block;

    max-width:100%;
}

/* ======================================================
   EFECTO LATIDO
====================================================== */

.fractal-latido{

    animation:latido 4s ease-in-out infinite;

    transform-origin:center center;
}

@keyframes latido{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }
}

/* ======================================================
   BARRA ICONOS DERECHA
====================================================== */

.barra-iconos{

    margin:0 auto 8px auto;
}

.barra-iconos td{

    padding:3px;
}

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

.menu-lateral{

    width:100%;

    max-width:450px;

    margin:10px auto 14px auto;

    text-align:center;

    overflow:visible;
}

/* menú principal */

.nav-fractal{

    list-style:none;

    display:inline-block;

    margin:0 auto;

    padding:4px 0;

    background:#000;

    white-space:normal;
}

/* ítems */

.nav-fractal > li{

    display:inline-block;

    position:relative;

    margin:2px 4px;
}

/* links */

.nav-fractal > li > a{

    display:inline-block;

    padding:3px 7px;

    background:#000;

    color:#e0e0e0;

    font-family:"Times New Roman", Times, serif;

    font-size:11px;

    text-decoration:none;
}

/* hover */

.nav-fractal > li > a:hover{

    background:#444;

    box-shadow:
        0 0 6px rgba(255,220,120,.6),
        0 0 12px rgba(255,200,80,.4);
}

/* ======================================================
   SUBMENÚS
====================================================== */

.nav-fractal li ul{

    display:block;

    opacity:0;

    visibility:hidden;

    transform:translateY(6px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s;

    position:absolute;

    top:100%;
    left:0;

    min-width:170px;

    padding:4px;

    list-style:none;

    background:#000;

    z-index:9999;
}

/* activación */

.nav-fractal li:hover > ul{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

/* links internos */

.nav-fractal li ul li{

    display:block;
}

.nav-fractal li ul li a{

    display:block;

    padding:3px 6px;

    font-size:11px;

    color:#ddd;

    white-space:nowrap;
}

.nav-fractal li ul li a:hover{

    background:#555;
}

/* galerías hacia izquierda */

.nav-fractal li.submenu-izq > ul{

    left:auto !important;

    right:0 !important;
}

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

.menu-derecho{

    width:100%;
}

.menu-derecho img{

    display:block;

    margin:0 auto 8px auto;

    border:1px solid rgba(0,0,0,.6);
}

/* ======================================================
   FIRMA
====================================================== */

.autor-firma{

    margin-top:12px;

    text-align:right;

    font-size:12px;

    line-height:1.35;
}

/* ======================================================
   FOOTER
====================================================== */

.footer{

    margin-top:18px;

    text-align:center;

    font-size:11px;

    color:#aaa;
}

.footer-legal{

    margin-top:8px;

    text-align:center;

    font-size:11px;

    line-height:1.4;
}

/* ======================================================
   AVISO IMPRESIÓN
====================================================== */

.print-aviso{

    margin:8px auto 0 auto;

    padding-top:6px;

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

    text-align:center;

    font-size:11px;

    color:#b8b0a0;
}

/* ======================================================
   BOTÓN FLOTANTE CYBERFRACTAL
====================================================== */

.btn-flotante{

    position:fixed;

    left:50%;

    margin-left:325px;

    bottom:22px;

    z-index:99999;

    opacity:0;

    pointer-events:none;

    transform:
        translateY(28px)
        rotate(-14deg);

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

/* visible */

.btn-flotante.visible{

    opacity:.82;

    pointer-events:auto;

    transform:
        translateY(0)
        rotate(0deg);
}

/* hover */

.btn-flotante:hover{

    opacity:1;

    transform:
        scale(1.08)
        rotate(-8deg);
}

/* imagen */

.btn-flotante img{

    width:42px;

    height:42px;

    display:block;

    filter:
        drop-shadow(0 0 8px rgba(120,220,255,.35));
}

/* ======================================================
   ONDA FRACTAL
====================================================== */

#onda-fractal{

    position:fixed;

    left:50%;

    margin-left:310px;

    bottom:18px;

    width:60px;
    height:60px;

    pointer-events:none;

    opacity:0;

    transition:opacity .5s ease;
}

#onda-fractal.activa{

    opacity:.45;
}

/* ======================================================
   BRAVE / CHROMIUM
====================================================== */

@supports (-webkit-appearance:none){

    body{

        -webkit-font-smoothing:antialiased;

        text-rendering:geometricPrecision;
    }

    .nav-fractal{

        transform:translateZ(0);
    }
}