/* ==========================================================
   CHICAS BLOCKS · POST IT
========================================================== */

.postit{

    --paper:#fff6a7;
    --rotation:-1deg;

    position:relative;

    background:var(--paper);

    margin:3rem auto;

    padding:2rem;

    border-radius:8px;

    transform:rotate(var(--rotation));

    box-shadow:
        0 2px 8px rgba(0,0,0,.10),
        10px 10px 0 rgba(0,0,0,.07);

    transition:.25s;

    max-width:760px;

}

.postit:hover{

    transform:rotate(0deg) translateY(-4px);

    box-shadow:
        0 12px 24px rgba(0,0,0,.12),
        14px 14px 0 rgba(0,0,0,.08);

}


/* =======================
        CINTA
======================= */

.postit::before{

    content:"";

    position:absolute;

    width:120px;

    height:28px;

    left:50%;

    top:-14px;

    transform:translateX(-50%) rotate(-3deg);

    background:
    linear-gradient(
        rgba(255,255,255,.65),
        rgba(255,255,255,.40)
    );

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

    backdrop-filter:blur(3px);

}


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

.postit-header{

    margin-bottom:1.25rem;

    display:flex;

    align-items:center;

    gap:.6rem;

}

.postit-title{

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.22em;

    text-transform:uppercase;

    opacity:.72;

}


/* =======================
        BODY
======================= */

.postit-body{

    font-size:1.05rem;

    line-height:1.9;

}

.postit-body p:last-child{

    margin-bottom:0;

}


/* ==========================================================
                COLORES
========================================================== */

.postit-concepto{

    --paper:#FFF6A8;

    --rotation:-1.2deg;

}

.postit-cifras{

    --paper:#DDEFFF;

    --rotation:.9deg;

}

.postit-contexto{

    --paper:#DEF7E4;

    --rotation:-.5deg;

}

.postit-derecho{

    --paper:#F2F2F2;

    --rotation:0deg;

}

.postit-debate{

    --paper:#FFE3EA;

    --rotation:1.1deg;

}

.postit-insight{

    --paper:#ffffff;

    --rotation:-.4deg;

    border-left:6px solid #1f1f1f;

}


/* ==========================================================
        EFECTO CUANDO HAY VARIOS SEGUIDOS
========================================================== */

.postit + .postit{

    margin-top:-.8rem;

}


/* ==========================================================
        LINKS
========================================================== */

.postit a{

    font-weight:600;

}


/* ==========================================================
        NEGRITAS
========================================================== */

.postit strong{

    background:rgba(255,255,255,.35);

    padding:0 .18rem;

    border-radius:4px;

}