/* =========================================================
   CAMPOSANTO VIRTUAL
   MEMORIAL
========================================================= */

:root{
    --mem_navy:#071326;
    --mem_navy2:#0d1a30;
    --mem_gold:#c99635;
    --mem_gold_light:#e1b34e;
    --mem_cream:#faf4ea;
    --mem_text:#ffffff;
    --mem_muted:#aab4c4;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;

    min-height:100vh;

    color:
        var(--mem_text);

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

    background:
        #071326;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

.mem_wrap{
    width:min(
        1060px,
        calc(100% - 40px)
    );

    margin:auto;
}


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

.mem_header{
    position:absolute;

    left:0;
    top:0;
    right:0;

    z-index:20;

    padding:
        18px 0;
}

.mem_nav{
    display:grid;

    grid-template-columns:
        260px 1fr 220px;

    align-items:center;

    gap:25px;
}

.mem_logo{
    display:flex;

    align-items:center;

    gap:11px;
}

.mem_logo_icon{
    width:43px;
    height:52px;

    display:grid;
    place-items:center;

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

    border-radius:
        21px 21px 4px 4px;

    color:
        var(--mem_gold);

    font-size:22px;
}

.mem_logo_text b{
    display:block;

    font:
        600 20px/1
        "Cormorant Garamond",
        serif;

    letter-spacing:.16em;
}

.mem_logo_text small{
    display:block;

    margin-top:6px;

    text-align:center;

    color:
        var(--mem_gold);

    font-size:8px;
    font-weight:700;

    letter-spacing:.36em;
}

.mem_menu{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:28px;
}

.mem_menu a{
    color:
        rgba(255,255,255,.86);

    font-size:10px;
}

.mem_actions{
    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:10px;
}

.mem_panel_button,
.mem_exit_button{
    min-height:39px;

    padding:
        0 17px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    font-size:10px;
    font-weight:700;
}

.mem_panel_button{
    border:
        1px solid
        rgba(255,255,255,.55);
}

.mem_exit_button{
    background:
        linear-gradient(
            135deg,
            #d9a946,
            #b97e26
        );
}


/* =========================================================
   HERO
========================================================= */

.mem_hero{
    position:relative;

    min-height:580px;

    overflow:hidden;
}

.mem_hero_bg{
    position:absolute;

    inset:0;

    background:
        url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=2000&q=90")
        center/cover
        no-repeat;
}

.mem_hero_overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(4,13,28,.93),
            rgba(5,14,29,.75) 45%,
            rgba(5,14,29,.55)
        );
}

.mem_hero_grid{
    position:relative;

    z-index:4;

    min-height:580px;

    padding-top:115px;

    display:grid;

    grid-template-columns:
        .82fr 1.18fr;

    gap:70px;

    align-items:center;
}


/* =========================================================
   PERFIL
========================================================= */

.mem_profile{
    text-align:center;
}

.mem_photo{
    width:170px;
    height:170px;

    margin:
        0 auto 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border:
        3px solid
        var(--mem_gold);

    border-radius:50%;

    background:
        rgba(5,14,29,.55);

    box-shadow:
        0 14px 40px
        rgba(0,0,0,.28);

    position:relative;
}

.mem_photo img{
    position:absolute;

    inset:0;

    width:100% !important;
    height:100% !important;

    min-width:100% !important;
    min-height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:cover !important;
    object-position:center !important;

    border-radius:50% !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;
}

.mem_photo span{
    color:#ffffff;

    font-size:50px;
}

.mem_profile h1{
    max-width:420px;

    margin:
        0 auto;

    font:
        600 47px/.94
        "Cormorant Garamond",
        serif;
}

.mem_dates{
    margin-top:13px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    color:
        var(--mem_gold_light);

    font-size:13px;
    font-weight:600;
}

.mem_date_separator{
    opacity:.7;
}

.mem_profile blockquote{
    max-width:440px;

    margin:
        18px auto 0;

    color:#ffffff;

    font:
        italic 18px/1.45
        "Cormorant Garamond",
        serif;
}


/* =========================================================
   VIDEO
========================================================= */

