/* =========================================================
   CABECERA DEL PERSONAJE
   ========================================================= */

.character-header {
    display: flex;

    align-items: center;

    gap:
        clamp(12px, 1.5vw, 22px);

    border-bottom:
        1px solid rgba(197, 145, 55, 0.55);

    padding:
        clamp(6px, 0.8vh, 12px)
        clamp(8px, 1vw, 16px)
        clamp(8px, 1vh, 14px);

    position: relative;
}


.character-header::after {
    content: "";

    position: absolute;

    left: 4%;
    right: 4%;

    bottom: -2px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(218, 170, 75, 0.55),
            transparent
        );
}


.crest-icon {
    width:
        clamp(55px, 5vw, 78px);

    height:
        clamp(55px, 5vw, 78px);

    flex-shrink: 0;

    filter:
        drop-shadow(0 4px 6px black)
        drop-shadow(
            0 0 6px
            rgba(216, 164, 62, 0.15)
        );
}


.character-title h1 {
    font-family:
        var(--font-heading);

    font-size:
        clamp(2rem, 3.7vw, 3.7rem);

    margin: 0;

    line-height: 0.95;

    background:
        var(--gold-gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    text-shadow:
        2px 2px 4px
        rgba(0, 0, 0, 0.8);

    letter-spacing:
        clamp(1px, 0.2vw, 3px);
}


.character-title h2 {
    font-family:
        var(--font-heading);

    font-size:
        clamp(0.9rem, 1.5vw, 1.45rem);

    color:
        var(--parchment);

    margin:
        5px 0 0 0;

    text-transform:
        uppercase;

    letter-spacing:
        clamp(1px, 0.25vw, 3px);

    font-weight:
        400;
}


/* =========================================================
   INFORMACIÓN TEXTUAL
   ========================================================= */

.info-row {
    display: grid;

    grid-template-columns:
        clamp(105px, 8vw, 135px)
        minmax(0, 1fr);

    gap: 10px;

    align-items: baseline;

    font-size:
        clamp(0.9rem, 1vw, 1.1rem);

    margin-bottom:
        clamp(4px, 0.6vh, 8px);
}


.info-row strong {
    color:
        var(--gold-dark);

    font-family:
        var(--font-heading);

    text-transform:
        uppercase;

    width:
        auto;

    font-weight:
        normal;

    white-space:
        nowrap;
}


.info-row span {
    min-width: 0;

    overflow-wrap:
        anywhere;
}


/* =========================================================
   TABLA DE ATRIBUTOS
   ========================================================= */

.table-attributes {
    width: 100%;

    border-collapse:
        collapse;
}


.table-attributes th {
    text-align:
        left;

    color:
        var(--gold);

    font-family:
        var(--font-heading);

    font-size:
        0.85rem;

    border-bottom:
        1px solid
        var(--bronze-dark);

    padding-bottom:
        5px;

    font-weight:
        normal;
}


.table-attributes td {
    padding:
        clamp(5px, 0.7vh, 8px) 0;

    border-bottom:
        1px dotted
        rgba(255,255,255,0.05);

    font-size:
        clamp(1rem, 1.15vw, 1.2rem);
}


.attr-name {
    display: flex;

    align-items:
        center;

    gap: 8px;

    font-family:
        var(--font-heading);

    color:
        var(--parchment-light);

    text-transform:
        uppercase;
}


.attr-name svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   RASGOS
   ========================================================= */

.trait-group h4 {
    font-family:
        var(--font-heading);

    font-size:
        0.95rem;

    margin:
        0 0 2px 0;

    text-transform:
        uppercase;
}


.trait-group p {
    font-size:
        1rem;

    margin:
        0;
}


.color-res {
    color:
        var(--green);
}


.color-weak {
    color:
        var(--red);
}


.color-sense {
    color:
        var(--gold);
}


.color-lang {
    color:
        var(--muted-green);
}


/* =========================================================
   RETRATO CENTRAL
   ========================================================= */

.portrait-wrapper {
    height:
        clamp(260px, 40vh, 445px);

    min-height:
        0;

    border:
        3px solid
        var(--bronze-dark);

    box-shadow:
        inset 0 0 35px
        rgba(0, 0, 0, 0.95),

        0 5px 15px
        rgba(0, 0, 0, 0.8),

        0 0 0 1px
        rgba(214, 164, 72, 0.08);

    background:
        radial-gradient(
            circle at center,
            #101311 0%,
            #060807 70%,
            #020303 100%
        );

    position:
        relative;

    overflow:
        hidden;
}


.portrait-wrapper img {
    width: 100%;
    height: 100%;

    object-fit:
        contain;

    object-position:
        center top;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;

    position:
        relative;

    z-index:
        1;
}


.portrait-wrapper:hover img {
    transform:
        scale(1.02);
}


/* =========================================================
   SOMBRA SOBRE EL RETRATO
   ========================================================= */

.portrait-wrapper::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 38%,
            rgba(0, 0, 0, 0.47) 100%
        );

    pointer-events:
        none;

    z-index:
        2;
}


