/* --- RESET Y VARIABLES GLOBALES --- */
:root {
    /* Paleta Elegante (Provisional) */
    --color-bg: #fdfbf7;        /* Crema muy claro */
    --color-text: #1a1a1a;      /* Gris casi negro para legibilidad */
    --color-primary: #0d1b2a;   /* Azul noche intenso */
    --color-accent: #d4af37;    /* Dorado / Champán */
    
    /* Tipografías base */
    --font-main: 'Helvetica Neue', Arial, sans-serif;
    --font-headings: 'Georgia', serif; /* Toque elegante para títulos */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Evitar que el usuario seleccione el texto al hacer toques rápidos en el móvil */
    -webkit-user-select: none;
    user-select: none;
    /* Quitar el highlight azul en móviles al tocar botones */
    -webkit-tap-highlight-color: transparent; 
}

/* Permitir escribir en campos de texto */
input, textarea {
    -webkit-user-select: auto;
    user-select: auto;
    font-family: var(--font-main);
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    /* Ajuste para móviles: 100dvh usa el alto dinámico sin contar la barra de Chrome */
    width: 100vw;
    height: 100dvh; 
    overflow: hidden; /* El scroll lo manejará cada sección por su cuenta */
    overscroll-behavior-y: none; /* Evita el efecto rebote "pull-to-refresh" */
}

/* --- GESTIÓN DE VISTAS (SPA) --- */
#app-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.section {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto; /* Permite scroll vertical interno a cada sección */
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

/* Clases de utilidad para mostrar/ocultar */
.hidden {
    display: none !important;
    opacity: 0;
}