.mem_video_card{
    padding:12px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:15px;

    background:
        rgba(4,13,28,.64);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.30);
}

.mem_video{
    width:100%;

    aspect-ratio:16/9;

    display:block;

    border-radius:10px;

    background:#000;
}

.mem_video_empty{
    min-height:300px;

    padding:35px;

    display:flex;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    text-align:center;

    background:
        linear-gradient(
            135deg,
            #7a5e37,
            #181d27
        );
}

.mem_play{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin-bottom:16px;

    border-radius:50%;

    color:#0a1428;

    background:#ffffff;

    font-size:20px;
}

.mem_video_empty h2{
    margin:0;

    font:
        600 21px
        "Cormorant Garamond",
        serif;
}

.mem_video_empty p{
    margin:
        10px 0 0;

    color:#e2e5e9;

    font-size:9px;
}

.mem_add_button{
    display:inline-flex;

    margin-top:15px;

    min-height:38px;

    padding:
        0 15px;

    align-items:center;
    justify-content:center;

    border-radius:9px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #d8aa49,
            #b87b25
        );

    font-size:9px;
    font-weight:800;
}


/* =========================================================
   ACCIONES
========================================================= */

.mem_action_section{
    padding:
        45px 0 18px;

    background:
        #08162b;
}

.mem_action_bar{
    display:grid;

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

    overflow:hidden;

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

    border-radius:11px;
}

.mem_action_item{
    min-height:76px;
    padding:10px 14px;
    border:0;
    border-right:1px solid rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    color:#ffffff;
    background:transparent;
    cursor:pointer;
    font-size:10px;
    transition:background .18s ease;
}

.mem_action_item:hover{
    background:rgba(255,255,255,.045);
}

.mem_action_item:last-child{
    border-right:0;
}

.mem_action_circle{
    width:38px;
    height:38px;
    min-width:38px;
    margin:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(225,179,78,.48);
    border-radius:50%;
    color:var(--mem_gold_light);
    background:rgba(201,150,53,.08);
}

.mem_action_circle svg{
    width:21px;
    height:21px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.mem_action_label{
    color:#ffffff;
    font-size:10px;
    font-weight:600;
    line-height:1.25;
}


/* =========================================================
   CONTENIDO
========================================================= */

.mem_content{
    min-height:390px;

    padding:
        0 0 55px;

    background:
        #08162b;
}

.mem_content_grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:20px;
}

.mem_content_card{
    min-height:310px;

    padding:28px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:12px;

    background:
        rgba(255,255,255,.025);
}

.mem_section_label{
    color:
        var(--mem_gold_light);

    font-size:8px;
    font-weight:800;

    letter-spacing:.19em;
}

.mem_content_card h2{
    margin:
        13px 0 20px;

    font:
        600 34px/.98
        "Cormorant Garamond",
        serif;
}

.mem_story{
    color:
        #eef1f5;

    font-size:11px;

    line-height:1.8;
}

.mem_empty_text{
    color:
        var(--mem_muted);

    font-size:10px;
}

.mem_empty_text a{
    display:inline-block;

    margin-top:10px;

    color:
        var(--mem_gold_light);

    font-weight:700;
}


/* =========================================================
   GALERÍA
========================================================= */

.mem_gallery{
    display:grid;

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

    gap:8px;
}

.mem_gallery_item{
    padding:0;

    border:0;

    border-radius:9px;

    overflow:hidden;

    aspect-ratio:1;

    background:#122139;

    cursor:pointer;
}

.mem_gallery_item img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .2s ease;
}

.mem_gallery_item:hover img{
    transform:
        scale(1.04);
}

.mem_gallery_empty{
    min-height:200px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    border:
        1px dashed
        rgba(255,255,255,.16);

    border-radius:10px;

    color:
        var(--mem_muted);

    text-align:center;
}

.mem_gallery_empty>span{
    color:
        var(--mem_gold_light);

    font-size:40px;
}

