@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');
/* =========================================================================
ZAQORI · hoja de estilo consolidada
-------------------------------------------------------------------------
Reemplaza a 8 archivos (styles, animations, enhance, extras,
visual-upgrade, fixes, theme-light, responsive-fixes). El orden de abajo
es EXACTAMENTE el que tenían en el , así que la cascada no cambia:
lo que se veía antes se sigue viendo igual.
Los archivos originales siguen en el repositorio. Para volver atrás,
basta con restaurar los del index.html.
========================================================================= */
/* =========================================================================
PALETA CENTRAL (tokens)
-------------------------------------------------------------------------
Un solo lugar para ajustar los temas. Cambiar --zq-canvas o --zq-shadow
aquí repinta TODAS las tarjetas del sitio a la vez, sin ir componente
por componente. Los componentes nuevos deben usar var(--zq-...) en vez
de colores fijos: así quedan correctos en los dos temas de una sola vez.
========================================================================= */
:root {
/* Tema oscuro (por defecto) */
--zq-canvas: #050816;
--zq-surface: #0e1730;
--zq-text: #ffffff;
--zq-text-soft: #9fb2d4;
--zq-border: rgba(110,143,191,0.20);
--zq-border-hover: rgba(111,252,255,0.34);
--zq-accent: #3B82F6;
--zq-accent-2: #6FFCFF;
--zq-ok: #34D399;
--zq-shadow: 0 20px 50px rgba(2,6,20,0.45);
--zq-shadow-hover: 0 28px 64px rgba(2,6,20,0.60);
}
html.light {
/* Tema claro: misma estructura, otros valores */
--zq-canvas: #e7edf7;
--zq-surface: #ffffff;
--zq-text: #1e2c44;
--zq-text-soft: #3d4c66;
--zq-border: rgba(15,23,42,0.12);
--zq-border-hover: rgba(37,99,235,0.42);
--zq-accent: #2563eb;
--zq-accent-2: #0e7490;
--zq-ok: #047857;
--zq-shadow: 0 1px 2px rgba(15,23,42,0.07), 0 14px 30px -8px rgba(15,23,42,0.14);
--zq-shadow-hover: 0 1px 2px rgba(15,23,42,0.06), 0 20px 42px -10px rgba(37,99,235,0.28);
}
/* ========================================================================
ORIGEN: styles.css
======================================================================== */
/* =========================================================
ZAQORI · Hoja de estilos principal
Paleta: #050816 fondo · #3B82F6 azul acento · #6E8FBF azul suave
#94A3B8 texto sec · #6FFCFF cian · #FFFFFF texto
Tipos: Exo 2 (títulos) · Inter (cuerpo)
Nota: Sin variables CSS y con prefijos -webkit- para máxima
compatibilidad (Chrome, Firefox, Safari, Edge, móviles).
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background: #050816;
color: #fff;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
overflow-x: hidden;
/* Vista general al 80% (efecto "más alejado") solicitado.
Soportado en Chrome, Edge, Safari y Firefox (v126+). */
zoom: 0.8;
}
/* En móvil mantenemos el 100%: el responsive ya adapta los tamaños
y el zoom reduciría demasiado el texto en pantallas pequeñas. */
@media (max-width: 768px) {
body { zoom: 1; }
}
/* ACCESIBILIDAD */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid #3B82F6;
outline-offset: 3px;
border-radius: 6px;
}
/* FONDO */
.bg-grid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -2;
background-image:
linear-gradient(rgba(59,130,246,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.045) 1px, transparent 1px);
background-size: 48px 48px;
}
.bg-glow {
position: fixed;
width: 900px;
height: 900px;
background: radial-gradient(circle, rgba(59,130,246,0.14), transparent 70%);
top: -250px;
right: -200px;
z-index: -1;
}
/* =========================================================
NAVBAR
========================================================= */
.navbar {
position: fixed;
top: 0;
width: 100%;
padding: 18px 70px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(5,8,22,0.75);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(110,143,191,0.12);
z-index: 1000;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 46px;
}
nav {
display: flex;
gap: 34px;
}
nav a {
position: relative;
text-decoration: none;
color: #fff;
font-weight: 500;
font-size: 15px;
transition: color .3s;
}
nav a:hover {
color: #6E8FBF;
}
/* item activo (design system): subrayado con punto */
nav a.active {
color: #3B82F6;
}
nav a.active::after {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 22px;
height: 2px;
background: #3B82F6;
border-radius: 2px;
transform: translateX(-50%);
box-shadow: 0 0 10px rgba(59,130,246,0.8);
}
/* =========================================================
BOTONES (design system)
========================================================= */
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 26px;
border-radius: 14px;
font-weight: 600;
font-size: 15px;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: transform .3s, box-shadow .3s, background .3s;
}
.btn-primary {
border: none;
color: #fff;
background: linear-gradient(135deg, #2563EB, #3B82F6);
box-shadow: 0 0 25px rgba(59,130,246,0.35);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 0 35px rgba(59,130,246,0.55);
}
.btn-secondary {
background: transparent;
border: 1px solid rgba(110,143,191,0.35);
color: #fff;
}
.btn-secondary:hover {
border-color: rgba(59,130,246,0.6);
background: rgba(59,130,246,0.06);
}
/* botón terciario / link con flecha */
.btn-link {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
padding: 0;
color: #3B82F6;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: .3px;
cursor: pointer;
text-decoration: none;
transition: gap .3s, color .3s;
}
.btn-link svg {
width: 16px;
height: 16px;
transition: transform .3s;
}
.btn-link:hover {
color: #6FFCFF;
}
.btn-link:hover svg {
transform: translateX(4px);
}
/* flecha del botón primario/secundario (cuando lleva ↗) */
.btn-arrow svg {
width: 16px;
height: 16px;
}
/* =========================================================
HERO
========================================================= */
.hero {
width: 92%;
max-width: 1450px;
min-height: 100vh;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 50px;
padding-top: 100px;
}
.hero-left {
max-width: 650px;
}
.badge {
display: inline-block;
padding: 11px 20px;
border-radius: 999px;
margin-bottom: 26px;
font-size: 14px;
background: rgba(59,130,246,0.12);
border: 1px solid rgba(59,130,246,0.25);
color: #6E8FBF;
}
.hero-left h1 {
font-family: 'Exo 2', sans-serif;
font-size: 3.25rem; /* fallback sin clamp() */
font-size: clamp(2.5rem, 4.5vw, 3.75rem);
line-height: 1;
letter-spacing: -1.5px;
font-weight: 800;
}
.hero-left h1 span {
color: #3B82F6;
}
.hero-left p {
margin-top: 28px;
font-size: 18px;
color: #94A3B8;
line-height: 1.8;
}
.hero-buttons {
display: flex;
gap: 18px;
margin-top: 34px;
}
.tech-icons {
display: flex;
gap: 22px;
margin-top: 34px;
color: #6E8FBF;
font-size: 15px;
}
/* HERO RIGHT */
.hero-right {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 560px;
perspective: 1100px;
}
.hero-right::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
background: radial-gradient(circle, rgba(59,130,246,0.12), transparent 60%);
filter: blur(80px);
z-index: -1;
}
.core-circle {
width: 480px;
height: 480px;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(59,130,246,0.20);
background: radial-gradient(circle, rgba(59,130,246,0.05), transparent 70%);
box-shadow:
0 0 50px rgba(59,130,246,0.12),
inset 0 0 80px rgba(59,130,246,0.08);
transform-style: preserve-3d;
will-change: transform;
transition: transform .25s ease-out;
}
.core-circle::before {
content: "";
position: absolute;
width: 390px;
height: 390px;
border-radius: 50%;
border: 1px dashed rgba(59,130,246,0.18);
}
.core-circle::after {
content: "";
position: absolute;
width: 580px;
height: 580px;
border-radius: 50%;
border: 1px dashed rgba(59,130,246,0.14);
}
.core-logo {
width: 170px;
height: 170px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255,255,255,0.02);
box-shadow:
0 0 60px rgba(59,130,246,0.35),
0 0 100px rgba(59,130,246,0.15);
transform: translateZ(75px);
transform-style: preserve-3d;
}
.core-logo img {
width: 130px;
filter:
drop-shadow(0 0 12px rgba(59,130,246,0.9))
drop-shadow(0 0 28px rgba(59,130,246,0.6))
drop-shadow(0 0 55px rgba(59,130,246,0.3));
transition: transform .4s ease;
}
.core-logo:hover img {
transform: scale(1.04);
}
/* LIGHT RAYS */
.light-rays {
position: absolute;
width: 680px;
height: 680px;
z-index: -1;
background: radial-gradient(circle, rgba(59,130,246,0.10), transparent 65%);
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(59,130,246,0.16) 8deg,
transparent 22deg,
transparent 160deg,
rgba(59,130,246,0.10) 172deg,
transparent 190deg,
transparent 340deg,
rgba(59,130,246,0.14) 352deg,
transparent 360deg
);
filter: blur(2px);
opacity: 0.8;
-webkit-mask-image: radial-gradient(circle, rgba(0,0,0,0.9) 0%, transparent 65%);
mask-image: radial-gradient(circle, rgba(0,0,0,0.9) 0%, transparent 65%);
}
/* PARTÍCULAS */
.particles {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
.particle {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background: #6FFCFF;
box-shadow: 0 0 12px 2px rgba(111,252,255,0.7);
}
.particle.p1 { top: 12%; left: 18%; animation-delay: 0s; }
.particle.p2 { top: 22%; left: 78%; animation-delay: .8s; width: 4px; height: 4px; }
.particle.p3 { top: 48%; left: 6%; animation-delay: 1.6s; }
.particle.p4 { top: 78%; left: 16%; animation-delay: .4s; width: 6px; height: 6px; }
.particle.p5 { top: 82%; left: 80%; animation-delay: 1.2s; }
.particle.p6 { top: 36%; left: 92%; animation-delay: 2s; width: 4px; height: 4px; }
/* LÍNEAS DE CONEXIÓN */
.connections {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.connections line {
stroke: #3B82F6;
stroke-width: 0.4;
vector-effect: non-scaling-stroke;
stroke-dasharray: 3 3;
opacity: 0.45;
}
/* ÓRBITAS */
.orbit {
position: absolute;
min-width: 110px;
height: 56px;
padding: 0 22px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 18px;
font-size: 15px;
background: rgba(8,15,40,0.75);
border: 1px solid rgba(59,130,246,0.25);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0 0 20px rgba(59,130,246,0.12);
}
.orbit-top { top: 22px; left: 50%; transform: translateX(-50%) translateZ(45px); }
.orbit-bottom { bottom: 22px; left: 50%; transform: translateX(-50%) translateZ(45px); }
.orbit-left { left: 18px; top: 50%; transform: translateY(-50%) translateZ(20px); }
.orbit-right { right: 18px; top: 50%; transform: translateY(-50%) translateZ(20px); }
/* =========================================================
SECCIONES · cabeceras
========================================================= */
section {
padding: 100px 70px;
}
section h2 {
font-family: 'Exo 2', sans-serif;
font-size: 44px;
margin-bottom: 40px;
}
/* eyebrow: "04 ● PROYECTOS" */
.eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
font-family: 'Exo 2', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
color: #6E8FBF;
text-transform: uppercase;
}
.eyebrow .num {
color: #3B82F6;
}
.eyebrow .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #3B82F6;
box-shadow: 0 0 10px rgba(59,130,246,0.9);
}
/* cabecera de sección a 2 columnas (roadmap / proyectos) */
.section-head {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: start;
margin-bottom: 60px;
}
.section-head .head-title {
font-family: 'Exo 2', sans-serif;
font-size: 2.4rem; /* fallback */
font-size: clamp(1.9rem, 3.4vw, 2.8rem);
line-height: 1.1;
letter-spacing: -1px;
font-weight: 800;
margin-bottom: 16px;
}
.section-head .head-title .accent {
color: #3B82F6;
display: block;
}
.section-head .head-sub {
font-family: 'Exo 2', sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #3B82F6;
}
.section-head .head-text {
color: #94A3B8;
font-size: 16px;
line-height: 1.85;
padding-top: 6px;
}
/* =========================================================
SERVICIOS
========================================================= */
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* =========================================================
ABOUT
========================================================= */
.about {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.about-right {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* =========================================================
PROYECTOS (rediseño)
========================================================= */
/* fila de estadísticas */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 55px;
}
.stat-pill {
display: flex;
align-items: center;
gap: 16px;
padding: 22px 24px;
border-radius: 18px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(110,143,191,0.14);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.stat-pill .stat-ico {
flex: 0 0 auto;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: #3B82F6;
background: rgba(59,130,246,0.12);
border: 1px solid rgba(59,130,246,0.25);
}
.stat-pill .stat-ico svg {
width: 24px;
height: 24px;
}
.stat-pill .stat-big {
font-family: 'Exo 2', sans-serif;
font-size: 26px;
font-weight: 800;
color: #3B82F6;
line-height: 1.1;
}
.stat-pill .stat-cap {
display: block;
font-size: 12px;
letter-spacing: .4px;
color: #94A3B8;
text-transform: uppercase;
margin-top: 2px;
}
/* layout sidebar + grid */
.projects-layout {
display: grid;
grid-template-columns: 270px 1fr;
gap: 28px;
align-items: start;
}
/* panel de categorías */
.cat-panel {
padding: 26px 22px;
border-radius: 22px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(110,143,191,0.14);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
position: -webkit-sticky;
position: sticky;
top: 100px;
}
.cat-panel .cat-head {
font-family: 'Exo 2', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #6E8FBF;
margin-bottom: 18px;
}
.cat-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.cat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
cursor: pointer;
color: #cbd5e1;
font-size: 14px;
border: 1px solid transparent;
transition: background .25s, border-color .25s, color .25s;
}
.cat-item .cat-ico {
width: 18px;
height: 18px;
flex: 0 0 auto;
color: #6E8FBF;
}
.cat-item .cat-ico svg {
width: 18px;
height: 18px;
}
.cat-item .cat-name {
flex: 1;
}
.cat-item .cat-count {
font-size: 12px;
color: #94A3B8;
}
.cat-item:hover {
background: rgba(59,130,246,0.07);
color: #fff;
}
.cat-item.active {
background: rgba(59,130,246,0.12);
border-color: rgba(59,130,246,0.35);
color: #fff;
}
.cat-item.active .cat-ico,
.cat-item.active .cat-count {
color: #3B82F6;
}
.cat-panel .cat-cta {
width: 100%;
margin-top: 22px;
padding: 13px;
border-radius: 12px;
background: transparent;
border: 1px solid rgba(59,130,246,0.4);
color: #3B82F6;
font-weight: 600;
font-size: 13px;
letter-spacing: .4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background .3s;
}
.cat-panel .cat-cta:hover {
background: rgba(59,130,246,0.1);
}
.cat-panel .cat-cta svg {
width: 15px;
height: 15px;
}
/* grid de proyectos */
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.projects-empty {
grid-column: 1 / -1;
padding: 40px;
text-align: center;
color: #94A3B8;
font-size: 15px;
border: 1px dashed rgba(110,143,191,0.25);
border-radius: 18px;
}
.project-card {
display: flex;
flex-direction: column;
border-radius: 20px;
overflow: hidden;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(110,143,191,0.14);
transition: transform .3s, box-shadow .3s, border-color .3s;
}
.project-card:hover {
transform: translateY(-8px);
border-color: rgba(59,130,246,0.4);
box-shadow: 0 14px 40px rgba(59,130,246,0.18);
}
/* visual del proyecto (placeholder con patrón; reemplazable por ![]()
) */
.project-visual {
position: relative;
height: 180px;
background:
radial-gradient(circle at 30% 30%, rgba(59,130,246,0.35), transparent 60%),
linear-gradient(135deg, #0a1330, #0e1c44);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.project-visual::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
linear-gradient(rgba(59,130,246,0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.12) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
}
.project-visual .glyph {
position: relative;
color: rgba(110,143,191,0.55);
}
.project-visual .glyph svg {
width: 56px;
height: 56px;
}
/* si el usuario pone una imagen real */
.project-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.project-tag {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
padding: 6px 13px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: .6px;
color: #cfe0ff;
background: rgba(5,8,22,0.7);
border: 1px solid rgba(59,130,246,0.4);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.project-body {
padding: 22px 22px 16px;
flex: 1;
}
.project-body h3 {
font-family: 'Exo 2', sans-serif;
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.project-body p {
color: #94A3B8;
font-size: 14px;
line-height: 1.7;
}
.project-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 22px;
border-top: 1px solid rgba(110,143,191,0.12);
}
.project-foot .foot-cat {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
color: #6E8FBF;
}
.project-foot .foot-cat svg {
width: 15px;
height: 15px;
}
/* =========================================================
BANNER CTA (compartido roadmap / proyectos)
========================================================= */
.cta-banner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 30px;
margin-top: 55px;
padding: 34px 40px;
border-radius: 24px;
background:
radial-gradient(circle at 0% 50%, rgba(59,130,246,0.14), transparent 55%),
rgba(255,255,255,0.03);
border: 1px solid rgba(59,130,246,0.25);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.cta-banner .cta-ico {
width: 64px;
height: 64px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
color: #3B82F6;
background: rgba(59,130,246,0.1);
border: 1px solid rgba(59,130,246,0.3);
}
.cta-banner .cta-ico svg {
width: 32px;
height: 32px;
}
.cta-banner .cta-copy strong {
display: block;
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: 800;
color: #3B82F6;
letter-spacing: .3px;
margin-bottom: 6px;
}
.cta-banner .cta-copy span {
color: #cbd5e1;
font-size: 15px;
line-height: 1.6;
}
/* =========================================================
ROADMAP (rediseño · timeline horizontal)
========================================================= */
.roadmap-head {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: start;
margin-bottom: 70px;
}
.timeline {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
/* línea horizontal que une los nodos */
.timeline::before {
content: "";
position: absolute;
top: 47px;
left: 8%;
right: 4%;
height: 2px;
background: linear-gradient(90deg,
rgba(59,130,246,0.15),
rgba(59,130,246,0.5) 20%,
rgba(59,130,246,0.5) 85%,
rgba(59,130,246,0.9));
}
.tl-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* nodo circular con icono */
.tl-node {
position: relative;
z-index: 1;
width: 94px;
height: 94px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #3B82F6;
background: radial-gradient(circle, rgba(59,130,246,0.18), rgba(5,8,22,0.9) 70%);
border: 1px solid rgba(59,130,246,0.5);
box-shadow: 0 0 25px rgba(59,130,246,0.25), inset 0 0 20px rgba(59,130,246,0.12);
}
.tl-node::before {
content: "";
position: absolute;
top: -8px; left: -8px; right: -8px; bottom: -8px;
border-radius: 50%;
border: 1px dashed rgba(59,130,246,0.35);
}
.tl-node svg {
width: 38px;
height: 38px;
}
.tl-year {
font-family: 'Exo 2', sans-serif;
font-size: 30px;
font-weight: 800;
color: #3B82F6;
margin-top: 22px;
line-height: 1;
}
.tl-title {
font-family: 'Exo 2', sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
margin-top: 8px;
margin-bottom: 22px;
}
/* tarjeta de la etapa */
.stage-card {
width: 100%;
text-align: left;
padding: 22px 20px;
border-radius: 18px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(110,143,191,0.14);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
display: flex;
flex-direction: column;
flex: 1;
}
.stage-card .stage-lead {
font-family: 'Exo 2', sans-serif;
font-size: 15px;
font-weight: 700;
color: #6E8FBF;
line-height: 1.45;
margin-bottom: 16px;
}
.stage-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.stage-card li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13.5px;
line-height: 1.5;
color: #cbd5e1;
}
.stage-card li svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
margin-top: 2px;
color: #3B82F6;
}
.stage-foot {
display: flex;
align-items: center;
gap: 10px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(110,143,191,0.12);
font-size: 11px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
color: #3B82F6;
line-height: 1.4;
}
.stage-foot svg {
width: 22px;
height: 22px;
flex: 0 0 auto;
}
/* =========================================================
TARJETAS genéricas (servicios / about)
========================================================= */
.service-card,
.stat-card {
padding: 32px;
border-radius: 24px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(110,143,191,0.12);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
transition: transform .3s, box-shadow .3s;
}
.service-card:hover,
.stat-card:hover {
transform: translateY(-8px);
box-shadow: 0 0 25px rgba(59,130,246,0.2);
}
.service-icon {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
margin-bottom: 22px;
color: #3B82F6;
background: rgba(59,130,246,0.12);
border: 1px solid rgba(59,130,246,0.25);
}
.service-icon svg {
width: 26px;
height: 26px;
}
.service-card h3 {
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.service-card p {
color: #94A3B8;
font-size: 15px;
line-height: 1.7;
margin-bottom: 18px;
}
/* tarjeta de estadística (about) */
.stat-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.stat-number {
font-family: 'Exo 2', sans-serif;
font-size: 30px;
font-weight: 800;
color: #3B82F6;
}
.stat-label {
color: #94A3B8;
font-size: 14px;
}
/* =========================================================
CONTACTO
========================================================= */
.contact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.contact-left p {
margin-bottom: 14px;
color: #94A3B8;
}
.contact-left a {
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(110,143,191,0.35);
transition: color .3s, border-color .3s;
}
.contact-left a:hover {
color: #3B82F6;
border-color: #3B82F6;
}
.contact-left h2 {
margin-bottom: 24px;
}
/* formularios (design system: label arriba) */
.field {
margin-bottom: 18px;
}
.field label {
display: block;
font-size: 12px;
letter-spacing: .5px;
text-transform: uppercase;
color: #6E8FBF;
margin-bottom: 8px;
}
input,
textarea {
width: 100%;
padding: 16px;
border-radius: 12px;
border: 1px solid rgba(110,143,191,0.2);
background: rgba(255,255,255,0.03);
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 15px;
outline: none;
transition: border-color .3s, box-shadow .3s;
}
input::placeholder,
textarea::placeholder {
color: #64748b;
}
input:focus,
textarea:focus {
border: 1px solid rgba(59,130,246,0.5);
box-shadow: 0 0 20px rgba(59,130,246,0.15);
}
textarea {
min-height: 140px;
resize: vertical;
}
#contact-form .btn-primary {
width: 100%;
margin-top: 6px;
}
.form-status {
min-height: 20px;
margin-top: 14px;
font-size: 14px;
color: #6FFCFF;
}
/* =========================================================
FOOTER
========================================================= */
.footer {
padding: 60px;
text-align: center;
border-top: 1px solid rgba(110,143,191,0.1);
}
.footer img {
width: 110px;
margin-bottom: 15px;
}
.footer p {
color: #94A3B8;
}
.footer-links {
display: flex;
justify-content: center;
gap: 28px;
margin: 22px 0;
}
.footer-links a {
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color .3s;
}
.footer-links a:hover {
color: #3B82F6;
}
.footer-copy {
font-size: 13px;
color: #5b6b85;
margin-top: 10px;
}
/* =========================================================
NUESTRO PROCESO
========================================================= */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.process-step {
position: relative;
padding: 30px 26px;
border-radius: 20px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(110,143,191,0.12);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
transition: transform .3s, border-color .3s;
}
.process-step:hover {
transform: translateY(-6px);
border-color: rgba(59,130,246,0.4);
}
.process-step .step-num {
width: 46px;
height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Exo 2', sans-serif;
font-weight: 800;
font-size: 18px;
color: #3B82F6;
background: rgba(59,130,246,0.12);
border: 1px solid rgba(59,130,246,0.3);
margin-bottom: 18px;
}
.process-step h3 {
font-family: 'Exo 2', sans-serif;
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.process-step p {
color: #94A3B8;
font-size: 14px;
line-height: 1.65;
}
/* =========================================================
GALERÍA DE PROYECTOS
========================================================= */
.gallery-block {
margin-top: 64px;
}
.gallery-block .gallery-title {
font-family: 'Exo 2', sans-serif;
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
}
.gallery-block .gallery-sub {
color: #94A3B8;
font-size: 15px;
margin-bottom: 28px;
max-width: 640px;
line-height: 1.7;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 230px;
grid-auto-flow: row dense;
gap: 16px;
}
.gallery-item {
position: relative;
min-height: 230px;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(110,143,191,0.14);
background:
radial-gradient(circle at 30% 25%, rgba(59,130,246,0.25), transparent 60%),
linear-gradient(135deg, #0b1430, #0a0f24);
cursor: pointer;
}
/* celda destacada (2x2) — encaja perfecto en la rejilla de 3 columnas */
.gallery-item.feat { grid-column: span 2; grid-row: span 2; }
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
/* cuando la celda ya tiene foto, se oculta el marcador "Tu foto aquí" */
.gallery-item:has(img) .ph { display: none; }
.gallery-item:hover img { transform: scale(1.07); }
/* marcador cuando aún no hay foto */
.gallery-item .ph {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: rgba(110,143,191,0.65);
text-align: center;
padding: 16px;
}
.gallery-item .ph svg { width: 38px; height: 38px; }
.gallery-item .ph span { font-size: 12px; letter-spacing: .4px; }
.gallery-overlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px;
background: linear-gradient(to top, rgba(5,8,22,0.88), transparent 55%);
opacity: 0;
transition: opacity .3s ease;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay strong { font-size: 15px; font-family: 'Exo 2', sans-serif; }
.gallery-overlay span { font-size: 12px; color: #6E8FBF; margin-top: 2px; }
/* =========================================================
WHATSAPP FLOTANTE
========================================================= */
.wsp-float {
position: fixed;
left: 26px;
bottom: 26px;
z-index: 1200;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.wsp-btn {
position: relative;
width: 66px;
height: 66px;
border-radius: 50%;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #25D366, #0e8a6e);
box-shadow: 0 10px 26px rgba(37,211,102,0.45);
animation: wspPulse 2.4s ease-out infinite;
transition: transform .25s ease;
}
.wsp-btn:hover { transform: scale(1.08); }
.wsp-btn svg { width: 36px; height: 36px; fill: #fff; }
.wsp-label {
background: rgba(5,8,22,0.92);
border: 1px solid rgba(37,211,102,0.5);
color: #fff;
padding: 11px 16px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
@keyframes wspPulse {
0% { box-shadow: 0 10px 26px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.5); }
70% { box-shadow: 0 10px 26px rgba(37,211,102,0.45), 0 0 0 20px rgba(37,211,102,0); }
100% { box-shadow: 0 10px 26px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0); }
}
/* =========================================================
RESPONSIVE
========================================================= */
/* ---- Tablet / desktop chico ---- */
@media (max-width: 1200px) {
.navbar {
padding: 16px 32px;
}
nav.nav-desktop {
display: none;
}
.hero,
.about,
.contact {
grid-template-columns: 1fr;
}
.hero-right {
justify-content: center;
margin-top: 40px;
min-height: auto;
}
.service-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 210px;
}
/* en 2 columnas la destacada ocupa una fila completa (2x1) */
.gallery-item.feat { grid-column: span 2; grid-row: span 1; }
.section-head,
.roadmap-head {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 48px;
}
.stats-row {
grid-template-columns: repeat(2, 1fr);
}
/* proyectos: categorías arriba, grid abajo */
.projects-layout {
grid-template-columns: 1fr;
}
.cat-panel {
position: static;
}
.cat-list {
flex-direction: row;
flex-wrap: wrap;
}
.cat-item {
flex: 0 0 auto;
}
.cat-item .cat-name {
flex: 0 0 auto;
}
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
/* roadmap: pasa a vertical */
.timeline {
grid-template-columns: 1fr;
gap: 30px;
}
.timeline::before {
top: 0;
bottom: 0;
left: 46px;
right: auto;
width: 2px;
height: auto;
background: linear-gradient(180deg,
rgba(59,130,246,0.15),
rgba(59,130,246,0.5) 12%,
rgba(59,130,246,0.5) 88%,
rgba(59,130,246,0.15));
}
.tl-step {
display: grid;
grid-template-columns: 94px 1fr;
grid-template-areas:
"node head"
"card card";
text-align: left;
column-gap: 22px;
align-items: center;
}
.tl-node { grid-area: node; }
.tl-year { grid-area: head; margin-top: 0; }
.tl-title { grid-column: 2; margin: 4px 0 0; }
.stage-card {
grid-area: card;
margin-top: 18px;
}
/* banners CTA: apilados */
.cta-banner {
grid-template-columns: auto 1fr;
row-gap: 20px;
}
.cta-banner .btn-primary,
.cta-banner .btn-secondary {
grid-column: 1 / -1;
justify-self: start;
}
.light-rays { width: 600px; height: 600px; }
.core-circle { width: 460px; height: 460px; }
.core-circle::before { width: 370px; height: 370px; }
.core-circle::after { width: 540px; height: 540px; }
}
/* ---- Móvil ---- */
@media (max-width: 768px) {
section {
padding: 64px 20px;
}
section h2 {
font-size: 32px;
}
.hero {
width: 100%;
padding: 110px 20px 30px;
}
.hero-left h1 {
font-size: 2.3rem;
line-height: 1.05;
}
.hero-buttons {
flex-direction: column;
}
.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
width: 100%;
}
.tech-icons {
flex-wrap: wrap;
gap: 14px;
}
/* círculo hero más chico · sin profundidad 3D en móvil */
.hero-right { perspective: none; }
.core-circle { width: 320px; height: 320px; transform: none !important; }
.core-circle::before { width: 260px; height: 260px; }
.core-circle::after { width: 380px; height: 380px; }
.core-logo { width: 130px; height: 130px; transform: none; }
.core-logo img { width: 100px; }
.orbit {
min-width: 80px;
height: 40px;
font-size: 12px;
padding: 0 12px;
}
.orbit-top { transform: translateX(-50%); }
.orbit-bottom { transform: translateX(-50%); }
.orbit-left { left: 0; transform: translateY(-50%); }
.orbit-right { right: 0; transform: translateY(-50%); }
.light-rays { width: 420px; height: 420px; }
.particle { display: none; }
/* servicios y proyectos: 1 columna */
.service-grid,
.projects-grid,
.process-grid {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 150px;
}
.gallery-item { min-height: 150px; }
.gallery-item.feat {
grid-row: span 1;
grid-column: span 2;
}
.about-right {
grid-template-columns: 1fr 1fr;
}
/* stats: 1 columna ancha */
.stats-row {
grid-template-columns: 1fr;
}
/* roadmap vertical compacto */
.timeline::before {
left: 37px;
}
.tl-step {
grid-template-columns: 74px 1fr;
column-gap: 16px;
}
.tl-node {
width: 74px;
height: 74px;
}
.tl-node svg {
width: 30px;
height: 30px;
}
.tl-year {
font-size: 24px;
}
/* banner CTA apilado del todo */
.cta-banner {
grid-template-columns: 1fr;
text-align: center;
padding: 28px 22px;
}
.cta-banner .cta-ico {
margin: 0 auto;
}
.cta-banner .btn-primary,
.cta-banner .btn-secondary {
justify-self: stretch;
width: 100%;
}
.footer {
padding: 48px 20px;
}
.footer-links {
flex-wrap: wrap;
gap: 18px;
}
/* WhatsApp: solo el círculo en móvil */
.wsp-float { left: 18px; bottom: 18px; }
.wsp-label { display: none; }
.wsp-btn { width: 58px; height: 58px; }
.wsp-btn svg { width: 32px; height: 32px; }
}
/* ---- Móvil pequeño ---- */
@media (max-width: 460px) {
.navbar {
padding: 14px 18px;
}
.logo img {
height: 38px;
}
.about-right {
grid-template-columns: 1fr;
}
.section-head .head-title {
font-size: 1.7rem;
}
.tl-node {
width: 64px;
height: 64px;
}
.tl-node svg {
width: 26px;
height: 26px;
}
.timeline::before {
left: 32px;
}
.tl-step {
grid-template-columns: 64px 1fr;
column-gap: 14px;
}
}
/* Estilos de Equipo y Testimonios reescritos en enhance.css.
Se eliminó el bloque base previo (.team-grid/.member/.quote y el override
de body a #020617) para evitar conflictos de especificidad. */
/* =========================================================
UPGRADES · Visual & Tech improvements
========================================================= */
/* ── Aurora ambiental cian inferior ── */
body::after {
content: "";
position: fixed;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(111,252,255,0.06), transparent 65%);
bottom: -200px;
left: -150px;
z-index: -1;
pointer-events: none;
animation: auroraShift 18s ease-in-out infinite alternate;
}
@keyframes auroraShift {
0% { transform: translate(0,0) scale(1); opacity: .6; }
50% { transform: translate(80px,-60px) scale(1.15); opacity: 1; }
100% { transform: translate(-40px,40px) scale(.9); opacity: .7; }
}
/* scanlines eliminadas */
/* ── Navbar links: subrayado neon animado ── */
nav a {
position: relative;
overflow: hidden;
}
nav a::before {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1.5px;
background: linear-gradient(90deg, #3B82F6, #6FFCFF);
border-radius: 2px;
transition: width .35s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 8px rgba(111,252,255,.5);
}
nav a:hover::before,
nav a.is-active::before { width: 100%; }
nav a.is-active { color: #6FFCFF; }
/* ── Service cards: esquinas bracket + shimmer ── */
.service-card {
position: relative;
overflow: hidden;
}
.service-card::before,
.service-card::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border-color: rgba(111,252,255,0.4);
border-style: solid;
opacity: 0;
transition: opacity .35s ease;
}
.service-card::before {
top: 12px; right: 12px;
border-width: 1.5px 1.5px 0 0;
border-radius: 0 4px 0 0;
}
.service-card::after {
bottom: 12px; left: 12px;
border-width: 0 0 1.5px 1.5px;
border-radius: 0 0 0 4px;
}
.service-card:hover::before,
.service-card:hover::after { opacity: 1; }
.service-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(111,252,255,0.04) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .6s ease;
pointer-events: none;
}
.service-card:hover .service-shimmer { transform: translateX(100%); }
.service-card-num {
position: absolute;
top: 16px; right: 18px;
font-family: 'Exo 2', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
color: rgba(111,252,255,0.25);
user-select: none;
}
/* ── Hero: líneas de código flotantes ── */
.hero-code-lines {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.hero-code-line {
position: absolute;
left: 0;
font-family: 'JetBrains Mono','Fira Code','Courier New',monospace;
font-size: 11px;
white-space: nowrap;
color: rgba(59,130,246,0.12);
animation: codeSlide linear infinite;
user-select: none;
}
.hero-code-line:nth-child(1) { top: 8%; animation-duration: 24s; animation-delay: 0s; color: rgba(111,252,255,0.09); }
.hero-code-line:nth-child(2) { top: 22%; animation-duration: 30s; animation-delay: -8s; }
.hero-code-line:nth-child(3) { top: 38%; animation-duration: 20s; animation-delay: -4s; color: rgba(111,252,255,0.07); }
.hero-code-line:nth-child(4) { top: 55%; animation-duration: 36s; animation-delay: -14s; }
.hero-code-line:nth-child(5) { top: 72%; animation-duration: 22s; animation-delay: -6s; color: rgba(111,252,255,0.1); }
.hero-code-line:nth-child(6) { top: 88%; animation-duration: 28s; animation-delay: -10s; }
@keyframes codeSlide {
from { transform: translateX(-120%); }
to { transform: translateX(220vw); }
}
/* ── About: terminal ── */
.about-terminal {
background: rgba(5,8,22,0.95);
border: 1px solid rgba(111,252,255,0.2);
border-radius: 14px;
padding: 20px 24px 24px;
font-family: 'JetBrains Mono','Fira Code','Courier New',monospace;
font-size: 13px;
line-height: 1.8;
color: #64D4A8;
box-shadow: 0 0 0 1px rgba(111,252,255,0.06), 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
margin-top: 28px;
position: relative;
overflow: hidden;
}
.about-terminal::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 36px;
background: linear-gradient(180deg, rgba(59,130,246,0.08), transparent);
border-bottom: 1px solid rgba(111,252,255,0.1);
}
.terminal-bar { display: flex; gap: 7px; margin-bottom: 18px; position: relative; }
.terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal-dot.r { background: #FF5F57; box-shadow: 0 0 6px rgba(255,95,87,0.6); }
.terminal-dot.y { background: #FFBD2E; box-shadow: 0 0 6px rgba(255,189,46,0.6); }
.terminal-dot.g { background: #28C840; box-shadow: 0 0 6px rgba(40,200,64,0.6); }
.terminal-line { color: #94A3B8; }
.terminal-line .prompt { color: #6FFCFF; margin-right: 8px; }
.terminal-line .val { color: #E2E8F0; }
.terminal-line .comment { color: rgba(148,163,184,0.4); font-size: 11px; }
.terminal-cursor {
display: inline-block;
width: 7px; height: 14px;
background: #6FFCFF;
margin-left: 3px;
vertical-align: middle;
animation: termBlink .9s step-end infinite;
}
@keyframes termBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ── Stat cards: gradiente + línea inferior ── */
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
content: "";
position: absolute;
bottom: 0; left: 20%; right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(59,130,246,0.5), transparent);
}
.stat-number {
background: linear-gradient(180deg, #ffffff 20%, #9FC2FF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(59,130,246,0.4));
}
/* ── Price cards: scan sweep ── */
.price-card { overflow: hidden; }
.price-card::before {
content: "";
position: absolute;
top: -100%; left: 0; right: 0;
height: 50%;
background: linear-gradient(180deg,transparent,rgba(59,130,246,0.04) 40%,rgba(111,252,255,0.06) 50%,rgba(59,130,246,0.04) 60%,transparent);
animation: priceScan 6s linear infinite;
pointer-events: none;
}
.price-card.featured::before {
background: linear-gradient(180deg,transparent,rgba(111,252,255,0.05) 40%,rgba(111,252,255,0.1) 50%,rgba(111,252,255,0.05) 60%,transparent);
}
@keyframes priceScan {
0% { top: -100%; }
100% { top: 200%; }
}
/* ── Footer ampliado ── */
.footer { position: relative; overflow: hidden; }
.footer::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 600px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(59,130,246,0.4), rgba(111,252,255,0.4), transparent);
}
.footer::after {
content: "";
position: absolute;
top: -80px; left: 50%;
transform: translateX(-50%);
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(59,130,246,0.06), transparent 65%);
pointer-events: none;
}
.footer-social {
display: flex;
justify-content: center;
gap: 14px;
margin: 22px 0 8px;
}
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 10px;
border: 1px solid rgba(120,160,255,0.15);
background: rgba(15,23,42,0.7);
color: #6E8FBF;
text-decoration: none;
transition: border-color .25s, color .25s, box-shadow .25s, transform .25s;
}
.footer-social a:hover {
border-color: rgba(111,252,255,0.4);
color: #6FFCFF;
box-shadow: 0 0 18px rgba(111,252,255,0.15);
transform: translateY(-3px);
}
.footer-social svg {
width: 17px; height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.footer-legal {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 18px;
}
.footer-legal a {
color: #4A6285;
font-size: 12.5px;
text-decoration: none;
transition: color .2s;
}
.footer-legal a:hover { color: #94A3B8; }
.footer-legal-sep { width: 3px; height: 3px; border-radius: 50%; background: #2A3A55; }
.footer-made {
font-size: 12px;
color: #2A3A55;
margin-top: 12px;
letter-spacing: .04em;
}
.footer-made span { color: #3B82F6; }
/* ── Contact info items con iconos ── */
.contact::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(111,252,255,0.04), transparent 60%);
pointer-events: none;
}
.contact { position: relative; }
.contact-info-extra {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
}
.contact-info-item {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 16px;
border-radius: 12px;
background: rgba(15,23,42,0.6);
border: 1px solid rgba(120,160,255,0.1);
transition: border-color .25s, box-shadow .25s;
text-decoration: none;
color: #94A3B8;
font-size: 14px;
}
.contact-info-item:hover {
border-color: rgba(111,252,255,0.25);
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
color: #CFE0FF;
}
.contact-info-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 8px;
background: rgba(59,130,246,0.1);
border: 1px solid rgba(59,130,246,0.2);
color: #6FFCFF;
flex-shrink: 0;
}
.contact-info-icon svg {
width: 16px; height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ── Step num pulse ring ── */
.step-num { position: relative; }
.step-num::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid rgba(59,130,246,0.2);
animation: stepRing 3s ease-in-out infinite;
}
@keyframes stepRing {
0%, 100% { transform: scale(1); opacity: .5; }
50% { transform: scale(1.15); opacity: 1; }
}
/* ── FAQ: shadow cuando está abierto ── */
.faq-item[open] {
box-shadow: 0 0 0 1px rgba(111,252,255,0.15), 0 16px 40px rgba(0,0,0,0.3);
}
/* ── Hero chips: punto de estado ── */
.hero-chip::before {
content: "";
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: #6FFCFF;
box-shadow: 0 0 6px #6FFCFF;
margin-right: 4px;
animation: zqPulse 2.4s ease-in-out infinite;
flex-shrink: 0;
}
/* ── Badge del hero: shimmer ── */
.badge { position: relative; overflow: hidden; }
.badge::after {
content: "";
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(111,252,255,0.12), transparent);
animation: badgeShimmer 4s ease-in-out infinite;
}
@keyframes badgeShimmer {
0% { left: -60%; }
100% { left: 160%; }
}
/* ── Orbit nodes: pulse ring ── */
.orbit { position: relative; }
.orbit::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 999px;
border: 1px solid rgba(111,252,255,0.2);
animation: orbitRing 3s ease-in-out infinite;
}
@keyframes orbitRing {
0%, 100% { opacity: .3; transform: scale(1); }
50% { opacity: .8; transform: scale(1.06); }
}
/* ── Marquee items: pill styling ── */
.marquee-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-radius: 999px;
border: 1px solid rgba(120,160,255,0.1);
background: rgba(15,23,42,0.5);
font-size: 14px;
font-weight: 600;
color: #6E8FBF;
transition: color .25s, border-color .25s;
}
.marquee-item:hover { color: #CFE0FF; border-color: rgba(111,252,255,0.25); }
.marquee-item svg { width: 14px; height: 14px; fill: rgba(59,130,246,0.6); }
/* ── Tcard: comilla decorativa ── */
.tcard { position: relative; }
.tcard::before {
content: "\201C";
position: absolute;
top: 16px; right: 20px;
font-size: 60px;
font-family: Georgia, serif;
color: rgba(59,130,246,0.12);
line-height: 1;
pointer-events: none;
}
/* ── Hero 3D hint: pill ── */
.hero-3d-hint {
background: rgba(5,8,22,0.7);
border: 1px solid rgba(111,252,255,0.15);
border-radius: 999px;
padding: 6px 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ── Eyebrow num: gradiente ── */
.eyebrow .num {
background: linear-gradient(90deg, #3B82F6, #6FFCFF);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
}
/* ── Project cards: glow multi-capa ── */
.project-card:hover {
box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(111,252,255,0.12), 0 0 30px rgba(59,130,246,0.08);
}
/* ── Timeline nodes: ring ── */
.tl-node { position: relative; }
.tl-node::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid rgba(59,130,246,0.15);
animation: nodeRing 4s ease-in-out infinite;
}
@keyframes nodeRing {
0%, 100% { opacity: .3; transform: scale(1); }
50% { opacity: .8; transform: scale(1.08); }
}
/* ── Botón primario: inner highlight ── */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
/* ── Gallery overlay mejorado ── */
.gallery-overlay {
background: linear-gradient(0deg, rgba(5,8,22,0.95) 0%, rgba(5,8,22,0.6) 60%, transparent 100%) !important;
}
.gallery-item::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid transparent;
border-radius: inherit;
transition: border-color .3s;
z-index: 1;
pointer-events: none;
}
.gallery-item:hover::before { border-color: rgba(111,252,255,0.2); }
/* ── Reduced motion overrides ── */
@media (prefers-reduced-motion: reduce) {
body::after,
.hero-code-line,
.badge::after,
.orbit::after,
.tl-node::after,
.step-num::after,
.price-card::before { animation: none !important; }
}
/* ── Mobile overrides ── */
@media (max-width: 768px) {
.hero-code-line { display: none; }
.contact-info-extra { margin-top: 16px; }
}
/* =========================================================
UPGRADES v2 · Nuevas mejoras visuales
========================================================= */
/* ── 1. GRID DE FONDO ANIMADO (puntitos / rejilla tech) ── */
.bg-grid {
background-image:
radial-gradient(circle, rgba(59,130,246,0.18) 1px, transparent 1px);
background-size: 38px 38px;
animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift {
0% { background-position: 0 0; }
100% { background-position: 38px 38px; }
}
/* ── 2. SECCIÓN DIVISORA NEON ── */
.section-divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(59,130,246,0.15) 20%,
rgba(111,252,255,0.35) 50%,
rgba(59,130,246,0.15) 80%,
transparent 100%);
margin: 0;
position: relative;
}
.section-divider::before {
content: "";
position: absolute;
top: -3px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #6FFCFF;
box-shadow: 0 0 14px 3px rgba(111,252,255,0.6);
}
/* ── 3. HERO BADGE: VERSIÓN TECH ── */
.badge {
padding: 7px 16px;
border-radius: 999px;
background: rgba(111,252,255,0.06);
border: 1px solid rgba(111,252,255,0.22);
font-size: 13px;
font-weight: 500;
color: #9FC2FF;
letter-spacing: .3px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ── 4. SERVICE CARDS: ICONO CON GRADIENTE ── */
.service-icon {
background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(111,252,255,0.08));
border: 1px solid rgba(111,252,255,0.18);
box-shadow: 0 0 20px rgba(59,130,246,0.1);
transition: box-shadow .3s, background .3s;
}
.service-card:hover .service-icon {
box-shadow: 0 0 30px rgba(111,252,255,0.2);
background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(111,252,255,0.12));
}
.service-icon svg {
stroke: url(#grad-icon) #6FFCFF;
filter: drop-shadow(0 0 4px rgba(111,252,255,0.4));
}
/* ── 5. PROCESS STEPS: CONECTOR HORIZONTAL ── */
.process-step {
position: relative;
}
.process-step:not(:last-child)::after {
content: "";
position: absolute;
top: 38px;
right: -12px;
width: 24px;
height: 2px;
background: linear-gradient(90deg, rgba(59,130,246,0.4), rgba(111,252,255,0.2));
z-index: 1;
}
/* ── 6. PRICING: CARD DESTACADA MÁS VISIBLE ── */
.price-card.featured {
box-shadow:
0 0 0 1px rgba(111,252,255,0.25),
0 0 60px rgba(59,130,246,0.15),
0 30px 60px rgba(0,0,0,0.4);
transform: translateY(-6px);
}
.price-card.featured:hover {
transform: translateY(-10px);
box-shadow:
0 0 0 1px rgba(111,252,255,0.4),
0 0 80px rgba(59,130,246,0.22),
0 40px 70px rgba(0,0,0,0.45);
}
.price-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #050816;
background: linear-gradient(90deg, #3B82F6, #6FFCFF);
padding: 5px 14px;
border-radius: 999px;
margin-bottom: 16px;
box-shadow: 0 4px 16px rgba(59,130,246,0.4);
}
/* ── 7. TESTIMONIOS: ESTRELLAS ── */
.tcard-stars {
display: flex;
gap: 3px;
margin-bottom: 14px;
color: #FACC15;
}
.tcard-stars svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* ── 8. FAQ: CHEVRON ANIMADO ── */
.faq-item summary {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron {
flex-shrink: 0;
width: 20px;
height: 20px;
color: #3B82F6;
transition: transform .3s ease;
}
.faq-item[open] .faq-chevron {
transform: rotate(180deg);
color: #6FFCFF;
}
/* ── 9. WHATSAPP FLOAT: PULSE ── */
.wsp-btn {
position: relative;
}
.wsp-btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(37,211,102,0.3);
animation: wspPing 2.5s ease-out infinite;
pointer-events: none;
}
@keyframes wspPing {
0% { transform: scale(1); opacity: .8; }
80% { transform: scale(1.6); opacity: 0; }
100% { transform: scale(1.6); opacity: 0; }
}
/* ── 10. HERO METRICS: SEPARADOR MÁS VISIBLE ── */
.hm-sep {
background: linear-gradient(180deg, transparent, rgba(111,252,255,0.3), transparent);
}
/* ── 11. ABOUT STAT CARDS: ÍCONO DECO ── */
.stat-card {
position: relative;
}
.stat-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: radial-gradient(circle at top right, rgba(59,130,246,0.12), transparent 65%);
border-radius: 0 24px 0 0;
pointer-events: none;
}
/* ── 12. NAVBAR: STICKY CON BLUR MEJORADO ── */
.navbar {
transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s;
}
/* ── 13. SECTION EYEBROW: DOT ANIMADO ── */
.eyebrow .dot {
animation: zqPulse 2.4s ease-in-out infinite;
}
/* ── 14. CTA BANNER: BORDE NEON ANIMADO ── */
.cta-banner {
position: relative;
overflow: hidden;
}
.cta-banner::after {
content: "";
position: absolute;
inset: 0;
border-radius: 24px;
background: linear-gradient(105deg, transparent 30%, rgba(111,252,255,0.03) 50%, transparent 70%);
animation: ctaSweep 5s ease-in-out infinite;
pointer-events: none;
}
@keyframes ctaSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
/* ── 15. TCARD (testimonios): diseño mejorado ── */
.tcard {
transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
}
.tcard:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(111,252,255,0.12);
border-color: rgba(111,252,255,0.15);
}
/* ── 16. PROJECT VISUAL: GRADIENTE DE COLOR POR CATEGORÍA ── */
.project-card[data-cat="ia"] .project-visual {
background: radial-gradient(circle at 30% 30%, rgba(139,92,246,0.35), transparent 60%),
linear-gradient(135deg, #0d0a30, #0a0f24);
}
.project-card[data-cat="cloud"] .project-visual {
background: radial-gradient(circle at 30% 30%, rgba(111,252,255,0.2), transparent 60%),
linear-gradient(135deg, #0a1a30, #0a0f24);
}
.project-card[data-cat="auto"] .project-visual {
background: radial-gradient(circle at 30% 30%, rgba(52,211,153,0.25), transparent 60%),
linear-gradient(135deg, #0a2018, #0a0f24);
}
.project-card[data-cat="apps"] .project-visual {
background: radial-gradient(circle at 30% 30%, rgba(251,146,60,0.2), transparent 60%),
linear-gradient(135deg, #1a100a, #0a0f24);
}
/* ── 17. READ PROGRESS BAR ── */
#readProgress {
background: linear-gradient(90deg, #3B82F6, #6FFCFF);
box-shadow: 0 0 8px rgba(111,252,255,0.5);
}
/* ── 18. TOTOP BUTTON ── */
#toTop {
background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(111,252,255,0.1));
border: 1px solid rgba(111,252,255,0.25);
box-shadow: 0 0 20px rgba(59,130,246,0.15);
transition: opacity .3s, transform .3s, box-shadow .3s;
}
#toTop:hover {
box-shadow: 0 0 30px rgba(111,252,255,0.3);
border-color: rgba(111,252,255,0.45);
}
/* ── REDUCED MOTION para nuevas animaciones ── */
@media (prefers-reduced-motion: reduce) {
.bg-grid,
.process-step::after,
.cta-banner::after,
.wsp-btn::before,
.eyebrow .dot { animation: none !important; }
}
/* ── MOBILE para nuevas clases ── */
@media (max-width: 768px) {
.process-step::after { display: none; }
.section-divider { margin: 0 20px; }
}
/* ── PROCESO v2: ícono pequeño + número sutil + step-tags ── */
.process-step-icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(111,252,255,0.08));
border: 1px solid rgba(111,252,255,0.18);
color: #6FFCFF;
margin-bottom: 16px;
box-shadow: 0 0 18px rgba(59,130,246,0.12);
transition: box-shadow .3s, background .3s;
flex-shrink: 0;
}
.process-step-icon svg {
width: 22px;
height: 22px;
stroke: #6FFCFF;
fill: none;
filter: drop-shadow(0 0 4px rgba(111,252,255,0.35));
}
.process-step:hover .process-step-icon {
box-shadow: 0 0 28px rgba(111,252,255,0.25);
background: linear-gradient(135deg, rgba(59,130,246,0.26), rgba(111,252,255,0.14));
}
/* número sutil encima del título */
.process-step .step-num {
width: auto !important;
height: auto !important;
border-radius: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .14em !important;
color: rgba(111,252,255,0.35) !important;
margin-bottom: 6px !important;
display: block !important;
font-family: 'Exo 2', sans-serif !important;
}
/* tags como pills horizontales SIN bullets */
.step-tags {
list-style: none !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin: 14px 0 0 0 !important;
padding: 0 !important;
}
.step-tags li {
list-style: none !important;
font-size: 11px;
font-weight: 600;
letter-spacing: .05em;
color: #6E8FBF;
padding: 4px 10px;
border-radius: 999px;
background: rgba(59,130,246,0.07);
border: 1px solid rgba(59,130,246,0.18);
white-space: nowrap;
transition: color .25s, border-color .25s;
}
.step-tags li::before { display: none !important; }
.process-step:hover .step-tags li {
border-color: rgba(111,252,255,0.2);
color: #9FC2FF;
}
/* stats glow */
.stats-row--glow .stat-pill {
transition: transform .3s, box-shadow .3s, border-color .3s;
}
.stats-row--glow .stat-pill:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(0,0,0,0.3), 0 0 0 1px rgba(111,252,255,0.12);
border-color: rgba(111,252,255,0.2);
}
.stat-big {
background: linear-gradient(180deg, #fff 10%, #9FC2FF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 10px rgba(59,130,246,0.35));
}
.stat-cap {
font-size: 11px !important;
letter-spacing: .08em !important;
font-weight: 700 !important;
text-transform: uppercase !important;
}
/* gallery rich placeholders */
.gallery-item--rich .gallery-ph-rich {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
transition: transform .5s ease;
}
.gallery-item--rich:hover .gallery-ph-rich { transform: scale(1.04); }
.gallery-ph-rich::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(59,130,246,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.07) 1px, transparent 1px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
pointer-events: none;
}
.gallery-ph-icon {
width: 52px; height: 52px;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(200,220,255,0.7);
position: relative; z-index: 1;
}
.gallery-ph-icon svg { width: 26px; height: 26px; }
.gallery-ph-name {
font-family: 'Exo 2', sans-serif;
font-size: 14px; font-weight: 700;
color: rgba(200,220,255,0.85);
text-align: center; padding: 0 12px;
position: relative; z-index: 1;
}
.gallery-ph-tag {
font-size: 11px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: rgba(111,252,255,0.5);
padding: 3px 10px; border-radius: 999px;
border: 1px solid rgba(111,252,255,0.18);
background: rgba(111,252,255,0.05);
position: relative; z-index: 1;
}
@media (max-width: 768px) {
.process-step-icon { width: 40px; height: 40px; }
.step-tags { display: none; }
}
/* ========================================================================
ORIGEN: animations.css
======================================================================== */
/* ===============================
FADE IN
=============================== */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ===============================
SLIDE UP
=============================== */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===============================
SLIDE LEFT
=============================== */
@keyframes slideLeft {
from {
opacity: 0;
transform: translateX(80px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ===============================
SLIDE RIGHT
=============================== */
@keyframes slideRight {
from {
opacity: 0;
transform: translateX(-80px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ===============================
ROTATE
=============================== */
@keyframes slowRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ===============================
FLOATING
=============================== */
@keyframes floating {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
/* ===============================
GLOW PULSE
=============================== */
@keyframes glowPulse {
0% {
box-shadow:
0 0 20px rgba(59,130,246,0.2),
0 0 50px rgba(59,130,246,0.08);
}
50% {
box-shadow:
0 0 40px rgba(59,130,246,0.35),
0 0 90px rgba(59,130,246,0.18);
}
100% {
box-shadow:
0 0 20px rgba(59,130,246,0.2),
0 0 50px rgba(59,130,246,0.08);
}
}
/* ===============================
SCALE IN
=============================== */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.92);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ===============================
PARTICLE FLOAT
=============================== */
@keyframes particleFloat {
0%, 100% {
transform: translate(0, 0);
opacity: .4;
}
50% {
transform: translate(8px, -22px);
opacity: 1;
}
}
/* ===============================
LOGO FLOAT 3D (centro holográfico)
Mantiene la profundidad translateZ y suma flotación + giro 3D
=============================== */
@keyframes logoFloat3D {
0% { transform: translateZ(75px) translateY(0) rotateY(-12deg) rotateX(4deg); }
50% { transform: translateZ(75px) translateY(-12px) rotateY(12deg) rotateX(-4deg); }
100% { transform: translateZ(75px) translateY(0) rotateY(-12deg) rotateX(4deg); }
}
/* Vaivén 3D suave del conjunto de órbitas (idle) */
@keyframes orbitSwing3D {
0% { transform: rotateY(-9deg) rotateX(5deg); }
50% { transform: rotateY(9deg) rotateX(-3deg); }
100% { transform: rotateY(-9deg) rotateX(5deg); }
}
/* ===============================
DASH FLOW (connection lines)
=============================== */
@keyframes dashFlow {
to {
stroke-dashoffset: -24;
}
}
/* ===============================
CLASSES
=============================== */
.fade-in {
animation: fadeIn 1s ease forwards;
}
.slide-up {
animation: slideUp 1s ease forwards;
}
.slide-left {
animation: slideLeft 1.2s ease forwards;
}
.slide-right {
animation: slideRight 1.2s ease forwards;
}
.scale-in {
animation: scaleIn 1s ease forwards;
}
.floating {
animation: floating 4s ease-in-out infinite;
}
.glow-pulse {
animation: glowPulse 4s ease-in-out infinite;
}
/* ===============================
HERO ANIMATIONS
=============================== */
.hero-left {
animation: slideRight 1s ease;
}
.hero-right {
animation: slideLeft 1.2s ease;
}
.core-circle {
animation: glowPulse 4s ease-in-out infinite;
}
.core-circle::before {
animation: slowRotate 25s linear infinite;
}
.core-circle::after {
animation: slowRotate 40s linear infinite reverse;
}
.core-logo {
animation: logoFloat3D 7s ease-in-out infinite;
}
.orbit {
animation: floating 4s ease-in-out infinite;
}
.light-rays {
animation: slowRotate 70s linear infinite;
}
.particle {
animation: particleFloat 6s ease-in-out infinite;
}
.connections line {
animation: dashFlow 1.6s linear infinite;
}
/* ===============================
SECTION DELAYS
=============================== */
.service-card:nth-child(1) { animation-delay: .1s; }
.service-card:nth-child(2) { animation-delay: .2s; }
.service-card:nth-child(3) { animation-delay: .3s; }
.service-card:nth-child(4) { animation-delay: .4s; }
.service-card:nth-child(5) { animation-delay: .5s; }
.service-card:nth-child(6) { animation-delay: .6s; }
/* ===============================
MÓVIL · animaciones 2D (sin 3D)
=============================== */
@media (max-width: 768px) {
.core-logo { animation: floating 4s ease-in-out infinite; }
}
/* ===============================
REDUCED MOTION
=============================== */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
/* ===============================
MÓVIL · APAGAR CAPAS CSS COSTOSAS
El hero en móvil ya lo anima WebGL (hero3d.js); estas capas
CSS duplicaban el trabajo con las animaciones más caras de
pintar (box-shadow, stroke-dashoffset) y causaban tirones.
Las congelamos en un estado estático que se ve bien.
=============================== */
@media (max-width: 991px) {
.core-circle {
animation: none;
box-shadow:
0 0 30px rgba(59,130,246,0.28),
0 0 70px rgba(59,130,246,0.12);
}
.core-circle::before,
.core-circle::after { animation: none; }
.light-rays { animation: none; }
.particle {
animation: none;
opacity: .5;
}
.connections line { animation: none; }
.orbit { animation: none; }
.glow-pulse {
animation: none;
box-shadow:
0 0 30px rgba(59,130,246,0.28),
0 0 70px rgba(59,130,246,0.12);
}
}
/* ========================================================================
ORIGEN: enhance.css
======================================================================== */
/* =========================================================
ZAQORI · enhance.css (rediseño v9)
- Núcleo 3D del hero (WebGL) + fallback
- Más información en el home (chips + métricas)
- Rediseño de Equipo y Clientes/Testimonios
Paleta heredada: #050816 fondo · #3B82F6 azul · #6FFCFF cian
#94A3B8 texto sec · #6E8FBF azul suave
========================================================= */
/* ---------- HERO · badge con punto vivo ---------- */
.badge {
display: inline-flex;
align-items: center;
gap: 9px;
}
.badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #6FFCFF;
box-shadow: 0 0 10px #6FFCFF;
animation: zqPulse 2.4s ease-in-out infinite;
}
@keyframes zqPulse {
0%, 100% { opacity: .5; transform: scale(.8); }
50% { opacity: 1; transform: scale(1.15); }
}
/* ---------- HERO · chips de especialidad ---------- */
.hero-chips {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
padding: 0;
}
.hero-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
color: #CFE0FF;
background: rgba(59,130,246,0.08);
border: 1px solid rgba(59,130,246,0.22);
transition: transform .25s ease, border-color .25s ease,
background .25s ease, box-shadow .25s ease;
}
.hero-chip svg {
width: 16px;
height: 16px;
stroke: #6FFCFF;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-chip:hover {
transform: translateY(-2px);
border-color: rgba(111,252,255,0.5);
background: rgba(59,130,246,0.14);
box-shadow: 0 8px 22px rgba(59,130,246,0.18);
}
/* ---------- HERO · métricas (cifras del home) ---------- */
.hero-metrics {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 26px;
margin-top: 40px;
}
.hero-metric {
display: flex;
flex-direction: column;
gap: 5px;
}
.hm-num {
font-family: 'Exo 2', sans-serif;
font-weight: 800;
font-size: 30px;
line-height: 1;
background: linear-gradient(180deg, #ffffff, #9FC2FF);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-variant-numeric: tabular-nums;
}
.hm-label {
font-size: 13px;
color: #8FA6C8;
letter-spacing: .2px;
}
.hm-sep {
width: 1px;
height: 34px;
background: linear-gradient(180deg, transparent, rgba(110,143,191,0.45), transparent);
}
/* =========================================================
HERO · contenedor del núcleo 3D
========================================================= */
.hero-3d {
position: relative;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1100px;
}
.hero-3d canvas,
.hero-3d-canvas {
display: block;
width: 100% !important;
height: 100% !important;
cursor: grab;
touch-action: pan-y;
}
.hero-3d-canvas:active { cursor: grabbing; }
.hero-3d-hint {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: #7E97BE;
letter-spacing: .3px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
animation: zqHintIn .8s ease 1.2s forwards, zqHintOut 1s ease 8s forwards;
}
.hero-3d-hint::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #6FFCFF;
box-shadow: 0 0 10px #6FFCFF;
animation: zqPulse 2s ease-in-out infinite;
}
@keyframes zqHintIn { to { opacity: 1; } }
@keyframes zqHintOut { to { opacity: 0; } }
/* Fallback estático: sólo visible si WebGL no carga */
.hero-3d-fallback { display: none; }
.hero-3d.is-fallback .hero-3d-fallback {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
}
.hero-3d.is-fallback .hero-3d-hint { display: none; }
/* =========================================================
EQUIPO
========================================================= */
.team { position: relative; }
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
margin-top: 46px;
}
.member {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px 24px;
border-radius: 22px;
background: linear-gradient(165deg, rgba(18,28,58,0.92), rgba(8,13,30,0.94));
border: 1px solid rgba(110,143,191,0.16);
box-shadow: 0 18px 44px rgba(2,6,20,0.5);
overflow: hidden;
transition: transform .4s cubic-bezier(.2,.7,.2,1),
border-color .4s ease, box-shadow .4s ease;
}
.member::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 82% -10%, rgba(59,130,246,0.2), transparent 60%);
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
}
.member:hover {
transform: translateY(-8px);
border-color: rgba(59,130,246,0.4);
box-shadow: 0 26px 60px rgba(2,6,20,0.6), 0 0 42px rgba(59,130,246,0.12);
}
.member:hover::before { opacity: 1; }
.member-top { position: relative; margin-bottom: 18px; }
.member-ring {
display: block;
width: 84px;
height: 84px;
border-radius: 50%;
padding: 3px;
background: conic-gradient(from 140deg, #3B82F6, #6FFCFF, #3B82F6);
box-shadow: 0 0 26px rgba(59,130,246,0.35);
}
.member-ring img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
background: #0B1226;
display: block;
}
.member-status {
position: absolute;
right: 2px;
bottom: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #34D399;
border: 3px solid #0B1226;
box-shadow: 0 0 10px rgba(52,211,153,0.6);
}
.member h3 {
font-family: 'Exo 2', sans-serif;
font-size: 20px;
margin: 0 0 10px;
}
.member-role {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 600;
letter-spacing: .4px;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
color: #BBD2FF;
background: rgba(59,130,246,0.12);
border: 1px solid rgba(59,130,246,0.26);
}
.member-role::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #6FFCFF;
box-shadow: 0 0 8px #6FFCFF;
}
.role-lead {
color: #FFE3A8;
background: rgba(245,180,80,0.12);
border-color: rgba(245,180,80,0.32);
}
.role-lead::before { background: #F5B450; box-shadow: 0 0 8px #F5B450; }
.role-sec {
color: #A8F4DD;
background: rgba(52,211,153,0.10);
border-color: rgba(52,211,153,0.3);
}
.role-sec::before { background: #34D399; box-shadow: 0 0 8px #34D399; }
.member-bio {
margin: 14px 0 16px;
color: #93A6C6;
font-size: 14px;
line-height: 1.6;
}
.member-foot { margin-top: auto; width: 100%; }
.member-mail {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #7E97BE;
text-decoration: none;
word-break: break-all;
transition: color .25s ease;
}
.member-mail svg {
width: 15px;
height: 15px;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
flex-shrink: 0;
}
.member-mail:hover { color: #6FFCFF; }
/* =========================================================
CLIENTES / TESTIMONIOS
========================================================= */
.testimonials { position: relative; }
.tcard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 22px;
margin-top: 46px;
}
.tcard {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding: 30px 28px;
border-radius: 20px;
background: linear-gradient(165deg, rgba(16,26,54,0.92), rgba(8,13,30,0.94));
border: 1px solid rgba(110,143,191,0.16);
box-shadow: 0 16px 40px rgba(2,6,20,0.45);
overflow: hidden;
transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.tcard::before {
content: "\201C";
position: absolute;
top: 6px;
right: 22px;
font-family: 'Exo 2', sans-serif;
font-size: 84px;
line-height: 1;
color: rgba(59,130,246,0.16);
pointer-events: none;
}
.tcard:hover {
transform: translateY(-6px);
border-color: rgba(59,130,246,0.38);
box-shadow: 0 24px 56px rgba(2,6,20,0.55);
}
.tstars { display: inline-flex; gap: 3px; }
.tstars svg {
width: 17px;
height: 17px;
fill: #FBBF24;
filter: drop-shadow(0 0 6px rgba(251,191,36,0.4));
}
.tcard blockquote {
margin: 0;
font-size: 15.5px;
line-height: 1.7;
color: #D7E2F4;
position: relative;
z-index: 1;
}
.tauthor {
display: flex;
align-items: center;
gap: 14px;
margin-top: auto;
padding-top: 4px;
}
.tavatar {
display: grid;
place-items: center;
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 50%;
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 15px;
color: #031024;
background: linear-gradient(140deg, #6FFCFF, #3B82F6);
box-shadow: 0 0 18px rgba(59,130,246,0.4);
}
.tmeta { display: flex; flex-direction: column; }
.tmeta strong { font-size: 15px; color: #fff; }
.tmeta span { font-size: 12.5px; color: #8298BC; }
/* ---------- Marquee "han confiado en nosotros" ---------- */
.trusted {
margin-top: 54px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
.trusted-label {
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #6E8FBF;
}
.marquee {
position: relative;
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
display: flex;
align-items: center;
gap: 50px;
width: max-content;
animation: zqMarquee 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
display: inline-flex;
align-items: center;
gap: 11px;
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 18px;
color: #6E86B5;
white-space: nowrap;
transition: color .3s ease;
}
.marquee-item:hover { color: #CFE0FF; }
.marquee-item svg {
width: 14px;
height: 14px;
stroke: #3B82F6;
fill: none;
stroke-width: 1.8;
}
@keyframes zqMarquee {
to { transform: translateX(-50%); }
}
/* =========================================================
REVEAL al hacer scroll (sólo si JS está activo)
========================================================= */
.js-reveal .member,
.js-reveal .tcard {
opacity: 0;
transform: translateY(26px);
transition: opacity .7s ease, transform .7s ease;
}
.js-reveal .member.in-view,
.js-reveal .tcard.in-view {
opacity: 1;
transform: none;
}
.js-reveal .team-grid .member:nth-child(2),
.js-reveal .tcard-grid .tcard:nth-child(2) { transition-delay: .08s; }
.js-reveal .team-grid .member:nth-child(3),
.js-reveal .tcard-grid .tcard:nth-child(3) { transition-delay: .16s; }
.js-reveal .team-grid .member:nth-child(4),
.js-reveal .tcard-grid .tcard:nth-child(4) { transition-delay: .24s; }
.js-reveal .tcard-grid .tcard:nth-child(5) { transition-delay: .32s; }
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
.hero-3d { height: 540px; }
.hero-metrics { gap: 22px; }
}
@media (max-width: 768px) {
.hero-3d { height: 410px; perspective: none; }
.hm-num { font-size: 26px; }
.hero-chips { gap: 10px; }
.member { padding: 24px 22px 22px; }
.marquee-item { font-size: 16px; }
.marquee-track { gap: 38px; }
}
@media (max-width: 460px) {
.hero-3d { height: 340px; }
.hero-metrics { gap: 16px; }
.hm-sep { display: none; }
.tcard { padding: 26px 22px; }
}
/* =========================================================
MOVIMIENTO REDUCIDO
========================================================= */
@media (prefers-reduced-motion: reduce) {
.badge-dot,
.hero-3d-hint,
.hero-3d-hint::before,
.marquee-track,
.member-status { animation: none !important; }
.hero-3d-hint { opacity: 1; }
.js-reveal .member,
.js-reveal .tcard { opacity: 1; transform: none; transition: none; }
}
/* =========================================================
V10 · MENÚ MÓVIL, FAQ, VOLVER ARRIBA, PROGRESO
========================================================= */
/* el navbar debe quedar por encima del panel para poder cerrarlo */
.navbar { z-index: 1350; }
/* ---- Botón hamburguesa ---- */
.nav-toggle {
display: none;
width: 46px; height: 46px;
border: 0; background: transparent; cursor: pointer;
position: relative; border-radius: 12px; flex: 0 0 auto;
}
.nav-toggle span {
position: absolute; left: 11px; right: 11px; height: 2px;
background: #EAF2FF; border-radius: 2px;
transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.is-active span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid #6FFCFF; outline-offset: 2px; }
/* ---- Panel móvil ---- */
.mobile-menu {
position: fixed; top: 0; right: 0; z-index: 1300;
width: min(360px, 86vw); height: 100vh; height: 100dvh;
background: linear-gradient(180deg, #0B1226, #070d1c);
border-left: 1px solid rgba(120,160,255,.14);
box-shadow: -30px 0 60px rgba(0,0,0,.5);
padding: 96px 26px 40px;
display: flex; flex-direction: column; gap: 8px;
transform: translateX(105%);
transition: transform .32s cubic-bezier(.4,0,.2,1);
overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-links { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu-links a {
display: block; padding: 14px; border-radius: 12px;
color: #D7E3FA; font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 18px;
text-decoration: none; border: 1px solid transparent;
transition: background .2s, border-color .2s, color .2s;
}
.mobile-menu-links a:hover {
background: rgba(59,130,246,.12); border-color: rgba(120,160,255,.2); color: #fff;
}
.mobile-menu-cta { margin-top: 18px; text-align: center; justify-content: center; }
.mobile-menu-backdrop {
position: fixed; inset: 0; z-index: 1250;
background: rgba(3,8,22,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
opacity: 0; transition: opacity .28s ease;
}
.mobile-menu-backdrop.show { opacity: 1; }
body.menu-open { overflow: hidden; }
/* ---- Preguntas frecuentes ---- */
.faq { position: relative; }
.faq-list { max-width: 860px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
background: linear-gradient(180deg, #0f172a, #0b1226);
border: 1px solid rgba(120,160,255,.12); border-radius: 16px;
overflow: hidden; transition: border-color .25s, background .25s;
}
.faq-item[open] { border-color: rgba(111,252,255,.35); }
.faq-item summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 22px 24px;
font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 18px; color: #EAF2FF;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #fff; }
.faq-ico { position: relative; width: 22px; height: 22px; flex: 0 0 auto; }
.faq-ico::before, .faq-ico::after {
content: ""; position: absolute; left: 50%; top: 50%;
background: #6FFCFF; border-radius: 2px;
transform: translate(-50%, -50%);
transition: transform .3s ease, opacity .3s ease;
}
.faq-ico::before { width: 14px; height: 2px; }
.faq-ico::after { width: 2px; height: 14px; }
.faq-item[open] .faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-body { padding: 0 24px 22px; color: #A7B6D0; line-height: 1.7; font-size: 15.5px; }
.faq-body p { margin: 0; }
/* ---- Barra de progreso de lectura ---- */
.read-progress {
position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1400;
background: linear-gradient(90deg, #3B82F6, #6FFCFF);
box-shadow: 0 0 10px rgba(111,252,255,.5);
transition: width .1s linear;
}
/* ---- Botón volver arriba ---- */
.to-top {
position: fixed; right: 22px; bottom: 24px; z-index: 900;
width: 50px; height: 50px; border-radius: 50%;
border: 1px solid rgba(120,160,255,.25);
background: rgba(15,23,42,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: #CFE0FF; cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
transition: opacity .3s, transform .3s, background .2s, border-color .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: rgba(59,130,246,.25); border-color: #6FFCFF; color: #fff; }
.to-top svg { width: 22px; height: 22px; }
/* =========================================================
V10 · AFINADO RESPONSIVE (móvil)
========================================================= */
@media (max-width: 1200px) {
.nav-toggle { display: block; }
}
@media (max-width: 768px) {
/* el CTA del header se mueve al panel; liberamos espacio */
.nav-cta { display: none; }
/* hero centrado en móvil: lee mejor */
.hero-left { text-align: center; }
.hero-left .badge { display: inline-flex; }
.hero-chips { justify-content: center; }
.hero-metrics { justify-content: center; }
.faq-item summary { font-size: 16.5px; padding: 18px 20px; }
.faq-body { padding: 0 20px 20px; font-size: 15px; }
.to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}
@media (max-width: 460px) {
.mobile-menu { width: min(330px, 92vw); padding: 92px 20px 32px; }
.mobile-menu-links a { font-size: 17px; }
}
/* ---- Respeto a movimiento reducido (añadidos V10) ---- */
@media (prefers-reduced-motion: reduce) {
.mobile-menu, .mobile-menu-backdrop, .to-top, .read-progress,
.faq-ico::before, .faq-ico::after { transition: none !important; }
}
/* =========================================================
V10.1 · PAQUETES Y PRECIOS
========================================================= */
.pricing { position: relative; }
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
max-width: 1140px;
margin: 8px auto 0;
}
.price-card {
position: relative;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #0f172a, #0b1226);
border: 1px solid rgba(120,160,255,.12);
border-radius: 22px;
padding: 34px 28px 30px;
transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.price-card:hover {
transform: translateY(-6px);
border-color: rgba(111,252,255,.3);
box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.price-card.featured {
border-color: rgba(59,130,246,.55);
background:
radial-gradient(120% 80% at 50% 0%, rgba(59,130,246,.16), transparent 60%),
linear-gradient(180deg, #101c36, #0b1226);
box-shadow: 0 0 0 1px rgba(111,252,255,.18), 0 30px 70px rgba(8,20,60,.5);
}
@media (min-width: 901px) {
.price-card.featured { transform: scale(1.04); }
.price-card.featured:hover { transform: scale(1.04) translateY(-8px); }
}
.price-badge {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: linear-gradient(90deg, #3B82F6, #6FFCFF);
color: #061018; font-weight: 700; font-size: 12px; letter-spacing: .04em;
text-transform: uppercase;
padding: 6px 16px; border-radius: 999px; white-space: nowrap;
box-shadow: 0 8px 20px rgba(59,130,246,.4);
}
.price-head { margin-bottom: 18px; }
.price-name {
font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 22px;
color: #fff; margin: 0 0 6px;
}
.price-desc { color: #94A3B8; font-size: 14px; line-height: 1.5; margin: 0; min-height: 42px; }
.price-amount {
display: flex; flex-direction: column; gap: 2px;
padding: 18px 0; margin-bottom: 18px;
border-top: 1px solid rgba(120,160,255,.1);
border-bottom: 1px solid rgba(120,160,255,.1);
}
.price-from { color: #8298BC; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.price-value {
font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 34px; color: #fff;
line-height: 1.1;
}
.price-cur { font-size: 14px; font-weight: 600; color: #6E8FBF; }
.price-custom {
background: linear-gradient(90deg,#6FFCFF,#3B82F6);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.price-note { color: #8298BC; font-size: 12.5px; }
.price-features { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.price-features li {
display: flex; align-items: flex-start; gap: 10px;
color: #C5D2E8; font-size: 14.5px; line-height: 1.45;
}
.price-features .ck { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: #34D399; }
.featured .price-features .ck { color: #6FFCFF; }
.price-cta { width: 100%; justify-content: center; margin-top: auto; }
.pricing-foot {
text-align: center; color: #94A3B8; font-size: 14.5px;
max-width: 640px; margin: 34px auto 0; line-height: 1.6;
}
.pricing-foot a { color: #6FFCFF; text-decoration: none; border-bottom: 1px solid rgba(111,252,255,.35); }
.pricing-foot a:hover { color: #fff; }
@media (max-width: 900px) {
.pricing-grid { grid-template-columns: 1fr; max-width: 460px; }
.price-desc { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.price-card { transition: none !important; }
}
/* =========================================================
V10.2 · TOGGLE PAGO ÚNICO / MENSUAL
========================================================= */
.price-toggle-wrap { text-align: center; margin: 6px 0 32px; }
.price-toggle {
position: relative; display: inline-flex;
background: rgba(15,23,42,.85); border: 1px solid rgba(120,160,255,.18);
border-radius: 999px; padding: 5px;
}
.price-toggle-btn {
position: relative; z-index: 2;
min-width: 132px; text-align: center;
border: 0; background: transparent; cursor: pointer;
padding: 11px 22px; border-radius: 999px;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14.5px;
color: #94A3B8; transition: color .3s; white-space: nowrap;
}
.price-toggle-btn.is-active { color: #061018; }
.price-toggle-btn:focus-visible { outline: 2px solid #6FFCFF; outline-offset: 3px; }
.price-toggle-slider {
position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 5px;
width: calc(50% - 5px);
background: linear-gradient(90deg, #3B82F6, #6FFCFF);
border-radius: 999px;
box-shadow: 0 6px 16px rgba(59,130,246,.4);
transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.pricing.billing-monthly .price-toggle-slider { transform: translateX(100%); }
.price-toggle-hint { color: #8298BC; font-size: 13px; margin: 14px 0 0; }
/* mostrar el precio segun la modalidad elegida */
.pricing.billing-once .price-amount [data-billing="monthly"] { display: none; }
.pricing.billing-monthly .price-amount [data-billing="once"] { display: none; }
@media (max-width: 460px) {
.price-toggle-btn { min-width: 116px; padding: 11px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.price-toggle-slider { transition: none !important; }
}
/* =========================================================
FUSIÓN · ¿POR QUÉ ELEGIRNOS?
(la franja de tecnologías la aporta extras.js / extras.css)
========================================================= */
.why { position: relative; }
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
margin-top: 8px;
}
.why-card {
background: linear-gradient(180deg, #0f172a, #0b1226);
border: 1px solid rgba(120,160,255,.12);
border-radius: 18px;
padding: 28px 24px;
transition: transform .3s ease, border-color .3s ease;
}
.why-card:hover { transform: translateY(-6px); border-color: rgba(111,252,255,.3); }
.why-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: 14px;
background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.25), rgba(111,252,255,.08));
border: 1px solid rgba(111,252,255,.25);
color: #6FFCFF; margin-bottom: 16px;
}
.why-ico svg { width: 26px; height: 26px; }
.why-card h3 { font-family: 'Exo 2', sans-serif; font-size: 18px; color: #fff; margin: 0 0 8px; }
.why-card p { color: #94A3B8; font-size: 14.5px; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .why-card { transition: none !important; } }
/* ========================================================================
ORIGEN: extras.css
======================================================================== */
/* =========================================================
ZAQORI · extras.css
Mejoras adicionales:
1) Cursor personalizado (solo desktop)
2) Toast de notificación
3) Efecto de escritura en el hero
4) Tooltips en chips del hero
5) Indicador de tecnologías flotantes (tech stack strip)
========================================================= */
/* ─── 1. CURSOR PERSONALIZADO — ELIMINADO ─────────────── */
/* ─── 2. TOAST DE NOTIFICACIÓN ────────────────────────── */
#zq-toast {
position: fixed;
bottom: 100px;
right: 28px;
z-index: 3000;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 22px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(15,23,42,.97), rgba(8,13,30,.97));
border: 1px solid rgba(111,252,255,.3);
box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(59,130,246,.12);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
max-width: 340px;
min-width: 240px;
/* animación de entrada / salida */
opacity: 0;
transform: translateY(16px) scale(.96);
transition: opacity .35s ease, transform .35s ease;
pointer-events: none;
}
#zq-toast.show {
opacity: 1;
transform: none;
pointer-events: auto;
}
#zq-toast .toast-ico {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(52,211,153,.12);
border: 1px solid rgba(52,211,153,.3);
color: #34D399;
}
#zq-toast .toast-ico svg { width: 20px; height: 20px; }
#zq-toast .toast-body { flex: 1; }
#zq-toast .toast-title {
font-family: 'Exo 2', sans-serif;
font-weight: 700; font-size: 14px;
color: #fff; margin: 0 0 3px;
}
#zq-toast .toast-msg {
font-size: 13px; color: #94A3B8; margin: 0; line-height: 1.4;
}
#zq-toast .toast-close {
flex-shrink: 0;
background: none; border: none;
color: #6E8FBF; cursor: pointer; padding: 4px;
display: flex; align-items: center;
transition: color .2s;
}
#zq-toast .toast-close:hover { color: #fff; }
#zq-toast .toast-close svg { width: 16px; height: 16px; }
/* Barra de progreso interna del toast */
#zq-toast .toast-bar {
position: absolute;
bottom: 0; left: 0;
height: 3px;
border-radius: 0 0 16px 16px;
background: linear-gradient(90deg, #3B82F6, #6FFCFF);
width: 100%;
transform-origin: left center;
animation: none;
}
#zq-toast.show .toast-bar {
animation: toastBar 4s linear forwards;
}
@keyframes toastBar {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* ─── 3. EFECTO TYPING EN EL HERO ─────────────────────── */
#zq-typing-wrap {
display: inline-block;
position: relative;
}
#zq-typing-wrap::after {
content: '|';
color: #6FFCFF;
margin-left: 2px;
animation: zqBlink .75s step-end infinite;
}
@keyframes zqBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ─── 4. TOOLTIPS EN CHIPS DEL HERO ───────────────────── */
.hero-chip {
position: relative;
}
.hero-chip[data-tip]::before,
.hero-chip[data-tip]::after {
position: absolute;
bottom: calc(100% + 9px);
left: 50%;
pointer-events: none;
opacity: 0;
transition: opacity .22s ease, transform .22s ease;
transform: translateX(-50%) translateY(5px);
white-space: nowrap;
}
.hero-chip[data-tip]::before {
content: attr(data-tip);
background: rgba(5,8,22,.95);
border: 1px solid rgba(111,252,255,.25);
color: #CFE0FF;
font-size: 12px; font-weight: 500;
padding: 6px 12px;
border-radius: 8px;
box-shadow: 0 8px 22px rgba(0,0,0,.4);
z-index: 10;
}
.hero-chip[data-tip]::after {
content: '';
border: 6px solid transparent;
border-top-color: rgba(111,252,255,.25);
bottom: calc(100% + 3px);
z-index: 11;
transform: translateX(-50%) translateY(5px);
}
.hero-chip[data-tip]:hover::before,
.hero-chip[data-tip]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ─── 5. TECH STACK STRIP ──────────────────────────────── */
.tech-strip {
background: linear-gradient(180deg, rgba(15,23,42,.0), rgba(15,23,42,.85));
border-top: 1px solid rgba(120,160,255,.08);
padding: 28px 0;
overflow: hidden;
position: relative;
}
.tech-strip::before,
.tech-strip::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.tech-strip::before {
left: 0;
background: linear-gradient(90deg, #050816, transparent);
}
.tech-strip::after {
right: 0;
background: linear-gradient(-90deg, #050816, transparent);
}
.tech-strip-label {
text-align: center;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #4A6285;
margin-bottom: 18px;
}
.tech-track {
display: flex;
gap: 40px;
width: max-content;
animation: techScroll 28s linear infinite;
}
.tech-track:hover { animation-play-state: paused; }
@keyframes techScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.tech-item {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
border-radius: 999px;
border: 1px solid rgba(120,160,255,.12);
background: rgba(15,23,42,.6);
color: #8FA6C8;
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
transition: border-color .25s, color .25s, background .25s;
}
.tech-item:hover {
border-color: rgba(111,252,255,.3);
color: #CFE0FF;
background: rgba(59,130,246,.08);
}
.tech-item svg {
width: 18px; height: 18px;
fill: currentColor;
opacity: .8;
}
/* ─── REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
#zq-toast,
.tech-track { animation: none !important; transition: none !important; }
.tech-track { overflow-x: auto; flex-wrap: wrap; width: auto; }
#zq-typing-wrap::after { animation: none !important; }
}
/* ─── 5b. TECH STACK AGRUPADO POR CATEGORÍA ───────────── */
.tech-strip-grouped { padding: 34px 0 30px; }
/* sin desvanecidos laterales: el contenido ya no es un marquee */
.tech-strip-grouped::before,
.tech-strip-grouped::after { display: none; }
.tech-groups {
max-width: 1080px;
margin: 0 auto;
padding: 0 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.tech-group {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
justify-content: center;
}
.tech-group-name {
flex: 0 0 132px;
text-align: right;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: inherit;
opacity: .6;
margin: 0;
}
.tech-group-items {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
@media (max-width: 640px) {
.tech-group { flex-direction: column; gap: 10px; }
.tech-group-name { flex: none; text-align: center; }
.tech-group-items { justify-content: center; }
}
/* ========================================================================
ORIGEN: visual-upgrade.css
======================================================================== */
/* =========================================================
ZAQORI · visual-upgrade.css
Mejoras visuales profundas: tipografía, gradientes,
glassmorphism, cards luminosas, animaciones sutiles,
secciones con más carácter y jerarquía visual.
========================================================= */
/* ─── FUENTE DISPLAY ADICIONAL ─────────────────────────── */
/* ─── VARIABLES CSS ─────────────────────────────────────── */
:root {
--blue: #3B82F6;
--cyan: #6FFCFF;
--indigo: #6366F1;
--bg: #050816;
--bg2: #080d1e;
--glass: rgba(15,23,42,0.65);
--border: rgba(110,143,191,0.14);
--border-bright: rgba(111,252,255,0.22);
--text-muted: #94A3B8;
--shadow-blue: 0 0 40px rgba(59,130,246,0.25);
--radius-card: 22px;
}
/* ─── FONDO MEJORADO ───────────────────────────────────── */
.bg-grid {
background-image:
linear-gradient(rgba(59,130,246,0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.055) 1px, transparent 1px);
background-size: 52px 52px;
}
/* Segundo glow ambiente (inferior izquierda) */
body::before {
content: '';
position: fixed;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(99,102,241,0.10), transparent 70%);
bottom: -200px;
left: -150px;
z-index: -1;
pointer-events: none;
}
/* ─── NAVBAR MEJORADA ──────────────────────────────────── */
.navbar {
padding: 14px 70px;
border-bottom: 1px solid rgba(111,252,255,0.07);
background: rgba(5,8,22,0.80);
}
.logo img {
height: 42px;
filter: drop-shadow(0 0 12px rgba(59,130,246,0.5));
}
nav a {
font-size: 14px;
letter-spacing: 0.2px;
font-weight: 500;
}
nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #6FFCFF, transparent);
transform: scaleX(0);
transition: transform 0.3s ease;
}
nav a:hover::after {
transform: scaleX(1);
}
nav a.is-active {
color: #6FFCFF;
}
nav a.is-active::after {
transform: scaleX(1);
}
/* Botón nav mejorado */
.nav-cta {
padding: 10px 22px;
font-size: 14px;
border-radius: 10px;
background: linear-gradient(135deg, #1d4ed8, #3B82F6);
box-shadow: 0 0 20px rgba(59,130,246,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
letter-spacing: 0.2px;
}
/* ─── HERO MEJORADO ─────────────────────────────────────── */
.badge {
background: rgba(99,102,241,0.10);
border-color: rgba(99,102,241,0.3);
color: #a5b4fc;
font-size: 13px;
letter-spacing: 0.3px;
padding: 9px 18px;
}
.hero-left h1 {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
letter-spacing: -2.5px;
line-height: 0.95;
font-weight: 700;
}
.hero-left h1 span {
/* NO usar background-clip:text aquí — rompe el efecto typing porque
#zq-typing-wrap hereda color:transparent y el texto desaparece */
color: #6FFCFF;
display: inline-block;
}
.hero-left > p {
font-size: 17px;
line-height: 1.85;
color: #8FA6C8;
max-width: 520px;
margin-top: 24px;
}
/* Chips del hero con más brillo */
.hero-chip {
background: rgba(15,23,42,0.7);
border-color: rgba(99,102,241,0.2);
color: #c7d5f0;
font-size: 13px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero-chip svg {
stroke: #6FFCFF;
}
.hero-chip:hover {
border-color: rgba(111,252,255,0.45);
background: rgba(59,130,246,0.12);
box-shadow: 0 6px 20px rgba(111,252,255,0.12);
}
/* Métricas del hero */
.hm-num {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 32px;
background: linear-gradient(180deg, #fff 0%, #93c5fd 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hm-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6E8FBF;
}
/* ─── EYEBROW MEJORADO ──────────────────────────────────── */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6FFCFF;
margin-bottom: 16px;
}
.eyebrow .num {
color: rgba(111,252,255,0.5);
font-variant-numeric: tabular-nums;
}
.eyebrow .dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: #6FFCFF;
box-shadow: 0 0 8px #6FFCFF;
display: inline-block;
}
/* ─── SECTION TITLES ────────────────────────────────────── */
section h2 {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
letter-spacing: -1px;
line-height: 1.05;
}
.head-title {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
letter-spacing: -1.5px;
line-height: 1;
font-size: clamp(2rem, 3.2vw, 2.8rem);
}
.head-title .accent {
display: block;
background: linear-gradient(90deg, #3B82F6, #6FFCFF);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-left: 0.05em;
}
/* ─── DIVISORES MEJORADOS ───────────────────────────────── */
.section-divider {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(99,102,241,0.08) 20%,
rgba(111,252,255,0.18) 50%,
rgba(99,102,241,0.08) 80%,
transparent 100%
);
margin: 0;
position: relative;
}
.section-divider::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #6FFCFF;
box-shadow: 0 0 12px #6FFCFF, 0 0 24px rgba(111,252,255,0.4);
}
/* ─── SERVICE CARDS MEJORADAS ───────────────────────────── */
.service-card {
background: linear-gradient(145deg,
rgba(15,23,42,0.80) 0%,
rgba(8,13,30,0.85) 100%
);
border: 1px solid rgba(99,102,241,0.12);
border-radius: 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1),
border-color 0.35s ease,
box-shadow 0.35s ease;
}
/* Glow de esquina superior derecha en cada card */
.service-card::after {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(59,130,246,0.15), transparent 70%);
pointer-events: none;
transition: opacity 0.4s ease;
opacity: 0;
border-radius: 50%;
}
.service-card:hover {
transform: translateY(-10px);
border-color: rgba(111,252,255,0.22);
box-shadow:
0 20px 50px rgba(2,6,20,0.6),
0 0 30px rgba(59,130,246,0.15),
inset 0 1px 0 rgba(111,252,255,0.08);
}
.service-card:hover::after {
opacity: 1;
}
/* Número decorativo en la card (inyectado por JS) */
.service-card-num {
position: absolute;
top: 20px;
right: 22px;
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 11px;
font-weight: 700;
color: rgba(111,252,255,0.2);
letter-spacing: 0.1em;
}
/* Shimmer mejorado */
.service-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 40%,
rgba(111,252,255,0.04) 50%,
transparent 60%
);
transform: translateX(-100%);
transition: none;
pointer-events: none;
}
.service-card:hover .service-shimmer {
transform: translateX(100%);
transition: transform 0.8s ease;
}
/* Icono de servicio mejorado */
.service-icon {
background: linear-gradient(135deg,
rgba(59,130,246,0.15) 0%,
rgba(99,102,241,0.10) 100%
);
border-color: rgba(59,130,246,0.3);
border-radius: 16px;
width: 54px;
height: 54px;
box-shadow: 0 0 20px rgba(59,130,246,0.12);
}
.service-icon svg {
stroke: url(#grad-icon);
width: 24px;
height: 24px;
}
.service-card h3 {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 19px;
font-weight: 600;
letter-spacing: -0.3px;
color: #e8f0ff;
}
.service-card p {
font-size: 14.5px;
line-height: 1.75;
color: #7E97BE;
}
/* ─── SECCIÓN ABOUT ─────────────────────────────────────── */
.about-left > p {
font-size: 16px;
line-height: 1.85;
color: #7E97BE;
}
.about-right {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.stat-card {
background: linear-gradient(145deg,
rgba(15,23,42,0.85) 0%,
rgba(8,13,30,0.90) 100%
);
border: 1px solid rgba(99,102,241,0.15);
border-radius: 18px;
padding: 26px 24px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.stat-card::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(59,130,246,0.4), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.stat-card:hover {
transform: translateY(-6px);
border-color: rgba(59,130,246,0.3);
box-shadow: 0 16px 40px rgba(2,6,20,0.5), 0 0 20px rgba(59,130,246,0.1);
}
.stat-card:hover::before {
opacity: 1;
}
.stat-number {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #3B82F6 0%, #6FFCFF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.5px;
}
.stat-label {
font-size: 13px;
color: #6E8FBF;
margin-top: 6px;
letter-spacing: 0.1px;
}
/* Terminal widget mejorado */
.about-terminal {
background: linear-gradient(145deg, rgba(5,8,22,0.95), rgba(8,13,30,0.98));
border: 1px solid rgba(111,252,255,0.12);
border-radius: 16px;
padding: 20px;
margin-top: 24px;
font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
font-size: 13px;
box-shadow:
0 24px 60px rgba(0,0,0,0.5),
0 0 20px rgba(59,130,246,0.08),
inset 0 1px 0 rgba(111,252,255,0.06);
}
.terminal-bar {
display: flex;
gap: 7px;
margin-bottom: 14px;
}
.terminal-dot {
width: 11px;
height: 11px;
border-radius: 50%;
}
.terminal-dot.r { background: #ff5f57; box-shadow: 0 0 8px rgba(255,95,87,0.4); }
.terminal-dot.y { background: #ffbd2e; box-shadow: 0 0 8px rgba(255,189,46,0.4); }
.terminal-dot.g { background: #28c840; box-shadow: 0 0 8px rgba(40,200,64,0.4); }
.terminal-line {
line-height: 1.9;
color: #6B8BB5;
}
.terminal-line .prompt { color: #3B82F6; margin-right: 10px; }
.terminal-line .val { color: #93c5fd; }
.terminal-line .comment { color: #334d6e; }
.terminal-cursor {
display: inline-block;
width: 8px;
height: 14px;
background: #6FFCFF;
border-radius: 1px;
animation: zqBlink 1s step-end infinite;
vertical-align: middle;
box-shadow: 0 0 8px #6FFCFF;
}
/* ─── PROCESS STEPS MEJORADOS ───────────────────────────── */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 50px;
position: relative;
}
.process-grid::before {
content: '';
position: absolute;
top: 48px;
left: calc(12.5% + 26px);
right: calc(12.5% + 26px);
height: 1px;
background: linear-gradient(90deg,
rgba(59,130,246,0.3),
rgba(111,252,255,0.5),
rgba(59,130,246,0.3)
);
z-index: 0;
}
.process-step {
background: linear-gradient(145deg,
rgba(12,18,40,0.85) 0%,
rgba(6,10,24,0.90) 100%
);
border: 1px solid rgba(99,102,241,0.13);
border-radius: 20px;
padding: 30px 24px 26px;
position: relative;
z-index: 1;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1),
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.process-step:hover {
transform: translateY(-8px);
border-color: rgba(111,252,255,0.25);
box-shadow:
0 20px 50px rgba(2,6,20,0.55),
0 0 25px rgba(111,252,255,0.08);
}
.process-step-icon {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(99,102,241,0.10));
border: 1px solid rgba(59,130,246,0.25);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.process-step-icon svg {
width: 22px;
height: 22px;
stroke: #6FFCFF;
}
.step-num {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: rgba(111,252,255,0.3);
margin-bottom: 10px;
display: block;
}
.process-step h3 {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 17px;
font-weight: 600;
margin-bottom: 10px;
color: #dce8ff;
letter-spacing: -0.2px;
}
.process-step > p {
font-size: 14px;
line-height: 1.7;
color: #6E8FBF;
}
.step-tags {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 16px;
padding: 0;
}
.step-tags li {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: #6FFCFF;
background: rgba(111,252,255,0.07);
border: 1px solid rgba(111,252,255,0.14);
padding: 4px 10px;
border-radius: 99px;
}
/* ─── PROJECT CARDS MEJORADAS ───────────────────────────── */
.project-card {
background: linear-gradient(150deg,
rgba(12,18,42,0.88) 0%,
rgba(6,10,22,0.92) 100%
);
border: 1px solid rgba(99,102,241,0.13);
border-radius: 18px;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1),
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.project-card:hover {
transform: translateY(-8px);
border-color: rgba(111,252,255,0.2);
box-shadow:
0 24px 60px rgba(2,6,20,0.6),
0 0 30px rgba(59,130,246,0.12);
}
.project-visual {
background: linear-gradient(135deg, rgba(15,23,42,0.9) 0%, rgba(8,13,30,0.95) 100%);
position: relative;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.project-visual::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 40%, rgba(59,130,246,0.15) 0%, transparent 60%);
}
.project-tag {
position: absolute;
top: 14px;
left: 14px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: #6FFCFF;
background: rgba(111,252,255,0.08);
border: 1px solid rgba(111,252,255,0.18);
padding: 5px 10px;
border-radius: 6px;
}
.project-body h3 {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: #dce8ff;
}
.project-body p {
font-size: 13.5px;
line-height: 1.7;
color: #6E8FBF;
}
/* ─── CTA BANNER MEJORADO ───────────────────────────────── */
.cta-banner {
background: linear-gradient(135deg,
rgba(15,23,42,0.90) 0%,
rgba(17,25,50,0.88) 50%,
rgba(10,15,35,0.92) 100%
);
border: 1px solid rgba(99,102,241,0.2);
border-radius: 22px;
padding: 38px 44px;
margin-top: 60px;
position: relative;
overflow: hidden;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.cta-banner::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(59,130,246,0.14) 0%, transparent 70%);
pointer-events: none;
}
.cta-banner::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(111,252,255,0.35), transparent);
}
.cta-copy strong {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 20px;
letter-spacing: -0.3px;
color: #e8f0ff;
}
.cta-copy span {
font-size: 14.5px;
color: #6E8FBF;
margin-top: 5px;
display: block;
}
/* ─── PRICE CARDS MEJORADAS ─────────────────────────────── */
.price-card {
background: linear-gradient(155deg,
rgba(12,18,42,0.88) 0%,
rgba(6,10,22,0.92) 100%
);
border: 1px solid rgba(99,102,241,0.15);
border-radius: 22px;
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1),
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.price-card:not(.featured):hover {
transform: translateY(-8px);
border-color: rgba(59,130,246,0.3);
box-shadow: 0 20px 50px rgba(2,6,20,0.55), 0 0 25px rgba(59,130,246,0.1);
}
.price-card.featured {
background: linear-gradient(155deg,
rgba(18,28,65,0.95) 0%,
rgba(12,20,48,0.98) 100%
);
border-color: rgba(59,130,246,0.35);
box-shadow:
0 0 0 1px rgba(111,252,255,0.08),
0 30px 70px rgba(2,6,20,0.6),
0 0 50px rgba(59,130,246,0.18);
}
.price-card.featured:hover {
transform: translateY(-10px);
box-shadow:
0 0 0 1px rgba(111,252,255,0.15),
0 36px 80px rgba(2,6,20,0.65),
0 0 60px rgba(59,130,246,0.25);
}
.price-card.featured::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #3B82F6, #6FFCFF, #6366F1);
}
.price-badge {
background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(111,252,255,0.12));
border: 1px solid rgba(111,252,255,0.25);
color: #6FFCFF;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
padding: 5px 14px;
border-radius: 99px;
}
.price-name {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.4px;
color: #e8f0ff;
}
.price-desc {
font-size: 13.5px;
color: #6E8FBF;
line-height: 1.6;
margin-top: 6px;
}
.price-value {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 34px;
font-weight: 700;
letter-spacing: -1px;
color: #e8f0ff;
}
.price-value .price-cur {
font-size: 14px;
font-weight: 500;
color: #6E8FBF;
letter-spacing: 0;
}
/* Toggle de precios */
.price-toggle {
background: rgba(8,13,30,0.7);
border: 1px solid rgba(99,102,241,0.18);
border-radius: 12px;
padding: 5px;
}
.price-toggle-btn {
font-size: 13px;
font-weight: 600;
border-radius: 9px;
padding: 9px 22px;
letter-spacing: 0.1px;
transition: color 0.2s ease;
}
.price-toggle-btn.is-active {
color: #fff;
}
/* ─── CONTACT MEJORADO ──────────────────────────────────── */
.contact-left h2 {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: clamp(1.8rem, 2.5vw, 2.4rem);
font-weight: 700;
letter-spacing: -1px;
line-height: 1.1;
background: linear-gradient(135deg, #e8f0ff 0%, #93c5fd 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.contact-left > p {
font-size: 16px;
line-height: 1.8;
color: #7E97BE;
margin: 12px 0 28px;
}
.contact-info-item {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 16px;
border-radius: 12px;
background: rgba(15,23,42,0.5);
border: 1px solid rgba(99,102,241,0.12);
color: #94A3B8;
text-decoration: none;
font-size: 14px;
transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
margin-bottom: 10px;
}
.contact-info-item:hover {
border-color: rgba(111,252,255,0.2);
background: rgba(59,130,246,0.07);
color: #c7d5f0;
}
.contact-info-icon {
width: 36px;
height: 36px;
border-radius: 9px;
background: rgba(59,130,246,0.12);
border: 1px solid rgba(59,130,246,0.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-info-icon svg {
width: 16px;
height: 16px;
stroke: #6FFCFF;
fill: none;
stroke-width: 1.7;
}
/* Form mejorado */
#contact-form .field label {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6E8FBF;
margin-bottom: 8px;
display: block;
}
#contact-form input,
#contact-form textarea {
background: rgba(8,13,30,0.7);
border: 1px solid rgba(99,102,241,0.18);
border-radius: 12px;
color: #e8f0ff;
font-size: 14.5px;
padding: 14px 18px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
#contact-form input:focus,
#contact-form textarea:focus {
outline: none;
border-color: rgba(59,130,246,0.5);
box-shadow: 0 0 0 3px rgba(59,130,246,0.12), 0 0 20px rgba(59,130,246,0.08);
}
#contact-form input::placeholder,
#contact-form textarea::placeholder {
color: #374e6e;
}
/* ─── TESTIMONIALS MEJORADOS ────────────────────────────── */
.tcard {
background: linear-gradient(150deg,
rgba(12,18,42,0.88) 0%,
rgba(6,10,22,0.92) 100%
);
border: 1px solid rgba(99,102,241,0.13);
border-radius: 20px;
padding: 28px 26px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tcard::before {
content: '"';
position: absolute;
top: 10px;
right: 18px;
font-family: Georgia, serif;
font-size: 80px;
color: rgba(59,130,246,0.08);
line-height: 1;
pointer-events: none;
}
.tcard:hover {
transform: translateY(-6px);
border-color: rgba(59,130,246,0.25);
box-shadow: 0 18px 45px rgba(2,6,20,0.55), 0 0 20px rgba(59,130,246,0.1);
}
.tstars svg {
width: 16px;
height: 16px;
color: #FBBF24;
}
.tcard blockquote {
font-size: 15px;
line-height: 1.75;
color: #B2C5E0;
font-style: italic;
margin: 14px 0 18px;
padding: 0;
border: none;
}
.tavatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(111,252,255,0.15));
border: 1px solid rgba(59,130,246,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #93c5fd;
flex-shrink: 0;
}
.tmeta strong {
font-size: 14px;
color: #d0deff;
display: block;
}
.tmeta span {
font-size: 12px;
color: #5a7396;
}
/* ─── FAQ MEJORADO ──────────────────────────────────────── */
.faq-item {
background: linear-gradient(145deg, rgba(12,18,42,0.75), rgba(6,10,22,0.80));
border: 1px solid rgba(99,102,241,0.13);
border-radius: 16px;
margin-bottom: 10px;
overflow: hidden;
transition: border-color 0.25s ease;
}
.faq-item[open] {
border-color: rgba(59,130,246,0.25);
}
.faq-item summary {
padding: 22px 24px;
font-size: 15.5px;
font-weight: 600;
color: #c7d5f0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
letter-spacing: -0.1px;
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:hover {
color: #e8f0ff;
}
.faq-chevron {
width: 20px;
height: 20px;
color: #3B82F6;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.faq-item[open] .faq-chevron {
transform: rotate(180deg);
}
.faq-body {
padding: 0 24px 22px;
}
.faq-body p {
font-size: 14.5px;
line-height: 1.8;
color: #6E8FBF;
}
/* ─── ROADMAP MEJORADO ──────────────────────────────────── */
/* Mantenemos 94x94 original para que la linea top:47px quede centrada */
.tl-node {
width: 94px;
height: 94px;
border-radius: 50%;
background: radial-gradient(circle, rgba(59,130,246,0.2), rgba(5,8,22,0.92) 70%);
border: 1px solid rgba(59,130,246,0.45);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
box-shadow: 0 0 28px rgba(59,130,246,0.3), inset 0 0 20px rgba(59,130,246,0.1);
}
.tl-node svg {
width: 36px;
height: 36px;
stroke: #6FFCFF;
}
.tl-year {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 13px;
font-weight: 700;
color: #6FFCFF;
letter-spacing: 0.05em;
}
.tl-title {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 16px;
font-weight: 600;
color: #dce8ff;
letter-spacing: -0.2px;
}
.stage-card {
background: linear-gradient(150deg,
rgba(12,18,42,0.85) 0%,
rgba(6,10,22,0.90) 100%
);
border: 1px solid rgba(99,102,241,0.13);
border-radius: 18px;
padding: 24px;
position: relative;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.stage-card:hover {
border-color: rgba(59,130,246,0.25);
box-shadow: 0 16px 40px rgba(2,6,20,0.4), 0 0 20px rgba(59,130,246,0.08);
}
.stage-lead {
font-size: 14px;
font-weight: 600;
color: #93c5fd;
margin-bottom: 14px;
line-height: 1.5;
}
.stage-card ul li {
font-size: 13.5px;
color: #7E97BE;
line-height: 1.65;
display: flex;
align-items: center;
gap: 10px;
}
.stage-card ul li svg {
width: 16px;
height: 16px;
stroke: #34D399;
flex-shrink: 0;
opacity: 0.85;
}
.stage-foot {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.05em;
color: rgba(111,252,255,0.5);
margin-top: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.stage-foot svg {
width: 15px;
height: 15px;
stroke: #6FFCFF;
}
/* ─── EQUIPO MEJORADO ───────────────────────────────────── */
.member {
transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1),
border-color 0.4s ease, box-shadow 0.4s ease;
}
.member:hover {
box-shadow:
0 24px 60px rgba(2,6,20,0.6),
0 0 30px rgba(59,130,246,0.12);
}
.member-ring {
width: 72px;
height: 72px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(135deg, #3B82F6, #6FFCFF);
position: relative;
margin-bottom: 4px;
}
.member-ring img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
background: #080d1e;
}
.member h3 {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
color: #e8f0ff;
margin-top: 14px;
}
.member-role {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 99px;
background: rgba(59,130,246,0.12);
border: 1px solid rgba(59,130,246,0.22);
color: #93c5fd;
margin-top: 6px;
display: inline-block;
}
.member-role.role-lead {
background: rgba(111,252,255,0.08);
border-color: rgba(111,252,255,0.2);
color: #6FFCFF;
}
.member-role.role-sec {
background: rgba(52,211,153,0.08);
border-color: rgba(52,211,153,0.2);
color: #34D399;
}
.member-bio {
font-size: 13.5px;
line-height: 1.7;
color: #6E8FBF;
margin-top: 12px;
}
.member-mail {
font-size: 12.5px;
color: #5a7396;
text-decoration: none;
display: flex;
align-items: center;
gap: 7px;
transition: color 0.2s ease;
}
.member-mail:hover {
color: #93c5fd;
}
.member-mail svg {
width: 14px;
height: 14px;
stroke: currentColor;
}
/* ─── FOOTER MEJORADO ──────────────────────────────────── */
.footer {
background: linear-gradient(180deg, rgba(5,8,22,0.0), rgba(4,6,18,0.98));
border-top: 1px solid rgba(99,102,241,0.1);
padding: 50px 70px 36px;
text-align: center;
}
.footer img {
width: 110px;
height: auto;
opacity: 0.85;
filter: drop-shadow(0 0 10px rgba(59,130,246,0.35));
}
.footer > p {
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #374e6e;
margin-top: 10px;
}
.footer-links {
display: flex;
gap: 28px;
justify-content: center;
margin: 24px 0 20px;
flex-wrap: wrap;
}
.footer-links a {
font-size: 13.5px;
color: #5a7396;
text-decoration: none;
transition: color 0.2s ease;
letter-spacing: 0.1px;
}
.footer-links a:hover {
color: #93c5fd;
}
.footer-social {
display: flex;
gap: 14px;
justify-content: center;
margin: 20px 0;
}
.footer-social a {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(15,23,42,0.7);
border: 1px solid rgba(99,102,241,0.15);
display: flex;
align-items: center;
justify-content: center;
color: #5a7396;
transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.footer-social a:hover {
color: #6FFCFF;
border-color: rgba(111,252,255,0.25);
background: rgba(111,252,255,0.06);
}
.footer-social a svg {
width: 17px;
height: 17px;
}
.footer-copy {
font-size: 12.5px;
color: #374e6e;
margin-top: 8px;
}
.footer-made {
font-size: 12px;
color: #2d3f5a;
margin-top: 10px;
}
.footer-made span {
color: #f87171;
}
.footer-legal {
display: flex;
gap: 20px;
justify-content: center;
margin: 14px 0 6px;
flex-wrap: wrap;
}
.footer-legal a {
font-size: 12px;
color: #374e6e;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-legal a:hover {
color: #5a7396;
}
.footer-legal-sep {
width: 1px;
background: rgba(99,102,241,0.15);
display: inline-block;
height: 12px;
align-self: center;
}
/* ─── WHATSAPP FLOTANTE MEJORADO ────────────────────────── */
.wsp-float {
border-radius: 16px;
box-shadow:
0 12px 40px rgba(0,0,0,0.45),
0 0 20px rgba(52,211,153,0.18);
}
.wsp-btn {
background: linear-gradient(135deg, #22c55e, #16a34a);
box-shadow: 0 0 20px rgba(34,197,94,0.35);
}
/* ─── TO-TOP BUTTON MEJORADO ────────────────────────────── */
.to-top {
background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(8,13,30,0.98));
border: 1px solid rgba(59,130,246,0.3);
border-radius: 14px;
box-shadow: 0 8px 25px rgba(0,0,0,0.4), 0 0 15px rgba(59,130,246,0.15);
}
.to-top:hover {
border-color: rgba(111,252,255,0.35);
box-shadow: 0 12px 35px rgba(0,0,0,0.5), 0 0 25px rgba(111,252,255,0.15);
}
/* ─── READ PROGRESS BAR ─────────────────────────────────── */
.read-progress {
background: linear-gradient(90deg, #3B82F6, #6FFCFF, #6366F1);
height: 2.5px;
box-shadow: 0 0 10px rgba(111,252,255,0.5);
}
/* ─── STAT PILLS (PROYECTOS) MEJORADOS ─────────────────── */
.stats-row {
display: flex;
gap: 16px;
margin: 40px 0 50px;
flex-wrap: wrap;
}
.stat-pill {
background: linear-gradient(145deg, rgba(12,18,42,0.85), rgba(6,10,22,0.90));
border: 1px solid rgba(99,102,241,0.14);
border-radius: 16px;
padding: 20px 22px;
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 200px;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s ease;
}
.stat-pill:hover {
border-color: rgba(59,130,246,0.3);
box-shadow: 0 12px 35px rgba(2,6,20,0.5), 0 0 20px rgba(59,130,246,0.1);
transform: translateY(-4px);
}
.stat-ico {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(59,130,246,0.12);
border: 1px solid rgba(59,130,246,0.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stat-ico svg {
width: 20px;
height: 20px;
stroke: #6FFCFF;
}
.stat-big {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #fff 0%, #93c5fd 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: block;
letter-spacing: -0.5px;
line-height: 1;
}
.stat-cap {
font-size: 12px;
color: #5a7396;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 4px;
display: block;
}
/* ─── CATEGORY PANEL ────────────────────────────────────── */
.cat-panel {
background: linear-gradient(160deg, rgba(12,18,42,0.85), rgba(6,10,22,0.90));
border: 1px solid rgba(99,102,241,0.13);
border-radius: 18px;
padding: 22px 18px;
}
.cat-head {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #3B5280;
margin-bottom: 14px;
}
.cat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-radius: 11px;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cat-item.active {
background: rgba(59,130,246,0.1);
border-color: rgba(59,130,246,0.25);
}
.cat-item.active .cat-name {
color: #93c5fd;
}
.cat-item:hover:not(.active) {
background: rgba(15,23,42,0.6);
}
.cat-name {
font-size: 13.5px;
font-weight: 500;
color: #6E8FBF;
flex: 1;
}
.cat-count {
font-size: 11px;
font-weight: 700;
color: rgba(59,130,246,0.5);
background: rgba(59,130,246,0.1);
padding: 3px 8px;
border-radius: 99px;
}
/* ─── GALLERY MEJORADA ──────────────────────────────────── */
.gallery-block {
margin-top: 50px;
}
.gallery-title {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.4px;
color: #dce8ff;
margin-bottom: 8px;
}
.gallery-sub {
font-size: 14px;
color: #5a7396;
line-height: 1.6;
margin-bottom: 28px;
max-width: 540px;
}
.gallery-item {
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(99,102,241,0.1);
transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1),
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.02);
border-color: rgba(111,252,255,0.18);
box-shadow: 0 16px 40px rgba(2,6,20,0.6), 0 0 20px rgba(59,130,246,0.12);
}
.gallery-overlay {
background: linear-gradient(0deg, rgba(5,8,22,0.92) 0%, rgba(5,8,22,0.4) 60%, transparent 100%);
}
.gallery-ph-rich {
border-radius: 0;
}
.gallery-ph-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(15,23,42,0.7);
border: 1px solid rgba(99,102,241,0.2);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.gallery-ph-icon svg {
stroke: #6FFCFF;
width: 26px;
height: 26px;
}
.gallery-ph-name {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 16px;
font-weight: 600;
color: #c7d5f0;
display: block;
margin-bottom: 5px;
}
.gallery-ph-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6FFCFF;
opacity: 0.7;
}
/* ─── MARQUEE MEJORADO ──────────────────────────────────── */
.trusted-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #334d6e;
text-align: center;
margin-bottom: 20px;
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
font-weight: 600;
color: #3B5280;
padding: 10px 20px;
border: 1px solid rgba(99,102,241,0.1);
border-radius: 99px;
background: rgba(12,18,42,0.5);
white-space: nowrap;
transition: color 0.25s ease, border-color 0.25s ease;
}
.marquee-item:hover {
color: #6E8FBF;
border-color: rgba(99,102,241,0.2);
}
.marquee-item svg {
width: 8px;
height: 8px;
fill: rgba(59,130,246,0.4);
}
/* ─── HERO CODE LINES ───────────────────────────────────── */
.hero-code-lines {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.hero-code-line {
position: absolute;
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 11px;
color: rgba(59,130,246,0.18);
white-space: nowrap;
animation: codeFloat linear infinite;
}
.hero-code-line:nth-child(1) { top: 8%; left: -5%; animation-duration: 22s; animation-delay: 0s; }
.hero-code-line:nth-child(2) { top: 22%; left: -5%; animation-duration: 26s; animation-delay: -8s; }
.hero-code-line:nth-child(3) { top: 42%; left: -5%; animation-duration: 19s; animation-delay: -3s; }
.hero-code-line:nth-child(4) { top: 60%; left: -5%; animation-duration: 24s; animation-delay: -14s; }
.hero-code-line:nth-child(5) { top: 76%; left: -5%; animation-duration: 21s; animation-delay: -7s; }
.hero-code-line:nth-child(6) { top: 90%; left: -5%; animation-duration: 28s; animation-delay: -2s; }
@keyframes codeFloat {
from { transform: translateX(0); opacity: 0; }
5% { opacity: 1; }
90% { opacity: 0.8; }
to { transform: translateX(110vw); opacity: 0; }
}
/* ─── SECTION PADDING CONSISTENTE ──────────────────────── */
section {
padding: 90px 10% 80px;
}
.hero {
padding-top: 100px;
}
/* ─── GLASSMORPHISM GLOBAL PARA CARDS ───────────────────── */
.service-card,
.project-card,
.price-card,
.tcard,
.stage-card,
.stat-pill {
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
/* ─── BOTONES MEJORADOS ─────────────────────────────────── */
.btn-primary {
background: linear-gradient(135deg, #1d4ed8 0%, #3B82F6 60%, #60a5fa 100%);
border-radius: 12px;
letter-spacing: 0.1px;
font-size: 14.5px;
box-shadow:
0 0 20px rgba(59,130,246,0.3),
inset 0 1px 0 rgba(255,255,255,0.15);
position: relative;
overflow: hidden;
}
.btn-primary::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
transition: left 0.5s ease;
}
.btn-primary:hover::after {
left: 100%;
}
.btn-secondary {
border-radius: 12px;
font-size: 14.5px;
letter-spacing: 0.1px;
border-color: rgba(99,102,241,0.3);
color: #93c5fd;
}
.btn-secondary:hover {
border-color: rgba(111,252,255,0.4);
color: #e0f2fe;
}
/* ─── ORBIT LABELS MEJORADOS ────────────────────────────── */
.orbit {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ─── SECCIÓN HEAD TEXT MEJORADO ─────────────────────────── */
.head-text {
font-size: 15.5px;
line-height: 1.8;
color: #6E8FBF;
max-width: 420px;
}
/* ─── MOBILE IMPROVEMENTS ──────────────────────────────────*/
@media (max-width: 768px) {
section { padding: 70px 6% 60px; }
.process-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.process-grid::before { display: none; }
.about-right {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.stats-row {
flex-direction: column;
gap: 12px;
}
.stat-pill { min-width: unset; }
.footer { padding: 40px 24px 28px; }
}
@media (max-width: 480px) {
.about-right { grid-template-columns: 1fr; }
.cta-banner {
padding: 28px 24px;
flex-direction: column;
text-align: center;
gap: 20px;
}
.cta-banner .cta-ico { display: none; }
}
/* ========================================================================
ORIGEN: fixes.css
======================================================================== */
/* =========================================================
ZAQORI · fixes.css
Correcciones visuales. Se carga al final del para
tener prioridad sobre styles.css, enhance.css y visual-upgrade.css.
========================================================= */
/* ─── FIX 1 · Badge "Más popular" recortado (definitivo) ──────
Causa: .price-card tenía overflow:hidden en styles.css y en
visual-upgrade.css, y el badge sobresale por arriba, así que quedaba
cortado; además su color era casi transparente. Forzamos que la
tarjeta destacada lo muestre completo, centrado y con color sólido. */
.price-card.featured { overflow: visible !important; }
.price-card.featured::after { border-radius: 22px 22px 0 0; }
@media (min-width: 901px) { .price-card.featured { margin-top: 10px; } }
.price-card .price-badge {
position: absolute !important;
top: -14px !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateX(-50%) !important;
width: auto !important;
background: linear-gradient(90deg, #3B82F6, #6FFCFF) !important;
color: #061018 !important;
font-weight: 800 !important;
font-size: 11px !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
padding: 6px 16px !important;
border: none !important;
border-radius: 999px !important;
white-space: nowrap !important;
box-shadow: 0 8px 22px rgba(59,130,246,.5) !important;
z-index: 6 !important;
opacity: 1 !important;
}
/* ─── FIX 2 · Títulos con degradado que parpadeaban al animar ──
Limitamos la transición del reveal a opacidad y desplazamiento. */
section h2,
.head-title {
transition: opacity .7s ease, transform .7s ease !important;
}
/* ─── FIX 3 · Animación del FAQ más fluida ───────────────────
El acordeón nativo abría de golpe. Animamos la altura (controlada
por ui.js) con una curva suave, junto con el ícono +/−. */
.faq-body {
overflow: hidden;
box-sizing: border-box;
transition: height .42s cubic-bezier(.25,.8,.25,1), opacity .35s ease;
will-change: height;
}
.faq-ico::before,
.faq-ico::after {
transition: transform .42s cubic-bezier(.25,.8,.25,1), opacity .35s ease !important;
}
/* el contenedor del item también suaviza su borde al abrir */
.faq-item { transition: border-color .35s ease, background .35s ease; }
/* ─── FIX 4 · Número decorativo "01" de los servicios muy tenue ──
Subimos su visibilidad para que se lea bien sin ser protagonista. */
.service-card-num {
color: rgba(111,252,255,0.42) !important;
font-size: 12px !important;
}
/* ─── FIX 5 · Punto cyan "suelto" entre secciones ────────────
El .section-divider tenía DOS puntos (::before en styles.css y
::after en visual-upgrade.css) sobre una línea casi invisible, así
que el punto parecía flotar solo. Ocultamos los puntos y dejamos
solo una línea sutil y elegante. */
.section-divider::before,
.section-divider::after { display: none !important; }
.section-divider {
background: linear-gradient(90deg,
transparent 0%,
rgba(59,130,246,0.10) 25%,
rgba(111,252,255,0.22) 50%,
rgba(59,130,246,0.10) 75%,
transparent 100%) !important;
}
/* ─── FIX 6 · Círculo/arco descentrado en las tarjetas de Servicios ──
.service-card::after estaba definido en styles.css (un borde de
esquina) y en visual-upgrade.css (un glow circular). Al combinarse
creaban un arco torcido. Limpiamos los restos de borde para que
quede solo un glow suave y centrado detrás del ícono. */
.service-card::after {
border: none !important;
bottom: auto !important;
left: 50% !important;
top: 26px !important;
right: auto !important;
transform: translateX(-50%) !important;
width: 150px !important;
height: 150px !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(59,130,246,0.16), transparent 70%) !important;
}
/* =========================================================
MODAL de proyectos / servicios (lo abre modals.js)
========================================================= */
.zq-modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(3, 6, 18, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
}
.zq-modal-overlay.open { opacity: 1; visibility: visible; }
body.modal-open { overflow: hidden; }
.zq-modal {
position: relative;
width: 100%;
max-width: 540px;
max-height: 88vh;
overflow-y: auto;
background: linear-gradient(160deg, #0e1730 0%, #0a1020 100%);
border: 1px solid rgba(111, 252, 255, 0.18);
border-radius: 22px;
padding: 34px 32px 30px;
box-shadow: 0 30px 80px rgba(2, 6, 20, 0.7), 0 0 40px rgba(59, 130, 246, 0.12);
transform: translateY(18px) scale(.98);
transition: transform .34s cubic-bezier(.25,.8,.25,1);
}
.zq-modal-overlay.open .zq-modal { transform: translateY(0) scale(1); }
.zq-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 10px;
background: rgba(15, 23, 42, 0.6);
color: #94A3B8;
cursor: pointer;
transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.zq-modal-close:hover { color: #6FFCFF; border-color: rgba(111,252,255,0.4); background: rgba(111,252,255,0.08); }
.zq-modal-close svg { width: 18px; height: 18px; }
.zq-modal-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #6FFCFF;
background: rgba(111, 252, 255, 0.1);
border: 1px solid rgba(111, 252, 255, 0.22);
padding: 5px 12px;
border-radius: 999px;
margin-bottom: 16px;
}
.zq-modal-title {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 25px;
font-weight: 700;
color: #eaf2ff;
margin: 0 0 14px;
line-height: 1.2;
padding-right: 40px;
}
.zq-modal-detail {
font-size: 15px;
line-height: 1.75;
color: #9fb2d4;
margin: 0 0 22px;
}
.zq-modal-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #6E8FBF;
margin: 0 0 10px;
}
.zq-modal-tech-wrap { margin-bottom: 22px; }
.zq-modal-tech { display: flex; flex-wrap: wrap; gap: 8px; }
.zq-modal-chip {
font-size: 12.5px;
font-weight: 500;
color: #cdd9f0;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.25);
padding: 5px 12px;
border-radius: 8px;
}
.zq-modal-result {
display: flex;
align-items: flex-start;
gap: 11px;
font-size: 14.5px;
line-height: 1.65;
color: #c9d6ee;
background: rgba(16, 185, 129, 0.07);
border: 1px solid rgba(16, 185, 129, 0.22);
border-radius: 14px;
padding: 15px 17px;
margin-bottom: 26px;
}
.zq-modal-result-ico {
flex-shrink: 0;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(16, 185, 129, 0.16);
color: #34d399;
margin-top: 1px;
}
.zq-modal-result-ico svg { width: 13px; height: 13px; }
.zq-modal-cta {
display: inline-flex !important;
width: 100%;
justify-content: center;
text-align: center;
}
@media (max-width: 560px) {
.zq-modal { padding: 28px 22px 24px; border-radius: 18px; }
.zq-modal-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.zq-modal-overlay, .zq-modal { transition: none !important; }
.zq-modal { transform: none !important; }
}
/* ─── Contenedor de acciones del navbar (tema + CTA + menú) ── */
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* ─── FIX 7 · Equipo en una sola fila (carrusel con flechas) ──
Con 5 miembros, el grid de 4 columnas dejaba la quinta tarjeta
huérfana en una segunda fila. Convertimos la sección en una fila
horizontal con scroll suave y snap: en pantallas muy anchas caben
los 5 y las flechas se ocultan; en pantallas menores aparecen
flechas (las inyecta script.js) para recorrer al resto del equipo. */
.team-carousel { position: relative; }
.team-grid {
display: flex !important;
grid-template-columns: none !important;
gap: 22px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 4px 2px 14px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.team-grid::-webkit-scrollbar { display: none; }
.team-grid .member {
flex: 0 0 clamp(232px, 19vw, 292px);
scroll-snap-align: start;
}
@media (max-width: 768px) {
.team-grid .member { flex-basis: min(78vw, 300px); }
}
/* Flechas de navegación */
.team-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(111, 252, 255, 0.28);
background: rgba(8, 13, 30, 0.92);
color: #CFE0FF;
cursor: pointer;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
transition: color .25s ease, border-color .25s ease, background .25s ease, opacity .25s ease;
}
.team-nav:hover {
color: #6FFCFF;
border-color: rgba(111, 252, 255, 0.5);
background: rgba(59, 130, 246, 0.14);
}
.team-nav svg { width: 18px; height: 18px; }
.team-nav.prev { left: -14px; }
.team-nav.next { right: -14px; }
.team-nav[disabled] { opacity: .28; cursor: default; pointer-events: none; }
/* Si todo el equipo cabe en pantalla, las flechas se ocultan */
.team-carousel.no-overflow .team-nav { display: none; }
/* Tema claro: la flecha era un círculo azul marino sobre fondo claro.
theme-light.css no cubre este componente (lo agregamos después). */
html.light .team-nav {
background: rgba(255, 255, 255, 0.96);
border-color: rgba(15, 23, 42, 0.14);
color: #24354f;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}
html.light .team-nav:hover {
color: #2563eb;
border-color: rgba(37, 99, 235, 0.4);
background: rgba(37, 99, 235, 0.08);
}
@media (max-width: 768px) {
.team-nav.prev { left: 4px; }
.team-nav.next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.team-grid { scroll-behavior: auto; }
}
/* ─── FIX 8 · Vitrina "Productos en vivo" (TIXORA · Punto de Venta) ──
PRINCIPIO: nada de colores de texto fijos. El sitio invierte
`body { color }` entre tema oscuro y claro, así que aquí el texto
HEREDA del tema y los grises se logran con opacity. Los fondos son
translúcidos para adaptarse al lienzo, y los acentos se eligieron
con contraste suficiente sobre fondo claro Y oscuro. */
.live-products {
max-width: 1120px;
margin: 60px auto 10px;
padding: 0 22px;
}
.live-products-head {
text-align: center;
margin-bottom: 30px;
}
.live-products-head h3 {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: clamp(22px, 3.4vw, 30px);
font-weight: 700;
margin: 14px 0 8px;
/* sin color: hereda del tema */
}
.live-products-head p {
font-size: 14.5px;
line-height: 1.7;
opacity: .75;
margin: 0 auto;
max-width: 520px;
}
/* Insignia: el punto verde es la señal de "en vivo"; el texto hereda
para que sea legible en ambos temas. */
.live-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.4);
padding: 5px 12px;
border-radius: 999px;
}
.live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #059669;
box-shadow: 0 0 8px rgba(5, 150, 105, 0.7);
animation: liveDotPulse 2s ease-in-out infinite;
}
@keyframes liveDotPulse {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
/* ── Rejilla ── */
.live-products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 22px;
}
/* ── Tarjeta de producto ── */
.product-card {
display: flex;
flex-direction: column;
padding: 28px 26px 26px;
border-radius: 20px;
background:
radial-gradient(120% 150% at 0% 0%, rgba(59,130,246,0.13), transparent 58%),
linear-gradient(160deg, rgba(110,143,191,0.13), rgba(110,143,191,0.05));
border: 1px solid rgba(110, 143, 191, 0.3);
box-shadow: 0 18px 44px rgba(2, 6, 20, 0.22);
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.product-card:hover {
transform: translateY(-4px);
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 26px 58px rgba(2, 6, 20, 0.3);
}
.product-card-top {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.product-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 13px;
border: 1px solid currentColor;
background: rgba(110, 143, 191, 0.08);
}
.product-icon svg { width: 24px; height: 24px; }
/* Tonos elegidos por legibilidad en fondo claro y oscuro */
.product-icon--tixora { color: #3B6FE0; }
.product-icon--pv { color: #059669; }
.product-card-name h4 {
font-family: 'Space Grotesk', 'Exo 2', sans-serif;
font-size: 21px;
font-weight: 700;
margin: 0 0 3px;
line-height: 1.2;
}
.product-tagline {
display: block;
font-size: 12.5px;
font-weight: 500;
opacity: .7;
}
.product-desc {
font-size: 14px;
line-height: 1.7;
opacity: .85;
margin: 0 0 16px;
}
.product-points {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.product-points li {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 13.5px;
line-height: 1.5;
}
.product-points svg {
flex-shrink: 0;
width: 15px;
height: 15px;
margin-top: 3px;
color: #059669;
}
.product-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 22px;
}
.product-tags span {
font-size: 11.5px;
font-weight: 600;
opacity: .9;
background: rgba(110, 143, 191, 0.16);
border: 1px solid rgba(110, 143, 191, 0.34);
padding: 4px 10px;
border-radius: 7px;
}
/* ── Acciones ── */
.product-actions {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.product-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
white-space: nowrap;
text-decoration: none !important;
}
.product-btn svg { width: 16px; height: 16px; }
/* Enlace secundario: hereda color, el subrayado da la afordancia */
.product-link {
font-size: 13px;
font-weight: 600;
color: inherit;
opacity: .8;
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity .25s ease;
}
.product-link:hover { opacity: 1; }
.product-note {
font-size: 11.5px;
opacity: .6;
text-align: center;
}
@media (max-width: 640px) {
.live-products { margin-top: 46px; }
.product-card { padding: 24px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
.live-dot { animation: none; }
.product-card { transition: none; }
.product-card:hover { transform: none; }
}
/* ─── FIX 9 · Desbordes en las tarjetas del equipo ──────────────
Con cargos largos ("Ing. en Sistemas Computacionales") y correos
largos, la insignia y el correo se salían de la tarjeta. */
.member-role {
max-width: 100%;
box-sizing: border-box;
white-space: normal;
text-align: center;
line-height: 1.35;
}
.member-mail {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
text-align: left;
}
/* ========================================================================
ORIGEN: theme-light.css
======================================================================== */
/* =========================================================
ZAQORI · theme-light.css
MODO CLARO. Solo se aplica cuando tiene la clase .light
(la activa el botón de la barra). El modo oscuro queda intacto.
========================================================= */
/* ---- Base ---- */
html.light body {
background: var(--zq-canvas) !important;
color: var(--zq-text) !important;
}
/* Glows ambientales: los suavizamos y aclaramos */
html.light body::before {
background: radial-gradient(circle, rgba(59,130,246,0.10), transparent 70%) !important;
opacity: .7;
}
html.light body::after {
background: radial-gradient(circle, rgba(111,252,255,0.10), transparent 65%) !important;
opacity: .6;
}
/* Rejilla de fondo más tenue sobre claro */
html.light .bg-grid {
background-image:
linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px) !important;
opacity: .7;
}
/* ---- Tipografía general ---- */
html.light h1, html.light h2, html.light h3, html.light h4,
html.light .head-title, html.light .stat-number, html.light .stat-big {
color: #0f1b30 !important;
}
html.light p, html.light li { color: var(--zq-text-soft); }
/* Los heredan el color de su contenedor (no los aplastamos a gris),
así los acentos de color se conservan y cada texto toma el color correcto. */
html.light span { color: inherit; }
html.light .section-sub, html.light .lead, html.light .about-left > p { color: #47587a !important; }
/* Eyebrows y números de acento → cian/azul oscuro legible */
html.light .eyebrow { color: #0e7490 !important; }
html.light .eyebrow .num, html.light .num { color: #2563eb !important; }
html.light .eyebrow .dot { background: #0891b2 !important; }
/* =========================================================
NAVBAR
========================================================= */
html.light .navbar {
background: rgba(255,255,255,0.82) !important;
border-bottom: 1px solid rgba(15,23,42,0.08) !important;
box-shadow: 0 2px 20px rgba(15,23,42,0.05);
}
html.light .nav-desktop a { color: #475569 !important; }
html.light .nav-desktop a:hover,
html.light .nav-desktop a.is-active { color: #2563eb !important; }
html.light .logo, html.light .logo-text { color: #0f1b30 !important; }
html.light .nav-toggle span { background: #24354f !important; }
/* Menú móvil claro */
html.light .mobile-menu {
background: rgba(248,250,252,0.98) !important;
border-color: rgba(15,23,42,0.08) !important;
}
html.light .mobile-menu-links a { color: #334155 !important; border-color: rgba(15,23,42,0.07) !important; }
html.light .mobile-menu-links a:hover { color: #2563eb !important; }
/* =========================================================
HERO — se mantiene oscuro a propósito (para que la
animación 3D siga viéndose). Aseguramos su fondo oscuro.
========================================================= */
html.light .hero {
background:
radial-gradient(900px circle at 70% 20%, rgba(59,130,246,0.14), transparent 60%),
#050816 !important;
}
/* borde suave de transición hacia el contenido claro.
OJO: este velo solo existe en tema claro. Antes tenía z-index 2 y
se pintaba ENCIMA de las métricas del hero (12 / 12 / 100%), que
caen dentro de estos 120px: por eso los números se veían cortados
en claro y bien en oscuro. Ahora el velo va detrás del contenido. */
html.light .hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 120px;
background: linear-gradient(to bottom, transparent, rgba(231,237,247,0.0) 60%, #e7edf7 100%);
pointer-events: none;
z-index: 0;
}
/* El contenido del hero se pinta por encima del velo */
html.light .hero-left,
html.light .hero-right,
html.light .hero-metrics,
html.light .hero-3d {
position: relative;
z-index: 3;
}
/* =========================================================
TARJETAS Y PANELES (fondo blanco + borde + sombra suave)
========================================================= */
html.light .service-card,
html.light .stat-card,
html.light .stat-pill,
html.light .project-card,
html.light .price-card,
html.light .tl-step,
html.light .stage-card,
html.light .member,
html.light .quote,
html.light .faq-item,
html.light .cta-banner,
html.light .why-card,
html.light .contact-right,
html.light .contact-left {
background: var(--zq-surface) !important;
border: 1px solid var(--zq-border) !important;
box-shadow: var(--zq-shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.light .service-card:hover,
html.light .project-card:hover,
html.light .member:hover,
html.light .stat-pill:hover,
html.light .why-card:hover,
html.light .process-step:hover {
border-color: var(--zq-border-hover) !important;
box-shadow: var(--zq-shadow-hover) !important;
}
/* Títulos y textos dentro de tarjetas */
html.light .service-card h3,
html.light .project-body h3,
html.light .stage-card h3,
html.light .member-name,
html.light .price-name,
html.light .stat-number,
html.light .cta-copy strong {
color: #14243d !important;
}
html.light .service-card p,
html.light .project-body p,
html.light .member-role,
html.light .stage-card li,
html.light .stat-label,
html.light .stat-cap,
html.light .cta-copy span,
html.light .quote-text,
html.light .stage-lead {
color: #57699a !important;
}
/* Íconos de servicio */
html.light .service-icon {
background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(99,102,241,0.13)) !important;
border-color: rgba(37,99,235,0.34) !important;
color: #1d4ed8 !important;
}
html.light .service-card-num { color: rgba(37,99,235,0.5) !important; }
/* Glow decorativo de servicio: más sutil en claro */
html.light .service-card::after {
background: radial-gradient(circle, rgba(37,99,235,0.10), transparent 70%) !important;
}
/* =========================================================
PROYECTOS
========================================================= */
html.light .project-visual {
background: linear-gradient(150deg, #eef3fb 0%, #e4ebf7 100%) !important;
}
html.light .project-tag {
background: rgba(37,99,235,0.10) !important;
color: #1d4ed8 !important;
border-color: rgba(37,99,235,0.2) !important;
}
html.light .project-visual .glyph { color: rgba(37,99,235,0.5) !important; }
html.light .foot-cat { color: #64748b !important; }
html.light .cat-item { color: #475569 !important; border-color: rgba(15,23,42,0.12) !important; }
html.light .cat-item.is-active { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }
/* =========================================================
PRECIOS
========================================================= */
html.light .price-card.featured {
border-color: rgba(37,99,235,0.4) !important;
box-shadow: 0 20px 50px rgba(37,99,235,0.15) !important;
}
html.light .price-toggle-wrap { color: #64748b !important; }
html.light .price-toggle {
background: #e7edf6 !important;
border-color: rgba(15,23,42,0.1) !important;
}
html.light .price-toggle-btn { color: #64748b !important; }
html.light .price-toggle-btn.is-active { color: #0f1b30 !important; }
html.light .price-amount, html.light .price-currency { color: #0f1b30 !important; }
html.light .price-period, html.light .price-note, html.light .price-desc { color: #64748b !important; }
html.light .price-features li { color: #46587a !important; }
/* =========================================================
ROADMAP / TIMELINE / STAGES
========================================================= */
html.light .tl-line, html.light .roadmap-line { background: rgba(37,99,235,0.18) !important; }
html.light .tl-dot { background: #2563eb !important; box-shadow: 0 0 0 4px rgba(37,99,235,0.15) !important; }
html.light .tl-date, html.light .stage-foot { color: #64748b !important; }
/* =========================================================
EQUIPO / TESTIMONIOS
========================================================= */
html.light .member-photo, html.light .member-avatar {
border-color: rgba(37,99,235,0.25) !important;
}
html.light .quote-author { color: #14243d !important; }
html.light .quote-role { color: #64748b !important; }
html.light .quote::before { color: rgba(37,99,235,0.18) !important; }
html.light .member-socials a { color: #64748b !important; }
html.light .member-socials a:hover { color: #2563eb !important; }
/* =========================================================
FAQ
========================================================= */
html.light .faq-item summary { color: #14243d !important; }
html.light .faq-body, html.light .faq-body p { color: #57699a !important; }
html.light .faq-ico::before, html.light .faq-ico::after { background: #2563eb !important; }
/* =========================================================
CONTACTO + FORMULARIO
========================================================= */
html.light .contact-left h2, html.light .contact-left p { color: #24354f !important; }
html.light .form-label, html.light label { color: #475569 !important; }
html.light .form-input,
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="tel"],
html.light textarea,
html.light select {
background: #f6f9fd !important;
border: 1px solid rgba(15,23,42,0.14) !important;
color: #1e293b !important;
}
html.light .form-input:focus,
html.light input:focus,
html.light textarea:focus {
border-color: #2563eb !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}
html.light ::placeholder { color: #94a3b8 !important; }
html.light .contact-info-item, html.light .contact-detail { color: #475569 !important; }
html.light .contact-info-item a { color: #2563eb !important; }
/* =========================================================
BOTONES
========================================================= */
/* Primario (azul): se mantiene, se ve bien en claro */
html.light .btn-primary { color: #fff !important; }
/* Secundario: borde y texto oscuros */
html.light .btn-secondary {
background: #fff !important;
border-color: rgba(37,99,235,0.35) !important;
color: #1d4ed8 !important;
}
html.light .btn-secondary:hover { background: rgba(37,99,235,0.06) !important; }
/* Enlaces "Ver más / Ver caso" */
html.light .btn-link { color: #2563eb !important; }
html.light .btn-link:hover { color: #1e40af !important; }
/* =========================================================
MODAL
========================================================= */
html.light .zq-modal-overlay { background: rgba(15,23,42,0.45) !important; }
html.light .zq-modal {
background: #ffffff !important;
border-color: rgba(15,23,42,0.1) !important;
box-shadow: 0 30px 80px rgba(15,23,42,0.25) !important;
}
html.light .zq-modal-title { color: #0f1b30 !important; }
html.light .zq-modal-detail { color: #52648a !important; }
html.light .zq-modal-tag { background: rgba(8,145,178,0.1) !important; color: #0e7490 !important; border-color: rgba(8,145,178,0.25) !important; }
html.light .zq-modal-label { color: #64748b !important; }
html.light .zq-modal-chip { background: rgba(37,99,235,0.09) !important; color: #1d4ed8 !important; border-color: rgba(37,99,235,0.2) !important; }
html.light .zq-modal-close { background: #f1f5f9 !important; border-color: rgba(15,23,42,0.12) !important; color: #64748b !important; }
html.light .zq-modal-close:hover { color: #2563eb !important; background: rgba(37,99,235,0.08) !important; }
/* =========================================================
FOOTER
========================================================= */
html.light footer, html.light .footer {
background: #e7edf6 !important;
border-top: 1px solid rgba(15,23,42,0.08) !important;
}
html.light footer p, html.light .footer-copy, html.light .footer-tagline { color: #64748b !important; }
html.light .footer-links a { color: #475569 !important; }
html.light .footer-links a:hover { color: #2563eb !important; }
html.light .footer-brand, html.light .footer h3, html.light .footer-logo { color: #0f1b30 !important; }
html.light .footer-social a { color: #64748b !important; }
html.light .footer-social a:hover { color: #2563eb !important; }
/* Separadores */
html.light .section-divider {
background: linear-gradient(90deg, transparent, rgba(37,99,235,0.18) 50%, transparent) !important;
}
/* =========================================================
BOTÓN DE CAMBIO DE TEMA (sol / luna)
========================================================= */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid rgba(111,252,255,0.22);
background: rgba(15,23,42,0.5);
color: #6FFCFF;
cursor: pointer;
transition: color .25s ease, border-color .25s ease, background .25s ease, transform .2s ease;
flex-shrink: 0;
}
.theme-toggle:hover { transform: translateY(-2px); border-color: rgba(111,252,255,0.5); background: rgba(111,252,255,0.08); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .theme-ico-moon { display: none; }
.theme-toggle .theme-ico-sun { display: block; }
/* En modo claro, botón claro y mostramos la luna */
html.light .theme-toggle {
border-color: rgba(37,99,235,0.3);
background: #fff;
color: #2563eb;
box-shadow: 0 2px 10px rgba(15,23,42,0.06);
}
html.light .theme-toggle:hover { background: rgba(37,99,235,0.06); }
html.light .theme-toggle .theme-ico-moon { display: block; }
html.light .theme-toggle .theme-ico-sun { display: none; }
/* =========================================================
CORRECCIONES DE CONTRASTE (v2) — reportadas en capturas
========================================================= */
/* ─── HERO (se mantiene oscuro): sus textos deben seguir CLAROS ─── */
html.light .hero-left h1 { color: #eef4ff !important; }
html.light .hero-left p { color: #c3d0e6 !important; }
html.light .hero-metrics .hm-num { color: #ffffff !important; }
html.light .hero-metrics .hm-label { color: #94a3b8 !important; }
html.light .hero .badge,
html.light .hero-badge { color: #dbe7ff !important; }
html.light .hero-chip { color: #cfe0ff !important; }
/* ─── PROCESO (¿Cómo trabajamos?) — tarjetas a claro ─── */
html.light .process-step {
background: var(--zq-surface) !important;
border: 1px solid var(--zq-border) !important;
box-shadow: var(--zq-shadow) !important;
backdrop-filter: none !important;
}
html.light .process-step h3 { color: #14243d !important; }
html.light .process-step p { color: #47587a !important; }
html.light .step-num { color: rgba(37,99,235,0.5) !important; }
html.light .process-step-icon {
background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(99,102,241,0.13)) !important;
border-color: rgba(37,99,235,0.34) !important;
color: #1d4ed8 !important;
}
html.light .step-tags li {
background: rgba(37,99,235,0.07) !important;
border-color: rgba(37,99,235,0.18) !important;
color: #3956a8 !important;
}
/* ─── PANEL DE CATEGORÍAS (proyectos) — a claro ─── */
html.light .cat-panel {
background: #ffffff !important;
border: 1px solid rgba(15,23,42,0.09) !important;
box-shadow: 0 6px 24px rgba(15,23,42,0.06) !important;
}
html.light .cat-head { color: #64748b !important; }
html.light .cat-item, html.light .cat-item .cat-name { color: #475569 !important; }
html.light .cat-ico { color: #64748b !important; }
html.light .cat-count { color: #64748b !important; background: rgba(15,23,42,0.06) !important; }
html.light .cat-item.active,
html.light .cat-item:hover {
background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
border-color: transparent !important;
}
html.light .cat-item.active .cat-name,
html.light .cat-item.active .cat-ico,
html.light .cat-item:hover .cat-name,
html.light .cat-item:hover .cat-ico { color: #ffffff !important; }
html.light .cat-item.active .cat-count,
html.light .cat-item:hover .cat-count { color: #ffffff !important; background: rgba(255,255,255,0.22) !important; }
/* ─── TESTIMONIOS — tarjetas a claro ─── */
html.light .tcard {
background: #ffffff !important;
border: 1px solid rgba(15,23,42,0.09) !important;
box-shadow: 0 6px 24px rgba(15,23,42,0.06) !important;
backdrop-filter: none !important;
}
html.light .tcard blockquote { color: #46587a !important; }
html.light .tcard .tmeta strong { color: #14243d !important; }
html.light .tcard .tmeta span { color: #64748b !important; }
html.light .tavatar { color: #2563eb !important; background: rgba(37,99,235,0.10) !important; border-color: rgba(37,99,235,0.25) !important; }
html.light .tcard .tstars svg { color: #f59e0b !important; }
html.light .tcard::before, html.light .tcard::after { color: rgba(37,99,235,0.12) !important; }
/* ─── CAJAS DE CONTACTO (email, web, WhatsApp, ubicación) ─── */
html.light .contact-info-item {
background: #ffffff !important;
border: 1px solid rgba(15,23,42,0.09) !important;
color: #334155 !important;
box-shadow: 0 4px 16px rgba(15,23,42,0.05) !important;
}
html.light .contact-info-item:hover { border-color: rgba(37,99,235,0.30) !important; }
html.light .contact-info-icon { color: #1d4ed8 !important; background: rgba(37,99,235,0.16) !important; }
/* ─── MARQUEE de clientes ("Han confiado en nosotros") ─── */
html.light .marquee-item {
background: #ffffff !important;
border: 1px solid rgba(15,23,42,0.10) !important;
color: #475569 !important;
box-shadow: 0 2px 8px rgba(15,23,42,0.04) !important;
}
html.light .marquee-item svg { color: #2563eb !important; }
/* ─── FRANJA STACK TECNOLÓGICO ─── */
html.light .tech-strip {
background: linear-gradient(180deg, #dfe7f4 0%, #e7edf7 100%) !important;
}
html.light .tech-strip-label { color: #64748b !important; }
html.light .tech-item { background: rgba(15,23,42,0.94) !important; }
/* ─── PRECIOS: los montos deben tener buen contraste ─── */
html.light .price-value {
color: #0f1b30 !important;
-webkit-text-fill-color: #0f1b30 !important;
background: none !important;
}
html.light .price-value .price-cur {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
}
/* ─── ÍCONOS SOCIALES DEL FOOTER ─── */
html.light .footer-social a {
background: #ffffff !important;
border: 1px solid rgba(15,23,42,0.10) !important;
color: #64748b !important;
}
html.light .footer-social a:hover { color: #2563eb !important; border-color: rgba(37,99,235,0.30) !important; }
/* ─── HERO (v3): acento cian de la palabra animada + fondo elegante ─── */
html.light .hero-left h1 span { color: #6FFCFF !important; }
html.light .hero {
background:
radial-gradient(1000px circle at 72% 28%, rgba(59,130,246,0.18), transparent 55%),
linear-gradient(180deg, #070b1c 0%, #050816 100%) !important;
}
/* Acentos que deben conservar color (por si 'inherit' los deja apagados) */
html.light .grad-text,
html.light .accent,
html.light .text-cyan { color: #0e7490 !important; -webkit-text-fill-color: #0e7490 !important; background: none !important; }
/* =========================================================
v4 · PROFUNDIDAD (secciones claras) + HERO CLARO
========================================================= */
/* ─── Fondo un poco más gris para que los paneles blancos resalten ─── */
html.light body { background: #e4e9f3 !important; }
/* ─── Sombras marcadas + bordes definidos en TODOS los paneles ─── */
html.light .service-card,
html.light .stat-card,
html.light .stat-pill,
html.light .project-card,
html.light .price-card,
html.light .tl-step,
html.light .stage-card,
html.light .process-step,
html.light .member,
html.light .quote,
html.light .tcard,
html.light .faq-item,
html.light .cta-banner,
html.light .why-card,
html.light .cat-panel,
html.light .contact-left,
html.light .contact-right {
border: 1px solid var(--zq-border) !important;
box-shadow: var(--zq-shadow) !important;
}
/* ─── Cajas/inputs internos con fondo sutil (se diferencian del panel blanco) ─── */
html.light .contact-info-item {
background: #f3f6fc !important;
border: 1px solid rgba(15,23,42,0.08) !important;
box-shadow: none !important;
}
html.light .contact-info-item:hover {
background: #ffffff !important;
border-color: rgba(37,99,235,0.28) !important;
box-shadow: 0 4px 14px rgba(37,99,235,0.10) !important;
}
html.light .form-input,
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="tel"],
html.light textarea,
html.light select {
background: #f3f6fc !important;
border: 1px solid rgba(15,23,42,0.13) !important;
}
/* Contraste de texto un pelín más fuerte para lectura */
html.light p, html.light li { color: #3f5170 !important; }
html.light .service-card p,
html.light .project-body p,
html.light .stage-card li,
html.light .tcard blockquote,
html.light .price-features li,
html.light .faq-body { color: #4a5c7e !important; }
/* =========================================================
HERO CLARO (v4): fondo claro, texto oscuro, 3D sobre orbe
========================================================= */
html.light .hero {
background:
radial-gradient(760px circle at 74% 30%, rgba(59,130,246,0.10), transparent 58%),
linear-gradient(180deg, #eef3fb 0%, #e4eaf5 100%) !important;
}
html.light .hero-left h1 { color: #0f1b30 !important; }
html.light .hero-left h1 span { color: #2563eb !important; }
html.light .hero-left p { color: #52648a !important; }
html.light .hero-metrics .hm-num { color: #0f1b30 !important; }
html.light .hero-metrics .hm-label { color: #64748b !important; }
html.light .hero-metrics .hm-sep { background: rgba(15,23,42,0.14) !important; }
/* Badge del hero en claro */
html.light .hero .badge,
html.light .hero-badge {
background: rgba(37,99,235,0.08) !important;
border-color: rgba(37,99,235,0.22) !important;
color: #1d4ed8 !important;
}
html.light .hero .badge span,
html.light .hero-badge span { color: inherit !important; }
/* Chips del hero (Software, IA, Cloud, Seguridad) en claro */
html.light .hero-chip {
background: #ffffff !important;
border: 1px solid rgba(15,23,42,0.10) !important;
color: #334155 !important;
box-shadow: 0 2px 8px rgba(15,23,42,0.05) !important;
}
html.light .hero-chip span { color: inherit !important; }
/* ORBE oscuro detrás del 3D: sus líneas brillantes se siguen viendo
sobre el hero claro, integrándose como una esfera de datos. */
html.light .hero-3d {
background: radial-gradient(circle at 50% 46%,
rgba(6,10,26,0.96) 0%,
rgba(9,14,32,0.82) 38%,
rgba(12,18,42,0.35) 60%,
rgba(20,28,55,0.08) 72%,
transparent 80%) !important;
border-radius: 50% !important;
}
html.light .hero-3d-hint { color: #64748b !important; }
/* =========================================================
v5 · REVISIÓN COMPLETA — degradados de texto y elementos oscuros
========================================================= */
/* ─── Degradados de texto (invisibles en claro) → color sólido ─── */
html.light .stat-number,
html.light .stat-big,
html.light .hm-num,
html.light .price-custom,
html.light .contact-left h2 {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #0f1b30 !important;
color: #0f1b30 !important;
}
html.light .eyebrow .num,
html.light .head-title .accent {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #2563eb !important;
color: #2563eb !important;
}
/* el número de stat-pill (versión pequeña, azul sólido) que sí contrasta */
html.light .stat-pill .stat-big { -webkit-text-fill-color: #2563eb !important; color: #2563eb !important; }
/* ─── Botón flotante de WhatsApp: etiqueta legible en claro ─── */
html.light .wsp-label {
background: #ffffff !important;
color: #1e293b !important;
border: 1px solid rgba(15,23,42,0.10) !important;
box-shadow: 0 4px 14px rgba(15,23,42,0.10) !important;
}
/* ─── Roadmap: círculos oscuros → claros con ícono azul ─── */
html.light .tl-node {
background: radial-gradient(circle, rgba(37,99,235,0.12), #eef3fb 72%) !important;
border: 1px solid rgba(37,99,235,0.38) !important;
color: #2563eb !important;
box-shadow: 0 8px 22px rgba(37,99,235,0.14), inset 0 0 18px rgba(37,99,235,0.06) !important;
}
html.light .tl-node::before { border-color: rgba(37,99,235,0.30) !important; }
html.light .tl-year { color: #0f1b30 !important; }
html.light .tl-title, html.light .tl-caption { color: #14243d !important; }
/* ─── Barra de progreso de lectura (si tiene fondo oscuro) ─── */
html.light .read-progress, html.light .reading-bar { background: rgba(15,23,42,0.06) !important; }
/* ─── Botón "volver arriba" → claro ─── */
html.light .to-top {
background: #ffffff !important;
border: 1px solid rgba(37,99,235,0.30) !important;
color: #2563eb !important;
box-shadow: 0 8px 22px rgba(15,23,42,0.12) !important;
}
html.light .to-top:hover { background: rgba(37,99,235,0.06) !important; }
/* ─── Equipo: anillo de foto + nombre ─── */
html.light .member-ring { background: #eef3fb !important; }
html.light .member h3 { color: #0f1b30 !important; }
html.light .member-role { color: #64748b !important; }
/* =========================================================
v6 · Sección CONTACTO — quitar paneles blancos planos
Las columnas no llevan fondo (como en oscuro); solo las
cajas de contacto e inputs destacan sobre el fondo gris.
========================================================= */
html.light .contact-left,
html.light .contact-right {
background: none !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
html.light .contact-info-item {
background: #ffffff !important;
border: 1px solid rgba(15,23,42,0.08) !important;
box-shadow: 0 4px 16px rgba(15,23,42,0.07) !important;
}
html.light .contact-info-item:hover {
border-color: rgba(37,99,235,0.30) !important;
box-shadow: 0 8px 22px rgba(37,99,235,0.12) !important;
}
html.light .form-input,
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="tel"],
html.light textarea,
html.light select {
background: #ffffff !important;
border: 1px solid rgba(15,23,42,0.14) !important;
box-shadow: 0 2px 10px rgba(15,23,42,0.05) !important;
}
html.light .form-input:focus,
html.light input:focus,
html.light textarea:focus {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}
/* =========================================================
v7 · Las 3 correcciones finales del modo claro
========================================================= */
/* ─── 1) Botón WhatsApp: etiqueta limpia + glow verde más sutil ─── */
html.light .wsp-label {
background: #ffffff !important;
color: #14243d !important;
border: 1px solid rgba(15,23,42,0.10) !important;
box-shadow: 0 6px 18px rgba(15,23,42,0.12) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
html.light .wsp-btn { box-shadow: 0 8px 22px rgba(37,211,102,0.30) !important; }
/* ─── 2) Carrusel "Stack tecnológico": bordes claros + chips claros ─── */
/* Los bordes de la franja tenían un degradado NEGRO (#050816) que dejaba
manchas oscuras a los lados. Los pasamos al color claro de la franja. */
html.light .tech-strip::before { background: linear-gradient(90deg, #e9eef6, transparent) !important; }
html.light .tech-strip::after { background: linear-gradient(-90deg, #e9eef6, transparent) !important; }
html.light .tech-strip { background: linear-gradient(180deg, #dfe7f4 0%, #e7edf7 100%) !important; }
html.light .tech-strip-label { color: #64748b !important; }
/* Chips en claro: fondo blanco, texto oscuro legible, borde de color sutil */
html.light .tech-item {
background: #ffffff !important;
color: #1e293b !important;
border-width: 1.5px !important;
box-shadow: 0 2px 10px rgba(15,23,42,0.06) !important;
}
/* ─── 3) Fondo de la animación 3D: nebulosa azul (no "agujero negro") ─── */
html.light .hero-3d {
background: radial-gradient(circle at 50% 46%,
rgba(10,16,42,0.92) 0%,
rgba(16,24,56,0.70) 30%,
rgba(30,46,96,0.34) 50%,
rgba(62,95,168,0.12) 66%,
rgba(120,150,220,0.03) 74%,
transparent 80%) !important;
}
/* ─── WhatsApp flotante: quitar la sombra oscura (se veía como bloque gris) ─── */
html.light .wsp-float {
box-shadow: none !important;
border-radius: 0 !important;
}
/* =========================================================
v8 · Fondo del 3D como "visor" definido (no orbe difuso)
========================================================= */
html.light .hero-3d {
background:
radial-gradient(ellipse 72% 60% at 50% 40%, rgba(34,54,116,0.55), transparent 72%),
linear-gradient(158deg, #0f1a3c 0%, #0a1126 100%) !important;
border-radius: 26px !important;
border: 1px solid rgba(59,130,246,0.22) !important;
box-shadow:
0 26px 64px rgba(10,20,52,0.30),
inset 0 1px 0 rgba(255,255,255,0.06),
inset 0 0 70px rgba(0,0,0,0.28) !important;
overflow: hidden !important;
}
html.light .hero-3d-hint {
color: #9fb2d4 !important;
background: rgba(15,23,42,0.6) !important;
}
/* =========================================================
VITRINA "PRODUCTOS EN VIVO" (agregada después)
En claro las tarjetas son blancas como el resto del sitio;
el texto lo resuelven las reglas generales de h4 / p / li.
========================================================= */
html.light .product-card {
background: #ffffff !important;
border: 1px solid var(--zq-border) !important;
box-shadow: var(--zq-shadow) !important;
}
html.light .product-card:hover {
border-color: var(--zq-border-hover) !important;
box-shadow: var(--zq-shadow-hover) !important;
}
html.light .product-icon { background: rgba(37,99,235,0.10) !important; }
html.light .product-tags span {
background: rgba(37,99,235,0.10) !important;
border-color: rgba(37,99,235,0.28) !important;
}
html.light .live-badge {
background: rgba(5,150,105,0.10) !important;
border-color: rgba(5,150,105,0.45) !important;
color: #047857 !important;
}
html.light .product-note { color: #5b6b88 !important; }
/* =========================================================
HUECOS DEL TEMA CLARO (auditoría 27 jul 2026)
Componentes que nunca tuvieron reglas en claro y se
quedaban con el estilizado del tema oscuro encima.
========================================================= */
/* ─── Galería: los mosaicos eran azul marino sólido ─────────
Las capturas se ven bien, pero el mosaico de fondo y los
marcadores sin foto quedaban como cajas negras. */
html.light .gallery-item {
background:
radial-gradient(circle at 30% 25%, rgba(37,99,235,0.10), transparent 60%),
linear-gradient(135deg, #ffffff, #f4f7fc) !important;
border: 1px solid rgba(15,23,42,0.12) !important;
box-shadow:
0 1px 2px rgba(15,23,42,0.06),
0 12px 26px -8px rgba(15,23,42,0.12) !important;
}
html.light .gallery-ph-icon {
background: rgba(37,99,235,0.10) !important;
border-color: rgba(37,99,235,0.28) !important;
}
html.light .gallery-ph-icon svg { stroke: #1d4ed8 !important; }
html.light .gallery-ph-name { color: #1e2c44 !important; }
/* El velo sobre la foto SÍ debe seguir siendo oscuro: es lo que
hace legible el título encima de la imagen. */
html.light .gallery-overlay strong { color: #ffffff !important; }
html.light .gallery-overlay span { color: #c7d5f0 !important; }
/* ─── Modal: la caja de "resultado" tenía texto casi blanco
sobre el modal claro, así que quedaba invisible. ───────── */
html.light .zq-modal-result {
background: rgba(5,150,105,0.08) !important;
border-color: rgba(5,150,105,0.3) !important;
color: #1f3b30 !important;
}
html.light .zq-modal-result-ico {
background: rgba(5,150,105,0.16) !important;
color: #047857 !important;
}
/* ─── Carrusel de clientes / autores ───────────────────────── */
html.light .tmeta strong { color: #1e2c44 !important; }
html.light .tmeta span { color: #5b6b88 !important; }
/* ─── Nota al pie de precios ───────────────────────────────── */
html.light .pricing-foot {
background: rgba(37,99,235,0.05) !important;
border-color: rgba(37,99,235,0.18) !important;
color: #3d4c66 !important;
}
/* ─── Aviso emergente (toast) ──────────────────────────────── */
html.light #zq-toast {
background: #ffffff !important;
border-color: rgba(15,23,42,0.14) !important;
box-shadow: 0 1px 2px rgba(15,23,42,0.08), 0 20px 44px -10px rgba(15,23,42,0.24) !important;
}
html.light #zq-toast .toast-title { color: #0f1b30 !important; }
html.light #zq-toast .toast-msg { color: #47587a !important; }
html.light #zq-toast .toast-close { color: #64748b !important; }
/* ─── Insignia "Más popular" del plan destacado ────────────── */
html.light .price-card .price-badge { color: #ffffff !important; }
/* ========================================================================
ORIGEN: responsive-fixes.css
======================================================================== */
/* =========================================================================
ZAQORI · responsive-fixes.css
-------------------------------------------------------------------------
Correcciones responsivas para tablet y celular.
IMPORTANTE: este archivo debe cargarse AL FINAL, después de fixes.css,
para que sus reglas tengan prioridad. (Ver instrucciones del chat.)
Si en algún momento quieres deshacer estos cambios, basta con quitar
la línea del index.html.
========================================================================= */
/* -------------------------------------------------------------------------
1) RED DE SEGURIDAD GLOBAL
Evita el problema #1 en móvil: que un elemento ancho "empuje" la página
y haga que todo se vea encogido o con scroll horizontal.
overflow-x: clip no rompe el menú fijo ni el scroll a las anclas (#roadmap).
------------------------------------------------------------------------- */
html, body {
overflow-x: clip; /* corta cualquier desborde lateral accidental */
max-width: 100%;
}
/* Ninguna imagen o video puede ser más ancho que su contenedor.
(Solo limita el ancho; NO toca la altura, para no romper las celdas
de la galería que usan object-fit: cover.) */
img, video, iframe {
max-width: 100%;
}
/* Palabras o enlaces muy largos no rompen el layout en pantallas chicas. */
p, li, h1, h2, h3, .stage-lead, .gallery-overlay strong {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* -------------------------------------------------------------------------
2) GALERÍA — TABLET / MÓVIL GRANDE (601px a 900px)
En 2 columnas las celdas eran muy bajas (150px) y las capturas se veían
apretadas. Les damos algo más de alto para que se aprecien mejor.
------------------------------------------------------------------------- */
@media (max-width: 900px) and (min-width: 601px) {
.gallery-grid {
grid-auto-rows: 190px;
gap: 14px;
}
.gallery-item { min-height: 190px; }
}
/* -------------------------------------------------------------------------
3) GALERÍA — CELULAR (600px o menos) ← el arreglo principal
Pasa de 2 columnas apretadas a 1 columna ancha, con tarjetas más altas
para que cada captura se vea completa y legible.
------------------------------------------------------------------------- */
@media (max-width: 600px) {
.gallery-grid {
grid-template-columns: 1fr; /* una sola columna */
grid-auto-rows: 220px; /* tarjetas más altas */
gap: 14px;
}
/* todas las tarjetas ocupan el ancho completo, incluida la destacada */
.gallery-item,
.gallery-item.feat {
grid-column: auto;
grid-row: auto;
min-height: 220px;
}
}
/* -------------------------------------------------------------------------
4) PANTALLAS TÁCTILES — mostrar los títulos sin "hover"
En celular/tablet no hay cursor, así que el overlay con el nombre del
proyecto nunca aparecía. Aquí lo dejamos visible, pero SOLO en las
tarjetas que ya tienen una foto real (las que aún son marcador
conservan su etiqueta centrada y no se duplican textos).
------------------------------------------------------------------------- */
@media (hover: none) {
.gallery-item:has(img) .gallery-overlay {
opacity: 1;
background: linear-gradient(to top, rgba(5,8,22,0.92), transparent 62%);
}
}
/* -------------------------------------------------------------------------
5) AJUSTES FINOS DE MÓVIL (480px o menos)
Respiros de espaciado para que nada quede pegado a los bordes.
------------------------------------------------------------------------- */
@media (max-width: 480px) {
.gallery-block { padding-left: 4px; padding-right: 4px; }
.gallery-sub { font-size: 14px; line-height: 1.5; }
/* el timeline ya es vertical; solo evitamos que el texto quede muy junto */
.stage-card { padding: 18px 16px; }
}