:root{  
    /* --bg-lienso   :#333333; */
    --bg-lienso     : #bbccdd;
    --bg-portada    : #bbc6d1;
    --bg-div        : #e7b212;    /* bg-datos-options-menu */
    --bg-items      : #e6e6fa;


    --bg-card     :var(--bg-portada);
    /* --bg-header   :#7fa3a4;
    --bg-body     :#7fa3a4;
    --bg-footer   :#7fa3a4;
    --bg-shape    :#003355; */

    --bg-header   :var(--bg-card);
    --bg-body     :var(--bg-card);
    --bg-footer   :var(--bg-card);
    --bg-shape    :#003355;



    --color-titulo:white;
    --color-texto :#000;

    /* --width-card    : 100%;     */
    --width-card    : 350px;

    --height-card   : 250px;    /*min-height : del elemento div-card*/
    --height-header : 200px;    /*min-height : del elemento div-header*/
    --size-imagen   : 170px;    /*div : imagen: width X height  */
    --size-img      : 150px;    /*img : elemento imagen: width X height  */

    --bg-imagen : linear-gradient(to right, #2A7B9B, #57C785, #E64767);
    --brd-radius-imagen: 50%;
    --brd-radius: 9px;
    --brd-paddin: 15px;
    
    --div-shodow: 5px 5px 3px black;
}

/* para igualar el fondo al presentar y compartir */
.card-presenta{
    background: var(--bg-card);
}
.card-container{

    background-color: var(--bg-lienso);
    border-radius: var(--brd-radius);

}

/* 
        BLOKE : CARDS : formato generico para card: header-body-footer
*/
.cards {

    width       : var(--width-card);
    /* width: clump(350px, 100%,500px); */
    min-height      : var(--height-card);
    border-radius   : var(--brd-radius);
    box-shadow      : var(--div-shodow);
    background-color: var(--bg-card);

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;
}
    /* modificador cards :  */
    .cards--vertical {
        flex-direction: row;
        --brd-paddin: 10px 3px;
        --height-header: 100%;
        --height-footer: 100%;
    }
    /* modificador cards: */
    .cards--gral {
        /* variable  BLOKE : plantillas - CARDWEB */
        --bg-card: whitesmoke;
        /*  --bg-header   :var(--bg-card);
            --bg-body     :var(--bg-card);;
            --bg-footer   :var(--bg-card);; */

        --height-header : 50px;     /* es para :  min-heigth */
        --size-imagen   : 200px;    /*div-contenedor de la img: width X height*/
        --size-img      : 200px;    /*img : elemento imagen: width X height  */
        --bg-imagen     : #002244;
        --brd-radius-imagen: 12px;
        /* --brd-radius-imagen: 50%; */
    }

.cards__header {
    width: 100%;
    min-height: var(--height-header);
    /*para manejar el shape.*/

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

    border-top-left-radius: var(--brd-radius);
    border-top-right-radius: var(--brd-radius);
    background: var(--bg-header);

    /* para usar: shape */
    position: relative;
}
.cards__header--vertical{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}

/* Elementos : dentro de header */
.cards__titulo {
    color: var(--color-titulo);
    /* para usar: shape */
    position: relative;
    z-index: 3;
}

.cards__imagen {
    width: var(--size-imagen);
    /* height: var(--size-imagen); */
    border-radius: var(--brd-radius-imagen);
    background: var(--bg-imagen);

    /* para el manejo de img:element */
    display: flex;
    justify-content: center;
    align-items: center;

    /* para usar: shape */
    position: relative;
    z-index: 2;
}

.cards__img {
    /* height: var(--size-img); */
    width: var(--size-img);
    border-radius: var(--brd-radius-imagen);
    object-fit: fill;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);    */
}

/* opcional - la forma-shape */
.cards__shape {
    /* position: absolute; PARA SACARLO DEL FLUJO : posicionarlo a mano */
    position: absolute;
    z-index: 1;
    width: calc(100% + 100px);
    height: calc(100% + 25px);
    background: var(--bg-shape);
    top: -100px;
    left: -100px;
}
    /* MODIFICADOR : forma - rotada */
    .cards__shape--rotade {
        /* position: absolute; PARA SACARLO DEL FLUJO : posicionarlo a mano */
        position: absolute;
        z-index: 1;
        width: calc(100% + 100px);
        height: calc(100% + 25px);
        background: var(--bg-shape);

        transform: rotate(-25deg);
        top: -75px;
        left: -100px;
    }

    /* MODIFICADOR : forma - invertida */
    .cards__shape--invertida {
        /* background: linear-gradient(to right, red, blue); */
        background: var(--bg-shape);
        transform: rotate(25deg);
        top: -75px;
        left: -10px;
    }


.cards__body {
    width: 100%;
    min-height: var(--height-body);
    padding: var(--brd-paddin);
    background-color: var(--bg-body);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.cards__footer {
    display: flex;
    align-items: stretch;
    justify-content: center;

    width: 100%;
    min-height: var(--height-footer);

    background-color: var(--bg-footer);
    border-bottom-left-radius: var(--brd-radius);
    border-bottom-right-radius: var(--brd-radius);

    /* margin-top: auto; */
}


/**
    ****************************************
    css : PARA MYMENU : para el menu DATOS ....
    ****************************************
**/
.menudato {
    width: 100%;
    background-color: var(--bg-div);
    color: var(--color-texto);
    /* border: 1px solid black; */

    border-radius: 7px;
    padding: 3px 0px;

}
.menudato .imagen-qr {
    width: 75%;
    margin: 5px;
}
.menudato ul {
    background-color: #054e07;
    list-style-position: outside;
    /* disc, circle, ... firutia a mostrar .... */
    list-style-type: square;
}
.menudato ul li {
    background-color: var(--bg-items);
 
    margin: 2px 7px;
    padding: 19px 5px;
    text-align: start;
}
.menudato ul li::marker {
    color: red;
    text-shadow: 2px 2px blueviolet;
    font-weight: bolder;
    font-size: 25px;
}


/**
    ****************************************
    css : PARA MY-Formulario : para el formulario Mensaje Whats App ....
    ****************************************
**/

.mensajeWhats {
    background: #E5E5E5;
    color: green;
    min-width: 315px;
    max-width: 700px;
    width: 90%;

    padding: 2px;
    border-radius: 9px;

    margin: 1px auto;
}

.formulario {
    display: flex;
    gap: 1px;
    color: #119200;
    font-weight: 700;
}

.formulario img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    justify-content: end;
}