/* =====================================================
   AMIGOS DE PASOLINI
===================================================== */

.amigos-page {

    max-width: 1400px;

    margin: 0 auto;

    padding:
        40px 5vw 80px;
}


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

.amigos-header {

    margin-bottom: 35px;
}


.amigos-label {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.65rem;

    letter-spacing: 3px;

    color: #999;

    margin-bottom: 12px;
}


.amigos-title {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(2.8rem, 5vw, 4.5rem);

    font-weight: 500;

    line-height: 0.95;

    color: #111;
}


.amigos-intro {

    max-width: 600px;

    margin-top: 20px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.25rem;

    line-height: 1.5;

    color: #666;
}


/* =====================================================
   GRAFO + LEYENDA
===================================================== */

.grafo-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        250px;

    gap: 45px;

    align-items: start;
}


/* =====================================================
   GRAFO
===================================================== */

.grafo-container {

    width: 100%;

    height: 700px;

    overflow: hidden;

    border-top:
        1px solid #ddd;

    border-bottom:
        1px solid #ddd;
}


#grafo {

    width: 100%;

    height: 100%;
}


#grafo svg {

    display: block;

    width: 100%;

    height: 100%;
}


/* =====================================================
   RELACIONES
===================================================== */

.grafo-relaciones line {

    fill: none;

    stroke-width: 4px;

    opacity: 0.8;
}


.grafo-relaciones
.relacion-amigo-de {

    stroke: #4a6fa5;
}


.grafo-relaciones
.relacion-dirigio {

    stroke: #b84c4c;
}


.grafo-relaciones
.relacion-vivio-en {

    stroke: #5d8a62;
}


.grafo-relaciones
.relacion-influido-por {

    stroke: #875ca8;
}


.grafo-relaciones
.relacion-relacionado-con {

    stroke: #999;
}


/* =====================================================
   NODOS
===================================================== */

.grafo-nodo {

    cursor: grab;
}


.grafo-nodo:active {

    cursor: grabbing;
}


.grafo-nodo image {

    display: block;
}


.grafo-borde {

    fill: none;

    stroke: white;

    stroke-width: 4px;

    pointer-events: none;
}


/* =====================================================
   LEYENDA
===================================================== */

.grafo-leyenda {

    padding-top: 20px;
}


.leyenda-titulo {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.65rem;

    letter-spacing: 3px;

    color: #999;

    margin-bottom: 18px;
}


.leyenda-grupo {

    margin-bottom: 28px;
}


.leyenda-subtitulo {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.75rem;

    font-weight: 600;

    margin-bottom: 10px;

    color: #222;
}


.leyenda-item {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 8px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.75rem;

    color: #444;
}


.leyenda-item img {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    object-fit: cover;

    border:
        1px solid #ddd;
}


/* =====================================================
   SEPARADOR
===================================================== */

.leyenda-separador {

    width: 100%;

    height: 1px;

    background: #ddd;

    margin:
        30px 0;
}


/* =====================================================
   RELACIONES EN LA LEYENDA
===================================================== */

.leyenda-relacion {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.75rem;

    color: #444;
}


.leyenda-linea {

    width: 35px;

    height: 4px;

    border-radius: 3px;

    display: inline-block;
}


.leyenda-linea.amigo {

    background: #4a6fa5;
}


.leyenda-linea.dirigio {

    background: #b84c4c;
}


.leyenda-linea.vivio {

    background: #5d8a62;
}


.leyenda-linea.influencia {

    background: #875ca8;
}


.leyenda-linea.relacionado {

    background: #999;
}


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

@media (max-width: 900px) {


    .grafo-layout {

        grid-template-columns: 1fr;

    }


    .grafo-container {

        height: 600px;

    }


    .grafo-leyenda {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;

    }


    .leyenda-separador {

        display: none;

    }

}


@media (max-width: 600px) {


    .amigos-page {

        padding:
            30px 20px 60px;

    }


    .amigos-title {

        font-size: 3rem;

    }


    .grafo-container {

        height: 550px;

    }


    .grafo-leyenda {

        display: block;

    }


}