:root{

    --bg-card   : #bbccdd;   /*aliceblue;  color-fondo dela card */ 
    --txt-card  : black;     /* color-texto : para los card .... */
    --ttl-card  : white;     /* COLOR DE LETRA PARA EL TIULO */
    --card-width: 300px;
    /* --card-width    : clamp(350px, 100%, 450px);  */

    --size-imagen   : 250px;    /*div   : imagen: width X height  */
    --size-img      : 250px;    /*img   : elemento imagen: width X height  */

    --brd-radius-img: 9px;      /* parametrizado para img-redonda */
    --bg-shape      : #003355;/* color-fpndo del shape */
    --rote-grado    : 0deg;     /* rotacion del shape */
}
.card-radius-img {/* border-radius-img: parametrizabel - hasta redondo */
    /* --brd-radius-img:50%; */
    /* --brd-radius-img: 9px; */
    border-radius: var(--brd-radius-img) ;
}
.card{

    /* --bg-color : lightgray; */    /* color de fondo no cambiable*/
    background-color: var(--bg-card);
    color           : var(--txt-card);
    min-height      : var(--min-height);
    width           : var(--card-width);
   /* width           :  clamp(350px, 100%, 500px); */

    border-radius   : var(--brd-radius);
    overflow        : hidden;      /* evita dar formato a las esquinas (anula-desboradmiento) */
}
.card__head{
    /* --bg-card      :red; */
    --min-height    : 50px;

    width: 100%;
    min-height: var(--min-height);
    text-align: center;

    /*para manejar el shape.*/
    position: relative;/* para posisionar : shape */
    border-radius   : var(--brd-radius);
    /* overflow: hidden; */
}
.card__titulo {/* Elementos : dentro de head */
    color: var(--ttl-card);
    background-color: transparent;  
    margin-top: 15px;
    margin-bottom: 20px;

    position: relative; /* para usar: shape */
    z-index: 3;
}
.card__imagen {
    --bg-card  : darkgreen;
    --spc-padding:0px;    

    /* background: var(--bg-color); */
    width: var(--size-imagen);
    margin: 9px auto;/* para centrar la imagen */
    /* padding: var(--spc-padding); */
    border-radius: var(--brd-radius-img);
    
    display: flex;  /* para el manejo de img:element centra el contenido*/
    justify-content: center;
    align-items: center;

    /* para usar: shape-activa el z-index */
    position: relative;
    z-index: 2;
}
.card__img {
    width: var(--size-img);
    /* height: var(--size-img); */ 
    object-fit: fill;
    object-position: center;
    border-radius: var(--brd-radius-img);
}

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

        transform: rotate(var(--rote-grado));
/*         top: -85px;
        left: -100px;  */
    }

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

.card__body{
    --bg-card      : green;
    width           : 100%;
    min-height      : var(--min-height);
}
.card__foot{
    --bg-card      : blue;
    width: 100%;
    min-height      : var(--min-height);
}

/**
    ****************************************
    css : PARA MYMENU : para el menu DATOS ....
    ****************************************
**/
.sumarioDetalle{
    width: 100%;
    padding: 5px 15px;
}
.menudato {
    width: 100%;
    /* --bg-color : #e7b212; */
    background-color: #e7b212;  /* var(--bg-color); */
    --txt-color: black;
    color: var(--txt-color);
    border-radius: var(--brd-radius);
    /* border-radius: 0px 0px 9px 9p; */
    padding: 1px 3px;
}
.menudato .imagen-qr {
    width: 75%;
    margin: 5px;
}
.menudato ul {
    width: 100%;
    background-color: #054e07;
    list-style-position: outside;
    /* disc, circle, ... firutia a mostrar .... */
    list-style-type: square;
    border-radius: var(--brd-radius);
}
.menudato ul li {
    --bg-color : #e6e6fa;
    background-color: var(--bg-color);
     margin: 2px 7px;
    padding: 9px 5px;
    text-align: start;
}
.menudato ul li::marker {
    color: white;
    text-shadow: 2px 2px black;
    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;
}