/* ==========================================
   ARABE.HTML
   ESTILO ACADÉMICO MODERADO
   COMPATIBILIDAD LEGACY
========================================== */

.articulo-fractal{

    max-width:100%;

    color:#d8d8d8;

    font-size:13px;

    line-height:1.75;

    text-align:justify;

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

    padding-left:15px;
    padding-right:15px;

    box-sizing:border-box;
}

/* ==========================================
   TÍTULOS
========================================== */

.articulo-fractal h1{

    color:#e6d08a;

    font-size:28px;

    font-weight:normal;

    text-align:center;

    margin:10px 0 20px 0;

    padding-bottom:10px;

    border-bottom:1px solid #555;
}

.articulo-fractal h2{

    color:#d6b85c;

    font-size:20px;

    font-weight:normal;

    margin:24px 0 12px 0;
}

.articulo-fractal h3{

    color:#d6b85c;

    font-size:18px;

    font-weight:normal;

    margin:24px 0 10px 0;
}

/* ==========================================
   PÁRRAFOS
========================================== */

.articulo-fractal p{
    margin:0 0 16px 0;
}

.articulo-fractal ul{
    margin:10px 0 18px 30px;
}

.articulo-fractal li{
    margin-bottom:6px;
}

/* ==========================================
   IMAGEN PRINCIPAL
========================================== */

.img-borde{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    margin:0 auto 14px auto;

    border:1px solid #c8a84d;
}

/* ==========================================
   CITAS
========================================== */

.cita-fractal{

    background:#1d1d1d;

    border-left:4px solid #d6b85c;

    color:#f0e0b0;

    text-align:center;

    line-height:1.65;

    padding:14px;

    margin:18px 0;
}

.cita-fractal span{

    display:block;

    margin-top:8px;

    color:#b8b8b8;

    font-size:11px;
}

/* ==========================================
   PANEL DE RAÍCES
========================================== */

.panel-raices{

    margin:28px 0;

    padding:16px;

    background:#1a1a1a;

    border:1px solid #444;
}

/* ==========================================
   GRILLA
========================================== */

.grilla-raices{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    justify-content:center;
}

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

.raiz-item{

    flex:1 1 240px;

    min-width:220px;

    padding:12px;

    background:#222;

    border:1px solid #444;

    color:#d8d8d8;

    line-height:1.55;
}

.raiz-titulo{

    display:block;

    margin-bottom:6px;

    color:#e6d08a;

    font-weight:bold;
}

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

@media screen and (max-width:640px){

    .contenedor-600{
        width:100%;
        max-width:100%;
    }

    table{
        width:100% !important;
    }

    td{
        display:block;
        width:100% !important;
    }

    .articulo-fractal{

        font-size:15px;

        padding-left:15px;
        padding-right:15px;
    }

    .articulo-fractal h1{
        font-size:24px;
        line-height:1.25;
    }

    .articulo-fractal h2{
        font-size:20px;
    }

    .articulo-fractal h3{
        font-size:18px;
    }

    .raiz-item{

        min-width:100%;

        flex:1 1 100%;
    }

    .cita-fractal{
        font-size:14px;
    }
}