/* ============================================ PERFORMANCE OPTIMIZATIONS ============================================ */ * { -webkit-tap-highlight-color: transparent; } /* Reduce motion for low-end devices */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Content visibility — solo secciones SIN canvas de particles */ #cabletv, #velocidad, #comentarios { content-visibility: auto; contain-intrinsic-size: 0 600px; } /* #iptv y #contacto tienen sectionParticles — NO usar content-visibility */ /* ── PERFORMANCE MÓVIL (≤950px): eliminar efectos caros en GPU ── */ @media (max-width: 950px) { /* Todos los backdrop-filter: ninguno en mobile */ *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Deshabilitar partículas de cursor en mobile */ .cursor-particle { display: none !important; } #cr, #cd, #ct { display: none !important; } /* Orbes decorativos: sin blur ni animación */ .srv-orb, .srv-orb-1, .srv-orb-2, [class*="orb"] { filter: none !important; animation: none !important; } /* Grain fijo — evitar repaint continuo */ #grain { animation: none !important; } /* Hstreak: deshabilitados */ .hstreak { display: none !important; } /* Orbes animados en secciones: detener animaciones */ .sd > div[style*="animation"], .sd > div[style*="orbFloat"], #contacto > div[style*="animation"], .ctsec > div[style*="animation"], .srv-section > div[style*="animation"] { animation: none !important; } /* Reducir transiciones a lo esencial */ .svc-card, .svr-card, .plc, .cc, .hrsbox { transition: border-color 0.15s !important; } /* box-shadow pesados: simplificar en mobile */ .svc-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } } /* ── PERFORMANCE PC MEDIA-BAJA (4-6GB RAM detectado por JS): La clase .perf-low se agrega al por JS cuando IS_MID_LOW o IS_MID ── */ html.perf-mid-low .srv-orb, html.perf-mid-low .srv-orb-1, html.perf-mid-low .srv-orb-2 { animation: none !important; filter: none !important; } html.perf-mid-low .hstreak { animation-duration: 12s !important; } html.perf-mid-low .ad-panel-head::before { animation: none !important; } html.perf-mid-low .svr-ticker { animation-duration: 50s !important; } /* IS_LOW_END en desktop: máxima reducción */ html.perf-low { --transition-speed: 0.1s; } html.perf-low *, html.perf-low *::before, html.perf-low *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.perf-low .srv-orb, html.perf-low .srv-orb-1, html.perf-low .srv-orb-2, html.perf-low .hstreak, html.perf-low .ad-panel-head::before, html.perf-low .svr-ticker { animation: none !important; } html.perf-low #grain { display: none !important; } /* ── GPU compositing solo para el hero (rentable) ── */ .hlstage, .or1, .or2 { will-change: transform; } /* hstreak: no will-change (hay 5, desperdiciaría 5 capas GPU) */ /* ============================================ 1. VARIABLES GLOBALES (COLORES Y FUENTES) ============================================ */ :root { --ink: #04090f; --ink2: #070e1a; --ink3: #0b1525; --ink4: #01050c; --pearl: #f8fafc; --pearl2: #f0f5f9; --ivory: #fffdf8; --jade: #006d77; --jade2: hsl(186, 100%, 35%); --jadeglow: rgba(0, 163, 181, 0.4); --gold: #c9a84c; --gold2: #e8c76a; --goldd: #a0762e; --sky: #a8d8ea; --sky2: #5ba4c7; /* Verde valle — acento sutil, minimalista */ --valle: #7fb069; --valle2: #57944a; --valleglow: rgba(127, 176, 105, 0.35); --tdark: #1a2332; --tmid: #4a6480; --tlight: #8aafc8; --twhite: #e8f2fa; --tpearl: #c8d8e8; --fs-body-sm: 0.82rem; } /* ============================================ 2. RESET GLOBAL ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ============================================ 3. FONDO ANIMADO DE PARTÍCULAS ============================================ */ #bgc { position: absolute; /* ← solo cubre el hero */ inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* ─── WEBGL CANVAS SMOKE (HERO ONLY) ─────────────────── */ #heroSmokeCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: all; background: transparent !important; /* receives mouse for fluid sim */ } /* Humo del hero SOLO en PC/laptop: fuera en celulares y tablets */ @media (pointer: coarse), (max-width: 1023px) { #heroSmokeCanvas { display: none !important; } } /* overlay para oscurecer el humo sin taparlo */ #bg-overlay { position: fixed; inset: 0; z-index: 1; pointer-events: none; display: none; /* Opcional: lo ocultamos para que no estorbe */ } /* ─── NOISE GRAIN ────────────────────────────────────── */ #grain { position: fixed; inset: 0; z-index: 2; opacity: 0.035; pointer-events: none; background-size: 200px 200px; } .sectionParticles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /* Detrás del contenido */ pointer-events: none; /* No interfiere con clicks */ opacity: 1 !important; /* Forzar opacidad total, el JS controla el color */ mix-blend-mode: normal; /* Mejor compatibilidad que screen/multiply */ } /* Asegurar que el padre tenga position relative */ .sd, .sl, footer, #servicios, #planes, #iptv { position: relative; overflow: hidden; /* Importante para que las partículas no se salgan */ } .sd { position: relative; overflow: hidden; } .plhdr, .plpane, .iptinn, .finn { position: relative; z-index: 10; } .hero-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; /* CAMBIA ESTO: */ background: transparent !important; } /* ============================================ 📄 4. BASE HTML Y BODY ============================================ */ html { scroll-behavior: smooth; } body { font-family: "Playfair Display", serif; overflow-x: hidden; cursor: none; background: var(--ink); color: var(--twhite); } /* ============================================ 🖱 5. CURSOR PERSONALIZADO (3 CAPAS) ============================================ */ /* Cursor principal: anillo que "disuelve" */ #cr { position: fixed; pointer-events: none; z-index: 999999; width: 85px; height: 85px; border: 2.8px solid var(--jade2); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, background 0.3s, opacity 0.2s; mix-blend-mode: normal; box-shadow: 0 0 0 0 var(--jade2), 0 0 12px rgba(0, 163, 181, 0.5), inset 0 0 8px rgba(0, 163, 181, 0.2); will-change: transform, width, height; background: rgba(0, 163, 181, 0.16); } /* Punto central dorado con rastro */ #cd { position: fixed; pointer-events: none; z-index: 999999; width: 12px; height: 12px; background: var(--gold2); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 14px var(--gold2), 0 0 28px rgba(232, 199, 106, 0.5); transition: transform 0.08s, opacity 0.2s; } /* Estela / trail */ #ct { position: fixed; pointer-events: none; z-index: 999998; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient( circle, rgba(0, 163, 181, 0.3) 0%, transparent 70% ); transform: translate(-50%, -50%); transition: left 0.12s ease, top 0.12s ease; mix-blend-mode: screen; } /* ─── WEBGL CANVAS (FONDO HUMO) ─────────────────────── */ #bgc { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* navigation/clicks pass through */ } /* Hover: cursor explota */ body.hov #cr { width: 80px; height: 80px; border-color: var(--gold); background: rgba(201, 168, 76, 0.06); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15), 0 0 30px rgba(201, 168, 76, 0.45), inset 0 0 20px rgba(201, 168, 76, 0.15); mix-blend-mode: difference; } body.hov #cd { transform: translate(-50%, -50%) scale(1.8); background: var(--gold); box-shadow: 0 0 20px var(--gold); } /* Click: efecto ripple */ body.clicking #cr { width: 28px; height: 28px; border-color: var(--jade2); opacity: 0.7; } /* Partículas del cursor — se crean por JS */ .cursor-particle { position: fixed; pointer-events: none; z-index: 999997; border-radius: 50%; animation: cursorParticleFade 0.8s ease-out forwards; } @keyframes cursorParticleFade { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0) translateY(-30px); } } /* ============================================ 🧭 6. BARRA DE NAVEGACIÓN (NAVBAR) ============================================ */ nav { position: fixed; top: 0; left: 0; width: 100%; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.5rem, 3vw, 3rem); background: transparent; backdrop-filter: none; border-bottom: 1px solid transparent; transition: background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease; z-index: 1000; } nav.scrolled { background: rgba(4, 9, 15, 0.96); backdrop-filter: blur(24px) saturate(160%); border-bottom: 1px solid rgba(0, 163, 181, 0.1); box-shadow: 0 2px 40px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.04); } nav.lm { background: rgba(248, 250, 252, 0.94); border-bottom: 1px solid rgba(0, 109, 119, 0.1); box-shadow: 0 2px 30px rgba(0, 0, 0, 0.06); } /* Logo del navbar */ .nlogo { display: flex; align-items: center; gap: 16px; text-decoration: none; flex-shrink: 0; } .nlogo img { height: 35px; filter: drop-shadow(0 0 8px var(--jadeglow)); transition: filter 0.3s; } nav.lm .nlogo img { filter: drop-shadow(0 2px 8px rgba(0, 109, 119, 0.3)); } /* Texto del logo */ .nlw { display: flex; flex-direction: column; } .nlw .br { font-family: "Cinzel", serif; font-size: 1.08rem; font-weight: 860; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jade2); transition: color 0.3s; } nav.lm .nlw .br { color: var(--jade); } .nlw .su { font-family: "Cormorant Garamond", serif; font-size: 1rem; letter-spacing: 0.22em; font-style: italic; color: var(--gold); opacity: 0.85; } /* Enlaces de navegación */ .nlinks { display: flex; gap: clamp(0.8rem, 1vw, 1.3rem); /* SEPARACION ENTRE ENLACES*/ list-style: none; align-items: center; } .nlinks a { font-family: "Playfair Display", serif; font-size: 1.05rem; font-weight: 720; letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; color: var(--tpearl); opacity: 0.82; transition: color 0.3s; position: relative; padding-bottom: 2px; white-space: nowrap; } .nlinks a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, var(--jade2), var(--gold)); transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .nlinks a:hover { color: var(--jade2); opacity: 1; } .nlinks, .nlogo { height: 100%; } .nlinks a:hover::after { width: 100%; } nav.lm .nlinks a { color: var(--tmid); } nav.lm .nlinks a:hover { color: var(--jade); } /* Botón CONTRATAR */ .ncta { padding: 12px 28px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; border: none; margin-left: 0.5rem; border-radius: 26px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; text-decoration: none; box-shadow: 0 0 25px rgba(0, 163, 181, 0.5), 0 0 50px rgba(201, 168, 76, 0.2); transition: all 0.2s; white-space: nowrap; border: 1.5px solid rgba(201, 168, 76, 0.4); position: relative; overflow: hidden; } .ncta:hover { transform: translateY(-2px); box-shadow: 0 4px 30px rgba(0, 163, 181, 0.6); } /* ============================================ 7. SECCIÓN HERO (PORTADA) ============================================ */ .hero { position: relative; min-height: 100svh; padding-top: 68px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient( ellipse 80% 50% at 10% 20%, rgba(0, 163, 181, 0.14) 0%, transparent 60% ), radial-gradient( ellipse 60% 40% at 90% 80%, rgba(201, 168, 76, 0.09) 0%, transparent 55% ), radial-gradient( ellipse 50% 60% at 50% 110%, rgba(0, 109, 119, 0.1) 0%, transparent 50% ), linear-gradient(170deg, #04090f 0%, #060d1a 35%, #091522 65%, #04090f 100%); } @keyframes gd { 0% { background-position: 0 0; } 100% { background-position: 0 70px; } } /* Líneas de luz verticales */ .hstreak { position: absolute; pointer-events: none; width: 1px; height: 40%; background: linear-gradient(180deg, transparent, var(--jade2), transparent); opacity: 0; animation: sf 7s ease-in-out infinite; } .hstreak:nth-child(1) { left: 18%; animation-delay: 0s; } .hstreak:nth-child(2) { left: 43%; animation-delay: 2.2s; height: 55%; } .hstreak:nth-child(3) { left: 70%; animation-delay: 4.1s; height: 38%; } .hstreak:nth-child(4) { left: 87%; animation-delay: 1.1s; height: 62%; } .hstreak:nth-child(5) { left: 7%; animation-delay: 3.3s; } @keyframes sf { 0% { top: -20%; opacity: 0; } 30% { opacity: 0.35; } 70% { opacity: 0.28; } 100% { top: 120%; opacity: 0; } } /* Anillos decorativos pulsantes */ .ering { position: absolute; border-radius: 50%; pointer-events: none; border: 1px solid; top: 50%; left: 50%; animation: rp 8s ease-in-out infinite; } .ering:nth-child(1) { width: 500px; height: 500px; margin: -250px 0 0 -250px; border-color: rgba(0, 163, 181, 0.07); animation-delay: 0s; } .ering:nth-child(2) { width: 700px; height: 700px; margin: -350px 0 0 -350px; border-color: rgba(201, 168, 76, 0.045); animation-delay: 2s; } .ering:nth-child(3) { width: 900px; height: 900px; margin: -450px 0 0 -450px; border-color: rgba(0, 163, 181, 0.03); animation-delay: 4s; } @keyframes rp { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } /* Contenedor del contenido central */ .hcontent { position: relative; z-index: 10; text-align: center; max-width: 1700px; width: 100%; padding: clamp(2rem, 4vh, 5rem) clamp(1rem, 3vw, 4rem) clamp(1.5rem, 3vh, 3rem); min-height: calc(100svh - 68px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.8rem, 1.5vh, 1.4rem); } /* Canvas de partículas del hero */ #heroParticles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 1; } .hero-content { position: relative; z-index: 2; max-width: 1700px; margin: 0 auto; } /* ============================================ 🎨 8. LOGO DEL HERO CON ANILLOS ORBITALES ============================================ */ .hlstage { position: relative; display: inline-flex; align-items: center; justify-content: center; width: clamp(240px, 26vw, 400px) !important; height: clamp(240px, 26vw, 400px) !important; margin-bottom: 0; flex-shrink: 0; margin: 0; filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 50px rgba(0, 163, 181, 0.5)); position: relative; z-index: 20; max-width: 1700px; } .hlimg { width: clamp(200px, 22vw, 370px) !important; position: relative; z-index: 5; filter: drop-shadow(0 0 25px rgba(0, 163, 181, 0.9)) drop-shadow(0 0 60px rgba(0, 163, 181, 0.4)); animation: lb 4s ease-in-out infinite; filter: brightness(1.1) contrast(1.1); /* ← ESTO SOBRESCRIBE EL ANTERIOR */ } @keyframes lb { 0%, 100% { filter: drop-shadow(0 0 20px rgba(0, 163, 181, 0.9)) drop-shadow(0 0 50px rgba(0, 163, 181, 0.4)); transform: scale(1); } 50% { filter: drop-shadow(0 0 40px rgba(80, 66, 3, 0.651)) drop-shadow(0 0 90px rgba(0, 163, 181, 0.6)) drop-shadow(0 0 130px rgba(201, 168, 76, 0.22)); transform: scale(1.04); } } /* Anillos orbitales */ .oring { position: absolute; border: 5px solid transparent; border-radius: 50%; box-shadow: 0 0 20px rgba(0, 195, 221, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2); animation: pulseRing 4s infinite alternate; /* Animación opcional para que "respire" */ top: 50%; left: 50%; } /* Animación suave para el brillo (Opcional) */ @keyframes pulseRing { 0% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); opacity: 0.6; } 100% { box-shadow: 0 0 35px rgba(255, 255, 255, 0.8); opacity: 1; } } .or1 { width: 400px; height: 400px; margin: -200px 0 0 -200px; border: 2.5px solid rgba(0, 163, 181, 0.5); box-shadow: 0 0 35px rgba(0, 163, 181, 0.3), 0 0 70px rgba(0, 163, 181, 0.1), inset 0 0 18px rgba(0, 163, 181, 0.12); animation: scw 10s linear infinite; } .or1::after { content: ""; position: absolute; width: 14px; height: 14px; top: -7px; margin-left: -7px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 12px var(--gold), 0 0 24px var(--gold); left: 50%; } .or2 { width: 430px; height: 430px; margin: -215px 0 0 -215px; border: 2.5px solid rgba(201, 168, 76, 0.38); box-shadow: 0 0 35px rgba(201, 168, 76, 0.22), 0 0 70px rgba(201, 168, 76, 0.08), inset 0 0 15px rgba(201, 168, 76, 0.1); animation: sccw 15s linear infinite; } .or2::after { content: ""; position: absolute; width: 20px; height: 20px; top: -10px; background: var(--jade2); border-radius: 50%; box-shadow: 0 0 14px var(--jade2); left: 34%; margin-left: 5px; } @keyframes bulletPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.6; } } @keyframes scw { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes sccw { from { transform: rotate(0); } to { transform: rotate(-360deg); } } /* ============================================ 📝 9. TEXTOS DEL HERO ============================================ */ .heyebrow { display: inline-flex; align-items: center; gap: 15px; font-family: "Cormorant Garamond", serif; font-size: 1.55rem; font-style: italic; letter-spacing: 0.25em; color: var(--gold); opacity: 0.9; margin-top: clamp(0.3rem, 1vh, 0.8rem); margin-bottom: 0.1rem; gap: 22px; max-width: 1700px; letter-spacing: 0.35em; text-shadow: 0 0 20px rgba(201, 168, 76, 0.4); white-space: normal; /* ← CAMBIA nowrap por normal */ text-align: center; flex-wrap: wrap; /* ← evita que se rompa en dos líneas */ margin-bottom: -0.03rem; } .heyebrow::before, .heyebrow::after { content: ""; width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); } .heyebrow::after { transform: scaleX(-1); } .hh1 { font-family: "Cinzel", serif; font-size: clamp(3.2rem, 9vw, 6rem) !important; font-weight: 900; line-height: 1.08; letter-spacing: 0.05em; padding: 0.5rem 1vw 0.3rem; max-width: 1700px; margin-bottom: 0; animation: fu 0.5s ease 0.2s both; } .hh1 .l1 { color: var(--twhite); display: block; -webkit-text-fill-color: var(--twhite); /* fix explícito */ } .hh1 .l2 { display: block; background: linear-gradient( 135deg, var(--jade2) 0%, var(--sky) 40%, var(--gold2) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hsub { font-family: "Cormorant Garamond", serif; font-size: clamp(1.1rem, 2.2vw, 1.75rem) !important; font-weight: 600; letter-spacing: 0.1em; color: var(--tpearl); opacity: 0.88; max-width: 1700px; margin-top: -1rem; margin-bottom: 0.03rem; animation: fu 0.7s ease 0.4s both; } .hsub em { color: var(--gold); font-style: italic; } /* Botones del hero */ .hbtns { display: flex; gap: 1.6rem !important; justify-content: center; flex-wrap: wrap; animation: fu 0.7s ease 0.6s both; } .hbtns a { flex: 1; text-align: center; min-width: 140px; white-space: nowrap; padding: 20px 58px !important; font-size: 1.35rem !important; } .hbtns a::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.25), transparent 60% ); opacity: 0; transition: opacity 0.35s; pointer-events: none; z-index: 0; } .hbtns a:hover::before { opacity: 1; } .hbtns a:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.12) saturate(1.15); } .hbtns a:active { transform: translateY(-1px) scale(0.99); } /* Glow pulsante en el CTA primario */ @keyframes cvm-pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 199, 106, 0.45), 0 8px 24px rgba(232, 199, 106, 0.25); } 50% { box-shadow: 0 0 0 12px rgba(232, 199, 106, 0), 0 12px 32px rgba(232, 199, 106, 0.4); } } .hbtns a:first-child { animation: cvm-pulse-glow 2.8s ease-in-out infinite; } @keyframes fu { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ 🔘 10. BOTONES GENERALES ============================================ */ .bj { padding: 17px 46px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; border: none; border-radius: 3px; font-family: "Rajdhani", sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; text-decoration: none; box-shadow: 0 0 25px rgba(0, 163, 181, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12); transition: 0.15s; position: relative; overflow: hidden; } .bj:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(0, 163, 181, 0.62); } .bog { padding: 17px 46px; background: transparent; color: var(--gold); border: 1.5px solid var(--gold); border-radius: 3px; font-family: "Rajdhani", sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: all 0.15s; } .bog:hover { background: var(--gold); color: var(--ink); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(201, 168, 76, 0.42); } /* ============================================ ⬇️ 11. INDICADOR DE SCROLL ============================================ */ .scue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 10; animation: fc 3s ease-in-out infinite; } .scue span { font-family: "Rajdhani", sans-serif; font-size: 0.62rem; letter-spacing: 0.35em; color: var(--tlight); } .scueline { width: 1px; height: 50px; background: linear-gradient(180deg, var(--jade2), transparent); } @keyframes fc { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* ============================================ 📊 12. BARRA DE ESTADÍSTICAS ============================================ */ /* ============================================ 🎭 13. SECCIONES CLARAS Y OSCURAS ============================================ */ .sl { background: var(--pearl); color: var(--tdark); position: relative; z-index: 10; } .sl::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 40% at 95% 10%, rgba(0, 163, 181, 0.035) 0%, transparent 70% ), radial-gradient( ellipse 50% 30% at 5% 90%, rgba(201, 168, 76, 0.025) 0%, transparent 70% ); pointer-events: none; } /* .pbg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .pbg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 109, 119, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 109, 119, 0.04) 1px, transparent 1px); background-size: 42px 42px; } */ .sd { background: radial-gradient( ellipse 70% 50% at 12% 25%, rgba(0, 163, 181, 0.11) 0%, transparent 55% ), radial-gradient( ellipse 60% 45% at 88% 75%, rgba(201, 168, 76, 0.08) 0%, transparent 50% ), linear-gradient(170deg, #04090f 0%, #070e1a 45%, #0b1525 80%, #0d1a2e 100%); position: relative; z-index: 10; } /* ============================================ 📑 14. ENCABEZADOS DE SECCIÓN ============================================ */ .seb { display: inline-flex; align-items: center; gap: 10px; font-family: "Cormorant Garamond", serif; font-size: 0.87rem; font-style: italic; letter-spacing: 0.25em; margin-bottom: 0.8rem; } .seb.d { color: var(--jade2); } .seb.l { color: var(--jade); } .seb::before, .seb::after { content: ""; display: block; width: 28px; height: 1px; } .seb.d::before, .seb.d::after { width: 34px; background: linear-gradient(90deg, var(--valle), var(--jade2)); } .seb.d::after { background: linear-gradient(90deg, var(--jade2), #8b5cf6); } .seb.l::before, .seb.l::after { width: 34px; background: linear-gradient(90deg, var(--jade), var(--valle2)); } .seb.l::after { background: linear-gradient(90deg, var(--valle2), var(--jade)); } .stit { font-family: "Cinzel", serif; font-size: clamp(2.6rem, 4.5vw, 3.8rem); line-height: 1.12; letter-spacing: 0.04em; font-weight: 700; } .stit.d { color: var(--twhite); text-shadow: 0 2px 40px rgba(0, 163, 181, 0.15); } .stit.l { color: var(--tdark); text-shadow: 0 2px 30px rgba(0, 109, 119, 0.08); } .stit .ac { background: linear-gradient( 120deg, var(--jade) 0%, var(--valle2) 52%, var(--jade2) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stit.d .ac { background: linear-gradient( 120deg, var(--jade2) 0%, #38bdf8 46%, #8b5cf6 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ssub { font-family: "Cormorant Garamond", serif; font-size: 1.08rem; font-weight: 400; line-height: 1.75; letter-spacing: 0.03em; } .ssub.d { color: var(--tlight); } .ssub.l { color: var(--tmid); } /* ============================================ 🔧 15. SECCIÓN DE SERVICIOS ============================================ */ /* ═══════════════════════════════════════════ 🌟 NUEVO: SERVICIOS PREMIUM — INTERACTIVO ═══════════════════════════════════════════ */ .srv-modern-wrap { max-width: 1200px; margin: 0 auto 5rem; padding: 0 2rem; } /* Header de servicios */ .srv-modern-header { text-align: center; margin-bottom: 3.5rem; } .srv-modern-header .eyebrow { font-family: "Cormorant Garamond", serif; font-size: 0.85rem; font-style: italic; letter-spacing: 0.3em; color: var(--jade2); margin-bottom: 0.5rem; } .srv-modern-header h3 { font-family: "Cinzel", serif; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--tdark); font-weight: 700; } .srv-modern-header h3 span { background: linear-gradient(135deg, var(--jade), var(--jade2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Grid de servicios */ .srv-modern-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } /* Card de servicio */ .srv-card { position: relative; background: #fff; border-radius: 20px; padding: 2.5rem 1.8rem 2rem; text-align: center; border: 1px solid rgba(0, 109, 119, 0.06); overflow: hidden; cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Sombra base sutil */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); } /* Línea superior decorativa */ .srv-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--jade), var(--jade2)); transform: scaleX(0); transform-origin: center; transition: transform 0.4s ease; } .srv-card:hover::before { transform: scaleX(1); } /* Glow de fondo al hover */ .srv-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 50% 0%, rgba(0, 163, 181, 0.06) 0%, transparent 70% ); opacity: 0; transition: opacity 0.4s ease; } .srv-card:hover::after { opacity: 1; } .srv-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0, 109, 119, 0.12); border-color: rgba(0, 163, 181, 0.15); } /* Icono circular */ .srv-card-icon { width: 64px; height: 64px; margin: 0 auto 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: all 0.4s ease; } .srv-card-icon svg { width: 28px; height: 28px; stroke-width: 1.8; transition: all 0.4s ease; } .srv-card:hover .srv-card-icon { transform: scale(1.1) rotate(-5deg); } /* Variantes de color por servicio */ .srv-card .srv-icon-teal { background: linear-gradient( 135deg, rgba(0, 109, 119, 0.08), rgba(0, 163, 181, 0.12) ); border: 1px solid rgba(0, 163, 181, 0.1); } .srv-card .srv-icon-teal svg { stroke: var(--jade2); } .srv-card:hover .srv-icon-teal { background: linear-gradient(135deg, var(--jade), var(--jade2)); border-color: transparent; } .srv-card:hover .srv-icon-teal svg { stroke: #fff; } .srv-card .srv-icon-gold { background: linear-gradient( 135deg, rgba(160, 118, 46, 0.08), rgba(232, 199, 106, 0.12) ); border: 1px solid rgba(201, 168, 76, 0.1); } .srv-card .srv-icon-gold svg { stroke: var(--goldd); } .srv-card:hover .srv-icon-gold { background: linear-gradient(135deg, var(--goldd), var(--gold2)); border-color: transparent; } .srv-card:hover .srv-icon-gold svg { stroke: #fff; } .srv-card .srv-icon-sky { background: linear-gradient( 135deg, rgba(91, 164, 199, 0.08), rgba(168, 216, 234, 0.12) ); border: 1px solid rgba(91, 164, 199, 0.1); } .srv-card .srv-icon-sky svg { stroke: var(--sky2); } .srv-card:hover .srv-icon-sky { background: linear-gradient(135deg, var(--sky2), var(--sky)); border-color: transparent; } .srv-card:hover .srv-icon-sky svg { stroke: #fff; } .srv-card .srv-icon-jade { background: linear-gradient( 135deg, rgba(0, 109, 119, 0.08), rgba(0, 163, 181, 0.12) ); border: 1px solid rgba(0, 163, 181, 0.1); } .srv-card .srv-icon-jade svg { stroke: var(--jade2); } .srv-card:hover .srv-icon-jade { background: linear-gradient(135deg, var(--jade), var(--jade2)); border-color: transparent; } .srv-card:hover .srv-icon-jade svg { stroke: #fff; } /* Etiqueta del servicio */ .srv-card-label { font-family: "Rajdhani", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--jade2); margin-bottom: 0.6rem; position: relative; z-index: 1; } /* Título */ .srv-card-title { font-family: "Playfair Display", serif; font-size: 1.15rem; color: var(--tdark); font-weight: 700; margin-bottom: 0.8rem; position: relative; z-index: 1; transition: color 0.3s ease; } .srv-card:hover .srv-card-title { color: var(--jade); } /* Descripción corta */ .srv-card-desc { font-family: "Montserrat", sans-serif; font-size: 0.82rem; color: var(--tmid); line-height: 1.6; margin-bottom: 1.2rem; position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Precio / CTA */ .srv-card-price { font-family: "Cinzel", serif; font-size: 0.78rem; color: var(--jade); letter-spacing: 0.05em; position: relative; z-index: 1; padding-top: 1rem; border-top: 1px solid rgba(0, 109, 119, 0.06); } /* Badge "Incluido" */ .srv-card-badge { display: inline-block; margin-top: 0.8rem; padding: 4px 14px; background: linear-gradient( 135deg, rgba(0, 109, 119, 0.06), rgba(0, 163, 181, 0.08) ); border: 1px solid rgba(0, 163, 181, 0.12); border-radius: 20px; font-family: "Rajdhani", sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jade2); position: relative; z-index: 1; } /* ── RESPONSIVE SERVICIOS ── */ @media (max-width: 1024px) { .srv-modern-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .srv-modern-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } .srv-card { padding: 2rem 1.5rem 1.5rem; } } /* ═══════════════════════════════════════════ 🚀 NUEVO: CÓMO CONTRATAR — TIMELINE INTERACTIVO ═══════════════════════════════════════════ */ .cta-modern-wrap { max-width: 1000px; margin: 0 auto; padding: 0 2rem; } .cta-modern-header { text-align: center; margin-bottom: 3rem; } .cta-modern-header .eyebrow { font-family: "Cormorant Garamond", serif; font-size: 0.85rem; font-style: italic; letter-spacing: 0.3em; color: var(--jade2); margin-bottom: 0.5rem; } .cta-modern-header h3 { font-family: "Cinzel", serif; font-size: clamp(1.6rem, 2.5vw, 2.2rem); color: var(--tdark); font-weight: 700; } .cta-modern-header h3 span { background: linear-gradient(135deg, var(--jade), var(--jade2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Timeline horizontal */ .cta-timeline { display: grid; grid-template-columns: 1fr 1fr 1fr; position: relative; gap: 2rem; } /* Línea conectora */ .cta-timeline::before { content: ""; position: absolute; top: 42px; left: 15%; right: 15%; height: 2px; background: linear-gradient(90deg, var(--jade), var(--jade2), var(--jade)); opacity: 0.2; z-index: 0; } /* Step */ .cta-step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; cursor: pointer; } /* Número circular */ .cta-step-num { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, var(--jade), var(--jade2)); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; position: relative; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 8px 30px rgba(0, 163, 181, 0.25); } /* Glow pulsante */ .cta-step-num::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(0, 163, 181, 0.15); animation: ctaPulse 3s ease-in-out infinite; } .cta-step:nth-child(2) .cta-step-num::before { animation-delay: 1s; } .cta-step:nth-child(3) .cta-step-num::before { animation-delay: 2s; } @keyframes ctaPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 0; } } .cta-step-num svg { width: 36px; height: 36px; stroke: #fff; stroke-width: 1.8; fill: none; } /* Hover del paso */ .cta-step:hover .cta-step-num { transform: scale(1.12) rotate(-8deg); box-shadow: 0 12px 40px rgba(0, 163, 181, 0.4); } /* Texto del paso */ .cta-step-label { font-family: "Rajdhani", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--jade2); margin-bottom: 0.5rem; } .cta-step-title { font-family: "Playfair Display", serif; font-size: 1.1rem; color: var(--tdark); font-weight: 700; margin-bottom: 0.5rem; } .cta-step-desc { font-family: "Montserrat", sans-serif; font-size: 0.8rem; color: var(--tmid); line-height: 1.6; max-width: 260px; } /* ── RESPONSIVE CONTRATAR ── */ @media (max-width: 768px) { .cta-timeline { grid-template-columns: 1fr; gap: 2.5rem; } .cta-timeline::before { display: none; } .cta-step { flex-direction: row; text-align: left; gap: 1.2rem; } .cta-step-num { width: 60px; height: 60px; margin-bottom: 0; flex-shrink: 0; } .cta-step-num svg { width: 26px; height: 26px; } .cta-step-desc { max-width: none; } } /* .srvsec { padding: 6rem 3rem; } .srvhdr { text-align: center; margin-bottom: 4rem; } .srvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto; } .srvc { background: #fff; border: 1px solid rgba(0, 109, 119, 0.08); border-radius: 2px; padding: 2.5rem 2rem; text-align: center; transition: all 0.15s; position: relative; overflow: hidden; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); } .srvc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--jade), var(--jade2), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .srvc:hover { transform: translateY(-8px); box-shadow: 0 15px 50px rgba(0, 109, 119, 0.12); border-color: rgba(0, 109, 119, 0.15); } .srvc:hover::before { transform: scaleX(1); } .srvi { width: 64px; height: 64px; background: linear-gradient(135deg, rgba(0, 109, 119, 0.08), rgba(0, 163, 181, 0.12)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 1.8rem; border: 1px solid rgba(0, 109, 119, 0.1); transition: all 0.15s; } .srvc:hover .srvi { background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; } .srvc h3 { font-family: 'Cinzel', serif; font-size: 0.98rem; font-weight: 600; letter-spacing: 0.08em; color: var(--tdark); margin-bottom: 0.8rem; } .srvc p { font-size: 0.88rem; line-height: 1.7; color: var(--tmid); } .srvtg { display: inline-block; margin-top: 1rem; padding: 4px 14px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; border-radius: 30px; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.15em; } */ /* ============================================ 💰 16. SECCIÓN DE PLANES ============================================ */ .plsec { padding: 6rem 3rem; } .plhdr { text-align: center; margin-bottom: 3rem; } .pltabs { display: flex; justify-content: center; gap: 0; margin-bottom: 3rem; border-radius: 5px; overflow: hidden; border: 1px solid rgba(0, 163, 181, 0.18); max-width: 780px; margin-left: auto; margin-right: auto; } .pltab { flex: 1; padding: 13px 20px; background: transparent; color: var(--tlight); border: none; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.87rem; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; } .pltab.act { background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; box-shadow: 0 0 20px rgba(0, 163, 181, 0.28); } .pltab:first-child { border-right: 1px solid rgba(0, 163, 181, 0.18); } .plpane { display: none; } .plpane.act { display: block; } .slwrap { display: flex; justify-content: center; align-items: center; } .plsl { display: flex; gap: 1.5rem; padding: 1rem 0.5rem 2rem; transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; scroll-snap-type: x mandatory; /* Agrega esto para suavidad */ scroll-behavior: smooth; } /* Tarjetas de planes */ .plc { flex: 0 0 290px; background: linear-gradient( 145deg, rgba(11, 21, 37, 0.95), rgba(7, 14, 26, 0.98) ); border: 1px solid rgba(0, 163, 181, 0.11); border-radius: 5px; padding: 2.2rem 2rem; position: relative; overflow: hidden; transition: all 0.15s; } .plc::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at 20% 20%, rgba(0, 163, 181, 0.14), transparent 30% ), radial-gradient(circle at 85% 80%, rgba(201, 168, 76, 0.1), transparent 24%); opacity: 0.55; } .plc.ft { border-color: var(--gold); background: linear-gradient( 145deg, rgba(15, 25, 45, 0.98), rgba(11, 21, 37, 1) ); box-shadow: 0 0 50px rgba(201, 168, 76, 0.1); } .plc.ft::after { content: "POPULAR"; position: absolute; top: 18px; right: -22px; background: linear-gradient(135deg, var(--goldd), var(--gold)); color: #fff; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.15em; padding: 4px 40px; transform: rotate(35deg); } .plc:hover { transform: translateY(-6px); border-color: rgba(0, 163, 181, 0.28); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .plc.ft:hover { box-shadow: 0 0 60px rgba(201, 168, 76, 0.16), 0 20px 60px rgba(0, 0, 0, 0.5); } .plsn { font-family: "Cinzel", serif; font-size: 4.8rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; background: linear-gradient( 135deg, #e8f4f8 0%, var(--jade2) 55%, var(--jade) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; } .plsu { font-family: "Rajdhani", sans-serif; font-size: 0.73rem; letter-spacing: 0.25em; color: var(--tlight); } .plnm { font-family: "Cinzel", serif; font-size: 1.4rem; letter-spacing: 0.18em; text-transform: uppercase; color: transparent; background: linear-gradient(135deg, var(--gold2), var(--gold), var(--goldd)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0.75rem 0 1rem; text-shadow: 0 0 12px rgba(255, 215, 150, 0.15); } .pldiv { height: 1px; background: linear-gradient( 90deg, transparent, rgba(0, 163, 181, 0.22), transparent ); margin: 1.2rem 0; } .plft { list-style: none; margin-bottom: 1.5rem; } .plft li { padding: 5px 0; font-size: 0.84rem; color: var(--tpearl); display: flex; align-items: center; gap: 8px; } .plft li::before { content: "◈"; color: var(--jade2); font-size: 0.63rem; flex-shrink: 0; } .plpr { font-family: "Cinzel", serif; font-size: 2.25rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--gold2), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; } .plpr span { font-size: 0.78rem; font-weight: 400; color: var(--tlight); font-family: "Rajdhani", sans-serif; letter-spacing: 0.1em; } .plpn { font-size: 0.7rem; color: var(--gold); font-family: "Rajdhani", sans-serif; letter-spacing: 0.1em; margin-top: 4px; margin-bottom: 1.5rem; } .plbtn { width: 100%; padding: 12px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; border: none; border-radius: 3px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.84rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; box-shadow: 0 4px 20px rgba(0, 163, 181, 0.22); } .plbtn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 163, 181, 0.48); } .plbtn.g { background: linear-gradient(135deg, var(--goldd), var(--gold)); box-shadow: 0 4px 20px rgba(201, 168, 76, 0.28); } .plbtn.g:hover { box-shadow: 0 8px 30px rgba(201, 168, 76, 0.52); } /* Controles del slider */ .slctrl { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; align-items: center; } .slarr { width: 44px; height: 44px; background: rgba(0, 163, 181, 0.07); border: 1px solid rgba(0, 163, 181, 0.22); border-radius: 50%; color: var(--jade2); font-size: 1rem; cursor: pointer; transition: all 0.1s; display: flex; align-items: center; justify-content: center; } .slarr:hover { background: rgba(0, 163, 181, 0.16); border-color: var(--jade2); box-shadow: 0 0 18px rgba(0, 163, 181, 0.28); } .slctrl button.slarr:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .dotsrow { display: none !important; } .dot { width: 7px; height: 7px; background: rgba(0, 163, 181, 0.22); border-radius: 50%; cursor: pointer; transition: all 0.15s; } .dot.act { background: var(--jade2); width: 22px; border-radius: 4px; } /* Plan Cable TV destacado */ #pp-cable .plc.ft::after { content: "¡OFERTA!"; position: absolute; top: 18px; right: -22px; background: linear-gradient(135deg, var(--goldd), var(--gold)); color: #fff; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.15em; padding: 4px 40px; transform: rotate(35deg); } #sl-cable { justify-content: center !important; padding: 2rem 0.5rem 3rem; } /* ============================================ 📺 17. SECCIÓN CABLE TV (CANALES) ============================================ */ .tvsec { padding: 6rem 3rem; } .tvhdr { text-align: center; margin-bottom: 3rem; } .chtabs { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .chtab { padding: 9px 22px; background: #fff; border: 1px solid rgba(0, 109, 119, 0.14); border-radius: 2px; color: var(--tmid); font-family: "Rajdhani", sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; } .chtab.act, .chtab:hover { background: var(--jade); border-color: var(--jade); color: #fff; box-shadow: 0 4px 20px rgba(0, 109, 119, 0.22); } .chpane { display: none; } .chpane.act { display: block; } .chgrid { display: grid; flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.1rem; max-width: 1100px; margin: 0 auto; justify-content: center; justify-items: center; } /* ══ TARJETAS DE CANALES — VERSIÓN PREMIUM BRILLOSA ══ */ .chc { background: linear-gradient(145deg, #ffffff 0%, #f0f8ff 60%, #e8f4f8 100%); border: 1px solid rgba(0, 109, 119, 0.1); border-radius: 16px; padding: 1.8rem 0.8rem 1.6rem; text-align: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: default; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 163, 181, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); position: relative; overflow: hidden; flex: 0 0 128px; width: 100%; /* ── CAMBIOS AQUI PARA CENTRADO AUTOMÁTICO ── */ width: 100%; /* Ocupa el espacio disponible */ max-width: 140px; /* 🆕 NUEVO: Límite de ancho para que no se estire infinito */ margin: 0 auto; /* 🆕 NUEVO: Fuerza el centrado horizontal */ display: block; /* 🆕 NUEVO: Asegura que sea un bloque centrable */ } /* Brillo superior animado */ .chc::before { content: ""; position: absolute; top: -2px; left: -100%; width: 60%; height: 3px; background: linear-gradient( 90deg, transparent, rgba(0, 163, 181, 0.8), rgba(201, 168, 76, 0.6), transparent ); border-radius: 3px; transition: left 0.6s ease; } /* Borde inferior degradado */ .chc::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--jade), var(--jade2), var(--gold)); transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); border-radius: 0 0 16px 16px; } .chc:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 20px 50px rgba(0, 109, 119, 0.18), 0 8px 20px rgba(0, 163, 181, 0.14), 0 0 0 2px rgba(0, 163, 181, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1); border-color: rgba(0, 163, 181, 0.25); background: linear-gradient(145deg, #ffffff 0%, #e8f8fc 60%, #d4f0f8 100%); } .chc:hover::before { left: 150%; } .chc:hover::after { transform: scaleX(1); } .chlw { width: 100%; height: 72px; /* altura fija para TODAS las imágenes */ display: flex; align-items: center; justify-content: center; } /* Imagen del logo */ .chlw img { justify-content: center; width: 110px; height: 70px; margin: 0 auto 0.7rem; object-fit: contain; filter: grayscale(8%) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08)); transition: filter 0.3s, transform 0.3s; display: flex; align-items: center; justify-content: center; } .chc:hover .chlw img { filter: grayscale(0%) drop-shadow(0 4px 12px rgba(0, 109, 119, 0.32)) brightness(1.05); } /* Nombre del canal */ .chnm { font-family: "Rajdhani", sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tmid); margin-top: 4px; transition: color 0.3s; } .chc:hover .chnm { color: var(--jade); } .chem { font-size: 2rem; } .chhint { background: linear-gradient( 135deg, rgba(0, 109, 119, 0.05), rgba(201, 168, 76, 0.03) ); border: 1px dashed rgba(0, 109, 119, 0.18); border-radius: 5px; padding: 1rem 2rem; margin: 0 auto 2rem; max-width: 700px; text-align: center; } .chhint p { font-size: 0.8rem; color: var(--tmid); line-height: 1.7; } .chhint code { background: rgba(0, 109, 119, 0.07); padding: 2px 7px; border-radius: 3px; font-size: 0.76rem; color: var(--jade); } .tvfr { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1rem; max-width: 1000px; margin: 3rem auto 0; } .tvf { display: flex; align-items: center; gap: 12px; padding: 1rem 1.5rem; background: #fff; border: 1px solid rgba(0, 109, 119, 0.07); border-radius: 3px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .tvfi { font-size: 1.5rem; } .tvft { font-family: "Rajdhani", sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; color: var(--tmid); } .tvft strong { color: var(--jade); display: block; font-size: 0.88rem; } /* ============================================ 🏆 BANNER LIGA 1 MAX — SLIDE LATERAL + OVERLAY ============================================ */ /* — Botón flotante que activa el panel — */ #l1-trigger { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(180deg, #c0001a 0%, #7a0010 100%); color: #fff; border: none; border-radius: 10px 0 0 10px; padding: 18px 10px; cursor: pointer; box-shadow: -4px 0 30px rgba(192, 0, 26, 0.55); transition: all 0.25s; writing-mode: vertical-rl; font-family: "Rajdhani", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } #l1-trigger:hover { background: linear-gradient(180deg, #e60020 0%, #9b0015 100%); box-shadow: -6px 0 40px rgba(230, 0, 32, 0.7); padding-right: 14px; } #l1-trigger .l1t-icon { writing-mode: horizontal-tb; font-size: 1.5rem; animation: pls 1.6s ease-in-out infinite; } @keyframes pls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } #l1-trigger .l1t-badge { writing-mode: horizontal-tb; background: #fff; color: #c0001a; font-size: 0.6rem; font-weight: 900; padding: 2px 6px; border-radius: 50px; letter-spacing: 0.05em; white-space: nowrap; animation: bdgpls 2s ease-in-out infinite; } @keyframes bdgpls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } } /* — Overlay oscuro — */ #l1-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 9001; pointer-events: none; transition: background 0.4s; } #l1-overlay.open { background: rgba(0, 0, 0, 0.65); pointer-events: all; } /* — Panel lateral — */ #l1-panel { position: fixed; top: 0; right: -520px; width: min(480px, 95vw); height: 100%; z-index: 9002; background: linear-gradient(160deg, #0d0003 0%, #1a0006 35%, #0a0002 100%); border-left: 1px solid rgba(192, 0, 26, 0.35); box-shadow: -20px 0 80px rgba(192, 0, 26, 0.2); overflow-y: auto; transition: right 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); display: flex; flex-direction: column; } #l1-panel.open { right: 0; } #l1-panel::-webkit-scrollbar { width: 4px; } #l1-panel::-webkit-scrollbar-thumb { background: rgba(192, 0, 26, 0.5); border-radius: 4px; } /* Encabezado del panel */ .l1p-head { position: relative; background: linear-gradient(135deg, #1a0006 0%, #2d000b 100%); padding: 2rem 1.8rem 1.4rem; border-bottom: 1px solid rgba(192, 0, 26, 0.2); overflow: hidden; } .l1p-head::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 80% 60% at 80% 0%, rgba(192, 0, 26, 0.3) 0%, transparent 60% ), radial-gradient( ellipse 40% 50% at 0% 100%, rgba(201, 168, 76, 0.1) 0%, transparent 60% ); pointer-events: none; } .l1p-close { position: absolute; top: 14px; right: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 1.1rem; transition: all 0.2s; z-index: 2; } .l1p-close:hover { background: rgba(192, 0, 26, 0.4); border-color: rgba(192, 0, 26, 0.6); transform: rotate(90deg); } .l1p-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; position: relative; z-index: 2; } .l1p-logo-row img { height: 40px; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); } .l1p-brand { font-family: "Cinzel", serif; font-size: 0.65rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.2em; text-transform: uppercase; } .l1p-headline { position: relative; z-index: 2; } .l1p-headline .eyebrow { font-family: "Rajdhani", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); opacity: 0.9; margin-bottom: 6px; } .l1p-headline h3 { font-family: "Cinzel", serif; font-size: clamp(1.4rem, 4vw, 1.9rem); color: #fff; line-height: 1.1; margin-bottom: 8px; } .l1p-headline h3 em { font-style: normal; color: #ff1a35; text-shadow: 0 0 20px rgba(255, 26, 53, 0.6); } .l1p-headline p { font-size: 0.82rem; color: rgba(255, 255, 255, 0.62); line-height: 1.65; font-family: "Montserrat", sans-serif; font-weight: 300; } /* Afiche principal */ .l1p-poster { position: relative; margin: 0; overflow: hidden; flex-shrink: 0; } .l1p-poster-img { width: 100%; display: block; object-fit: cover; max-height: 340px; filter: brightness(0.85) saturate(1.2); transition: transform 0.6s ease, filter 0.4s ease; } .l1p-poster:hover .l1p-poster-img { transform: scale(1.04); filter: brightness(0.95) saturate(1.4); } .l1p-poster-overlay { position: absolute; inset: 0; background: linear-gradient( to top, #0d0003 0%, transparent 50%, transparent 80%, rgba(13, 0, 3, 0.4) 100% ); pointer-events: none; } .l1p-poster-tag { position: absolute; top: 16px; left: 16px; background: linear-gradient(135deg, #c0001a, #7a0010); color: #fff; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 12px; border-radius: 3px; box-shadow: 0 4px 15px rgba(192, 0, 26, 0.5); } .l1p-poster-channels { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 24px; } .l1p-ch-badge { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 8px 18px; text-align: center; } .l1p-ch-badge .ch-num { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1.1rem; color: #ff1a35; } .l1p-ch-badge .ch-name { font-family: "Rajdhani", sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; } /* Cuerpo del panel */ .l1p-body { padding: 1.6rem 1.8rem 2rem; flex: 1; display: flex; flex-direction: column; gap: 1.4rem; } /* Tarjeta de descripción */ .l1p-desc { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(192, 0, 26, 0.18); border-radius: 10px; padding: 1.2rem 1.4rem; } .l1p-desc p { font-family: "Montserrat", sans-serif; font-size: 0.83rem; font-weight: 400; color: rgba(255, 255, 255, 0.72); line-height: 1.75; } .l1p-desc p strong { color: #ff4d60; font-weight: 700; } /* Tarjetas de canales disponibles */ .l1p-channels-title { font-family: "Cinzel", serif; font-size: 0.72rem; color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; } .l1p-ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .l1p-channel-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 12px; transition: all 0.2s; } .l1p-channel-card:hover { background: rgba(192, 0, 26, 0.12); border-color: rgba(192, 0, 26, 0.35); transform: translateX(4px); } .l1p-channel-card .icon { font-size: 1.6rem; flex-shrink: 0; } .l1p-channel-card .info .name { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.88rem; color: #fff; letter-spacing: 0.05em; } .l1p-channel-card .info .ch { font-family: "Rajdhani", sans-serif; font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.08em; } /* Features list */ .l1p-features { display: flex; flex-direction: column; gap: 8px; } .l1p-feat { display: flex; align-items: center; gap: 10px; font-family: "Montserrat", sans-serif; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); } .l1p-feat .dot { width: 6px; height: 6px; background: #ff1a35; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px rgba(255, 26, 53, 0.7); } /* CTA del panel */ .l1p-cta { display: flex; flex-direction: column; gap: 10px; margin-top: auto; } .l1p-btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; background: linear-gradient(135deg, #c0001a, #e60020); color: #fff; border: none; border-radius: 10px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; text-decoration: none; box-shadow: 0 6px 30px rgba(192, 0, 26, 0.45); transition: all 0.2s; } .l1p-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(230, 0, 32, 0.65); } .l1p-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; font-family: "Rajdhani", sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: all 0.2s; } .l1p-btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); color: #fff; } /* También mejorar la tab Deportes en el grid */ #ch-dep .chgrid .chc.featured-l1max { background: linear-gradient(145deg, #fff8f8, #fff0f0); border: 2px solid rgba(192, 0, 26, 0.25); position: relative; } #ch-dep .chgrid .chc.featured-l1max::before { content: "🆕"; position: absolute; top: 6px; right: 6px; font-size: 0.75rem; } #ch-dep .chgrid .chc.featured-l1max .chnm { color: #c0001a !important; font-weight: 700; } #ch-dep .chgrid .chc.featured-l1max:hover { box-shadow: 0 12px 35px rgba(192, 0, 26, 0.18); transform: translateY(-7px); } /* Banner promocional dentro de la sección Cable TV */ .tv-promo-banner { max-width: 1100px; margin: 2.5rem auto 0; background: linear-gradient(135deg, #0d0003 0%, #1a0006 50%, #0d0003 100%); border: 1px solid rgba(192, 0, 26, 0.25); border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; min-height: 200px; box-shadow: 0 20px 60px rgba(192, 0, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04); position: relative; } .tv-promo-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 80% at 0% 50%, rgba(192, 0, 26, 0.15) 0%, transparent 60% ), radial-gradient( ellipse 40% 60% at 100% 50%, rgba(201, 168, 76, 0.06) 0%, transparent 60% ); pointer-events: none; } .tvpb-left { padding: 2.2rem 2rem 2.2rem 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; position: relative; z-index: 2; } .tvpb-eyebrow { font-family: "Rajdhani", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); opacity: 0.9; } .tvpb-title { font-family: "Cinzel", serif; font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: #fff; line-height: 1.2; } .tvpb-title em { font-style: normal; color: #ff1a35; } .tvpb-text { font-family: "Montserrat", sans-serif; font-size: 0.8rem; font-weight: 300; color: rgba(255, 255, 255, 0.6); line-height: 1.7; max-width: 340px; } .tvpb-actions { display: flex; gap: 10px; flex-wrap: wrap; } .tvpb-cta { display: inline-flex; align-items: center; gap: 7px; padding: 11px 22px; background: linear-gradient(135deg, #c0001a, #e60020); color: #fff; text-decoration: none; border-radius: 8px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 4px 20px rgba(192, 0, 26, 0.4); transition: all 0.2s; cursor: pointer; border: none; } .tvpb-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(230, 0, 32, 0.6); } .tvpb-cta-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 11px 22px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; font-family: "Rajdhani", sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: all 0.2s; } .tvpb-cta-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.3); } .tvpb-right { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .tvpb-right::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, #0d0003 0%, transparent 40%); z-index: 2; pointer-events: none; } .tvpb-visual { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1.5rem; } .tvpb-emblem { display: flex; flex-direction: column; align-items: center; gap: 14px; } .tvpb-channel-row { display: flex; gap: 14px; align-items: center; } .tvpb-chbadge { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 10px 16px; text-align: center; min-width: 90px; transition: all 0.25s; } .tvpb-chbadge:hover { background: rgba(192, 0, 26, 0.2); border-color: rgba(192, 0, 26, 0.4); transform: scale(1.05); } .tvpb-chbadge .badge-num { font-family: "Rajdhani", sans-serif; font-size: 1.3rem; font-weight: 700; color: #ff1a35; line-height: 1; } .tvpb-chbadge .badge-sub { font-family: "Rajdhani", sans-serif; font-size: 0.62rem; font-weight: 600; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.1em; text-transform: uppercase; } .tvpb-chbadge .badge-name { font-family: "Cinzel", serif; font-size: 0.72rem; color: rgba(255, 255, 255, 0.85); margin-top: 2px; } .tvpb-divider { width: 1px; height: 50px; background: linear-gradient( to bottom, transparent, rgba(255, 255, 255, 0.2), transparent ); } .tvpb-fire { font-size: 3rem; animation: firepls 1.5s ease-in-out infinite; } @keyframes firepls { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.1) rotate(3deg); } } .tvpb-tagline { font-family: "Cinzel", serif; font-size: 0.72rem; color: var(--gold); letter-spacing: 0.18em; text-align: center; opacity: 0.8; } @media (max-width: 700px) { .tv-promo-banner { grid-template-columns: 1fr; } .tvpb-right { min-height: 160px; } .tvpb-left { padding: 1.8rem 1.4rem; } } /* ============================================ 📡 18. SECCIÓN IPTV ============================================ */ .iptscr { width: 340px; height: 220px; background: linear-gradient(145deg, #04090f, #0b1525); border: 1.5px solid rgba(0, 163, 181, 0.22); border-radius: 10px; box-shadow: 0 0 60px rgba(0, 163, 181, 0.13), inset 0 0 30px rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .iptsc { position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 4px ); pointer-events: none; } .iptplay { width: 66px; height: 66px; background: linear-gradient(135deg, var(--jade), var(--jade2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; box-shadow: 0 0 30px rgba(0, 163, 181, 0.48); animation: pg 2.5s ease-in-out infinite; position: relative; z-index: 2; } @keyframes pg { 0%, 100% { box-shadow: 0 0 20px rgba(0, 163, 181, 0.48); } 50% { box-shadow: 0 0 50px rgba(0, 163, 181, 0.78); } } .iptbdg { position: absolute; background: linear-gradient( 135deg, rgba(11, 21, 37, 0.95), rgba(0, 109, 119, 0.9) ); border: 1px solid rgba(0, 163, 181, 0.28); border-radius: 7px; padding: 10px 16px; font-family: "Rajdhani", sans-serif; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.1em; color: #fff; backdrop-filter: blur(10px); } .iptbdg.b1 { top: -18px; right: -28px; animation: fb 4s ease-in-out infinite; } .iptbdg.b2 { bottom: -18px; left: -28px; animation: fb 4s ease-in-out 2s infinite; } @keyframes fb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .iptfts { display: flex; flex-direction: column; gap: 1.2rem; } .iptft { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.5rem; background: rgba(255, 255, 255, 0.024); border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 5px; transition: all 0.15s; } .iptft:hover { background: rgba(0, 163, 181, 0.048); border-color: rgba(0, 163, 181, 0.16); transform: translateX(6px); } .iptfico { font-size: 1.8rem; flex-shrink: 0; } .iptft h4 { font-family: "Cinzel", serif; font-size: 0.8rem; color: var(--jade2); margin-bottom: 4px; } .iptft p { font-size: 0.8rem; color: var(--tlight); line-height: 1.6; } /* Mejoras IPTV */ .iptscr { position: relative; overflow: hidden; border-radius: 12px; } .iptimg { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) saturate(1.2); transition: all 0.25s; } .iptscr:hover .iptimg { filter: brightness(0.85) saturate(1.3); transform: scale(1.05); } .iptov { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0, 109, 119, 0.3) 0%, rgba(0, 163, 181, 0.2) 50%, rgba(201, 168, 76, 0.15) 100% ); backdrop-filter: blur(2px); } .iptplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: linear-gradient(135deg, var(--jade), var(--jade2)); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.85rem; cursor: pointer; box-shadow: 0 0 40px rgba(0, 163, 181, 0.6), inset 0 2px 10px rgba(255, 255, 255, 0.3); transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 10; } .iptplay:hover { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 60px rgba(0, 163, 181, 0.9), inset 0 2px 15px rgba(255, 255, 255, 0.4); } .iptbdg { padding: 8px 16px; background: rgba(0, 109, 119, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(0, 163, 181, 0.4); border-radius: 30px; display: flex; align-items: center; gap: 8px; font-family: "Rajdhani", sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .iptbdg.b1 { top: 20px; right: 20px; } .iptbdg.b2 { bottom: 20px; left: 20px; } .iptft { padding: 1.5rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 163, 181, 0.15); border-radius: 10px; margin-bottom: 1rem; transition: all 0.15s; } .iptft:hover { background: rgba(0, 163, 181, 0.08); border-color: rgba(0, 163, 181, 0.35); transform: translateX(8px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); } .iptfico { width: 48px; height: 48px; background: linear-gradient( 135deg, rgba(0, 109, 119, 0.2), rgba(0, 163, 181, 0.25) ); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--jade2); flex-shrink: 0; border: 1px solid rgba(0, 163, 181, 0.2); } .iptft h4 { font-family: "Cinzel", serif; font-size: 0.95rem; font-weight: 700; color: var(--jade2); margin-bottom: 6px; letter-spacing: 0.02em; } .iptft p { font-size: 0.85rem; color: var(--tlight); line-height: 1.6; margin: 0; } /* ============================================ 📧 19. SECCIÓN DE CONTACTO ============================================ */ .ctsec { padding: 5rem 2rem; color: var(--twhite); } /* Títulos compactos SOLO en contacto */ #contacto .stit { font-size: clamp(1.4rem, 2.8vw, 2rem) !important; margin-bottom: 0.4rem !important; } #contacto .seb { font-size: 0.6rem !important; margin-bottom: 0.4rem !important; } #contacto .ssub { font-size: 0.85rem !important; margin-bottom: 0.8rem !important; } .ctinn { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 2rem; align-items: start; } .ccc { display: grid; gap: 1rem; margin: 1.15rem 0; } .cc { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem; background: rgba(255, 255, 255, 0.85); border-radius: 10px; flex-direction: column; text-align: center; align-items: center; border: 1px solid var(--tlight, #e2e8f0); transition: all 0.15s ease; backdrop-filter: blur(10px); } .cc:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); border-color: var(--tmain, #0891b2); } .cci { width: 44px; height: 44px; min-width: 44px; display: grid; place-items: center; background: var(--tmain, #0891b2); color: white; border-radius: 10px; } .cci svg { width: 22px; height: 22px; } .cc h4 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; color: var(--tdark, #0f172a); } .cc a, .cc p { display: block; color: var(--tmid, #475569); text-decoration: none; margin: 0.2rem 0; font-size: 0.95rem; transition: color 0.2s; } .cc a:hover { color: var(--tmain, #0891b2); } .cc p strong { color: var(--tdark, #0f172a); } .hrsbox { background: rgba(255, 255, 255, 0.85); padding: 0.9rem 1rem; border-radius: 10px; border: 1px solid var(--tlight, #e2e8f0); backdrop-filter: blur(10px); } .hrsbox h4 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 1rem; font-weight: 600; color: var(--tdark, #0f172a); } .hr-icon { width: 18px; height: 18px; color: var(--tmain, #0891b2); } .hrrow { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px dashed var(--tlight, #e2e8f0); font-size: 0.9rem; } .hrrow:last-child { border-bottom: none; } .dy { color: var(--tmid, #475569); } .tm { font-weight: 500; color: var(--tdark, #0f172a); } .cl { color: #ef4444; font-weight: 500; } /* Formulario */ .contact-right .ctform { background: rgba(255, 255, 255, 0.85); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--tlight, #e2e8f0); backdrop-filter: blur(10px); } .ctform { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .fg { display: flex; flex-direction: column; gap: 5px; } .fg label { font-family: "Rajdhani", sans-serif; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tmid); } .fg input, .fg select, .fg textarea { background: white; border: 1px solid var(--tlight); padding: 11px 14px; color: var(--tdark); font-family: "Rajdhani", sans-serif; font-size: 0.9rem; border-radius: 3px; transition: all 0.15s; outline: none; } .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--tmain); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15); } .fg textarea { height: 90px; resize: none; } .fg select option { background: #fff; color: var(--tdark); } /* Contenedor de sedes */ .sedes-container h4 { margin: 0 0 0.5rem 0; text-align: center; font-size: 1rem; font-weight: 600; } .sedes-lista { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--tmid, #475569); } .sede { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; } .sede strong { color: var(--tdark, #0f172a); } .sede a { color: var(--tmain, #0891b2); text-decoration: none; font-weight: 500; } .sede a:hover { text-decoration: underline; } .separador { color: var(--tlight, #cbd5e1); font-weight: bold; user-select: none; } /* ============================================ 20. TARJETAS "NOSOTROS" ============================================ */ /* ── SPLIT LAYOUT ── */ .nos-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 520px; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1); margin-bottom: 3.5rem; } /* ── LADO IZQUIERDO: VISUAL + ROTADOR ── */ .nos-left { background: linear-gradient( 145deg, var(--ink) 0%, #04262c 50%, var(--jade) 100% ); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2.5rem; overflow: hidden; } .nos-left::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 70% 60% at 30% 70%, rgba(0, 163, 181, 0.22) 0%, transparent 65% ), radial-gradient( ellipse 50% 40% at 80% 20%, rgba(201, 168, 76, 0.08) 0%, transparent 60% ); pointer-events: none; } /* Anillo decorativo giratorio */ .nos-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0, 163, 181, 0.15); animation: nos-spin 22s linear infinite; } .nos-ring:nth-child(1) { width: 280px; height: 280px; top: -40px; right: -60px; } .nos-ring:nth-child(2) { width: 180px; height: 180px; bottom: 30px; left: -40px; animation-direction: reverse; animation-duration: 16s; border-color: rgba(201, 168, 76, 0.1); } @keyframes nos-spin { to { transform: rotate(360deg); } } /* Overline encima del texto rotante */ .nos-overline { font-family: "Rajdhani", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: var(--jade2); margin-bottom: 1.2rem; position: relative; z-index: 2; } /* Bloque de texto rotante */ .nos-rotator-wrap { position: relative; z-index: 2; text-align: center; width: 100%; } .nos-slide { display: none; animation: nos-fadein 0.7s ease; } .nos-slide.active { display: block; } @keyframes nos-fadein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .nos-slide-tag { font-family: "Cinzel", serif; font-size: 0.55rem; letter-spacing: 0.35em; color: rgba(0, 163, 181, 0.5); margin-bottom: 0.8rem; } .nos-slide-title { font-family: "Playfair Display", serif; font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 0.9rem; } .nos-slide-title em { color: var(--jade2); font-style: italic; } .nos-slide-body { font-family: "Montserrat", sans-serif; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); line-height: 1.8; max-width: 320px; margin: 0 auto; } /* Dots indicadores */ .nos-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2rem; position: relative; z-index: 2; } .nos-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: background 0.3s, transform 0.3s; } .nos-dot.active { background: var(--jade2); transform: scale(1.35); } /* CTA izquierdo */ .nos-cta-left { margin-top: 2rem; position: relative; z-index: 2; display: inline-block; padding: 10px 24px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; border-radius: 24px; font-family: "Rajdhani", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 22px rgba(0, 163, 181, 0.35); transition: transform 0.3s, box-shadow 0.3s; } .nos-cta-left:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0, 163, 181, 0.5); } /* ── LADO DERECHO: PASOS + SERVICIOS ── */ .nos-right { background: #fff; padding: 3rem 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: 2rem; } /* Bloque pasos instalación */ .nos-steps-label { font-family: "Rajdhani", sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.38em; text-transform: uppercase; color: var(--jade2); margin-bottom: 1.2rem; } .nos-steps { display: flex; flex-direction: column; gap: 0.85rem; } .nos-step { display: flex; align-items: flex-start; gap: 1rem; } .nos-step-n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--jade), var(--jade2)); display: flex; align-items: center; justify-content: center; font-family: "Cinzel", serif; font-size: 0.65rem; font-weight: 700; color: #fff; box-shadow: 0 4px 12px rgba(0, 163, 181, 0.3); } .nos-step-txt strong { display: block; font-family: "Playfair Display", serif; font-size: 0.88rem; color: var(--tdark); margin-bottom: 0.18rem; } .nos-step-txt span { font-family: "Montserrat", sans-serif; font-size: 0.75rem; color: var(--tmid); line-height: 1.6; } /* Divisor */ .nos-inner-div { height: 1px; background: linear-gradient(90deg, rgba(0, 109, 119, 0.1), transparent); } /* Mini servicios chips */ .nos-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .nos-chip { display: flex; align-items: center; gap: 0.45rem; padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(0, 109, 119, 0.12); background: rgba(0, 109, 119, 0.04); font-family: "Rajdhani", sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jade); transition: background 0.25s, border-color 0.25s; cursor: default; } .nos-chip:hover { background: linear-gradient( 135deg, rgba(0, 109, 119, 0.08), rgba(0, 163, 181, 0.1) ); border-color: rgba(0, 163, 181, 0.3); } .nos-chip svg { flex-shrink: 0; } /* Stat mini row */ .nos-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(0, 109, 119, 0.08); border-radius: 10px; overflow: hidden; border: 1px solid rgba(0, 109, 119, 0.08); } .nos-mini-stat { background: #f9fcfd; padding: 0.9rem 0.6rem; text-align: center; } .nos-mini-stat-n { font-family: "Cinzel", serif; font-size: 1.15rem; font-weight: 700; color: var(--jade); line-height: 1; } .nos-mini-stat-n sup { font-size: 0.55em; vertical-align: super; color: var(--jade2); } .nos-mini-stat-l { font-family: "Montserrat", sans-serif; font-size: 0.58rem; color: var(--tmid); letter-spacing: 0.05em; margin-top: 0.3rem; text-transform: uppercase; } /* ============================================ 💬 2#. MASCOTA ============================================ */ /* ══ MASCOT FLOATING ══ */ .mascot-wrap { position: fixed; bottom: 90px; right: 22px; z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 0; cursor: pointer; } .mascot-bubble { background: linear-gradient( 135deg, rgba(0, 20, 35, 0.92), rgba(0, 30, 50, 0.88) ); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 20px 20px 4px 20px; padding: 0.7rem 1.1rem; font-family: "Space Grotesk", sans-serif; font-size: 0.99rem; color: var(--jade3); letter-spacing: 0.04em; white-space: nowrap; margin-bottom: -6px; position: relative; z-index: 2; backdrop-filter: blur(16px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); animation: bubblePop 3s ease-in-out infinite; } @keyframes bubblePop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .mascot-img { width: 140px; height: 160px; object-fit: contain; animation: mascotFloat 3.5s ease-in-out infinite, mascotShine 4s ease-in-out infinite; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 12px rgba(0, 163, 181, 0.15)); position: relative; z-index: 2; } @keyframes mascotShine { 0%, 100% { filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(0, 163, 181, 0.12)); } 30% { filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(0, 163, 181, 0.45)) drop-shadow(0 0 8px rgba(201, 168, 76, 0.2)); } 60% { filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(0, 163, 181, 0.12)); } } /* Destellos CSS alrededor de la mascota */ .mascot-wrap::before, .mascot-wrap::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .mascot-wrap::before { width: 6px; height: 6px; background: var(--jade2); box-shadow: 0 0 8px var(--jade2), 0 0 16px rgba(0, 163, 181, 0.5); top: 28px; right: 8px; animation: sparkle1 3.2s ease-in-out infinite; } .mascot-wrap::after { width: 4px; height: 4px; background: var(--gold2); box-shadow: 0 0 7px var(--gold2), 0 0 14px rgba(201, 168, 76, 0.5); top: 55px; left: 4px; animation: sparkle2 2.7s ease-in-out infinite 0.6s; } @keyframes sparkle1 { 0%, 100% { opacity: 0; transform: scale(0.5) translateY(0); } 40%, 60% { opacity: 1; transform: scale(1) translateY(-4px); } } @keyframes sparkle2 { 0%, 100% { opacity: 0; transform: scale(0.4) translateY(0); } 35%, 65% { opacity: 0.85; transform: scale(1) translateY(-3px); } } .mascot-glow { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 65px; height: 16px; background: radial-gradient( ellipse, rgba(0, 180, 200, 0.4) 0%, transparent 70% ); animation: mascotShadow 3.5s ease-in-out infinite; } @keyframes mascotShadow { 0%, 100% { width: 60px; opacity: 0.6; } 50% { width: 40px; opacity: 0.3; } } /* ============================================ 💬 22. BOTÓN FLOTANTE DE ASISTENCIA ============================================ */ .chatBubble { position: fixed; bottom: 29px; right: 29px; z-index: 9999; font-family: "Rajdhani", sans-serif; } /* Botón principal */ .chatMainBtn { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: white; border: none; border-radius: 50px; padding: 14px 22px; font-size: 1.15rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 20px rgba(0, 163, 181, 0.35); transition: all 0.15s ease; position: relative; } .chatMainBtn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(0, 163, 181, 0.5); } /* Badge rojo pulsante */ .btnBadge { position: absolute; top: -4px; right: -4px; background: #ff4757; color: white; font-size: 0.7rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: pulse 2s infinite; } /* Panel desplegable */ .chatOptions { position: absolute; bottom: 70px; right: 0; width: 320px; max-height: 85vh; overflow-y: auto; background: white; border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.25s ease; display: flex; flex-direction: column; z-index: 10000; scrollbar-width: thin; scrollbar-color: var(--jade2) #f1f5f9; } .chatOptions::-webkit-scrollbar { width: 6px; } .chatOptions::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; } .chatOptions::-webkit-scrollbar-thumb { background: var(--jade2); border-radius: 3px; } .chatBubble.active .chatOptions { opacity: 1; visibility: visible; transform: translateY(0); } /* Opciones del menú */ .chatOption { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; color: #2d3748; border-left: 4px solid transparent; transition: all 0.2s ease; background: #fafafa; } .chatOption:hover { background: #f8fafc; border-left-color: var(--jade2); transform: translateX(3px); box-shadow: inset 4px 0 0 var(--jade2); } /* Íconos de marca */ .optIcon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .optIcon svg { width: 22px; height: 22px; fill: white; } .chatOption:hover .optIcon { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .wa-icon { background: #25d366; } .fb-icon { background: #1877f2; } .ig-icon { background: linear-gradient( 135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ); } .tt-icon { background: #000000; border: 1px solid rgba(255, 255, 255, 0.1); } /* Headers de sección */ .optHeader { padding: 12px 18px 8px; font-family: "Rajdhani", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jade); background: rgba(0, 163, 181, 0.05); border-left: 3px solid var(--jade2); margin: 0; } /* Separador */ .optDivider { height: 1px; background: linear-gradient( 90deg, transparent, rgba(0, 163, 181, 0.15), transparent ); margin: 8px 0; } .optHeader + .chatOption { margin-top: 2px; } /* Info de la opción */ .optInfo { display: flex; flex-direction: column; gap: 2px; } .optTitle { font-weight: 600; font-size: 0.95rem; color: #1a202c; } .optDesc { font-size: 0.8rem; color: #718096; line-height: 1.3; } /* Botón de cierre (X) */ .chatClose { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #e2e8f0; color: #718096; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 10001; } .chatClose:hover { background: #fed7d7; color: #c53030; border-color: #feb2b2; } /* Animación de entrada escalonada */ /* Animación de entrada escalonada - CORREGIDA */ .chatBubble.active .chatOption { animation: slideIn 0.35s ease forwards; opacity: 0; transform: translateX(-15px); } /* Pedregal - Central */ .chatBubble.active .optHeader:nth-of-type(1) { animation: slideIn 0.3s ease forwards; } .chatBubble.active .chatOption:nth-of-type(1) { animation-delay: 0.08s; } .chatBubble.active .chatOption:nth-of-type(2) { animation-delay: 0.16s; } /* Otras Sedes */ .chatBubble.active .optHeader:nth-of-type(2) { animation: slideIn 0.3s ease forwards; animation-delay: 0.24s; } .chatBubble.active .chatOption:nth-of-type(3) { animation-delay: 0.32s; } .chatBubble.active .chatOption:nth-of-type(4) { animation-delay: 0.4s; } .chatBubble.active .chatOption:nth-of-type(5) { animation-delay: 0.48s; } /* Redes Sociales */ .chatBubble.active .optHeader:nth-of-type(3) { animation: slideIn 0.3s ease forwards; animation-delay: 0.56s; } .chatBubble.active .chatOption:nth-of-type(6) { animation-delay: 0.64s; } .chatBubble.active .chatOption:nth-of-type(7) { animation-delay: 0.72s; } .chatBubble.active .chatOption:nth-of-type(8) { animation-delay: 0.8s; } @keyframes slideIn { to { opacity: 1; transform: translateX(0); } } /* Accesibilidad */ .chatOption:focus-visible, .chatMainBtn:focus-visible, .chatClose:focus-visible { outline: 3px solid var(--jade2); outline-offset: 2px; } /* Móvil del chat */ @media (max-width: 990px) { .chatBubble { bottom: 16px; right: 16px; } .chatOptions { max-height: 85vh; width: 280px; bottom: 65px; } .chatMainBtn .btnText { display: none; } } /* Stats extravagante móvil */ #statsBar > div { grid-template-columns: repeat(2, 1fr) !important; } .sbar-item { border-right: none !important; border-bottom: 1px solid rgba(0, 163, 181, 0.1); } /* ============================================ 🦶 23. FOOTER ============================================ */ footer { background: linear-gradient(180deg, #010409 0%, #020710 40%, #030a15 100%); border-top: 1px solid rgba(0, 163, 181, 0.12); padding: 5rem 2rem 2rem; position: relative; overflow: hidden; z-index: 10; } /* ═══════════════════════════════════════════════════════════════ CABLE VISIÓN MAJES — CORRECCIONES CSS 1. Footer siempre 4 columnas (con ajuste elegante por screen) 2. Media query 1320px–1550px añadida 3. Media query 1550px–1920px para pantallas grandes Autor: Diseño Profesional CvM ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════ FOOTER — 4 COLUMNAS SIEMPRE ══════════════════════════════ */ .finn { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto 3rem; align-items: start; } /* Branding column */ .fbr img { height: 38px; margin-bottom: 0.8rem; filter: drop-shadow(0 0 8px rgba(0, 163, 181, 0.38)); } .fbr p { font-size: 0.85rem; color: var(--tlight); line-height: 1.7; margin-bottom: 0.6rem; } .ftag { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 0.82rem; color: var(--gold); margin-top: 0.6rem; } /* ============================================================ 📢 ANUNCIO FLOTANTE — SISTEMA COMPLETO CORREGIDO ============================================================ */ /* ══ AD TRIGGER — clean, no writing-mode conflict ══ */ /* Trigger solo en móvil */ /* ── Trigger: SOLO en pantallas grandes (≥769px) ── */ @media (max-width: 768px) { #ad-trigger { display: none !important; } } #ad-trigger { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 8900; display: flex; flex-direction: column; align-items: center; gap: 8px; background: linear-gradient( 180deg, rgba(1, 4, 10, 0.98) 0%, rgba(160, 118, 46, 0.22) 50%, rgba(1, 4, 10, 0.98) 100% ); backdrop-filter: blur(24px) saturate(180%); border: none; border-radius: 0 16px 16px 0; padding: 22px 11px; cursor: pointer; color: var(--gold2); box-shadow: 4px 0 28px rgba(201, 168, 76, 0.28), inset -1px 0 0 rgba(201, 168, 76, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.4s ease, box-shadow 0.35s ease, background 0.3s ease; } #ad-trigger.visible { opacity: 1; pointer-events: all; } #ad-trigger:hover { background: linear-gradient( 180deg, rgba(30, 20, 5, 0.98) 0%, rgba(160, 118, 46, 0.4) 50%, rgba(30, 20, 5, 0.98) 100% ); box-shadow: 5px 0 40px rgba(201, 168, 76, 0.55), inset -1px 0 0 rgba(201, 168, 76, 0.7); } /* Border dorado animado */ #ad-trigger::before { content: ""; position: absolute; top: 15%; bottom: 15%; right: 0; width: 2px; background: linear-gradient( 180deg, transparent, var(--gold2), var(--jade2), var(--gold2), transparent ); border-radius: 2px; animation: triggerBorderFlow 2.5s ease-in-out infinite; } @keyframes triggerBorderFlow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } .ad-trigger-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--goldd), var(--gold2)); border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 18px rgba(201, 168, 76, 0.6); flex-shrink: 0; animation: adIconPulse 2.2s ease-in-out infinite; } .ad-trigger-icon svg { stroke: var(--ink); fill: none; } @keyframes adIconPulse { 0%, 100% { box-shadow: 0 0 10px rgba(201, 168, 76, 0.55); transform: scale(1); } 50% { box-shadow: 0 0 28px rgba(201, 168, 76, 0.95); transform: scale(1.08); } } .ad-trigger-text { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-family: "Rajdhani", sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.3em; color: rgba(232, 199, 106, 0.85); flex-shrink: 0; } .ad-trigger-badge { background: linear-gradient(135deg, var(--goldd), var(--gold2)); color: var(--ink); font-family: "Rajdhani", sans-serif; font-size: 0.46rem; font-weight: 900; padding: 3px 6px; border-radius: 5px; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; animation: adBadgePulse 2.5s ease-in-out infinite; } @keyframes adBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.55); } 50% { box-shadow: 0 0 0 5px rgba(201, 168, 76, 0); } } #ad-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 8901; pointer-events: none; /* SIN backdrop-filter: causa que el panel aparezca borroso en Chrome/Edge al redimensionar la ventana */ transition: background 0.35s ease; } #ad-overlay.open { background: rgba(0, 5, 12, 0.82); pointer-events: all; } #ad-panel { position: fixed; top: 0; left: 0; width: min(460px, 95vw); height: 100vh; z-index: 8902; /* isolation: isolate crea stacking context propio — evita ser afectado por backdrop-filter de elementos hermanos (bug conocido en Chrome) */ isolation: isolate; background: radial-gradient( ellipse 100% 45% at 50% 0%, rgba(0, 163, 181, 0.2) 0%, transparent 55% ), radial-gradient( ellipse 80% 40% at 100% 60%, rgba(201, 168, 76, 0.1) 0%, transparent 50% ), radial-gradient( ellipse 60% 30% at 0% 100%, rgba(0, 109, 119, 0.12) 0%, transparent 45% ), linear-gradient(175deg, #010810 0%, #030e1f 35%, #05152a 65%, #020b18 100%); border-right: 1px solid rgba(0, 163, 181, 0.3); box-shadow: 8px 0 60px rgba(0, 163, 181, 0.2), 20px 0 50px rgba(0, 0, 0, 0.9), inset -1px 0 0 rgba(0, 163, 181, 0.15); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; transform: translateX(-110%); transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(0, 163, 181, 0.4) #040d1c; /* will-change solo cuando está animando — gestionado por JS */ } #ad-panel::-webkit-scrollbar { width: 3px; } #ad-panel::-webkit-scrollbar-track { background: #0a1422; } #ad-panel::-webkit-scrollbar-thumb { background: rgba(0, 163, 181, 0.4); border-radius: 3px; } #ad-panel.open { transform: translateX(0); -webkit-transform: translateX(0); } .ad-close { position: sticky; top: 0; z-index: 20; display: flex; align-self: flex-end; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 14px 14px 0 auto; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .ad-close:hover { background: rgba(0, 163, 181, 0.25); border-color: rgba(0, 163, 181, 0.6); color: #fff; transform: rotate(90deg); } .ad-panel-head { background: radial-gradient( ellipse 90% 60% at 50% 0%, rgba(0, 163, 181, 0.22) 0%, transparent 65% ), radial-gradient( ellipse 50% 50% at 15% 100%, rgba(201, 168, 76, 0.12) 0%, transparent 60% ), linear-gradient(175deg, #010712 0%, #071628 100%); padding: 2rem 1.8rem 1.8rem; border-bottom: 1px solid rgba(0, 163, 181, 0.18); position: relative; overflow: hidden; flex-shrink: 0; text-align: center; } /* Línea superior brillante animada */ .ad-panel-head::before { content: ""; position: absolute; top: 0; left: -100%; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--jade2), var(--gold2), var(--jade2), transparent ); animation: adHeadShine 4s ease-in-out infinite; z-index: 5; } @keyframes adHeadShine { 0%, 100% { left: -100%; } 50% { left: 100%; } } /* Partículas de fondo del header */ .ad-panel-head::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 20% 80%, rgba(201, 168, 76, 0.08) 0%, transparent 40% ), radial-gradient( circle at 80% 20%, rgba(0, 163, 181, 0.1) 0%, transparent 40% ); pointer-events: none; } .ad-logo-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 1.2rem; position: relative; z-index: 2; } /* Logo grande y brillante */ .ad-logo-row img { height: 56px; filter: drop-shadow(0 0 16px rgba(0, 163, 181, 0.9)) drop-shadow(0 0 40px rgba(0, 163, 181, 0.4)); animation: adLogoGlow 3s ease-in-out infinite; transition: transform 0.3s ease; cursor: default; } .ad-logo-row img:hover { transform: scale(1.08) rotate(-2deg); filter: drop-shadow(0 0 24px rgba(0, 163, 181, 1)) drop-shadow(0 0 60px rgba(0, 163, 181, 0.6)); } @keyframes adLogoGlow { 0%, 100% { filter: drop-shadow(0 0 12px rgba(0, 163, 181, 0.7)) drop-shadow(0 0 30px rgba(0, 163, 181, 0.3)); } 50% { filter: drop-shadow(0 0 24px rgba(0, 163, 181, 1)) drop-shadow(0 0 60px rgba(0, 163, 181, 0.55)) drop-shadow(0 0 90px rgba(201, 168, 76, 0.25)); } } .ad-head-brand { font-family: "Cinzel", serif; font-size: 0.65rem; font-weight: 700; color: var(--jade2); letter-spacing: 0.3em; text-transform: uppercase; text-shadow: 0 0 20px rgba(0, 163, 181, 0.5); } .ad-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 1rem; font-style: italic; color: var(--gold); letter-spacing: 0.2em; margin-bottom: 0.7rem; position: relative; z-index: 2; text-align: center; text-shadow: 0 0 20px rgba(201, 168, 76, 0.4); } .ad-head-title { font-family: "Cinzel", serif; font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 900; background: linear-gradient( 135deg, #ffffff 0%, var(--gold2) 35%, var(--jade2) 70%, #ffffff 100% ); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: adTitleShimmer 4s ease-in-out infinite; line-height: 1.1; margin-bottom: 0.5rem; position: relative; z-index: 2; letter-spacing: 0.05em; text-align: center; cursor: default; } @keyframes adTitleShimmer { 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 8px rgba(0, 163, 181, 0.3)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.5)); } } .ad-head-title em { font-style: normal; display: block; font-size: 0.55em; background: linear-gradient(135deg, var(--jade2), var(--sky), var(--gold2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 0.25em; margin-top: 0.2rem; } .ad-head-sub { font-family: "Montserrat", sans-serif; font-size: 0.76rem; font-weight: 400; color: rgba(200, 220, 235, 0.65); line-height: 1.65; position: relative; z-index: 2; text-align: center; } .ad-img-wrap { position: relative; overflow: hidden; flex-shrink: 0; width: 100%; background: #030a0e; } .ad-img { width: 100%; height: auto; display: block; object-fit: contain; object-position: center; filter: brightness(0.92) saturate(1.1); transition: transform 0.5s ease, filter 0.3s ease; } .ad-img-wrap:hover .ad-img { transform: scale(1.03); filter: brightness(1) saturate(1.2); } .ad-img-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(4, 9, 15, 0.5) 0%, transparent 25%, transparent 85%, rgba(4, 9, 15, 0.25) 100% ); pointer-events: none; } .ad-img-tag { position: absolute; top: 16px; left: 16px; background: linear-gradient(135deg, #c9a84c, #e8c76a); color: #04090f; font-family: "Rajdhani", sans-serif; font-weight: 900; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 5px 14px; border-radius: 50px; box-shadow: 0 4px 15px rgba(201, 168, 76, 0.5); } .ad-body { padding: 1.6rem 1.8rem 2rem; display: flex; flex-direction: column; gap: 1rem; } .ad-offer-card { background: linear-gradient( 135deg, rgba(0, 109, 119, 0.18), rgba(0, 163, 181, 0.12) ); border: 1px solid rgba(0, 163, 181, 0.35); border-radius: 12px; padding: 1.2rem 1.4rem; position: relative; overflow: hidden; } .ad-offer-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #006d77, #00a3b5, #c9a84c); } .ad-offer-badge { display: inline-block; background: linear-gradient(135deg, #c9a84c, #e8c76a); color: #04090f; font-family: "Rajdhani", sans-serif; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.15em; padding: 3px 10px; border-radius: 50px; margin-bottom: 0.7rem; } .ad-offer-title { font-family: "Cinzel", serif; font-size: 1.15rem; color: #fff; margin-bottom: 0.4rem; letter-spacing: 0.04em; } .ad-offer-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 0.4rem; flex-wrap: wrap; } .ad-price-now { font-family: "Cinzel", serif; font-size: 1.6rem; font-weight: 700; color: #00a3b5; text-shadow: 0 0 20px rgba(0, 163, 181, 0.5); letter-spacing: 0.04em; } .ad-price-mes { font-family: "Rajdhani", sans-serif; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); } .ad-offer-sub { font-family: "Montserrat", sans-serif; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); line-height: 1.55; max-width: 90%; } .ad-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .ad-benefits li { display: flex; align-items: center; gap: 10px; font-family: "Montserrat", sans-serif; font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); line-height: 1.4; } .ad-dot { width: 6px; height: 6px; border-radius: 50%; background: #00a3b5; flex-shrink: 0; box-shadow: 0 0 8px rgba(0, 163, 181, 0.7); } .ad-vigencia { display: flex; align-items: center; gap: 7px; font-family: "Rajdhani", sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.38); border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 0.8rem; } .ad-vigencia svg { flex-shrink: 0; opacity: 0.5; } .ad-cta-row { display: flex; flex-direction: column; gap: 8px; } .ad-btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; background: linear-gradient(135deg, #006d77, #00a3b5); color: #fff; border: none; border-radius: 10px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 28px rgba(0, 163, 181, 0.45); transition: all 0.2s; cursor: pointer; width: 100%; } .ad-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0, 163, 181, 0.65); } .ad-btn-ghost { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; background: linear-gradient( 135deg, rgba(0, 109, 119, 0.18), rgba(0, 163, 181, 0.1) ); color: var(--jade2); border: 1px solid rgba(0, 163, 181, 0.3); border-radius: 12px; font-family: "Rajdhani", sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: all 0.25s ease; cursor: pointer; width: 100%; box-shadow: 0 4px 16px rgba(0, 163, 181, 0.12); } .ad-btn-ghost:hover { background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; border-color: transparent; box-shadow: 0 8px 28px rgba(0, 163, 181, 0.4); transform: translateY(-2px); } /* Elegante dismiss */ .ad-no-show { display: flex; align-items: center; gap: 8px; font-family: "Cormorant Garamond", serif; font-size: 0.75rem; font-style: italic; color: rgba(200, 210, 225, 0.3); cursor: pointer; justify-content: center; padding-bottom: 0.5rem; user-select: none; transition: color 0.3s; letter-spacing: 0.06em; } .ad-no-show:hover { color: rgba(200, 210, 225, 0.55); } .ad-no-show input[type="checkbox"] { width: 13px; height: 13px; accent-color: var(--jade2); cursor: pointer; flex-shrink: 0; opacity: 0.5; } @media (max-width: 600px) { #ad-panel { width: 100vw; } .ad-panel-head { padding: 0 1.4rem 1.4rem; padding-top: 10px; } .ad-body { padding: 1.2rem 1.4rem 2rem; } } /* ← Regla conflictiva eliminada: el panel usa transform, no left */ .chtab-wrap { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem; padding: 0.5rem; background: rgba(0, 109, 119, 0.04); border: 1px solid rgba(0, 109, 119, 0.08); border-radius: 14px; max-width: 780px; margin-left: auto; margin-right: auto; } .chtab { padding: 10px 22px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 109, 119, 0.1); border-radius: 10px; color: var(--tmid); font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .chtab:hover { background: rgba(0, 109, 119, 0.08); border-color: rgba(0, 109, 119, 0.2); color: var(--jade); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 109, 119, 0.12); } .chtab.act { background: linear-gradient(135deg, var(--jade), var(--jade2)); border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(0, 163, 181, 0.35), 0 0 0 3px rgba(0, 163, 181, 0.12); transform: translateY(-2px); } /* Animación de entrada de canales */ @keyframes chCardIn { from { opacity: 0; transform: translateY(20px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .chpane.act .chc { animation: chCardIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .chpane.act .chc:nth-child(1) { animation-delay: 0.03s; } .chpane.act .chc:nth-child(2) { animation-delay: 0.06s; } .chpane.act .chc:nth-child(3) { animation-delay: 0.09s; } .chpane.act .chc:nth-child(4) { animation-delay: 0.12s; } .chpane.act .chc:nth-child(5) { animation-delay: 0.15s; } .chpane.act .chc:nth-child(6) { animation-delay: 0.18s; } .chpane.act .chc:nth-child(7) { animation-delay: 0.21s; } .chpane.act .chc:nth-child(8) { animation-delay: 0.24s; } /* ============================================ 🔷 BARRA DE OFERTAS — ULTRA PREMIUM (reemplaza .sbar) ============================================ */ .sbar { position: relative; z-index: 10; height: clamp(32px, 8vw, 85px); background: linear-gradient( 90deg, var(--jade) 0%, var(--jade2) 50%, var(--sky2) 100% ); background-size: 200% 100%; display: flex; animation: sbarGradientShift 8s ease infinite; overflow: hidden; align-items: center; /* Centra verticalmente el contenido */ /* border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.06); */ } /* Degradado animado de fondo */ @keyframes sbarGradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Brillo superior metálico animado (más grande) */ .sbar-shine { position: absolute; top: 0; left: -100%; width: 50%; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.4) 20%, rgba(232, 199, 106, 1) 50%, rgba(255, 255, 255, 0.4) 80%, transparent 100% ); animation: sbarShineSweep 4s ease-in-out infinite; z-index: 12; box-shadow: 0 0 20px rgba(232, 199, 106, 0.8), 0 0 40px rgba(232, 199, 106, 0.4); } @keyframes sbarShineSweep { 0%, 100% { left: -50%; opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { left: 150%; opacity: 0; } } /* Segundo brillo más lento */ .sbar-shine::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; filter: blur(3px); opacity: 0.6; } /* Líneas de luz superior e inferior */ .sbar-glow-line { position: absolute; left: 0; right: 0; height: 1px; z-index: 11; pointer-events: none; } .sbar-glow-line.top { top: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.3) 15%, rgba(232, 199, 106, 0.6) 50%, rgba(255, 255, 255, 0.3) 85%, transparent 100% ); } .sbar-glow-line.bottom { bottom: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.2) 80%, transparent 100% ); } /* Overlay cristal sutil */ .sbar::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%, rgba(0, 0, 0, 0.05) 100% ); z-index: 1; pointer-events: none; } /* Track principal */ .sbar-track { display: flex; align-items: center; height: 110px; position: relative; z-index: 5; } /* ============================================ 🌟 BADGE "OFERTAS" — TIPOGRAFÍA PREMIUM DORADA ============================================ */ .sbar-badge { flex-shrink: 0; height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 35px; /* Aumentado de 32px */ background: linear-gradient(135deg, #04090f 0%, #0a1525 40%, #0f1f35 100%); background-size: 200% 200%; animation: badgeBgShift 6s ease infinite; /* CAMBIO DE TIPOGRAFÍA - Usar Cinzel en vez de Rajdhani */ font-family: "Cinzel", serif; /* Cambiado */ font-weight: 700; /* Cambiado */ font-size: 1.25rem; letter-spacing: 0.45em; /* Aumentado */ color: #fff; text-transform: uppercase; position: relative; z-index: 8; border-right: 3px solid var(--gold); box-shadow: 6px 0 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(232, 199, 106, 0.15), inset 0 0 40px rgba(0, 163, 181, 0.08); text-shadow: 0 0 10px rgba(232, 199, 106, 0.6), 0 0 20px rgba(201, 168, 76, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8); } @keyframes badgeBgShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Brillo interno del badge */ .sbar-badge::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(232, 199, 106, 0.08) 50%, transparent 100% ); animation: badgeInnerShine 3s ease-in-out infinite; } @keyframes badgeInnerShine { 0%, 100% { left: -100%; } 50% { left: 100%; } } /* Triángulo decorativo dorado */ .sbar-badge::after { content: ""; position: absolute; right: -14px; top: 0; border-top: 42px solid var(--gold); border-right: 14px solid transparent; filter: drop-shadow(0 0 10px rgba(232, 199, 106, 0.8)); } /* Centellas doradas a los lados del badge */ .sbar-badge-sparkle-left, .sbar-badge-sparkle-right { font-size: 0.9rem; color: var(--gold2); text-shadow: 0 0 10px var(--gold2), 0 0 20px var(--gold); animation: sparklePulse 1.5s ease-in-out infinite; flex-shrink: 0; } .sbar-badge-sparkle-left { animation-delay: 0s; } .sbar-badge-sparkle-right { animation-delay: 0.75s; } @keyframes sparklePulse { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* Punto pulsante dorado más grande */ .sbar-badge-dot { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient( circle, #fff 0%, var(--gold2) 40%, var(--gold) 100% ); animation: sbarPulse 1.5s ease-in-out infinite; box-shadow: 0 0 12px var(--gold2), 0 0 24px var(--gold); flex-shrink: 0; } @keyframes sbarPulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 12px var(--gold2), 0 0 24px var(--gold); } 50% { opacity: 0.5; transform: scale(0.7); box-shadow: 0 0 6px var(--gold2), 0 0 12px var(--gold); } } /* ============================================ 📜 ZONA DE SCROLL INFINITO ============================================ */ .sbar-scroll { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; /* Máscara de fade en los extremos */ mask-image: linear-gradient( 90deg, transparent 0%, #000 3%, #000 97%, transparent 100% ); -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 3%, #000 97%, transparent 100% ); } .sbar-scroll-inner { display: flex; align-items: center; white-space: nowrap; animation: sbarSlide 35s linear infinite; will-change: transform; } .sbar-scroll:hover .sbar-scroll-inner { animation-play-state: paused; } @keyframes sbarSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ============================================ ✍️ ITEMS DE TEXTO — LETRAS MÁS GRANDES ============================================ */ .sbar-item { font-family: "Rajdhani", sans-serif; /* Mantener o cambiar a 'Montserrat' */ font-size: 1.4rem; /* Aumentado de 1.15rem - MÁS GRANDE */ font-weight: 485; color: #fff; letter-spacing: 0.08em; /* Aumentado ligeramente */ padding: 0 2.5rem; /* Aumentado de 2.5rem */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.2); /* Mejor sombra */ transition: color 0.3s, text-shadow 0.3s, transform 0.3s; cursor: default; } /* Hover dorado brillante */ .sbar-item:hover { color: var(--gold2); text-shadow: 0 0 15px rgba(232, 199, 106, 0.6), 0 0 30px rgba(201, 168, 76, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); transform: scale(1.05); } /* ============================================ — CENTELLAS DORADAS SEPARADORAS ============================================ */ .sbar-sep { font-size: 1.4rem; /* Aumentado de 0.85rem */ color: var(--gold2); text-shadow: 0 0 10px rgba(232, 199, 106, 0.8), 0 0 20px rgba(201, 168, 76, 0.5), 0 0 30px rgba(232, 199, 106, 0.3); flex-shrink: 0; animation: sepTwinkle 2s ease-in-out infinite; display: inline-block; } /* Cada centella con delay diferente */ .sbar-sep:nth-child(2) { animation-delay: 0s; } .sbar-sep:nth-child(4) { animation-delay: 0.3s; } .sbar-sep:nth-child(6) { animation-delay: 0.6s; } .sbar-sep:nth-child(8) { animation-delay: 0.9s; } .sbar-sep:nth-child(10) { animation-delay: 1.2s; } .sbar-sep:nth-child(12) { animation-delay: 1.5s; } .sbar-sep:nth-child(14) { animation-delay: 1.8s; } @keyframes sepTwinkle { 0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); text-shadow: 0 0 5px rgba(232, 199, 106, 0.3); } 50% { opacity: 1; transform: scale(1.3) rotate(15deg); text-shadow: 0 0 15px rgba(232, 199, 106, 1), 0 0 30px rgba(201, 168, 76, 0.8), 0 0 45px rgba(232, 199, 106, 0.5); } } /* Columnas de enlaces */ .fc h5 { font-family: "Cinzel", serif; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jade2); margin-bottom: 0.8rem; } .fc ul { list-style: none; padding: 0; margin: 0; } .fc li { margin-bottom: 0.5rem; } .fc a { text-decoration: none; color: var(--tlight); font-size: 0.82rem; transition: color 0.3s; } .fc a:hover { color: var(--jade2); } /* Barra inferior */ /* Barra inferior */ .fbot { border-top: 1px solid rgba(255, 255, 255, 0.04); padding-top: 1.2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; max-width: 1200px; margin: 0 auto; } .fbot .hl { color: var(--gold); } .fvisits { font-size: 0.75rem; color: rgba(122, 154, 170, 0.7); letter-spacing: 0.04em; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes shimmer { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } } .nsrv-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(0, 163, 181, 0.15); } .nsrv-card:hover > div:first-child { transform: scaleX(1); } .fbot p { font-size: 0.85rem; color: var(--tlight); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fbot .hl { color: var(--gold); } @keyframes floatSlow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-30px); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 163, 181, 0.1); } 50% { box-shadow: 0 0 0 10px rgba(0, 163, 181, 0); } } /* Animación de texto que aparece y desaparece */ .text-fade { opacity: 0 !important; transform: translateY(10px) !important; } /* ============================================ 📊 ANIMACIÓN DE CONTADOR DE ESTADÍSTICAS ============================================ */ .stat-number { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .stat-number.animate { opacity: 1; transform: translateY(0); } /* Efecto de brillo en el número destacado (800 Mbps) */ .stat-number[data-target="800"] { text-shadow: 0 0 30px rgba(255, 255, 255, 0.3); animation: statGlow 3s ease-in-out infinite; } @keyframes statGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } } /* Responsive para móviles */ @media (max-width: 768px) { .stat-number { font-size: 2.2rem !important; } } @keyframes orbPulse { 0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.12); } } @keyframes lineGlow { 0%, 100% { opacity: 0.3; width: 24px; } 50% { opacity: 1; width: 52px; } } @keyframes lineGlowGold { 0%, 100% { opacity: 0.3; width: 24px; } 50% { opacity: 1; width: 52px; } } .futbol-banner { position: relative; max-width: 100%; margin: 0 0 2.5rem 0; background: linear-gradient( 135deg, #030a0e 0%, #06121c 30%, #0a1c10 60%, #031008 100% ); border-top: 3px solid rgba(0, 163, 181, 0.4); border-bottom: 3px solid rgba(201, 168, 76, 0.5); overflow: hidden; display: flex; align-items: center; min-height: 180px; box-shadow: 0 0 60px rgba(0, 163, 181, 0.25), 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 0 80px rgba(0, 163, 181, 0.08); overflow: hidden; min-height: 220px; gap: 0; } /* CAPAS DE FONDO */ .fb-bg-layer { position: absolute; inset: 0; background: radial-gradient( ellipse 50% 80% at 5% 50%, rgba(0, 163, 181, 0.15) 0%, transparent 60% ), radial-gradient( ellipse 40% 70% at 95% 50%, rgba(201, 168, 76, 0.12) 0%, transparent 60% ), radial-gradient( ellipse 30% 50% at 50% 100%, rgba(0, 80, 0, 0.18) 0%, transparent 60% ); pointer-events: none; } .fb-bg-lines { position: absolute; inset: 0; background-image: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 60px ), repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.012) 0px, rgba(255, 255, 255, 0.012) 1px, transparent 1px, transparent 60px ); pointer-events: none; opacity: 0.6; } /* TROFEO FLOTANTE */ .fb-trophy { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); font-size: 10.5rem; opacity: 0.22; pointer-events: none; animation: trophyPulse 4s ease-in-out infinite; filter: drop-shadow(0 10px 40px rgba(255, 215, 80, 0.12)); } @keyframes fbTrophyFloat { 0%, 100% { transform: translateY(-50%) rotate(-5deg); opacity: 0.04; } 50% { transform: translateY(calc(-50% - 12px)) rotate(5deg); opacity: 0.07; } } @keyframes trophyPulse { 0% { transform: translateY(-50%) scale(1); opacity: 0.18; } 50% { transform: translateY(calc(-50% - 12px)) scale(1.06); opacity: 0.34; } 100% { transform: translateY(-50%) scale(1); opacity: 0.18; } } /* LADO IZQUIERDO */ .fb-left { display: flex; align-items: center; gap: 1.6rem; padding: 2rem 2rem 2rem 2.5rem; flex-shrink: 0; position: relative; z-index: 2; } /* ESCUDO */ .fb-shield-wrap { position: relative; flex-shrink: 0; } .fb-shield { width: 72px; height: 82px; background: linear-gradient( 145deg, var(--jade) 0%, var(--jade2) 50%, var(--sky2) 100% ); clip-path: polygon(50% 0%, 100% 15%, 100% 70%, 50% 100%, 0% 70%, 0% 15%); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(0, 163, 181, 0.5), 0 0 60px rgba(0, 163, 181, 0.2); animation: shieldGlow 3s ease-in-out infinite; } @keyframes shieldGlow { 0%, 100% { box-shadow: 0 8px 30px rgba(0, 163, 181, 0.5), 0 0 60px rgba(0, 163, 181, 0.2); } 50% { box-shadow: 0 8px 40px rgba(0, 163, 181, 0.8), 0 0 80px rgba(0, 163, 181, 0.4); } } .fb-shield-icon { font-size: 1.8rem; line-height: 1; } .fb-shield-star { font-size: 0.7rem; color: rgba(255, 255, 255, 0.8); margin-top: -2px; } .fb-shield-pulse { position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid rgba(0, 163, 181, 0.3); animation: shieldPulse 2.5s ease-in-out infinite; } @keyframes shieldPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } } /* TEXTO IZQUIERDO */ .fb-text-block { z-index: 2; } .fb-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 0.82rem; font-style: italic; color: var(--gold); letter-spacing: 0.2em; margin-bottom: 0.4rem; opacity: 0.9; } .fb-title { display: flex; flex-direction: column; line-height: 1.1; margin-bottom: 0.5rem; } .fb-title-new { font-family: "Cinzel", serif; font-size: clamp(0.9rem, 1.8vw, 1.15rem); color: var(--gold2); letter-spacing: 0.3em; font-weight: 400; } .fb-title-canales { font-family: "Cinzel", serif; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; color: #fff; letter-spacing: 0.06em; text-shadow: 0 2px 20px rgba(255, 255, 255, 0.2); } .fb-title-futbol { font-family: "Cinzel", serif; font-size: clamp(1.4rem, 2.6vw, 2.4rem); font-weight: 800; background: linear-gradient(90deg, #ffd97d 0%, #ffffff 45%, #00d1e8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 0.08em; text-shadow: 0 6px 28px rgba(0, 163, 181, 0.12); animation: glowText 3s ease-in-out infinite; } @keyframes glowText { 0% { filter: drop-shadow(0 0 8px rgba(0, 163, 181, 0.18)); } 50% { filter: drop-shadow(0 0 22px rgba(201, 168, 76, 0.45)); } 100% { filter: drop-shadow(0 0 8px rgba(0, 163, 181, 0.18)); } } .fb-subtitle { font-family: "Montserrat", sans-serif; font-size: 0.78rem; font-weight: 300; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.04em; } /* DIVIDER */ .fb-divider { width: 1px; height: 120px; background: linear-gradient( 180deg, transparent, rgba(0, 163, 181, 0.4) 30%, rgba(201, 168, 76, 0.5) 70%, transparent ); flex-shrink: 0; margin: 0 1rem; } /* LADO DERECHO */ .fb-right { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.5rem 2rem 1.5rem 1rem; flex: 1; position: relative; z-index: 2; } .fb-channels-label { font-family: "Rajdhani", sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); opacity: 0.8; } /* FILA DE CANALES */ .fb-channels-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; } .fb-ch-card { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; padding: 8px 12px; transition: all 0.25s; cursor: default; } .fb-ch-card:hover { background: rgba(0, 163, 181, 0.12); border-color: rgba(0, 163, 181, 0.35); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .fb-ch-card.liga1max { border-color: rgba(201, 168, 76, 0.25); } .fb-ch-card.liga1max:hover { background: rgba(201, 168, 76, 0.1); border-color: rgba(201, 168, 76, 0.5); } .fb-ch-img-wrap { width: 44px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fb-ch-img-wrap img { max-width: 44px; max-height: 28px; object-fit: contain; filter: brightness(1.1) saturate(1.1); } .fb-ch-emoji-only { font-size: 1.6rem; } .fb-ch-emoji { font-size: 1.6rem; } .fb-ch-info { display: flex; flex-direction: column; gap: 2px; } .fb-ch-name { font-family: "Rajdhani", sans-serif; font-size: 0.75rem; font-weight: 700; color: #fff; letter-spacing: 0.08em; white-space: nowrap; } .fb-ch-tag { font-family: "Rajdhani", sans-serif; font-size: 0.55rem; font-weight: 700; color: var(--jade2); letter-spacing: 0.12em; text-transform: uppercase; } .fb-ch-card.liga1max .fb-ch-tag { color: var(--gold2); } /* CTA */ .fb-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; text-decoration: none; border-radius: 8px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 4px 20px rgba(0, 163, 181, 0.4); transition: all 0.2s; align-self: flex-start; } .fb-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0, 163, 181, 0.65); } /* RESPONSIVE */ @media (max-width: 860px) { .futbol-banner { flex-direction: column; min-height: auto; } .fb-left { padding: 1.8rem 1.5rem 1rem; } .fb-divider { width: 80%; height: 1px; margin: 0 auto; } .fb-right { padding: 1rem 1.5rem 1.8rem; } .fb-channels-row { justify-content: center; } .fb-cta-btn { align-self: center; } .fb-title-canales { font-size: clamp(1.6rem, 5vw, 2.2rem); } } @media (max-width: 500px) { .fb-ch-card { padding: 6px 8px; } .fb-ch-img-wrap { width: 36px; height: 24px; } .fb-ch-img-wrap img { max-width: 36px; } } /* ═══════════════════════════════════════════ SECCIÓN PRINCIPAL — FONDO OSCURO CON PARTÍCULAS ══════════════════════════════════════════ */ .srv-section { background: radial-gradient( ellipse 80% 50% at 10% 20%, rgba(0, 163, 181, 0.14) 0%, transparent 60% ), radial-gradient( ellipse 60% 40% at 90% 80%, rgba(201, 168, 76, 0.09) 0%, transparent 55% ), radial-gradient( ellipse 50% 60% at 50% 110%, rgba(0, 109, 119, 0.1) 0%, transparent 50% ), linear-gradient(170deg, #04090f 0%, #060d1a 35%, #091522 65%, #04090f 100%); padding: 5rem 2rem 6rem; position: relative; overflow: hidden; font-family: "Montserrat", sans-serif; color: var(--twhite); } /* ❌ CUADRÍCULA ELIMINADA — No más grid como cuaderno */ /* Orbes de fondo */ .srv-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); } .srv-orb-1 { width: 500px; height: 500px; background: radial-gradient( circle, rgba(0, 163, 181, 0.08) 0%, transparent 70% ); top: -100px; left: -100px; animation: orbFloat 12s ease-in-out infinite; } .srv-orb-2 { width: 400px; height: 400px; background: radial-gradient( circle, rgba(201, 168, 76, 0.07) 0%, transparent 70% ); bottom: -80px; right: -80px; animation: orbFloat 15s ease-in-out infinite 3s; } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -30px); } } /* ── HEADER ── */ .srv-header { text-align: center; margin-bottom: 4rem; position: relative; z-index: 2; } .srv-overline { display: inline-flex; align-items: center; gap: 12px; font-family: "Rajdhani", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: var(--jade2); margin-bottom: 1rem; } .srv-overline::before, .srv-overline::after { content: ""; display: block; width: 45px; height: 1px; background: linear-gradient(90deg, transparent, var(--jade2)); } .srv-overline::after { transform: scaleX(-1); } .srv-title { font-family: "Cinzel", serif; font-size: clamp(2.4rem, 4.5vw, 3.6rem); /* ← LETRAS MÁS GRANDES */ font-weight: 900; color: var(--twhite); letter-spacing: 0.05em; line-height: 1.15; } .srv-title .hl { background: linear-gradient(135deg, var(--jade) 0%, var(--jade2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── TABS SELECTOR ── */ .srv-tabs { display: flex; justify-content: center; gap: 0.6rem; margin-bottom: 3rem; flex-wrap: wrap; position: relative; z-index: 2; } .srv-tab { display: flex; align-items: center; gap: 8px; padding: 11px 26px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(0, 163, 181, 0.12); border-radius: 50px; font-family: "Rajdhani", sans-serif; font-size: 0.85rem; /* ← LETRAS MÁS GRANDES */ font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tlight); cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter: blur(10px); } .srv-tab:hover { border-color: rgba(0, 163, 181, 0.35); color: var(--jade2); transform: translateY(-2px); background: rgba(0, 163, 181, 0.06); } .srv-tab.act { background: linear-gradient(135deg, var(--jade), var(--jade2)); border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(0, 163, 181, 0.35); transform: translateY(-3px); } .srv-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; } .srv-tab.act .srv-tab-dot { background: #fff; opacity: 1; animation: dotPulse 1.5s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.7; } } /* ── TARJETA PRINCIPAL (FEATURED) ── */ .srv-featured { max-width: 1140px; margin: 0 auto 2rem; display: none; animation: cardReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; position: relative; z-index: 2; } .srv-featured.act { display: block; } @keyframes cardReveal { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .srv-card-big { background: rgba(7, 14, 26, 0.9); border: 1px solid rgba(0, 163, 181, 0.12); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4); display: grid; grid-template-columns: 1fr 1fr; min-height: 320px; transition: box-shadow 0.3s, transform 0.3s; } .srv-card-big:hover { box-shadow: 0 20px 60px rgba(0, 109, 119, 0.2); transform: translateY(-4px); } /* Lado visual */ .srv-card-visual { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 3rem; } /* Fondo degradado oscuro según servicio */ .srv-card-big[data-svc="internet"] .srv-card-visual { background: linear-gradient( 145deg, rgba(0, 109, 119, 0.15) 0%, rgba(0, 163, 181, 0.08) 40%, rgba(7, 14, 26, 0.9) 100% ); } .srv-card-big[data-svc="cable"] .srv-card-visual { background: linear-gradient( 145deg, rgba(160, 118, 46, 0.12) 0%, rgba(201, 168, 76, 0.06) 40%, rgba(7, 14, 26, 0.9) 100% ); } .srv-card-big[data-svc="iptv"] .srv-card-visual { background: linear-gradient( 145deg, rgba(91, 164, 199, 0.12) 0%, rgba(168, 216, 234, 0.06) 40%, rgba(7, 14, 26, 0.9) 100% ); } .srv-card-big[data-svc="soporte"] .srv-card-visual { background: linear-gradient( 145deg, rgba(0, 109, 119, 0.15) 0%, rgba(0, 200, 212, 0.08) 40%, rgba(7, 14, 26, 0.9) 100% ); } /* Icono 3D grande */ .srv-icon-3d { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; animation: iconFloat 4s ease-in-out infinite; } @keyframes iconFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(3deg); } } .srv-icon-3d-ring { position: absolute; inset: -20px; border-radius: 50%; border: 2px solid; opacity: 0.2; animation: ringRotate 8s linear infinite; } .srv-icon-3d-ring:nth-child(2) { inset: -35px; animation-duration: 12s; animation-direction: reverse; border-style: dashed; } @keyframes ringRotate { to { transform: rotate(360deg); } } .srv-card-big[data-svc="internet"] .srv-icon-3d-ring { border-color: var(--jade2); } .srv-card-big[data-svc="cable"] .srv-icon-3d-ring { border-color: var(--gold); } .srv-card-big[data-svc="iptv"] .srv-icon-3d-ring { border-color: #5ba4c7; } .srv-card-big[data-svc="soporte"] .srv-icon-3d-ring { border-color: var(--jade); } .srv-icon-circle { width: 120px; height: 120px; border-radius: 30px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: transform 0.3s; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; /* Reducir filter en imgs: */ filter: brightness(0.92) saturate(1.05); /* antes 0.85/1.2 */ } .srv-card-big[data-svc="internet"] .srv-icon-circle { background: linear-gradient(135deg, var(--jade) 0%, var(--jade2) 100%); box-shadow: 0 16px 48px rgba(0, 163, 181, 0.5), 0 4px 16px rgba(0, 163, 181, 0.3); } .srv-card-big[data-svc="cable"] .srv-icon-circle { background: linear-gradient(135deg, #a0762e 0%, var(--gold2) 100%); box-shadow: 0 16px 48px rgba(201, 168, 76, 0.5), 0 4px 16px rgba(201, 168, 76, 0.3); } .srv-card-big[data-svc="iptv"] .srv-icon-circle { background: linear-gradient(135deg, #3a7fb5 0%, #5ba4c7 100%); box-shadow: 0 16px 48px rgba(91, 164, 199, 0.5), 0 4px 16px rgba(91, 164, 199, 0.3); } .srv-card-big[data-svc="soporte"] .srv-icon-circle { background: linear-gradient(135deg, var(--jade) 0%, #00c8d4 100%); box-shadow: 0 16px 48px rgba(0, 109, 119, 0.5), 0 4px 16px rgba(0, 109, 119, 0.3); } .srv-card-big:hover .srv-icon-circle { transform: scale(1.08) rotate(-5deg); } .srv-icon-circle svg { width: 52px; height: 52px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } @keyframes particleFloat { 0%, 100% { transform: translate(0, 0) scale(1); opacity: var(--ao, 0.4); } 50% { transform: translate(var(--tx, 10px), var(--ty, -20px)) scale(1.2); opacity: var(--ao2, 0.8); } } /* Stats en el visual */ .srv-visual-stats { position: absolute; display: flex; flex-direction: column; gap: 10px; } .srv-visual-stats.left { left: 20px; top: 50%; transform: translateY(-50%); } .srv-visual-stats.right { right: 20px; top: 50%; transform: translateY(-50%); } .srv-stat-pill { background: rgba(7, 14, 26, 0.9); backdrop-filter: blur(12px); border: 1px solid rgba(0, 163, 181, 0.15); border-radius: 50px; padding: 10px 18px; display: flex; align-items: center; gap: 8px; font-family: "Rajdhani", sans-serif; font-size: 0.8rem; /* ← LETRAS MÁS GRANDES */ font-weight: 700; letter-spacing: 0.1em; color: var(--twhite); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); animation: pillFloat var(--dur, 5s) ease-in-out infinite var(--del, 0s); white-space: nowrap; } @keyframes pillFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .srv-stat-pill .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jade2); box-shadow: 0 0 8px var(--jade2); animation: dotPulse 1.5s ease-in-out infinite; } .srv-stat-pill .pill-num { font-family: "Cinzel", serif; font-size: 0.95rem; font-weight: 700; color: var(--jade2); } /* Lado contenido */ .srv-card-content { padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; } .srv-card-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 50px; font-family: "Rajdhani", sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; } .srv-card-big[data-svc="internet"] .srv-card-tag, .srv-card-big[data-svc="soporte"] .srv-card-tag { background: rgba(0, 163, 181, 0.1); color: var(--jade2); border: 1px solid rgba(0, 163, 181, 0.25); } .srv-card-big[data-svc="cable"] .srv-card-tag { background: rgba(201, 168, 76, 0.1); color: var(--gold2); border: 1px solid rgba(201, 168, 76, 0.25); } .srv-card-big[data-svc="iptv"] .srv-card-tag { background: rgba(91, 164, 199, 0.1); color: var(--sky); border: 1px solid rgba(91, 164, 199, 0.25); } .srv-card-name { font-family: "Cinzel", serif; font-size: clamp(2rem, 3.5vw, 2.8rem); /* ← LETRAS MUCHO MÁS GRANDES */ font-weight: 700; color: var(--twhite); line-height: 1.15; letter-spacing: 0.04em; } .srv-card-desc { font-family: "Montserrat", sans-serif; font-size: 1rem; /* ← LETRAS MÁS GRANDES */ color: var(--tlight); line-height: 1.8; max-width: 400px; } /* Features list */ .srv-features { display: flex; flex-direction: column; gap: 10px; } .srv-feat { display: flex; align-items: center; gap: 10px; font-family: "Montserrat", sans-serif; font-size: 0.9rem; color: var(--tlight); } /* ← LETRAS MÁS GRANDES */ .srv-feat-check { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .srv-card-big[data-svc="internet"] .srv-feat-check, .srv-card-big[data-svc="soporte"] .srv-feat-check { background: rgba(0, 163, 181, 0.12); color: var(--jade2); } .srv-card-big[data-svc="cable"] .srv-feat-check { background: rgba(201, 168, 76, 0.12); color: var(--gold2); } .srv-card-big[data-svc="iptv"] .srv-feat-check { background: rgba(91, 164, 199, 0.12); color: var(--sky); } .srv-feat-check svg { width: 12px; height: 12px; stroke-width: 2.5; } /* Precio + CTA */ .srv-card-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 1.4rem; border-top: 1px solid rgba(0, 163, 181, 0.1); flex-wrap: wrap; gap: 1rem; } .srv-price-label { font-family: "Rajdhani", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tlight); margin-bottom: 3px; } .srv-price-value { font-family: "Cinzel", serif; font-size: 1.8rem; /* ← LETRAS MÁS GRANDES */ font-weight: 700; line-height: 1; } .srv-card-big[data-svc="internet"] .srv-price-value, .srv-card-big[data-svc="soporte"] .srv-price-value { color: var(--jade2); } .srv-card-big[data-svc="cable"] .srv-price-value { color: var(--gold2); } .srv-card-big[data-svc="iptv"] .srv-price-value { color: var(--sky); } .srv-price-period { font-family: "Rajdhani", sans-serif; font-size: 0.9rem; color: var(--tlight); letter-spacing: 0.1em; } .srv-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border-radius: 50px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: none; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } .srv-cta::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); transform: translateX(-100%); transition: transform 0.4s ease; } .srv-cta:hover::before { transform: translateX(0); } .srv-cta:hover { transform: translateY(-3px); } .srv-card-big[data-svc="internet"] .srv-cta, .srv-card-big[data-svc="soporte"] .srv-cta { background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; box-shadow: 0 8px 24px rgba(0, 163, 181, 0.4); } .srv-card-big[data-svc="internet"] .srv-cta:hover, .srv-card-big[data-svc="soporte"] .srv-cta:hover { box-shadow: 0 12px 36px rgba(0, 163, 181, 0.6); } .srv-card-big[data-svc="cable"] .srv-cta { background: linear-gradient(135deg, #a0762e, var(--gold2)); color: #fff; box-shadow: 0 8px 24px rgba(201, 168, 76, 0.4); } .srv-card-big[data-svc="cable"] .srv-cta:hover { box-shadow: 0 12px 36px rgba(201, 168, 76, 0.6); } .srv-card-big[data-svc="iptv"] .srv-cta { background: linear-gradient(135deg, #3a7fb5, #5ba4c7); color: #fff; box-shadow: 0 8px 24px rgba(91, 164, 199, 0.4); } .srv-card-big[data-svc="iptv"] .srv-cta:hover { box-shadow: 0 12px 36px rgba(91, 164, 199, 0.6); } .srv-cta svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; } .srv-cta-arrow { transition: transform 0.3s; } .srv-cta:hover .srv-cta-arrow { transform: translateX(4px); } /* ── MINI CARDS NAVEGACIÓN (FONDO OSCURO) ── */ .srv-mini-row { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; z-index: 2; } .srv-mini { background: rgba(7, 14, 26, 0.85); /* ← FONDO OSCURO */ border: 1.5px solid rgba(0, 163, 181, 0.08); border-radius: 20px; padding: 1.8rem 1.4rem; text-align: center; cursor: pointer; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: visible; } .srv-mini::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease; } .srv-mini[data-svc="internet"]::before { background: linear-gradient(90deg, var(--jade), var(--jade2)); } .srv-mini[data-svc="cable"]::before { background: linear-gradient(90deg, #a0762e, var(--gold2)); } .srv-mini[data-svc="iptv"]::before { background: linear-gradient(90deg, #3a7fb5, #5ba4c7); } .srv-mini[data-svc="soporte"]::before { background: linear-gradient(90deg, var(--jade), #00c8d4); } .srv-mini:hover, .srv-mini.act { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 109, 119, 0.15); border-color: rgba(0, 163, 181, 0.2); } .srv-mini:hover::before, .srv-mini.act::before { transform: scaleX(1); } .srv-mini.act { border-color: rgba(0, 163, 181, 0.25); } .srv-mini-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; transition: all 0.3s; } .srv-mini[data-svc="internet"] .srv-mini-icon { background: rgba(0, 163, 181, 0.1); } .srv-mini[data-svc="cable"] .srv-mini-icon { background: rgba(201, 168, 76, 0.1); } .srv-mini[data-svc="iptv"] .srv-mini-icon { background: rgba(91, 164, 199, 0.1); } .srv-mini[data-svc="soporte"] .srv-mini-icon { background: rgba(0, 109, 119, 0.1); } .srv-mini:hover .srv-mini-icon, .srv-mini.act .srv-mini-icon { transform: scale(1.1) rotate(-5deg); } .srv-mini[data-svc="internet"]:hover .srv-mini-icon, .srv-mini[data-svc="internet"].act .srv-mini-icon { background: linear-gradient(135deg, var(--jade), var(--jade2)); } .srv-mini[data-svc="cable"]:hover .srv-mini-icon, .srv-mini[data-svc="cable"].act .srv-mini-icon { background: linear-gradient(135deg, #a0762e, var(--gold2)); } .srv-mini[data-svc="iptv"]:hover .srv-mini-icon, .srv-mini[data-svc="iptv"].act .srv-mini-icon { background: linear-gradient(135deg, #3a7fb5, #5ba4c7); } .srv-mini[data-svc="soporte"]:hover .srv-mini-icon, .srv-mini[data-svc="soporte"].act .srv-mini-icon { background: linear-gradient(135deg, var(--jade), #00c8d4); } .srv-mini-icon svg { width: 24px; height: 24px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; } .srv-mini[data-svc="internet"] .srv-mini-icon svg { stroke: var(--jade2); } .srv-mini[data-svc="cable"] .srv-mini-icon svg { stroke: #a0762e; } .srv-mini[data-svc="iptv"] .srv-mini-icon svg { stroke: #3a7fb5; } .srv-mini[data-svc="soporte"] .srv-mini-icon svg { stroke: var(--jade); } .srv-mini:hover .srv-mini-icon svg, .srv-mini.act .srv-mini-icon svg { stroke: #fff; } .srv-mini-name { font-family: "Cinzel", serif; font-size: 0.9rem; /* ← LETRAS MÁS GRANDES */ font-weight: 700; color: var(--twhite); letter-spacing: 0.06em; margin-bottom: 5px; transition: color 0.3s; } .srv-mini:hover .srv-mini-name { color: var(--jade2); } .srv-mini-sub { font-family: "Montserrat", sans-serif; font-size: 0.78rem; /* ← LETRAS MÁS GRANDES */ color: var(--tlight); line-height: 1.4; } /* Progress bar activo */ .srv-mini-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: transparent; width: 0; transition: width 0.1s linear; border-radius: 0 0 20px 20px; } .srv-mini.counting .srv-mini-progress { background: linear-gradient(90deg, rgba(0, 163, 181, 0.3), var(--jade2)); } /* ══ RESPONSIVE ══ */ @media (max-width: 900px) { .srv-card-big { grid-template-columns: 1fr; } .srv-card-visual { min-height: 260px; } .srv-card-content { padding: 2.5rem; } .srv-mini-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .srv-mini-row { grid-template-columns: repeat(2, 1fr); } .srv-section { padding: 3.5rem 1rem 4rem; } .srv-visual-stats { display: none; } } @keyframes progressBar { 0% { width: 0%; } 100% { width: 100%; } } @keyframes imgGlow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } /* ── MASCOT EN TARJETAS MINI DE SERVICIOS ── */ .srv-mini-mascot { position: absolute; bottom: -20px; /* antes: -8px */ right: -10px; /* antes: -8px */ width: 85px; /* antes: 72px */ height: 85px; /* antes: 72px */ opacity: 0.75; /* más visible */ object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) brightness(0.85); transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; opacity: 0.65; pointer-events: none; z-index: 5; } .srv-mini:hover .srv-mini-mascot, .srv-mini.act .srv-mini-mascot { filter: drop-shadow(0 6px 20px rgba(0, 163, 181, 0.5)) brightness(1.35) saturate(1.2); opacity: 1; transform: scale(1.12) translateY(-4px) rotate(-3deg); } @keyframes mascotFloat { 0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); } 33% { transform: translateY(-8px) rotate(2deg) scale(1.05); } 66% { transform: translateY(-4px) rotate(-1deg) scale(1.02); } } .srv-mini-mascot { animation: mascotFloat 3.5s ease-in-out infinite; filter: drop-shadow(0 8px 16px rgba(0, 163, 181, 0.4)) brightness(1.1); } .srv-mini:hover .srv-mini-mascot, .srv-mini.act .srv-mini-mascot { filter: drop-shadow(0 12px 28px rgba(0, 163, 181, 0.7)) brightness(1.35) saturate(1.3); animation-duration: 2s; /* más rápido al hover */ } .rec-link { display: inline-flex; flex-direction: column; align-items: center; gap: 0; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; position: relative; width: 110px; margin-top: 1.2rem; } .rec-link-img-wrap { position: relative; width: 90px; height: 68px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease; filter: drop-shadow(0 6px 18px rgba(201, 168, 76, 0)) brightness(0.88) saturate(0.7); } .rec-link:hover .rec-link-img-wrap { transform: translateY(-5px) scale(1.06); filter: drop-shadow(0 12px 28px rgba(201, 168, 76, 0.45)) brightness(1.08) saturate(1.1); } .rec-link-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; } .rec-link-label { font-family: "Rajdhani", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); text-align: center; margin-top: 0.55rem; line-height: 1.4; transition: color 0.2s; } .rec-link:hover .rec-link-label { color: var(--gold2); } .rec-link-sub { font-family: "Montserrat", sans-serif; font-size: 0.58rem; font-weight: 400; letter-spacing: 0.06em; color: var(--tmid); text-align: center; margin-top: 1px; transition: color 0.2s; } .rec-link:hover .rec-link-sub { color: var(--tlight); } .svc-selector { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; margin-top: 4px; } @media (max-width: 600px) { .svc-selector { grid-template-columns: repeat(2, 1fr); } } .svc-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 163, 181, 0.12); border-radius: 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); color: var(--tlight); font-family: "Rajdhani", sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; } .svc-opt:hover { border-color: rgba(0, 163, 181, 0.35); background: rgba(0, 163, 181, 0.06); color: var(--jade2); transform: translateY(-2px); } .svc-opt.active { border-color: var(--jade2); background: rgba(0, 163, 181, 0.12); color: var(--jade2); box-shadow: 0 0 18px rgba(0, 163, 181, 0.2); } .svc-opt svg { stroke: currentColor; flex-shrink: 0; } .hero-text-block { display: flex; flex-direction: column; align-items: flex-start; text-align: left; flex: 1; max-width: 620px; padding-top: 0.5rem; /* alinea con el eyebrow dorado */ } /* Eyebrow izquierdo sin ::before ::after */ .hero-text-block .heyebrow { justify-content: flex-start; } .hero-text-block .hbtns { justify-content: flex-start; } .hero-logo-row { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: clamp(2rem, 4vw, 5rem); width: 100%; margin-bottom: clamp(-0.5rem, -0.5vh, 0.5rem); flex-wrap: nowrap; } /* ══ SPEED TEST ══ */ .speed-section { background: linear-gradient( 170deg, #020509 0%, #04090e 35%, #071220 65%, #020509 100% ); padding: 5rem 2rem; position: relative; overflow: hidden; } .speed-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } .speed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 3rem; } @media (max-width: 900px) { .vel-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } .speed-gauge-card { order: 1 !important; max-width: 100% !important; margin: 0 !important; } .vel-right { order: 2 !important; } } .speed-gauge-card { background: linear-gradient( 145deg, rgba(0, 109, 119, 0.3), rgba(0, 180, 200, 0.15) ); border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 24px; padding: 2.5rem; overflow: hidden; position: relative; } .speed-gauge-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--jade3), var(--gold), transparent ); } .speed-gauge-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 5px 14px; background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 30px; font-family: "Rajdhani", sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--jade3); margin-bottom: 1.5rem; } .speed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jade3); animation: pulse2 1.5s ease-in-out infinite; } .speed-svg { width: 100%; max-width: 280px; display: block; margin: 0 auto 1.5rem; } .speed-display { text-align: center; margin-bottom: 1.5rem; } .speed-num { font-family: "Noto Serif JP", serif; font-size: 3.5rem; font-weight: 900; background: linear-gradient(135deg, #fff, var(--jade3)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; animation: vNum 3s ease-in-out infinite alternate; } .speed-unit { font-family: "Rajdhani", sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--tlight); margin-top: 4px; } .speed-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1.5rem; } .speed-metric { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(0, 229, 255, 0.1); border-radius: 12px; padding: 1rem; text-align: center; } .speed-metric-lbl { font-family: "Rajdhani", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--tmid); margin-bottom: 4px; } .speed-metric-val { font-family: "Noto Serif JP", serif; font-size: 0.95rem; font-weight: 700; color: var(--twhite); } .speed-cta { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 13px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; border-radius: 50px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: all 0.25s; box-shadow: 0 4px 24px rgba(0, 180, 200, 0.4); } .speed-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 35px rgba(0, 180, 200, 0.55); } .speed-cta svg { stroke: white; width: 14px; height: 14px; } .speed-cta-sub { text-align: center; font-family: "Space Grotesk", sans-serif; font-size: 0.72rem; color: var(--tmid); margin-top: 0.5rem; } .speed-info-cards { display: flex; flex-direction: column; gap: 1.2rem; } .speed-info-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 229, 255, 0.1); border-radius: 18px; padding: 1.6rem; transition: all 0.3s; } .speed-info-card:hover { border-color: rgba(0, 229, 255, 0.25); background: rgba(0, 229, 255, 0.04); } .speed-info-title { font-family: "Noto Serif JP", serif; font-size: 1rem; font-weight: 700; color: var(--twhite); margin-bottom: 1rem; } .speed-steps { display: flex; flex-direction: column; gap: 0.8rem; } .speed-step { display: flex; align-items: flex-start; gap: 0.8rem; } .speed-step-n { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--jade), var(--jade2)); display: flex; align-items: center; justify-content: center; font-family: "Noto Serif JP", serif; font-size: 0.75rem; font-weight: 700; color: #fff; flex-shrink: 0; } .speed-step-head { font-family: "Space Grotesk", sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--twhite); margin-bottom: 2px; } .speed-step-desc { font-family: "Space Grotesk", sans-serif; font-size: 0.75rem; color: var(--tmid); line-height: 1.5; } .speed-stats { display: flex; gap: 0.8rem; margin-top: 1.2rem; flex-wrap: wrap; } .speed-stat-pill { flex: 1; background: linear-gradient( 135deg, rgba(0, 109, 119, 0.2), rgba(0, 180, 200, 0.12) ); border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 12px; padding: 0.9rem; text-align: center; } .speed-stat-n { font-family: "Noto Serif JP", serif; font-size: 1.4rem; font-weight: 700; color: var(--jade3); } .speed-stat-l { font-family: "Rajdhani", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tmid); } /* ── IPTV RESPONSIVE CSS ── */ /* ── Variables de escala dinámica ── */ #iptv { --iptv-ring-1: 420px; --iptv-ring-2: 360px; --iptv-ring-3: 300px; --iptv-glow: 320px; --iptv-card: 260px; --iptv-wrap: 440px; } /* ── Sección ── */ #iptv { padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 4vw, 2rem) !important; } /* ── Grid principal ── */ .iptv-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } /* ── Columna logo ── */ .iptv-logo-col { display: flex; flex-direction: column; align-items: center; gap: 2rem; } /* ── Contenedor de anillos/logo — escala con CSS variable ── */ .iptv-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: var(--iptv-wrap); height: var(--iptv-wrap); flex-shrink: 0; } /* Anillos orbitales: escalan con la variable del contenedor */ .iptv-logo-wrap > .iptv-ring-1 { width: var(--iptv-ring-1); height: var(--iptv-ring-1); } .iptv-logo-wrap > .iptv-ring-2 { width: var(--iptv-ring-2); height: var(--iptv-ring-2); } .iptv-logo-wrap > .iptv-ring-3 { width: var(--iptv-ring-3); height: var(--iptv-ring-3); } .iptv-logo-wrap > .iptv-glow { width: var(--iptv-glow); height: var(--iptv-glow); } .iptv-logo-wrap > .iptv-card-img { width: var(--iptv-card); height: var(--iptv-card); } /* ── Columna features ── */ .iptv-features-col { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; /* evita overflow */ } /* ── Grid 3 mini-cards ── */ .iptv-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; } /* ════════ TABLET ≤ 1024px ════════ */ @media (max-width: 1024px) { #iptv { --iptv-ring-1: 340px; --iptv-ring-2: 290px; --iptv-ring-3: 240px; --iptv-glow: 260px; --iptv-card: 210px; --iptv-wrap: 360px; } .iptv-grid { gap: 2.5rem; } } /* ════════ TABLET PORTRAIT ≤ 860px — stack 1 columna ════════ */ @media (max-width: 860px) { #iptv { --iptv-ring-1: 300px; --iptv-ring-2: 256px; --iptv-ring-3: 212px; --iptv-glow: 228px; --iptv-card: 185px; --iptv-wrap: 320px; } .iptv-grid { grid-template-columns: 1fr; gap: 2.8rem; } .iptv-logo-col { order: 1; } .iptv-features-col { order: 2; } } /* ════════ MÓVIL ≤ 600px ════════ */ @media (max-width: 600px) { #iptv { --iptv-ring-1: 240px; --iptv-ring-2: 204px; --iptv-ring-3: 170px; --iptv-glow: 184px; --iptv-card: 148px; --iptv-wrap: 256px; } .iptv-mini-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ════════ MÓVIL PEQUEÑO ≤ 400px ════════ */ @media (max-width: 400px) { #iptv { --iptv-ring-1: 190px; --iptv-ring-2: 162px; --iptv-ring-3: 134px; --iptv-glow: 146px; --iptv-card: 118px; --iptv-wrap: 200px; } } /* ── Anillos absolutos: usan clamp en margin para centrado ── */ .iptv-ring-1, .iptv-ring-2, .iptv-ring-3, .iptv-glow, .iptv-card-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* card-img override */ .iptv-card-img { position: relative; top: auto; left: auto; transform: none; z-index: 5; } /* ── SERVICIOS — ENHANCED TECH/DIGITAL SKIN v5 ── */ /* ── Background: scanline + hex grid overlay ── */ .srv-section { background: linear-gradient( 170deg, #02060e 0%, #04090f 35%, #070e1a 65%, #0a1422 100% ) !important; } /* ── Grid overlay removed — particles only in services section ── */ .srv-section::before { display: none; } .srv-section::after { display: none; } /* ── Corner accent decorators on the card ── */ .srv-card-big { background: linear-gradient( 140deg, rgba(4, 9, 15, 0.97) 0%, rgba(7, 14, 26, 0.95) 60%, rgba(10, 20, 34, 0.9) 100% ) !important; border: 1px solid rgba(0, 163, 181, 0.18) !important; box-shadow: 0 0 0 1px rgba(0, 163, 181, 0.06), 0 8px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 163, 181, 0.08) !important; position: relative; } /* Top-left corner bracket */ .srv-card-big::before { content: ""; position: absolute; top: -1px; left: -1px; width: 32px; height: 32px; border-top: 2px solid var(--jade2); border-left: 2px solid var(--jade2); border-radius: 4px 0 0 0; z-index: 10; pointer-events: none; } /* Bottom-right corner bracket */ .srv-card-big::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 32px; height: 32px; border-bottom: 2px solid rgba(0, 163, 181, 0.4); border-right: 2px solid rgba(0, 163, 181, 0.4); border-radius: 0 0 4px 0; z-index: 10; pointer-events: none; } /* Cable: gold corners */ .srv-card-big[data-svc="cable"]::before { border-color: var(--gold2); } .srv-card-big[data-svc="cable"]::after { border-color: rgba(201, 168, 76, 0.4); } /* IPTV: sky corners */ .srv-card-big[data-svc="iptv"]::before { border-color: #5ba4c7; } .srv-card-big[data-svc="iptv"]::after { border-color: rgba(91, 164, 199, 0.4); } /* ── Neon scan line on visual ── */ .srv-card-visual::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(0, 163, 181, 0.6), transparent ); animation: scanLine 4s ease-in-out infinite; pointer-events: none; z-index: 10; } @keyframes scanLine { 0% { top: 10%; opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.6; } 100% { top: 90%; opacity: 0; } } .srv-card-big[data-svc="cable"] .srv-card-visual::after { background: linear-gradient( 90deg, transparent, rgba(201, 168, 76, 0.5), transparent ); } .srv-card-big[data-svc="iptv"] .srv-card-visual::after { background: linear-gradient( 90deg, transparent, rgba(91, 164, 199, 0.5), transparent ); } /* ── Card hover: neon box shadow ── */ .srv-card-big:hover { box-shadow: 0 0 0 1px rgba(0, 163, 181, 0.25), 0 20px 60px rgba(0, 109, 119, 0.22), 0 0 40px rgba(0, 163, 181, 0.05), inset 0 1px 0 rgba(0, 163, 181, 0.12) !important; } .srv-card-big[data-svc="cable"]:hover { box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.25), 0 20px 60px rgba(160, 118, 46, 0.22), inset 0 1px 0 rgba(201, 168, 76, 0.1) !important; } .srv-card-big[data-svc="iptv"]:hover { box-shadow: 0 0 0 1px rgba(91, 164, 199, 0.25), 0 20px 60px rgba(59, 127, 181, 0.22), inset 0 1px 0 rgba(91, 164, 199, 0.1) !important; } /* ── Visual side: data-svc accent gradients more vivid ── */ .srv-card-big[data-svc="internet"] .srv-card-visual { background: linear-gradient( 145deg, rgba(0, 109, 119, 0.22) 0%, rgba(0, 163, 181, 0.1) 40%, rgba(4, 9, 15, 0.98) 100% ) !important; } .srv-card-big[data-svc="cable"] .srv-card-visual { background: linear-gradient( 145deg, rgba(160, 118, 46, 0.2) 0%, rgba(201, 168, 76, 0.08) 40%, rgba(4, 9, 15, 0.98) 100% ) !important; } .srv-card-big[data-svc="iptv"] .srv-card-visual { background: linear-gradient( 145deg, rgba(59, 127, 181, 0.2) 0%, rgba(91, 164, 199, 0.08) 40%, rgba(4, 9, 15, 0.98) 100% ) !important; } .srv-card-big[data-svc="soporte"] .srv-card-visual { background: linear-gradient( 145deg, rgba(0, 109, 119, 0.22) 0%, rgba(0, 200, 212, 0.1) 40%, rgba(4, 9, 15, 0.98) 100% ) !important; } /* ── Content side: left separator neon line ── */ .srv-card-content { border-left: 1px solid rgba(0, 163, 181, 0.08) !important; position: relative; } .srv-card-content::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; background: linear-gradient( 180deg, transparent, rgba(0, 163, 181, 0.4), transparent ); border-radius: 2px; } .srv-card-big[data-svc="cable"] .srv-card-content::before { background: linear-gradient( 180deg, transparent, rgba(201, 168, 76, 0.4), transparent ); } .srv-card-big[data-svc="iptv"] .srv-card-content::before { background: linear-gradient( 180deg, transparent, rgba(91, 164, 199, 0.4), transparent ); } /* ── Service name: gradient text ── */ .srv-card-big[data-svc="internet"] .srv-card-name { background: linear-gradient(135deg, var(--twhite) 0%, var(--jade2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .srv-card-big[data-svc="cable"] .srv-card-name { background: linear-gradient(135deg, var(--twhite) 0%, var(--gold2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .srv-card-big[data-svc="iptv"] .srv-card-name { background: linear-gradient(135deg, var(--twhite) 0%, #5ba4c7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .srv-card-big[data-svc="soporte"] .srv-card-name { background: linear-gradient(135deg, var(--twhite) 0%, #00c8d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Badge pill: tech style ── */ .srv-card-tag { font-size: 0.6rem !important; letter-spacing: 0.4em !important; padding: 6px 16px 6px 12px !important; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); border-radius: 0 !important; } .srv-card-big[data-svc="internet"] .srv-card-tag, .srv-card-big[data-svc="soporte"] .srv-card-tag { background: rgba(0, 163, 181, 0.12) !important; border: none !important; box-shadow: 0 0 20px rgba(0, 163, 181, 0.15); } .srv-card-big[data-svc="cable"] .srv-card-tag { background: rgba(201, 168, 76, 0.12) !important; border: none !important; } .srv-card-big[data-svc="iptv"] .srv-card-tag { background: rgba(91, 164, 199, 0.12) !important; border: none !important; } /* ── Mini cards: tech neon ── */ .srv-mini { background: rgba(4, 9, 15, 0.92) !important; border: 1px solid rgba(0, 163, 181, 0.1) !important; border-radius: 16px !important; position: relative; overflow: hidden; } /* Subtle corner accent */ .srv-mini::after { content: ""; position: absolute; bottom: 0; right: 0; width: 18px; height: 18px; border-bottom: 1.5px solid rgba(0, 163, 181, 0.2); border-right: 1.5px solid rgba(0, 163, 181, 0.2); pointer-events: none; } .srv-mini:hover, .srv-mini.act { background: rgba(0, 163, 181, 0.04) !important; border-color: rgba(0, 163, 181, 0.28) !important; box-shadow: 0 8px 32px rgba(0, 109, 119, 0.12), 0 0 0 1px rgba(0, 163, 181, 0.1) !important; } .srv-mini[data-svc="cable"]:hover, .srv-mini[data-svc="cable"].act { background: rgba(201, 168, 76, 0.04) !important; border-color: rgba(201, 168, 76, 0.28) !important; box-shadow: 0 8px 32px rgba(160, 118, 46, 0.12) !important; } .srv-mini[data-svc="iptv"]:hover, .srv-mini[data-svc="iptv"].act { background: rgba(91, 164, 199, 0.04) !important; border-color: rgba(91, 164, 199, 0.28) !important; } /* Mini icon: glass morphism ring */ .srv-mini-icon { border: 1px solid rgba(0, 163, 181, 0.15) !important; backdrop-filter: blur(8px); box-shadow: 0 0 20px rgba(0, 163, 181, 0.1) !important; } .srv-mini[data-svc="cable"] .srv-mini-icon { border-color: rgba(201, 168, 76, 0.15) !important; } .srv-mini[data-svc="iptv"] .srv-mini-icon { border-color: rgba(91, 164, 199, 0.15) !important; } /* Progress bar: more vibrant */ .srv-mini.counting .srv-mini-progress { background: linear-gradient( 90deg, rgba(0, 163, 181, 0.2), var(--jade2), rgba(0, 163, 181, 0.2) ) !important; box-shadow: 0 0 8px var(--jade2); } /* Bottom border accent on card */ .srv-card-bottom { border-top: 1px solid rgba(0, 163, 181, 0.12) !important; position: relative; } .srv-card-bottom::before { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 1px; background: var(--jade2); box-shadow: 0 0 8px var(--jade2); } .srv-card-big[data-svc="cable"] .srv-card-bottom::before { background: var(--gold2); box-shadow: 0 0 8px var(--gold2); } .srv-card-big[data-svc="iptv"] .srv-card-bottom::before { background: #5ba4c7; } /* Overline: more digital */ .srv-overline { font-size: 0.62rem !important; letter-spacing: 0.55em !important; color: rgba(0, 163, 181, 0.7) !important; } /* Tab: more sharp/digital active state */ .srv-tab.act { border-radius: 6px !important; letter-spacing: 0.15em !important; box-shadow: 0 0 0 1px rgba(0, 163, 181, 0.5), 0 8px 24px rgba(0, 163, 181, 0.3) !important; } /* ── SECCIÓN COMENTARIOS ── */ #comentarios { background: radial-gradient( ellipse 70% 50% at 5% 15%, rgba(0, 163, 181, 0.13) 0%, transparent 55% ), radial-gradient( ellipse 55% 45% at 95% 85%, rgba(201, 168, 76, 0.09) 0%, transparent 50% ), radial-gradient( ellipse 40% 60% at 50% 0%, rgba(168, 85, 247, 0.06) 0%, transparent 45% ), linear-gradient(170deg, #04090f 0%, #070e1a 45%, #0b1525 80%, #0d1a2e 100%); padding: 6rem 2rem; position: relative; overflow: hidden; } @media (max-width: 600px) { #comentarios { padding: 4rem 1rem; } } /* ── LIKE BANNER ── */ .cvm-like-wrap { display: flex; justify-content: center; margin-bottom: 3.5rem; } .cvm-like-card { display: inline-flex; align-items: center; gap: 1.2rem; padding: 1rem 2rem; background: linear-gradient( 135deg, rgba(0, 163, 181, 0.08), rgba(201, 168, 76, 0.05) ); border: 1.5px solid rgba(0, 163, 181, 0.22); border-radius: 80px; box-shadow: 0 0 40px rgba(0, 163, 181, 0.08), 0 8px 32px rgba(0, 0, 0, 0.3); flex-wrap: wrap; justify-content: center; gap: 1rem 1.6rem; transition: box-shadow 0.3s, border-color 0.3s; } .cvm-like-card:hover { border-color: rgba(0, 163, 181, 0.45); box-shadow: 0 0 60px rgba(0, 163, 181, 0.18), 0 8px 40px rgba(0, 0, 0, 0.4); } .cvm-like-btn { position: relative; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient( 135deg, rgba(0, 163, 181, 0.15), rgba(0, 109, 119, 0.12) ); border: 2px solid rgba(0, 163, 181, 0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); font-size: 1.8rem; flex-shrink: 0; overflow: hidden; } .cvm-like-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient( circle, rgba(0, 163, 181, 0.35) 0%, transparent 70% ); opacity: 0; transition: opacity 0.3s; } .cvm-like-btn:hover { transform: scale(1.12); border-color: rgba(0, 163, 181, 0.7); } .cvm-like-btn:hover::before { opacity: 1; } .cvm-like-btn.liked { background: linear-gradient( 135deg, rgba(0, 163, 181, 0.3), rgba(0, 109, 119, 0.25) ); border-color: var(--jade2); box-shadow: 0 0 30px rgba(0, 163, 181, 0.5), 0 0 60px rgba(0, 163, 181, 0.2); animation: likePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes likePop { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-8deg); } 70% { transform: scale(0.95) rotate(3deg); } 100% { transform: scale(1) rotate(0); } } .cvm-like-count { font-family: "Cinzel", serif; font-size: 1.6rem; font-weight: 700; color: var(--twhite); line-height: 1; letter-spacing: -0.02em; } .cvm-like-label { font-family: "Rajdhani", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tlight); margin-top: 3px; } .cvm-like-sep { width: 1px; height: 44px; background: linear-gradient( 180deg, transparent, rgba(0, 163, 181, 0.3), transparent ); } @media (max-width: 500px) { .cvm-like-sep { display: none; } } .cvm-like-text { font-family: "Cormorant Garamond", serif; font-size: 1.05rem; font-style: italic; color: var(--tpearl); opacity: 0.85; } .cvm-rating-pill { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(201, 168, 76, 0.07); border: 1px solid rgba(201, 168, 76, 0.2); border-radius: 30px; } .cvm-rating-stars { color: var(--gold2); font-size: 0.95rem; letter-spacing: 1px; } .cvm-rating-num { font-family: "Cinzel", serif; font-size: 0.85rem; font-weight: 700; color: var(--gold2); } /* ── REVIEWS GRID ── */ .reviews-grid-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 2rem; } .com-col-left .reviews-grid-wrap { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .reviews-grid-wrap { grid-template-columns: 1fr 1fr; } } /* ── REVIEW CARD ── */ .review-card-premium { background: linear-gradient( 140deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100% ); border: 1px solid rgba(0, 163, 181, 0.12); border-radius: 20px; padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: cardIn 0.5s ease both; position: relative; overflow: hidden; } .review-card-premium::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, rgba(0, 163, 181, 0.5), transparent ); opacity: 0; transition: opacity 0.3s; } .review-card-premium:hover { border-color: rgba(0, 163, 181, 0.3); background: linear-gradient( 140deg, rgba(0, 163, 181, 0.06) 0%, rgba(0, 109, 119, 0.03) 100% ); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 163, 181, 0.08); } .review-card-premium:hover::before { opacity: 1; } @keyframes cardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .review-card-header-premium { display: flex; align-items: center; gap: 0.75rem; } .review-avatar-premium { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "Cinzel", serif; font-size: 1.1rem; font-weight: 700; color: #fff; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .review-meta-premium { flex: 1; min-width: 0; } .review-name-premium { font-family: "Cinzel", serif; font-size: 0.82rem; font-weight: 700; color: var(--twhite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-date-premium { font-family: "Rajdhani", sans-serif; font-size: 0.65rem; color: var(--tlight); letter-spacing: 0.08em; margin-top: 2px; } .review-stars-premium { display: flex; gap: 3px; } .review-star-premium { font-size: 0.95rem; color: var(--gold2); text-shadow: 0 0 8px rgba(232, 199, 106, 0.5); } .review-text-premium { font-family: "Montserrat", sans-serif; font-size: 0.83rem; color: rgba(200, 216, 232, 0.88); line-height: 1.75; flex: 1; } .review-card-footer-premium { display: flex; align-items: center; justify-content: space-between; padding-top: 0.8rem; border-top: 1px solid rgba(0, 163, 181, 0.08); } .review-like-btn-premium { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 30px; cursor: pointer; font-family: "Rajdhani", sans-serif; font-size: 0.75rem; font-weight: 700; color: var(--tlight); letter-spacing: 0.08em; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .review-like-btn-premium:hover { background: rgba(0, 163, 181, 0.1); border-color: rgba(0, 163, 181, 0.3); color: var(--jade2); transform: scale(1.05); } .review-like-btn-premium.liked { background: rgba(0, 163, 181, 0.15); border-color: var(--jade2); color: var(--jade2); box-shadow: 0 0 16px rgba(0, 163, 181, 0.25); } .review-like-btn-premium .like-count { font-size: 0.78rem; font-weight: 700; } .review-tag-premium { font-family: "Rajdhani", sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jade2); padding: 4px 10px; background: rgba(0, 163, 181, 0.07); border: 1px solid rgba(0, 163, 181, 0.15); border-radius: 20px; } /* Empty state */ .reviews-empty { grid-column: 1/-1; text-align: center; padding: 3rem 2rem; border: 1.5px dashed rgba(0, 163, 181, 0.15); border-radius: 20px; } /* ── FORMULARIO ── */ .cvm-review-form { background: linear-gradient( 140deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02) ); border: 1px solid rgba(0, 163, 181, 0.15); border-radius: 24px; padding: 2.5rem; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .cvm-review-form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #a855f7, var(--jade2), var(--gold2)); } .cvm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } @media (max-width: 720px) { .cvm-form-grid { grid-template-columns: 1fr; gap: 1.5rem; } } .cvm-form-label { font-family: "Rajdhani", sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tlight); display: block; margin-bottom: 6px; } .cvm-form-input, .cvm-form-textarea, .cvm-form-select { width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(0, 163, 181, 0.12); border-radius: 12px; font-family: "Montserrat", sans-serif; font-size: 0.86rem; color: var(--twhite); outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .cvm-form-input::placeholder, .cvm-form-textarea::placeholder { color: rgba(200, 216, 232, 0.3); } .cvm-form-input:focus, .cvm-form-textarea:focus, .cvm-form-select:focus { border-color: var(--jade2); background: rgba(0, 163, 181, 0.06); box-shadow: 0 0 0 3px rgba(0, 163, 181, 0.12); } .cvm-form-textarea { resize: vertical; min-height: 110px; line-height: 1.65; } .cvm-form-select { cursor: pointer; } .cvm-form-select option { background: #0b1525; color: var(--twhite); } .cvm-submit-btn { width: 100%; padding: 15px 28px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; border: none; border-radius: 14px; font-family: "Rajdhani", sans-serif; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 30px rgba(0, 163, 181, 0.4); transition: all 0.2s; position: relative; overflow: hidden; } .cvm-submit-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, transparent, rgba(255, 255, 255, 0.12), transparent ); transform: translateX(-100%); transition: transform 0.5s; } .cvm-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 163, 181, 0.6); } .cvm-submit-btn:hover::after { transform: translateX(100%); } .cvm-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } #reviewsSuccess { display: none; padding: 12px 18px; background: rgba(0, 163, 181, 0.1); border: 1px solid rgba(0, 163, 181, 0.3); border-radius: 10px; font-family: "Rajdhani", sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--jade2); letter-spacing: 0.1em; text-align: center; margin-top: 0.8rem; } /* Star selector */ .cvm-star-row { display: flex; gap: 4px; } .rf-star-btn { font-size: 1.8rem; background: none; border: none; cursor: pointer; transition: all 0.2s; color: rgba(255, 255, 255, 0.15); line-height: 1; } .rf-star-btn.active { color: var(--gold2); text-shadow: 0 0 15px rgba(232, 199, 106, 0.7); } .rf-star-btn:hover { transform: scale(1.2); } /* Loading spinner for reviews */ .reviews-loading { grid-column: 1/-1; display: flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 2.5rem; font-family: "Rajdhani", sans-serif; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tlight); } .reviews-spinner { width: 22px; height: 22px; border: 2px solid rgba(0, 163, 181, 0.2); border-top-color: var(--jade2); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========== VELOCIDAD SECTION — LIGHT THEME ========== */ #velocidad { background: linear-gradient( 160deg, #f0f7fa 0%, #e8f5f7 40%, #f5f0e8 100% ) !important; position: relative; overflow: hidden; } #velocidad::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient( circle at 15% 25%, rgba(0, 163, 181, 0.08) 0%, transparent 50% ), radial-gradient( circle at 85% 75%, rgba(201, 168, 76, 0.07) 0%, transparent 45% ), radial-gradient( circle at 50% 10%, rgba(0, 109, 119, 0.05) 0%, transparent 40% ); pointer-events: none; } /* Dots pattern subtle */ #velocidad::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient( rgba(0, 109, 119, 0.06) 1px, transparent 1px ); background-size: 32px 32px; pointer-events: none; } /* Títulos y etiquetas */ #velocidad .vel-fc-title, #velocidad .vel-step-head, #velocidad .vel-stat-num { color: var(--twhite); } #velocidad .vel-fc-label, #velocidad .vel-dot-text, #velocidad .vel-step-desc, #velocidad .vel-stat-lbl { color: var(--tlight); } /* Badge superior de la tarjeta */ .speed-gauge-badge { background: rgba(0, 163, 181, 0.12); border: 1px solid rgba(0, 163, 181, 0.25); color: var(--jade2); } /* Tarjetas de features */ #velocidad .vel-feature-card { background: rgba(7, 14, 26, 0.85); border: 1px solid rgba(0, 163, 181, 0.12); } #velocidad .vel-feature-card:hover { border-color: rgba(0, 163, 181, 0.28); background: rgba(0, 163, 181, 0.06); } /* Pills de estadísticas */ #velocidad .vel-stat-pill { background: linear-gradient( 135deg, rgba(0, 163, 181, 0.08), rgba(0, 109, 119, 0.05) ); border: 1px solid rgba(0, 163, 181, 0.15); } .vel-wrap { max-width: 1140px; margin: 0 auto; position: relative; z-index: 2; } /* Header light */ .vel-header { text-align: center; margin-bottom: 3.5rem; } .vel-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 20px; background: rgba(0, 163, 181, 0.08); border: 1px solid rgba(0, 163, 181, 0.2); border-radius: 40px; margin-bottom: 1.2rem; font-family: "Rajdhani", sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--jade); } .vel-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jade2); animation: pulse 2s ease-in-out infinite; } .vel-title { font-family: "Cinzel", serif; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 700; color: var(--tdark); line-height: 1.15; margin-bottom: 0.8rem; } .vel-title .ac-light { background: linear-gradient(135deg, var(--jade) 0%, var(--jade2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .vel-subtitle { font-family: "Montserrat", sans-serif; font-size: 0.95rem; color: var(--tmid); max-width: 540px; margin: 0 auto; line-height: 1.8; } /* Main grid */ .vel-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: start; } /* LEFT COLUMN: Speed Gauge + metrics */ .vel-gauge-card { background: #fff; border-radius: 28px; border: 1px solid rgba(0, 163, 181, 0.15); box-shadow: 0 8px 48px rgba(0, 109, 119, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04); overflow: hidden; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s ease; position: relative; } /* Capa de brillo en hover */ .vel-gauge-card::after { content: ""; position: absolute; inset: 0; border-radius: 28px; background: linear-gradient( 135deg, rgba(0, 163, 181, 0) 0%, rgba(0, 163, 181, 0.06) 40%, rgba(201, 168, 76, 0.05) 70%, rgba(0, 163, 181, 0) 100% ); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 5; } .vel-gauge-card:hover { transform: translateY(-8px) scale(1.01); border-color: rgba(0, 163, 181, 0.4); box-shadow: 0 0 0 1px rgba(0, 163, 181, 0.15), 0 20px 70px rgba(0, 109, 119, 0.22), 0 0 50px rgba(0, 163, 181, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); } .vel-gauge-card:hover::after { opacity: 1; } /* El gauge-top también brilla más */ .vel-gauge-card:hover .vel-gauge-top { background: linear-gradient(135deg, #005c66 0%, #009ab0 50%, #00c8d4 100%); box-shadow: 0 0 60px rgba(0, 163, 181, 0.35) inset; } /* El número 512 late más fuerte en hover */ .vel-gauge-card:hover .vel-speed-num { text-shadow: 0 0 40px rgba(255, 255, 255, 0.6), 0 0 80px rgba(255, 255, 255, 0.3); transform: scale(1.04); } .vel-gauge-top { background: linear-gradient(135deg, #006d77 0%, #00a3b5 100%); padding: 2rem 2rem 1.5rem; text-align: center; position: relative; overflow: hidden; } .vel-gauge-top::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 12px ); } .vel-gauge-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 30px; padding: 5px 14px; margin-bottom: 1.2rem; font-family: "Rajdhani", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); } .vel-gauge-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.5s ease-in-out infinite; } /* SVG Gauge */ .vel-gauge-svg { width: 100%; max-width: 240px; display: block; margin: 0 auto; } /* Speed value display */ .vel-speed-display { text-align: center; margin: 0.5rem 0 1.2rem; position: relative; z-index: 2; } .vel-speed-num { font-family: "Cinzel", serif; font-size: 3.2rem; font-weight: 700; color: #fff; line-height: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.3); transition: text-shadow 0.4s ease, transform 0.4s ease; display: inline-block; } .vel-speed-unit { font-family: "Rajdhani", sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.2em; } .vel-gauge-bottom { padding: 1.5rem 1.8rem 2rem; } /* Three metric cards */ .vel-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; margin-bottom: 1.5rem; } .vel-metric { background: var(--pearl2); border: 1px solid rgba(0, 163, 181, 0.1); border-radius: 12px; padding: 0.9rem 0.5rem; text-align: center; transition: all 0.2s; } .vel-metric:hover { border-color: rgba(0, 163, 181, 0.25); background: #fff; transform: translateY(-2px); } .vel-metric-label { font-family: "Rajdhani", sans-serif; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 4px; } .vel-metric-val { font-family: "Cinzel", serif; font-size: 1.05rem; font-weight: 700; animation: velPulse 2s ease-in-out infinite; } .vel-metric.dl .vel-metric-label { color: var(--jade); } .vel-metric.dl .vel-metric-val { color: var(--jade2); } .vel-metric.ul .vel-metric-label { color: var(--goldd); } .vel-metric.ul .vel-metric-val { color: var(--gold); } .vel-metric.ms .vel-metric-label { color: var(--sky2); } .vel-metric.ms .vel-metric-val { color: var(--sky2); } @keyframes velPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .ncta::before { display: none !important; } /* CTA button */ .vel-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; background: linear-gradient(135deg, var(--jade) 0%, var(--jade2) 100%); color: #fff; text-decoration: none; border-radius: 14px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.18em; text-transform: uppercase; box-shadow: 0 8px 28px rgba(0, 163, 181, 0.3); transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } .vel-cta::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.15), transparent ); transition: left 0.5s; } .vel-cta:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 14px 42px rgba(0, 163, 181, 0.5); } .vel-cta:hover::before { left: 100%; } .vel-cta-icon { width: 20px; height: 20px; } .vel-cta-sub { font-size: 0.6rem; opacity: 0.6; letter-spacing: 0.15em; text-align: center; margin-top: 0.7rem; font-family: "Rajdhani", sans-serif; color: var(--tmid); } /* RIGHT COLUMN */ .vel-right { display: flex; flex-direction: column; gap: 1.4rem; } /* Feature cards */ .vel-feature-card { background: #fff; border: 1px solid rgba(0, 163, 181, 0.1); border-radius: 20px; padding: 1.8rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); transition: all 0.3s; position: relative; overflow: hidden; } .vel-feature-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--jade), var(--jade2), var(--gold2)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; } .vel-feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 163, 181, 0.12); border-color: rgba(0, 163, 181, 0.22); } .vel-feature-card:hover::before { transform: scaleX(1); } .vel-fc-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; } .vel-fc-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient( 135deg, rgba(0, 163, 181, 0.1), rgba(0, 109, 119, 0.08) ); border: 1px solid rgba(0, 163, 181, 0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .vel-fc-icon svg { width: 24px; height: 24px; stroke: var(--jade2); fill: none; stroke-width: 1.8; } .vel-fc-label { font-family: "Rajdhani", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--jade2); margin-bottom: 2px; } .vel-fc-title { font-family: "Cinzel", serif; font-size: 1.05rem; font-weight: 700; color: var(--tdark); } /* Feature dots list */ .vel-dots { display: flex; flex-direction: column; gap: 0.6rem; } .vel-dot-row { display: flex; align-items: center; gap: 10px; } .vel-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .vel-dot-text { font-family: "Montserrat", sans-serif; font-size: 0.83rem; color: var(--tmid); line-height: 1.5; } /* Stats bar inside right */ .vel-stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; } .vel-stat-pill { background: linear-gradient( 135deg, rgba(0, 163, 181, 0.06), rgba(0, 109, 119, 0.04) ); border: 1px solid rgba(0, 163, 181, 0.14); border-radius: 16px; padding: 1.2rem 0.8rem; text-align: center; transition: all 0.2s; } .vel-stat-pill:nth-child(2) { background: linear-gradient( 135deg, rgba(201, 168, 76, 0.06), rgba(160, 118, 46, 0.03) ); border-color: rgba(201, 168, 76, 0.18); } .vel-stat-pill:nth-child(3) { background: linear-gradient( 135deg, rgba(91, 164, 199, 0.06), rgba(91, 164, 199, 0.03) ); border-color: rgba(91, 164, 199, 0.18); } .vel-stat-pill:hover { transform: translateY(-2px); } .vel-stat-num { font-family: "Cinzel", serif; font-size: 1.7rem; font-weight: 700; line-height: 1; } .vel-stat-pill:nth-child(1) .vel-stat-num { color: var(--jade2); } .vel-stat-pill:nth-child(2) .vel-stat-num { color: var(--gold); } .vel-stat-pill:nth-child(3) .vel-stat-num { color: var(--sky2); } .vel-stat-lbl { font-family: "Rajdhani", sans-serif; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tmid); margin-top: 4px; } /* How it works steps */ .vel-steps { display: flex; flex-direction: column; gap: 1rem; } .vel-step { display: flex; align-items: flex-start; gap: 1rem; } .vel-step-num { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--jade), var(--jade2)); display: flex; align-items: center; justify-content: center; font-family: "Cinzel", serif; font-size: 0.85rem; font-weight: 700; color: #fff; box-shadow: 0 4px 14px rgba(0, 163, 181, 0.3); } .vel-step-text { flex: 1; } .vel-step-head { font-family: "Rajdhani", sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--tdark); letter-spacing: 0.08em; margin-bottom: 2px; } .vel-step-desc { font-family: "Montserrat", sans-serif; font-size: 0.75rem; color: var(--tmid); line-height: 1.6; } /* Official badge */ .vel-official-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--goldd), var(--gold2)); color: var(--ink); padding: 8px 18px; border-radius: 30px; font-family: "Rajdhani", sans-serif; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; box-shadow: 0 4px 16px rgba(201, 168, 76, 0.35); } /* Responsive velocidad */ @media (max-width: 900px) { .vel-grid { grid-template-columns: 1fr; } .vel-gauge-card { max-width: 480px; margin: 0 auto; } } @media (max-width: 540px) { .vel-metrics { grid-template-columns: 1fr 1fr 1fr; } .vel-stats-row { grid-template-columns: 1fr 1fr 1fr; } .vel-metric-val { font-size: 0.85rem; } } @keyframes vDash { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 40; } } @keyframes vNeedle { from { transform: rotate(-75deg); } to { transform: rotate(45deg); } } @keyframes vNum { 0% { content: ""; } 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } } /* ════════════════════════════════════════════════ PANTALLAS MUY GRANDES: 2560px+ (4K / ultrawide) ════════════════════════════════════════════════ */ @media (min-width: 2560px) { .hh1 { font-size: clamp(6rem, 7vw, 8rem) !important; } .hsub { font-size: 2.4rem !important; } .cv-num { font-size: 90px; } .stit { font-size: clamp(4.2rem, 6vw, 6.5rem) !important; } .srv-card-name { font-size: clamp(3.2rem, 4.5vw, 4.6rem); } .plsn { font-size: 6rem; } .plc { flex: 0 0 440px !important; } .vel-speed-num { font-size: 5.5rem; } .finn { max-width: 2200px; } .srv-featured { max-width: 2200px; } .vel-wrap { max-width: 2200px; } .ctinn { max-width: 2200px; } } /* ============================================ 📱 RESPONSIVE - TABLETS (990px - 1420px) ============================================ */ @media (max-width: 1420px) and (min-width: 950px) { /* CURSOR oculto en touch */ #cr, #cd, #ct { display: none !important; } body { cursor: auto !important; } /* Stats */ .sbar .sinn { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } .sitem { padding: 1rem 0.5rem !important; } .snum { font-size: 1.6rem !important; } .slbl { font-size: 0.7rem !important; } /* NAV */ nav { padding: 0 1.2rem; height: 58px; } .nlw { display: none; } .nlogo img { height: 34px; margin-right: 0.4rem; } .nlinks { gap: 0.7rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; padding: 0.5rem 0.4rem !important; } .nlinks::-webkit-scrollbar { display: none; } .nlinks a { font-size: 0.97rem; padding: 0.5rem 0.3rem; } .ncta { padding: 8px 12px !important; font-size: 1rem !important; white-space: nowrap; } /* HERO — logo arriba, texto abajo */ .hcontent { padding: clamp(4.5rem, 6vw, 6rem) clamp(1.5rem, 3vw, 4rem) clamp(2rem, 3vw, 3rem); gap: 1rem; } .hero-logo-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(2rem, 4vw, 5rem); margin-bottom: 0.5rem; } .hlstage { width: clamp(240px, 18vw, 380px) !important; height: clamp(240px, 18vw, 380px) !important; overflow: visible !important; } .hlimg { width: 260px !important; } .or1 { width: 290px; height: 290px; margin: -145px 0 0 -145px; } .or2 { width: 310px; height: 310px; margin: -155px 0 0 -155px; } .heyebrow { font-size: 1.45rem; white-space: normal; text-align: center; flex-wrap: wrap; letter-spacing: 0.2em; } .hh1 { font-size: clamp(3rem, 7vw, 5rem) !important; text-align: center; margin-bottom: -0.1rem; } .hsub { font-size: 1.35rem !important; text-align: center; margin-bottom: -0.1rem; /* Espacio entre subtítulo y botones */ } .hbtns { flex-direction: row !important; gap: 0.9rem !important; max-width: 470px !important; margin: 1.2rem auto 0; justify-content: center; gap: 0.8rem; /* Espacio entre los botones mismos */ } .hbtns a { flex: 1; text-align: center; padding: 13px 18px !important; font-size: 0.95rem !important; white-space: nowrap; } /* SERVICIOS */ .srv-card-big { grid-template-columns: 1fr; } .srv-card-visual { min-height: 260px; } .srv-card-content { padding: 2rem; } .srv-mini-row { grid-template-columns: repeat(2, 1fr); } .srv-visual-stats { display: none; } /* PLANES — 3 columnas en tablet */ .plsl { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; justify-content: center !important; padding: 1rem 0.8rem 2rem !important; gap: 1rem !important; overflow: visible !important; scrollbar-width: none !important; } .slwrap { width: 100% !important; overflow: visible !important; } .plsl::-webkit-scrollbar { display: none !important; } /* Plan Cable TV - centrado en 1 columna */ #sl-cable { grid-template-columns: 1fr !important; max-width: 360px !important; margin: 0 auto !important; } .plc { flex: none !important; width: auto !important; max-width: 100% !important; scroll-snap-align: unset !important; } .pltabs { flex-wrap: wrap; } .pltab { flex: 1 1 30%; font-size: 0.75rem !important; padding: 10px 12px !important; } /* IPTV */ .iptv-grid { grid-template-columns: 1fr; gap: 2.5rem; } #iptv { --iptv-ring-1: 310px; --iptv-ring-2: 265px; --iptv-ring-3: 220px; --iptv-glow: 238px; --iptv-card: 192px; --iptv-wrap: 330px; } /* VELOCIDAD */ .vel-grid { grid-template-columns: 1fr; } .vel-gauge-card { max-width: 480px; margin: 0 auto; } /* REVIEWS */ .reviews-grid-wrap { grid-template-columns: 1fr 1fr; } .cvm-form-grid { grid-template-columns: 1fr; } /* MASCOTA */ .mascot-wrap { position: fixed; bottom: 90px; right: 22px; z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 0; cursor: pointer; } .mascot-img { width: 120px; height: 120px; } .mascot-bubble { font-size: 0.72rem; padding: 0.5rem 1.1rem; } /* TRIGGER ANUNCIO */ #ad-panel { width: 100vw; } .ad-panel-head { padding: 0 1.2rem 1.2rem; padding-top: 10px; } .ad-body { padding: 1rem 1.2rem 2rem; } /* CONTACTO */ .ctinn { grid-template-columns: 1fr 1.2fr; gap: 2rem; } .cc { flex-direction: column; text-align: center; align-items: center; padding: 1.2rem; } .frow { grid-template-columns: 1fr !important; } .sedes-lista { flex-wrap: wrap; justify-content: center; } /* FOOTER — 4 columnas conservadas */ .finn { grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 2.5rem; max-width: 1100px; } /* FOOTER — 2 columnas .finn { grid-template-columns: repeat(2, 1fr) !important; gap: 1.8rem !important; } */ /* CHAT */ .chatOptions { width: 280px; } .chatMainBtn .btnText { display: none; } } /* ============================================ 📱 RESPONSIVE - MÓVILES GRANDES (200 - 990px) ============================================ */ @media (max-width: 950px) and (min-width: 200px) { /* CURSOR oculto en móvil */ #cr, #cd, #ct { display: none !important; } body { cursor: auto !important; } /* ── HERO CONTENT ── */ /* HERO — stack vertical */ .hero { min-height: 75svh; } .hcontent { padding: 2.2rem 1rem 2rem; gap: 0.8rem; justify-content: center; min-height: calc(75svh - 68px); } .hero-logo-row { flex-direction: column !important; align-items: center; gap: 0.2rem; margin-bottom: 0.2rem; width: 100%; } .hlstage { width: 240px !important; height: 240px !important; overflow: visible !important; margin: 0 auto !important; } .hlimg { width: clamp(200px, 22vw, 340px) !important; height: auto !important; /* ← AGREGAR: mantiene proporción */ position: relative; z-index: 5; object-fit: contain; /* ← AGREGAR: no deforma */ filter: drop-shadow(0 0 25px rgba(0, 163, 181, 0.9)) drop-shadow(0 0 60px rgba(0, 163, 181, 0.4)) brightness(1.05); /* ← UN SOLO filter combinado */ animation: lb 4s ease-in-out infinite; } .or1 { width: 230px; height: 230px; margin: -115px 0 0 -115px; } .or1::after { width: 9px; height: 9px; top: -4.5px; border: 1.5px solid rgba(0, 163, 181, 0.45); margin-left: -4.5px; } .or2 { width: 250px; height: 250px; margin: -125px 0 0 -125px; } .or2::after { width: 7px; height: 7px; bottom: -3.5px; border: 1.5px solid rgba(0, 163, 181, 0.45); } .heyebrow { font-size: 0.85rem; white-space: normal; text-align: center; justify-content: center; flex-wrap: wrap; margin-bottom: 0.09rem; letter-spacing: 0.12em; order: 2; width: 100%; } .heyebrow::before, .heyebrow::after { width: 3px; } .hh1 { font-size: clamp(2.2rem, 9vw, 2.6rem) !important; text-align: center; margin-bottom: 0.4rem; /* Espacio entre título y subtítulo */ } .hsub { font-size: 1.2rem !important; text-align: center; margin-bottom: 1rem; /* Espacio entre subtítulo y botones */ } .hbtns { flex-direction: column; width: 100%; max-width: 200px; margin: 0.5rem auto 0; gap: 0.8rem; /* Espacio entre los botones mismos */ } .hbtns a { width: 100%; text-align: center; padding: 13px 15px !important; font-size: 0.95rem !important; } /* NAV */ nav { padding: 0 0.8rem; height: 54px; } .nlw { display: none; } .nlogo img { height: 30px; margin-right: 0.3rem; } .nlinks { gap: 0.15rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; padding: 0.4rem 0.3rem !important; } .nlinks::-webkit-scrollbar { display: none; } .nlinks a { font-size: 0.75rem; padding: 0.45rem 0.28rem; letter-spacing: 0.04em; } .ncta { padding: 7px 10px !important; font-size: 0.78rem !important; white-space: nowrap; border-radius: 14px; } /* Hero */ .hlstage { width: 260px; height: 260px; } /* Dentro del @media (max-width: 990px) */ .hero-logo-row { flex-direction: column; /* ← apila logo y eyebrow verticalmente en móvil */ gap: 0.3rem; margin-bottom: 1rem; } .hbtns { flex-direction: column; width: 100%; max-width: 280px; margin: 1.5rem auto 0; } .hbtns a { width: 100%; text-align: center; } /* Stats */ .sbar .sinn { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } .sitem { padding: 1rem 0.5rem !important; } .snum { font-size: 1.6rem !important; } .slbl { font-size: 0.7rem !important; } /* NOSOTROS */ #nosotros > div > div:first-child { grid-template-columns: 1fr !important; gap: 2rem !important; } .nos-split { grid-template-columns: 1fr !important; min-height: auto; border-radius: 12px; } .nos-right { padding: 2rem 1.5rem; } .nos-mini-stats { grid-template-columns: repeat(2, 1fr); } /* SERVICIOS */ .srv-section { padding: 3rem 1rem 4rem; } .srv-card-big { grid-template-columns: 1fr; } .srv-card-visual { min-height: 220px; } .srv-card-content { padding: 1.8rem 1.2rem; } .srv-mini-row { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } .srv-visual-stats { display: none; } .srv-card-name { font-size: 1.6rem !important; } .srv-card-desc { font-size: 0.82rem; } /* PLANES */ .plsec { padding: 4rem 1rem; } .plsl { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; padding: 1rem 0.8rem 2rem !important; gap: 1rem !important; scrollbar-width: none !important; } .plsl::-webkit-scrollbar { display: none !important; } .plc { flex: 0 0 255px !important; width: 255px !important; scroll-snap-align: center !important; } .pltabs { flex-wrap: wrap; gap: 0; } .pltab { flex: 1 1 30%; font-size: 0.72rem !important; padding: 9px 8px !important; } /* CABLE TV */ .tvsec { padding: 3.5rem 1rem; } .futbol-banner { flex-direction: column; min-height: auto; } .fb-left { padding: 1.6rem 1.2rem 0.8rem; gap: 1rem; } .fb-right { padding: 0.8rem 1.2rem 1.6rem; } .fb-divider { width: 80%; height: 1px; margin: 0 auto; } .fb-channels-row { justify-content: center; } .fb-cta-btn { align-self: center; } .tv-promo-banner { grid-template-columns: 1fr; } .chgrid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.8rem; } .chtab-wrap { gap: 0.4rem; padding: 0.4rem; } .chtab { padding: 8px 14px; font-size: 0.72rem; } /* IPTV */ .iptv-grid { grid-template-columns: 1fr; gap: 2rem; } #iptv { --iptv-ring-1: 220px; --iptv-ring-2: 188px; --iptv-ring-3: 156px; --iptv-glow: 168px; --iptv-card: 136px; --iptv-wrap: 234px; padding: 2.8rem 1rem !important; } .iptv-mini-grid { grid-template-columns: repeat(2, 1fr) !important; } /* VELOCIDAD */ .vel-grid { grid-template-columns: 1fr; gap: 1.5rem; } .vel-gauge-card { border-radius: 18px; } .vel-speed-num { font-size: 2.5rem; } .vel-metrics { grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; } .vel-stats-row { grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; } .vel-stat-num { font-size: 1.3rem; } .vel-feature-card { padding: 1.4rem 1rem; } #velocidad { padding: 3rem 1rem !important; } /* REVIEWS */ #comentarios { padding: 3.5rem 1rem; } .cvm-like-card { gap: 0.8rem; padding: 0.8rem 1rem; } .cvm-like-sep { display: none; } .cvm-review-form { padding: 1.5rem 1.2rem; } .cvm-form-grid { grid-template-columns: 1fr; gap: 1.2rem; } /* CONTACTO */ .ctsec { padding: 3rem 1rem; /* clip (no hidden): hidden+visible fuerza overflow-y:auto → barra interna fantasma */ overflow-x: clip !important; overflow-y: visible !important; } .ctinn { grid-template-columns: 1fr !important; gap: 1.8rem !important; overflow: visible !important; } /* Quitar backdrop-filter en mobile: muy costoso y causa glitch visual cuando JS actualiza el select con muchos options */ .contact-right .ctform, .cc, .hrsbox { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .cc { flex-direction: column; text-align: center; align-items: center; padding: 1rem; } .cc h4 { font-size: 0.95rem; } /* Select explícito para evitar renderizado extraño en Android/iOS */ .fg select { height: 44px !important; appearance: auto !important; -webkit-appearance: menulist !important; overflow: hidden !important; } .frow { grid-template-columns: 1fr !important; } .sedes-lista { flex-direction: column; gap: 0.5rem; text-align: center; } .sede { justify-content: center; } /* FOOTER */ footer { padding: 2rem 1.2rem 1rem !important; } .finn { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; } .fbr { text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 1.5rem; } .fc { text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 1.1rem; } .fc ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; } .fbot { flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; } .fbot p { font-size: 0.78rem; } /* CHAT */ .chatBubble { bottom: 14px; right: 14px; } .chatOptions { width: 88vw; max-width: 300px; bottom: 62px; } .chatMainBtn { padding: 12px 16px; font-size: 1rem; } .chatMainBtn .btnText { display: none; } /* MASCOTA */ .mascot-wrap { bottom: 60px; right: -5px; } .mascot-img { width: 89px; height: 95px; } .mascot-bubble { font-size: 0.65rem; padding: 0.45rem 0.25rem; } /* TRIGGER ANUNCIO */ #ad-panel { width: 100vw; } .ad-panel-head { padding: 0 1.2rem 1.2rem; padding-top: 10px; } .ad-body { padding: 1rem 1.2rem 2rem; } /* SECTIONS — padding base */ .plsec, .tvsec { padding: 3.5rem 1rem; } /* SBAR — barra de novedades */ .sbar { height: 50px; } .sbar-track { height: 50px; } .sbar-badge { font-size: 0.8rem; padding: 0 10px; letter-spacing: 0.18em; border-right-width: 2px; } .sbar-badge::after { border-top-width: 25px; border-right-width: 8px; right: -10px; } .sbar-item { font-size: 0.85rem; padding: 0 0.8rem; } .sbar-sep { font-size: 0.6rem; } /* ESTADÍSTICAS */ .cv-stats-inner { grid-template-columns: repeat(2, 1fr); } .cv-num { font-size: 20px; } /* Reducir transiciones pesadas en mobile */ .svc-card, .svr-card, .plc, .srv-card-big { transition: border-color 0.2s, box-shadow 0.2s !important; } .svc-card:hover { transform: none !important; } /* Eliminar filtros blur en orbes decorativos (muy costosos en mobile) */ [class*="srv-orb"], [style*="filter:blur"], [style*="filter: blur"] { filter: none !important; } } /* ── Contain: evitar recálculos de layout en secciones independientes ── */ #planes, #cabletv, #velocidad, #comentarios { contain: layout style; } /* Desktop - Mantener como está @media (min-width: 1600px) { .plsl { justify-content: center !important; overflow-x: visible !important; scroll-snap-type: none !important; } .plc { flex: 0 0 290px !important; } } */ /* ============================================ 📊 ANIMACIÓN DE CONTADOR DE ESTADÍSTICAS ============================================ */ .stat-number { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .stat-number.animate { opacity: 1; transform: translateY(0); } .tkbar { position: relative; z-index: 10; background: linear-gradient(180deg, #020710 0%, #0a0f1c 50%, #020710 100%); overflow: hidden; /* Bordes degradados arriba y abajo como "FUTURO DIGITAL" */ border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-image: linear-gradient( 90deg, var(--jade) 0%, var(--jade2) 20%, var(--sky) 40%, var(--gold2) 60%, var(--gold) 80%, var(--jade2) 100% ) 1; box-shadow: 0 10px 40px rgba(0, 163, 181, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Líneas de brillo animadas */ .tkbar::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient( 90deg, transparent, var(--jade2), var(--gold2), transparent ); animation: shimmerBar 4s ease-in-out infinite; z-index: 11; } .tkbar::after { content: ""; position: absolute; bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient( 90deg, transparent, var(--gold2), var(--jade2), transparent ); animation: shimmerBar 4s ease-in-out infinite 2s; z-index: 11; } /* Línea decorativa inferior BRILLANTE */ .cv-divider { height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(232, 199, 106, 0.6) 20%, rgba(0, 163, 181, 0.8) 50%, rgba(232, 199, 106, 0.6) 80%, transparent 100% ); box-shadow: 0 0 20px rgba(0, 163, 181, 0.5); } /* ============================================ 📊 STATS - VERSIÓN CENTELLANTE ✨ ============================================ */ .cv-stats { background: linear-gradient( 180deg, rgba(0, 163, 181, 0.1) 0%, rgba(201, 168, 76, 0.05) 50%, rgba(0, 163, 181, 0.08) 100% ), linear-gradient(180deg, #020610 0%, #0a1525 50%, #0f1f35 100%); position: relative; overflow: hidden; border-top: 2px solid rgba(232, 199, 106, 0.5); border-bottom: 2px solid rgba(0, 163, 181, 0.4); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(0, 163, 181, 0.1); } /* Efecto de partículas brillantes de fondo */ .cv-stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 80% at 20% 50%, rgba(0, 163, 181, 0.15) 0%, transparent 70% ), radial-gradient( ellipse 50% 70% at 80% 50%, rgba(232, 199, 106, 0.12) 0%, transparent 70% ), radial-gradient( ellipse 40% 60% at 50% 50%, rgba(168, 216, 234, 0.08) 0%, transparent 70% ); pointer-events: none; animation: statsGlow 8s ease-in-out infinite; } @keyframes statsGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Líneas de luz animadas */ .cv-stats::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100% ); animation: statsShine 6s ease-in-out infinite; pointer-events: none; } @keyframes statsShine { 0%, 100% { left: -100%; } 50%, 100% { left: 100%; } } .cv-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; } .cv-sitem { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-right: 1px solid rgba(0, 163, 181, 0.2); } .cv-sitem:last-child { border-right: none; } .cv-sitem:hover { background: rgba(0, 163, 181, 0.08); transform: translateY(-5px); box-shadow: inset 0 0 40px rgba(0, 163, 181, 0.15), 0 10px 30px rgba(0, 0, 0, 0.3); } .cv-sitem:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1px; background: linear-gradient( 180deg, transparent 0%, rgba(232, 199, 106, 0.5) 20%, rgba(0, 163, 181, 0.8) 50%, rgba(232, 199, 106, 0.5) 80%, transparent 100% ); box-shadow: 0 0 10px rgba(0, 163, 181, 0.5); } /* Icono BRILLANTE */ .cv-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; background: linear-gradient( 135deg, rgba(0, 163, 181, 0.2) 0%, rgba(232, 199, 106, 0.15) 100% ); border: 2px solid rgba(0, 163, 181, 0.4); box-shadow: 0 0 20px rgba(0, 163, 181, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.1); } .cv-icon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient( circle, rgba(255, 255, 255, 0.4) 0%, transparent 70% ); opacity: 0; transition: opacity 0.3s ease; } .cv-icon::after { content: ""; position: absolute; inset: -50%; background: linear-gradient( 45deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70% ); opacity: 0; transition: opacity 0.3s ease; transform: translateX(-100%) rotate(45deg); } .cv-sitem:hover .cv-icon { transform: scale(1.15) rotate(5deg); background: linear-gradient( 135deg, rgba(0, 163, 181, 0.4) 0%, rgba(232, 199, 106, 0.3) 100% ); border-color: rgba(232, 199, 106, 0.8); box-shadow: 0 0 30px rgba(0, 163, 181, 0.7), 0 0 60px rgba(232, 199, 106, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.2); } .cv-sitem:hover .cv-icon::before { opacity: 1; animation: iconPulse 1s ease-out; } .cv-sitem:hover .cv-icon::after { opacity: 1; animation: shine 1.2s ease-out; } @keyframes iconPulse { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } @keyframes shine { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } } /* Responsive */ @media (max-width: 990px) { .cv-stats-inner { grid-template-columns: repeat(2, 1fr); } .cv-sitem:nth-child(2) { border-right: none; border-bottom: 1px solid rgba(0, 163, 181, 0.2); } .cv-ticker { height: 70px; } .cv-titem { font-size: 0.95rem; padding: 0 20px; } } .cv-icon svg { width: 18px; height: 18px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cv-icon.jade-i { background: rgba(0, 109, 119, 0.2); border: 1px solid rgba(0, 163, 181, 0.3); } .cv-icon.jade-i svg { stroke: var(--jade2); } .cv-icon.gold-i { background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(201, 168, 76, 0.3); } .cv-icon.gold-i svg { stroke: var(--gold); } .cv-icon.sky-i { background: rgba(91, 164, 199, 0.12); border: 1px solid rgba(91, 164, 199, 0.3); } .cv-icon.sky-i svg { stroke: var(--sky2); } .cv-icon.teal-i { background: rgba(0, 163, 181, 0.1); border: 1px solid rgba(0, 163, 181, 0.25); } .cv-icon.teal-i svg { stroke: var(--jade2); } .cv-num { font-family: "Rajdhani", sans-serif; font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -1px; margin-bottom: 4px; } .cv-num.jade-c { color: var(--jade2); } .cv-num.gold-c { color: var(--gold2); } .cv-num.sky-c { color: var(--sky); } .cv-suffix { font-family: "Rajdhani", sans-serif; font-size: 28px; font-weight: 700; opacity: 0.8; } .cv-lbl { font-size: 12px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--tmid); text-align: center; margin-top: 2px; } .cv-sublbl { font-size: 10px; color: rgba(138, 175, 200, 0.45); margin-top: 3px; text-align: center; } .cv-bottom-line { height: 1px; background: linear-gradient( 90deg, transparent, rgba(0, 163, 181, 0.3) 30%, rgba(201, 168, 76, 0.4) 60%, transparent ); } @media (max-width: 600px) { .cv-stats-inner { grid-template-columns: repeat(2, 1fr); } .cv-sitem:nth-child(2)::after { display: none; } .cv-num { font-size: 30px; } } /* ============================================ 📱 RESPONSIVE — DESKTOP GRANDE ============================================ */ @media (max-width: 1600px) and (min-width: 1320px) { .sbar { height: 100px; } .sbar-track { height: 100px; } .sbar-badge { font-size: 1.35rem; padding: 0 44px; letter-spacing: 0.4em; } .sbar-item { font-size: 1.4rem; padding: 0 2rem; } .sbar-sep { font-size: 1.1rem; } } /* ============================================ 📱 RESPONSIVE — TABLET ============================================ */ @media (max-width: 1320px) and (min-width: 990px) { .sbar { height: 65px; } .sbar-track { height: 65px; } .sbar-badge { font-size: 1.15rem; padding: 0 20px; letter-spacing: 0.3em; } .sbar-item { font-size: 1.25rem; padding: 0 1.8rem; } .sbar-sep { font-size: 0.85rem; } } /* ============================================ 📱 RESPONSIVE — MÓVIL ============================================ */ @media (max-width: 990px) and (min-width: 400px) { .sbar { height: 55px; } .sbar-track { height: 55px; } .sbar-badge { font-size: 1rem; padding: 0 10px; letter-spacing: 0.2em; border-right-width: 2px; } .sbar-badge::after { border-top-width: 25px; border-right-width: 8px; right: -10px; } .sbar-badge-dot { width: 5px; height: 5px; } .sbar-badge-sparkle-left, .sbar-badge-sparkle-right { font-size: 0.5rem; } .sbar-item { font-size: 1rem; padding: 0 1rem; } .sbar-sep { font-size: 0.65rem; } } /* Servicios y contratar responsive */ @media (max-width: 900px) { .srv-ultra-card { /* los 4 cards en 2 col */ } } /* Grid servicios y Timeline en móvil */ @media (max-width: 768px) { /* 1. SERVICIOS: 2 columnas compactas */ [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 0.8rem !important; /* Menos espacio entre tarjetas */ } /* 2. TIMELINE: Diseño "Pirámide" (2 arriba, 1 en medio) */ /* Cambiamos a 2 columnas para que quepan 2 pasos arriba */ [style*="grid-template-columns:1fr auto 1fr auto 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; /* Reducimos espacio vertical */ } /* Ocultamos las líneas conectoras (que eran las columnas 'auto') */ [style*="grid-template-columns:1fr auto 1fr auto 1fr"] > div:nth-child(2), [style*="grid-template-columns:1fr auto 1fr auto 1fr"] > div:nth-child(4) { display: none !important; } /* Centramos el último paso (Paso 3) para que quede "en medio" abajo */ [style*="grid-template-columns:1fr auto 1fr auto 1fr"] > div:nth-child(5) { grid-column: 1 / -1 !important; /* Ocupa todo el ancho de la fila */ justify-self: center !important; /* Centra la tarjeta horizontalmente */ max-width: 280px !important; /* Limita el ancho para que se vea como un bloque centrado */ margin-top: 0.5rem !important; } } /* ctsec overrides consolidados en .ctsec.sd al final del style */ /* ============================================ FOOTER — MODERNO ============================================ */ footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, transparent, var(--jade2), var(--gold2), var(--jade2), transparent ); z-index: 2; } /* ── Redes sociales footer ── */ .footer-social { display: flex; gap: 0.65rem; margin-top: 1.1rem; flex-wrap: wrap; } .fsoc-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: rgba(232, 242, 250, 0.7); text-decoration: none; transition: all 0.2s ease; } .fsoc-btn:hover { transform: translateY(-3px); } .fsoc-btn.fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4); } .fsoc-btn.ig:hover { background: linear-gradient( 135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888 ); border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(220, 39, 67, 0.4); } .fsoc-btn.tt:hover { background: #010101; border-color: #010101; color: #fff; box-shadow: 0 6px 20px rgba(1, 1, 1, 0.5); } .fsoc-btn.wa:hover { background: #25d366; border-color: #25d366; color: #fff; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); } /* ── Reviews card mejorado ── */ .review-card-premium { transition: all 0.3s ease !important; } .review-card-premium:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 40px rgba(0, 109, 119, 0.18) !important; border-color: rgba(0, 163, 181, 0.28) !important; } /* ── Ad panel mundial ── */ #ad-panel { background: linear-gradient(145deg, #020812 0%, #071428 50%, #0a1a38 100%); border-left: 3px solid var(--jade2); box-shadow: -8px 0 60px rgba(0, 163, 181, 0.3), -2px 0 20px rgba(0, 0, 0, 0.8); } /* ── Mundial 2026 banner — BRILLANTE ── */ .mundial-2026-banner { background: radial-gradient( ellipse 80% 60% at 0% 50%, rgba(0, 163, 181, 0.18) 0%, transparent 55% ), radial-gradient( ellipse 70% 60% at 100% 50%, rgba(201, 168, 76, 0.12) 0%, transparent 55% ), radial-gradient( ellipse 60% 40% at 50% 0%, rgba(0, 163, 181, 0.1) 0%, transparent 50% ), linear-gradient( 135deg, var(--ink4) 0%, var(--ink2) 40%, var(--ink3) 70%, #0d1a2e 100% ) !important; border: 1px solid rgba(0, 163, 181, 0.35) !important; border-radius: 24px !important; box-shadow: 0 0 0 1px rgba(0, 163, 181, 0.1), 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 163, 181, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; overflow: hidden; animation: bannerPulse 6s ease-in-out infinite; position: relative; } .mundial-flags-bar { display: flex; gap: 6px; margin-bottom: 0.8rem; flex-wrap: wrap; } .mundial-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-family: "Rajdhani", sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .mundial-flag.usa { background: rgba(59, 59, 110, 0.4); border: 1px solid rgba(59, 59, 110, 0.6); color: #ccd; } .mundial-flag.can { background: rgba(255, 0, 0, 0.15); border: 1px solid rgba(255, 0, 0, 0.35); color: #fcc; } .mundial-flag.mex { background: rgba(0, 104, 71, 0.2); border: 1px solid rgba(0, 104, 71, 0.45); color: #cfc; } .mundial-title-main { font-family: "Cinzel", serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; color: #fff; letter-spacing: 0.06em; line-height: 1; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); } .mundial-title-sub { font-family: "Rajdhani", sans-serif; font-size: clamp(0.8rem, 2vw, 1.05rem); font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-top: 0.3rem; } .mundial-year-badge { display: inline-block; background: linear-gradient(135deg, var(--goldd), var(--gold2)); color: var(--ink); font-family: "Cinzel", serif; font-size: clamp(1rem, 2.5vw, 1.5rem); font-weight: 900; padding: 4px 16px; border-radius: 6px; letter-spacing: 0.1em; box-shadow: 0 4px 16px rgba(201, 168, 76, 0.5); margin-left: 0.5rem; vertical-align: middle; } .mundial-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; padding: 2rem 2.5rem; position: relative; z-index: 2; } @media (max-width: 700px) { .mundial-layout { grid-template-columns: 1fr; padding: 1.5rem; } } .mundial-right-channels { display: flex; flex-direction: column; gap: 0.6rem; } .mundial-ch-label { font-family: "Rajdhani", sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.4rem; } .mundial-ch-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: stretch; } /* Botón contratar del banner — override ultra-llamativo */ .mundial-cta-btn { position: relative; overflow: hidden; } .mundial-cta-btn::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); transform: skewX(-20deg); animation: btnShimmerSlide 2.8s ease-in-out infinite; } @keyframes btnShimmerSlide { 0%, 40% { left: -60%; opacity: 0; } 50% { opacity: 1; } 100% { left: 130%; opacity: 0; } } .mundial-ch-card { display: flex; align-items: center; gap: 0.6rem; background: linear-gradient( 135deg, rgba(0, 163, 181, 0.1), rgba(255, 255, 255, 0.06) ); border: 1px solid rgba(0, 163, 181, 0.2); border-radius: 12px; padding: 0.6rem 1rem; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: default; position: relative; overflow: hidden; } .mundial-ch-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(0, 163, 181, 0.6), var(--gold2), transparent ); opacity: 0; transition: opacity 0.3s; } .mundial-ch-card:hover { background: linear-gradient( 135deg, rgba(0, 163, 181, 0.2), rgba(0, 109, 119, 0.15) ); border-color: rgba(0, 163, 181, 0.4); transform: translateY(-4px) scale(1.04); box-shadow: 0 8px 24px rgba(0, 163, 181, 0.25), 0 0 0 1px rgba(0, 163, 181, 0.15); } .mundial-ch-card:hover::before { opacity: 1; } .mundial-ch-card img { height: 32px; width: auto; object-fit: contain; filter: brightness(1.05) drop-shadow(0 0 6px rgba(0, 163, 181, 0.4)); transition: filter 0.3s; } .mundial-ch-card:hover img { filter: brightness(1.15) drop-shadow(0 0 12px rgba(0, 163, 181, 0.7)); } .mundial-ch-name { font-family: "Rajdhani", sans-serif; font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.08em; } .mundial-cta-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.2rem; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; font-family: "Rajdhani", sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 28px; border-radius: 30px; text-decoration: none; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 6px 24px rgba(0, 163, 181, 0.4), 0 0 0 0 rgba(0, 163, 181, 0.3); animation: btnPulseGlow 2.8s ease-in-out infinite; } @keyframes btnPulseGlow { 0%, 100% { box-shadow: 0 6px 24px rgba(0, 163, 181, 0.4), 0 0 0 0 rgba(0, 163, 181, 0.2); } 50% { box-shadow: 0 6px 32px rgba(0, 163, 181, 0.6), 0 0 0 8px rgba(0, 163, 181, 0); } } .mundial-cta-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 40px rgba(0, 163, 181, 0.65); } .mundial-bg-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .mundial-bg-deco::before { content: ""; position: absolute; top: -30%; right: -10%; width: 500px; height: 500px; background: radial-gradient( circle, rgba(0, 163, 181, 0.12) 0%, transparent 65% ); border-radius: 50%; } .mundial-bg-deco::after { content: ""; position: absolute; bottom: -20%; left: -5%; width: 400px; height: 400px; background: radial-gradient( circle, rgba(201, 168, 76, 0.1) 0%, transparent 65% ); border-radius: 50%; } /* ============================================================ FORMULARIO DARK — SD con destellos premium ============================================================ */ .ctsec.sd { background: radial-gradient( ellipse 70% 50% at 15% 25%, rgba(0, 163, 181, 0.1) 0%, transparent 55% ), radial-gradient( ellipse 60% 45% at 85% 75%, rgba(201, 168, 76, 0.07) 0%, transparent 50% ), linear-gradient( 170deg, var(--ink4) 0%, var(--ink2) 45%, var(--ink3) 80%, #0d1a2e 100% ); } /* Línea superior brillante en formulario */ .ctsec.sd::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--jade2), var(--gold2), var(--jade2), transparent ); z-index: 3; display: block !important; } /* Tarjetas contacto en dark */ .ctsec.sd .cc { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(0, 163, 181, 0.14); border-radius: 14px; } .ctsec.sd .cc:hover { background: rgba(0, 163, 181, 0.07); border-color: rgba(0, 163, 181, 0.3); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0, 163, 181, 0.12); } .ctsec.sd .cc h4 { color: var(--twhite); } .ctsec.sd .cc a, .ctsec.sd .cc p { color: rgba(232, 242, 250, 0.7); } .ctsec.sd .cc a:hover { color: var(--jade2); } .ctsec.sd .cc p strong { color: var(--twhite); } .ctsec.sd .cci { background: linear-gradient( 135deg, rgba(0, 163, 181, 0.15), rgba(0, 109, 119, 0.1) ); border: 1px solid rgba(0, 163, 181, 0.2); } .ctsec.sd .cci svg { stroke: var(--jade2); } /* Horarios dark */ .ctsec.sd .hrsbox { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 163, 181, 0.12); border-radius: 14px; } .ctsec.sd .hrsbox h4 { color: var(--jade2); } .ctsec.sd .dy { color: rgba(232, 242, 250, 0.6); } .ctsec.sd .tm { color: var(--twhite); } .ctsec.sd .hrrow { border-bottom-color: rgba(255, 255, 255, 0.06); } /* Formulario inputs dark */ .ctsec.sd .ctform { position: relative; background: radial-gradient( 120% 80% at 100% 0%, rgba(127, 176, 105, 0.06), transparent 55% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02) ); border: 1px solid rgba(0, 163, 181, 0.16); border-radius: 18px; padding: 1.75rem; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Barra de acento verde valle → teal en el borde superior del formulario */ .ctsec.sd .ctform::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient( 90deg, transparent, var(--valle), var(--jade2), transparent ); opacity: 0.9; } .ctsec.sd .fg label { color: rgba(232, 242, 250, 0.65); letter-spacing: 0.05em; } .ctsec.sd .fg input, .ctsec.sd .fg select, .ctsec.sd .fg textarea { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 163, 181, 0.18); color: var(--twhite); border-radius: 8px; } .ctsec.sd .fg input:focus, .ctsec.sd .fg select:focus, .ctsec.sd .fg textarea:focus { border-color: var(--jade2); background: rgba(0, 163, 181, 0.06); outline: none; box-shadow: 0 0 0 3px rgba(0, 163, 181, 0.12); } .ctsec.sd .fg input::placeholder, .ctsec.sd .fg textarea::placeholder { color: rgba(232, 242, 250, 0.3); } .ctsec.sd .fg select option { background: #0b1525; color: var(--twhite); } .ctsec.sd .stit.d .ac, .ctsec.sd .stit .ac { background: linear-gradient(135deg, var(--jade2), var(--gold2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Términos y condiciones en dark */ .ctsec.sd #terminos-texto { background: rgba(0, 109, 119, 0.08); border-color: rgba(0, 163, 181, 0.15); } .ctsec.sd #terminos-texto p { color: rgba(232, 242, 250, 0.65) !important; } .ctsec.sd #terminos-texto strong { color: var(--twhite) !important; } /* Label términos en dark */ .ctsec.sd label[for="f-terminos"] { color: rgba(232, 242, 250, 0.6) !important; } /* Sección comentarios — overrides light */ #comentarios .cvm-like-card { background: #fff; } #comentarios .cvm-form-label { color: var(--tdark); } #comentarios .cvm-form-input, #comentarios .cvm-form-textarea { background: #fff; border-color: rgba(0, 109, 119, 0.12); color: var(--tdark); } #comentarios .cvm-form-input::placeholder, #comentarios .cvm-form-textarea::placeholder { color: var(--tlight); } #comentarios .svc-opt { background: rgba(0, 109, 119, 0.04); border-color: rgba(0, 109, 119, 0.12); color: var(--tmid); } #comentarios .svc-opt.active, #comentarios .svc-opt:hover { background: linear-gradient( 135deg, rgba(0, 109, 119, 0.08), rgba(0, 163, 181, 0.1) ); border-color: rgba(0, 163, 181, 0.3); color: var(--jade); } /* ════════════════════════════════════════ COMUNIDAD — 2 COLUMNAS RESPONSIVO ════════════════════════════════════════ */ .com-2col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: start; width: 100%; } .com-col-left { min-width: 0; overflow: hidden; } .com-col-right { min-width: 0; } /* Asegurar form visible completo */ #comentarios .cvm-form-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } /* Review cards en light */ #comentarios .review-card-premium { background: #fff; border: 1px solid rgba(0, 109, 119, 0.08); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05); } #comentarios .review-card-premium:hover { border-color: rgba(0, 163, 181, 0.2); background: #f4fbfc; box-shadow: 0 10px 32px rgba(0, 109, 119, 0.1); transform: translateY(-4px); } #comentarios .review-card-premium::before { background: linear-gradient(90deg, transparent, var(--jade2), transparent); opacity: 0; } #comentarios .review-card-premium:hover::before { opacity: 1; } /* Texto review card en light */ #comentarios .rv-author { color: var(--tdark) !important; } #comentarios .rv-body, #comentarios .rv-text { color: var(--tmid) !important; } #comentarios .rv-tag { background: rgba(0, 109, 119, 0.07) !important; color: var(--jade) !important; border-color: rgba(0, 109, 119, 0.12) !important; } #comentarios .rv-date { color: var(--tlight) !important; } #comentarios .rv-stars { color: var(--goldd) !important; } #comentarios .like-count { color: var(--tmid) !important; } #comentarios .review-like-btn-premium { background: rgba(0, 109, 119, 0.05) !important; border-color: rgba(0, 109, 119, 0.1) !important; color: var(--tmid) !important; } #comentarios .review-like-btn-premium.liked, #comentarios .review-like-btn-premium:hover { background: rgba(0, 163, 181, 0.1) !important; border-color: rgba(0, 163, 181, 0.25) !important; color: var(--jade) !important; } /* Formulario de reviews en light */ #comentarios .cvm-review-form { background: #fff; border: 1px solid rgba(0, 109, 119, 0.1); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06); } #comentarios .cvm-review-form::before { background: linear-gradient(90deg, var(--jade), var(--jade2), var(--gold2)); } #comentarios .cvm-form-label { color: var(--tdark); } #comentarios .cvm-form-input, #comentarios .cvm-form-textarea { background: var(--pearl2); border-color: rgba(0, 109, 119, 0.12); color: var(--tdark); } #comentarios .cvm-form-input:focus, #comentarios .cvm-form-textarea:focus { border-color: var(--jade2); background: #fff; box-shadow: 0 0 0 3px rgba(0, 163, 181, 0.1); } #comentarios .cvm-form-input::placeholder, #comentarios .cvm-form-textarea::placeholder { color: var(--tlight); } #comentarios .cvm-submit-btn { background: linear-gradient(135deg, var(--jade), var(--jade2)); box-shadow: 0 6px 24px rgba(0, 163, 181, 0.3); } #comentarios .cvm-submit-btn:hover { box-shadow: 0 10px 36px rgba(0, 163, 181, 0.45); } #comentarios .rf-star-btn { color: var(--goldd); } #comentarios .rf-star-btn.active { color: var(--gold2); text-shadow: 0 0 8px rgba(201, 168, 76, 0.5); } /* Like card en light */ #comentarios .cvm-like-card { background: #fff; border: 1px solid rgba(0, 109, 119, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } #comentarios .cvm-like-count { color: var(--tdark); } #comentarios .cvm-like-label, #comentarios .cvm-like-text { color: var(--tmid); } #comentarios .cvm-like-btn { border-color: rgba(0, 109, 119, 0.15); color: var(--jade); } #comentarios .cvm-like-btn:hover, #comentarios .cvm-like-btn.active { background: var(--jade); border-color: var(--jade); color: #fff; } /* Reviews loading en light */ #comentarios .reviews-loading { color: var(--tmid); } #comentarios .reviews-spinner { border-top-color: var(--jade2); } @media (max-width: 900px) { .com-2col { grid-template-columns: 1fr; gap: 2rem; } .cvm-review-form { position: static !important; } } /* ════════════════════════════════════════ SERVICIOS — COMPACTO & DINÁMICO ════════════════════════════════════════ */ /* Reducir el srv-featured card a formato compacto */ .srv-card-big { grid-template-columns: auto 1fr !important; min-height: 260px !important; border-radius: 20px !important; gap: 0 !important; } /* Visual más pequeño */ .srv-card-visual { min-height: 260px !important; max-width: 240px !important; width: 240px !important; border-radius: 20px 0 0 20px !important; } /* Icono más compacto */ .srv-icon-3d > div:first-child { width: 130px !important; height: 130px !important; } .srv-icon-3d > div:first-child > div:nth-child(3) { width: 100px !important; height: 100px !important; } /* Ocultar las stats pills en visual (muy verboso) */ .srv-visual-stats { display: none !important; } /* Content area más compacto */ .srv-card-content { padding: 1.8rem 2rem !important; } .srv-card-name { font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important; margin-bottom: 0.4rem !important; } .srv-card-sub { font-size: 0.8rem !important; margin-bottom: 1rem !important; } .srv-card-tag { padding: 4px 12px !important; font-size: 0.6rem !important; } /* Feature list más compacta */ .srv-feat-list li { padding: 6px 0 !important; font-size: 0.82rem !important; } .srv-feat-list { margin-bottom: 1.2rem !important; } /* CTA btn compacto */ .srv-cta { padding: 10px 28px !important; font-size: 0.82rem !important; } /* Tabs más refinados */ .srv-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; } .srv-tab { padding: 9px 22px !important; font-size: 0.78rem !important; letter-spacing: 0.12em !important; border-radius: 30px !important; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .srv-tab.act { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 20px rgba(0, 163, 181, 0.3) !important; } .srv-tab:hover:not(.act) { transform: translateY(-1px); background: rgba(0, 163, 181, 0.08) !important; } /* Mini cards más dinámicas */ .srv-mini-card { padding: 0.9rem 1rem !important; border-radius: 14px !important; cursor: pointer; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .srv-mini-card:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 24px rgba(0, 163, 181, 0.18) !important; } .srv-mini-card.act { transform: translateY(-2px); border-color: var(--jade2) !important; } /* Section padding reducido */ .srv-section { padding: 4rem 2rem !important; } .srv-header { margin-bottom: 1.5rem !important; } /* Responsive servicios */ @media (max-width: 860px) { .srv-card-big { grid-template-columns: 1fr !important; } .srv-card-visual { max-width: 100% !important; width: 100% !important; min-height: 180px !important; border-radius: 20px 20px 0 0 !important; } .srv-card-content { padding: 1.4rem 1.6rem !important; } } /* Banner Mundial — animaciones globales */ @keyframes bannerPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(0, 163, 181, 0.1), 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 163, 181, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05); } 50% { box-shadow: 0 0 0 2px rgba(0, 163, 181, 0.2), 0 20px 70px rgba(0, 0, 0, 0.55), 0 0 120px rgba(0, 163, 181, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); } } /* Banner línea superior brillante */ .mundial-2026-banner::after { content: ""; position: absolute; top: 0; left: -100%; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--jade2), var(--gold2), var(--jade2), transparent ); animation: bannerShine 5s ease-in-out infinite; z-index: 10; pointer-events: none; } @keyframes bannerShine { 0%, 100% { left: -100%; } 60% { left: 100%; } } /* Título Mundial más brillante */ .mundial-title-main { text-shadow: 0 0 30px rgba(0, 163, 181, 0.4), 0 0 60px rgba(0, 163, 181, 0.2); } /* ════════════════════════════════════════════ HERO — Anillos orbitales mejorados y únicos ════════════════════════════════════════════ */ /* Punto del or1 más grande y brillante */ .or1::after { width: 16px !important; height: 16px !important; top: -8px !important; margin-left: -8px !important; background: var(--gold) !important; box-shadow: 0 0 20px var(--gold), 0 0 40px rgba(201, 168, 76, 0.6), 0 0 60px rgba(201, 168, 76, 0.2) !important; } /* Punto del or2 más visible */ .or2::after { width: 12px !important; height: 12px !important; background: var(--jade2) !important; box-shadow: 0 0 16px var(--jade2), 0 0 32px rgba(0, 163, 181, 0.5) !important; } /* Logo hero — más brillante */ .hlimg { animation: lb 4s ease-in-out infinite; } /* Hero eyebrow más compacto */ .heyebrow { font-size: 1.3rem; letter-spacing: 0.32em; gap: 18px; } .heyebrow::before, .heyebrow::after { width: 65px; } /* Hero botones más compactos */ .hbtns { gap: 1rem !important; } .hbtns a { padding: 15px 40px !important; font-size: 1.1rem !important; } /* ══════════════════════════════════════════════════ VELOCIDAD + CONTRATAR — COMPACT & INTERACTIVE ══════════════════════════════════════════════════ */ .vc-section { background: linear-gradient( 160deg, var(--pearl) 0%, var(--pearl2) 55%, rgba(240, 250, 252, 1) 100% ); padding: 5rem 2rem; position: relative; overflow: hidden; } /* Línea superior decorativa */ .vc-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, transparent 0%, var(--jade) 30%, var(--jade2) 50%, var(--gold2) 70%, transparent 100% ); } .vc-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } /* Header compacto */ .vc-header { text-align: center; margin-bottom: 3rem; } .vc-header .vc-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Rajdhani", sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--jade2); margin-bottom: 0.7rem; } .vc-header .vc-eyebrow::before, .vc-header .vc-eyebrow::after { content: ""; display: block; width: 30px; height: 1px; background: var(--jade2); } .vc-header h2 { font-family: "Cinzel", serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; color: var(--tdark); line-height: 1.15; } .vc-header h2 .ac { background: linear-gradient(135deg, var(--jade), var(--jade2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Grid principal: steps | gauge */ .vc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } /* ── PASOS ── */ .vc-steps { display: flex; flex-direction: column; gap: 1.2rem; } .vc-step { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; background: #fff; border: 1px solid rgba(0, 109, 119, 0.08); border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); cursor: default; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } .vc-step::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: linear-gradient(180deg, var(--jade), var(--jade2)); transition: height 0.35s ease; border-radius: 3px 0 0 3px; } .vc-step:hover { transform: translateX(6px); border-color: rgba(0, 163, 181, 0.2); box-shadow: 0 8px 32px rgba(0, 109, 119, 0.12), -4px 0 0 var(--jade2); } .vc-step:hover::before { height: 100%; } .vc-step-num { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--jade), var(--jade2)); display: flex; align-items: center; justify-content: center; font-family: "Cinzel", serif; font-size: 1rem; font-weight: 700; color: #fff; box-shadow: 0 6px 20px rgba(0, 163, 181, 0.3); transition: all 0.35s ease; } .vc-step:hover .vc-step-num { transform: scale(1.1) rotate(-5deg); box-shadow: 0 8px 28px rgba(0, 163, 181, 0.45); } .vc-step-body h4 { font-family: "Playfair Display", serif; font-size: 1rem; font-weight: 700; color: var(--tdark); margin-bottom: 0.2rem; transition: color 0.3s; } .vc-step:hover .vc-step-body h4 { color: var(--jade); } .vc-step-body p { font-family: "Montserrat", sans-serif; font-size: 0.78rem; color: var(--tmid); line-height: 1.5; margin: 0; } .vc-steps-cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 32px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; border-radius: 14px; text-decoration: none; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; box-shadow: 0 8px 28px rgba(0, 163, 181, 0.35); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); animation: ctaBtnGlow 2.8s ease-in-out infinite; margin-top: 0.4rem; } @keyframes ctaBtnGlow { 0%, 100% { box-shadow: 0 8px 28px rgba(0, 163, 181, 0.35), 0 0 0 0 rgba(0, 163, 181, 0.2); } 50% { box-shadow: 0 8px 36px rgba(0, 163, 181, 0.55), 0 0 0 8px rgba(0, 163, 181, 0); } } .vc-steps-cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 40px rgba(0, 163, 181, 0.5); } /* ── GAUGE COMPACT ── */ .vc-gauge-card { background: #fff; border-radius: 24px; border: 1px solid rgba(0, 163, 181, 0.15); box-shadow: 0 10px 50px rgba(0, 109, 119, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04); overflow: hidden; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; } .vc-gauge-card:hover { transform: translateY(-4px); box-shadow: 0 18px 60px rgba(0, 109, 119, 0.15), 0 0 0 2px rgba(0, 163, 181, 0.12); } .vc-gauge-top { padding: 1.5rem 1.5rem 0.5rem; display: flex; align-items: center; justify-content: space-between; } .vc-gauge-label { display: flex; align-items: center; gap: 7px; font-family: "Rajdhani", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--jade2); } .vc-gauge-label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jade2); box-shadow: 0 0 8px var(--jade2); animation: pulse 2s ease-in-out infinite; } .vc-speed-display { text-align: center; padding: 0 1.5rem 0.5rem; } .vc-speed-num { font-family: "Cinzel", serif; font-size: 3.4rem; font-weight: 700; background: linear-gradient(135deg, var(--tdark), var(--jade2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .vc-speed-unit { font-family: "Rajdhani", sans-serif; font-size: 0.8rem; letter-spacing: 0.25em; color: var(--tmid); text-transform: uppercase; } .vc-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; padding: 0 1.2rem 1.2rem; } .vc-metric { background: var(--pearl2); border-radius: 12px; padding: 0.8rem 0.5rem; text-align: center; border: 1px solid rgba(0, 163, 181, 0.06); transition: all 0.2s; } .vc-metric:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .vc-metric-lbl { font-family: "Rajdhani", sans-serif; font-size: 0.52rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 3px; } .vc-metric-val { font-family: "Cinzel", serif; font-size: 1rem; font-weight: 700; } .vc-test-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 1.2rem 1.2rem; padding: 14px 20px; background: linear-gradient(135deg, var(--jade), var(--jade2)); color: #fff; text-decoration: none; border-radius: 14px; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; box-shadow: 0 8px 28px rgba(0, 163, 181, 0.3); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .vc-test-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 40px rgba(0, 163, 181, 0.5); } .vc-test-sub { text-align: center; font-family: "Rajdhani", sans-serif; font-size: 0.58rem; letter-spacing: 0.15em; color: var(--tlight); padding-bottom: 1rem; } /* Responsive */ @media (max-width: 900px) { .vc-grid { grid-template-columns: 1fr; gap: 2rem; } .vc-gauge-card { max-width: 420px; margin: 0 auto; } } @media (max-width: 600px) { .vc-section { padding: 4rem 1.2rem; } .vc-step { padding: 1rem 1.1rem; gap: 1rem; } .vc-step-num { width: 40px; height: 40px; font-size: 0.85rem; } } /* Ad panel responsive - handled by override block at bottom of style */ /* ═══════════════════════════════════════════════════ 💡 TARJETA DE CONSEJOS — TEST DE VELOCIDAD Glassmorphism · Minimalista · Premium ═══════════════════════════════════════════════════ */ .vc-left-stack { display: flex; flex-direction: column; gap: 1.5rem; } .vc-tips-card { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(0, 163, 181, 0.18); border-radius: 18px; padding: 1.6rem 1.8rem; box-shadow: 0 8px 32px rgba(0, 109, 119, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9); position: relative; overflow: hidden; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .vc-tips-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--jade), var(--jade2), var(--gold2), var(--jade2) ); border-radius: 18px 18px 0 0; } .vc-tips-card::after { content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 120px; background: radial-gradient( circle, rgba(0, 163, 181, 0.06) 0%, transparent 70% ); pointer-events: none; } .vc-tips-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0, 109, 119, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1); border-color: rgba(0, 163, 181, 0.3); } .vc-tips-title { font-family: "Cinzel", serif; font-size: 1.05rem; font-weight: 700; color: var(--tdark); margin-bottom: 1.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(0, 163, 181, 0.12); position: relative; display: flex; align-items: center; gap: 10px; } .vc-tips-title::before { content: ""; width: 4px; height: 20px; background: linear-gradient(180deg, var(--jade2), var(--gold2)); border-radius: 2px; flex-shrink: 0; } .vc-tips-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; position: relative; z-index: 2; } .vc-tips-list li { display: flex; align-items: center; gap: 12px; font-family: "Montserrat", sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--tmid); line-height: 1.5; transition: all 0.25s ease; padding: 6px 8px; border-radius: 8px; } .vc-tips-list li:hover { background: rgba(0, 163, 181, 0.04); color: var(--tdark); transform: translateX(4px); } .vc-tip-icon { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--jade2); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: all 0.25s ease; } .vc-tips-list li:hover .vc-tip-icon { stroke: var(--gold); transform: scale(1.1); } /* Responsive */ @media (max-width: 900px) { .vc-left-stack { gap: 1.2rem; } .vc-tips-card { padding: 1.3rem 1.4rem; } .vc-tips-title { font-size: 0.95rem; } .vc-tips-list li { font-size: 0.78rem; } } @media (max-width: 600px) { .vc-tips-card { padding: 1.2rem 1.2rem; border-radius: 16px; } .vc-tips-title { font-size: 0.9rem; margin-bottom: 1rem; } .vc-tips-list li { font-size: 0.75rem; gap: 10px; padding: 5px 6px; } .vc-tip-icon { width: 20px; height: 20px; } } /* ═══════════════════════════════════════════════════════ NUEVA SECCIÓN SERVICIOS — CYBERPUNK DIGITAL GRID ═══════════════════════════════════════════════════════ */ .srv-subtitle { font-family: "Montserrat", sans-serif; font-size: 0.82rem; color: rgba(200, 216, 232, 0.55); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 0.5rem; } .svr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; max-width: 1280px; margin: 0 auto 2rem; } .svr-card { position: relative; background: linear-gradient( 145deg, rgba(4, 9, 15, 0.97) 0%, rgba(7, 14, 26, 0.98) 60%, rgba(10, 20, 34, 0.95) 100% ); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 1.8rem 1.4rem 1.4rem; overflow: hidden; cursor: pointer; transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; gap: 0.75rem; } .svr-card[data-color="jade"] { --c1: #006d77; --c2: #00a3b5; --cr: 0, 163, 181; } .svr-card[data-color="gold"] { --c1: #a0762e; --c2: #e8c76a; --cr: 201, 168, 76; } .svr-card[data-color="sky"] { --c1: #3d7fa3; --c2: #a8d8ea; --cr: 91, 164, 199; } .svr-card[data-color="purple"] { --c1: #6d28d9; --c2: #a78bfa; --cr: 139, 92, 246; } .svr-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 80% 60% at 50% 110%, rgba(var(--cr), 0.18) 0%, transparent 65% ); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .svr-card:hover::after, .svr-card.active::after { opacity: 1; } .svr-card:hover, .svr-card.active { border-color: var(--c2); box-shadow: 0 0 0 1px rgba(var(--cr), 0.2), 0 0 40px rgba(var(--cr), 0.25), 0 20px 50px rgba(0, 0, 0, 0.6); transform: translateY(-10px) scale(1.02); } @keyframes svrScan { 0% { top: -2px; opacity: 0.8; } 80% { top: 100%; opacity: 0.5; } 100% { top: 100%; opacity: 0; } } .svr-scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c2), transparent); top: -2px; z-index: 3; pointer-events: none; opacity: 0; } .svr-card:hover .svr-scan, .svr-card.active .svr-scan { animation: svrScan 1.8s ease-in-out infinite; } .svr-co { position: absolute; width: 14px; height: 14px; border-color: var(--c2); border-style: solid; opacity: 0.35; transition: opacity 0.3s, width 0.3s, height 0.3s; } .svr-co.tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; } .svr-co.tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; border-radius: 0 3px 0 0; } .svr-co.bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; border-radius: 0 0 0 3px; } .svr-co.br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; } .svr-card:hover .svr-co, .svr-card.active .svr-co { opacity: 1; width: 20px; height: 20px; } @keyframes svrSpark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx, 20px), var(--ty, -40px)) scale(0); opacity: 0; } } .svr-particles { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .svr-particles i { position: absolute; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--c2); box-shadow: 0 0 6px var(--c2); opacity: 0; left: 50%; top: 50%; } .svr-particles i:nth-child(1) { --tx: -30px; --ty: -45px; left: 20%; top: 30%; } .svr-particles i:nth-child(2) { --tx: 35px; --ty: -38px; left: 75%; top: 25%; } .svr-particles i:nth-child(3) { --tx: -20px; --ty: -55px; left: 40%; top: 60%; } .svr-particles i:nth-child(4) { --tx: 28px; --ty: -42px; left: 60%; top: 45%; } .svr-particles i:nth-child(5) { --tx: -35px; --ty: -30px; left: 30%; top: 70%; } .svr-particles i:nth-child(6) { --tx: 22px; --ty: -50px; left: 65%; top: 65%; } .svr-card:hover .svr-particles i, .svr-card.active .svr-particles i { animation: svrSpark 1.4s ease-out infinite; } .svr-card:hover .svr-particles i:nth-child(2) { animation-delay: 0.18s; } .svr-card:hover .svr-particles i:nth-child(3) { animation-delay: 0.36s; } .svr-card:hover .svr-particles i:nth-child(4) { animation-delay: 0.54s; } .svr-card:hover .svr-particles i:nth-child(5) { animation-delay: 0.72s; } .svr-card:hover .svr-particles i:nth-child(6) { animation-delay: 0.9s; } .svr-badge-id { font-family: "Rajdhani", sans-serif; font-size: 0.52rem; font-weight: 700; letter-spacing: 0.3em; color: rgba(var(--cr), 0.55); text-transform: uppercase; } .svr-icon-wrap { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient( 135deg, rgba(var(--cr), 0.12), rgba(var(--cr), 0.06) ); border: 1px solid rgba(var(--cr), 0.2); display: flex; align-items: center; justify-content: center; color: var(--c2); transition: all 0.35s ease; box-shadow: 0 0 20px rgba(var(--cr), 0.15); } .svr-icon-wrap svg { width: 26px; height: 26px; } .svr-card:hover .svr-icon-wrap, .svr-card.active .svr-icon-wrap { background: linear-gradient( 135deg, rgba(var(--cr), 0.25), rgba(var(--cr), 0.12) ); box-shadow: 0 0 30px rgba(var(--cr), 0.5), inset 0 0 20px rgba(var(--cr), 0.1); transform: scale(1.1) rotate(-4deg); border-color: var(--c2); } .svr-signal { display: flex; align-items: flex-end; gap: 3px; height: 14px; } .svr-signal span { width: 4px; background: rgba(var(--cr), 0.25); border-radius: 2px; transition: background 0.3s; } .svr-signal span:nth-child(1) { height: 30%; } .svr-signal span:nth-child(2) { height: 55%; } .svr-signal span:nth-child(3) { height: 75%; } .svr-signal span:nth-child(4) { height: 100%; } .svr-card:hover .svr-signal span, .svr-card.active .svr-signal span { background: var(--c2); box-shadow: 0 0 6px var(--c2); } @keyframes signalPulse { from { opacity: 0.5; } to { opacity: 1; box-shadow: 0 0 10px var(--c2); } } .svr-card:hover .svr-signal span:nth-child(1) { animation: signalPulse 0.8s 0s ease-in-out infinite alternate; } .svr-card:hover .svr-signal span:nth-child(2) { animation: signalPulse 0.8s 0.1s ease-in-out infinite alternate; } .svr-card:hover .svr-signal span:nth-child(3) { animation: signalPulse 0.8s 0.2s ease-in-out infinite alternate; } .svr-card:hover .svr-signal span:nth-child(4) { animation: signalPulse 0.8s 0.3s ease-in-out infinite alternate; } .svr-name { font-family: "Cinzel", serif; font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: 0.04em; line-height: 1.2; margin: 0; transition: color 0.3s; } .svr-card:hover .svr-name { color: var(--c2); text-shadow: 0 0 20px rgba(var(--cr), 0.5); } .svr-sub { font-family: "Montserrat", sans-serif; font-size: 0.73rem; color: rgba(200, 216, 232, 0.55); line-height: 1.4; margin: 0; } .svr-stats { display: flex; gap: 0.5rem; margin: 0.3rem 0; } .svr-stat { flex: 1; background: rgba(var(--cr), 0.05); border: 1px solid rgba(var(--cr), 0.12); border-radius: 10px; padding: 0.5rem 0.4rem; text-align: center; transition: all 0.3s; } .svr-stat em { font-style: normal; font-family: "Cinzel", serif; font-size: 1.15rem; font-weight: 700; color: var(--c2); display: block; line-height: 1; text-shadow: 0 0 10px rgba(var(--cr), 0.5); } .svr-stat b { font-family: "Rajdhani", sans-serif; font-size: 0.52rem; font-weight: 600; letter-spacing: 0.12em; color: rgba(var(--cr), 0.6); text-transform: uppercase; } .svr-card:hover .svr-stat { background: rgba(var(--cr), 0.1); border-color: rgba(var(--cr), 0.3); } .svr-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .svr-feats li { font-family: "Montserrat", sans-serif; font-size: 0.73rem; color: rgba(200, 216, 232, 0.65); line-height: 1.4; padding-left: 1.1rem; position: relative; } .svr-feats li::before { content: "◈"; position: absolute; left: 0; color: var(--c2); font-size: 0.5rem; top: 0.15rem; opacity: 0.7; } .svr-card:hover .svr-feats li { color: rgba(200, 216, 232, 0.85); } .svr-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 0.8rem; border-top: 1px solid rgba(var(--cr), 0.1); margin-top: auto; gap: 0.5rem; } .svr-price { font-family: "Montserrat", sans-serif; font-size: 0.7rem; color: rgba(200, 216, 232, 0.5); } .svr-price strong { font-family: "Cinzel", serif; font-size: 1rem; color: var(--c2); text-shadow: 0 0 10px rgba(var(--cr), 0.4); } .svr-price span { font-size: 0.62rem; } .svr-cta-mini { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; border-radius: 8px; text-decoration: none; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; white-space: nowrap; transition: all 0.25s; box-shadow: 0 4px 16px rgba(var(--cr), 0.35); } .svr-cta-mini:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--cr), 0.55); } .svr-ticker-wrap { max-width: 1280px; margin: 1rem auto 0; overflow: hidden; background: rgba(0, 163, 181, 0.04); border: 1px solid rgba(0, 163, 181, 0.12); border-radius: 8px; padding: 0.6rem 0; } @keyframes svrTick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .svr-ticker { display: inline-flex; gap: 0; animation: svrTick 30s linear infinite; white-space: nowrap; } .svr-ticker span { font-family: "Rajdhani", sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.25em; color: rgba(0, 163, 181, 0.6); padding: 0 2.5rem; text-transform: uppercase; } .svr-ticker span:nth-child(even) { color: rgba(201, 168, 76, 0.55); } @media (max-width: 1100px) { .svr-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .svr-card { padding: 1.4rem 1.2rem 1.2rem; } } /* ═══════════════════════════════════════════════════════ IPTV GRID — 2 columnas en tablet, 1 sola en móvil ═══════════════════════════════════════════════════════ */ @media (min-width: 601px) { .iptv-grid { grid-template-columns: 1fr 1.12fr !important; } .iptv-logo-col { order: unset !important; } .iptv-features-col { order: unset !important; } } @media (max-width: 860px) and (min-width: 601px) { #iptv { --iptv-ring-1: 256px !important; --iptv-ring-2: 220px !important; --iptv-ring-3: 182px !important; --iptv-glow: 196px !important; --iptv-card: 160px !important; --iptv-wrap: 272px !important; } .iptv-grid { gap: 1.2rem !important; } } @media (max-width: 600px) { .iptv-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════ ASISTENCIA EN LÍNEA — expandible en velocidad ═══════════════════════════════════════════════════════ */ .vc-assist-wrap { border-radius: 18px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } .vc-assist-trigger { display: flex; align-items: center; gap: 12px; padding: 1.1rem 1.3rem; background: linear-gradient( 135deg, rgba(201, 168, 76, 0.06), rgba(160, 118, 46, 0.04) ); border: 1px solid rgba(201, 168, 76, 0.2); border-radius: 18px; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 2; } .vc-assist-trigger:hover { background: linear-gradient( 135deg, rgba(201, 168, 76, 0.1), rgba(160, 118, 46, 0.07) ); border-color: rgba(201, 168, 76, 0.4); box-shadow: 0 4px 16px rgba(201, 168, 76, 0.15); } .vc-assist-trigger.open { border-radius: 18px 18px 0 0; border-bottom-color: transparent; background: linear-gradient(135deg, var(--jade), var(--jade2)); border-color: transparent; box-shadow: none; } .vc-assist-trigger.open svg, .vc-assist-trigger.open .vc-assist-arrow svg { stroke: #fff; } .vc-assist-trigger.open > div > div:first-child { color: rgba(255, 255, 255, 0.85) !important; } .vc-assist-trigger.open p { color: rgba(255, 255, 255, 0.75) !important; } .vc-assist-trigger.open p strong { color: #fff !important; } .vc-assist-arrow { flex-shrink: 0; transition: transform 0.35s ease; } .vc-assist-trigger.open .vc-assist-arrow { transform: rotate(180deg); } .vc-assist-panel { background: #fff; border: 1px solid rgba(0, 109, 119, 0.1); border-top: none; border-radius: 0 0 18px 18px; overflow: hidden; max-height: 0; transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .vc-assist-panel.open { max-height: 600px; } .vc-assist-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.2rem; background: linear-gradient( 135deg, rgba(0, 109, 119, 0.04), rgba(0, 163, 181, 0.02) ); border-bottom: 1px solid rgba(0, 163, 181, 0.08); flex-wrap: wrap; gap: 6px; } .vc-assist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: none; } .vc-sede-card { display: flex; align-items: flex-start; gap: 10px; padding: 0.9rem 1.1rem; border-bottom: 1px solid rgba(0, 109, 119, 0.06); border-right: 1px solid rgba(0, 109, 119, 0.06); transition: background 0.2s; } .vc-sede-card:nth-child(even) { border-right: none; } .vc-sede-card:nth-last-child(-n + 2) { border-bottom: none; } .vc-sede-card:hover { background: rgba(0, 163, 181, 0.03); } .vc-sede-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jade2); box-shadow: 0 0 8px var(--jade2); flex-shrink: 0; margin-top: 4px; animation: pulse 2.5s ease-in-out infinite; } .vc-sede-name { font-family: "Cinzel", serif; font-size: 0.72rem; font-weight: 700; color: var(--tdark); letter-spacing: 0.04em; margin-bottom: 4px; } .vc-sede-num { display: block; font-family: "Rajdhani", sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--jade); text-decoration: none; letter-spacing: 0.05em; transition: color 0.2s; line-height: 1.5; } .vc-sede-num:hover { color: var(--jade2); } .vc-sede-wa { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 4px 10px; background: linear-gradient( 135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.06) ); border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 20px; font-family: "Rajdhani", sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: #16a34a; text-decoration: none; transition: all 0.2s; } .vc-sede-wa:hover { background: linear-gradient( 135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.12) ); border-color: rgba(34, 197, 94, 0.5); color: #15803d; } .vc-sede-wa svg { fill: #16a34a; } @media (max-width: 480px) { .vc-assist-grid { grid-template-columns: 1fr; } .vc-sede-card:nth-child(even) { border-right: none; } .vc-sede-card:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(0, 109, 119, 0.06); } .vc-sede-card:last-child { border-bottom: none; } } /* ═══════════════════════════════════════════════════════ FOOTER — pantallas grandes (≥1440px) ═══════════════════════════════════════════════════════ */ @media (min-width: 1440px) { footer { padding: 6rem 4rem 3rem; } .finn { max-width: 1400px; gap: 4rem; } .fbr img { height: 48px; margin-bottom: 1.2rem; } .fbr p { font-size: 0.93rem; line-height: 1.85; } .ftag { font-size: 0.9rem; } .fc h5 { font-size: 0.95rem; letter-spacing: 0.22em; margin-bottom: 1.3rem; } .fc ul li { margin-bottom: 0.55rem; } .fc ul li a { font-size: 0.88rem; } .fbot { padding: 1.8rem 0; font-size: 0.85rem; } } @media (min-width: 1920px) { footer { padding: 7rem 6rem 3.5rem; } .finn { max-width: 1800px; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 5rem; } .fbr img { height: 58px; } .fbr p { font-size: 1rem; } .ftag { font-size: 1rem; } .fc h5 { font-size: 1.05rem; } .fc ul li a { font-size: 0.95rem; } .footer-social { gap: 1rem; margin-top: 1.5rem; } .fsoc-btn { width: 46px; height: 46px; } .fbot { font-size: 0.9rem; } } /* ═══════════════════════════════════════════════════════ PLANES — tarjetas brillantes y llamativas ═══════════════════════════════════════════════════════ */ /* Glow animado en plan featured */ @keyframes plcFtGlow { 0%, 100% { box-shadow: 0 0 50px rgba(201, 168, 76, 0.18), 0 20px 60px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 0 90px rgba(201, 168, 76, 0.42), 0 0 40px rgba(201, 168, 76, 0.22), 0 20px 60px rgba(0, 0, 0, 0.5); } } @keyframes plcJadeGlow { 0%, 100% { box-shadow: 0 4px 20px rgba(0, 163, 181, 0.18); } 50% { box-shadow: 0 0 40px rgba(0, 163, 181, 0.45), 0 8px 30px rgba(0, 163, 181, 0.28); } } @keyframes plcBtnShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Línea animada en la parte superior de la tarjeta */ .plc::before { content: ""; position: absolute; top: 0; left: -100%; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, rgba(0, 163, 181, 0.6), transparent ); transition: left 0.6s ease; z-index: 2; } .plc:hover::before { left: 100%; } .plc.ft::before { background: linear-gradient( 90deg, transparent, var(--gold2), rgba(232, 199, 106, 0.8), transparent ); animation: adHeadShine 3s ease-in-out infinite; left: 0; } /* ═══════════════════════════════════════════════════════ COMUNIDAD — corregir texto en fondo claro (light) ═══════════════════════════════════════════════════════ */ #comentarios .review-name-premium { color: var(--tdark) !important; text-shadow: none !important; } #comentarios .review-date-premium { color: var(--tmid) !important; } #comentarios .review-text-premium { color: var(--tdark) !important; opacity: 0.82; } #comentarios .review-star-premium { color: var(--goldd) !important; text-shadow: 0 0 6px rgba(160, 118, 46, 0.3) !important; } #comentarios .review-tag-premium { background: rgba(0, 109, 119, 0.07) !important; color: var(--jade) !important; border-color: rgba(0, 109, 119, 0.15) !important; } #comentarios .review-like-btn-premium { background: rgba(0, 109, 119, 0.05) !important; border-color: rgba(0, 109, 119, 0.12) !important; color: var(--tmid) !important; } #comentarios .review-like-btn-premium:hover, #comentarios .review-like-btn-premium.liked { background: rgba(0, 163, 181, 0.1) !important; border-color: rgba(0, 163, 181, 0.28) !important; color: var(--jade) !important; } #comentarios .review-card-footer-premium { border-top-color: rgba(0, 109, 119, 0.1) !important; } #comentarios .reviews-empty span { color: var(--tmid) !important; } /* ═══════════════════════════════════════════════════════════════ SERVICIOS — fondo mejorado con paleta CvM + manchas de color ═══════════════════════════════════════════════════════════════ */ /* Fondo richísimo igual que IPTV */ .srv-section { background: radial-gradient( ellipse 70% 55% at 5% 15%, rgba(0, 163, 181, 0.2) 0%, transparent 55% ), radial-gradient( ellipse 55% 45% at 95% 85%, rgba(201, 168, 76, 0.16) 0%, transparent 55% ), radial-gradient( ellipse 50% 50% at 80% 10%, rgba(0, 109, 119, 0.14) 0%, transparent 50% ), radial-gradient( ellipse 45% 60% at 20% 90%, rgba(91, 164, 199, 0.12) 0%, transparent 50% ), radial-gradient( ellipse 35% 35% at 50% 50%, rgba(0, 163, 181, 0.08) 0%, transparent 60% ), linear-gradient(170deg, #04090f 0%, #060d1a 35%, #0b1525 65%, #070e1a 100%) !important; } /* Orbes más grandes y coloridos */ .srv-orb-1 { width: 700px !important; height: 700px !important; background: radial-gradient( circle, rgba(0, 163, 181, 0.14) 0%, rgba(0, 109, 119, 0.06) 50%, transparent 70% ) !important; top: -180px !important; left: -180px !important; filter: blur(80px) !important; } .srv-orb-2 { width: 550px !important; height: 550px !important; background: radial-gradient( circle, rgba(201, 168, 76, 0.12) 0%, rgba(160, 118, 46, 0.05) 50%, transparent 70% ) !important; bottom: -120px !important; right: -120px !important; filter: blur(70px) !important; } /* Tercer orbe extra (jade medio) */ .srv-section::before { content: ""; position: absolute; width: 500px; height: 500px; top: 40%; right: 25%; border-radius: 50%; background: radial-gradient( circle, rgba(91, 164, 199, 0.08) 0%, transparent 65% ); filter: blur(60px); pointer-events: none; animation: orbFloat 18s ease-in-out infinite 6s; } /* Header eyebrow más vistoso */ .srv-overline { font-family: "Rajdhani", sans-serif !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.5em !important; text-transform: uppercase !important; color: var(--jade2) !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 1rem !important; } .srv-overline::before, .srv-overline::after { content: "" !important; display: block !important; width: 40px !important; height: 1px !important; background: linear-gradient(90deg, transparent, var(--jade2)) !important; } .srv-overline::after { background: linear-gradient(90deg, var(--jade2), transparent) !important; } /* Título con gradiente brillante */ .srv-title { font-family: "Cinzel", serif !important; font-size: clamp(2rem, 4.5vw, 3.4rem) !important; font-weight: 700 !important; color: #fff !important; letter-spacing: 0.06em !important; line-height: 1.1 !important; text-shadow: 0 0 40px rgba(0, 163, 181, 0.25) !important; } .srv-title .hl { background: linear-gradient( 135deg, var(--jade2) 0%, var(--sky) 50%, var(--gold2) 100% ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; background-size: 200% 200% !important; animation: plcBtnShine 4s ease-in-out infinite !important; } /* Subtítulo */ .srv-subtitle { font-family: "Montserrat", sans-serif !important; font-size: 0.85rem !important; color: rgba(200, 216, 232, 0.5) !important; letter-spacing: 0.18em !important; margin-top: 0.6rem !important; } /* Tarjetas con bordes de colores más distintos e intensos */ .svr-card { background: linear-gradient( 145deg, rgba(3, 7, 14, 0.98) 0%, rgba(5, 11, 22, 0.99) 60%, rgba(8, 16, 30, 0.97) 100% ) !important; } /* Línea inferior de acento en las tarjetas */ .svr-card::before { content: "" !important; position: absolute !important; bottom: 0 !important; left: 10% !important; right: 10% !important; height: 1px !important; background: linear-gradient( 90deg, transparent, var(--c2), transparent ) !important; opacity: 0.3 !important; transition: opacity 0.3s !important; } .svr-card:hover::before { opacity: 0.8 !important; } /* ═══════════════════════════════════════════════════════════════ AD-PANEL — RESPONSIVE COMPLETO (modal desktop · full mobile) ═══════════════════════════════════════════════════════════════ */ /* Nombre empresa más grande */ .ad-head-brand { font-size: 0.9rem !important; letter-spacing: 0.22em !important; font-weight: 700 !important; text-shadow: 0 0 24px rgba(0, 163, 181, 0.7) !important; } .ad-logo-row img { height: 62px !important; } /* Ad-body: paleta oscura uniforme con el resto del panel */ .ad-body { background: radial-gradient( ellipse 80% 50% at 50% 100%, rgba(0, 109, 119, 0.14) 0%, transparent 60% ), linear-gradient(180deg, rgba(3, 12, 26, 0) 0%, rgba(3, 10, 20, 1) 100%) !important; border-top: 1px solid rgba(0, 163, 181, 0.18) !important; } /* Botón ghost: más visible y con la paleta jade */ .ad-btn-ghost { background: linear-gradient(135deg, var(--jade), var(--jade2)) !important; color: #fff !important; border: none !important; font-size: 0.9rem !important; letter-spacing: 0.18em !important; padding: 14px 24px !important; border-radius: 12px !important; box-shadow: 0 6px 28px rgba(0, 163, 181, 0.45) !important; transition: transform 0.25s, box-shadow 0.25s !important; } .ad-btn-ghost:hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 12px 40px rgba(0, 163, 181, 0.7) !important; background: linear-gradient(135deg, var(--jade2), #00c8de) !important; color: #fff !important; } /* TABLET/DESKTOP (≥601px): modal centrado */ @media (min-width: 601px) { #ad-panel { width: min(500px, 96vw) !important; height: auto !important; max-height: 94vh !important; top: 50% !important; left: 50% !important; border-radius: 24px !important; border: 1px solid rgba(0, 163, 181, 0.35) !important; box-shadow: 0 0 80px rgba(0, 163, 181, 0.3), 0 30px 80px rgba(0, 0, 0, 0.9) !important; transform: translate(-50%, -50%) scale(0.88) !important; opacity: 0 !important; pointer-events: none !important; transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease !important; } #ad-panel.open { transform: translate(-50%, -50%) scale(1) !important; opacity: 1 !important; pointer-events: all !important; } .ad-img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; display: block !important; } .ad-img-wrap { overflow: hidden !important; } } /* MÓVIL (≤600px): imagen PNG completa, sin recortes */ @media (max-width: 600px) { #ad-panel { width: 100vw !important; height: 100svh !important; top: 0 !important; left: 0 !important; border-radius: 0 !important; border: none !important; transform: translateX(-110%) !important; opacity: 1 !important; pointer-events: none !important; transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; display: flex !important; flex-direction: column !important; } #ad-panel.open { transform: translateX(0) !important; pointer-events: all !important; } /* Header compacto para dejar espacio a la imagen */ .ad-panel-head { padding: 0.6rem 1rem 0.7rem !important; flex-shrink: 0 !important; } .ad-logo-row { margin-bottom: 0.4rem !important; } .ad-logo-row img { height: 40px !important; } .ad-eyebrow { margin-bottom: 0.25rem !important; font-size: 0.72rem !important; } .ad-head-title { font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important; margin-bottom: 0.15rem !important; } .ad-head-sub { font-size: 0.68rem !important; line-height: 1.35 !important; } /* IMAGEN: bloque simple, sin overflow que tape el header */ .ad-img-wrap { width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: hidden !important; background: #010509 !important; display: block !important; flex-shrink: 0 !important; } .ad-img { width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; object-fit: contain !important; display: block !important; } .ad-img-overlay { display: none !important; } /* Cuerpo compacto */ .ad-body { padding: 0.7rem 1rem 1rem !important; flex-shrink: 0 !important; gap: 0.7rem !important; } .ad-btn-ghost { padding: 11px 16px !important; font-size: 0.8rem !important; } .ad-no-show { font-size: 0.68rem !important; } } /* ═══════════════════════════════════════════════ CANALES CABLE TV — imágenes uniformes, sin deformación ═══════════════════════════════════════════════ */ .mundial-ch-card { flex: 0 0 auto !important; width: auto !important; min-width: 80px !important; max-width: 130px !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 0.7rem 0.8rem !important; gap: 0.35rem !important; } .mundial-ch-card img { width: 52px !important; height: 40px !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; } /* Primera tarjeta (Liga 1 MAX fila completa): excepción */ .mundial-ch-card[style*="flex:1 1 100%"], .mundial-ch-card[style*="flex: 1 1 100%"] { flex-direction: row !important; max-width: none !important; align-items: center !important; } .mundial-ch-name { font-size: 0.7rem !important; text-align: center !important; white-space: nowrap !important; } /* ═══════════════════════════════════════════════ PLANES — números de velocidad sin fondo negro + más grandes ═══════════════════════════════════════════════ */ .plsn { font-size: 4.6rem !important; font-weight: 900 !important; line-height: 1 !important; display: block !important; background: linear-gradient( 145deg, #e8f4f8 0%, var(--jade2) 55%, var(--jade) 100% ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; animation: none !important; text-shadow: none !important; } /* Número plan ft (el más popular): jade+gold */ .plc.ft .plsn { background: linear-gradient( 145deg, #e8f4f8 0%, var(--jade2) 40%, var(--gold2) 100% ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; } /* Subtítulo "Mbps FIBRA" */ .plsu { font-size: 0.78rem !important; letter-spacing: 0.22em !important; color: rgba(168, 208, 218, 0.75) !important; margin-top: 0.15rem !important; } /* Nombre del plan */ .plnm { font-size: 1.4rem !important; letter-spacing: 0.18em !important; color: transparent !important; background: linear-gradient( 135deg, var(--gold2) 0%, var(--gold) 50%, var(--goldd) 100% ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; text-shadow: none !important; } /* Precio */ .plpr { font-size: 2.1rem !important; background: linear-gradient(135deg, var(--gold2), var(--gold)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; text-shadow: none !important; } .plc.ft .plpr { background: linear-gradient( 135deg, var(--gold2), #fff 60%, var(--gold2) ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; } /* ═══════════════════════════════════════════════ SERVICIOS — más cálido, menos robótico, coherente ═══════════════════════════════════════════════ */ /* Tarjetas con estilo cálido/editorial */ .svr-card { border-radius: 20px !important; border: 1px solid rgba(var(--cr), 0.1) !important; background: linear-gradient( 160deg, rgba(5, 10, 20, 0.96) 0%, rgba(8, 15, 28, 0.97) 100% ) !important; padding: 2rem 1.6rem 1.6rem !important; gap: 0.9rem !important; } /* Icono más suave */ .svr-icon-wrap { border-radius: 16px !important; width: 52px !important; height: 52px !important; } /* Nombre con font más amigable */ .svr-name { font-family: "Playfair Display", serif !important; font-size: 1.1rem !important; letter-spacing: 0.02em !important; } /* Subtítulo más visible */ .svr-sub { font-size: 0.76rem !important; color: rgba(168, 208, 218, 0.65) !important; line-height: 1.5 !important; } /* Badge ID menos prominente */ .svr-badge-id { font-size: 0.48rem !important; letter-spacing: 0.25em !important; color: rgba(var(--cr), 0.35) !important; } /* Features más legibles */ .svr-feats li { font-size: 0.76rem !important; color: rgba(168, 208, 218, 0.7) !important; line-height: 1.5 !important; padding-left: 1rem !important; } /* Stats más compactos */ .svr-stat em { font-size: 1.1rem !important; } .svr-stat b { font-size: 0.5rem !important; } /* CTA más redondeado y cálido */ .svr-cta-mini { border-radius: 20px !important; padding: 8px 18px !important; font-size: 0.75rem !important; letter-spacing: 0.1em !important; } /* Precio legible */ .svr-price { font-size: 0.72rem !important; } .svr-price strong { font-size: 1.05rem !important; } /* Signal bar sutil */ .svr-signal { opacity: 0.9; } /* Ticker texto más visible */ .svr-ticker span { color: rgba(0, 163, 181, 0.7) !important; font-size: 0.65rem !important; } .svr-ticker span:nth-child(even) { color: rgba(201, 168, 76, 0.65) !important; } /* ═══════════════════════════════════════════════ VELOCIDAD — tarjeta factores (profesional) ═══════════════════════════════════════════════ */ .vc-factors-card { background: #fff; border: 1px solid rgba(0, 109, 119, 0.1); border-radius: 20px; padding: 1.4rem 1.5rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } .vc-factors-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--jade), var(--jade2), var(--gold2)); } .vc-factors-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1.1rem; } .vc-factors-icon { width: 36px; height: 36px; flex-shrink: 0; background: linear-gradient(135deg, var(--jade), var(--jade2)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 14px rgba(0, 163, 181, 0.3); } .vc-factors-title { font-family: "Playfair Display", serif; font-size: 1rem; font-weight: 700; color: var(--tdark); margin: 0 0 2px; line-height: 1.2; } .vc-factors-sub { font-family: "Montserrat", sans-serif; font-size: 0.72rem; color: var(--tlight); margin: 0; line-height: 1.4; } .vc-factors-list { display: flex; flex-direction: column; gap: 0.5rem; } .vc-factor-item { display: flex; align-items: flex-start; gap: 10px; padding: 0.65rem 0.8rem; background: rgba(0, 163, 181, 0.025); border: 1px solid rgba(0, 163, 181, 0.06); border-radius: 12px; transition: all 0.25s; } .vc-factor-item:hover { background: rgba(0, 163, 181, 0.05); border-color: rgba(0, 163, 181, 0.15); transform: translateX(4px); } .vc-factor-icon-wrap { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; border: 1px solid; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .vc-factor-body { flex: 1; min-width: 0; } .vc-factor-name { font-family: "Rajdhani", sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--tdark); letter-spacing: 0.04em; line-height: 1.2; margin-bottom: 2px; } .vc-factor-desc { font-family: "Montserrat", sans-serif; font-size: 0.7rem; color: var(--tmid); line-height: 1.45; } .vc-factor-badge { flex-shrink: 0; align-self: flex-start; font-family: "Rajdhani", sans-serif; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; border: 1px solid; white-space: nowrap; } .vc-factors-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 0.9rem; padding: 0.6rem 0.8rem; background: rgba(0, 163, 181, 0.04); border: 1px solid rgba(0, 163, 181, 0.1); border-radius: 10px; font-family: "Montserrat", sans-serif; font-size: 0.7rem; color: var(--tmid); line-height: 1.5; } .vc-factors-note svg { flex-shrink: 0; margin-top: 2px; } .vc-factors-note strong { color: var(--jade); } @media (max-width: 600px) { .vc-factors-card { padding: 1.2rem 1.1rem; } .vc-factor-name { font-size: 0.75rem; } .vc-factor-desc { font-size: 0.67rem; } .vc-factor-badge { display: none; } } /* ═══════════════════════════════════════════════════════ NAV — botón CONTRATAR más grande y llamativo ═══════════════════════════════════════════════════════ */ /* ── NAV — botón CONTRATAR: shimmer con ::before para evitar conflicto con underline ::after ── */ @keyframes nctaPulse { 0%, 100% { box-shadow: 0 0 22px rgba(0, 163, 181, 0.5), 0 0 44px rgba(201, 168, 76, 0.18); } 50% { box-shadow: 0 0 40px rgba(0, 163, 181, 0.75), 0 0 70px rgba(201, 168, 76, 0.32); } } @keyframes nctaShimmer { 0%, 38% { left: -80%; opacity: 0; } 52% { opacity: 1; } 100% { left: 130%; opacity: 0; } } .ncta { padding: 10px 25px !important; font-size: 0.95rem !important; letter-spacing: 0.22em !important; border-radius: 50px !important; background: linear-gradient( 135deg, #005f6b 0%, #00a3b5 45%, #c9a84c 100% ) !important; background-size: 200% 200% !important; color: #fff !important; animation: nctaPulse 2.8s ease-in-out infinite, plcBtnShine 5s ease-in-out infinite !important; border: 1.5px solid rgba(201, 168, 76, 0.55) !important; position: relative !important; overflow: hidden !important; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; font-weight: 750 !important; } /* Shimmer via ::before para no conflictuar con el ::after de underline */ .ncta::before { content: "" !important; position: absolute !important; top: -50% !important; left: -80% !important; width: 50% !important; height: 200% !important; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.32), transparent ) !important; transform: skewX(-16deg) !important; animation: nctaShimmer 3.2s ease-in-out infinite !important; pointer-events: none !important; z-index: 1 !important; } /* Reset ::after para ncta — sin underline en el botón */ .ncta::after { display: none !important; } .ncta:hover { transform: translateY(-4px) scale(1.07) !important; box-shadow: 0 10px 45px rgba(0, 163, 181, 0.8), 0 0 0 3px rgba(0, 163, 181, 0.18), 0 0 70px rgba(201, 168, 76, 0.35) !important; border-color: var(--gold2) !important; } /* Color del botón en nav con fondo claro */ nav.lm .ncta { background: linear-gradient( 135deg, #006d77 0%, #00a3b5 45%, #c9a84c 100% ) !important; color: #fff !important; } /* Responsive */ @media (max-width: 900px) { .ncta { padding: 10px 20px !important; font-size: 0.83rem !important; } } @media (max-width: 600px) { .ncta { padding: 9px 14px !important; font-size: 0.75rem !important; letter-spacing: 0.14em !important; } } /* ═══════════════════════════════════════════════════════ SERVICIOS — quitar scan line, más cálido, más partículas ═══════════════════════════════════════════════════════ */ /* Quitar scan line */ .svr-scan { display: none !important; } /* Quitar before de las tarjetas (la línea que baja) */ .svr-card::before { display: none !important; } /* Solo glow cuando se hace hover, sin líneas */ .svr-card:hover, .svr-card.active { border-color: rgba(var(--cr), 0.45) !important; box-shadow: 0 0 0 1px rgba(var(--cr), 0.2), 0 0 50px rgba(var(--cr), 0.22), 0 20px 50px rgba(0, 0, 0, 0.55) !important; transform: translateY(-8px) scale(1.015) !important; } /* Partículas — cada sección controla su propia opacidad por inline style */ #cabletv .sectionParticles { opacity: 0.18 !important; mix-blend-mode: multiply !important; } #contacto .sectionParticles { opacity: 0.75 !important; } footer .sectionParticles { opacity: 1 !important; } /* Icono más cálido y grande */ .svr-icon-wrap { width: 58px !important; height: 58px !important; border-radius: 18px !important; box-shadow: 0 4px 20px rgba(var(--cr), 0.2) !important; } .svr-icon-wrap svg { width: 28px !important; height: 28px !important; } /* Nombre más cálido */ .svr-name { font-family: "Cinzel", serif !important; font-size: 1.05rem !important; letter-spacing: 0.05em !important; line-height: 1.25 !important; } /* Separador sutil entre precio y CTA */ .svr-foot { border-top: 1px solid rgba(var(--cr), 0.12) !important; padding-top: 0.9rem !important; } /* Stats aún más compactos y cálidos */ .svr-stat { border-radius: 12px !important; } /* Título servicios más cálido */ .srv-title { letter-spacing: 0.04em !important; } /* ═══════════════════════════════════════════════════════ FOOTER — más compacto, fbot elegante ═══════════════════════════════════════════════════════ */ footer { position: relative; overflow: hidden; padding: 3rem 2rem 0 !important; } .finn { gap: 2.5rem !important; margin: 0 auto 1.8rem !important; } .fbr p { font-size: 0.82rem !important; line-height: 1.65 !important; margin-bottom: 0.4rem !important; } .fbr img { height: 34px !important; margin-bottom: 0.7rem !important; } .ftag { font-size: 0.78rem !important; margin-top: 0.4rem !important; } .fc h5 { margin-bottom: 0.8rem !important; } .fc ul li { margin-bottom: 0.35rem !important; } /* fbot elegante: centrado, icónico */ /* ── Footer fbot: UNA SOLA FILA elegante ── */ .fbot { border-top: 1px solid rgba(0, 163, 181, 0.08) !important; padding: 0.85rem 2rem !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0 !important; flex-wrap: wrap !important; text-align: center !important; max-width: none !important; background: linear-gradient( 180deg, transparent, rgba(0, 163, 181, 0.025) ) !important; position: relative !important; } /* Separador decorativo centrado en la línea */ .fbot::before { content: none !important; } .fbot p { font-family: "Montserrat", sans-serif !important; font-size: 0.68rem !important; color: rgba(130, 160, 185, 0.45) !important; letter-spacing: 0.08em !important; white-space: nowrap !important; margin: 0 !important; } /* Separadores entre items */ .fbot p + p::before { content: " · " !important; color: rgba(0, 163, 181, 0.25) !important; padding: 0 0.5rem !important; font-size: 0.65rem !important; } .fbot .hl { color: rgba(0, 163, 181, 0.65) !important; font-weight: 600 !important; } @media (max-width: 768px) { footer { padding: 2.5rem 1.5rem 0 !important; } } @media (max-width: 480px) { .finn { grid-template-columns: 1fr !important; gap: 1.5rem !important; } } /* ═══════════════════════════════════════════════════════════ SERVICIOS v3 — Cards doradas, minimalistas, elegantes ═══════════════════════════════════════════════════════════ */ /* Grid nuevo: el svr-grid ahora contiene svc-cards */ #servicios .svr-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1.4rem !important; max-width: 1280px !important; margin: 0 auto 2rem !important; } /* ══ TARJETA SERVICIOS — Blanco perla sobre fondo oscuro ══ */ .svc-card { --ac: 0, 163, 181; /* color de acento: jade por defecto */ position: relative; background: linear-gradient( 155deg, rgba(255, 255, 255, 0.1) 0%, rgba(248, 252, 255, 0.07) 55%, rgba(240, 250, 255, 0.05) 100% ); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 22px; padding: 2rem 1.7rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; overflow: hidden; cursor: default; backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 24px rgba(0, 0, 0, 0.25); transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Línea de acento superior — color varía por data-svc */ .svc-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; border-radius: 22px 22px 0 0; background: linear-gradient( 90deg, transparent 5%, rgba(var(--ac), 0.7) 35%, rgba(var(--ac), 0.9) 50%, rgba(var(--ac), 0.7) 65%, transparent 95% ); pointer-events: none; } /* Brillo interior blanco perla */ .svc-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 45%; border-radius: inherit; background: radial-gradient( ellipse 90% 65% at 40% 0%, rgba(255, 255, 255, 0.09) 0%, transparent 70% ); pointer-events: none; } /* Glow de hover */ .svc-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( ellipse 80% 55% at 50% 110%, rgba(var(--ac), 0.12) 0%, transparent 65% ); opacity: 0; transition: opacity 0.4s; } .svc-card:hover .svc-glow { opacity: 1; } .svc-card:hover { border-color: rgba(var(--ac), 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(var(--ac), 0.12), 0 16px 45px rgba(0, 0, 0, 0.4), 0 0 30px rgba(var(--ac), 0.08); transform: translateY(-7px); } /* Acento por tipo de servicio */ .svc-card[data-svc="internet"] { --ac: 0, 163, 181; } .svc-card[data-svc="cable"] { --ac: 201, 168, 76; } .svc-card[data-svc="iptv"] { --ac: 168, 85, 247; } .svc-card[data-svc="soporte"] { --ac: 16, 185, 129; } /* Top: icono + tag */ .svc-top { display: flex; align-items: center; gap: 14px; } .svc-ico { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: rgba(var(--ac), 0.14); border: 1px solid rgba(var(--ac), 0.3); display: flex; align-items: center; justify-content: center; color: rgba(var(--ac), 1); transition: all 0.35s; box-shadow: 0 0 14px rgba(var(--ac), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); filter: brightness(1.2); } .svc-ico svg { width: 23px; height: 23px; } .svc-card:hover .svc-ico { background: rgba(var(--ac), 0.22); border-color: rgba(var(--ac), 0.55); box-shadow: 0 0 24px rgba(var(--ac), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12); transform: scale(1.07) rotate(-3deg); } .svc-tag { font-family: "Rajdhani", sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(var(--ac), 0.7); } /* Nombre */ .svc-name { font-family: "Cinzel", serif; font-size: 1.22rem; font-weight: 700; color: #f0f6fc; letter-spacing: 0.03em; line-height: 1.2; margin: 0; transition: color 0.3s; } .svc-card:hover .svc-name { color: #fff; } /* Descripción — solo una línea, elegante */ .svc-desc { font-family: "Cormorant Garamond", serif; font-size: 1rem; font-style: italic; color: rgba(215, 232, 245, 0.72); line-height: 1.65; margin: 0; flex: 1; } /* Footer */ .svc-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px solid rgba(var(--ac), 0.15); margin-top: 0; } .svc-price { font-family: "Rajdhani", sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; color: rgba(var(--ac), 0.8); } .svc-price strong { font-family: "Cinzel", serif; font-size: 1.05rem; color: rgba(var(--ac), 1); filter: brightness(1.15); } .svc-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 18px; background: rgba(var(--ac), 0.12); border: 1px solid rgba(var(--ac), 0.32); border-radius: 20px; color: rgba(var(--ac), 1); font-family: "Rajdhani", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-decoration: none; white-space: nowrap; transition: all 0.25s; filter: brightness(1.1); } .svc-btn:hover, .svc-card:hover .svc-btn { background: rgba(var(--ac), 0.25); border-color: rgba(var(--ac), 0.6); color: #fff; box-shadow: 0 4px 18px rgba(var(--ac), 0.35); transform: translateY(-1px); } /* Responsive */ @media (max-width: 1100px) { #servicios .svr-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { #servicios .svr-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .svc-card { padding: 1.5rem 1.3rem 1.3rem; } .svc-footer { flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; } .svc-top { gap: 10px; } .svc-ico { width: 44px; height: 44px; border-radius: 13px; } .svc-ico svg { width: 20px; height: 20px; } .svc-name { font-size: 1.1rem !important; } .svc-desc { font-size: 0.93rem; } } /* ── Footer: partículas intensas ── */ /* ═══════════════════════════════════════════════════════════ SERVICIOS — mini tabla de planes dentro de la tarjeta ═══════════════════════════════════════════════════════════ */ .svc-plans-mini { display: flex; flex-direction: column; gap: 0.3rem; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 0.6rem 0.8rem; margin: 0.2rem 0; } .svc-plan-row { display: flex; align-items: center; gap: 0.5rem; padding: 3px 4px; border-radius: 6px; transition: background 0.2s; } .svc-plan-row:hover { background: rgba(255, 255, 255, 0.04); } .svc-plan-row.svc-plan-popular { background: rgba(201, 168, 76, 0.07); border: 1px solid rgba(201, 168, 76, 0.15); border-radius: 8px; padding: 4px 8px; } .svc-plan-badge { font-size: 0.6rem; color: var(--gold2); flex-shrink: 0; text-shadow: 0 0 6px rgba(201, 168, 76, 0.6); } .svc-plan-name { font-family: "Rajdhani", sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #eef9ff; flex: 1; } .svc-plan-row.svc-plan-popular .svc-plan-name { color: #fff; } .svc-plan-speed { font-family: "Cinzel", serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(173, 224, 255, 0.95); } .svc-plan-price { font-family: "Cinzel", serif; font-size: 0.82rem; font-weight: 900; margin-left: auto; color: transparent; background: linear-gradient(135deg, var(--jade2), var(--sky)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 10px rgba(0, 163, 181, 0.3); } /* svc-card hover: border jade para internet/duo, gold para cable */ .svc-card[data-svc="internet"]:hover { border-color: rgba(0, 163, 181, 0.5) !important; box-shadow: 0 0 0 1px rgba(0, 163, 181, 0.2), 0 0 50px rgba(0, 163, 181, 0.22), 0 20px 50px rgba(0, 0, 0, 0.6) !important; } .svc-card[data-svc="cable"]:hover { border-color: rgba(201, 168, 76, 0.5) !important; box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.2), 0 0 50px rgba(201, 168, 76, 0.22), 0 20px 50px rgba(0, 0, 0, 0.6) !important; } .svc-card[data-svc="duo"]:hover { border-color: rgba(91, 164, 199, 0.5) !important; box-shadow: 0 0 0 1px rgba(91, 164, 199, 0.2), 0 0 50px rgba(91, 164, 199, 0.22), 0 20px 50px rgba(0, 0, 0, 0.6) !important; } .svc-card[data-svc="soporte"]:hover { border-color: rgba(139, 92, 246, 0.5) !important; box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.2), 0 0 50px rgba(139, 92, 246, 0.22), 0 20px 50px rgba(0, 0, 0, 0.6) !important; } /* Hover icon colors */ .svc-card[data-svc="internet"]:hover .svc-ico { background: linear-gradient( 135deg, rgba(0, 163, 181, 0.28), rgba(0, 109, 119, 0.18) ) !important; box-shadow: 0 0 26px rgba(0, 163, 181, 0.5) !important; border-color: rgba(0, 163, 181, 0.55) !important; } .svc-card[data-svc="duo"]:hover .svc-ico { background: linear-gradient( 135deg, rgba(91, 164, 199, 0.28), rgba(61, 127, 163, 0.18) ) !important; box-shadow: 0 0 26px rgba(91, 164, 199, 0.5) !important; } .svc-card[data-svc="soporte"]:hover .svc-ico { background: linear-gradient( 135deg, rgba(139, 92, 246, 0.28), rgba(109, 40, 217, 0.18) ) !important; box-shadow: 0 0 26px rgba(139, 92, 246, 0.5) !important; } /* Partículas en sección servicios más densas */ #servicios .sectionParticles { opacity: 0.9 !important; mix-blend-mode: normal; } /* ══════════════════════════════════════════════════════════════════ OPTIMIZACIÓN CvM — 2026-07-13 (imágenes→WebP, planes sin barra lateral, anuncio pantalla completa) ══════════════════════════════════════════════════════════════════ */ /* 1) PLANES: en PANTALLA GRANDE (≥992px) se ven los 3 en una fila, sin barra lateral molesta. En CELULAR/TABLET (<992px) NO tocamos nada → queda el carrusel original para mover con el dedo (swipe + puntitos). */ @media (min-width: 992px) { .plsl { flex-wrap: wrap !important; justify-content: center !important; overflow-x: visible !important; overflow-y: visible !important; scroll-snap-type: none !important; transform: none !important; will-change: auto !important; } .dotsrow { display: none !important; } /* puntitos solo se ocultan en desktop */ } /* 2) Seguro: nada debe desbordar a lo ancho (sin tocar html, para no romper sticky) */ img, video, canvas, iframe { max-width: 100%; } /* ══════════════════════════════════════════════════════════════════ 4) FIX PARPADEO / TEMBLOR EN NAVEGADORES (2026-07-13) Animar `backdrop-filter` recompone la pantalla en cada scroll y en muchas GPUs (Chrome/NVIDIA) produce el parpadeo. Lo quitamos de las transiciones (el desenfoque queda estático, no se anima). La barra ya es 96% opaca al bajar, así que el look no cambia. ══════════════════════════════════════════════════════════════════ */ nav, nav.scrolled, nav.lm { transition: background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease !important; } /* En equipos que el sitio marca como gama media/baja, apagamos los desenfoques translúcidos (principal fuente de flicker) — fondo sólido. */ html.perf-mid-low [style*="backdrop"], html.perf-mid-low nav.scrolled, html.perf-low nav.scrolled { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ══════════════════════════════════════════════════════════════════ 6) ANUNCIO COMPACTO (2026-07-13) - Quita la "barra oscura vacía" arriba (el botón cerrar ya no ocupa fila propia; la cabecera pierde el padding-top gigante). - "No volver a mostrar" y el botón quedan pegados abajo. - Todo junto → más espacio para la imagen. ══════════════════════════════════════════════════════════════════ */ /* Botón cerrar FLOTA en la esquina (no empuja el contenido hacia abajo) */ #ad-panel .ad-close { position: absolute !important; top: 10px !important; right: 10px !important; margin: 0 !important; align-self: auto !important; z-index: 30 !important; } /* Cabecera cortita, sin el hueco oscuro sobre el logo/nombre */ #ad-panel .ad-panel-head { padding: 0.7rem 1.2rem 0.8rem !important; } #ad-panel .ad-logo-row { margin-bottom: 0.35rem !important; } #ad-panel .ad-logo-row img { height: 44px !important; } #ad-panel .ad-eyebrow { margin: 0 0 0.15rem !important; } #ad-panel .ad-head-title { margin: 0 0 0.15rem !important; line-height: 1.1 !important; } #ad-panel .ad-head-sub { margin: 0 !important; font-size: 0.78rem !important; line-height: 1.3 !important; } /* Cuerpo pegado: botón + "no volver a mostrar" juntos, sin espacio de sobra */ #ad-panel .ad-body { padding: 0.7rem 1.2rem 0.9rem !important; gap: 0.5rem !important; } #ad-panel .ad-no-show { margin: 0 !important; } /* Desktop: un poco más ancho = imagen más grande */ @media (min-width: 601px) { #ad-panel { width: min(540px, 96vw) !important; } } /* ══════════════════════════════════════════════════════════════════ 7) ANUNCIO — refinamiento compacto (2026-07-13) Modal casi a todo el alto (imagen lo llena) · eyebrow unido al título con líneas de color fuerte · botón "Ver planes" minimalista · menos espacio en los extremos de arriba. ══════════════════════════════════════════════════════════════════ */ /* Ventana casi a todo el alto de la página (desktop); imagen la llena */ @media (min-width: 601px) { #ad-panel { width: min(540px, 96vw) !important; height: 94vh !important; max-height: 94vh !important; } } #ad-panel { display: flex !important; flex-direction: column !important; } #ad-panel .ad-img-wrap { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } #ad-panel .ad-img { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* Cabecera con MENOS espacio en los extremos (arriba y costados) */ #ad-panel .ad-panel-head { padding: 0.5rem 0.8rem 0.55rem !important; } #ad-panel .ad-logo-row { margin-bottom: 0.25rem !important; } /* Eyebrow UNIDO al título, con líneas a los costados de color más fuerte */ #ad-panel .ad-eyebrow { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin: 0 auto 0.1rem !important; color: #ffd766 !important; /* color más fuerte */ font-size: 0.82rem !important; text-shadow: 0 0 12px rgba(255, 215, 102, 0.55) !important; } #ad-panel .ad-eyebrow::before, #ad-panel .ad-eyebrow::after { content: "" !important; width: 26px !important; height: 2px !important; border-radius: 2px !important; background: linear-gradient( 90deg, transparent, #e8c76a, #00a3b5 ) !important; /* línea fuerte */ } #ad-panel .ad-eyebrow::after { background: linear-gradient(90deg, #00a3b5, #e8c76a, transparent) !important; } #ad-panel .ad-head-title { margin: 0 !important; } #ad-panel .ad-head-title em { margin-top: 0.1rem !important; } #ad-panel .ad-head-sub { margin: 0.25rem 0 0 !important; } /* Botón "Ver planes" más pequeño y minimalista */ #ad-panel .ad-btn-ghost { width: auto !important; align-self: center !important; padding: 7px 16px !important; font-size: 0.72rem !important; letter-spacing: 0.1em !important; border-radius: 8px !important; box-shadow: none !important; background: transparent !important; border: 1px solid rgba(0, 163, 181, 0.5) !important; } #ad-panel .ad-btn-ghost svg { width: 12px !important; height: 12px !important; } /* Todo más pegado abajo */ #ad-panel .ad-body { padding: 0.55rem 1rem 0.7rem !important; gap: 0.4rem !important; } #ad-panel .ad-no-show { padding-bottom: 0 !important; font-size: 0.72rem !important; } /* ══════════════════════════════════════════════════════════════════ 8) ANUNCIO — línea dinámica + blur-fill de la imagen (2026-07-13) ══════════════════════════════════════════════════════════════════ */ /* Líneas del eyebrow: brillo que se desplaza de IZQUIERDA a DERECHA */ #ad-panel .ad-eyebrow::before, #ad-panel .ad-eyebrow::after { background: linear-gradient( 90deg, transparent 0%, #e8c76a 35%, #00e0f0 50%, #e8c76a 65%, transparent 100% ) !important; background-size: 300% 100% !important; animation: adEyebrowShine 2s linear infinite !important; } @keyframes adEyebrowShine { from { background-position: -150% 0; } /* entra por la izquierda */ to { background-position: 150% 0; } /* sale por la derecha */ } /* BLUR-FILL: si la imagen es más chica que el marco, el espacio vacío se completa con una versión difuminada de la misma imagen (como en Plex). */ #ad-panel .ad-img-wrap { position: relative !important; background: #02060e !important; overflow: hidden !important; } #ad-panel .ad-img-wrap::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background: url("imag/Ad_Liga1M.webp") center center / cover no-repeat !important; filter: blur(30px) brightness(0.5) saturate(1.15) !important; transform: scale(1.2) !important; pointer-events: none !important; } #ad-panel .ad-img { position: relative !important; z-index: 1 !important; } #ad-panel .ad-img-overlay { z-index: 2 !important; } /* ══════════════════════════════════════════════════════════════════ SERVICIOS — panorama cinematografico regional (2026-07-13) Override final: reemplaza la UI pesada anterior por HTML/CSS liviano. ══════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════ SERVICIOS — banner paisaje + tarjetas (solo títulos) ════════════════════════════════════════════ */ /* ════════════════════════════════════════════ SERVICIOS — imagen paisaje protagonista + tarjetas compactas ════════════════════════════════════════════ */ /* ════════════════════════════════════════════ SERVICIOS — paisaje a sangre completa, texto dentro (título arriba / copy+cobertura+botón abajo, sin tapar sedes) ════════════════════════════════════════════ */ /* ════════════════════════════════════════════ SERVICIOS — imagen ocupa toda la sección, texto encima (título arriba / copy + 4 tarjetas + botón abajo, sin tapar sedes) ════════════════════════════════════════════ */ .svc-cinema { --svc-blue: #38bdf8; --svc-violet: #8b5cf6; --svc-mag: #d946ef; --svc-line: rgba(255, 255, 255, 0.16); color: #fff; isolation: isolate; } .svc-cinema.srv-section { padding: 0 !important; background: #04090f !important; min-height: 100vh; min-height: 100svh; min-height: 100dvh; } .svc-cinema::before, .svc-cinema::after { content: none !important; display: none !important; } /* ── La imagen ES la sección: a sangre completa ── */ .svc-cinema-banner { position: relative; width: 100vw; margin-left: calc(50% - 50vw); max-width: 100vw; /* Altura suficiente en PC/laptop para que texto y tarjetas nunca se solapen */ /* height: clamp(580px, 46vw, 720px); */ min-height: 100vh; min-height: 100svh; min-height: 100dvh; line-height: 0; overflow: hidden; isolation: isolate; } .svc-cinema-bg { position: absolute; inset: 0; z-index: 0; } .svc-cinema-bg img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(1.16) contrast(1.05) brightness(0.99); } /* Velos: arriba sutil (título), abajo un poco más (copy+tarjetas+botón). El centro queda limpio → los nombres de sedes se ven. */ .svc-cinema-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(4, 9, 15, 0.6) 0%, rgba(4, 9, 15, 0.2) 12%, transparent 26% ), linear-gradient( 0deg, rgba(4, 9, 15, 0.9) 0%, rgba(4, 9, 15, 0.66) 16%, rgba(4, 9, 15, 0.22) 34%, transparent 48% ); } /* ── Overlays ── */ .svc-cinema-top, .svc-cinema-bottom { position: absolute; left: 0; right: 0; z-index: 2; line-height: 1.3; display: flex; flex-direction: column; align-items: center; text-align: center; padding-left: clamp(1rem, 4vw, 3rem); padding-right: clamp(1rem, 4vw, 3rem); } .svc-cinema-top { top: 0; /* Deja libre la barra de navegación fija (~72px) para que no tape el título */ padding-top: clamp(4.4rem, 5.5vw, 5rem); gap: 0.5rem; } .svc-cinema-bottom { bottom: 0; padding-bottom: clamp(1rem, 2.2vw, 1.7rem); gap: clamp(0.6rem, 1.3vw, 0.95rem); } .svc-cinema-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: "Rajdhani", sans-serif; font-size: clamp(0.6rem, 1vw, 0.74rem); font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(232, 199, 106, 0.96); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75); } .svc-cinema-kicker::before, .svc-cinema-kicker::after { content: ""; width: 28px; height: 1px; background: linear-gradient( 90deg, transparent, var(--valle), var(--svc-blue) ); } .svc-cinema-kicker::after { background: linear-gradient( 90deg, var(--svc-blue), var(--valle), transparent ); } .svc-cinema-title { margin: 0; font-family: "Cinzel", serif; font-size: clamp(1.8rem, 3.3vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: 0.035em; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.6); } .svc-cinema-copy { max-width: 640px; margin: 0; font-family: "Montserrat", sans-serif; font-size: clamp(0.82rem, 1.15vw, 1rem); line-height: 1.55; font-weight: 600; color: #ffffff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 255, 255, 0.22); } /* ── 4 tarjetas COMPACTAS translúcidas sobre la imagen ── */ .svc-cinema-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; width: 100%; max-width: 680px; } .svc-cinema-card { --ac1: var(--svc-blue); --ac2: var(--svc-violet); position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0.55rem 0.5rem; border: 1px solid var(--svc-line); border-radius: 12px; background: linear-gradient( 150deg, color-mix(in srgb, var(--ac1) 16%, transparent), transparent 62% ), rgba(4, 9, 15, 0.5); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .svc-cinema-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient( 90deg, transparent, var(--ac1), var(--ac2), transparent ); opacity: 0.92; } .svc-cinema-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ac1) 58%, white 16%); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px color-mix(in srgb, var(--ac1) 34%, transparent); } .svc-cinema-card[data-svc="internet"] { --ac1: #38bdf8; --ac2: #00a3b5; } .svc-cinema-card[data-svc="cable"] { --ac1: #e8c76a; --ac2: #d946ef; } .svc-cinema-card[data-svc="iptv"] { --ac1: #8b5cf6; --ac2: #38bdf8; } .svc-cinema-card[data-svc="soporte"] { --ac1: #7fb069; --ac2: #00a3b5; } .svc-cinema-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; background: linear-gradient( 135deg, color-mix(in srgb, var(--ac1) 38%, transparent), rgba(255, 255, 255, 0.06) ); border: 1px solid color-mix(in srgb, var(--ac1) 48%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--ac1) 28%, transparent); } .svc-cinema-icon svg { width: 16px; height: 16px; } .svc-cinema-card h3 { margin: 0; font-family: "Cinzel", serif; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.03em; line-height: 1.05; color: #fff; } /* ── Botón chiquito y minimalista ── */ .svc-cinema-cta { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 0; padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(4, 9, 15, 0.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; text-decoration: none; font-family: "Rajdhani", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .svc-cinema-cta::after { content: "→"; font-size: 0.85em; opacity: 0.9; } .svc-cinema-cta:hover { border-color: var(--valle); background: rgba(127, 176, 105, 0.22); transform: translateY(-1px); } /* ── Responsive ── */ /* Tablet/laptop angosto (901-1024): el paisaje landscape sería muy bajo → altura media (suficiente para no quedar delgado, sin recortar de más los nombres de los bordes) */ @media (max-width: 1024px) { .svc-cinema-banner { height: clamp(500px, 80vw, 620px); } } @media (max-width: 900px) { /* Marco mínimo también en celular: ~0.2rem de aire con los bordes */ .svc-cinema.srv-section { padding: 0.2rem !important; } /* Móvil/tablet portrait: el paisaje (recortado, menos cielo) llena la pantalla */ .svc-cinema-banner { height: min(88svh, 820px); width: auto; max-width: none; margin-left: 0; border-radius: 14px; border: 1px solid rgba(120, 190, 235, 0.18); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7); } .svc-cinema-bottom { gap: 0.55rem; padding-bottom: clamp(1.1rem, 3vw, 1.7rem); } .svc-cinema-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; gap: 0.5rem; } } @media (max-width: 600px) { .svc-cinema-banner { height: min(86svh, 720px); } .svc-cinema-title { font-size: clamp(1.7rem, 8vw, 2.5rem); } .svc-cinema-copy { font-size: 0.8rem; line-height: 1.45; max-width: 340px; } .svc-cinema-card { min-height: 46px; padding: 0.5rem 0.4rem; border-radius: 10px; } .svc-cinema-icon { width: 26px; height: 26px; border-radius: 8px; } .svc-cinema-icon svg { width: 14px; height: 14px; } .svc-cinema-card h3 { font-size: 0.76rem; } .svc-cinema-cta { font-size: 0.68rem; padding: 0.38rem 0.9rem; } body.svc-cinema-in-view .mascot-wrap { display: none !important; } } @media (prefers-reduced-motion: reduce) { .svc-cinema-card, .svc-cinema-cta { transition: none !important; } .svc-cinema-card:hover, .svc-cinema-cta:hover { transform: none !important; } } /* ════════════════════════════════════════════════════════════════ SERVICIOS · PC / LAPTOP / TABLET ECHADA (≥901px) La imagen deja de ir a sangre completa: se contiene en un MARCO elegante con aspect-ratio = imagen real (1831/859) → se ve la imagen COMPLETA (todas las sedes, sin recorte) a cualquier ancho, y al capar el ancho se muestra reducida (más nítida, no estirada). Celular/tablet vertical (≤900px) NO se toca — sigue arriba. ════════════════════════════════════════════════════════════════ */ @media (min-width: 901px) { /* Marco CASI a pantalla completa: ~1cm de aire a los costados y abajo, y arriba deja pasar la nav fija + ~1cm. */ .svc-cinema.srv-section { --svc-pad: clamp(0.6rem, 1.7vw, 1cm); --svc-nav: 4.6rem; min-height: 100svh !important; box-sizing: border-box; padding: var(--svc-pad) !important; padding-top: calc(var(--svc-nav) + var(--svc-pad)) !important; display: flex; align-items: center; justify-content: center; background: radial-gradient( 1200px 600px at 50% 0%, rgba(56, 189, 248, 0.06), transparent 60% ), radial-gradient( 900px 500px at 50% 100%, rgba(127, 176, 105, 0.05), transparent 60% ), #04090f !important; } /* Banner = marco premium que llena la pantalla; la imagen va CONTENIDA (object-fit:contain) → se ven TODAS las sedes sin recorte, con el fondo oscuro del marco de paspartú arriba/abajo. */ .svc-cinema-banner { position: relative; width: 100%; max-width: none; margin: 0 auto; height: auto !important; aspect-ratio: auto !important; min-height: calc(100svh - var(--svc-nav) - 2 * var(--svc-pad)) !important; background: radial-gradient( 120% 90% at 50% 45%, rgba(20, 32, 44, 0.5), transparent 70% ), #050b12; border-radius: 26px; overflow: hidden; border: 1px solid rgba(120, 190, 235, 0.16); box-shadow: 0 34px 90px -34px rgba(0, 0, 0, 0.9), 0 10px 34px -14px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04); } /* Filo de acento sutil (gradiente teal→valle) recorriendo el marco */ .svc-cinema-banner::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient( 135deg, rgba(56, 189, 248, 0.4), transparent 28%, transparent 72%, rgba(127, 176, 105, 0.34) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .svc-cinema-bg { position: absolute; inset: 0; } .svc-cinema-bg img { width: 100%; height: 100%; object-fit: cover; /* llena el marco (texto sobre la imagen, sin bandas mate) */ object-position: center; filter: saturate(1.14) contrast(1.04) brightness(0.99); } /* El marco ya está bajo la nav (padding-top), el título va sobre el paspartú/cielo del tope */ .svc-cinema-top { padding-top: clamp(1.1rem, 2.4vw, 2rem); gap: 0.6rem; } .svc-cinema-title { font-size: clamp(2rem, 3vw, 3.1rem); } .svc-cinema-bottom { padding-bottom: clamp(1.1rem, 1.8vw, 1.7rem); gap: clamp(0.65rem, 1.2vw, 0.95rem); } /* Velo inferior un poco más presente para asentar copy+tarjetas sobre la franja baja (íconos de la imagen, redundantes) sin tocar las sedes */ .svc-cinema-shade { background: linear-gradient( 180deg, rgba(4, 9, 15, 0.55) 0%, rgba(4, 9, 15, 0.16) 13%, transparent 27% ), linear-gradient( 0deg, rgba(4, 9, 15, 0.94) 0%, rgba(4, 9, 15, 0.72) 15%, rgba(4, 9, 15, 0.24) 33%, transparent 47% ); } } /* ── Laptop / tablet echada (901–1180): el paisaje da un banner más bajo → compacto el bloque inferior para que quede DEBAJO de las sedes ── */ @media (min-width: 901px) and (max-width: 1180px) { .svc-cinema-title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); } .svc-cinema-top { padding-top: clamp(1rem, 2.2vw, 1.6rem); } .svc-cinema-copy { font-size: 0.82rem; line-height: 1.4; max-width: 560px; } .svc-cinema-bottom { gap: 0.5rem; padding-bottom: clamp(0.8rem, 1.4vw, 1.1rem); } .svc-cinema-card { min-height: 44px; padding: 0.45rem 0.4rem; } .svc-cinema-icon { width: 26px; height: 26px; } .svc-cinema-icon svg { width: 14px; height: 14px; } .svc-cinema-card h3 { font-size: 0.8rem; } } /* ── PC ancho: tarjetas un poco más grandes ── */ @media (min-width: 1280px) { .svc-cinema-banner { border-radius: 30px; } .svc-cinema-grid { max-width: 760px; gap: 0.7rem; } } /* ── LAPTOP (901–1350px): usa la imagen recortada por la izquierda (ícono wifi al borde) que es más alta (ratio 1.82) → con object-fit:cover LLENA el marco por altura SIN escalar hacia arriba (queda reducida = nítida), el texto vuelve a ir SOBRE la imagen y las sedes se ven completas. ── */ @media (min-width: 901px) and (max-width: 1550px) { .svc-cinema-banner { background: #050b12; } .svc-cinema-bg img { object-fit: cover; object-position: center center; } /* Texto pegado a los bordes de la imagen (ya no flota en bandas mate) */ .svc-cinema-top { padding-top: clamp(0.9rem, 2vw, 1.5rem); } .svc-cinema-bottom { padding-bottom: clamp(0.9rem, 1.6vw, 1.4rem); } /* El humo queda detrás y las partículas encima */ #heroParticles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 1; mix-blend-mode: screen; } #heroSmokeCanvas { z-index: 1; } .hero .hcontent, .hero .hero-content { position: relative; z-index: 10; } @media (pointer: coarse), (max-width: 1023px) { #heroParticles { mix-blend-mode: normal; } } }