/* ============================================================
   ECLIPSE ORBIT — orbit.css
   Identidad visual propia: azul profundo + negro, acentos cian.
   Reutiliza variables de styles.css (--verde1 como acento cian).
   ============================================================ */

:root {
    --orbit-bg1: #050B1F;
    --orbit-bg2: #0A1628;
    --orbit-bg3: #0C1B33;
    --orbit-card: #0B1830;
    --orbit-line: rgba(0, 201, 184, 0.18);
    --orbit-cyan: #00C9B8;
    --orbit-cyan-glow: rgba(0, 201, 184, 0.30);
    --orbit-blue-accent: #3B82F6;
    --orbit-gradient: linear-gradient(135deg, #00C9B8 0%, #3B82F6 100%);
}

.Main_Orbit { background: var(--orbit-bg1); overflow-x: clip; }

.D_OrbitInner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--gap-2xl) var(--px-section);
}

.D_OrbitSectionHead { max-width: 720px; margin-bottom: var(--gap-xl); }

.Span_OrbitEyebrow {
    display: inline-block;
    margin-bottom: var(--gap-sm);
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--orbit-line);
    border-radius: var(--radius-full);
    background: rgba(0, 201, 184, 0.08);
    color: var(--orbit-cyan);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.H2_OrbitSection {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    color: var(--blanco);
    line-height: 1.2;
    margin: 0 0 var(--gap-sm);
}

.P_OrbitSectionDesc { color: var(--blanco-opaco2); font-size: var(--fs-md); line-height: 1.6; }
.P_OrbitFinePrint { color: var(--blanco-opaco2); font-size: var(--fs-xs); margin-top: var(--gap-md); max-width: 640px; }

/* ---- Breadcrumb ---- */
.D_OrbitBreadcrumb {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: calc(5.8rem + var(--gap-lg)) var(--px-section) var(--gap-sm);
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    color: var(--blanco-opaco2);
    font-size: var(--fs-sm);
}
.D_OrbitBreadcrumb a { color: var(--orbit-cyan); font-weight: var(--fw-semibold); transition: color var(--t-fast); }
.D_OrbitBreadcrumb a:hover { color: var(--blanco); }

/* ---- Botones ---- */
.A_OrbitBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    padding: 0.86rem 1.4rem; border-radius: var(--radius-full);
    font-size: var(--fs-sm); font-weight: var(--fw-black); text-align: center;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.A_OrbitBtn--primary { background: var(--orbit-gradient); color: #041018; box-shadow: 0 10px 30px var(--orbit-cyan-glow); }
.A_OrbitBtn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px var(--orbit-cyan-glow); }
.A_OrbitBtn--ghost { background: rgba(255,255,255,0.04); color: var(--blanco); border: 1px solid var(--orbit-line); }
.A_OrbitBtn--ghost:hover { border-color: var(--orbit-cyan); color: var(--orbit-cyan); }
.A_OrbitBtn--plan { width: 100%; background: rgba(0,201,184,0.10); color: var(--orbit-cyan); border: 1px solid var(--orbit-line); margin-top: var(--gap-md); }
.A_OrbitBtn--plan:hover { background: var(--orbit-gradient); color: #041018; }

/* ---- HERO ---- */
.S_OrbitHero { background: radial-gradient(ellipse at 30% 0%, var(--orbit-bg3) 0%, var(--orbit-bg1) 65%); position: relative; }
.D_OrbitHeroInner {
    max-width: var(--max-width); margin: 0 auto; padding: var(--gap-xl) var(--px-section) var(--gap-2xl);
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap-2xl); align-items: center;
}
.H1_OrbitHero { font-family: var(--font-display); font-size: var(--fs-hero); color: var(--blanco); line-height: 1.12; margin: var(--gap-sm) 0 var(--gap-md); }
.P_OrbitHeroDesc { color: var(--blanco-opaco1); font-size: var(--fs-lg); line-height: 1.6; margin-bottom: var(--gap-sm); }
.P_OrbitMicrocopy { color: var(--blanco-opaco2); font-size: var(--fs-sm); margin-bottom: var(--gap-lg); }
.D_OrbitHeroActions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }

