@media (max-width: 768px) {
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
        text-decoration: none;
        overflow-y: hidden;
    }
    html {
        overflow: hidden;
    }
    body{
        overflow-y: hidden;
    }
    .intro{
        /* NO hace falta, menos mal */
    }
    .main-cumple{
        padding: 10px;
        margin-top: -70px;
    }
    .fondo-texto {
        overflow: hidden !important;
    }
    .main-cumple-titulo{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main-cumple p{
        text-align: center;
    }
    .main-cumple-titulo h1{
        font-size: 40px;
        color: white;
        text-align: center;
    }
    .main-cumple-video{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .main-cumple-video video{
        position: relative;
        border-radius: 5px;
        width: 170px;
    }
    .texto-flotar{
        font-size: 15px;
    }
    .controles-botones{
        position: absolute;
        bottom: 8%;
        display: flex;
        gap: 50px;
        z-index: 9998;
    }
    .matrix{
        font-size: 10px;
    }
    .main-cuadrito{
        padding: 20px;
        font-size: 10px;
        top: 72%;
    }
    .main-fotos{
        margin-top: -70px;
    }
    .main-fotos h1{
        font-size: 40px;
    }
    .corcho {
        background-color: rgb(177, 123, 85);
        background-image: repeating-linear-gradient(
            45deg,
            rgba(0,0,0,0.03) 0px,
            rgba(0,0,0,0.03) 2px,
            transparent 2px,
            transparent 10px
        );
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(3, 120px);
        grid-auto-flow: dense;
        gap: 5px;
        justify-content: center;
        min-height: 50vh;
        z-index: 999;
        backdrop-filter: blur(5px);
    }
    .foto {
        position: relative;
        background: white;
        padding: 10px 10px 40px 10px;
        box-shadow: 3px 3px 10px rgba(0,0,0,0.4);
        width: 100px; /* igual que la columna */
        height: 100px;
        transform: rotate(var(--rot));
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        z-index: 999;
    }
    .foto:nth-child(1) { --rot: -3deg; }
    .foto:nth-child(2) { --rot: 2deg; }
    .foto:nth-child(3) { --rot: -1.5deg; }
    .foto:nth-child(4) { --rot: 3deg; }
    .foto:nth-child(5) { --rot: -2deg; }
    .foto:nth-child(6) { --rot: 1.5deg; }
    .foto:nth-child(7) { --rot: -2.5deg; }

    .foto:hover {
        transform: rotate(0deg) scale(1.05);
        z-index: 10;
        box-shadow: 6px 6px 20px rgba(0,0,0,0.5);
    }
    .foto img {
        width: 100%;
        display: block;
    }
    .marcar{
        position: absolute;
        top: 53.5%;
        /* PUTO RESPONSIVE */
        left: -15%;
        width: 50%;
        z-index: 2;
    }
    .marcar1{
        transform: rotate(10deg);
        position: absolute;
        top: 74%;
        left: 5%;
        width: 100%;
        z-index: 2;
        color: rgb(166, 33, 33);
        font-size: 40px;
    }
    .marcar1 img{
        width: 50px;
    }   
    .chincheta {
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 16px;
        background: radial-gradient(circle at 40% 40%, #ff6b6b, #c0392b);
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    .chincheta::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: 6px;
        background: #888;
        border-radius: 0 0 2px 2px;
    }
    .contador-amistad {
        width: 90%;
        height: 60%;
        margin-top: -110px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        color: red;
        font-family: 'regal';
        z-index: 999;
        background-color: #dbdbdb62;
        padding: 20px;
        border-radius: 5px;
        backdrop-filter: blur(4px);
        font-size: 20px;
        text-align: center;
    }
    .numero-dias {
        font-size: 80px;
        font-family: 'regal';
        color: white;
        text-shadow: 0 0 20px rgba(255,255,255,0.5);
        animation: zoomI 2s linear infinite;
    }
    .carta-seccion {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .sobre {
        position: absolute;
        overflow: visible;
        width: 300px;
        height: 200px;
        background: #f5e6c8;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 4px 4px 15px rgba(0,0,0,0.4);
        transition: height 0.6s ease;
    }
    .sobre-tapa {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-left: 150px solid transparent;
        border-right: 150px solid transparent;
        border-top: 100px solid #e8c99a;
        transform-origin: top;
        transition: transform 0.6s ease;
        z-index: 9;
    }
    .sobre.abierto .sobre-tapa {
        transform: rotateX(180deg);
    }
    .sobre-cuerpo {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-family: 'regal';
        color: #888;
        font-size: 18px;
    }
    .carta {
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        background: white;
        padding: 20px;
        border-radius: 3px;
        font-family: 'regal';
        font-size: 16px;
        line-height: 1.6;
        display: flex;
        flex-direction: column;
        gap: 10px;
        opacity: 0;
        transform: translateY(0px);
        transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
         pointer-events: none;
        z-index: 999;
    }
    .sobre.abierto .carta {
        opacity: 1;
        transform: translateY(-60px);
        pointer-events: all;
    }
}