/* 0. GLOBAL RESET & VARS */
*, *::before, *::after { box-sizing: border-box; }

:root {
    /* --- 1. COLOR PALETTE --- */
    --color-gold: #d4af37;    /* Primary Action */
    --color-sand: #b38728;    /* Secondary Action */
    --color-silver: #a0a0a0;  /* Tertiary Action */
    --color-brand-primary: var(--color-gold);
    --color-brand-secondary: var(--color-sand);
    --color-brand-tertiary: var(--color-silver);
    --color-surface-base: #fdfbf7;
    --color-text-muted: #7d6e5d;
    --color-bar-bg: #ffffff;
    
    /* --- 2. LAYOUT TOKENS --- */
    --layout-bar-height: 70px;
    --layout-page-padding: 20px;
    --layout-gap-large: 10px;
    --layout-gap-small: 5px;
    
    /* --- 3. TYPOGRAPHY TOKENS --- */
    --font-header-size: clamp(1.5rem, 4vw, 2.0rem);
    --font-subheader-size: clamp(0.9rem, 2vw, 1.1rem);
    --font-body-size: 1rem;
    --font-bar-top-size: 2.4rem;
    --font-bar-bottom-size: 1.6rem;
    
    /* --- 4. COMPONENT TOKENS --- */
    --comp-card-bg-color: 255, 255, 255;
    --comp-card-opacity: 0.9;
    --comp-card-blur: 18px;
    --comp-card-padding: 30px 40px;
    --comp-card-radius: 20px;
    --comp-card-border: 1px solid rgba(212, 175, 55, var(--ui-opacity-border));
    --comp-card-shadow: 0 10px 30px rgba(0,0,0,0.1);
    --comp-divider-width: 80%;
    --comp-input-padding: 15px;
    --comp-input-radius: 12px;
    --comp-input-border: 2px solid var(--color-brand-primary);
    
    /* --- 5. GLOBAL UI TOKENS (Propiedades transversales) --- */
    --ui-border-header: 1px solid var(--color-brand-primary);
    --ui-shadow-header: 0 2px 10px rgba(0,0,0,0.1);
    --ui-shadow-card: var(--comp-card-shadow);
    --ui-opacity-border: 0.2;
    --ui-transition-base: all var(--anim-duration-base) ease-in-out;
    --ui-z-index-fixed: 100;
    --ui-z-index-overlay: 9999;
    
    /* --- 6. ANIMATION & FX TOKENS (Cinética y efectos visuales) --- */
    --anim-duration-base: 0.3s;
    --anim-duration-shake: 0.8s;
    --anim-duration-collide: 3s;
    --ui-opacity-particle: 0.75;
    --fx-char-size: 2.5rem;
    --fx-collision-offset: 40px;
    --fx-collision-rebound: 45px;
    --fx-particle-size: 1.5rem;
}

/* --- 01-BASE --- */
@font-face { font-family: 'Playfair Display'; src: url('../fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype'); font-display: swap; }
html { scrollbar-gutter: stable; overflow-y: scroll; }
body { margin: 0; min-height: 100dvh; font-family: 'Playfair Display', serif; font-size: var(--font-body-size); background: var(--color-surface-base); }
main { width: 100%; display: block; padding-top: calc(var(--layout-bar-height) + var(--layout-gap-large)); padding-bottom: var(--layout-bar-height); }

/* --- 02-LAYOUT --- */
.layout-centered { display: flex; justify-content: center; align-items: center; overflow: hidden; padding: var(--layout-page-padding); }
.layout-document { display: block; padding: calc(var(--layout-bar-height) + var(--layout-gap-large)) var(--layout-page-padding); }

