/* --- Variables CSS (Paleta Final) --- */
/* Se replican las variables para consistencia en el entorno móvil. */
:root {
    --color-blanco: #ffffff;
    --color-marron-oscuro: #5C4033;   /* Marrón chocolate */
    --color-marron-claro: #A0522D;    /* Marrón tierra / terracota */
    --color-gris-oscuro: #5C4033;     /* Contraste de texto/fondo. Uso el marrón oscuro para texto */
    --color-gris-claro: #F0F0F0;      /* Fondo muy claro / casi blanco */
    --color-acento: #FFD700;          /* Acento: Amarillo dorado para botones y detalles */
    --color-whatsapp: #25D366;        /* Verde oficial de WhatsApp */
    --color-sombra: rgba(0, 0, 0, 0.15); /* Sombra estándar para elementos */
    --color-sombra-hover: rgba(0, 0, 0, 0.3); /* Sombra más pronunciada en hover */

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;

    --transition-ease: all 0.3s ease;
}

/* --- Estilos Específicos para Pantallas Pequeñas (Mobile) --- */

/* Se aplica a pantallas de hasta 640px de ancho */
@media (max-width: 640px) {
    
    /* Cuerpo y Margenes */
    body {
        padding: 20px 10px;
        /* Se mantiene 'flex-start' si el contenido es largo y necesitas scroll arriba */
        align-items: flex-start; 
    }
    
    /* Botón Volver (Ajuste para mobile) */
    .btn-volver {
        top: 10px; 
        left: 10px; 
    }
    
/* Efecto al tocar en móvil: El botón se "hunde" ligeramente y el texto se vuelve blanco */
.btn-mailto:active {
    transform: translateY(1px); /* Efecto de "hundimiento" */
    box-shadow: 0 3px 8px rgba(92, 64, 51, 0.6); /* Sombra más sutil */
    color: var(--color-blanco); /* ¡El texto se vuelve blanco al tocar! */
}
    /* Contenedor Principal */
    .container-reserva {
        padding: 30px 20px;
        box-shadow: 0 5px 20px var(--color-sombra);
    }

    /* Cabecera */
    .reserva-header h1 {
        /* TAMAÑO AJUSTADO: 2.5rem */
        font-size: 2.5rem;
    }

    .reserva-header p {
        /* TAMAÑO AJUSTADO: 1.1rem */
        font-size: 1.1rem;
    }

    /* Botón Mailto (Full width en móvil) */
    .btn-mailto {
        width: 100%;
        /* Corrección de padding para que no sobresalga */
        padding: 14px 10px; 
        /* Se mantiene 1rem */
        font-size: 1rem;
        letter-spacing: 1px;
        margin: 30px 0;
        box-shadow: 0 3px 8px rgba(92, 64, 51, 0.3);
        box-sizing: border-box;
    }

    .btn-mailto svg {
        width: 24px;
        height: 24px;
    }

    /* Bloque de Plantilla */
    .template-block {
        padding: 20px;
        margin-top: 20px;
    }

    .template-block p {
        /* TAMAÑO AJUSTADO: 1.1rem */
        font-size: 1.1rem;
    }
    
    .template-content {
        padding: 15px;
    }

    .template-content pre {
        /* TAMAÑO AJUSTADO: 0.9rem */
        font-size: 0.9rem;
    }
    
    /* Pie de Página */
    .reserva-footer {
        /* TAMAÑO AJUSTADO: 0.8rem */
        font-size: 0.8rem;
    }
}