body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
     /* --- PROPIEDADES PARA LA IMAGEN DE FONDO --- */
    background-image: url('/img/bg3.png'); /* Reemplaza esto con la URL o ruta de tu imagen */
    background-size: cover; /* Escala la imagen para cubrir todo el contenedor */
    background-position: center; /* Centra la imagen en la pantalla */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
}

.pathway-gothic-one-regular {
  font-family: "Pathway Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Estilos de la carta */
.letter-link {
    display: block;
    width: 627px;
    height: 331px;
    text-decoration: none;
    position: relative;
    z-index: 10;
}

.letter-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Animación y estilos del cursor */
.cursor-pointer {
    position: absolute;
    top: 68.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #38445d;
    font-size: 2.3rem;
    z-index: 21;
    pointer-events: none;
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { transform: translate(-50%, -50%) scale(1); }
    to { transform: translate(-50%, -50%) scale(1.25); }
}

.writing-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;
    width: 600px;
    text-align: center;
    color: #fff;
    font-size: 2rem;
    padding: 0 20px;
    font-family: "Pathway Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.writing-text {
    /* Eliminamos las animaciones de typing y border-right del CSS */
    overflow: hidden;
    white-space: nowrap;
    margin: 5px 0;
    text-shadow: 3px 3px 2px #1d1d1d;
}

.writing-cursor {
    border-right: 0.15em solid #333;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #333; }
}

.letter-link.clicked .letter-image {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transform: scale(0.98);
}

/* --- ANIMACIÓN DE AGITACIÓN DE ESQUINA A ESQUINA --- */
@keyframes shake {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-5px, -5px) rotate(-1deg); }
  50% { transform: translate(5px, 5px) rotate(1deg); }
  75% { transform: translate(-5px, -5px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

/* --- ACTIVACIÓN DE LA ANIMACIÓN CON HOVER --- */
.letter-link:hover .letter-image {
  animation: shake 0.5s ease-in-out; /* Animación más corta para que se note el "rebote" */
  animation-iteration-count: 1; /* Esto es clave: la animación solo se ejecuta una vez */
}

/* Para navegadores más antiguos (algunos móviles) */
.letter-link .letter-image {
  transition: transform 0.2s ease-in-out;
}
.letter-link:not(:hover) .letter-image {
  transform: translate(0,0) rotate(0);
}
@media (max-width: 430px) {
    /* El body se encarga del fondo responsive */
    body {
        background-image: url(/img/bg3-m.png);
        background-size: cover; /* Asegura que el fondo cubra toda la pantalla */
        background-position: center; /* Centra el fondo */
        background-repeat: no-repeat;
    }
    
    /* El contenedor principal centra todo el contenido */
    .main-container {
        width: 100%; /* Ocupa todo el ancho disponible */
        align-items: center;
        justify-content: center;
    }
    
    /* El sobre se adapta al ancho de la pantalla pero con un margen */
    .letter-link {
        width: 90%; /* <--- CAMBIO CLAVE: Usa porcentaje para ser responsive */
        max-width: 390px; /* <--- Limita el ancho máximo para que no sea muy grande */
        height: auto; /* <--- La altura se ajusta automáticamente */
        left: auto; /* <--- CAMBIO CLAVE: Elimina el desplazamiento a la izquierda */
        transform: none; /* Elimina cualquier otra transformación */
    }
    
    /* La imagen del sobre debe adaptarse a su contenedor */
    .letter-image {
        width: 100%;
        height: auto; /* La altura se ajusta automáticamente a la imagen */
    }

    /* Ajusta el cursor */
    .cursor-pointer {
        top: 65%; /* Reajusta la posición vertical del cursor */
        left: 50%; /* Centra el cursor horizontalmente */
        transform: translate(-50%, -50%);
    }

    /* El texto del writing-container también se adapta */
    .writing-container {
        width: 90%;
        font-size: 1.2rem; /* Reduce el tamaño de la fuente para móviles */
        padding: 0 10px;
    }
}