/* --- 03-COMPONENTS --- */
.comp-card { background: rgba(var(--comp-card-bg-color), var(--comp-card-opacity)); backdrop-filter: blur(var(--comp-card-blur)); padding: var(--comp-card-padding); overflow-x: hidden; border-radius: var(--comp-card-radius); box-shadow: var(--comp-card-shadow); width: 100%; max-width: 400px; margin: 0 auto; text-align: center; border: var(--comp-card-border); display: flex; flex-direction: column; align-items: center; }
@media (max-width: 480px) { .comp-card { max-width: 92%; padding: var(--layout-gap-large); } }
.comp-card__header { color: var(--color-brand-secondary); font-size: var(--font-header-size); margin: 0 0 var(--layout-gap-small) 0; padding: 0 10px; line-height: 1.2; }
.comp-card__subheader { color: var(--color-text-muted); font-size: var(--font-subheader-size); font-style: italic; margin-bottom: calc(var(--layout-gap-small) * 2); line-height: 1.4; }
.comp-card__divider { border: 0; border-top: 1px solid var(--color-brand-primary); margin: var(--layout-gap-large) auto; width: var(--comp-divider-width); }
.comp-card__body { font-size: var(--font-body-size); color: var(--color-text-muted); margin-top: var(--layout-gap-large); line-height: 1.4; }
.comp-bar { position: fixed; width: 100%; min-height: var(--layout-bar-height); background: var(--color-bar-bg); z-index: var(--ui-z-index-fixed); display: flex; align-items: center; justify-content: center; padding: 0 20px; box-shadow: var(--ui-shadow-header); }
.comp-bar--top { top: 0; border-bottom: var(--ui-border-header); }
.comp-bar--bottom { bottom: 0; border-top: var(--ui-border-header); }
.comp-bar__container { display: flex; align-items: center; justify-content: center; gap: 15px; }
.comp-bar__item { font-size: var(--font-bar-top-size); font-weight: bold; color: var(--color-brand-secondary); }
.comp-bar__timer { font-size: var(--font-bar-bottom-size); font-weight: bold; cursor: pointer; transition: color var(--ui-transition-base); color: var(--color-brand-primary); }
.comp-input { width: 100%; padding: var(--comp-input-padding); font-size: 1.2rem; border: var(--comp-input-border); border-radius: var(--comp-input-radius); text-align: center; margin-bottom: calc(var(--layout-gap-small) * 2); }
.comp-btn { cursor: pointer; font-weight: bold; transition: var(--ui-transition-base), transform 0.1s ease, filter 0.1s ease; border-radius: var(--comp-input-radius); }
.comp-btn:active { transform: scale(0.97); filter: brightness(0.85); }
.comp-btn--primary { width: 100%; padding: var(--comp-input-padding); font-size: calc(var(--font-subheader-size) * 1.2); background: var(--color-brand-primary); color: white; border: none; }
.comp-btn--primary:hover { background: var(--color-brand-secondary); }
.comp-btn--secondary { width: auto; padding: 5px 20px; font-size: calc(var(--font-body-size) * 0.9); background: transparent; color: var(--color-brand-secondary); border: 1px solid var(--color-brand-primary); border-radius: 50px; }
.comp-btn--secondary:hover { background: var(--color-brand-primary); color: white; }
.comp-btn--tertiary { width: auto; padding: 5px 20px; font-size: calc(var(--font-body-size) * 0.9); background: transparent; color: var(--color-brand-tertiary); border: 1px solid var(--color-brand-tertiary); border-radius: 50px; }
.comp-btn--tertiary:hover { background: var(--color-brand-tertiary); color: white; }
.fab-lang { position: fixed; bottom: 50px; right: var(--layout-page-padding); z-index: var(--ui-z-index-overlay); width: 60px; height: 60px; border-radius: 50%; background-color: var(--color-surface-base); border: var(--ui-border-header); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-brand-secondary); font-weight: bold; font-size: 0.75rem; padding: 0; }
.comp-seats-control { display: none; margin-top: var(--layout-gap-large); justify-content: center; align-items: center; width: 100%; }
.comp-pill-selector { display: flex; gap: var(--layout-gap-large); align-items: center; justify-content: center; }
.comp-label-seat { font-weight: bold; }

/* --- 04-ANIMATIONS --- */
.anim-shake-error { animation: shake var(--anim-duration-shake) ease-in-out; }
.anim-collide-left { animation: collide-left var(--anim-duration-collide) ease-out forwards; }
.anim-collide-right { animation: collide-right var(--anim-duration-collide) ease-out forwards; }
.anim-scale-in { animation: show-amp var(--anim-duration-collide) ease-out forwards; }
@keyframes collide-left { 0% { transform: translateX(-100vw); } 45% { transform: translateX(calc(50vw - var(--fx-collision-offset))); } 55% { transform: translateX(calc(50vw - var(--fx-collision-rebound))); } 70% { transform: translateX(calc(50vw - var(--fx-collision-offset))); } 100% { transform: translateX(0); } }
@keyframes collide-right { 0% { transform: translateX(100vw); } 45% { transform: translateX(calc(-50vw + var(--fx-collision-offset))); } 55% { transform: translateX(calc(-50vw + var(--fx-collision-rebound))); } 70% { transform: translateX(calc(-50vw + var(--fx-collision-offset))); } 100% { transform: translateX(0); } }
@keyframes show-amp { 0%, 70% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 15%, 45%, 75% { transform: translateX(-8px); } 30%, 60%, 90% { transform: translateX(8px); } }

/* --- 05-FX --- */
.fx-particle { position: absolute; top: -50px; animation: fall linear forwards; color: var(--color-brand-primary); font-size: var(--fx-particle-size); opacity: var(--ui-opacity-particle); pointer-events: none; }
@keyframes fall { to { transform: translateY(110vh); } }

/* --- 06-UTILITIES --- */
.u-active { border-color: var(--color-brand-secondary) !important; }
.u-hidden { display: none !important; }
.u-stack { display: flex; flex-direction: column; align-items: center; width: 100%; gap: var(--layout-gap-large); }