.D_OrbitSystem { position: relative; aspect-ratio: 1 / 1; max-width: 420px; margin: 0 auto; }
.D_OrbitOrbitRing { position: absolute; inset: 0; border: 1px solid var(--orbit-line); border-radius: 50%; }
.D_OrbitOrbitRing--mid { inset: 15%; border-color: rgba(59,130,246,0.25); animation: orbit-spin 26s linear infinite; }
.D_OrbitOrbitRing--outer { animation: orbit-spin 40s linear infinite reverse; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.Span_OrbitNode {
    position: absolute; width: 46px; height: 46px; border-radius: 50%;
    background: var(--orbit-card); border: 1px solid var(--orbit-line);
    display: flex; align-items: center; justify-content: center; color: var(--orbit-cyan); font-size: 1.1rem;
    box-shadow: 0 0 24px var(--orbit-cyan-glow);
}
.Span_OrbitNode--one { top: 6%; left: 48%; }
.Span_OrbitNode--two { top: 48%; right: 2%; }
.Span_OrbitNode--three { bottom: 8%; left: 12%; }
.D_OrbitCore {
    position: absolute; inset: 30%; border-radius: 50%; background: var(--orbit-gradient);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
    color: #041018; text-align: center; padding: var(--gap-sm); box-shadow: 0 0 50px var(--orbit-cyan-glow);
}
.D_OrbitCore i { font-size: 1.6rem; }
.D_OrbitCore b { font-size: var(--fs-sm); font-weight: var(--fw-black); }

/* ---- DIAGNOSTICO ---- */
.S_OrbitDiagnostic { background: var(--orbit-bg2); }
.D_OrbitDiagnosticLayout { }
.Ul_OrbitChecklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-sm) var(--gap-lg); list-style: none; padding: 0; margin: 0 0 var(--gap-xl); }
.D_OrbitCheckItem {
    display: flex; gap: 0.7rem; align-items: flex-start; padding: var(--gap-sm) var(--gap-md);
    background: var(--orbit-card); border: 1px solid var(--orbit-line); border-radius: var(--radius-md);
    color: var(--blanco-opaco1); font-size: var(--fs-sm); line-height: 1.5;
}
.D_OrbitCheckItem i { color: var(--orbit-cyan); margin-top: 0.15rem; }
.D_OrbitDiagnosticClose {
    border-top: 1px solid var(--orbit-line); padding-top: var(--gap-lg);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-md);
}
.D_OrbitDiagnosticClose p { color: var(--blanco); font-size: var(--fs-md); font-weight: var(--fw-semibold); max-width: 620px; margin: 0; }

/* ---- SOLUCIONES ---- */
.D_OrbitSolutionsGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.D_OrbitSolutionCard {
    position: relative; padding: var(--gap-lg) var(--gap-md) var(--gap-md); border-radius: var(--radius-lg);
    background: var(--orbit-card); border: 1px solid var(--orbit-line); transition: transform var(--t-fast), border-color var(--t-fast);
}
.D_OrbitSolutionCard:hover { transform: translateY(-4px); border-color: var(--orbit-cyan); }
.D_OrbitSolutionCard i { font-size: 1.5rem; color: var(--orbit-cyan); margin-bottom: var(--gap-sm); }
.D_OrbitSolutionCard h3 { color: var(--blanco); font-size: var(--fs-md); margin: 0 0 0.4rem; }
.D_OrbitSolutionCard p { color: var(--blanco-opaco2); font-size: var(--fs-sm); line-height: 1.5; margin: 0; }
.Span_OrbitComplexity {
    position: absolute; top: var(--gap-sm); right: var(--gap-sm); font-size: 0.65rem; font-weight: var(--fw-bold);
    text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); letter-spacing: 0.04em;
}
.Span_OrbitComplexity--básico, .Span_OrbitComplexity--basic { background: rgba(0,201,184,0.15); color: var(--orbit-cyan); }
.Span_OrbitComplexity--medio, .Span_OrbitComplexity--medium { background: rgba(59,130,246,0.18); color: var(--orbit-blue-accent); }
.Span_OrbitComplexity--avanzado, .Span_OrbitComplexity--advanced { background: rgba(245,184,66,0.15); color: var(--dorado1); }

/* ---- INCLUYE ---- */
.S_OrbitIncludes { background: var(--orbit-bg2); }
.Ul_OrbitIncludes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem var(--gap-lg); }
.Ul_OrbitIncludes li { display: flex; gap: 0.6rem; color: var(--blanco-opaco1); font-size: var(--fs-sm); }
.Ul_OrbitIncludes i { color: var(--orbit-cyan); }

