/* ============================================================ Finturu — Light Mode Activo cuando Paleta: - Fondo principal: #f8f6f1 (crema, ya existe como --theme-light-background) - Superficies/cards: #ffffff - Texto principal: #1a1a1a - Texto secundario: #555555 - Acento de marca: #e6007e - Bordes suaves: #e6e2d8 ============================================================ */ html[data-theme="light"] { /* === Fondos === */ --body-bg: #f8f6f1; --bs-body-bg: #ffffff; --bs-body-bg-rgb: 255, 255, 255; --theme-color2: #ffffff; --theme-color2-rgb: 255, 255, 255; --theme-color-dark: #f1f3f7; --theme-color-gray: #f2f2f2; --theme-color-lighter: #ffffff; --theme-color-lighter2: #e6e2d8; --theme-light-background: #f8f6f1; --theme-light-background-text-color: #1a1a1a; /* === Texto === */ --text-color: #1a1a1a; --text-color2: #555555; --headings-color: #0b1220; --bs-body-color: #1a1a1a; --bs-body-color-rgb: 26, 26, 26; --theme-color-black: #0b1220; --theme-color-black-rgb: 11, 18, 32; /* === Section title === */ --sec-title-color: #0b1220; --sec-title-subtitle-color: #e6007e; /* === Acento de marca (no se toca) === */ --theme-color1: #e6007e; --theme-color1-rgb: 230, 0, 126; /* === Gradientes oscuros → claros === */ --gradient-1: linear-gradient(181.35deg, rgba(230,0,126,0) 1.15%, rgba(230,0,126,0.06) 98.91%); --gradient-2: linear-gradient(to left, #fbe7f2, #ffffff); --gradient-3: linear-gradient(to right, #fbe7f2, #ffffff); --gradient-4: linear-gradient(39.66deg, #f4eef1 -21.47%, #ffffff 55.5%); --gradient-5: linear-gradient(12.03deg, #f7eaf2 -8.48%, #ffffff 80.11%); --gradient-6: linear-gradient(180.3deg, #ffffff 0.26%, #f8f6f1 69.2%); --gradient-7: linear-gradient(181.35deg, #ffffff 1.15%, #f2efe8 98.91%); --gradient-9: linear-gradient(180deg, #cfeef7 -32.14%, #d7e0fb 98.21%); --gradient-10: linear-gradient(39.66deg, #f8f6f1 -21.47%, #ffffff 55.5%); --gradient-12: linear-gradient(39.89deg, #e6f6ff -22.01%, #ffffff 55.3%); --gradient-13: linear-gradient(39.89deg, #f8f6f1 -22.01%, #ffffff 55.3%); --gradient-14: radial-gradient(155.99% 118.93% at 100% 98.08%, #f4eef1 0%, #ffffff 55.18%); --gradient-18: linear-gradient(90deg, rgba(255,255,255,0) 1.15%, rgba(2,223,130,0.08) 98.91%); --gradient-19: linear-gradient(80deg, #ffffff 2%, rgba(255,255,255,0) 100%); --gradient-20: linear-gradient(270deg, #ffffff 2%, rgba(255,255,255,0) 100%); } /* ====== BASE ====== */ html[data-theme="light"], html[data-theme="light"] body { background-color: #f8f6f1 !important; color: #1a1a1a; } html[data-theme="light"] body { background-color: #f8f6f1 !important; } html[data-theme="light"] p, html[data-theme="light"] span, html[data-theme="light"] li, html[data-theme="light"] .text { color: #1a1a1a; } html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6, html[data-theme="light"] .title, html[data-theme="light"] .sec-title .title { color: #0b1220 !important; } html[data-theme="light"] .text-white, html[data-theme="light"] [class*="text-light"]:not(.text-lighter-than-air) { color: #1a1a1a !important; } html[data-theme="light"] a { color: #1a1a1a; } html[data-theme="light"] a:hover { color: #e6007e; } html[data-theme="light"] ::-webkit-input-placeholder, html[data-theme="light"] ::-moz-input-placeholder, html[data-theme="light"] ::-ms-input-placeholder { color: #555555; } html[data-theme="light"] ::selection, html[data-theme="light"] ::-moz-selection { background: #e6007e; color: #fff; } /* ====== PRELOADER ====== */ html[data-theme="light"] .preloader { background: #ffffff !important; } html[data-theme="light"] .preloader .load-text span { color: #e6007e !important; } html[data-theme="light"] .preloader svg path { fill: #f8f6f1 !important; } /* ====== HEADER ====== */ html[data-theme="light"] .main-header, html[data-theme="light"] .main-header.header-style-one, html[data-theme="light"] .main-header .header-lower, html[data-theme="light"] .main-header .inner-container, html[data-theme="light"] .sticky-header { background: #ffffff !important; box-shadow: 0 2px 12px rgba(11, 18, 32, 0.06); } html[data-theme="light"] .main-header .navigation > li > a, html[data-theme="light"] .main-header .nav-outer .navigation > li > a { color: #0b1220 !important; } html[data-theme="light"] .main-header .navigation > li > a:hover, html[data-theme="light"] .main-header .navigation > li.current > a { color: #e6007e !important; } html[data-theme="light"] .main-header .navigation li.dropdown ul { background: #ffffff !important; border: 1px solid #e6e2d8; box-shadow: 0 8px 24px rgba(11, 18, 32, 0.08); } html[data-theme="light"] .main-header .navigation li.dropdown ul li a { color: #1a1a1a !important; } html[data-theme="light"] .main-header .navigation li.dropdown ul li a:hover { color: #e6007e !important; background: #faf3f7; } html[data-theme="light"] .main-header .language-switcher select { background: #ffffff !important; color: #1a1a1a !important; border: 1px solid #e6e2d8 !important; } /* Toggle button in header */ .theme-toggle-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #ffffff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 16px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .theme-toggle-btn:hover { transform: rotate(20deg); } html[data-theme="light"] .theme-toggle-btn { background: #ffffff; color: #0b1220; border-color: #e6e2d8; box-shadow: 0 2px 8px rgba(11, 18, 32, 0.06); } /* ====== MOBILE MENU ====== */ html[data-theme="light"] .mobile-menu .menu-box { background: #ffffff !important; color: #1a1a1a; } html[data-theme="light"] .mobile-menu .menu-backdrop { background: rgba(11, 18, 32, 0.4); } html[data-theme="light"] .mobile-menu .navigation li > a { color: #1a1a1a !important; border-bottom: 1px solid #e6e2d8 !important; } html[data-theme="light"] .mobile-menu .navigation li > a:hover { color: #e6007e !important; } /* ====== SECCIONES OSCURAS → CLARAS ====== */ html[data-theme="light"] section, html[data-theme="light"] .banner-section-four, html[data-theme="light"] .clients-section, html[data-theme="light"] .ecosystem-section, html[data-theme="light"] .features-section-two-h4, html[data-theme="light"] .cta-section-two-layout2, html[data-theme="light"] .pricing-section, html[data-theme="light"] .process-section, html[data-theme="light"] .work-section, html[data-theme="light"] section[class*="status-quo"], html[data-theme="light"] section[class*="net-circle"] { background-color: #f8f6f1 !important; color: #1a1a1a; } html[data-theme="light"] .bg-dark, html[data-theme="light"] [class*="bg-black"] { background-color: #ffffff !important; } /* Fondos decorativos / formas oscuras */ html[data-theme="light"] .ecosystem-grid-bg, /* Mundo/forma detrás de "Your VISION is GLOBAL" — más visible y oscurecido */ html[data-theme="light"] .banner-section-four .bg-shape img { filter: brightness(0.55) saturate(1.4) hue-rotate(310deg) !important; } /* ====== TARJETAS ====== */ html[data-theme="light"] .ecosystem-card, html[data-theme="light"] .nc-card, html[data-theme="light"] .features-block-h4, html[data-theme="light"] .pricing-block, html[data-theme="light"] .pricing-block-three, html[data-theme="light"] .feature-card, html[data-theme="light"] .card, html[data-theme="light"] article[data-tilt], html[data-theme="light"] .client-block .inner-box { background: #ffffff !important; color: #1a1a1a !important; border: 1px solid #e6e2d8 !important; box-shadow: 0 4px 18px rgba(11, 18, 32, 0.06) !important; } html[data-theme="light"] .ecosystem-card-title, html[data-theme="light"] .nc-card-title, html[data-theme="light"] .features-block-h4 .title, html[data-theme="light"] .pricing-block .title { color: #0b1220 !important; } html[data-theme="light"] .ecosystem-card-desc, html[data-theme="light"] .nc-card-desc, html[data-theme="light"] .features-block-h4 .text, html[data-theme="light"] .pricing-block .text { color: #555555 !important; } html[data-theme="light"] .ecosystem-divider, html[data-theme="light"] .nc-card-dot, html[data-theme="light"] .ecosystem-card-dot { background: #e6e2d8 !important; } /* Iconos dentro de tarjetas */ html[data-theme="light"] .ecosystem-icon-wrap, html[data-theme="light"] .nc-icon-wrap, html[data-theme="light"] .features-block-h4 .icon { background: linear-gradient(135deg, #fde6f0, #ffffff) !important; color: #e6007e !important; border: 1px solid #f5d3e3; } /* Orbe central del ecosistema */ html[data-theme="light"] .ecosystem-orb, html[data-theme="light"] .nc-orb { background: radial-gradient(circle at 30% 30%, #ffffff, #fbe7f2) !important; border: 1px solid #f5d3e3; color: #e6007e; box-shadow: 0 8px 30px rgba(230, 0, 126, 0.18); } html[data-theme="light"] .ecosystem-orb-text, html[data-theme="light"] .nc-orb-text { color: #e6007e !important; } /* ====== SECTION TITLE ====== */ html[data-theme="light"] .sec-title .sub-title { color: #e6007e !important; } html[data-theme="light"] .sec-title .title, html[data-theme="light"] .sec-title h2 { color: #0b1220 !important; } html[data-theme="light"] .sec-title .text { color: #555555 !important; } /* ====== BOTONES (estándar idéntico a dark mode) ====== */ /* Botones primarios: rosa sólido con texto blanco */ html[data-theme="light"] .theme-btn:not(.header-btn-text), html[data-theme="light"] .btn-style-five, html[data-theme="light"] .btn-primary, html[data-theme="light"] .app-button { background: #e6007e !important; color: #ffffff !important; border: 0 !important; box-shadow: 0 6px 18px rgba(230, 0, 126, 0.25) !important; } html[data-theme="light"] .theme-btn:not(.header-btn-text):hover, html[data-theme="light"] .btn-style-five:hover, html[data-theme="light"] .btn-primary:hover, html[data-theme="light"] .app-button:hover { background: #b80064 !important; color: #ffffff !important; } html[data-theme="light"] .theme-btn .btn-text { color: #ffffff !important; } html[data-theme="light"] .play-now, html[data-theme="light"] .banner-play-btn { color: #0b1220 !important; } html[data-theme="light"] .play-now .icon, html[data-theme="light"] .banner-play-btn .icon { background: #e6007e !important; color: #fff !important; } /* ====== FORMULARIOS ====== */ html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #ffffff !important; color: #1a1a1a !important; border: 1px solid #d9d4c7 !important; } html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus { border-color: #e6007e !important; outline: none; box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.15); } /* ====== FOOTER ====== */ html[data-theme="light"] .main-footer, html[data-theme="light"] .main-footer.footer-style-four { background: #ffffff !important; color: #1a1a1a; border-top: 1px solid #e6e2d8; } html[data-theme="light"] .main-footer .title, html[data-theme="light"] .main-footer h6 { color: #0b1220 !important; } html[data-theme="light"] .main-footer p, html[data-theme="light"] .main-footer a { color: #1a1a1a !important; } html[data-theme="light"] .main-footer a:hover { color: #e6007e !important; } html[data-theme="light"] .main-footer .footer-bottom4 { border-top: 1px solid #e6e2d8; color: #555555; } html[data-theme="light"] .main-footer .social-icon-list4 a { background: #f8f6f1 !important; color: #0b1220 !important; border: 1px solid #e6e2d8 !important; } html[data-theme="light"] .main-footer .social-icon-list4 a:hover { background: #e6007e !important; color: #ffffff !important; border-color: #e6007e !important; } /* ====== BACK TO TOP ====== */ html[data-theme="light"] .back-to-top-btn { background: #e6007e !important; color: #ffffff !important; box-shadow: 0 6px 20px rgba(230, 0, 126, 0.3); } /* ====== TABLAS DE PRECIOS / COMPARATIVAS ====== */ html[data-theme="light"] table { background: #ffffff !important; color: #1a1a1a !important; } html[data-theme="light"] table th, html[data-theme="light"] table td { border-color: #e6e2d8 !important; } html[data-theme="light"] table thead { background: #f8f6f1 !important; } /* ============================================================ PATCH 1 — Secciones con `background:` shorthand hardcoded (no usan variables, hay que pisarlas con shorthand también) ============================================================ */ /* Ecosystem section: background: radial-gradient(... HSL hardcoded ...) */ html[data-theme="light"] .ecosystem-section { background: radial-gradient(ellipse at 50% 40%, #fbe7f2 0%, #f8f6f1 45%, #f8f6f1 100%) !important; color: #1a1a1a !important; } html[data-theme="light"] .ecosystem-section .ecosystem-glow-bg { background: radial-gradient(circle, rgba(230, 0, 126, 0.10) 0%, transparent 60%) !important; filter: blur(80px); } /* Ecosystem title — usa background-clip:text con gradient blanco */ html[data-theme="light"] .ecosystem-section .ecosystem-title { background: linear-gradient(180deg, #0b1220 0%, #4d2237 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } html[data-theme="light"] .ecosystem-section .ecosystem-subtitle { color: #555555 !important; } /* Ecosystem cards — background gradient oscuro hardcoded */ html[data-theme="light"] .ecosystem-section .ecosystem-card { background: linear-gradient(160deg, #ffffff 0%, #fbe7f2 100%) !important; border: 1px solid rgba(230, 0, 126, 0.25) !important; box-shadow: 0 20px 60px -20px rgba(230, 0, 126, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } html[data-theme="light"] .ecosystem-section .ecosystem-card-title { color: #0b1220 !important; } html[data-theme="light"] .ecosystem-section .ecosystem-card-desc { color: #555555 !important; } html[data-theme="light"] .ecosystem-section .ecosystem-icon-wrap { background: rgba(230, 0, 126, 0.10) !important; border-color: rgba(230, 0, 126, 0.35) !important; color: #e6007e !important; } html[data-theme="light"] .ecosystem-section .ecosystem-card::before { background: linear-gradient(115deg, transparent 30%, rgba(230, 0, 126, 0.06) 48%, transparent 60%) !important; } /* Ecosystem orb */ html[data-theme="light"] .ecosystem-section .ecosystem-orb { background: linear-gradient(135deg, #ffffff 0%, #fbe7f2 100%) !important; box-shadow: 0 0 60px rgba(230, 0, 126, 0.25), 0 0 120px rgba(230, 0, 126, 0.10), inset 0 2px 0 rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(230, 0, 126, 0.3); } html[data-theme="light"] .ecosystem-section .ecosystem-orb-mark { color: #e6007e !important; } html[data-theme="light"] .ecosystem-section .ecosystem-orb-text { color: #0b1220 !important; } html[data-theme="light"] .ecosystem-section .ecosystem-orb-ring { border-color: rgba(230, 0, 126, 0.4) !important; } html[data-theme="light"] .ecosystem-section .ecosystem-orb-ring-2 { border-color: rgba(230, 0, 126, 0.2) !important; } /* Ecosystem path SVG — drop-shadow rosa, en light se oscurece */ html[data-theme="light"] .ecosystem-section .ecosystem-path { filter: drop-shadow(0 0 4px rgba(230, 0, 126, 0.4)); } /* ============================================================ PATCH 2 — sub-title pills (varios variantes) ============================================================ */ html[data-theme="light"] .sec-title .sub-title, html[data-theme="light"] .sec-title.home2 .sub-title, html[data-theme="light"] .sec-title.home3 .sub-title, html[data-theme="light"] .sec-title.home4 .sub-title, html[data-theme="light"] .banner-section-one .content-box .sub-title, html[data-theme="light"] .ecosystem-section .ecosystem-pill { background: #ffffff !important; border: 1px solid rgba(230, 0, 126, 0.4) !important; color: #e6007e !important; box-shadow: 0 4px 14px rgba(230, 0, 126, 0.10) !important; } html[data-theme="light"] .sec-title .sub-title .icon { color: #e6007e !important; } /* Pills tipo "Worldwide Accounts", "Global Checkout", "Integrations" */ html[data-theme="light"] [class*="hero-pill"], html[data-theme="light"] .pill, html[data-theme="light"] .hero .pill { background: #ffffff !important; color: #e6007e !important; border: 1px solid rgba(230, 0, 126, 0.4) !important; } /* ============================================================ PATCH 3 — Banner section four (hero del index) ============================================================ */ html[data-theme="light"] .banner-section-four { background: transparent !important; } html[data-theme="light"] .banner-section-four .content-box .title { color: #0b1220 !important; } html[data-theme="light"] .banner-section-four .content-box .title span { color: #e6007e !important; } html[data-theme="light"] .banner-section-four .content-box .text { color: #1a1a1a !important; } html[data-theme="light"] .banner-section-four .content-box .banner-play-btn { color: #0b1220 !important; } html[data-theme="light"] .banner-section-four .content-box .banner-play-btn .icon { border: 1.5px solid rgba(230, 0, 126, 0.6) !important; color: #e6007e !important; background: #ffffff !important; } /* (la opacidad/filter del .bg-shape se gestiona arriba en la sección de fondos decorativos) */ /* ============================================================ PATCH 4 — Logo: el PNG es blanco, en light lo oscurecemos ============================================================ */ html[data-theme="light"] .main-header .logo img, html[data-theme="light"] .sticky-header .logo img, html[data-theme="light"] .mobile-menu .nav-logo img, html[data-theme="light"] .main-footer .footer-logo img { filter: brightness(0) saturate(100%) invert(11%) sepia(12%) saturate(2000%) hue-rotate(190deg) brightness(95%) contrast(95%); } /* Botón "Sign In" — fondo highlight raro en screenshot */ html[data-theme="light"] .header-btn-text, html[data-theme="light"] .header-btn-text .btn-text { background: transparent !important; color: #0b1220 !important; } /* ============================================================ PATCH 5 — CTA section two layout 2 (la del fondo con imagen) ============================================================ */ html[data-theme="light"] .cta-section-two-layout2 .outer-box { border: 1px solid rgba(230, 0, 126, 0.25) !important; background: #ffffff; } html[data-theme="light"] .cta-section-two-layout2 .bg.bg-image, /* ============================================================ PATCH 6 — Page title (Contact, legales): banner superior con imagen oscura ============================================================ */ html[data-theme="light"] .page-title { background-color: #f8f6f1 !important; background-image: none !important; } html[data-theme="light"] .page-title:before { background: linear-gradient(180deg, rgba(230, 0, 126, 0.04), rgba(11, 18, 32, 0.02)) !important; } html[data-theme="light"] .page-title .title { color: #0b1220 !important; } html[data-theme="light"] .page-title .bread-crumb a, html[data-theme="light"] .page-title .bread-crumb li, html[data-theme="light"] .page-title .bread-crumb span { color: #555555 !important; } /* Contact form section (.contact-form-section, etc.) */ html[data-theme="light"] [class*="contact-section"], html[data-theme="light"] [class*="contact-form"], html[data-theme="light"] [class*="contact-info"] { background-color: #f8f6f1 !important; color: #1a1a1a; } /* ============================================================ PATCH 7 — Net Circle (nc-) section ============================================================ */ html[data-theme="light"] [class*="net-circle"], html[data-theme="light"] .nc-section, html[data-theme="light"] section:has(.nc-card) { background: #f8f6f1 !important; } html[data-theme="light"] .nc-pill, html[data-theme="light"] [class*="multiplier"] .pill, html[data-theme="light"] .nc-section .pill { background: #ffffff !important; color: #e6007e !important; border: 1px solid rgba(230, 0, 126, 0.4) !important; } /* ============================================================ PATCH 8 — Cualquier sección con [style*="background-color: #0"] o reglas inline oscuras: fuerza al fallback claro ============================================================ */ html[data-theme="light"] [style*="background-color: #07"], html[data-theme="light"] [style*="background-color: #01"], html[data-theme="light"] [style*="background-color: #00"] { background-color: #f8f6f1 !important; } /* Wrapper general por seguridad */ html[data-theme="light"] .page-wrapper, html[data-theme="light"] main { background: #f8f6f1 !important; } /* ============================================================ NAVBAR CANÓNICO — idéntico en TODAS las páginas (las páginas cargan distintos CSS base, así que aquí fijamos medidas y estilos para que el header injected luzca igual) ============================================================ */ /* Contenedor: 100% opaco, ancho fluido, sticky superior */ html[data-theme="light"] .main-header, html[data-theme="light"] .main-header.header-style-one { background: #ffffff !important; background-color: #ffffff !important; border-bottom: 1px solid #ececec !important; box-shadow: 0 1px 0 rgba(11, 18, 32, 0.04), 0 4px 18px rgba(11, 18, 32, 0.04) !important; position: relative; z-index: 50; } html[data-theme="light"] .main-header .header-lower, html[data-theme="light"] .main-header .inner-container, html[data-theme="light"] .main-header .main-box { background: transparent !important; box-shadow: none !important; } html[data-theme="light"] .main-header .container { max-width: 1344px; } /* Sticky header en scroll */ html[data-theme="light"] .sticky-header { background: #ffffff !important; background-color: #ffffff !important; border-bottom: 1px solid #ececec !important; box-shadow: 0 4px 18px rgba(11, 18, 32, 0.06) !important; } /* Logo: tamaño consistente — aplica en LIGHT y DARK */ .main-header .logo img, .sticky-header .logo img, .main-header .logo, .sticky-header .logo { height: 28px !important; width: auto !important; max-height: 28px !important; display: inline-block !important; } .main-header .logo img, .sticky-header .logo img { object-fit: contain; } /* Menú: tipografía y espaciado */ html[data-theme="light"] .main-header .navigation, html[data-theme="light"] .sticky-header .navigation { display: flex !important; gap: 32px; margin: 0; padding: 0; list-style: none; } html[data-theme="light"] .main-header .navigation > li, html[data-theme="light"] .sticky-header .navigation > li { padding: 0; } html[data-theme="light"] .main-header .navigation > li > a, html[data-theme="light"] .sticky-header .navigation > li > a { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #0b1220 !important; padding: 14px 0 !important; position: relative; } html[data-theme="light"] .main-header .navigation > li > a:hover, html[data-theme="light"] .sticky-header .navigation > li > a:hover { color: #e6007e !important; } /* Action box: alineación */ html[data-theme="light"] .main-header .action-box { display: flex !important; align-items: center !important; gap: 14px !important; } /* Toggle theme button */ html[data-theme="light"] .theme-toggle-btn { width: 40px; height: 40px; border-radius: 50%; background: #ffffff !important; color: #0b1220 !important; border: 1px solid #e6e2d8 !important; box-shadow: 0 2px 8px rgba(11, 18, 32, 0.06); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin: 0 !important; } /* Language switcher */ html[data-theme="light"] .main-header .language-switcher select { height: 40px; padding: 0 28px 0 14px !important; border-radius: 999px !important; background: #ffffff !important; color: #0b1220 !important; border: 1px solid #e6e2d8 !important; font-weight: 600; font-size: 14px; } /* Get Started (Comience): pill rosa SÓLIDO — igual que en dark mode :not(.header-btn-text) para excluir el Sign In */ html[data-theme="light"] .main-header .theme-btn:not(.header-btn-text), html[data-theme="light"] .sticky-header .theme-btn:not(.header-btn-text), html[data-theme="light"] .header-btn-main { height: 40px; padding: 0 22px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; background: #e6007e !important; background-color: #e6007e !important; color: #ffffff !important; border: 0 !important; font-weight: 700 !important; font-size: 14px !important; box-shadow: 0 6px 18px rgba(230, 0, 126, 0.25) !important; } html[data-theme="light"] .main-header .theme-btn:not(.header-btn-text):hover, html[data-theme="light"] .sticky-header .theme-btn:not(.header-btn-text):hover, html[data-theme="light"] .header-btn-main:hover { background: #b80064 !important; background-color: #b80064 !important; color: #ffffff !important; } html[data-theme="light"] .main-header .theme-btn:not(.header-btn-text) .btn-text, html[data-theme="light"] .header-btn-main .btn-text { color: #ffffff !important; } /* Sign In (Iniciar sesión): SOLO texto rosa — igual que dark mode */ html[data-theme="light"] .main-header .action-box .header-btn-text, html[data-theme="light"] .sticky-header .action-box .header-btn-text, html[data-theme="light"] .main-header .action-box .header-btn-text.theme-btn, html[data-theme="light"] .sticky-header .action-box .header-btn-text.theme-btn { height: auto !important; background: transparent !important; background-color: transparent !important; color: #e6007e !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; font-weight: 600 !important; font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; } html[data-theme="light"] .main-header .action-box .header-btn-text:hover, html[data-theme="light"] .main-header .action-box .header-btn-text.theme-btn:hover { background: transparent !important; color: #b80064 !important; } html[data-theme="light"] .header-btn-text .btn-text { color: inherit !important; }