/* =============================================== THINSCEN - MINIMAL DESIGN SYSTEM Archivo: thinscen-central-palette.css Propósito: Sistema CSS minimalista y reutilizable =============================================== CONTENIDO - Variables :root (light mode) - Variables [data-theme="dark"] (dark mode) - Reset & Body base - Header/Nav system completo =============================================== */ /* --------------------------------------------------------------*/ @font-face { font-family: 'Amsterdam One'; font-style: normal; font-display: block; src: url('../fonts/AmsterdamOne-eZ12l.woff') format('woff'), url('../fonts/AmsterdamOne-eZ12l.woff2') format('woff2'), url('../fonts/AmsterdamOne-eZ12l.otf') format('otf'), url('../fonts/AmsterdamOne-eZ12l.ttf') format('truetype'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-display: block; src: url('../fonts/PlayfairDisplay-Bold.woff') format('woff'), url('../fonts/PlayfairDisplay-Bold.woff2') format('woff2'), url('../fonts/PlayfairDisplay-Bold.otf') format('otf'), url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype'); } @font-face { font-family: 'Poppins-Regular'; font-style: normal; font-display: block; src: url('../fonts/Poppins-Regular.woff') format('woff'), url('../fonts/Poppins-Regular.woff2') format('woff2'), url('../fonts/Poppins-Regular.otf') format('otf'), url('../fonts/Poppins-Regular.ttf') format('truetype'); } /* =============================================== 1. VARIABLES CSS - LIGHT MODE (DEFAULT) =============================================== */ :root { --bs-font-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* === WELLNESS PALETTE BASE === */ --primary-dark: #050342; --theme-text-primary: #4340a1; --primary-light: #837edb; --accent-purple: #6251d3; --accent-hover: #7a6be0; --lavender-light: #e7e4fd; --lavender-medium: #a5a2ed; --success-green: #15b859; --success-gold: #d4af37; --success-red: #97052c; --text-dark: #150f5c; --text-white: #ffffff; /* === THEME BACKGROUNDS === */ --theme-bg-primary: #ffffff; --theme-bg-secondary: #f1f3fa; --theme-bg-tertiary: #fafbff; --theme-bg-card: rgba(255, 255, 255, 0.98); --theme-bg-modal: #ffffff; --theme-bg-overlay: rgba(255, 255, 255, 0.95); /* === THEME TEXTS === */ --theme-text-primary: #050342; --theme-text-secondary: #150f5c; --theme-text-body: #1a1a1a; --theme-text-muted: #545e67; --theme-text-light: #6c757d; --theme-text-white: #ffffff; /* === THEME BORDERS === */ --theme-border-light: rgba(98, 81, 211, 0.1); --theme-border-medium: rgba(98, 81, 211, 0.2); --theme-border-strong: rgba(98, 81, 211, 0.4); --theme-border-solid: rgba(98, 81, 211, 0.6); /* === THEME SHADOWS === */ --theme-shadow-xs: 0 2px 8px rgba(4, 2, 59, 0.05); --theme-shadow-sm: 0 4px 12px rgba(4, 2, 59, 0.08); --theme-shadow-md: 0 10px 30px rgba(4, 2, 59, 0.1); --theme-shadow-lg: 0 15px 35px rgba(4, 2, 59, 0.15); --theme-shadow-xl: 0 20px 50px rgba(4, 2, 59, 0.2); /* === THEME SPACING === */ --theme-spacing-xs: 0.5rem; --theme-spacing-sm: 1rem; --theme-spacing-md: 1.5rem; --theme-spacing-lg: 2rem; --theme-spacing-xl: 3rem; --theme-spacing-xxl: 4rem; /* === THEME BANDS (Light Mode) === */ --theme-band-1-bg: linear-gradient(135deg, #050342 0%, #4340a1 100%); --theme-band-2-bg: linear-gradient(135deg, #4340a1 0%, #837edb 100%); --theme-band-3-bg: linear-gradient(135deg, #837edb 0%, #6251d3 100%); --theme-band-4-bg: linear-gradient(135deg, #6251d3 0%, #a5a2ed 100%); --theme-band-5-bg: linear-gradient(135deg, #a5a2ed 0%, #e7e4fd 100%); --theme-band-6-bg: linear-gradient(135deg, #e7e4fd 0%, #fafbff 100%); --theme-band-7-bg: linear-gradient(135deg, #fafbff 0%, #ffffff 100%); --theme-band-8-bg: #ffffff; /* === THEME HEADER/NAV === */ --theme-nav-bg: linear-gradient(135deg, #050342 0%, #4340a1 50%, #837edb 100%); --theme-nav-bg-scrolled: rgba(4, 2, 59, 0.95); --theme-nav-text: #ffffff; --theme-nav-text-hover: #e7e4fd; --theme-nav-border: rgba(255, 255, 255, 0.2); --theme-nav-shadow: 0 4px 20px rgba(4, 2, 59, 0.3); /* === THEME FOOTER === */ --theme-footer-bg: linear-gradient(135deg, #050342 0%, #4340a1 50%, #837edb 100%); --theme-footer-text: #ffffff; --theme-footer-text-muted: rgba(255, 255, 255, 0.8); --theme-footer-border: rgba(255, 255, 255, 0.1); /* === TRANSITIONS === */ --theme-transition-fast: 0.2s ease; --theme-transition-normal: 0.3s ease; --theme-transition-slow: 0.4s ease; } /* =============================================== 2. VARIABLES CSS - DARK MODE =============================================== */ [data-theme="dark"] { /* === THEME BACKGROUNDS DARK === */ --theme-bg-primary: rgba(5, 3, 66, 0.949); --theme-bg-secondary: rgba(6, 4, 75, 0.98); --theme-bg-tertiary: rgba(30, 30, 40, 0.95); --theme-bg-card: rgba(25, 25, 35, 0.95); --theme-bg-modal: rgba(20, 20, 30, 0.98); --theme-bg-overlay: rgba(20, 20, 30, 0.9); /* === THEME TEXTS DARK === */ --theme-text-primary: #e8e4ff; --theme-text-secondary: #d4d1f9; --theme-text-body: #d0d0d5; --theme-text-muted: #a0a0aa; --theme-text-light: #8a8a94; --theme-text-white: #ffffff; /* === THEME BORDERS DARK === */ --theme-border-light: rgba(98, 81, 211, 0.3); --theme-border-medium: rgba(98, 81, 211, 0.4); --theme-border-strong: rgba(98, 81, 211, 0.6); --theme-border-solid: rgba(98, 81, 211, 0.8); /* === THEME SHADOWS DARK === */ --theme-shadow-xs: 0 2px 8px rgba(255, 255, 255, 0.2); --theme-shadow-sm: 0 4px 12px rgba(255, 255, 255, 0.3); --theme-shadow-md: 0 10px 30px rgba(255, 255, 255, 0.4); --theme-shadow-lg: 0 15px 35px rgba(255, 255, 255, 0.5); --theme-shadow-xl: 0 20px 50px rgba(255, 255, 255, 0.6); /* === THEME BANDS (Dark Mode) === */ --theme-band-1-bg: linear-gradient(135deg, rgba(4, 2, 59, 0.9) 0%, rgba(67, 64, 161, 0.8) 100%); --theme-band-2-bg: linear-gradient(135deg, rgba(67, 64, 161, 0.8) 0%, rgba(131, 126, 219, 0.7) 100%); --theme-band-3-bg: linear-gradient(135deg, rgba(131, 126, 219, 0.7) 0%, rgba(98, 81, 211, 0.6) 100%); --theme-band-4-bg: linear-gradient(135deg, rgba(98, 81, 211, 0.6) 0%, rgba(165, 162, 237, 0.5) 100%); --theme-band-5-bg: linear-gradient(135deg, rgba(165, 162, 237, 0.5) 0%, rgba(231, 228, 253, 0.4) 100%); --theme-band-6-bg: linear-gradient(135deg, rgba(231, 228, 253, 0.3) 0%, #050342f2 100%); --theme-band-7-bg: linear-gradient(135deg, rgba(25, 25, 35, 0.95) 0%, rgba(16, 16, 67, 0.98) 100%); --theme-band-8-bg: #050342f2; /* === THEME HEADER/NAV DARK === */ --theme-nav-bg: linear-gradient(135deg, rgba(4, 2, 59, 0.95) 0%, rgba(67, 64, 161, 0.9) 50%, rgba(131, 126, 219, 0.85) 100%); --theme-nav-bg-scrolled: rgba(4, 2, 59, 0.98); --theme-nav-text: #e8e4ff; --theme-nav-text-hover: #ffffff; --theme-nav-border: rgba(255, 255, 255, 0.15); --theme-nav-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* === THEME FOOTER DARK === */ --theme-footer-bg: linear-gradient(135deg, rgba(4, 2, 59, 0.95) 0%, rgba(67, 64, 161, 0.9) 50%, rgba(131, 126, 219, 0.85) 100%); --theme-footer-text: #e8e4ff; --theme-footer-text-muted: rgba(232, 228, 255, 0.7); --theme-footer-border: rgba(255, 255, 255, 0.15); } /* =============================================== 3. RESET & BASE STYLES =============================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--theme-bg-primary); color: var(--theme-text-body); line-height: 1.6; transition: background-color var(--theme-transition-normal), color var(--theme-transition-normal); min-height: 100vh; } /* =============================================== 4. HEADER / NAVIGATION SYSTEM =============================================== */ /* === MAIN HEADER === */ .theme-main-header { background: var(--theme-nav-bg); box-shadow: var(--theme-nav-shadow); position: fixed; top: 0; width: 100%; z-index: 1000; transition: all var(--theme-transition-normal); } .theme-main-header.scrolled { /* background: var(--theme-nav-bg-scrolled); */ background: var(--theme-nav-bg); backdrop-filter: blur(10px); } /* === NAVBAR === */ .navbar { padding: 1rem 0; } .navbar-brand { display: flex; align-items:start; text-decoration: none; transition: transform var(--theme-transition-normal); } .navbar-brand:hover { transform: scale(1.05); } .theme-logo { max-height: 100px !important; height: auto; width: auto; margin-left: 5px !important; margin-right: 10px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); } .theme-brand-text { color: var(--theme-nav-text); font-size: 1.4rem; font-weight: 600; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } /* === NAV LINKS === */ .navbar-nav { width: 100% !important; display: flex; margin: 0; padding: 0; align-items: start; list-style: none; } .navbar-nav .nav-item { list-style: none; } /* ✅ RESPONSIVE - MOBILE COLLAPSE */ @media (max-width: 991px) { .navbar-nav { flex-direction: column; /* Vertical en mobile */ width: 100%; align-items: stretch; } .navbar-nav .nav-item { list-style: none; width: 100%; text-align: center; } .nav-link { display: block; padding: 15px 20px !important; margin: 0 !important; } } /* Estilos aplicados a nav-link de Bootstrap */ .navbar-nav { color: var(--theme-nav-text) !important; font-weight: 500; margin: 0 15px; padding: 10px 0 !important; position: relative; transition: all var(--theme-transition-normal); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; text-decoration: none; } .nav-link { color: var(--theme-nav-text) !important; font-weight: 500; margin: 0 15px; padding: 10px 0 !important; position: relative; transition: all var(--theme-transition-normal); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; text-decoration: none; } .nav-link { color: var(--theme-nav-text) !important; font-weight: 500; margin: 0 15px; padding: 10px 0 !important; position: relative; transition: all var(--theme-transition-normal); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; text-decoration: none; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, var(--accent-purple), var(--accent-hover)); transition: all var(--theme-transition-normal); transform: translateX(-50%); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link:hover { color: var(--theme-nav-text-hover) !important; transform: translateY(-2px); text-decoration: none; } /* === LANGUAGE SELECTOR === */ .theme-language-selector { margin-left: 30px; } .theme-language-dropdown { background: rgba(255, 255, 255, 0.1); border: 2px solid var(--theme-nav-border); border-radius: 25px; padding: 8px 15px; color: var(--theme-nav-text); backdrop-filter: blur(10px); transition: all var(--theme-transition-normal); cursor: pointer; position: relative; min-width: 150px; width: fit-content; max-width: 300px; } .theme-language-dropdown:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--accent-purple); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(98, 81, 211, 0.3); } .theme-current-language { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 0.9rem; } .theme-flag-icon { width: 20px; height: 15px; margin-right: 8px; border-radius: 2px; } .theme-dropdown-arrow { transition: transform var(--theme-transition-normal); } .theme-language-dropdown.open .theme-dropdown-arrow { transform: rotate(180deg); } /* ✅ MODIFICAR regla base (~línea 118) */ .theme-language-options { position: absolute; top: 100%; left: 0; right: auto; width: 340px; /* ✅ AUMENTAR: antes era 300px, insuficiente */ background: transparent !important; /* background: var(--primary-dark); */ border-radius: 15px; margin-top: 10px; padding: 10px; /* 10px cada lado = 20px total */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--theme-transition-normal); z-index: 1001; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: none !important; overflow: visible !important; } .theme-language-options.show { opacity: 1; visibility: visible; transform: translateY(0); } .theme-language-option { display: flex; align-items: center; padding: 10px 12px; /* ✅ Base desktop cómodo */ background-color: var(--primary-dark); color: var(--theme-nav-text); text-decoration: none; transition: all var(--theme-transition-normal); font-weight: 500; border-radius: 8px; font-size: 0.9rem; } .theme-language-option:hover { background: var(--accent-purple); color: var(--theme-nav-text); text-decoration: none; } .theme-lang-option { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 15px; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; gap: 6px; } .theme-lang-option:hover, .theme-lang-option.active { color: var(--text-white); background: var(--accent-purple); transform: translateY(-2px); text-decoration: none; } .theme-lang-flag { font-size: 1.1rem; } /* Mobile ajustado */ @media (max-width: 991px) { .theme-language-options { width: auto; /* ✅ Se ajusta al contenido */ min-width: 240px; /* ✅ Mínimo garantizado */ max-width: 90vw; /* ✅ No exceder viewport */ left: 0 !important; right: 0 !important; gap: 4px !important; padding: 0px !important; } .theme-language-option { padding: 5px 8px !important; font-size: 0.85rem !important; background-color: var(--primary-dark); max-width: 120px; width: auto; white-space: nowrap !important; } } /* === CTA BUTTON === */ .theme-cta-button { background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); color: var(--theme-nav-text); padding: 12px 25px; border-radius: 25px; text-decoration: none; font-weight: 600; margin-left: 20px; transition: all var(--theme-transition-normal); border: none; box-shadow: 0 4px 15px rgba(98, 81, 211, 0.3); } .theme-cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(98, 81, 211, 0.4); color: var(--theme-nav-text); text-decoration: none; } /* === NAVBAR TOGGLER (Mobile) === */ .navbar-toggler { border: none; color: var(--theme-nav-text); font-size: 1.5rem; padding: 4px 8px; } .navbar-toggler:focus { box-shadow: none; } /* === MOBILE MENU === */ .theme-mobile-menu { background: var(--primary-dark); border-radius: 15px; margin-top: 15px; padding: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .theme-mobile-nav-link { color: var(--theme-nav-text); padding: 15px 0; border-bottom: 1px solid var(--theme-nav-border); text-decoration: none; display: block; font-weight: 500; transition: all var(--theme-transition-normal); } .theme-mobile-nav-link:hover { color: var(--theme-nav-text-hover); padding-left: 10px; } .theme-mobile-nav-link:last-child { border-bottom: none; } /* =============================================== CONTENIDO - Footer system completo - Section Bands (8 bandas dual-theme + dual-device) - Typography system (h1-h6, p) - Theme Switcher (PRESERVADO EXACTO) =============================================== */ .theme-section-title { color: var(--primary-dark); font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 2px solid var(--lavender-light); padding-bottom: 0.5rem; } /* =============================================== 5. FOOTER SYSTEM =============================================== */ .theme-footer { background: var(--theme-footer-bg); color: var(--theme-footer-text); position: relative; overflow: hidden; margin-top: 0; } .theme-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-purple), transparent); } .theme-footer-top { padding: 60px 0 40px; position: relative; } .theme-footer-section { margin-bottom: 40px; } .theme-footer-logo { display: flex; align-items: center; margin-bottom: 25px; } .theme-footer-logo img { height: 60px; width: auto; margin-right: 15px; filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .theme-footer-brand-text { font-size: 1.6rem; font-weight: 700; color: var(--theme-footer-text); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .theme-footer-tagline { font-size: 1.1rem; margin-bottom: 20px; opacity: 0.9; line-height: 1.6; } .theme-footer-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 25px; color: var(--theme-footer-text); position: relative; padding-bottom: 10px; } .theme-footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: linear-gradient(90deg, var(--accent-purple), var(--accent-hover)); border-radius: 1px; } .theme-footer-links { list-style: none; } .theme-footer-links li { margin-bottom: 12px; } .theme-footer-links a { color: var(--theme-footer-text); text-decoration: none; transition: all var(--theme-transition-normal); display: flex; align-items: center; font-weight: 400; opacity: 0.9; } .theme-footer-links a:hover { color: var(--lavender-light); opacity: 1; padding-left: 8px; text-decoration: none; } .theme-footer-links i { margin-right: 8px; width: 16px; text-align: center; opacity: 0.7; } .theme-footer-language-selector { margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.2); } .theme-language-switcher { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .theme-contact-info { list-style: none; } .theme-contact-info li { margin-bottom: 15px; display: flex; align-items: center; } .theme-contact-info i { margin-right: 12px; width: 20px; text-align: center; color: var(--theme-footer-text); font-size: 1.1rem; } .theme-social-links { display: flex; gap: 15px; margin-top: 25px; } .theme-social-link { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--theme-footer-text); text-decoration: none; transition: all var(--theme-transition-normal); backdrop-filter: blur(10px); border: 1px solid var(--theme-footer-border); } .theme-social-link:hover { background: var(--accent-purple); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(98, 81, 211, 0.4); color: var(--theme-footer-text); } .theme-footer-bottom { background: rgba(0, 0, 0, 0.2); padding: 25px 0; border-top: 1px solid var(--theme-footer-border); } .theme-footer-bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .theme-copyright { color: var(--theme-footer-text-muted); margin: 0; } .theme-legal-links { display: flex; gap: 25px; list-style: none; margin: 0; } .theme-legal-links a { color: var(--theme-footer-text-muted); text-decoration: none; font-size: 0.9rem; transition: all var(--theme-transition-normal); } .theme-legal-links a:hover { color: var(--lavender-light); text-decoration: none; } /* =============================================== 6. SECTION BANDS SYSTEM (8 BANDAS) DUAL-THEME + DUAL-DEVICE RESPONSIVE =============================================== */ /* === BANDA 1 - MÁS OSCURA === */ .theme-band-1 { background: var(--theme-band-1-bg); color: var(--theme-text-white); padding: var(--theme-spacing-xl) 0; transition: background var(--theme-transition-normal); } .theme-band-1 h1, .theme-band-1 h2, .theme-band-1 h3, .theme-band-1 h4, .theme-band-1 h5, .theme-band-1 h6 { color: var(--theme-text-white); } .theme-band-1 p { color: var(--theme-text-white); } /* === BANDA 2 === */ .theme-band-2 { background: var(--theme-band-2-bg); color: var(--theme-text-white); padding: var(--theme-spacing-xl) 0; transition: background var(--theme-transition-normal); } .theme-band-2 h1, .theme-band-2 h2, .theme-band-2 h3, .theme-band-2 h4, .theme-band-2 h5, .theme-band-2 h6 { color: var(--theme-text-white); } .theme-band-2 p { color: rgba(255, 255, 255, 0.9); } /* === BANDA 3 === */ .theme-band-3 { background: var(--theme-band-3-bg); color: var(--theme-text-white); padding: var(--theme-spacing-xl) 0; transition: background var(--theme-transition-normal); } .theme-band-3 h1, .theme-band-3 h2, .theme-band-3 h3, .theme-band-3 h4, .theme-band-3 h5, .theme-band-3 h6 { color: var(--theme-text-white); } .theme-band-3 p { color: rgba(255, 255, 255, 0.9); } /* === BANDA 4 === */ .theme-band-4 { background: var(--theme-band-4-bg); color: var(--theme-text-primary); padding: var(--theme-spacing-xl) 0; transition: background var(--theme-transition-normal); } .theme-band-4 h1, .theme-band-4 h2, .theme-band-4 h3, .theme-band-4 h4, .theme-band-4 h5, .theme-band-4 h6 { color: var(--theme-text-primary); } .theme-band-4 p { color: var(--theme-text-body); } /* === BANDA 5 === */ .theme-band-5 { background: var(--theme-band-5-bg); color: var(--theme-text-primary); padding: var(--theme-spacing-xl) 0; transition: background var(--theme-transition-normal); } .theme-band-5 h1, .theme-band-5 h2, .theme-band-5 h3, .theme-band-5 h4, .theme-band-5 h5, .theme-band-5 h6 { color: var(--theme-text-primary); } .theme-band-5 p { color: var(--theme-text-body); } /* === BANDA 6 === */ .theme-band-6 { background: var(--theme-band-6-bg); color: var(--theme-text-primary); padding: var(--theme-spacing-xl) 0; transition: background var(--theme-transition-normal); } .theme-band-6 h1, .theme-band-6 h2, .theme-band-6 h3, .theme-band-6 h4, .theme-band-6 h5, .theme-band-6 h6 { color: var(--theme-text-primary); } .theme-band-6 p { color: var(--theme-text-body); } /* === BANDA 7 === */ .theme-band-7 { background: var(--theme-band-7-bg); color: var(--theme-text-primary); padding: var(--theme-spacing-xl) 0; transition: background var(--theme-transition-normal); } .theme-band-7 h1, .theme-band-7 h2, .theme-band-7 h3, .theme-band-7 h4, .theme-band-7 h5, .theme-band-7 h6 { color: var(--theme-text-primary); } .theme-band-7 p { color: var(--theme-text-body); } /* === BANDA 8 - MÁS CLARA === */ .theme-band-8 { background: var(--theme-band-8-bg); color: var(--theme-text-primary); padding: var(--theme-spacing-xl) 0; transition: background var(--theme-transition-normal); } .theme-band-8 h1, .theme-band-8 h2, .theme-band-8 h3, .theme-band-8 h4, .theme-band-8 h5, .theme-band-8 h6 { color: var(--theme-text-primary); } .theme-band-8 p { color: var(--theme-text-body); } /* =============================================== 7. TYPOGRAPHY SYSTEM =============================================== */ /* === HEADINGS === */ h1, .theme-h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; color: var(--theme-text-primary); transition: color var(--theme-transition-normal); } h2, .theme-h2 { font-size: 2rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; color: var(--theme-text-primary); transition: color var(--theme-transition-normal); } h3, .theme-h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.875rem; color: var(--theme-text-primary); transition: color var(--theme-transition-normal); } h4, .theme-h4 { font-size: 1.5rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.75rem; color: var(--theme-text-secondary); transition: color var(--theme-transition-normal); } h5, .theme-h5 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.75rem; color: var(--theme-text-secondary); transition: color var(--theme-transition-normal); } h6, .theme-h6 { font-size: 1rem; font-weight: 600; line-height: 1.5; margin-bottom: 0.5rem; color: var(--theme-text-secondary); transition: color var(--theme-transition-normal); } /* === PARAGRAPHS === */ p, .theme-p { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; color: var(--theme-text-body); transition: color var(--theme-transition-normal); } /* === TEXT UTILITIES === */ .theme-text-primary { color: var(--theme-text-primary) !important; } .theme-text-secondary { color: var(--theme-text-secondary) !important; } .theme-text-body { color: var(--theme-text-body) !important; } .theme-text-muted { color: var(--theme-text-muted) !important; } .theme-text-light { color: var(--theme-text-light) !important; } .theme-text-white { color: var(--theme-text-white) !important; } /* =============================================== 8. THEME SWITCHER - PRESERVADO EXACTO NO ROMPER - FUNCIONALIDAD CRÍTICA =============================================== */ /* === THEME SWITCHER CONTAINER === */ .theme-switcher { margin-left: 20px; display: flex; align-items: center; } /* === THEME TOGGLE BUTTON === */ .theme-toggle { position: relative; width: 60px; height: 30px; background: rgba(255, 255, 255, 0.1); border-radius: 15px; cursor: pointer; transition: all var(--theme-transition-normal); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; border: 2px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); } .theme-toggle:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--accent-purple); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(98, 81, 211, 0.3); } /* === THEME ICONS === */ .theme-toggle i { font-size: 12px; color: rgba(255, 255, 255, 0.7); transition: all var(--theme-transition-normal); z-index: 2; } .theme-toggle .fa-sun { color: #ffd700; } .theme-toggle .fa-moon { color: #87ceeb; } /* === TOGGLE SLIDER - CRÍTICO NO MODIFICAR === */ .toggle-slider { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); border-radius: 50%; transition: all var(--theme-transition-normal); box-shadow: 0 2px 8px rgba(98, 81, 211, 0.4); } /* === DARK MODE SLIDER POSITION === */ [data-theme="dark"] .toggle-slider { transform: translateX(28px); background: linear-gradient(135deg, #4a5568, #2d3748); } /* === DARK MODE ICONS === */ [data-theme="dark"] .theme-toggle .fa-moon { color: #e2e8f0; } [data-theme="dark"] .theme-toggle .fa-sun { color: rgba(255, 215, 0, 0.5); } /* =============================================== 9. RESPONSIVE BANDS - DUAL DEVICE =============================================== */ /* === DESKTOP (> 768px) === */ @media (min-width: 769px) { .theme-band-1, .theme-band-2, .theme-band-3, .theme-band-4, .theme-band-5, .theme-band-6, .theme-band-7, .theme-band-8 { padding: var(--theme-spacing-xl) 0; } } /* === TABLET (768px) === */ @media (max-width: 768px) { .theme-band-1, .theme-band-2, .theme-band-3, .theme-band-4, .theme-band-5, .theme-band-6, .theme-band-7, .theme-band-8 { padding: var(--theme-spacing-lg) 0; } h1, .theme-h1 { font-size: 2rem; } h2, .theme-h2 { font-size: 1.75rem; } h3, .theme-h3 { font-size: 1.5rem; } .theme-footer-top { padding: 40px 0 30px; } .theme-footer-section { text-align: center; margin-bottom: 35px; } .theme-footer-title::after { left: 50%; transform: translateX(-50%); } .theme-social-links { justify-content: center; } .theme-footer-bottom-content { flex-direction: column; text-align: center; } .theme-language-selector { margin-left: 0; margin-top: 15px; } .theme-legal-links { flex-wrap: wrap; justify-content: center; } } /* === THEME SWITCHER MOBILE === */ @media (max-width: 991px) { .theme-switcher { position: relative; z-index: 1050; /* ✅ Encima del navbar collapse */ } .theme-toggle { pointer-events: auto; /* ✅ Asegurar que reciba eventos */ touch-action: none; /* ✅ Prevenir gestos del navegador */ } } /* =============================================== TABLET OPTIMIZATION (OPCIONAL) =============================================== */ @media (min-width: 769px) and (max-width: 991px) { /* === AJUSTE INTERMEDIO PARA TABLETS === */ .navbar { padding: 0.75rem 0 !important; /* Intermedio entre mobile y desktop */ } .theme-logo { max-height: 85px !important; height: auto; width: auto; margin-right: 12px; } .theme-brand-text { font-size: 1.25rem !important; } } /* === MOBILE (≤ 480px) === */ @media (max-width: 480px) { .theme-band-1, .theme-band-2, .theme-band-3, .theme-band-4, .theme-band-5, .theme-band-6, .theme-band-7, .theme-band-8 { padding: var(--theme-spacing-md) 0; } h1, .theme-h1 { font-size: 1.75rem; } h2, .theme-h2 { font-size: 1.5rem; } h3, .theme-h3 { font-size: 1.25rem; } h4, .theme-h4 { font-size: 1.1rem; } .theme-switcher { margin-left: 0; margin-top: 15px; justify-content: center; } .theme-toggle { width: 55px; height: 28px; } .toggle-slider { width: 20px; height: 20px; } [data-theme="dark"] .toggle-slider { transform: translateX(25px); } } .btn-member-profile { background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); color: white; padding: 1rem 2rem; border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 5px 15px rgba(98, 81, 211, 0.3); } .btn-member-profile:hover { background: linear-gradient(135deg, var(--accent-hover), var(--primary-medium)); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(98, 81, 211, 0.4); color: white; text-decoration: none; } .btn-member-profile:active { transform: translateY(-1px); } /* =============================================== CONTENIDO: - Forms system completo (theme-form-*) - Buttons system completo (theme-btn-*) - Cards system completo (theme-card-*) - Utilities (theme-bg-*, theme-border-*, etc.) - Lists (ul, ol, li) - Links & Hover states - Badges & Labels - Images - Responsive final adjustments - Transitions globales =============================================== */ /* =============================================== 10. FORMS SYSTEM =============================================== */ /* === FORM GROUPS === */ .theme-form-group { margin-bottom: var(--theme-spacing-md); } /* === FORM LABELS === */ .theme-form-label { color: var(--theme-text-primary); font-weight: 600; margin-bottom: 0.5rem; display: block; transition: color var(--theme-transition-normal); } .theme-form-label.required::after { content: ' *'; color: #dc3545; font-weight: bold; } /* === FORM CONTROLS === */ .theme-form-control { border: 2px solid var(--theme-border-light); border-radius: 10px; padding: 0.8rem 1rem; font-size: 1rem; transition: all var(--theme-transition-normal); background: var(--theme-bg-card); color: var(--theme-text-primary); width: 100%; } .theme-form-control:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 0.2rem rgba(98, 81, 211, 0.15); background: var(--theme-bg-primary); outline: none; } .theme-form-control:valid { border-color: #28a745; } .theme-form-control.is-invalid, .theme-form-control:invalid { border-color: #dc3545; } .theme-form-control::placeholder { color: var(--theme-text-muted); opacity: 0.9; } /* Dark mode placeholders */ [data-theme="dark"] .theme-form-control::placeholder { color: var(--theme-text-muted); opacity: 1.0; } /* === TEXTAREA === */ .theme-form-control.textarea { resize: vertical; min-height: 120px; } /* === SELECT === */ .theme-form-select { border: 2px solid var(--theme-border-light); border-radius: 10px; padding: 0.8rem 1rem; font-size: 1rem; transition: all var(--theme-transition-normal); background: var(--theme-bg-card); color: var(--theme-text-primary); width: 100%; cursor: pointer; } .theme-form-select:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 0.2rem rgba(98, 81, 211, 0.15); outline: none; } .theme-form-check-label { color: var(--theme-text-body); margin-left: 0.5rem; cursor: pointer; transition: color var(--theme-transition-normal); } /* === FORM VALIDATION === */ .theme-invalid-feedback { color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; } .theme-valid-feedback { color: #28a745; font-size: 0.875rem; margin-top: 0.25rem; } /* =============================================== 11. BUTTONS SYSTEM =============================================== */ /* === BASE BUTTON === */ .theme-btn { padding: 0.8rem 1.5rem; border-radius: 25px; font-weight: 600; text-decoration: none; transition: all var(--theme-transition-normal); border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; text-align: center; justify-content: center; } /* === PRIMARY BUTTON === */ .theme-btn-primary { background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); color: var(--text-white); box-shadow: 0 4px 15px rgba(98, 81, 211, 0.3); } .theme-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(98, 81, 211, 0.4); color: var(--text-white); text-decoration: none; } .theme-btn-primary:active { transform: translateY(-1px); } .theme-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* === SECONDARY BUTTON === */ .theme-btn-secondary { background: transparent; color: var(--accent-purple); border: 2px solid var(--accent-purple); } .theme-btn-secondary:hover { background: var(--accent-purple); color: var(--text-white); transform: translateY(-3px); text-decoration: none; } /* === OUTLINE BUTTON === */ .theme-btn-outline { background: transparent; color: var(--theme-text-primary); border: 2px solid var(--theme-border-medium); } .theme-btn-outline:hover { background: var(--theme-bg-secondary); border-color: var(--accent-purple); transform: translateY(-2px); text-decoration: none; } /* === SUCCESS BUTTON === */ .theme-btn-success { background: linear-gradient(135deg, #28a745, #20c997); color: var(--text-white); box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); } .theme-btn-success:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4); color: var(--text-white); text-decoration: none; } /* === DANGER BUTTON === */ .theme-btn-danger { background: linear-gradient(135deg, #dc3545, #c82333); color: var(--text-white); box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3); } .theme-btn-danger:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4); color: var(--text-white); text-decoration: none; } /* === BUTTON SIZES === */ .theme-btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } .theme-btn-lg { padding: 1rem 2rem; font-size: 1.1rem; } /* === BUTTON BLOCK === */ .theme-btn-block { width: 100%; display: flex; } /* =============================================== 12. CARDS SYSTEM =============================================== */ /* === BASE CARD === */ .theme-card { background: var(--theme-bg-card); border-radius: 20px; padding: 2rem; box-shadow: var(--theme-shadow-md); border: 1px solid var(--theme-border-light); transition: all var(--theme-transition-normal); } .theme-card:hover { transform: translateY(-5px); box-shadow: var(--theme-shadow-lg); border-color: var(--accent-purple); } /* === CARD HEADER === */ .theme-card-header { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--theme-border-light); } .theme-card-title { color: var(--theme-text-primary); font-size: 1.5rem; font-weight: 600; margin: 0; transition: color var(--theme-transition-normal); } .theme-card-subtitle { color: var(--theme-text-secondary); font-size: 1rem; margin: 0.5rem 0 0 0; transition: color var(--theme-transition-normal); } /* === CARD BODY === */ .theme-card-body { color: var(--theme-text-body); line-height: 1.6; transition: color var(--theme-transition-normal); } /* === CARD FOOTER === */ .theme-card-footer { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--theme-border-light); } /* === CARD VARIANTS === */ .theme-card-bordered { border: 2px solid var(--theme-border-medium); } .theme-card-shadow-sm { box-shadow: var(--theme-shadow-sm); } .theme-card-shadow-lg { box-shadow: var(--theme-shadow-lg); } /* =============================================== 13. BADGES & LABELS =============================================== */ .theme-badge { display: inline-flex; align-items: center; padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.85rem; font-weight: 600; transition: all var(--theme-transition-normal); } .theme-badge-primary { background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); color: var(--text-white); } .theme-badge-secondary { background: var(--theme-bg-secondary); color: var(--theme-text-primary); border: 1px solid var(--theme-border-light); } .theme-badge-success { background: #28a745; color: var(--text-white); } .theme-badge-info { background: #7abbed; color: #050342; } .theme-badge-danger { background: #dc3545; color: var(--text-white); } .theme-badge-warning { background: #ffc107; color: #1a1a1a; } /* =============================================== 14. LISTS =============================================== */ .theme-list { list-style: none; padding: 0; margin: 0; } .theme-list-item { padding: 0.8rem 0; border-bottom: 1px solid var(--theme-border-light); color: var(--theme-text-body); transition: all var(--theme-transition-normal); } .theme-list-item:last-child { border-bottom: none; } .theme-list-item:hover { background: var(--theme-bg-secondary); padding-left: 1rem; border-radius: 8px; } /* === UNORDERED LISTS === */ ul.theme-ul { padding-left: 2rem; color: var(--theme-text-body); } ul.theme-ul li { margin-bottom: 0.5rem; line-height: 1.6; } /* === ORDERED LISTS === */ ol.theme-ol { padding-left: 2rem; color: var(--theme-text-body); } ol.theme-ol li { margin-bottom: 0.5rem; line-height: 1.6; } /* =============================================== 15. LINKS & HOVER STATES =============================================== */ a, .theme-link { color: var(--accent-purple); text-decoration: none; transition: all var(--theme-transition-normal); } a:hover, .theme-link:hover { color: var(--accent-hover); text-decoration: underline; } a:active, .theme-link:active { color: var(--primary-dark); } /* === LINK VARIANTS === */ .theme-link-primary { color: var(--accent-purple); } .theme-link-secondary { color: var(--theme-text-secondary); } .theme-link-muted { color: var(--theme-text-muted); } /* =============================================== 16. IMAGES =============================================== */ .theme-img { max-width: 100%; height: auto; display: block; transition: all var(--theme-transition-normal); } .theme-img-rounded { border-radius: 15px; } .theme-img-circle { border-radius: 50%; } .theme-img-thumbnail { border: 2px solid var(--theme-border-light); border-radius: 10px; padding: 0.25rem; background: var(--theme-bg-card); box-shadow: var(--theme-shadow-sm); } /* =============================================== 17. UTILITIES - BACKGROUNDS =============================================== */ .theme-bg-primary { background: var(--theme-bg-primary) !important; } .theme-bg-secondary { background: var(--theme-bg-secondary) !important; } .theme-bg-tertiary { background: var(--theme-bg-tertiary) !important; } .theme-bg-card { background: var(--theme-bg-card) !important; } .theme-bg-transparent { background: transparent !important; } /* =============================================== 18. UTILITIES - BORDERS =============================================== */ .theme-border { border: 1px solid var(--theme-border-light) !important; } .theme-border-light { border: 1px solid var(--theme-border-light) !important; } .theme-border-medium { border: 1px solid var(--theme-border-medium) !important; } .theme-border-strong { border: 1px solid var(--theme-border-strong) !important; } .theme-border-none { border: none !important; } .theme-border-top { border-top: 1px solid var(--theme-border-light) !important; } .theme-border-bottom { border-bottom: 1px solid var(--theme-border-light) !important; } .theme-border-left { border-left: 1px solid var(--theme-border-light) !important; } .theme-border-right { border-right: 1px solid var(--theme-border-light) !important; } /* =============================================== 19. UTILITIES - SHADOWS =============================================== */ .theme-shadow-xs { box-shadow: var(--theme-shadow-xs) !important; } .theme-shadow-sm { box-shadow: var(--theme-shadow-sm) !important; } .theme-shadow-md { box-shadow: var(--theme-shadow-md) !important; } .theme-shadow-lg { box-shadow: var(--theme-shadow-lg) !important; } .theme-shadow-xl { box-shadow: var(--theme-shadow-xl) !important; } .theme-shadow-none { box-shadow: none !important; } /* =============================================== 20. UTILITIES - SPACING =============================================== */ .theme-p-xs { padding: var(--theme-spacing-xs) !important; } .theme-p-sm { padding: var(--theme-spacing-sm) !important; } .theme-p-md { padding: var(--theme-spacing-md) !important; } .theme-p-lg { padding: var(--theme-spacing-lg) !important; } .theme-p-xl { padding: var(--theme-spacing-xl) !important; } .theme-m-xs { margin: var(--theme-spacing-xs) !important; } .theme-m-sm { margin: var(--theme-spacing-sm) !important; } .theme-m-md { margin: var(--theme-spacing-md) !important; } .theme-m-lg { margin: var(--theme-spacing-lg) !important; } .theme-m-xl { margin: var(--theme-spacing-xl) !important; } /* =============================================== 21. UTILITIES - DISPLAY & VISIBILITY =============================================== */ .theme-hidden { display: none !important; } .theme-visible { display: block !important; } .theme-flex { display: flex !important; } .theme-inline-flex { display: inline-flex !important; } .theme-grid { display: grid !important; } /* =============================================== 22. TRANSITIONS GLOBALES =============================================== */ .theme-transition-fast { transition: all var(--theme-transition-fast); } .theme-transition-normal { transition: all var(--theme-transition-normal); } .theme-transition-slow { transition: all var(--theme-transition-slow); } /* =============================================== THEME GOLD ICON CLASS Color constante (no cambia con theme/device) Uso: =============================================== */ .theme-gold { color: #FFD700 !important; } /* Variantes opcionales de gold */ .theme-gold-light { color: #FFF4CC !important; } .theme-gold-medium { color: #FFD700 !important; } .theme-gold-dark { color: #DAA520 !important; } /* Gold con efecto hover (opcional) */ .theme-gold-hover { color: #FFD700; transition: all var(--theme-transition-normal); } .theme-gold-hover:hover { color: #FFC400; transform: scale(1.1); } /* Gold con brillo/shadow (opcional para destacar) */ .theme-gold-shine { color: #FFD700 !important; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } /* Asegurar que NO cambie en dark mode */ [data-theme="dark"] .theme-gold, [data-theme="dark"] .theme-gold-light, [data-theme="dark"] .theme-gold-medium, [data-theme="dark"] .theme-gold-dark, [data-theme="dark"] .theme-gold-hover, [data-theme="dark"] .theme-gold-shine { /* Mantener colores originales sin cambios */ filter: none; opacity: 1; } /* =============================================== THEME ALIGNMENT UTILITIES Compatible con texto, imágenes, cualquier elemento Uso: theme-left, theme-center, theme-right =============================================== */ /* === ALINEACIÓN IZQUIERDA === */ .theme-left { text-align: left !important; justify-content: flex-start !important; align-items: flex-start !important; } .theme-left img { margin-left: 0 !important; margin-right: auto !important; } /* === ALINEACIÓN CENTRO === */ .theme-center { text-align: center !important; justify-content: center !important; align-items: center !important; } .theme-center img { margin-left: auto !important; margin-right: auto !important; display: block !important; } /* === ALINEACIÓN DERECHA === */ .theme-right { text-align: right !important; justify-content: flex-end !important; align-items: flex-end !important; } .theme-right img { margin-left: auto !important; margin-right: 0 !important; } /* === VARIANTES RESPONSIVE === */ /* Desktop only */ @media (min-width: 769px) { .theme-left-desktop { text-align: left !important; justify-content: flex-start !important; } .theme-center-desktop { text-align: center !important; justify-content: center !important; } .theme-right-desktop { text-align: right !important; justify-content: flex-end !important; } } /* Mobile only */ @media (max-width: 768px) { .theme-left-mobile { text-align: left !important; justify-content: flex-start !important; } .theme-center-mobile { text-align: center !important; justify-content: center !important; } .theme-right-mobile { text-align: right !important; justify-content: flex-end !important; } } /* === COMPATIBILIDAD FLEX CONTAINERS === */ .theme-left.d-flex, .theme-left.row { justify-content: flex-start !important; } .theme-center.d-flex, .theme-center.row { justify-content: center !important; } .theme-right.d-flex, .theme-right.row { justify-content: flex-end !important; } /* === DARK MODE - SIN CAMBIOS === */ [data-theme="dark"] .theme-left, [data-theme="dark"] .theme-center, [data-theme="dark"] .theme-right { /* Mantener alineación sin cambios */ } /* =============================================== 23. RESPONSIVE FINAL - MOBILE FIRST =============================================== */ /* === TABLET (768px) === */ @media (max-width: 768px) { .theme-card { padding: 1.5rem; margin: 0 1rem; } .theme-btn { width: 100%; justify-content: center; } .theme-form-control, .theme-form-select { font-size: 16px; /* Evita zoom iOS */ } } /* === MOBILE (≤ 480px) === */ @media (max-width: 480px) { .theme-card { padding: 1rem; margin: 0 0.5rem; border-radius: 15px; } .theme-card-title { font-size: 1.3rem; } .theme-btn { padding: 0.7rem 1.2rem; font-size: 0.95rem; } .theme-badge { padding: 0.3rem 0.6rem; font-size: 0.8rem; } } /* === MOBILE SMALL (≤ 375px) === */ @media (max-width: 375px) { .theme-card { padding: 0.8rem; margin: 0 0.3rem; } .theme-card-title { font-size: 1.2rem; } .theme-btn { padding: 0.6rem 1rem; font-size: 0.9rem; } } /* =============================================== 24. ANIMATION UTILITIES =============================================== */ @keyframes theme-fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .theme-fade-in { animation: theme-fadeIn 0.6s ease-out; } @keyframes theme-slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .theme-slide-in { animation: theme-slideIn 0.5s ease-out; } /* =============================================== 25. ACCESSIBILITY =============================================== */ /* Focus visible para keyboard navigation */ *:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; } /* Skip to main content */ .theme-skip-to-main { position: absolute; top: -40px; left: 0; background: var(--accent-purple); color: var(--text-white); padding: 8px; z-index: 100; } .theme-skip-to-main:focus { top: 0; } /* ===================================== NEWSLETTER FORM ===================================== */ .newsletter-form { margin-top: 25px; } .newsletter-form h5 { font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; color: var(--text-white); } .newsletter-input { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 25px; padding: 12px 20px; color: var(--text-white); width: 100%; margin-bottom: 15px; backdrop-filter: blur(10px); } .newsletter-input::placeholder { color: rgba(255, 255, 255, 0.7); } .newsletter-input:focus { outline: none; border-color: var(--accent-purple); box-shadow: 0 0 0 2px rgba(98, 81, 211, 0.3); } .newsletter-btn { background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); border: none; border-radius: 25px; padding: 12px 25px; color: var(--text-white); font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%; } .newsletter-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(98, 81, 211, 0.4); } /* =============================================== MAIN CONTENT & HERO BRIEF SECTION Dual-Theme + Dual-Device Compatible =============================================== */ /* === MAIN CONTENT CONTAINER === */ .main-content { margin-top: 60px; min-height: calc(100vh - 200px); background: var(--theme-bg-primary); transition: background-color var(--theme-transition-normal); } /* === HERO BRIEF SECTION === */ .hero-brief { background: var(--theme-bg-primary); color: var(--theme-text-primary); padding: var(--theme-spacing-xl) 0; transition: all var(--theme-transition-normal); } /* Hero Philosophy Title */ .hero-brief h1, .hero-brief .display-4 { color: var(--theme-text-primary); font-weight: 700; margin-bottom: var(--theme-spacing-md); transition: color var(--theme-transition-normal); } /* Hero Subtitle */ .hero-brief p, .hero-brief .lead { color: var(--theme-text-body); line-height: 1.6; transition: color var(--theme-transition-normal); } /* === DARK MODE SPECIFIC === */ [data-theme="dark"] .hero-brief { background: var(--theme-bg-primary); } [data-theme="dark"] .hero-brief h1, [data-theme="dark"] .hero-brief .display-4 { color: var(--theme-text-primary); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .hero-brief p, [data-theme="dark"] .hero-brief .lead { color: var(--theme-text-body); opacity: 0.95; } /* =============================================== RESPONSIVE - DUAL DEVICE =============================================== */ /* === DESKTOP (> 768px) === */ @media (min-width: 769px) { .main-content { margin-top: 60px; } .hero-brief { padding: var(--theme-spacing-xl) 0; } .hero-brief h1, .hero-brief .display-4 { font-size: 2.5rem; } } /* === TABLET (768px) === */ @media (max-width: 768px) { .main-content { margin-top: 100px; } .hero-brief { padding: var(--theme-spacing-lg) 0; } .hero-brief h1, .hero-brief .display-4 { font-size: 2rem; } } /* === MOBILE (≤ 480px) === */ @media (max-width: 480px) { .main-content { margin-top: 120px; min-height: calc(100vh - 150px); } .hero-brief { padding: var(--theme-spacing-md) 0; } .hero-brief h1, .hero-brief .display-4 { font-size: 1.75rem; } .hero-brief p, .hero-brief .lead { font-size: 0.95rem; } } /* === MOBILE SMALL (≤ 375px) === */ @media (max-width: 375px) { .main-content { margin-top: 70px; } .hero-brief { padding: var(--theme-spacing-sm) 0; } .hero-brief h1, .hero-brief .display-4 { font-size: 1.5rem; } } /* ====== TEAM SECTION STYLES - NUESTRO EQUIPO ====== */ .theme-team-section { padding: 80px 0; position: relative; overflow: hidden; } .theme-team-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,') repeat; opacity: 0.5; animation: float 30s ease-in-out infinite; } /* ====== SECTION HEADER ====== */ .theme-team-main-title { color: var(--primary-dark); font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; position: relative; z-index: 2; } .theme-team-subtitle { color: var(--theme-text-primary); font-size: 1.2rem; max-width: 700px; margin: 0 auto 2rem; line-height: 1.6; position: relative; z-index: 2; } .theme-title-separator { width: 80px; height: 4px; background: linear-gradient(90deg, var(--accent-purple), var(--accent-hover)); margin: 0 auto 3rem; border-radius: 2px; position: relative; z-index: 2; } /* ====== TEAM GRID ====== */ .theme-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 3rem; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; } /* ====== PHOTO CONTAINER ====== */ .member-photo-container { position: relative; overflow: hidden; height: 400px; background: linear-gradient(135deg, var(--lavender-light), var(--lavender-medium)); } .member-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: all 0.4s ease; } .member-photo-container:hover .member-photo { transform: scale(1.05); } /* ====== PHOTO OVERLAY ====== */ .photo-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(4, 2, 59, 0.8)); padding: 2rem; transform: translateY(100%); transition: all 0.4s ease; } .team-member-card:hover .photo-overlay { transform: translateY(0); } .overlay-content { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: white; font-weight: 600; font-size: 1.1rem; } .overlay-content i { font-size: 1.3rem; color: var(--lavender-light); } /* ====== MEMBER INFO ====== */ .member-info { padding: 2.5rem; } .member-name { color: var(--theme-text-primary); font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; } .member-title { color: var(--theme-text-primary); font-size: 1.1rem; font-weight: 600; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.5px; } /* ====== MEMBER DESCRIPTION ====== */ .theme-member-description { color: var(--theme-text-primary); font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem; text-align: justify; } .theme-member-specialties { margin-bottom: 2rem; } .theme-member-specialties h5 { color: --text-white; font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .theme-member-specialties h5::before { content: ''; width: 4px; height: 20px; background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); border-radius: 2px; } .theme-specialties-list { list-style: none; padding: 0; margin: 0; } .theme-specialties-list li { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; color: var(--text-dark); font-weight: 500; padding: 0.5rem 0; border-bottom: 1px solid rgba(98, 81, 211, 0.1); transition: all 0.3s ease; } .theme-specialties-list li:hover { background: rgba(98, 81, 211, 0.05); padding-left: 0.5rem; border-radius: 8px; border-bottom-color: transparent; } .theme-specialties-list li:last-child { border-bottom: none; } .theme-specialties-list i { color: var(--accent-purple); font-size: 1rem; flex-shrink: 0; } .dual-certification { display: flex; gap: 10px; justify-content: center; align-items: center; margin-bottom: 15px; flex-wrap: wrap; } /* ====== SINGLE CERTIFICATION CONTAINER (Claudia) ====== */ .single-certification { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; } /* ====== CERTIFICATION BADGE UNIFIED ====== */ .cert-badge { display: flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 0.8rem 1.2rem; background: linear-gradient(135deg, #f8f9ff, #e7e4fd); border-radius: 15px; border: 2px solid var(--lavender-light); transition: all 0.3s ease; min-width: 160px; } .cert-badge:hover { border-color: var(--accent-purple); background: linear-gradient(135deg, #e7e4fd, #d4d1f9); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(98, 81, 211, 0.2); } /* ====== CERTIFICATION LOGOS ====== */ .cert-logo { width: 60px; height: auto; transition: all 0.3s ease; } .cert-badge:hover .cert-logo { transform: scale(1.05); } /* ====== CERTIFICATION TEXT ====== */ .cert-text { color: var(--primary-dark); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.3px; text-align: center; } /* ====== SPECIFIC STYLING FOR ICF ====== */ .icf-cert { border-color: #1f4e79; } .icf-cert:hover { border-color: #1f4e79; background: linear-gradient(135deg, #e8f1fa, #d1e7f5); } .icf-cert .cert-text { color: #1f4e79; } /* ====== SPECIFIC STYLING FOR ICC ====== */ .icc-cert { border-color: var(--accent-purple); } .icc-cert:hover { border-color: var(--accent-hover); background: linear-gradient(135deg, #e7e4fd, #d4d1f9); } .icc-cert .cert-text { color: var(--accent-purple); } /* ====== RESPONSIVE ADJUSTMENTS ====== */ @media (max-width: 768px) { .dual-certification { flex-direction: column; gap: 8px; } .cert-badge { min-width: 140px; padding: 0.6rem 1rem; } .cert-logo { width: 50px; } .cert-text { font-size: 0.85rem; } } @media (max-width: 480px) { .cert-badge { min-width: 130px; padding: 0.5rem 0.8rem; gap: 0.6rem; } .cert-logo { width: 45px; } .cert-text { font-size: 0.8rem; } } /* ====== VISUAL BALANCE ====== */ .badges-container { min-height: 140px; /* Ensure consistent height */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; } /* ====== UPDATED SPECIALTIES STYLING ====== */ .specialties-list li.featured { background: linear-gradient(135deg, rgba(98, 81, 211, 0.05), rgba(212, 175, 55, 0.05)); border-left: 4px solid var(--accent-purple); border-radius: 8px; padding: 10px 15px; margin-bottom: 12px; font-weight: 600; transition: all 0.3s ease; } .specialties-list li.featured:hover { background: linear-gradient(135deg, rgba(98, 81, 211, 0.1), rgba(212, 175, 55, 0.1)); border-left-color: #d4af37; transform: translateX(5px); } .specialties-list li.featured i { color: #d4af37; font-size: 1.1rem; } /* ====== HOVER EFFECTS COORDINATION ====== */ .dual-certification .cert-badge:hover:nth-child(1) { transform: translateY(-2px) translateX(-3px); } .dual-certification .cert-badge:hover:nth-child(2) { transform: translateY(-2px) translateX(3px); } /* ====== ANIMATION ON LOAD ====== */ .cert-badge { animation: fadeInCert 0.6s ease-out; } .dual-certification .cert-badge:nth-child(1) { animation-delay: 0.1s; } .dual-certification .cert-badge:nth-child(2) { animation-delay: 0.3s; } /* ====== FOUNDER BADGE - GOLDEN PRESTIGE ====== */ .founder-badge { background: linear-gradient(135deg, #d4af37, #f7dc6f); border: 2px solid #b8860b; padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; color: #8b4513; text-align: center; margin: 10px auto 15px; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3); display: inline-block; min-width: 200px; transition: all 0.3s ease; position: relative; overflow: hidden; } .founder-badge::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.6s ease; } .founder-badge:hover::before { left: 100%; } .founder-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(212, 175, 55, 0.4); border-color: #d4af37; } /* Icon for founder badge */ .founder-badge i { margin-right: 8px; color: #b8860b; font-size: 1rem; } /* ====== ICF + FOUNDER BADGES CONTAINER ====== */ .badges-container { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 1.5rem; } /* =============================================== FIN DEL SISTEMA MINIMAL THINSCEN =============================================== INSTRUCCIONES DE USO: 1. Usar clases theme-* en lugar de clases Bootstrap estándar 2. Sistema 8 bandas: theme-band-1 a theme-band-8 3. Dual-theme automático via data-theme="dark" 4. Responsive dual-device automático =============================================== */ /* =============================================== CHECKBOX STYLING - Sin clases específicas Aplica a TODOS los checkboxes del sitio =============================================== */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 18px; height: 18px; border: 2px solid var(--accent-purple); border-radius: 4px; background-color: #ffffff; cursor: pointer; position: relative; transition: all var(--theme-transition-normal); vertical-align: middle; margin-right: 8px; } input[type="checkbox"]:hover { border-color: var(--accent-hover); background-color: #e7e4fd; } input[type="checkbox"]:checked { background-color: #e7e4fd; border-color: var(--accent-purple); } input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: green; font-size: 14px; font-weight: bold; } input[type="checkbox"]:focus { outline: none; border-color: var(--accent-hover); box-shadow: 0 0 0 3px rgba(98, 81, 211, 0.15); } /* Dark mode */ [data-theme="dark"] input[type="checkbox"] { background-color: #ffffff; border-color: var(--accent-purple); } [data-theme="dark"] input[type="checkbox"]:hover { background-color: #e7e4fd; } [data-theme="dark"] input[type="checkbox"]:checked { background-color: #ffffff; } /* Labels alineados */ .theme-form-check-label { color: var(--theme-text-body); cursor: pointer; transition: color var(--theme-transition-normal); display: inline-block; vertical-align: middle; } /* Contenedor de checkbox + label */ .accordion-body > div { display: flex; align-items: center; margin-bottom: 12px; } /* ====== MENSAJES DE ALERTA ====== */ .theme-alert { border-radius: 15px; padding: 1.2rem 1.5rem; margin-bottom: 2rem; border: none; color: #050342; } .theme-alert-info { background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); border-left: 4px solid #050342; } .theme-alert-success { background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); border-left: 4px solid var(--success-green); } .theme-alert-warning { background: linear-gradient(135deg, #d7edd4 0%, #e6e0c3 100%); border-left: 4px solid var(--success-gold); } .theme-alert-danger { background: linear-gradient(135deg, #ede4d4 0%, #f4c3bd 100%); border-left: 4px solid var(--success-red); } .theme-text-primary-forced { color: #050342 !important; } /* =============================================== MOBILE FIXES - TOUCH INTERACTIONS =============================================== */ /* === NAVBAR RESPONSIVE === */ @media (max-width: 991px) { /* Menú vertical en mobile */ .navbar-collapse .navbar-nav { flex-direction: column !important; width: 100%; align-items: stretch; } .navbar-collapse .navbar-nav .nav-item { width: 100%; text-align: center; } .navbar-collapse .nav-link { display: block; padding: 15px 20px !important; margin: 0 !important; } } /* === LANGUAGE DROPDOWN MOBILE === */ @media (max-width: 991px) { .theme-language-selector { position: relative; z-index: 1055; /* Encima de navbar collapse */ margin-left: 0; margin-top: 15px; } .theme-language-dropdown { pointer-events: auto; touch-action: manipulation; /* Permitir taps pero prevenir zoom */ -webkit-tap-highlight-color: rgba(98, 81, 211, 0.3); } .theme-language-options { z-index: 1056; /* Encima del dropdown */ } } /* === THEME SWITCHER MOBILE === */ @media (max-width: 991px) { .theme-switcher { position: relative; z-index: 1057; /* Encima de todo en navbar */ margin-left: 0; margin-top: 15px; display: flex; justify-content: center; } .theme-toggle { pointer-events: auto !important; touch-action: none !important; /* Prevenir gestos navegador */ -webkit-tap-highlight-color: rgba(98, 81, 211, 0.3); cursor: pointer; position: relative; z-index: 1058; } /* Asegurar que el slider no interfiera */ .toggle-slider { pointer-events: none; /* El toggle padre maneja los eventos */ } } /* === NAVBAR COLLAPSE MOBILE === */ @media (max-width: 991px) { .navbar-collapse { position: relative; z-index: 1050; /* Debajo de controles */ } } /* === FIX BOOTSTRAP COLLAPSE INTERFERENCE === */ .navbar-toggler:focus { box-shadow: none; outline: none; } /* === ASEGURAR INTERACTIVIDAD TOUCH === */ .theme-toggle, .theme-language-dropdown { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } /* =============================================== FIX DROPDOWN IDIOMA - EVENTOS CAPTURADOS =============================================== */ /* Dropdown SIEMPRE encima del navbar */ .theme-language-selector { position: relative; z-index: 2000; } .theme-language-dropdown { position: relative; z-index: 2001; cursor: pointer; } .theme-language-options { position: absolute; z-index: 2002; } /* Mobile - más alto todavía */ @media (max-width: 991px) { .navbar-collapse .theme-language-selector { z-index: 2100 !important; } .navbar-collapse .theme-language-dropdown { z-index: 2101 !important; pointer-events: auto !important; } .navbar-collapse .theme-language-options { z-index: 2102 !important; } } /* Prevenir que navbar-collapse capture eventos */ .navbar-collapse { pointer-events: none; /* El collapse NO captura eventos */ } .navbar-collapse > *, .navbar-collapse a, .navbar-collapse button, .navbar-collapse .theme-language-option, .theme-language-options, .theme-language-options a { pointer-events: auto !important; } /* =============================================== CARD HEADER VARIANTS - COMPARATIVAS =============================================== */ .theme-card-header-danger { background: linear-gradient(135deg, rgba(151, 5, 44, 0.1), rgba(151, 5, 44, 0.05)); border-bottom: 2px solid var(--success-red); transition: all var(--theme-transition-normal); } .theme-card-header-success { background: linear-gradient(135deg, rgba(21, 184, 89, 0.1), rgba(21, 184, 89, 0.05)); border-bottom: 2px solid var(--success-green); transition: all var(--theme-transition-normal); } /* Hover states opcionales */ .theme-card:hover .theme-card-header-danger { background: linear-gradient(135deg, rgba(151, 5, 44, 0.15), rgba(151, 5, 44, 0.08)); border-bottom-color: var(--success-red); } .theme-card:hover .theme-card-header-success { background: linear-gradient(135deg, rgba(21, 184, 89, 0.15), rgba(21, 184, 89, 0.08)); border-bottom-color: var(--success-green); } /* =============================================== NAV PILLS - TABS SYSTEM Dual-Theme + Dual-Device Compatible Sistema de tabs para contenido =============================================== */ /* === BASE NAV-PILLS STYLING === */ .nav-pills .nav-link { background: transparent; border: 2px solid var(--theme-border-light); color: var(--theme-text-primary) !important; font-weight: 500; transition: all var(--theme-transition-normal); border-radius: 25px; padding: 0.8rem 1rem; text-transform: none; /* No uppercase en tabs */ font-size: 0.95rem; margin: 0; /* Reset navbar margin */ } /* === HOVER STATE - Visible en light mode === */ .nav-pills .nav-link:hover { background: var(--lavender-light); border-color: var(--accent-purple); color: var(--primary-dark) !important; /* ✅ !important para vencer navbar */ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(98, 81, 211, 0.2); } /* === ACTIVE STATE - BOLD + Destacado === */ .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); border-color: var(--accent-purple); color: var(--text-white) !important; font-weight: 700; /* ✅ BOLD para active */ box-shadow: 0 4px 15px rgba(98, 81, 211, 0.3); } /* === DARK MODE ADJUSTMENTS === */ [data-theme="dark"] .nav-pills .nav-link { border-color: var(--theme-border-medium); color: var(--theme-text-primary) !important; } [data-theme="dark"] .nav-pills .nav-link:hover { background: rgba(98, 81, 211, 0.2); border-color: var(--accent-hover); color: var(--theme-text-primary) !important; } [data-theme="dark"] .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); color: var(--text-white) !important; } /* === RESPONSIVE - MOBILE === */ @media (max-width: 768px) { .nav-pills .nav-link { padding: 0.6rem 0.8rem; font-size: 0.9rem; } } .green-success { color: var(--success-green) !important; } .green-success-forced { color: --success-green; } .red-danger { color: var(--success-red) !important; } .red-danger-forced { color: --success-red; } /* =============================================== MOBILE EDGE-TO-EDGE OPTIMIZATION Maximiza espacio en mobile para comparaciones =============================================== */ @media (max-width: 768px) { /* === 1. Reducir padding Container Bootstrap === */ .container, .container-fluid { padding-left: 8px !important; padding-right: 8px !important; } /* === 2. Reducir padding Cards === */ .theme-card { padding: 1rem !important; margin-left: 0.25rem !important; margin-right: 0.25rem !important; } /* === 3. Reducir padding internos rows === */ .theme-card .row { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .theme-card .row > [class*="col"] { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } /* === 4. Reducir padding específico comparación === */ .theme-card-body { padding: 0.5rem !important; } } @media (max-width: 480px) { /* === Mobile pequeño: aún más agresivo === */ .container, .container-fluid { padding-left: 3px !important; padding-right: 3px !important; } .theme-card { padding: 0.75rem !important; margin-left: 2px !important; margin-right: 2px !important; } } /* =============================================== RESPONSIVE PADDING UTILITIES OVERRIDE Sobrescribe p-4, p-3, etc. para mobile Mantiene HTML intacto - Control arquitectónico =============================================== */ /* === Desktop: Mantener valores Bootstrap originales === */ /* p-4 = 24px, p-3 = 16px, p-2 = 8px (sin cambios) */ /* === Tablet (≤768px) === */ @media (max-width: 768px) { .p-4 { padding: 1rem !important; /* 16px en lugar de 24px */ } .p-3 { padding: 0.75rem !important; /* 12px en lugar de 16px */ } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } /* === Mobile (≤480px) === */ @media (max-width: 480px) { .p-4 { padding: 0.75rem !important; /* 12px */ } .p-3 { padding: 0.5rem !important; /* 8px */ } .py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .px-3 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } } /* === Mobile pequeño (≤375px) === */ @media (max-width: 375px) { .p-4 { padding: 0.5rem !important; /* 8px - máxima eficiencia */ } .p-3 { padding: 0.4rem !important; /* 6.4px */ } } /* MOBILE NAVBAR - ESPACIADO OPTIMIZADO */ @media (max-width: 768px) { .navbar-nav .nav-item { margin-bottom: 0.2rem !important; /* Era ~2-3rem probablemente */ } .navbar-nav .nav-link { padding: 0.2rem 0.2rem !important; /* Reducir padding */ font-size: 1rem; /* Mantener legibilidad */ } } /* ================================================ FIX OVERFLOW HORIZONTAL MOBILE ================================================ */ /* Prevenir scroll horizontal global */ html, body { max-width: 100vw; overflow-x: hidden !important; } /* MOBILE HEADER - AJUSTES CRÍTICOS */ @media (max-width: 768px) { /* Header container no debe exceder viewport */ .theme-main-header, .theme-main-header .navbar, .theme-main-header .container { max-width: 100vw !important; overflow-x: hidden !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* Logo responsive - limitar ancho */ .navbar-brand { max-width: 150px !important; /*calc(100vw - 104px) !important; /* Viewport - espacio hamburguesa */ overflow: hidden; padding: 0 !important; /* ✅ AGREGAR: Eliminar padding Bootstrap default */ } .theme-logo { max-height: 85px !important; height: auto; width: auto; margin-right: 10px; } .theme-brand-text { font-size: 0.875rem !important; /* Texto más pequeño si es visible */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* === NAVBAR-BRAND - OPTIMIZAR ALTURA === */ .navbar-brand { padding: 0.25rem 0 !important; } /* === CONTAINER - PADDING LATERAL === */ .theme-main-header .container { padding-left: 15px; padding-right: 15px; } /* Hamburguesa fija en esquina derecha */ .navbar-toggler { position: fixed !important; /* ✅ CAMBIO: absolute → fixed */ right: 0.75rem !important; top: 20px !important; /* ✅ CAMBIO: 50% → valor fijo desde top del viewport */ transform: none !important; /* ✅ CAMBIO: Eliminar translateY */ z-index: 2200 !important; padding: 0.5rem !important; margin: 0 !important; } /* Navbar no debe crecer más allá del viewport */ .navbar-collapse { max-width: 100vw !important; margin-left: -0.75rem !important; margin-right: -0.75rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } /* =============================================== MOBILE OPTIMIZATION - PANTALLAS MUY PEQUEÑAS =============================================== */ @media (max-width: 576px) { /* === NAVBAR - REDUCIR AÚN MÁS EN MÓVILES PEQUEÑOS === */ .navbar { padding: 0.4rem 0 !important; } /* === LOGO - AJUSTE EXTRA PEQUEÑO === */ .theme-logo { max-height: 80px !important; height: auto; width: auto; margin-right: 8px; } /* === BRAND TEXT - OCULTAR O REDUCIR === */ .theme-brand-text { font-size: 1rem !important; } /* === CONTAINER - MÁRGENES MÍNIMOS === */ .theme-main-header .container { padding-left: 10px; padding-right: 10px; } } /* FIX ADICIONAL: Todos los containers hijos */ @media (max-width: 768px) { img, video, iframe, table { max-width: 100%; } .container, .container-fluid { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } /* ===================================== SECCIÓN DESKTOP - FUNCIONANDO SIN ANIMACIÓN ===================================== */ /* ====== BASE STYLES DESKTOP ====== */ .hero-4divisions.desktop-version { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 50%, var(--primary-light) 100%); position: relative; overflow: visible; min-height: auto; display: flex; flex-direction: column; } /* BACKGROUND PATTERN - SIN ANIMACIÓN GIRANDO */ .hero-4divisions.desktop-version::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,') repeat; opacity: 0.3; /* ELIMINADA: animation: float 20s ease-in-out infinite; */ } /* ====== PHILOSOPHY SECTION DESKTOP ====== */ .hero-4divisions.desktop-version .hero-philosophy { text-align: center; padding: 60px 0 40px; position: relative; z-index: 2; } .hero-4divisions.desktop-version .philosophy-text { font-size: 2.2rem; font-weight: 700; color: var(--text-white); text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); margin-bottom: 15px; } .hero-4divisions.desktop-version .philosophy-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); max-width: 600px; margin: 0 auto; } /* ====== DIVISIONS CONTAINER DESKTOP ====== */ .hero-4divisions.desktop-version .divisions-container { flex: 1; display: flex; position: relative; z-index: 2; } /* ====== DIVISION STYLES DESKTOP ====== */ .hero-4divisions.desktop-version .hero-division { flex: 1; border-right: 2px solid rgba(255, 255, 255, 0.2); display: flex; flex-direction: column; transition: all 0.5s ease; cursor: default; position: relative; overflow: hidden; } .hero-4divisions.desktop-version .hero-division:last-child { border-right: none; } .hero-4divisions.desktop-version .hero-division:hover { flex: 1.2; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .hero-4divisions.desktop-version .division-header { padding: 30px 20px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .hero-4divisions.desktop-version .division-title { font-size: 1.8rem; font-weight: 700; color: var(--text-white); margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .hero-4divisions.desktop-version .division-subtitle { font-size: 1rem; color: rgba(255, 255, 255, 0.8); font-weight: 500; } .hero-4divisions.desktop-version .division-content { flex: 1; padding: 30px 20px; display: flex; flex-direction: column; justify-content: center; } .hero-4divisions.desktop-version .division-description { color: rgba(255, 255, 255, 0.9); text-align: center; line-height: 1.6; margin-bottom: 25px; } .hero-4divisions.desktop-version .division-cta { text-align: center; margin-top: auto; padding-top: 20px; } /* ====== BUTTON STYLES DESKTOP ====== */ .hero-4divisions.desktop-version .division-btn { background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); color: var(--text-white); border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; display: inline-block; box-shadow: 0 4px 15px rgba(98, 81, 211, 0.3); position: relative; overflow: hidden; cursor: pointer; } .hero-4divisions.desktop-version .division-btn:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(231, 228, 253, 0.95)); color: var(--primary-dark) !important; border-radius: 25px; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4); text-decoration: none; } /* ====== ESTADOS DIVISIONES DESKTOP ====== */ .hero-4divisions.desktop-version .hero-division.active { background: rgba(255, 255, 255, 0.15) !important; border-left: 4px solid var(--accent-purple); transform: scale(1.02); box-shadow: 0 8px 25px rgba(98, 81, 211, 0.3); z-index: 5; } .hero-4divisions.desktop-version .hero-division.active .division-btn { background: linear-gradient(135deg, #007bff, #0056b3); box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); } .hero-4divisions.desktop-version .hero-division.active .division-btn:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(230, 245, 255, 0.95)); color: #0056b3 !important; border-radius: 25px; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3); } .hero-4divisions.desktop-version .hero-division.inactive { opacity: 0.6; filter: grayscale(30%); transform: scale(0.98); } .hero-4divisions.desktop-version .hero-division.inactive .division-btn { background: linear-gradient(135deg, #6c757d, #495057); box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3); } .hero-4divisions.desktop-version .hero-division.inactive .division-btn:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 242, 245, 0.95)); color: var(--primary-dark) !important; border-radius: 25px; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(108, 117, 125, 0.3); } /* ====== DIVISIONS CONTAINER DESKTOP ====== */ .divisions-container { flex: 1; display: flex; position: relative; z-index: 2; } /* DEFAULT: Desktop visible, Mobile oculto */ .hero-4divisions.desktop-version { display: block !important; } .hero-4divisions.mobile-version { display: none !important; } /* MOBILE: Desktop oculto, Mobile visible */ @media screen and (max-width: 768px) { .hero-4divisions.desktop-version { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; left: -9999px !important; } .hero-4divisions.mobile-version { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; left: auto !important; } } /* ====== MOBILE CTA BUTTON - WELLNESS STYLE ====== */ .mobile-cta-btn { background: linear-gradient(135deg, var(--accent-purple) 0%, var(--primary-medium) 100%); color: white; border: none; padding: 12px 25px; border-radius: 25px; /* ← CONSISTENTE CON WELLNESS */ font-weight: 600; margin-top: 15px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(98, 81, 211, 0.3); position: relative; overflow: hidden; } .mobile-cta-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.3s ease, height 0.3s ease; } .mobile-cta-btn:hover::before { width: 300px; height: 300px; } .mobile-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(98, 81, 211, 0.4); } /* ====== MOBILE CLOSE BUTTON WELLNESS ====== */ .mobile-close-btn { position: absolute; top: 15px; right: 20px; background: var(--primary-medium); color: white; border: none; width: 30px; height: 30px; border-radius: 50%; /* ← CIRCULAR WELLNESS */ font-size: 16px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(67, 64, 161, 0.25); } .mobile-close-btn:hover { background: var(--accent-purple); transform: scale(1.1); box-shadow: 0 6px 18px rgba(98, 81, 211, 0.4); } /* ====== MOBILE CARD CONTAINER ====== */ .mobile-card-detail-container { max-width: 100%; margin: 0 auto; position: relative; z-index: 2; padding: 20px 5px; } /* KK */ /* ===================================== SECCIÓN DESKTOP - COLORES FIJOS AZUL WELLNESS ===================================== */ /* ====== BASE STYLES DESKTOP ====== */ .hero-4divisions.desktop-version { background: linear-gradient(135deg, #050342 0%, #4340a1 50%, #837edb 100%); position: relative; overflow: visible; min-height: auto; display: flex; flex-direction: column; } /* BACKGROUND PATTERN - SIN ANIMACIÓN GIRANDO */ .hero-4divisions.desktop-version::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,') repeat; opacity: 0.3; } /* ====== PHILOSOPHY SECTION DESKTOP ====== */ .hero-4divisions.desktop-version .hero-philosophy { text-align: center; padding: 60px 0 40px; position: relative; z-index: 2; } .hero-4divisions.desktop-version .philosophy-text { font-size: 2.2rem; font-weight: 700; color: #ffffff; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); margin-bottom: 15px; } .hero-4divisions.desktop-version .philosophy-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); max-width: 600px; margin: 0 auto; } /* ====== DIVISIONS CONTAINER DESKTOP ====== */ .hero-4divisions.desktop-version .divisions-container { flex: 1; display: flex; position: relative; z-index: 2; } /* ====== DIVISION STYLES DESKTOP ====== */ .hero-4divisions.desktop-version .hero-division { flex: 1; border-right: 2px solid rgba(255, 255, 255, 0.2); display: flex; flex-direction: column; transition: all 0.5s ease; cursor: default; position: relative; overflow: hidden; } .hero-4divisions.desktop-version .hero-division:last-child { border-right: none; } .hero-4divisions.desktop-version .hero-division:hover { flex: 1.2; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .hero-4divisions.desktop-version .division-header { padding: 30px 20px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .hero-4divisions.desktop-version .division-title { font-size: 1.8rem; font-weight: 700; color: #ffffff; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .hero-4divisions.desktop-version .division-subtitle { font-size: 1rem; color: rgba(255, 255, 255, 0.8); font-weight: 500; } .hero-4divisions.desktop-version .division-content { flex: 1; padding: 30px 20px; display: flex; flex-direction: column; justify-content: center; } .hero-4divisions.desktop-version .division-description { color: rgba(255, 255, 255, 0.9); text-align: center; line-height: 1.6; margin-bottom: 25px; } .hero-4divisions.desktop-version .division-cta { text-align: center; margin-top: auto; padding-top: 20px; } /* ====== BUTTON STYLES DESKTOP ====== */ .hero-4divisions.desktop-version .division-btn { background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); color: #ffffff; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; display: inline-block; box-shadow: 0 4px 15px rgba(98, 81, 211, 0.3); position: relative; overflow: hidden; cursor: pointer; } .hero-4divisions.desktop-version .division-btn:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(231, 228, 253, 0.95)); color: #050342 !important; border-radius: 25px; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4); text-decoration: none; } /* ====== ESTADOS DIVISIONES DESKTOP ====== */ .hero-4divisions.desktop-version .hero-division.active { background: rgba(255, 255, 255, 0.15) !important; border-left: 4px solid var(--accent-purple); transform: scale(1.02); box-shadow: 0 8px 25px rgba(98, 81, 211, 0.3); z-index: 5; } .hero-4divisions.desktop-version .hero-division.active .division-btn { background: linear-gradient(135deg, #007bff, #0056b3); box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); } .hero-4divisions.desktop-version .hero-division.active .division-btn:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(230, 245, 255, 0.95)); color: #0056b3 !important; border-radius: 25px; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3); } .hero-4divisions.desktop-version .hero-division.inactive { opacity: 0.6; filter: grayscale(30%); transform: scale(0.98); } .hero-4divisions.desktop-version .hero-division.inactive .division-btn { background: linear-gradient(135deg, #6c757d, #495057); box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3); } .hero-4divisions.desktop-version .hero-division.inactive .division-btn:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 242, 245, 0.95)); color: #050342 !important; border-radius: 25px; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(108, 117, 125, 0.3); } /* ====== DIVISIONS CONTAINER DESKTOP ====== */ .divisions-container { flex: 1; display: flex; position: relative; z-index: 2; } /* DEFAULT: Desktop visible, Mobile oculto */ .hero-4divisions.desktop-version { display: block !important; } .hero-4divisions.mobile-version { display: none !important; } /* MOBILE: Desktop oculto, Mobile visible */ @media screen and (max-width: 768px) { .hero-4divisions.desktop-version { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; left: -9999px !important; } .hero-4divisions.mobile-version { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; left: auto !important; } } /* ====== MOBILE VERSION - COLORES FIJOS AZUL WELLNESS (OSCURO COMO DESKTOP) ====== */ .hero-4divisions.mobile-version { background: linear-gradient(135deg, #050342 0%, #4340a1 50%, #837edb 100%); position: relative; overflow: visible; padding: 40px 0; } /* BACKGROUND PATTERN MOBILE */ .hero-4divisions.mobile-version::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,') repeat; opacity: 0.3; } /* ====== MOBILE PHILOSOPHY ====== */ .hero-4divisions.mobile-version .mobile-philosophy { text-align: center; padding: 0 15px 30px; position: relative; z-index: 2; } .hero-4divisions.mobile-version .mobile-philosophy h2 { font-size: 1.8rem; font-weight: 700; color: #ffffff; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); margin-bottom: 10px; } .hero-4divisions.mobile-version .mobile-philosophy p { font-size: 1rem; color: rgba(255, 255, 255, 0.9); line-height: 1.5; } /* ====== MOBILE CARD CONTAINER ====== */ .mobile-card-detail-container { max-width: 100%; margin: 0 auto; position: relative; z-index: 2; padding: 20px 5px; } /* ====== MOBILE CARD - FONDO SEMI-TRANSPARENTE OSCURO ====== */ .mobile-card { background: rgba(67, 64, 161, 0.3); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 25px 20px; margin-bottom: 20px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; position: relative; backdrop-filter: blur(10px); } .mobile-card:hover { background: rgba(67, 64, 161, 0.4); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); } .mobile-card h3 { font-size: 1.6rem; font-weight: 700; color: #ffffff; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .mobile-card .card-subtitle { font-size: 1rem; color: rgba(255, 255, 255, 0.8); font-weight: 600; margin-bottom: 15px; } .mobile-card .card-description { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; margin-bottom: 20px; } /* ====== MOBILE CTA BUTTON - WELLNESS STYLE ====== */ .mobile-cta-btn { background: linear-gradient(135deg, var(--accent-purple) 0%, #4340a1 100%); color: #ffffff; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; margin-top: 15px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(98, 81, 211, 0.3); position: relative; overflow: hidden; } .mobile-cta-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.3s ease, height 0.3s ease; } .mobile-cta-btn:hover::before { width: 300px; height: 300px; } .mobile-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(98, 81, 211, 0.4); } /* ====== MOBILE DETAIL CONTENT - FONDO SEMI-TRANSPARENTE OSCURO ====== */ .mobile-detail-content { background: rgba(67, 64, 161, 0.4); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 30px 20px; margin-top: 20px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); position: relative; backdrop-filter: blur(10px); } .mobile-detail-content h4 { font-size: 1.4rem; font-weight: 700; color: #ffffff; margin-bottom: 15px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .mobile-detail-content p, .mobile-detail-content ul li { color: rgba(255, 255, 255, 0.9); line-height: 1.6; } /* ====== MOBILE CLOSE BUTTON WELLNESS ====== */ .mobile-close-btn { position: absolute; top: 15px; right: 20px; background: #4340a1; color: #ffffff; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 16px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(67, 64, 161, 0.25); } .mobile-close-btn:hover { background: var(--accent-purple); transform: scale(1.1); box-shadow: 0 6px 18px rgba(98, 81, 211, 0.4); } /* ====== MOBILE CARD-DETAIL PAIR ====== */ .mobile-card-detail-pair { margin-bottom: 30px; } /* ====== ESTADOS SHOW/HIDE ====== */ .show { display: block !important; opacity: 1; animation: fadeIn 0.3s ease-in-out; } .hide { display: none !important; opacity: 0; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ====== ONTOTIPO SYMBOL ANIMATION ====== */ @keyframes ontotypeGlow { 0%, 100% { color: var(--accent-purple); transform: scale(1); } 50% { color: var(--accent-hover); transform: scale(1.05); } } .ontotype-symbol i { animation: ontotypeGlow 3s ease-in-out infinite; } /* ====== BADGE ONTOPSIQUIS ====== */ .badge-ontopsiquis { background: linear-gradient(135deg, var(--accent-purple), var(--accent-hover)); color: white; padding: 0.8rem 1.5rem; border-radius: 25px; font-weight: 600; display: inline-flex; align-items: center; box-shadow: 0 4px 15px rgba(98, 81, 211, 0.3); transition: all 0.3s ease; } .badge-ontopsiquis:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(98, 81, 211, 0.4); } /* Highlight animado del label */ .service-highlight { animation: highlightPulse 3s ease-in-out; background: rgba(98, 81, 211, 0.15); padding: 8px 12px; margin: -8px -12px; border-radius: 8px; border-left: 4px solid var(--accent-purple); transition: all 0.3s ease; } @keyframes highlightPulse { 0%, 100% { background: rgba(98, 81, 211, 0.05); border-left-color: rgba(98, 81, 211, 0.3); } 50% { background: rgba(98, 81, 211, 0.2); border-left-color: var(--accent-purple); } } /* Animación pop del checkbox */ .checkbox-pop { animation: checkboxPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes checkboxPop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } /* =============================================== 1. SECTION BASE - BACKGROUND DARK FIXED =============================================== */ .theme-band-6-fixed { /* Gradiente dark theme hardcoded */ background: linear-gradient(135deg, #837edb 0%, #050342 100%); /* Color texto base */ color: #e8e4ff; /* Padding consistente con otros bands */ padding: 4rem 0; /* Transición suave */ transition: all 0.3s ease; } /* =============================================== 2. TÍTULOS - TEXTO CLARO FIXED =============================================== */ /* Títulos principales (h1, display-4, etc) */ .theme-band-6-fixed h1, .theme-band-6-fixed .display-1, .theme-band-6-fixed .display-2, .theme-band-6-fixed .display-3, .theme-band-6-fixed .display-4, .theme-band-6-fixed .display-5, .theme-band-6-fixed .display-6 { /* Texto principal dark theme */ color: #e8e4ff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } /* Títulos secundarios (h2, h3, etc) */ .theme-band-6-fixed h2, .theme-band-6-fixed h3, .theme-band-6-fixed h4, .theme-band-6-fixed h5, .theme-band-6-fixed h6 { /* Texto secundario dark theme */ color: #d4d1f9 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } /* =============================================== 3. TEXTO BODY - PÁRRAFOS FIXED =============================================== */ /* Párrafos y texto normal */ .theme-band-6-fixed p, .theme-band-6-fixed .lead, .theme-band-6-fixed span { /* Texto body dark theme */ color: #d0d0d5 !important; } /* Clase específica theme-text-primary fixed */ .theme-band-6-fixed .theme-text-primary { /* Texto primario dark theme */ color: #e8e4ff !important; } /* =============================================== 4. BORDERS - BORDES FIXED =============================================== */ /* Bordes light */ .theme-band-6-fixed .border, .theme-band-6-fixed .border-top, .theme-band-6-fixed .border-bottom, .theme-band-6-fixed .border-start, .theme-band-6-fixed .border-end { /* Border light dark theme */ border-color: rgba(98, 81, 211, 0.3) !important; } /* Bordes con números (border-1, border-2, etc) */ .theme-band-6-fixed .border-1 { border-color: rgba(98, 81, 211, 0.3) !important; } .theme-band-6-fixed .border-2 { border-color: rgba(98, 81, 211, 0.4) !important; } .theme-band-6-fixed .border-3 { border-color: rgba(98, 81, 211, 0.6) !important; } .theme-band-6-fixed .border-4 { border-color: rgba(98, 81, 211, 0.7) !important; } .theme-band-6-fixed .border-5 { border-color: rgba(98, 81, 211, 0.8) !important; } /* =============================================== 5. ELEMENTOS ADICIONALES (opcional) =============================================== */ /* Si necesitas listas */ .theme-band-6-fixed ul, .theme-band-6-fixed ol, .theme-band-6-fixed li { color: #d0d0d5 !important; } /* Si necesitas elementos muted */ .theme-band-6-fixed .text-muted, .theme-band-6-fixed small { color: #a0a0aa !important; } /* =============================================== 6. RESPONSIVE - MOBILE ADJUSTMENTS =============================================== */ @media (max-width: 768px) { .theme-band-6-fixed { /* Padding reducido en mobile */ padding: 3rem 0; } .theme-band-6-fixed h1, .theme-band-6-fixed .display-4 { /* Tamaño título ajustado mobile */ font-size: 2rem; } } /* ═══════════════════════════════════════════════════════════════════ THINSCEN - Animaciones CTAs (Universal Desktop + Mobile) ═══════════════════════════════════════════════════════════════════ */ /* Fix universal para touch events */ .btn, button, .badge-ontopsiquis { -webkit-tap-highlight-color: rgba(98, 81, 211, 0.2); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: pointer; touch-action: manipulation; } /* Highlight animado del label */ .service-highlight { animation: highlightPulse 3s ease-in-out; background: rgba(98, 81, 211, 0.15); padding: 8px 12px; margin: -8px -12px; border-radius: 8px; border-left: 4px solid var(--accent-purple); transition: all 0.3s ease; } @keyframes highlightPulse { 0%, 100% { background: rgba(98, 81, 211, 0.05); border-left-color: rgba(98, 81, 211, 0.3); } 50% { background: rgba(98, 81, 211, 0.2); border-left-color: var(--accent-purple); } } /* Animación pop del checkbox */ .checkbox-pop { animation: checkboxPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes checkboxPop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } /* Fix específico para iOS Safari */ @supports (-webkit-overflow-scrolling: touch) { .btn, button { cursor: pointer !important; } } /* ================================================================ THINSCEN - MODAL THEME ENHANCEMENT Clases adicionales para modales con dual theme compatible ================================================================ */ /* ═══════════════════════════════════════════════════════════════ 1. MODAL BASE - THEME COMPATIBLE ═══════════════════════════════════════════════════════════════ */ /* Modal backdrop con theme awareness */ .modal-backdrop { background-color: rgba(4, 2, 59, 0.75); } [data-bs-theme="dark"] .modal-backdrop { background-color: rgba(0, 0, 0, 0.85); } /* CRÍTICO: Asegurar estructura correcta para scrolling */ .modal.fade .modal-dialog { transition: transform 0.3s ease-out; } .modal-dialog-scrollable { height: calc(100% - 1rem); } .modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; display: flex; flex-direction: column; } /* Header fijo (no scroll) */ .modal-dialog-scrollable .theme-card-header, .modal-dialog-scrollable .modal-header { flex-shrink: 0; overflow: visible; } /* Body scrollable */ .modal-dialog-scrollable .card-body, .modal-dialog-scrollable .modal-body { overflow-y: auto; overflow-x: hidden; flex-shrink: 1; flex-grow: 1; /* Separación entre contenido y scrollbar */ padding-right: 1.5rem !important; /* Webkit scrollbar styling para theme */ scrollbar-width: thin; scrollbar-color: var(--accent-purple) transparent; } /* Scrollbar personalizado webkit (Chrome, Safari, Edge) */ .modal-dialog-scrollable .card-body::-webkit-scrollbar, .modal-dialog-scrollable .modal-body::-webkit-scrollbar { width: 4px; /* Más delgada - mitad del ancho original */ } .modal-dialog-scrollable .card-body::-webkit-scrollbar-track, .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track { background: transparent; /* Sin fondo visible */ margin: 8px 0; /* Pequeño margen arriba/abajo */ } .modal-dialog-scrollable .card-body::-webkit-scrollbar-thumb, .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb { background: var(--accent-purple); border-radius: 2px; /* Más pequeño porque es más delgada */ opacity: 0.6; transition: opacity 0.3s ease, background 0.3s ease; } .modal-dialog-scrollable .card-body::-webkit-scrollbar-thumb:hover, .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover { background: var(--primary-medium); opacity: 1; } /* Footer fijo (si existe) */ .modal-dialog-scrollable .modal-footer { flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ 2. CLOSE BUTTON - THEME COMPATIBLE ═══════════════════════════════════════════════════════════════ */ .theme-btn-close, .btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23150f5c'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: 0.375rem; opacity: 0.7; width: 1em; height: 1em; padding: 0.25em; transition: opacity 0.3s ease; } .theme-btn-close:hover, .btn-close:hover { opacity: 1; } [data-bs-theme="dark"] .theme-btn-close, [data-bs-theme="dark"] .btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); } /* ═══════════════════════════════════════════════════════════════ 3. ACCORDION - THEME COMPATIBLE ═══════════════════════════════════════════════════════════════ */ .theme-accordion-item { background-color: var(--theme-bg-card); border: 1px solid var(--theme-border-light); margin-bottom: 0.5rem; border-radius: 0.5rem; overflow: hidden; transition: all 0.3s ease; } .theme-accordion-button { background-color: var(--theme-bg-card); color: var(--theme-text-primary); font-weight: 500; padding: 1rem 1.25rem; border: none; transition: all 0.3s ease; } .theme-accordion-button:not(.collapsed) { background-color: var(--lavender-light); color: var(--primary-dark); box-shadow: none; } [data-bs-theme="dark"] .theme-accordion-button:not(.collapsed) { background-color: rgba(131, 126, 219, 0.15); color: var(--theme-text-primary); } .theme-accordion-button:hover { background-color: var(--lavender-light); } [data-bs-theme="dark"] .theme-accordion-button:hover { background-color: rgba(131, 126, 219, 0.1); } .theme-accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(98, 81, 211, 0.25); border-color: var(--accent-purple); } /* Accordion icon (arrow) */ .theme-accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234340a1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: auto; content: ""; background-repeat: no-repeat; background-size: 1.25rem; transition: transform 0.2s ease-in-out; } [data-bs-theme="dark"] .theme-accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23837edb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .theme-accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } /* Accordion body */ .theme-accordion-body { background-color: var(--theme-bg-card); color: var(--theme-text-body); padding: 1rem 1.25rem; border-top: 1px solid var(--theme-border-light); } /* ═══════════════════════════════════════════════════════════════ 4. FORM CHECKS INSIDE ACCORDION - THEME COMPATIBLE ═══════════════════════════════════════════════════════════════ */ .theme-form-check-input { width: 1.25em; height: 1.25em; margin-top: 0.125em; vertical-align: top; background-color: var(--theme-bg-primary); background-repeat: no-repeat; background-position: center; background-size: contain; border: 2px solid var(--theme-border-light); border-radius: 0.25em; transition: all 0.15s ease-in-out; } .theme-form-check-input:checked { background-color: var(--accent-purple); border-color: var(--accent-purple); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .theme-form-check-input:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 0.25rem rgba(98, 81, 211, 0.25); } .theme-form-check-input:hover:not(:checked) { border-color: var(--accent-purple); } .theme-form-check-label { color: var(--theme-text-body); margin-left: 0.5rem; cursor: pointer; user-select: none; } /* ═══════════════════════════════════════════════════════════════ 5. MODAL SHADOW ENHANCEMENTS ═══════════════════════════════════════════════════════════════ */ .theme-shadow-lg { box-shadow: 0 1rem 3rem rgba(4, 2, 59, 0.175) !important; } [data-bs-theme="dark"] .theme-shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important; } /* ═══════════════════════════════════════════════════════════════ 6. RESPONSIVE ADJUSTMENTS ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 2rem); } .theme-accordion-button { padding: 0.875rem 1rem; font-size: 0.95rem; } .theme-accordion-body { padding: 0.875rem 1rem; } } /* ═══════════════════════════════════════════════════════════════ 7. ACCESSIBILITY ENHANCEMENTS ═══════════════════════════════════════════════════════════════ */ .theme-accordion-button:focus-visible, .theme-btn-close:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════ 8. ANIMATION SMOOTHNESS ═══════════════════════════════════════════════════════════════ */ .accordion-collapse { transition: height 0.35s ease; } .theme-accordion-button, .theme-accordion-body, .theme-form-check-input { transition: all 0.3s ease; } /* ═══════════════════════════════════════════════════════════════ END OF MODAL THEME ENHANCEMENT ═══════════════════════════════════════════════════════════════ */ .carousel-control-prev, .carousel-control-next { position: absolute; top: 0; /* bottom: 0; */ z-index: 1; display: flex; align-items: center; justify-content: center; width: 40px !important; padding: -10px 0px 0px 0px !important; margin: 0; color: #fdfdfd !important; text-align: center; background: transparent !important; border: 0; opacity: 0.5; transition: opacity 0.15s ease; } @media (prefers-reduced-motion: reduce) { .carousel-control-prev, .carousel-control-next { transition: none; } } .carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus { color: #fff; text-decoration: none; outline: 0; opacity: 0.9; } .carousel-control-prev { left: 0; } .carousel-control-next { right: 0; } .carousel-control-my-prev-icon, .carousel-control-my-next-icon { display: inline-block; width: 40px; height: 40px; background-repeat: no-repeat; background-position: 50%; background-size:contain ; } .carousel-control-my-prev-icon { background-image: url("https://thinscen.com/assets/img/2left.png") !important; } .carousel-control-my-next-icon { background-image: url("https://thinscen.com/assets/img/2right.png") !important; }