/* ============================================================ SILMAR ANGELS — css/tokens.css v2.0 Design System completo: colores, tipografía, espaciado, componentes reutilizables y animaciones. ============================================================ */ /* ── Google Fonts (import aquí o en ) ───────────────── Cormorant Garamond: serif elegante para títulos Cinzel: romano, para branding y labels Jost: geometric sans, para cuerpo ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Cinzel:wght@400;500;600&family=Jost:wght@300;400;500;600&display=swap'); /* ═══════════════════════════════════════════════════════════ 1. VARIABLES DE COLOR ═══════════════════════════════════════════════════════════ */ :root { /* Sage — Verde salvia: calma, naturaleza */ --sage: #8A9E8A; --sage-dark: #6A7E6A; --sage-light: #C8D8C4; --sage-pale: #F0F4EE; --sage-10: rgba(138,158,138,.10); --sage-20: rgba(138,158,138,.20); /* Dusty Rose — Roseado polvoriento: amor, espiritualidad */ --dusty: #C8A4A4; --dusty-dark: #A07878; --dusty-light: #F2E4E4; --dusty-pale: #FDF5F5; --dusty-10: rgba(200,164,164,.10); --dusty-20: rgba(200,164,164,.20); /* Gold — Oro: premium, luz */ --gold: #B89A6A; --gold-dark: #9A7A4A; --gold-light: #E8D4A8; --gold-pale: #FDF8F0; /* Neutrals — Crema a tinta */ --cream: #FAF8F4; --cream-2: #F5F2EC; --white-glass: rgba(255,255,255,.75); --white-glass-2: rgba(255,255,255,.55); --ink: #2E2A28; --ink-soft: #5A524E; --ink-muted: #9A8E88; --ink-faint: #C8C0BC; --border: rgba(200,164,164,.30); --border-sage: rgba(138,158,138,.30); /* Semantic */ --success: #6A9E6A; --warning: #C8A46A; --danger: #C87A7A; --info: #7A9EC8; /* Sombras */ --shadow-sm: 0 2px 8px rgba(46,42,40,.06); --shadow-md: 0 8px 24px rgba(46,42,40,.08); --shadow-lg: 0 16px 48px rgba(46,42,40,.10); --shadow-xl: 0 24px 64px rgba(46,42,40,.12); --shadow-dusty: 0 8px 24px rgba(200,164,164,.25); --shadow-sage: 0 8px 24px rgba(138,158,138,.20); /* ═══════════════════════════════════════════════════════════ 2. TIPOGRAFÍA ═══════════════════════════════════════════════════════════ */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-cinzel: 'Cinzel', serif; --font-body: 'Jost', system-ui, sans-serif; --text-xs: 0.70rem; /* 11px */ --text-sm: 0.85rem; /* 13.6px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.5rem; /* 40px */ --text-4xl: 3.5rem; /* 56px */ --leading-tight: 1.2; --leading-normal: 1.6; --leading-loose: 1.9; /* ═══════════════════════════════════════════════════════════ 3. ESPACIADO Y LAYOUT ═══════════════════════════════════════════════════════════ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --max-w-sm: 420px; --max-w-md: 640px; --max-w-lg: 900px; --max-w-xl: 1200px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full:100px; /* ═══════════════════════════════════════════════════════════ 4. TRANSICIONES ═══════════════════════════════════════════════════════════ */ --tr-fast: 0.18s ease; --tr: 0.35s cubic-bezier(.4,0,.2,1); --tr-bounce: 0.45s cubic-bezier(.22,.68,0,1.2); /* Fondo del body: gradiente de luz suave */ --bg-gradient: radial-gradient(ellipse 70% 60% at 15% 20%, rgba(200,216,196,.32) 0%, transparent 60%), radial-gradient(ellipse 55% 55% at 85% 80%, rgba(200,164,164,.25) 0%, transparent 55%), radial-gradient(ellipse 40% 40% at 50% 50%, rgba(184,154,106,.08) 0%, transparent 70%); } /* ═══════════════════════════════════════════════════════════ 5. RESET & BASE ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); color: var(--ink); background: var(--cream); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--dusty-light); color: var(--dusty-dark); } /* ── Scrollbar personalizada ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--cream-2); } ::-webkit-scrollbar-thumb { background: var(--sage-light); border-radius: 100px; } ::-webkit-scrollbar-thumb:hover { background: var(--sage); } /* ═══════════════════════════════════════════════════════════ 6. COMPONENTES REUTILIZABLES ═══════════════════════════════════════════════════════════ */ /* ── Card glass ── */ .card { background: var(--white-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--r-xl); border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: var(--space-8); } .card-sm { padding: var(--space-6); border-radius: var(--r-lg); } /* ── Botones ── */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: .7rem 1.5rem; border-radius: var(--r-full); font-family: var(--font-cinzel); font-size: var(--text-sm); font-weight: 500; letter-spacing: .08em; cursor: pointer; transition: var(--tr); border: none; text-decoration: none; white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--dusty) 0%, #dab8b8 100%); color: #fff; box-shadow: var(--shadow-dusty); } .btn-primary:hover { background: linear-gradient(135deg, var(--dusty-dark), var(--dusty)); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(200,164,164,.4); } .btn-sage { background: linear-gradient(135deg, var(--sage) 0%, #a0b8a0 100%); color: #fff; box-shadow: var(--shadow-sage); } .btn-sage:hover { background: linear-gradient(135deg, var(--sage-dark), var(--sage)); transform: translateY(-2px); } .btn-gold { background: linear-gradient(135deg, var(--gold) 0%, #ccb88a 100%); color: #fff; } .btn-gold:hover { transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--border); } .btn-ghost:hover { background: var(--cream-2); border-color: var(--dusty); color: var(--dusty-dark); } .btn-danger { background: rgba(200,122,122,.15); color: var(--danger); border: 1px solid rgba(200,122,122,.3); } .btn-danger:hover { background: rgba(200,122,122,.25); } .btn-sm { padding: .45rem 1rem; font-size: var(--text-xs); } .btn-lg { padding: 1rem 2rem; font-size: var(--text-base); } /* ── Formularios ── */ .form-group { margin-bottom: var(--space-5); } label.form-label { display: block; font-size: var(--text-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--space-2); } .form-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--border); border-radius: var(--r-md); font-family: var(--font-body); font-size: var(--text-base); color: var(--ink); background: rgba(255,255,255,.8); transition: var(--tr); outline: none; resize: vertical; } .form-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--dusty); background: #fff; box-shadow: 0 0 0 3px var(--dusty-10); } ::placeholder { color: var(--ink-muted); font-style: italic; } /* ── Alertas ── */ .alert { padding: .8rem 1rem; border-radius: var(--r-md); font-size: var(--text-sm); margin-bottom: var(--space-5); display: flex; align-items: flex-start; gap: var(--space-3); line-height: 1.5; } .alert-error { background: rgba(200,122,122,.12); border: 1px solid rgba(200,122,122,.35); color: #8A3A3A; } .alert-success { background: rgba(106,158,106,.12); border: 1px solid rgba(106,158,106,.35); color: #2A6A2A; } .alert-info { background: var(--sage-10); border: 1px solid var(--border-sage); color: #3A6A5A; } .alert-warning { background: rgba(200,164,106,.12); border: 1px solid rgba(200,164,106,.35); color: #7A5A1A; } /* ── Badges ── */ .badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .65rem; border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; white-space: nowrap; } .badge-activo { background: rgba(106,158,106,.15); color: #3A7A3A; border: 1px solid rgba(106,158,106,.3); } .badge-pendiente { background: rgba(200,164,106,.15); color: #7A5A1A; border: 1px solid rgba(200,164,106,.3); } .badge-suspendido { background: rgba(200,122,122,.15); color: #8A3A3A; border: 1px solid rgba(200,122,122,.3); } .badge-gratis { background: var(--cream-2); color: var(--ink-muted); border: 1px solid var(--border); } /* ── Precios con descuento ── */ .precio-bloque { display: flex; flex-direction: column; gap: .3rem; } .precio-original { font-size: var(--text-sm); color: var(--ink-muted); text-decoration: line-through; font-family: var(--font-body); } .precio-final { font-family: var(--font-cinzel); font-size: var(--text-xl); color: var(--sage-dark); font-weight: 600; } .precio-normal { font-family: var(--font-cinzel); font-size: var(--text-xl); color: var(--ink); font-weight: 500; } .precio-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; } .badge-descuento { padding: .2rem .6rem; border-radius: var(--r-full); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .badge-rango { background: var(--gold-pale); color: var(--gold-dark); border: 1px solid var(--gold-light); } .badge-terapia { background: var(--sage-pale); color: var(--sage-dark); border: 1px solid var(--sage-light); } .btn-subir-rango { font-size: var(--text-xs); color: var(--dusty-dark); border-bottom: 1px dashed var(--dusty); transition: var(--tr); cursor: pointer; align-self: flex-start; } .btn-subir-rango:hover { color: var(--ink); border-color: var(--ink); } /* ── Toast / Notification ── */ .toast-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 9999; display: flex; flex-direction: column; gap: .75rem; pointer-events: none; } .toast { background: rgba(46,42,40,.92); color: #fff; backdrop-filter: blur(12px); padding: .8rem 1.25rem; border-radius: var(--r-md); font-size: var(--text-sm); box-shadow: var(--shadow-lg); animation: toastIn .4s var(--tr-bounce) both; pointer-events: auto; max-width: 320px; } .toast.exit { animation: toastOut .3s ease forwards; } @keyframes toastIn { from { opacity:0; transform: translateY(16px) scale(.95); } to { opacity:1; transform: none; } } @keyframes toastOut { to { opacity:0; transform: translateY(8px) scale(.96); } } /* ── Modal ── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(46,42,40,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn .25s ease; } .modal-backdrop.hidden { display: none; } .modal { background: var(--cream); border-radius: var(--r-xl); border: 1px solid var(--border); box-shadow: var(--shadow-xl); width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; padding: 2rem 2.5rem; animation: modalIn .4s var(--tr-bounce); } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); } .modal-title { font-family: var(--font-cinzel); font-size: var(--text-md); color: var(--ink); } .modal-close { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: var(--cream-2); color: var(--ink-muted); font-size: 1.1rem; transition: var(--tr); } .modal-close:hover { background: var(--dusty-light); color: var(--dusty-dark); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } } /* ── Partículas decorativas ── */ .particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .particles span { position: absolute; font-size: .7rem; opacity: .12; animation: particleFloat 8s ease-in-out infinite; } @keyframes particleFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(180deg); } } /* ── Animaciones de entrada ── */ .fade-in-up { animation: fadeInUp .6s var(--tr-bounce) both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } } .stagger > * { animation: fadeInUp .5s var(--tr-bounce) both; } .stagger > *:nth-child(1) { animation-delay: 0s; } .stagger > *:nth-child(2) { animation-delay: .08s; } .stagger > *:nth-child(3) { animation-delay: .16s; } .stagger > *:nth-child(4) { animation-delay: .24s; } .stagger > *:nth-child(5) { animation-delay: .32s; } .stagger > *:nth-child(6) { animation-delay: .40s; } /* ── Divisor decorativo ── */ .divider { display: flex; align-items: center; gap: .75rem; margin: var(--space-6) 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); } .divider span { font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--dusty); font-weight: 500; } /* ── Responsive utils ── */ .container { width: 100%; max-width: var(--max-w-xl); margin: 0 auto; padding: 0 var(--space-6); } @media (max-width: 640px) { .container { padding: 0 var(--space-4); } .card { padding: var(--space-6) var(--space-5); border-radius: var(--r-lg); } .modal { padding: 1.5rem 1.25rem; border-radius: var(--r-lg); } } /* ── Hidden/visible utilities ── */ .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }