/**/
/* 1. Preparación del encabezado */
.post-it-pin {
    position: relative; /* Contexto de posicionamiento para el pin */
    padding-top: 15px;  /* Espacio extra arriba para que el pin no tape el texto */
    text-align: center; /* Opcional: centra el texto "¡Aviso!" bajo el pin */
}

/* 2. La cabeza del pin (chincheta roja) */
.post-it-pin::before {
    content: ''; /* Necesario para que el pseudo-elemento exista */
    position: absolute;
    top: -10px; /* Lo empuja hacia el borde superior del post-it */
    left: 50%;
    transform: translateX(-50%); /* Centrado exacto horizontal */
    width: 14px;
    height: 14px;
    background-color: #e74c3c; /* Rojo estilo papelería */
    border-radius: 50%; /* Lo hace un círculo perfecto */
    /* Sombra interna para dar volumen 3D y sombra externa para relieve */
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.3), 2px 2px 4px rgba(0,0,0,0.3);
    z-index: 2; /* Lo mantiene por encima de la punta metálica */
}

/* 3. La punta metálica del pin (opcional para mayor realismo) */
.post-it-pin::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 8px;
    background-color: #bdc3c7; /* Color gris metálico */
    z-index: 1; /* Queda por debajo de la cabeza roja */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/*Colores principales*/
        .text-cyan{
            color: #1ddeb6;
        }
        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .hover-lift:hover {
            transform: translateY(-5px);
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        }
        .transition-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }   
        .transition-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 3rem rgba(0,0,0,.15) !important;
        }
/* Estilos específicos para el componente del Monitor y Post-it */
        .monitor-wrapper {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .monitor-frame {
            border: 15px solid #333;
            border-radius: 15px 15px 0 0;
            border-bottom: 30px solid #222;
            background: #000;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .monitor-stand {
            width: 150px;
            height: 40px;
            background: #444;
            margin: 0 auto;
            clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
        }

        .post-it {
            position: absolute;
            top: -10px;
            right: -20px;
            background-color: #ffd700;
            color: #000;
            padding: 15px;
            width: 200px;
            min-height: 50px;
            box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
            transform: rotate(5deg);
            z-index: 10;
            font-family: 'Comic Sans MS', cursive, sans-serif; /* Estilo nota a mano */
            transition: all 0.3s ease;
        }

        .post-it::after {
            content: "";
            position: absolute;
            bottom: -5px;
            right: -5px;
            border-width: 10px;
            border-style: solid;
            border-color: transparent rgba(0,0,0,0.1) rgba(0,0,0,0.1) transparent;
        }

/*Letras*/