/* CENTRADO TOTAL */
/* --- 1. BASE Y FONDO --- */
body {
    background-image: url('pattern 627.gif'); 
    
    margin: 0;
    padding: 0;
    font-family: 'Courier New', monospace;
    
    /* Centrado total del cuadro de sobres */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    
    /* Tu marco exterior de la página */
    border: 20px solid transparent;
    border-image-source: url('marko.png');
    border-image-slice: 30;
    border-image-repeat: round;
    box-sizing: border-box;
    overflow-x: hidden;
}
/* --- 2. EL CUADRO DE FONDO PARA LOS SOBRES --- */

.main-frame {
    position: relative; /* ◄ ¡ AGREGA ESTA LÍNEA AQUÍ ! */
    
    background-image: url('cartafondo.jpg'); 
    
    border: 30px solid transparent; 
    border-image-source: url('cuadroborde2.png');
    
    background-clip: padding-box;
    border-image-slice: 40; 
    border-image-repeat: round; 
    
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* --- 3. LA CUADRÍCULA (Sobres más grandes) --- */
.letters-grid {
    display: grid;
    grid-template-columns: repeat(3, 280px); /* Tamaño aumentado */
    gap: 20px 50px; /* 20px arriba/abajo, 50px a los lados */
    justify-content: center;
}

.envelope {
    width: 320px; 
    height: 230px; /* Proporción para sobres grandes */
    background-image: url('SOBRE.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.envelope:hover {
    transform: scale(1.08) rotate(-2deg);
    filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.5));
}

/* --- 4. BOTÓN HOME --- */
/* EL CSS QUE TE GUSTA ❥ */
.back-btn {
    position: absolute;
    top: -28px;  /* Lo subimos un poquito más para que libre el borde al ser más grande */
    left: 0px;   /* Alineado perfectamente al borde izquierdo */
    text-decoration: none;
    color: #000;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 12px; /* Subió de 10px a 12px para que se lea mejor */
    padding: 3px 10px; /* Aumentamos el relleno para que el botón sea más gordito y largo */
    background: linear-gradient(180deg, #ffffff 0%, #bbbbbb 45%, #777777 50%, #bbbbbb 100%);
    border: 1px solid #555;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px #fff, 1px 1px 1px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 10;
}

.back-btn:hover {
    filter: brightness(1.1);
}

/* EFECTO OPCIONAL AL DAR CLIC: Invierte ligeramente la sombra para que se hunda */
.back-btn:active {
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
    padding-top: 3px;
    padding-bottom: 1px;
}

/* --- 5. OVERLAYS (Las cartas al abrirse) --- */
.overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}

.paper-content {
    background-image: url('hoja.png'); 
    background-size: 100% 100%;
    width: 450px;
    height: 600px;
    padding: 60px 45px 45px 55px;
    position: relative;
    box-sizing: border-box;
    animation: zoomIn 0.3s ease;
}

.text-area {
  white-space: pre-line;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    color: #000;
    font-size: 16px;
    line-height: 1.4;
}

.close-btn {
    position: absolute;
    top: 20px; right: 25px;
    cursor: pointer;
    font-size: 26px;
    color: #333;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}