/* ═══════════════════════════════════════════════════════════════ NOXORA — Premium Design System Cards + glows + Inter typography ═══════════════════════════════════════════════════════════════ */ :root { --bg: #06060b; --surface: #0c0c18; --surface2: #111122; --border: rgba(255,255,255,0.06); --border-glow: rgba(255,255,255,0.10); --text: #ececf0; --text2: #9090a8; --text3: #5a5a78; --primary: #6366f1; --primary-glow: rgba(99,102,241,0.25); --accent: #a855f7; --nf: #E50914; --nf-glow: rgba(229,9,20,0.35); --dn: #0063E5; --dn-glow: rgba(0,99,229,0.35); --hb: #8D00B1; --hb-glow: rgba(141,0,177,0.35); --am: #00A8E1; --am-glow: rgba(0,168,225,0.35); --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --radius: 18px; --radius-sm: 12px; --font: 'Inter', system-ui, -apple-system, sans-serif; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { font-size:16px; -webkit-font-smoothing:antialiased; } body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100vh; line-height:1.6; overflow-x:hidden; } /* ═══════════════════════════════════════════════════════════════ THEME: CLARO (data-theme="light" en ) ═══════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --bg: #f4f5fb; --surface: #ffffff; --surface2: #eef0f8; --border: rgba(15,23,42,0.10); --border-glow: rgba(15,23,42,0.18); --text: #0f172a; --text2: #4b5563; --text3: #8b93a7; --primary: #4f46e5; --primary-glow: rgba(79,70,229,0.18); --accent: #9333ea; } html[data-theme="light"] .glow { opacity:0.07; } html[data-theme="light"] .bg-grid { background-image: linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px); } /* Overrides de colores hardcodeados para tema claro */ html[data-theme="light"] .search-input { background:rgba(15,23,42,0.04); } html[data-theme="light"] .code-display { background:rgba(15,23,42,0.04); } html[data-theme="light"] .code-card { background:rgba(15,23,42,0.03); } html[data-theme="light"] .promo-banner { background:linear-gradient(160deg, rgba(79,70,229,0.05), rgba(147,51,234,0.04)); } html[data-theme="light"] .promo-banner-accounts { background:linear-gradient(160deg, rgba(147,51,234,0.07), rgba(79,70,229,0.04)); } html[data-theme="light"] .sale-card { background:linear-gradient(160deg, #ffffff, #f6f7fd); } html[data-theme="light"] .service-card { background:linear-gradient(160deg, #ffffff, #f6f7fd); } html[data-theme="light"] .info-card { background:linear-gradient(160deg, #ffffff, #f6f7fd); } /* Toggle de tema */ .theme-toggle { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text2); cursor:pointer; margin-left:auto; transition:all 0.25s cubic-bezier(0.4,0,0.2,1); } .theme-toggle:hover { border-color:var(--border-glow); color:var(--text); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,0.08); } .theme-toggle .icon-sun { display:none; } .theme-toggle .icon-moon { display:block; } html[data-theme="light"] .theme-toggle .icon-sun { display:block; } html[data-theme="light"] .theme-toggle .icon-moon { display:none; } /* ═══════════════════════════════════════════════════════════════ BACKGROUND EFFECTS ═══════════════════════════════════════════════════════════════ */ .bg-effects { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .bg-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse at 50% 0%, black 35%, transparent 75%); } .glow { position:absolute; border-radius:50%; filter:blur(130px); opacity:0.10; animation:drift 28s infinite ease-in-out; } .glow-1 { width:550px; height:550px; background:var(--primary); top:-120px; left:-120px; animation-delay:0s; } .glow-2 { width:420px; height:420px; background:var(--accent); top:45%; right:-100px; animation-delay:-9s; } .glow-3 { width:380px; height:380px; background:var(--nf); bottom:-100px; left:25%; animation-delay:-18s; } .glow-4 { width:320px; height:320px; background:var(--am); top:25%; right:25%; animation-delay:-5s; } @keyframes drift { 0%,100% { transform:translate(0,0) scale(1); } 25% { transform:translate(50px,-25px) scale(1.12); } 50% { transform:translate(-15px,35px) scale(0.92); } 75% { transform:translate(-35px,-15px) scale(1.08); } } /* ═══════════════════════════════════════════════════════════════ NAV ═══════════════════════════════════════════════════════════════ */ .top-nav { position:relative; z-index:10; display:flex; align-items:center; padding:1.4rem 1.5rem; max-width:1100px; margin:0 auto; } .nav-brand { display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:var(--text); font-weight:700; font-size:1.15rem; letter-spacing:-0.02em; } .nav-logo { display:block; height:52px; width:auto; transition:opacity 0.2s, transform 0.2s; } .nav-logo:hover { opacity:0.9; transform:scale(1.03); } /* Logo por tema: el claro se oculta por defecto y se muestra solo en tema claro */ .nav-logo-light { display:none; } html[data-theme="light"] .nav-logo-dark { display:none; } html[data-theme="light"] .nav-logo-light { display:block; } /* ═══════════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════════ */ .container { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 1.5rem 3rem; } /* ═══════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════ */ .hero { text-align:center; padding:1.5rem 0 2.5rem; } .hero-split { display:grid; grid-template-columns:1fr 1.05fr; gap:2.5rem; align-items:center; text-align:left; } .hero-text { min-width:0; } .hero-text .hero-title { margin-bottom:0.8rem; } .hero-text .hero-sub { margin:0 0 1.3rem; } .hero-visual { position:relative; filter:drop-shadow(0 22px 45px rgba(0,0,0,0.55)); transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); } .hero-visual:hover { transform:translateY(-3px); } .hero-img { display:block; width:100%; height:auto; } html[data-theme="light"] .hero-visual { filter:drop-shadow(0 22px 45px rgba(15,23,42,0.30)); } .hero-title { font-size:clamp(2rem, 5vw, 3.2rem); font-weight:900; letter-spacing:-0.03em; line-height:1.15; margin-bottom:0.8rem; } .hero-highlight { display:block; background:linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-sub { color:var(--text2); font-size:1.05rem; max-width:520px; margin:0 auto; } /* ═══════════════════════════════════════════════════════════════ SALE BADGE (pill bajo el hero) ═══════════════════════════════════════════════════════════════ */ .sale-badge { display:inline-flex; align-items:center; gap:0.7rem; margin-top:1.4rem; padding:0.55rem 1.1rem 0.55rem 0.6rem; border-radius:999px; background:linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.10)); border:1px solid rgba(99,102,241,0.30); color:var(--text2); font-size:0.85rem; font-weight:500; text-decoration:none; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); position:relative; box-shadow:0 0 0 rgba(99,102,241,0); } .sale-badge:hover { border-color:rgba(168,85,247,0.55); box-shadow:0 0 26px rgba(99,102,241,0.22); transform:translateY(-1px); } .sale-badge-icon { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--accent)); font-size:0.9rem; flex-shrink:0; } .sale-badge-text { display:inline-flex; align-items:center; gap:0.5rem; flex-wrap:wrap; } .sale-badge-text strong { color:var(--text); font-weight:700; } .sale-badge-sep { color:var(--text3); } .sale-badge svg { color:var(--primary); transition:transform 0.3s ease; } .sale-badge:hover svg { transform:translateY(3px); color:var(--accent); } /* ═══════════════════════════════════════════════════════════════ SERVICE CARDS ═══════════════════════════════════════════════════════════════ */ .services-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.25rem; margin-bottom:2.5rem; } .service-card { background:linear-gradient(160deg, var(--surface), var(--surface2)); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); cursor:pointer; position:relative; overflow:hidden; } .service-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; transition:height 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform:translateY(-4px); border-color:var(--border-glow); } .service-card:hover::before { height:6px; } .service-card.netflix::before { background:var(--nf); box-shadow:0 0 15px var(--nf-glow); } .service-card.disney::before { background:var(--dn); box-shadow:0 0 15px var(--dn-glow); } .service-card.hbo::before { background:var(--hb); box-shadow:0 0 15px var(--hb-glow); } .service-card.amazon::before { background:var(--am); box-shadow:0 0 15px var(--am-glow); } .service-card.selected { border-width:1.5px; transform:translateY(-3px); } .service-card.netflix.selected { border-color:rgba(229,9,20,0.5); box-shadow:0 0 35px var(--nf-glow), inset 0 0 30px rgba(229,9,20,0.04); } .service-card.disney.selected { border-color:rgba(0,99,229,0.5); box-shadow:0 0 35px var(--dn-glow), inset 0 0 30px rgba(0,99,229,0.04); } .service-card.hbo.selected { border-color:rgba(141,0,177,0.5); box-shadow:0 0 35px var(--hb-glow), inset 0 0 30px rgba(141,0,177,0.04); } .service-card.amazon.selected { border-color:rgba(0,168,225,0.5); box-shadow:0 0 35px var(--am-glow), inset 0 0 30px rgba(0,168,225,0.04); } .service-header { display:flex; align-items:center; gap:0.9rem; margin-bottom:1.2rem; } .service-icon { width:50px; height:50px; display:flex; align-items:center; justify-content:center; transition:transform 0.3s ease; } .service-card:hover .service-icon { transform:scale(1.08); } .platform-icon { width:44px; height:44px; object-fit:contain; } .service-title { font-size:1.25rem; font-weight:700; letter-spacing:-0.02em; } .service-description { color:var(--text2); font-size:0.9rem; margin-bottom:1rem; line-height:1.5; } .service-features { list-style:none; } .service-features li { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.6rem; color:var(--text2); font-size:0.88rem; } .service-features li svg { color:var(--success); flex-shrink:0; } /* ═══════════════════════════════════════════════════════════════ SEARCH ═══════════════════════════════════════════════════════════════ */ .search-box { background:linear-gradient(160deg, var(--surface), var(--surface2)); border:1px solid var(--border); border-radius:var(--radius); padding:2rem 2rem 1.75rem; margin-bottom:1.5rem; position:relative; overflow:hidden; } .search-box::after { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg, var(--nf), var(--dn), var(--hb), var(--am)); } .netflix-dot { background:var(--nf); box-shadow:0 0 8px var(--nf); } .disney-dot { background:var(--dn); box-shadow:0 0 8px var(--dn); } .hbo-dot { background:var(--hb); box-shadow:0 0 8px var(--hb); } .amazon-dot { background:var(--am); box-shadow:0 0 8px var(--am); } .search-form { display:flex; gap:0.75rem; } .input-wrapper { flex:1; position:relative; display:flex; align-items:center; } .input-icon { position:absolute; left:1rem; color:var(--text3); pointer-events:none; } .search-input { width:100%; padding:0.95rem 1rem 0.95rem 2.8rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:rgba(0,0,0,0.25); color:var(--text); font-family:var(--font); font-size:1rem; transition:all 0.2s; } .search-input::placeholder { color:var(--text3); } .search-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); } .search-btn { display:flex; align-items:center; gap:0.5rem; padding:0.95rem 1.6rem; border:none; border-radius:var(--radius-sm); background:linear-gradient(135deg, var(--primary), #7c3aed); color:white; font-family:var(--font); font-size:0.95rem; font-weight:600; cursor:pointer; transition:all 0.25s; white-space:nowrap; } .search-btn:hover { transform:translateY(-2px); box-shadow:0 10px 35px var(--primary-glow); } .search-btn:active { transform:translateY(0); } .search-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; } /* ═══════════════════════════════════════════════════════════════ RESULTS ═══════════════════════════════════════════════════════════════ */ .results-panel { background:linear-gradient(160deg, var(--surface), var(--surface2)); border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem 2rem; min-height:260px; margin-bottom:2rem; display:flex; align-items:center; justify-content:center; } .results-empty { text-align:center; } .results-empty svg { color:var(--text3); margin-bottom:1rem; } .empty-title { color:var(--text2); font-weight:600; font-size:1.05rem; margin-bottom:0.3rem; } .empty-desc { color:var(--text3); font-size:0.9rem; } .code-result { display:flex; flex-direction:column; align-items:center; gap:0.75rem; animation:slideUp 0.45s cubic-bezier(0.16,1,0.3,1); } @keyframes slideUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } .code-platform-badge { display:inline-block; padding:0.35rem 1rem; border-radius:2rem; font-size:0.78rem; font-weight:600; letter-spacing:0.04em; } .code-display { display:inline-flex; align-items:center; justify-content:center; gap:0.6rem; background:rgba(0,0,0,0.35); border-radius:var(--radius); padding:1.6rem 2.8rem; min-width:200px; border:1px solid var(--border); transition:border-color 0.3s; } .code-display.netflix { border-color:rgba(229,9,20,0.3); } .code-display.disney { border-color:rgba(0,99,229,0.3); } .code-display.hbo { border-color:rgba(141,0,177,0.3); } .code-display.amazon { border-color:rgba(0,168,225,0.3); } .code-digits { font-family:'SF Mono','Fira Code','Cascadia Code',monospace; font-size:3rem; font-weight:800; letter-spacing:0.3em; animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1); } @keyframes popIn { from { transform:scale(0.6); opacity:0; } to { transform:scale(1); opacity:1; } } .code-digits.netflix { color:var(--nf); text-shadow:0 0 25px var(--nf-glow); } .code-digits.disney { color:#4d94ff; text-shadow:0 0 25px var(--dn-glow); } .code-digits.hbo { color:#c44dff; text-shadow:0 0 25px var(--hb-glow); } .code-digits.amazon { color:#4dd4ff; text-shadow:0 0 25px var(--am-glow); } .copy-btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.8rem 2rem; border:none; border-radius:var(--radius-sm); background:var(--success); color:white; font-family:var(--font); font-size:0.95rem; font-weight:600; cursor:pointer; transition:all 0.2s; } .copy-btn:hover { background:#059669; transform:translateY(-2px); box-shadow:0 6px 20px rgba(16,185,129,0.35); } .code-meta-row { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; } .code-meta-col { display:flex; flex-direction:column; align-items:center; gap:0.4rem; margin-top:0.75rem; } .code-meta { display:flex; align-items:center; gap:0.4rem; font-size:0.85rem; color:var(--text2); } .code-meta.warn { color:var(--warning); } .code-meta.urgent { color:var(--danger); } .result-error { text-align:center; } .result-error .err-icon { font-size:2.5rem; margin-bottom:0.75rem; } .result-error h3 { margin-bottom:0.35rem; } .result-error p { color:var(--text2); font-size:0.95rem; } .result-loader { text-align:center; } .spinner { width:42px; height:42px; margin:0 auto 1rem; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin 0.7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .result-loader p { color:var(--text2); font-size:0.95rem; } /* ═══════════════════════════════════════════════════════════════ INFO ROW ═══════════════════════════════════════════════════════════════ */ .info-row { display:flex; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; } .info-card { flex:1; min-width:200px; display:flex; align-items:center; gap:0.75rem; background:linear-gradient(160deg, var(--surface), var(--surface2)); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.25rem; color:var(--text2); font-size:0.88rem; font-weight:500; } .info-card svg { color:var(--text3); flex-shrink:0; } /* ═══════════════════════════════════════════════════════════════ SALE SECTION (venta de cuentas) ═══════════════════════════════════════════════════════════════ */ .sale-section { margin-bottom:2.5rem; scroll-margin-top:1rem; } .sale-head { text-align:center; margin-bottom:1.8rem; } .sale-eyebrow { display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:0.6rem; } .sale-title { font-size:clamp(1.5rem, 3.5vw, 2.2rem); font-weight:900; letter-spacing:-0.02em; line-height:1.2; margin-bottom:0.6rem; } .sale-title-highlight { background:linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .sale-sub { color:var(--text2); font-size:0.95rem; max-width:560px; margin:0 auto; } .sale-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.25rem; } .sale-card { background:linear-gradient(160deg, var(--surface), var(--surface2)); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); } .sale-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; transition:height 0.3s ease, box-shadow 0.3s ease; } .sale-card:hover { transform:translateY(-4px); border-color:var(--border-glow); } .sale-card:hover::before { height:6px; } .sale-card-personal::before { background:var(--primary); box-shadow:0 0 15px var(--primary-glow); } .sale-card-mayorista::before { background:var(--accent); box-shadow:0 0 15px rgba(168,85,247,0.35); } .sale-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; } .sale-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, rgba(99,102,241,0.15), rgba(168,85,247,0.12)); color:var(--primary); } .sale-card-mayorista .sale-icon { color:var(--accent); } .sale-tag { font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--primary); background:rgba(99,102,241,0.12); border:1px solid rgba(99,102,241,0.25); padding:0.3rem 0.7rem; border-radius:999px; } .sale-tag-mayorista { color:var(--accent); background:rgba(168,85,247,0.12); border-color:rgba(168,85,247,0.28); } .sale-card-title { font-size:1.25rem; font-weight:800; letter-spacing:-0.01em; margin-bottom:0.4rem; } .sale-card-desc { color:var(--text2); font-size:0.88rem; line-height:1.55; margin-bottom:1.1rem; } .sale-price { display:flex; flex-direction:column; gap:0.45rem; padding:0.8rem 1rem; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:1.1rem; } .sale-price-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; } .sale-price-label { color:var(--text3); font-size:0.8rem; font-weight:600; } .sale-price-amount { font-size:0.95rem; font-weight:700; color:var(--success); letter-spacing:-0.01em; } .sale-price-combo { color:var(--accent); } .sale-card-mayorista .sale-price-amount { color:var(--accent); } .sale-card-mayorista .sale-price-combo { color:var(--success); } .sale-feats { list-style:none; margin:0 0 1.4rem; display:flex; flex-direction:column; gap:0.55rem; } .sale-feats li { display:flex; align-items:center; gap:0.6rem; color:var(--text2); font-size:0.86rem; } .sale-check { display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; flex-shrink:0; background:rgba(16,185,129,0.15); color:var(--success); font-size:0.62rem; font-style:normal; font-weight:800; } .sale-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; margin-top:auto; padding:0.8rem 1.2rem; border-radius:var(--radius-sm); background:linear-gradient(135deg, var(--primary), #4f46e5); color:white; font-size:0.9rem; font-weight:700; text-decoration:none; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:0 0 0 rgba(99,102,241,0); } .sale-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(99,102,241,0.35); } .sale-btn svg { transition:transform 0.3s ease; } .sale-btn:hover svg { transform:translateX(4px); } .sale-btn-mayorista { background:linear-gradient(135deg, var(--accent), #9333ea); } .sale-btn-mayorista:hover { box-shadow:0 8px 28px rgba(168,85,247,0.35); } .promo-banner-accounts { background:linear-gradient(160deg, rgba(168,85,247,0.08), rgba(99,102,241,0.05)); border-color:rgba(168,85,247,0.18); border-left-color:var(--accent); } .promo-banner-accounts:hover { border-color:rgba(168,85,247,0.4); border-left-color:var(--accent); box-shadow:0 0 28px rgba(168,85,247,0.12); } /* ═══════════════════════════════════════════════════════════════ PROMO BANNER ═══════════════════════════════════════════════════════════════ */ .promo-banner { display:flex; align-items:center; gap:0.9rem; background:linear-gradient(160deg, rgba(99,102,241,0.06), rgba(168,85,247,0.04)); border:1px solid rgba(99,102,241,0.12); border-left:3px solid var(--primary); border-radius:var(--radius-sm); padding:0.9rem 1.2rem; margin-bottom:1.5rem; text-decoration:none; transition:all 0.35s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; } .promo-banner::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(99,102,241,0.04), transparent); transform:translateX(-100%); transition:transform 0.6s ease; } .promo-banner:hover::before { transform:translateX(100%); } .promo-banner:hover { border-color:rgba(99,102,241,0.35); border-left-color:var(--accent); box-shadow:0 0 28px rgba(99,102,241,0.08); transform:translateY(-1px); } .promo-icon { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg, var(--primary), var(--accent)); color:white; flex-shrink:0; transition:transform 0.3s ease, box-shadow 0.3s ease; } .promo-banner:hover .promo-icon { transform:scale(1.08); box-shadow:0 4px 18px rgba(99,102,241,0.35); } .promo-text { flex:1; font-size:0.82rem; color:var(--text2); line-height:1.5; min-width:0; } .promo-text strong { color:var(--text); font-weight:600; } .promo-separator { color:var(--text3); margin:0 0.35rem; } .promo-cta { display:flex; align-items:center; gap:0.35rem; font-size:0.78rem; font-weight:600; color:var(--primary); white-space:nowrap; transition:color 0.25s, gap 0.25s; } .promo-banner:hover .promo-cta { color:var(--accent); gap:0.55rem; } @media (max-width:768px) { .promo-banner { flex-wrap:wrap; gap:0.6rem; padding:0.8rem 1rem; } .promo-text { font-size:0.76rem; } .promo-cta { margin-left:auto; } } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .footer { text-align:center; padding:1.5rem 0 0; color:var(--text3); font-size:0.8rem; } .footer-credit { color:var(--accent); font-weight:600; text-decoration:none; position:relative; transition:color 0.2s; } .footer-credit::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--accent); transition:width 0.25s ease; } .footer-credit:hover { color:#c084fc; } .footer-credit:hover::after { width:100%; } /* ═══════════════════════════════════════════════════════════════ CODES GRID (multi-plataforma) ═══════════════════════════════════════════════════════════════ */ .codes-grid { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; width: 100%; animation: slideUp 0.45s cubic-bezier(0.16,1,0.3,1); } .codes-grid .code-card { width: 100%; max-width: 420px; } .code-card { background: linear-gradient(160deg, var(--surface), var(--surface2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; } .code-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; transition: height 0.3s ease, box-shadow 0.3s ease; } .code-card:hover { transform: translateY(-3px); border-color: var(--border-glow); } .code-card:hover::before { height: 6px; } .code-card.netflix::before { background: var(--nf); box-shadow: 0 0 15px var(--nf-glow); } .code-card.disney::before { background: var(--dn); box-shadow: 0 0 15px var(--dn-glow); } .code-card.hbo::before { background: var(--hb); box-shadow: 0 0 15px var(--hb-glow); } .code-card.amazon::before { background: var(--am); box-shadow: 0 0 15px var(--am-glow); } .code-card:hover.netflix { border-color: rgba(229,9,20,0.35); box-shadow: 0 0 25px var(--nf-glow); } .code-card:hover.disney { border-color: rgba(0,99,229,0.35); box-shadow: 0 0 25px var(--dn-glow); } .code-card:hover.hbo { border-color: rgba(141,0,177,0.35); box-shadow: 0 0 25px var(--hb-glow); } .code-card:hover.amazon { border-color: rgba(0,168,225,0.35); box-shadow: 0 0 25px var(--am-glow); } .code-card-platform { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text2); letter-spacing: 0.02em; } .code-card-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px currentColor; } .code-card-digits { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 2.5rem; font-weight: 800; letter-spacing: 0.25em; animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1); } .code-card-digits.netflix { color: var(--nf); text-shadow: 0 0 20px var(--nf-glow); } .code-card-digits.disney { color: #4d94ff; text-shadow: 0 0 20px var(--dn-glow); } .code-card-digits.hbo { color: #c44dff; text-shadow: 0 0 20px var(--hb-glow); } .code-card-digits.amazon { color: #4dd4ff; text-shadow: 0 0 20px var(--am-glow); } .code-card-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; } .code-card-meta .code-meta { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--text2); } .code-meta-icon { display: flex; opacity: 0.6; } .code-card .copy-btn { margin-top: 0.25rem; } @media (max-width: 640px) { .codes-grid .code-card { max-width: 100%; } .code-card-digits { font-size: 2rem; letter-spacing: 0.2em; } } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width:1024px) { .services-grid { grid-template-columns:repeat(2, 1fr); } } @media (max-width:900px) { .hero-split { grid-template-columns:1fr; gap:1.8rem; text-align:center; } .hero-text .hero-sub { margin:0 auto 1.3rem; } .hero-visual { max-width:560px; margin:0 auto; } } @media (max-width:768px) { .container { padding:0 1rem 2rem; } .hero { padding:1rem 0 2rem; } .hero-title { font-size:1.8rem; } .services-grid { grid-template-columns:1fr; gap:1rem; } .service-card { padding:1.5rem; } .sale-grid { grid-template-columns:1fr; gap:1rem; } .sale-card { padding:1.5rem; } .search-form { flex-direction:column; } .search-btn { justify-content:center; } .code-digits { font-size:2.2rem; letter-spacing:0.2em; } .code-display { padding:1.2rem 1.8rem; } .results-panel { padding:1.5rem 1rem; } .info-row { flex-direction:column; } .top-nav { padding:1rem; } .sale-badge { flex-direction:column; align-items:center; gap:0.5rem; max-width:100%; padding:0.8rem 1rem; text-align:center; } .sale-badge-text { justify-content:center; } .sale-badge svg { display:none; } } @media (max-width:480px) { .hero-title { font-size:1.5rem; } .code-digits { font-size:1.8rem; letter-spacing:0.15em; } .search-input { font-size:16px; } .service-icon { width:42px; height:42px; } .platform-icon { width:36px; height:36px; } }