/* ---- MODELOS DE PRECIO ---- */
.D_OrbitPricingGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); align-items: stretch; }
.D_OrbitPricingCard {
    position: relative; display: flex; flex-direction: column; padding: var(--gap-lg) var(--gap-md);
    background: var(--orbit-card); border: 1px solid var(--orbit-line); border-radius: var(--radius-lg);
}
.D_OrbitPricingCard--featured { border-color: var(--orbit-cyan); box-shadow: 0 0 40px var(--orbit-cyan-glow); }
.Span_OrbitPricingBadge {
    position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%);
    background: var(--orbit-gradient); color: #041018; font-size: 0.68rem; font-weight: var(--fw-black);
    padding: 0.35rem 0.9rem; border-radius: var(--radius-full); text-transform: uppercase;
}
.D_OrbitPricingCard h3 { color: var(--blanco); font-size: var(--fs-lg); margin: 0 0 0.3rem; }
.P_OrbitPricingTagline { color: var(--orbit-cyan); font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: 0 0 0.5rem; }
.P_OrbitPricingIdeal { color: var(--blanco-opaco2); font-size: var(--fs-xs); margin: 0 0 var(--gap-sm); line-height: 1.5; }
.P_OrbitPricingValue { margin: 0 0 var(--gap-sm); color: var(--blanco); }
.Span_OrbitPriceLabel { font-size: var(--fs-xs); color: var(--blanco-opaco2); display: block; }
.P_OrbitPricingValue strong { font-size: var(--fs-2xl); font-family: var(--font-display); color: var(--blanco); }
.Span_OrbitPeriod { font-size: var(--fs-xs); color: var(--blanco-opaco2); }
.D_OrbitPricingCard ul { list-style: none; padding: 0; margin: 0 0 var(--gap-sm); flex-grow: 1; }
.D_OrbitPricingCard ul li { display: flex; gap: 0.5rem; font-size: var(--fs-xs); color: var(--blanco-opaco1); padding: 0.25rem 0; }
.D_OrbitPricingCard ul li i { color: var(--orbit-cyan); }
.P_OrbitPricingNote { font-size: var(--fs-xs); color: var(--blanco-opaco2); font-style: italic; margin-bottom: var(--gap-sm); }

/* ---- TRACCION / BONIFICACION ---- */
.S_OrbitTraction { background: var(--orbit-bg2); }
.D_OrbitTractionGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
.D_OrbitTractionLevel {
    padding: var(--gap-md); text-align: center; background: var(--orbit-card);
    border: 1px solid var(--orbit-line); border-radius: var(--radius-lg); position: relative; overflow: hidden;
}
.D_OrbitTractionLevel::before {
    content: ''; position: absolute; inset: auto 0 0 0; height: 4px; width: var(--orbit-bar, 0%);
    background: var(--orbit-gradient); transition: width var(--t-slow);
}
.D_OrbitTractionLevel span { display: block; color: var(--blanco-opaco2); font-size: var(--fs-xs); margin-bottom: 0.3rem; }
.D_OrbitTractionLevel strong { display: block; font-size: var(--fs-2xl); color: var(--orbit-cyan); font-family: var(--font-display); }
.D_OrbitTractionLevel small { color: var(--blanco-opaco1); font-size: var(--fs-xs); }

/* ---- PROCESO ---- */
.D_OrbitProcessList { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.D_OrbitProcessStep { padding: var(--gap-md); border-left: 2px solid var(--orbit-line); }
.Span_OrbitStepNum { display: block; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--orbit-cyan); margin-bottom: 0.3rem; }
.D_OrbitProcessStep h3 { color: var(--blanco); font-size: var(--fs-md); margin: 0 0 0.3rem; }
.D_OrbitProcessStep p { color: var(--blanco-opaco2); font-size: var(--fs-sm); margin: 0; line-height: 1.5; }

/* ---- SECTORES ---- */
.S_OrbitSectors { background: var(--orbit-bg2); }
.D_OrbitSectorsGrid { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.D_OrbitSectorTag {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem;
    background: var(--orbit-card); border: 1px solid var(--orbit-line); border-radius: var(--radius-full);
    color: var(--blanco-opaco1); font-size: var(--fs-sm);
}
.D_OrbitSectorTag i { color: var(--orbit-cyan); }

/* ---- FAQ ---- */
.D_OrbitFaqLayout { max-width: 900px; }
.D_OrbitFaqItem { border-bottom: 1px solid var(--orbit-line); }
.D_OrbitFaqItem button {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--gap-sm);
    padding: var(--gap-md) 0; background: none; border: none; color: var(--blanco); font-size: var(--fs-md);
    font-weight: var(--fw-semibold); text-align: left; cursor: pointer;
}
.D_OrbitFaqItem button i { color: var(--orbit-cyan); transition: transform var(--t-fast); }
.D_OrbitFaqItem button[aria-expanded="true"] i { transform: rotate(45deg); }
.D_OrbitFaqItem div[role="region"] { padding: 0 0 var(--gap-md); color: var(--blanco-opaco2); font-size: var(--fs-sm); line-height: 1.6; }

