/* ===================================================================== AXION TELECOM — THEME V2 (estilo corporativo tipo Starlink) Muestra de rediseño. Se aplica solo a páginas con . Depende de styles.css (se carga después para sobrescribir). ===================================================================== */ .theme-v2{ --v2-ink:#080b14; /* negro-azulado base */ --v2-ink-2:#0d1224; --v2-panel:#111629; --v2-txt:#e9edf7; --v2-txt-dim:#c3cde3; --v2-txt-mute:#95a3c4; --v2-line:rgba(255,255,255,.12); } /* El body queda CLARO: las secciones de contenido (.section) son claras y las secciones oscuras (hero, .v2-dark, .v2-final, page-hero) ya traen su propio fondo. Esto evita texto oscuro sobre fondo oscuro. */ .theme-v2{background:#fff} /* ---------- Ocultar banner de transición (look Starlink limpio) ---------- */ .theme-v2 #site-bar,.theme-v2 .transition-bar{display:none!important} /* ---------- Header oscuro y compacto ---------- */ .theme-v2 .site-header{ background:rgba(8,11,20,.55); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; } .theme-v2 .site-header.scrolled{ background:rgba(8,11,20,.92); box-shadow:0 8px 30px rgba(0,0,0,.4); border-bottom-color:rgba(255,255,255,.09); } .theme-v2 .nav{height:70px} .theme-v2 .brand img{filter:brightness(0) invert(1);height:44px} .theme-v2 .nav-menu a,.theme-v2 .nav-menu .nav-toggle-drop{color:#e7ecf7} .theme-v2 .nav-menu a:hover,.theme-v2 .nav-menu .nav-toggle-drop:hover{color:#fff;background:rgba(255,255,255,.08)} .theme-v2 .nav-menu a.active,.theme-v2 .has-drop.active .nav-toggle-drop{color:#fff;background:rgba(255,255,255,.10)} .theme-v2 .nav-burger span{background:#fff} .theme-v2 .dropdown{background:#0d1224;border:1px solid var(--v2-line);box-shadow:0 24px 60px rgba(0,0,0,.5)} .theme-v2 .dropdown a:hover{background:rgba(255,255,255,.06)} .theme-v2 .di-t{color:#fff} .theme-v2 .di-d{color:var(--v2-txt-mute)} /* Menú móvil oscuro y legible */ .theme-v2 .mobile-nav{top:70px;background:#0d1224} .theme-v2 .mobile-nav a,.theme-v2 .mobile-nav .mn-group>button{color:#e7ecf7;border-bottom-color:rgba(255,255,255,.08)} .theme-v2 .mobile-nav .mn-sub a{color:var(--v2-txt-mute)} /* CTA blanco tipo Starlink en el header */ .theme-v2 .nav-actions .btn-wa{background:#fff;color:#0a0e1a;border:0;box-shadow:none} .theme-v2 .nav-actions .btn-wa svg{color:#0a0e1a;fill:#0a0e1a} .theme-v2 .nav-actions .btn-wa:hover{background:#e6ebf5} /* ---------- Hero de páginas internas (oscuro + degradado naranja) ---------- */ .theme-v2 .page-hero{ background: radial-gradient(130% 150% at 78% -10%, rgba(254,95,21,.55) 0%, rgba(232,80,12,.24) 30%, rgba(20,20,30,.25) 58%, #080b14 100%), linear-gradient(180deg,#0a0e1a,#080b14); border-bottom:1px solid rgba(255,255,255,.08); color:#fff;margin-top:-71px;padding:135px 0 60px} .theme-v2 .page-hero h1{color:#fff} .theme-v2 .page-hero .lead{color:var(--v2-txt-dim)} .theme-v2 .page-hero .breadcrumb{color:#9fb0d6} .theme-v2 .page-hero .breadcrumb a{color:#c6cfe4} .theme-v2 .page-hero .breadcrumb a:hover{color:#fff} .theme-v2 .page-hero .eyebrow{background:rgba(149,204,253,.16);color:#95ccfd} .theme-v2 .page-hero .eyebrow--orange{background:rgba(254,95,21,.20);color:#ffb488} .theme-v2 .page-hero .note-box{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--v2-txt-dim)} /* Botón secundario del hero, legible sobre oscuro */ .theme-v2 .page-hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.42);background:transparent} .theme-v2 .page-hero .btn-outline:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.10)} /* Hero de páginas de solución con foto de fondo (más grande, cinematográfico) */ .theme-v2 .page-hero.hero-media{padding:175px 0 92px;background:#080b14} .theme-v2 .page-hero.hero-media .v2-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0} .theme-v2 .page-hero.hero-media::before{content:"";position:absolute;inset:0;z-index:1; background: linear-gradient(180deg,rgba(6,9,18,.5),rgba(6,9,18,.72)), radial-gradient(135% 130% at 74% 28%,rgba(254,95,21,.5) 0%,rgba(232,80,12,.26) 32%,rgba(6,9,18,.35) 64%,rgba(4,6,14,.9) 100%)} .theme-v2 .page-hero.hero-media .container{position:relative;z-index:2} /* ---------- Botones utilitarios v2 ---------- */ .btn-white{background:#fff;color:#0a0e1a;border:0} .btn-white:hover{background:#e6ebf5;color:#0a0e1a} .btn-line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)} .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.10);color:#fff} /* ---------- Eyebrow v2 ---------- */ .v2-eyebrow{display:inline-block;font-family:var(--font-head);font-weight:600; font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#9fb0d6} /* Titulares de secciones oscuras SIEMPRE en blanco (evita texto invisible) */ .v2-hero h1,.v2-band h2,.v2-dark h2,.v2-final h2{color:#fff} /* ---------- HERO a pantalla completa ---------- */ .v2-hero{position:relative;min-height:92vh;display:flex;align-items:center; color:#fff;overflow:hidden;background:#080b14;margin-top:-71px;padding-top:71px} .v2-hero .v2-bg,.v2-band .v2-bg{position:absolute;inset:0;background-size:cover; background-position:center;z-index:0;transform:scale(1.02)} .v2-hero::after{content:"";position:absolute;inset:0;z-index:1; background: linear-gradient(90deg,rgba(6,9,18,.94) 0%,rgba(6,9,18,.78) 34%,rgba(6,9,18,.30) 68%,rgba(6,9,18,.55) 100%), linear-gradient(0deg,rgba(6,9,18,.75),transparent 42%)} .v2-hero .container{position:relative;z-index:2} .v2-hero h1{font-family:var(--font-head);font-weight:800;letter-spacing:-.025em; line-height:1.02;font-size:clamp(2.6rem,6vw,5rem);margin:18px 0 0;max-width:15ch} .v2-hero .grad2{background:linear-gradient(90deg,#95ccfd,#1f3fd0);-webkit-background-clip:text;background-clip:text;color:transparent} .v2-hero .accent-or{color:var(--orange)} .v2-lead{margin-top:22px;max-width:540px;font-size:clamp(1.02rem,1.4vw,1.22rem); color:var(--v2-txt-dim);line-height:1.62} .v2-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .v2-trust{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:34px;color:#aab6d4;font-size:.92rem} .v2-trust span{display:inline-flex;align-items:center;gap:9px} .v2-trust svg{width:19px;height:19px;color:var(--orange);flex:0 0 auto} /* ---------- HERO SLIDER ---------- */ .v2-slider{position:relative;min-height:92vh;overflow:hidden;background:#080b14;margin-top:-71px} .v2-slide{position:absolute;inset:0;display:flex;align-items:center;padding:71px 0 60px; color:#fff;opacity:0;pointer-events:none;transition:opacity .7s ease} .v2-slide.active{opacity:1;pointer-events:auto} .v2-slide .v2-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transform:scale(1.03)} .v2-slide::after{content:"";position:absolute;inset:0;z-index:1; background: linear-gradient(90deg,rgba(6,9,18,.92) 0%,rgba(6,9,18,.6) 40%,rgba(6,9,18,.12) 74%,rgba(6,9,18,.4) 100%), radial-gradient(135% 130% at 74% 60%,rgba(254,95,21,.66) 0%,rgba(232,80,12,.40) 32%,rgba(20,20,30,.35) 64%,rgba(4,6,14,.88) 100%), linear-gradient(0deg,rgba(6,9,18,.55),transparent 55%)} .v2-slide .container{position:relative;z-index:2} .v2-slide h1{font-family:var(--font-head);font-weight:800;letter-spacing:-.025em;line-height:1.03; font-size:clamp(2.4rem,5.6vw,4.7rem);margin:16px 0 0;max-width:16ch;color:#fff} .v2-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:48px;height:48px; border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28); color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);transition:.2s} .v2-arrow:hover{background:rgba(255,255,255,.26)} .v2-arrow svg{width:22px;height:22px} .v2-arrow.prev{left:22px}.v2-arrow.next{right:22px} .v2-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:10px} .v2-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.4);border:0;padding:0;cursor:pointer;transition:.25s} .v2-dot.active{background:var(--orange);width:28px} @media(max-width:760px){ .v2-slider{min-height:86vh} .v2-slide h1{max-width:none} .v2-slide::after{background:linear-gradient(0deg,rgba(6,9,18,.94),rgba(6,9,18,.5) 60%,rgba(6,9,18,.55))} .v2-arrow{display:none} } /* ---------- BANDAS CINEMATOGRÁFICAS (líneas de negocio) ---------- */ .v2-band{position:relative;min-height:84vh;display:flex;align-items:center; color:#fff;overflow:hidden;background:#080b14} .v2-band::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(6,9,18,.92),rgba(6,9,18,.6) 42%,rgba(6,9,18,.12) 74%)} .v2-band.reverse::after{background:linear-gradient(270deg,rgba(6,9,18,.92),rgba(6,9,18,.6) 42%,rgba(6,9,18,.12) 74%)} .v2-band .container{position:relative;z-index:2} .v2-band .v2-inner{max-width:520px} .v2-band.reverse .v2-inner{margin-left:auto} .v2-band .v2-eyebrow{color:var(--accent,#9fb0d6)} .v2-band h2{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em; line-height:1.06;font-size:clamp(2rem,4.6vw,3.5rem);margin:16px 0 0} .v2-band .v2-lead{margin-top:16px;max-width:470px} .v2-cov{display:inline-flex;align-items:center;gap:8px;margin-top:20px; font-size:.86rem;color:#a9b6d6} .v2-cov svg{width:17px;height:17px;color:var(--accent,#9fb0d6)} .v2-band .v2-actions{margin-top:26px} /* ---------- SECCIÓN OSCURA (stats / diferencial) ---------- */ .v2-dark{background:#080b14;color:#fff;padding:100px 0;position:relative} .v2-dark .v2-eyebrow{color:#9fb0d6} .v2-dark h2{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em; line-height:1.08;font-size:clamp(1.9rem,3.8vw,2.9rem);margin-top:14px} .v2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:46px} .v2-stat{border-left:1px solid var(--v2-line);padding-left:20px} .v2-stat .n{font-family:var(--font-head);font-weight:800;font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1;color:#fff} .v2-stat .n b{color:var(--orange)} .v2-stat .l{color:#a9b6d6;margin-top:10px;font-size:.95rem} .v2-note-dim{color:#7f8db0;font-size:.82rem;margin-top:26px} /* ---------- Titulares más grandes en secciones claras reutilizadas ---------- */ .theme-v2 .section-head h2{font-size:clamp(1.9rem,3.8vw,2.9rem);letter-spacing:-.018em} /* ---------- Gancho comercial en el hero ---------- */ .v2-hook{display:inline-flex;align-items:center;gap:10px;margin-top:22px; background:rgba(254,95,21,.14);border:1px solid rgba(254,95,21,.45); color:#ffd9c6;padding:9px 16px;border-radius:999px;font-size:.92rem;font-weight:600} .v2-hook b{color:#fff} /* ---------- Tarjetas de líneas (comercial, con foto) ---------- */ .v2-lines{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px} .v2-linecard{position:relative;border-radius:16px;overflow:hidden;min-height:360px; display:flex;flex-direction:column;justify-content:flex-end;color:#fff; border:1px solid rgba(255,255,255,.10);isolation:isolate} .v2-linecard .v2-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;transition:transform .5s ease} .v2-linecard::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(0deg,rgba(6,9,18,.96) 6%,rgba(6,9,18,.55) 52%,rgba(6,9,18,.20))} .v2-linecard:hover .v2-bg{transform:scale(1.06)} .v2-linecard .lc-body{padding:24px;position:relative;z-index:1} .v2-linecard .lc-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head); font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent,#95ccfd);font-weight:600} .v2-linecard h3{color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.4rem;margin:10px 0 0} .v2-linecard p{color:#c6cfe4;font-size:.95rem;line-height:1.5;margin:8px 0 16px} .v2-linecard .lc-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600; font-family:var(--font-head);font-size:.95rem} .v2-linecard .lc-link svg{width:18px;height:18px;color:var(--accent,#95ccfd);transition:transform .2s} .v2-linecard:hover .lc-link svg{transform:translateX(4px)} @media(max-width:960px){.v2-lines{grid-template-columns:1fr 1fr}} @media(max-width:560px){.v2-lines{grid-template-columns:1fr}.v2-linecard{min-height:300px}} /* ---------- CTA FINAL oscuro ---------- */ .v2-final{position:relative;overflow:hidden;background:#080b14;color:#fff;text-align:center;padding:120px 0} .v2-final .v2-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;opacity:.5} .v2-final::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(6,9,18,.94),rgba(6,9,18,.7))} .v2-final .container{position:relative;z-index:2} .v2-final h2{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em; font-size:clamp(2rem,4.8vw,3.4rem);line-height:1.06} .v2-final p{color:var(--v2-txt-dim);max-width:600px;margin:18px auto 0;font-size:1.08rem} .v2-final .v2-actions{justify-content:center;margin-top:34px} /* ---------- Responsive ---------- */ @media(max-width:760px){ .v2-hero{min-height:86vh} .v2-band{min-height:74vh} .v2-band .v2-inner,.v2-hero h1{max-width:none} .v2-hero::after{background:linear-gradient(0deg,rgba(6,9,18,.94),rgba(6,9,18,.5) 60%,rgba(6,9,18,.55))} .v2-band::after,.v2-band.reverse::after{background:linear-gradient(0deg,rgba(6,9,18,.94),rgba(6,9,18,.45))} .v2-band.reverse .v2-inner{margin-left:0} .v2-stats{grid-template-columns:1fr 1fr;gap:22px} } @media(max-width:460px){ .v2-stats{grid-template-columns:1fr 1fr} }