/* =========================================================
   MARCO INTERIOR DEL RETRATO
   ========================================================= */

.portrait-wrapper::after {
    content: "";

    position:
        absolute;

    inset:
        7px;

    border:
        1px solid
        rgba(211, 161, 65, 0.22);

    box-shadow:
        inset 0 0 20px
        rgba(0, 0, 0, 0.7);

    pointer-events:
        none;

    z-index:
        3;
}


.portrait-fallback {
    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--gold-dark);

    font-family:
        var(--font-heading);
}


/* =========================================================
   PANEL TIPO PERGAMINO
   ========================================================= */

.parchment-panel {
    background-color:
        var(--parchment);

    background-image:

        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.03) 2px,
            rgba(0,0,0,0.03) 4px
        ),

        radial-gradient(
            ellipse at center,
            var(--parchment-light) 0%,
            var(--parchment) 60%,
            var(--parchment-dark) 100%
        );

    color:
        var(--ink);

    border:
        2px solid
        var(--bronze-dark);

    box-shadow:
        inset 0 0 30px
        rgba(91, 60, 24, 0.5),

        0 5px 15px
        rgba(0,0,0,0.8);

    padding:
        clamp(14px, 1.4vw, 22px);
}


.parchment-panel .panel-title {
    color:
        var(--ink);

    border-bottom-color:
        var(--ink);

    font-weight:
        900;

    text-shadow:
        none;
}


.history-text p {
    margin-bottom:
        12px;

    text-align:
        justify;

    font-size:
        clamp(1rem, 1.05vw, 1.12rem);
}


.history-quote {
    text-align:
        center;

    font-style:
        italic;

    font-size:
        clamp(1.05rem, 1.2vw, 1.25rem);

    margin-top:
        15px;

    font-weight:
        700;

    color:
        var(--red-dark);
}


/* =========================================================
   LISTAS VISUALES
   ========================================================= */

.icon-list {
    list-style:
        none;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    margin:
        0;

    padding:
        0;
}


.icon-list-item {
    display:
        flex;

    gap:
        10px;

    align-items:
        center;

    padding:
        clamp(5px, 0.6vh, 8px) 5px;

    border-bottom:
        1px solid
        rgba(138, 99, 45, 0.2);
}


.icon-list-item:last-child {
    border-bottom:
        none;
}


.icon-box {
    width:
        36px;

    height:
        36px;

    background:
        var(--black-soft);

    border:
        1px solid
        var(--bronze);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;
}


.icon-box svg {
    width:
        21px;

    height:
        21px;
}


.item-data {
    flex-grow:
        1;

    min-width:
        0;
}


.item-title {
    font-family:
        var(--font-heading);

    font-size:
        1rem;

    margin:
        0 0 2px 0;
}


.item-desc {
    font-size:
        0.85rem;

    color:
        #a0a0a0;

    margin:
        0;

    line-height:
        1.2;
}


.item-extra {
    font-family:
        var(--font-heading);

    color:
        var(--gold);

    font-size:
        1rem;

    text-align:
        right;
}


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

.relation-card {
    display:
        flex;

    gap:
        12px;

    align-items:
        center;
}


.relation-portrait {
    width:
        65px;

    height:
        78px;

    border:
        2px solid
        var(--bronze-dark);

    object-fit:
        cover;

    flex-shrink:
        0;
}


.relation-title {
    font-family:
        var(--font-heading);

    color:
        var(--gold);

    font-size:
        1.05rem;

    margin:
        0 0 4px 0;

    text-transform:
        uppercase;
}


.relation-desc {
    font-size:
        0.9rem;

    line-height:
        1.25;

    color:
        var(--parchment-light);

    margin:
        0;
}


/* =========================================================
   OBJETIVOS
   ========================================================= */

.objective-txt {
    font-size:
        1.05rem;

    text-align:
        justify;

    line-height:
        1.4;

    margin:
        0;
}


/* =========================================================
   CONDICIONES
   ========================================================= */

.conditions-wrap {
    display:
        flex;

    gap:
        clamp(15px, 2vw, 30px);
}


.cond-col {
    flex:
        1;
}


.cond-col h4 {
    font-family:
        var(--font-heading);

    border-bottom:
        1px solid #333;

    padding-bottom:
        5px;

    margin:
        0 0 8px 0;

    font-size:
        1rem;
}


.cond-col ul {
    padding-left:
        20px;

    font-size:
        1rem;

    margin:
        0;
}


.vic-title {
    color:
        var(--green);

    border-color:
        var(--green-dark) !important;
}


.def-title {
    color:
        var(--red);

    border-color:
        var(--red-dark) !important;
}