/* ========================================================== Xpertech Pro Theme (Dark + Light) + Animations - Uses: - Compatible with existing template (Bootstrap + styles.css) ========================================================== */ :root{ --radius-lg: 22px; --radius-md: 16px; --radius-sm: 12px; --blur: 14px; --ease: cubic-bezier(.2,.9,.2,1); --speed: 240ms; /* defaults (dark) */ --page-bg: #070A13; --page-bg2: #0b1020; --text: #E7EAF0; --muted: #A8B0C2; --card: rgba(255,255,255,.06); --card2: rgba(255,255,255,.04); --border: rgba(255,255,255,.10); --shadow: 0 18px 60px rgba(0,0,0,.45); --accent1: #5B8CFF; --accent2: #B36BFF; --success: #2BD576; --danger: #FF4D5E; --chip: rgba(91,140,255,.16); --chipText: rgba(231,234,240,.92); --btnText: #0b1020; } html[data-theme="light"]{ --page-bg: #f6f7fb; --page-bg2: #ffffff; --text: #0b1220; --muted: #55607a; --card: rgba(255,255,255,.78); --card2: rgba(255,255,255,.58); --border: rgba(15,23,42,.10); --shadow: 0 18px 50px rgba(15,23,42,.10); --chip: rgba(91,140,255,.12); --chipText: rgba(15,23,42,.85); --btnText: #ffffff; } /* ---- Page background ---- */ body{ background: radial-gradient(900px 520px at 12% 18%, rgba(91,140,255,.26), transparent 55%), radial-gradient(900px 520px at 88% 20%, rgba(179,107,255,.22), transparent 55%), radial-gradient(900px 520px at 50% 92%, rgba(43,213,118,.18), transparent 60%), linear-gradient(180deg, var(--page-bg), var(--page-bg2)) !important; color: var(--text) !important; } html[data-theme="light"] body{ background: radial-gradient(900px 520px at 12% 18%, rgba(91,140,255,.16), transparent 55%), radial-gradient(900px 520px at 88% 20%, rgba(179,107,255,.12), transparent 55%), radial-gradient(900px 520px at 50% 92%, rgba(43,213,118,.10), transparent 60%), linear-gradient(180deg, var(--page-bg), var(--page-bg2)) !important; } /* ---- Typography ---- */ h1,h2,h3,h4,h5,h6{ color: var(--text) !important; letter-spacing: .2px; } a{ color: var(--accent1); } a:hover{ color: var(--accent2); } /* Normalize template sections */ .about-section, .features-section, .testimonials-section, .team-section, .pricing-section-pago, .footer{ background: transparent !important; } /* ---- Header (sticky glass) ---- */ .header{ position: sticky; top: 0; z-index: 999; backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); background: rgba(6,10,18,.55); border-bottom: 1px solid rgba(255,255,255,.06); transition: background var(--speed) var(--ease), box-shadow var(--speed) var(--ease), padding var(--speed) var(--ease); } html[data-theme="light"] .header{ background: rgba(255,255,255,.65); border-bottom: 1px solid rgba(15,23,42,.10); } .header.header-scrolled{ box-shadow: 0 10px 40px rgba(0,0,0,.25); } html[data-theme="light"] .header.header-scrolled{ box-shadow: 0 12px 40px rgba(15,23,42,.12); } .header .main-nav .nav-link{ color: rgba(231,234,240,.92) !important; border-radius: 12px; padding: .55rem .8rem !important; transition: background var(--speed) var(--ease), transform var(--speed) var(--ease); } html[data-theme="light"] .header .main-nav .nav-link{ color: rgba(15,23,42,.86) !important; } .header .main-nav .nav-link:hover{ background: rgba(91,140,255,.14); transform: translateY(-1px); } .header .main-nav .nav-link.active{ background: rgba(91,140,255,.18); box-shadow: inset 0 0 0 1px rgba(91,140,255,.25); } /* Theme toggle button */ .theme-toggle{ display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 44px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); cursor: pointer; transition: transform var(--speed) var(--ease), background var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .theme-toggle:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,.25); } html[data-theme="light"] .theme-toggle:hover{ box-shadow: 0 12px 26px rgba(15,23,42,.12); } .theme-toggle:focus{ outline: none; box-shadow: 0 0 0 3px rgba(91,140,255,.22); } /* ---- Buttons ---- */ .btn-cta, .btn-primary{ background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 12px 28px rgba(34,197,94,.35); border: 0 !important; box-shadow: 0 18px 40px rgba(91,140,255,.22); border-radius: 16px !important; } .btn-cta:hover, .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 22px 46px rgba(91,140,255,.30); } /* ---- Cards (global) ---- */ .item-inner, .quote, .price-card, .x-card{ background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease); } .item-inner:hover, .price-card:hover, .x-card:hover{ transform: translateY(-2px); box-shadow: 0 22px 70px rgba(0,0,0,.50); } html[data-theme="light"] .item-inner:hover, html[data-theme="light"] .price-card:hover, html[data-theme="light"] .x-card:hover{ box-shadow: 0 22px 70px rgba(15,23,42,.14); } .about-section .item-inner{ padding: 10px 22px !important; } .about-section .item-title{ color: var(--accent1) !important; } .about-section .item-desc{ color: var(--muted) !important; } .testimonials-section .quote p{ color: rgba(231,234,240,.90) !important; } html[data-theme="light"] .testimonials-section .quote p{ color: rgba(15,23,42,.82) !important; } .feature-nav .nav-link{ background: var(--card2) !important; border: 1px solid var(--border) !important; color: rgba(231,234,240,.92) !important; border-radius: 16px !important; transition: transform var(--speed) var(--ease), background var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } html[data-theme="light"] .feature-nav .nav-link{ color: rgba(15,23,42,.86) !important; } .feature-nav .nav-link:hover{ transform: translateY(-1px); background: rgba(91,140,255,.12) !important; } .feature-nav .nav-link.active{ background: rgba(91,140,255,.18) !important; box-shadow: inset 0 0 0 1px rgba(91,140,255,.28); } .feature-content img{ border-radius: var(--radius-lg) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow); } /* ---- Pricing ---- */ .pricing-modern .intro{ color: var(--muted) !important; } .price-card .desc{ color: var(--muted) !important; } .price-card .price-chip{ background: var(--chip) !important; color: var(--chipText) !important; border: 1px solid rgba(91,140,255,.18) !important; border-radius: 999px !important; } .btn-modern{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: rgba(231,234,240,.92) !important; text-decoration: none !important; transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease); } html[data-theme="light"] .btn-modern{ background: rgba(15,23,42,.04); color: rgba(15,23,42,.86) !important; } .btn-modern:hover{ transform: translateY(-1px); box-shadow: 0 18px 45px rgba(0,0,0,.30); } .btn-modern.primary{ background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 12px 28px rgba(34,197,94,.35); !important; border: 0 !important; color: var(--btnText) !important; } /* ---- Countries ---- */ .x-card--countries{ padding: 26px 18px; margin: 28px auto; } .x-card__head{ text-align: center; padding: 10px 12px 18px; } .x-title{ margin: 0; font-size: 34px; letter-spacing: .2px; } .x-subtitle{ margin: 8px auto 0; max-width: 760px; color: var(--muted) !important; } .x-divider{ height: 1px; width: min(860px, 92%); margin: 18px auto 12px; background: linear-gradient(90deg, transparent, rgba(91,140,255,.30), transparent); } .x-countries{ display: grid; grid-template-columns: repeat(7, minmax(90px, 1fr)); gap: 12px; width: min(980px, 98%); margin: 14px auto 4px; } @media (max-width: 992px){ .x-countries{ grid-template-columns: repeat(5, minmax(90px, 1fr)); } } @media (max-width: 640px){ .x-countries{ grid-template-columns: repeat(3, minmax(90px, 1fr)); } .x-title{ font-size: 28px; } } .bandera_pais{ background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 18px; padding: 12px 10px; text-align: center; transition: transform var(--speed) var(--ease), background var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } html[data-theme="light"] .bandera_pais{ background: rgba(15,23,42,.03); } .bandera_pais img{ display: block; margin: 0 auto 8px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.22)); } .bandera_pais p{ margin: 0; font-size: 12px; color: var(--muted) !important; } .bandera_pais:hover{ transform: translateY(-2px); background: rgba(91,140,255,.08); box-shadow: 0 16px 35px rgba(0,0,0,.28); } html[data-theme="light"] .bandera_pais:hover{ box-shadow: 0 16px 35px rgba(15,23,42,.12); } /* Contact icons */ #contact img{ border-radius: 16px; transition: transform var(--speed) var(--ease), filter var(--speed) var(--ease); } #contact img:hover{ transform: translateY(-2px); filter: drop-shadow(0 18px 24px rgba(0,0,0,.25)); } /* Footer */ .footer{ color: var(--muted) !important; border-top: 1px solid rgba(255,255,255,.06); } html[data-theme="light"] .footer{ border-top: 1px solid rgba(15,23,42,.08); } /* ---- Reveal animation ---- */ .reveal{ opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); transition: opacity 520ms var(--ease), transform 520ms var(--ease), filter 620ms var(--ease); will-change: transform, opacity, filter; } .reveal.is-visible, .reveal.is-in{ opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } *{ scroll-behavior: auto !important; } } /* ========================== THEME TOKENS (LIGHT/DARK) ========================== */ :root{ --bg: #f7f8fb; --bg2: #eef2ff; --text: #0b1220; --muted: rgba(11,18,32,.65); --card: rgba(255,255,255,.72); --card2: rgba(255,255,255,.55); --border: rgba(15,23,42,.10); --shadow: 0 12px 40px rgba(2,6,23,.10); --accent: #4f7cff; --accent2:#9b5cff; --glassBlur: 14px; } /* cuando el body tenga theme-dark */ body.theme-dark{ --bg: #070a13; --bg2:#0a1022; --text: #eaf0ff; --muted: rgba(234,240,255,.70); --card: rgba(255,255,255,.06); --card2: rgba(255,255,255,.04); --border: rgba(148,163,184,.18); --shadow: 0 18px 60px rgba(0,0,0,.45); --accent: #4f7cff; --accent2:#9b5cff; --glassBlur: 16px; } /* aplica tokens globales (no rompas bootstrap) */ body{ background: radial-gradient(1200px 600px at 20% 20%, rgba(79,124,255,.12), transparent 60%), radial-gradient(900px 500px at 80% 75%, rgba(155,92,255,.10), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg2)); color: var(--text); } /* ========================== NAVBAR / HEADER (FIX) ========================== */ .header{ background: rgba(255,255,255,.75) !important; backdrop-filter: blur(var(--glassBlur)); -webkit-backdrop-filter: blur(var(--glassBlur)); border-bottom: 1px solid var(--border); transition: .2s ease; } body.theme-dark .header{ background: rgba(10,14,25,.70) !important; } .header.header-scrolled{ box-shadow: 0 10px 30px rgba(2,6,23,.12); } body.theme-dark .header.header-scrolled{ box-shadow: 0 16px 50px rgba(0,0,0,.45); } /* links del nav */ .header .nav-link{ color: var(--text) !important; opacity: .88; } .header .nav-link:hover{ opacity: 1; } .header .nav-link.active{ opacity: 1; box-shadow: inset 0 -2px 0 rgba(79,124,255,.55); border-radius: 10px; } /* botón comprar */ .header .btns.btn{ border-radius: 14px; box-shadow: 0 12px 30px rgba(244,63,63,.22); } /* ========================== CARDS / SECCIONES (CONTRASTE) ========================== */ .section-title, .x-title, h1,h2,h3,h4,h5{ color: var(--text) !important; } .intro, .x-subtitle, p{ color: var(--muted) !important; } /* tarjetas generales + las tuyas */ .item-inner, .quote, .price-card, .x-card, .member-content, .modal-content{ background: var(--card) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow); border-radius: 20px; padding: 15px; } /* países: que no se vea vacío */ .x-card--countries{ padding: 22px 22px 10px; } .x-divider{ height: 1px; background: linear-gradient(90deg, transparent, rgba(79,124,255,.35), transparent); margin: 14px 0 18px; } .x-countries{ display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 12px; align-items: stretch; } @media (max-width: 992px){ .x-countries{ grid-template-columns: repeat(3, minmax(100px, 1fr)); } } .bandera_pais{ background: var(--card2); border: 1px solid var(--border); border-radius: 16px; padding: 12px 10px; text-align: center; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .bandera_pais img{ filter: none; } .bandera_pais p{ margin: 8px 0 0; font-size: 13px; color: var(--text) !important; opacity: .9; } .bandera_pais:hover{ transform: translateY(-3px); border-color: rgba(79,124,255,.45); box-shadow: 0 18px 50px rgba(2,6,23,.18); } body.theme-dark .bandera_pais:hover{ box-shadow: 0 18px 50px rgba(0,0,0,.55); } /* ========================== REVEAL ANIMATIONS SAFE ========================== */ .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; will-change: opacity, transform; } .reveal.is-inview{ opacity: 1; transform: translateY(0); } /* fallback por si el JS no corre */ .no-js .reveal{ opacity: 1 !important; transform: none !important; } /* reduce motion */ @media (prefers-reduced-motion: reduce){ .reveal{ transition:none; opacity:1; transform:none; } *{ scroll-behavior:auto !important; } } /* ========================== TOGGLE BUTTON (☀️/🌙) ========================== */ .theme-toggle{ width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--border); background: var(--card2); color: var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; } .theme-toggle:hover{ transform: translateY(-1px); border-color: rgba(79,124,255,.45); } .theme-toggle:active{ transform: translateY(0); } .section-hero{ position: relative; isolation: isolate; /* clave para iOS/Chrome */ overflow: hidden; } .section-hero::before{ content:""; position:absolute; inset:0; background: var(--hero-bg); /* imagen/gradiente */ filter: blur(14px); transform: scale(1.08); /* evita bordes raros del blur */ z-index: 0; opacity: .9; } .section-hero > *{ position: relative; z-index: 1; /* contenido NO se desenfoca */ } /* ========================================= SALES STRIP (RESULTS) + HERO CTAs ========================================= */ .results-strip .result-card{ background: var(--card) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); } .results-strip .result-card h3{ color: var(--text) !important; } .results-strip .result-card p{ color: var(--muted) !important; } .btn-cta-secondary{ border: 1px solid var(--border) !important; background: rgba(255,255,255,.04) !important; color: rgba(231,234,240,.92) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); } html[data-theme="light"] .btn-cta-secondary{ background: rgba(15,23,42,.04) !important; color: rgba(15,23,42,.86) !important; } /* ========================= FIX: Bootstrap carousel-fade “double text” ========================= */ #hero-carousel.carousel-fade .carousel-inner{ position: relative; } #hero-carousel.carousel-fade .carousel-item{ position: absolute; inset: 0; width: 100%; display: block; /* evita comportamientos raros por flex/grid */ opacity: 0; transition: opacity .45s ease-in-out; /* ajusta duración */ transform: none !important; /* SOLO fade (sin slide) */ will-change: opacity; pointer-events: none; /* el slide que “no está” no se cliquea */ } #hero-carousel.carousel-fade .carousel-item.active{ position: relative; /* mantiene altura del carrusel */ opacity: 1; pointer-events: auto; } /* Estados durante la transición (Bootstrap 4) */ #hero-carousel.carousel-fade .carousel-item-next.carousel-item-left, #hero-carousel.carousel-fade .carousel-item-prev.carousel-item-right, #hero-carousel.carousel-fade .carousel-item.active.carousel-item-left, #hero-carousel.carousel-fade .carousel-item.active.carousel-item-right{ transform: none !important; } #hero-carousel.carousel-fade .carousel-item-next, #hero-carousel.carousel-fade .carousel-item-prev{ opacity: 1; /* el “incoming” aparece */ } #hero-carousel.carousel-fade .carousel-item.active.carousel-item-left, #hero-carousel.carousel-fade .carousel-item.active.carousel-item-right{ opacity: 0; /* el “outgoing” se apaga */ } #hero{ min-height: 520px; } @media (max-width: 991px){ #hero{ min-height: 520px; } } /* ====================== PAYMENTS STRIPE STYLE ====================== */ .payments-section { padding: 100px 0; background: radial-gradient(circle at 50% 30%, rgba(99,102,241,.08), transparent 60%), linear-gradient(180deg, #050816 0%, #070B1D 100%); } .payments-subtitle { opacity: .75; margin-bottom: 40px; } .payments-methods { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; } .payment-card { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 110px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(148,163,184,.15); backdrop-filter: blur(8px); transition: all .3s ease; } .payment-card i { font-size: 28px; margin-bottom: 8px; color: #cbd5e1; } .payment-card span { font-size: 14px; opacity: .8; } .payment-card:hover { transform: translateY(-5px); border-color: rgba(99,102,241,.6); box-shadow: 0 20px 40px rgba(0,0,0,.4); } .payment-card.stripe i { color: #6366f1; } .payments-note { margin-top: 35px; font-size: 13px; opacity: .6; } /* ====================== PAYMENTS (LOGOS PRO) ====================== */ .payments-section{ padding: 85px 0; position: relative; } .payments-subtitle{ opacity: .78; margin: 10px auto 26px; max-width: 760px; } .payments-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 840px; margin: 0 auto; } .pay-card{ height: 74px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid rgba(148,163,184,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.25); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .pay-card:hover{ transform: translateY(-3px); border-color: rgba(99,102,241,.45); box-shadow: 0 22px 65px rgba(0,0,0,.33); } .pay-card img{ max-height: 26px; max-width: 120px; width: auto; height: auto; filter: none; /* logos a color */ } .payments-note{ margin-top: 18px; font-size: 13px; opacity: .65; } @media (max-width: 991px){ .payments-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px){ .payments-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .pay-card{ height: 68px; } } .pay-card img { transition: transform .2s ease; } .pay-card:hover img { transform: scale(1.06); } .pricing-card { background: #0f172a; border-radius: 16px; padding: 30px; border: 1px solid rgba(34,197,94,.15); transition: all .3s ease; } .pricing-card:hover { transform: translateY(-6px); border-color: rgba(34,197,94,.35); } .pricing-card.recommended { border: 2px solid #22C55E; box-shadow: 0 20px 50px rgba(34,197,94,.15); } .pricing-card .price { font-size: 34px; font-weight: 800; color: #22C55E; } .pricing-card .btn-main { background: linear-gradient(135deg, #16a34a, #22c55e); border-radius: 999px; font-weight: 700; }