/* ==========================================================
   CASO FORTI
   ========================================================== */


.forti-page {

    width:
        min(
            calc(100% - 24px),
            1100px
        );

    margin:
        0 auto;
}


.forti-centered {

    text-align:
        center;
}


.forti-emphasis {

    margin-top:
        28px;

    text-align:
        center;

    font-family:
        Georgia,
        serif;

    font-size:
        21px;

    color:
        #d3bd8d;
}


/* CARTA */

.forti-letter {

    position:
        relative;

    overflow:
        hidden;

    max-width:
        690px;

    margin:
        30px auto;

    padding:
        54px 52px 58px;

    border:
        1px solid rgba(72,53,30,.42);

    background:
        radial-gradient(
            circle at 11% 13%,
            rgba(105,71,31,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(92,60,26,.10),
            transparent 25%
        ),
        #e5d5b4;

    color:
        #33281c;

    box-shadow:
        0 2px 2px rgba(0,0,0,.12),
        0 14px 42px rgba(0,0,0,.30);

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

    font-size:
        17px;

    line-height:
        1.72;

    transform:
        rotate(-.18deg);
}


.forti-letter::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .30;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(77,52,29,.025) 4px
        );
}


.forti-letter p {

    position:
        relative;

    z-index:
        1;

    margin:
        0 0 19px;
}


.forti-letter-date {

    position:
        relative;

    z-index:
        1;

    margin-bottom:
        34px;

    text-align:
        right;

    font-style:
        italic;

    color:
        #544432;
}


.forti-signature {

    margin-top:
        42px !important;

    margin-right:
        28px !important;

    text-align:
        right;

    font-size:
        23px;

    font-style:
        italic;

    transform:
        rotate(-3deg);
}


/* ANEXO */

.forti-technical {

    max-width:
        660px;

    margin:
        28px auto;

    padding:
        28px 30px;

    border:
        1px solid #3c372d;

    background:
        #12110f;

    font-family:
        "Courier New",
        monospace;

    line-height:
        1.65;
}


.forti-tech-line {

    display:
        inline-block;

    margin-bottom:
        24px;

    padding:
        7px 10px;

    border:
        1px solid #665a45;

    letter-spacing:
        .12em;

    font-size:
        12px;

    color:
        #c9b791;
}


/* MESA */

.forti-desk-card {

    width:
        min(
            96vw,
            1180px
        );

    max-width:
        none;
}


.forti-desk-toolbar {

    display:
        grid;

    grid-template-columns:
        46px 1fr 46px auto;

    align-items:
        center;

    gap:
        10px;

    margin:
        24px 0 12px;
}


.forti-desk-toolbar button {

    min-height:
        42px;
}


.forti-desk-viewport {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        min(
            67vh,
            760px
        );

    min-height:
        430px;

    overflow:
        hidden;

    border:
        1px solid #312d25;

    background:
        #11100e;
}


#deskPhoto {

    display:
        block;

    max-width:
        94%;

    max-height:
        94%;

    object-fit:
        contain;

    transform-origin:
        center center;

    transition:
        transform .08s linear;

    cursor:
        grab;

    touch-action:
        none;

    user-select:
        none;
}


#deskPhoto.dragging {

    cursor:
        grabbing;

    transition:
        none;
}


.forti-desk-missing {

    padding:
        30px;

    color:
        #968a77;

    text-align:
        center;
}


.forti-desk-footer {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        10px 2px;

    font-size:
        9px;

    letter-spacing:
        .16em;

    color:
        #8d806c;
}


/* INVESTIGACION */

.forti-evidence-area {

    margin-top:
        38px;

    padding-top:
        28px;

    border-top:
        1px solid #342f26;
}


.forti-front-grid {

    display:
        grid;

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

    gap:
        12px;

    margin:
        22px 0;
}


.forti-front {

    padding:
        18px;

    border:
        1px solid #4a4235;

    background:
        #171511;

    color:
        #cab995;

    letter-spacing:
        .14em;

    font-size:
        11px;
}


.forti-front-body,
.forti-cross {

    margin:
        18px 0;

    padding:
        26px;

    border:
        1px solid #3b362d;

    background:
        #15130f;
}


.forti-front-body form,
.forti-cross form,
#formExecutive,
#formProof {

    display:
        grid;

    gap:
        11px;

    margin-top:
        22px;
}


.forti-front-body input,
.forti-cross select,
#formExecutive input,
#formProof input {

    width:
        100%;

    padding:
        13px;

    border:
        1px solid #4a4235;

    border-radius:
        7px;

    color:
        #eee7d9;

    background:
        #0e0d0b;
}


.forti-result {

    margin-top:
        16px;

    line-height:
        1.55;

    color:
        #cdbf9f;
}


/* DOCUMENTO */

.forti-document {

    max-width:
        680px;

    margin:
        30px auto;

    padding:
        34px;

    border:
        1px solid #554a38;

    background:
        #d9cfb7;

    color:
        #262018;

    text-align:
        center;

    font-family:
        Georgia,
        serif;
}


.forti-document > div {

    margin-bottom:
        10px;

    letter-spacing:
        .18em;

    font-size:
        10px;
}


.forti-document > strong {

    display:
        block;

    margin-bottom:
        28px;

    font-size:
        22px;
}


.forti-reveal,
.forti-warning,
.forti-fiction,
.forti-verona-final {

    margin:
        28px 0;

    padding:
        22px 24px;

    border-left:
        3px solid #8e7b58;

    background:
        #161410;
}


.forti-reveal span,
.forti-fiction > div,
.forti-verona-final span {

    letter-spacing:
        .15em;

    font-size:
        10px;

    color:
        #aa9978;
}


/* PERSONAS */

.forti-person-grid {

    display:
        grid;

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

    gap:
        14px;

    margin:
        26px 0;
}


.forti-person {

    padding:
        22px;

    border:
        1px solid #3a352c;

    background:
        #161410;
}


.forti-person > span {

    font-size:
        9px;

    letter-spacing:
        .16em;

    color:
        #9e8e70;
}


.forti-person h3 {

    margin:
        10px 0 14px;

    font-family:
        Georgia,
        serif;
}


.forti-timeline {

    display:
        grid;

    gap:
        9px;

    margin:
        28px 0;
}


.forti-timeline > div {

    display:
        grid;

    grid-template-columns:
        120px 1fr;

    gap:
        15px;

    padding:
        14px;

    border-bottom:
        1px solid #342f27;
}


.forti-timeline-critical {

    background:
        rgba(142,123,88,.10);
}


/* DECISION */

.forti-decision {

    display:
        grid;

    gap:
        12px;

    margin-top:
        28px;
}


.forti-secondary {

    margin:
        12px 0;

    padding:
        12px 16px;
}


.forti-resolution {

    margin:
        25px 0;

    font-family:
        Georgia,
        serif;

    font-size:
        18px;

    line-height:
        1.65;
}


@media (max-width: 760px) {

    .forti-letter {

        padding:
            38px 27px 42px;

        font-size:
            16px;
    }


    .forti-front-grid,
    .forti-person-grid {

        grid-template-columns:
            1fr;
    }


    .forti-desk-toolbar {

        grid-template-columns:
            42px 1fr 42px;
    }


    #zoomReset {

        grid-column:
            1 / -1;
    }


    .forti-desk-viewport {

        min-height:
            360px;

        height:
            58vh;
    }


    .forti-timeline > div {

        grid-template-columns:
            1fr;

        gap:
            5px;
    }
}