/* ---- CTA FINAL ---- */
.D_OrbitFinalBox { text-align: center; max-width: 700px; margin: 0 auto; }
.D_OrbitFinalBox p { color: var(--blanco-opaco1); font-size: var(--fs-md); margin-bottom: var(--gap-lg); }
.D_OrbitFinalBox .D_OrbitHeroActions { justify-content: center; }

/* ---- FORMULARIO (dentro de S_OrbitContacto, reusa S_Contacto base de styles.css) ---- */
.S_OrbitContacto .D_FormRow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
.S_OrbitContacto .L_Form {
    display: flex; flex-direction: column; gap: 0.4rem; color: var(--blanco-opaco1); font-size: var(--fs-sm);
    font-weight: var(--fw-semibold); margin-bottom: var(--gap-sm);
}
.S_OrbitContacto .L_Form input,
.S_OrbitContacto .L_Form select,
.S_OrbitContacto .L_Form textarea {
    background: rgba(255,255,255,0.04); border: 1px solid var(--orbit-line); border-radius: var(--radius-md);
    padding: 0.75rem 1rem; color: var(--blanco); font-size: var(--fs-sm); font-family: var(--font-body); font-weight: var(--fw-regular);
    transition: border-color var(--t-fast);
}
.S_OrbitContacto .L_Form input:focus,
.S_OrbitContacto .L_Form select:focus,
.S_OrbitContacto .L_Form textarea:focus { outline: none; border-color: var(--orbit-cyan); }
.Fs_OrbitCheck {
    border: 1px solid var(--orbit-line); border-radius: var(--radius-md); padding: var(--gap-sm) var(--gap-md);
    margin-bottom: var(--gap-sm); display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem;
}
.Fs_OrbitCheck legend { padding: 0 0.5rem; color: var(--orbit-cyan); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; }
.Fs_OrbitCheck label { display: flex; align-items: center; gap: 0.4rem; color: var(--blanco-opaco1); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.F_Honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.P_FormMsg { margin-top: var(--gap-sm); font-size: var(--fs-sm); min-height: 1.2em; }
.P_FormMsg--ok { color: var(--orbit-cyan); }
.P_FormMsg--err { color: #ff6b6b; }

/* ---- Animaciones de entrada (igual filosofia que propulsion.css) ---- */
.orbit-anim { opacity: 0; transform: translateY(16px); animation: orbit-fade-up 0.7s ease forwards; }
.orbit-anim.anim-delay-1 { animation-delay: 0.08s; }
@keyframes orbit-fade-up { to { opacity: 1; transform: none; } }

.P_OrbitDisabled { color: var(--blanco-opaco2); padding: var(--gap-2xl) 0; text-align: center; font-size: var(--fs-lg); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .D_OrbitHeroInner { grid-template-columns: 1fr; }
    .D_OrbitSystem { max-width: 320px; }
    .D_OrbitSolutionsGrid { grid-template-columns: repeat(2, 1fr); }
    .D_OrbitPricingGrid { grid-template-columns: repeat(2, 1fr); }
    .D_OrbitProcessList { grid-template-columns: repeat(2, 1fr); }
    .D_OrbitTractionGrid { grid-template-columns: repeat(3, 1fr); }
    .Ul_OrbitChecklist,
    .Ul_OrbitIncludes { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .D_OrbitSolutionsGrid,
    .D_OrbitPricingGrid,
    .D_OrbitProcessList { grid-template-columns: 1fr; }
    .D_OrbitTractionGrid { grid-template-columns: 1fr; }
    .S_OrbitContacto .D_FormRow { grid-template-columns: 1fr; }
    .D_OrbitDiagnosticClose { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .orbit-anim { opacity: 1; transform: none; animation: none; }
    .D_OrbitOrbitRing--mid, .D_OrbitOrbitRing--outer { animation: none; }
    .D_OrbitSolutionCard:hover { transform: none; }
}