.mem_gallery_empty p{
    font-size:10px;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.mem_lightbox{
    position:fixed;

    z-index:1000;

    inset:0;

    padding:35px;

    background:
        rgba(0,0,0,.92);
}

.mem_lightbox[hidden]{
    display:none;
}

.mem_lightbox img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.mem_lightbox_close{
    position:absolute;

    right:25px;
    top:15px;

    width:45px;
    height:45px;

    border:0;

    color:#ffffff;

    background:
        transparent;

    cursor:pointer;

    font-size:35px;
}


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

@media(max-width:850px){

    .mem_nav{
        grid-template-columns:
            1fr auto;
    }

    .mem_menu{
        display:none;
    }

    .mem_hero_grid{
        grid-template-columns:1fr;

        gap:35px;

        padding:
            120px 0 50px;
    }

    .mem_content_grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:580px){

    .mem_wrap{
        width:
            calc(100% - 28px);
    }

    .mem_logo_text{
        display:none;
    }

    .mem_hero{
        min-height:auto;
    }

    .mem_hero_grid{
        min-height:auto;
    }

    .mem_photo{
        width:135px;
        height:135px;
    }

    .mem_profile h1{
        font-size:39px;
    }

    .mem_video_empty{
        min-height:220px;
    }

    .mem_action_bar{
        grid-template-columns:
            1fr 1fr;
    }

    .mem_action_item{
        min-height:92px;
        padding:12px 8px;
        flex-direction:column;
        gap:7px;
        border-bottom:
            1px solid
            rgba(255,255,255,.12);
        text-align:center;
    }

    .mem_action_circle{
        width:42px;
        height:42px;
        min-width:42px;
    }

    .mem_action_circle svg{
        width:23px;
        height:23px;
    }

    .mem_gallery{
        grid-template-columns:
            repeat(2,1fr);
    }

}


/* =========================================================
   HOMENAJES RECIENTES
========================================================= */

.mem_tributes{
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.10);
}

.mem_tributes_head{
    margin-bottom:14px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
}

.mem_tributes_label{
    display:block;
    margin-bottom:5px;
    color:var(--mem_gold);
    font-size:7px;
    font-weight:800;
    letter-spacing:.16em;
}

.mem_tributes_head h3{
    margin:0;
    color:#fff;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:21px;
    font-weight:600;
    line-height:1.05;
}

.mem_tributes_button{
    flex:0 0 auto;
    min-height:36px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(216,168,72,.45);
    border-radius:8px;
    color:var(--mem_gold_light);
    text-decoration:none;
    font-size:7px;
    font-weight:800;
}

.mem_tributes_scroll{
    max-height:310px;
    padding-right:7px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(201,150,53,.60) rgba(255,255,255,.06);
}

.mem_tribute_item{
    padding:13px 2px;
    display:flex;
    gap:12px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.mem_tribute_item:last-child{
    border-bottom:0;
}

.mem_tribute_icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(216,168,72,.35);
    border-radius:50%;
    background:rgba(201,150,53,.07);
    font-size:15px;
}

.mem_tribute_body{
    min-width:0;
    flex:1;
}

.mem_tribute_top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.mem_tribute_top strong{
    color:#fff;
    font-size:9px;
    font-weight:700;
}

.mem_tribute_top time{
    color:var(--mem_muted);
    font-size:6px;
}

.mem_tribute_type{
    display:block;
    margin-top:2px;
    color:var(--mem_gold_light);
    font-size:6px;
    font-weight:700;
}

.mem_tribute_body p{
    margin:7px 0 0;
    color:#b8c2d0;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:14px;
    font-style:italic;
    line-height:1.35;
}

.mem_tributes_empty{
    padding:18px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px dashed rgba(255,255,255,.15);
    border-radius:10px;
    color:var(--mem_muted);
}

.mem_tributes_empty > span{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--mem_gold_light);
    background:rgba(201,150,53,.09);
    font-size:17px;
}

.mem_tributes_empty strong{
    display:block;
    color:#fff;
    font-size:8px;
}

.mem_tributes_empty p{
    margin:3px 0 0;
    font-size:7px;
    line-height:1.45;
}

@media(max-width:580px){
    .mem_tributes_head{
        align-items:stretch;
        flex-direction:column;
    }

    .mem_tributes_button{
        width:100%;
        min-height:42px;
    }

    .mem_tributes_scroll{
        max-height:360px;
    }
}