/* ===========================
   NEXUSopti · web v2 · 31-10-2026
   Fuentes y logos servidos desde /assets: la web no carga nada de terceros.
=========================== */

@font-face { font-family: 'Rajdhani'; font-weight: 500; font-display: swap; src: url('../assets/fonts/rajdhani-500.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 600; font-display: swap; src: url('../assets/fonts/rajdhani-600.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url('../assets/fonts/rajdhani-700.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 300; font-display: swap; src: url('../assets/fonts/source-sans-3-300.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-display: swap; src: url('../assets/fonts/source-sans-3-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-display: swap; src: url('../assets/fonts/source-sans-3-600.woff2') format('woff2'); }

:root {
  --azul-profundo: #071525;
  --azul-medio:    #0D2340;
  --azul-nexo:     #0B3D91;
  --azul-claro:    #1565C0;
  --azul-brillo:   #4FA3FF;
  --naranja:       #FF6B1A;
  --naranja-suave: #FF8C42;
  --verde:         #00C853;
  --verde-suave:   #43E97B;
  --blanco:        #F0F6FF;
  --gris-texto:    #A8C0D6;
  --gris-tenue:    #6F88A3;
  --borde:         rgba(255,255,255,0.09);
  --tarjeta:       rgba(13,35,64,0.62);
  --radio:         16px;
  --ancho:         1160px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background: var(--azul-profundo);
  color: var(--blanco);
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, h4, .marca { font-family: 'Rajdhani', system-ui, sans-serif; line-height: 1.12; letter-spacing: 0.01em; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 720px) { .container { padding: 0 2rem; } }

#canvas-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; }
main, nav, footer { position: relative; z-index: 1; }

/* ---------- NAV ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1rem; transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
nav.scrolled { background: rgba(7,21,37,0.92); backdrop-filter: blur(10px); border-color: var(--borde); }
@media (min-width: 720px) { nav { padding: 1rem 2rem; } }
.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-size: 1.45rem; font-weight: 700; }
.marca img { width: 38px; height: 38px; object-fit: contain; }
.marca .nexus { color: var(--blanco); }
.marca .opti { color: var(--naranja); font-weight: 500; }
.nav-links { list-style: none; display: none; gap: 1.6rem; align-items: center; }
.nav-links a { text-decoration: none; color: var(--gris-texto); font-weight: 600; font-size: .95rem; transition: color .2s; }
.nav-links a:hover { color: var(--blanco); }
.nav-links .nav-cta { color: var(--azul-profundo); background: var(--naranja); padding: .5rem 1rem; border-radius: 999px; }
.nav-links .nav-cta:hover { color: var(--azul-profundo); background: var(--naranja-suave); }
.hamburger { background: none; border: 0; cursor: pointer; padding: .4rem; display: flex; flex-direction: column; gap: 5px; }
.hamburger span { width: 24px; height: 2px; background: var(--blanco); border-radius: 2px; }
.nav-links.open {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
  position: absolute; top: 100%; left: 0; right: 0; padding: 1.4rem 1rem 1.6rem;
  background: rgba(7,21,37,0.98); border-bottom: 1px solid var(--borde);
}
@media (min-width: 900px) {
  .nav-links, .nav-links.open { display: flex; flex-direction: row; position: static; padding: 0; background: none; border: 0; align-items: center; }
  .hamburger { display: none; }
}

/* ---------- BOTONES ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s, background .2s, border-color .2s; font-family: inherit; }
.btn:hover { transform: translateY(-2px); }
.btn-primario { background: var(--naranja); color: var(--azul-profundo); box-shadow: 0 0 28px rgba(255,107,26,.3); }
.btn-primario:hover { background: var(--naranja-suave); }
.btn-wa { background: #25D366; color: #06210f; }
.btn-wa:hover { background: #3be27a; }
.btn-secundario { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,.25); }
.btn-secundario:hover { border-color: var(--blanco); }
.ico { width: 1.15em; height: 1.15em; display: inline-block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; flex: none; }

/* ---------- SECCIONES ---------- */
section { padding: 5rem 0; }
@media (min-width: 720px) { section { padding: 6.5rem 0; } }
.etiqueta { display: inline-block; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja); margin-bottom: .8rem; }
.titulo { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 700; margin-bottom: 1rem; }
.titulo em { font-style: normal; color: var(--naranja); }
.intro { color: var(--gris-texto); font-size: 1.1rem; max-width: 720px; }
.cabecera { margin-bottom: 2.8rem; }
.cabecera.centro { text-align: center; }
.cabecera.centro .intro { margin: 0 auto; }

/* ---------- HERO ---------- */
#inicio { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 7.5rem 0 4rem; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.25fr .75fr; } }
.insignia { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem; border: 1px solid rgba(0,200,83,.35); background: rgba(0,200,83,.08); border-radius: 999px; color: var(--verde-suave); font-size: .9rem; font-weight: 600; margin-bottom: 1.4rem; }
.insignia::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.hero-titulo { font-size: clamp(2.4rem, 6.4vw, 4.4rem); font-weight: 700; margin-bottom: 1.3rem; }
.hero-titulo .acento { color: var(--naranja); }
.hero-sub { color: var(--gris-texto); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 620px; margin-bottom: 2rem; }
.hero-botones { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-logo { width: min(340px, 55vw); margin: 0 auto; filter: drop-shadow(0 0 40px rgba(21,101,192,.45)); animation: flota 7s ease-in-out infinite; }
@keyframes flota { 50% { transform: translateY(-12px); } }
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 3.2rem; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
@media (min-width: 720px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifra { background: rgba(7,21,37,.88); padding: 1.3rem 1rem; text-align: center; }
.cifra b { display: block; font-family: 'Rajdhani', sans-serif; font-size: 2rem; color: var(--blanco); line-height: 1.1; }
.cifra span { color: var(--gris-texto); font-size: .9rem; }

/* ---------- CONFIANZA (logos) ---------- */
#confianza { padding: 3.5rem 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: rgba(13,35,64,.35); }
#confianza p { text-align: center; color: var(--gris-texto); margin-bottom: 1.8rem; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.2rem 3.2rem; }
.logos img { height: 46px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; transition: opacity .2s; }
.logos img:hover { opacity: 1; }
.logos img.alto { height: 58px; }

/* ---------- SERVICIOS ---------- */
.dos-servicios { display: grid; gap: 1.2rem; margin-bottom: 4.5rem; }
@media (min-width: 820px) { .dos-servicios { grid-template-columns: 1fr 1fr; } }
.servicio { padding: 2rem 1.6rem; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--tarjeta); text-decoration: none; display: block; transition: border-color .2s, transform .2s; }
.servicio:hover { transform: translateY(-3px); border-color: rgba(255,107,26,.45); }
.servicio .num { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--naranja); letter-spacing: .1em; }
.servicio h3 { font-size: 1.8rem; margin: .4rem 0 .7rem; }
.servicio p { color: var(--gris-texto); }
.servicio .mas { display: inline-block; margin-top: 1.1rem; color: var(--naranja); font-weight: 600; }

.niveles { display: grid; gap: 1.2rem; }
@media (min-width: 960px) { .niveles { grid-template-columns: repeat(3, 1fr); } }
.nivel { position: relative; padding: 2rem 1.6rem 1.8rem; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--tarjeta); display: flex; flex-direction: column; }
.nivel::before { content: ''; position: absolute; top: 0; left: 1.6rem; right: 1.6rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.nivel .n { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--c); letter-spacing: .12em; font-size: .9rem; }
.nivel h3 { font-size: 2rem; margin: .2rem 0 .3rem; }
.nivel .para { color: var(--blanco); font-weight: 600; margin-bottom: 1rem; }
.nivel ul { list-style: none; display: grid; gap: .55rem; margin-bottom: 1.4rem; }
.nivel li { color: var(--gris-texto); padding-left: 1.4rem; position: relative; }
.nivel li::before { content: '›'; position: absolute; left: .2rem; color: var(--c); font-weight: 700; }
.nivel .formato { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--borde); color: var(--gris-tenue); font-size: .92rem; }
.aviso-ley { margin-top: 1.6rem; padding: 1.1rem 1.3rem; border-radius: 12px; border: 1px dashed rgba(79,163,255,.35); color: var(--gris-texto); font-size: .98rem; }
.aviso-ley b { color: var(--blanco); }

.auto-grid { display: grid; gap: 1.2rem; }
@media (min-width: 720px) { .auto-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .auto-grid { grid-template-columns: repeat(3, 1fr); } }
.auto { padding: 1.6rem; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--tarjeta); }
.auto .emoji { font-size: 1.6rem; margin-bottom: .6rem; }
.auto h4 { font-size: 1.3rem; margin-bottom: .4rem; }
.auto p { color: var(--gris-texto); }

/* ---------- EXPERIENCIA ---------- */
.logros { display: grid; gap: 1rem; }
@media (min-width: 820px) { .logros { grid-template-columns: repeat(2, 1fr); } }
.logro { display: flex; gap: 1rem; padding: 1.4rem; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--borde); }
.logro .marca-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; background: rgba(255,107,26,.1); border: 1px solid rgba(255,107,26,.3); }
.logro h4 { font-size: 1.25rem; margin-bottom: .25rem; }
.logro p { color: var(--gris-texto); }
.frase { margin: 3rem auto 0; max-width: 820px; text-align: center; font-family: 'Rajdhani', sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; color: var(--blanco); }
.frase span { color: var(--naranja); }

.stack { margin-top: 3.5rem; text-align: center; }
.stack h3 { font-size: 1.3rem; color: var(--gris-texto); font-weight: 600; margin-bottom: 1.4rem; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--borde); background: rgba(13,35,64,.7); color: var(--blanco); font-weight: 600; font-size: .95rem; }
.chip .ico { color: var(--gris-texto); }
.chip.top { border-color: rgba(255,107,26,.5); background: rgba(255,107,26,.1); }
.chip.top .ico { color: var(--naranja); }

/* ---------- MÉTODO ---------- */
.pasos { display: grid; gap: 1rem; counter-reset: paso; }
@media (min-width: 720px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.paso { padding: 1.6rem; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--tarjeta); }
.paso::before { counter-increment: paso; content: '0' counter(paso); display: block; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 2.2rem; color: var(--azul-brillo); margin-bottom: .4rem; }
.paso h4 { font-size: 1.3rem; margin-bottom: .4rem; }
.paso p { color: var(--gris-texto); }
.nota-nda { margin-top: 1.4rem; color: var(--gris-tenue); font-size: .95rem; text-align: center; }

/* ---------- SOBRE MÍ ---------- */
.sobre { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 820px) { .sobre { grid-template-columns: 300px 1fr; gap: 3rem; } }
.sobre img { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--radio); border: 1px solid var(--borde); margin: 0 auto; }
.sobre p { color: var(--gris-texto); margin-bottom: 1rem; font-size: 1.08rem; }
.sobre p b { color: var(--blanco); }

/* ---------- CONTACTO ---------- */
.contacto-grid { display: grid; gap: 2rem; }
@media (min-width: 960px) { .contacto-grid { grid-template-columns: .85fr 1.15fr; gap: 3rem; } }
.directo { display: grid; gap: .8rem; margin-top: 1.6rem; }
.directo a { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid var(--borde); background: var(--tarjeta); text-decoration: none; font-weight: 600; transition: border-color .2s; }
.directo a:hover { border-color: var(--naranja); }
.directo small { display: block; color: var(--gris-texto); font-weight: 400; }
form { padding: 1.6rem; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--tarjeta); display: grid; gap: 1rem; }
@media (min-width: 600px) { .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
.fila > div + div { margin-top: 1rem; }
@media (min-width: 600px) { .fila > div + div { margin-top: 0; } }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
label .opc { color: var(--gris-tenue); font-weight: 400; }
input, select, textarea { width: 100%; padding: .8rem .9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(7,21,37,.75); color: var(--blanco); font: inherit; font-size: 1rem; }
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--naranja); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: var(--gris-texto); font-size: .92rem; }
.check input { width: auto; margin-top: .25rem; }
.envios { display: flex; flex-wrap: wrap; gap: .7rem; }
.envios .btn { flex: 1 1 200px; }
.form-aviso { font-size: .88rem; color: var(--gris-tenue); }
.form-estado { font-weight: 600; }
.form-estado.ok { color: var(--verde-suave); }
.form-estado.error { color: var(--naranja-suave); }
.oculto { position: absolute; left: -9999px; }

/* ---------- FOOTER ---------- */
footer { border-top: 1px solid var(--borde); padding: 2.5rem 0; background: rgba(7,21,37,.95); }
.pie { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; justify-content: space-between; align-items: center; color: var(--gris-tenue); font-size: .92rem; }
.pie nav { position: static; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; background: none; border: 0; }
.pie a { color: var(--gris-texto); text-decoration: none; }
.pie a:hover { color: var(--blanco); }

/* ---------- PÁGINAS LEGALES ---------- */
.legal { padding: 8rem 0 4rem; max-width: 820px; }
.legal h1 { font-size: 2.4rem; margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.4rem; margin: 2rem 0 .6rem; color: var(--naranja); }
.legal p, .legal li { color: var(--gris-texto); margin-bottom: .7rem; }
.legal ul { padding-left: 1.3rem; }
.legal b { color: var(--blanco); }
.pendiente { background: rgba(255,107,26,.2); color: var(--naranja-suave); padding: 0 .3rem; border-radius: 4px; }

/* ---------- ANIMACIÓN ---------- */
.aparece { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; transition: none; }
  .hero-logo { animation: none; }
  #canvas-bg { display: none; }
}

/* ===========================
   ESTILO DE LA WEB V0.1, RECUPERADO Y AMPLIADO · 02-11-2026
   Degradados naranja → verde, halos de luz, anillos que giran y textos que se mueven.
=========================== */
.degradado, .titulo em, .hero-titulo .acento, .frase span {
  background: linear-gradient(90deg, var(--naranja) 0%, var(--naranja-suave) 30%, var(--verde-suave) 70%, var(--naranja) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: brillo 7s linear infinite;
}
@keyframes brillo { to { background-position: 220% center; } }

/* Fondo: bandas de luz alternas, como la V0.1 */
#servicios { background: radial-gradient(ellipse 60% 40% at 85% 8%, rgba(255,107,26,.07), transparent 70%); }
#experiencia { background: linear-gradient(180deg, transparent 0%, rgba(11,61,145,.14) 50%, transparent 100%); }
#metodo { background: linear-gradient(180deg, transparent 0%, rgba(0,200,83,.05) 50%, transparent 100%); }
#contacto { background: radial-gradient(ellipse 50% 45% at 10% 30%, rgba(255,107,26,.10), transparent 70%), radial-gradient(ellipse 45% 40% at 90% 80%, rgba(0,200,83,.08), transparent 70%); }

/* Hero: halo, anillos de circuito y logo flotando con brillo naranja */
#inicio { position: relative; overflow: hidden; }
#inicio::before { content: ''; position: absolute; width: 900px; height: 900px; left: -300px; top: -350px; background: radial-gradient(circle, rgba(11,61,145,.45) 0%, transparent 65%); pointer-events: none; }
.hero-visual { position: relative; display: grid; place-items: center; width: min(400px, 78vw); aspect-ratio: 1; margin: 0 auto; }
.hero-visual .halo { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255,107,26,.28) 0%, rgba(11,61,145,.25) 45%, transparent 70%); animation: late 5s ease-in-out infinite; }
.hero-visual .anillo { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(79,163,255,.35); animation: gira 22s linear infinite; }
.hero-visual .anillo::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); box-shadow: 0 0 14px var(--naranja); }
.hero-visual .anillo-2 { inset: 11%; border: 1px solid rgba(0,200,83,.22); animation-duration: 36s; animation-direction: reverse; }
.hero-visual .anillo-2::before { background: var(--verde); box-shadow: 0 0 14px var(--verde); top: auto; bottom: -5px; }
.hero-visual .hero-logo { position: relative; width: 68%; filter: drop-shadow(0 0 36px rgba(255,107,26,.5)); }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes late { 50% { transform: scale(1.08); opacity: .75; } }

/* Insignia con punto que late */
.insignia::before { animation: pulso 1.8s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .4; transform: scale(1.5); } }

/* Frase que se escribe sola */
.rotador { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--blanco); margin: -.4rem 0 1.2rem; min-height: 2.1em; }
.rotador .rota { color: var(--verde-suave); }
@media (max-width: 599px) { .rotador { min-height: 3.3em; line-height: 1.6; } }
.rotador .cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em; background: var(--naranja); animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Cifras y números de paso en degradado */
.cifra b, .paso::before {
  background: linear-gradient(135deg, var(--naranja) 0%, var(--verde) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.cifra { transition: background .3s; }
.cifra:hover { background: rgba(13,35,64,.95); }

/* Etiquetas de sección con raya en degradado */
.etiqueta { display: inline-flex; align-items: center; gap: .7rem; }
.etiqueta::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--naranja), var(--verde)); }

/* Tarjetas: filo superior que se enciende en naranja → verde */
.servicio, .auto, .logro, .paso { position: relative; overflow: hidden; }
.servicio::after, .auto::after, .logro::after, .paso::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--azul-nexo), transparent); transition: background .3s;
}
.servicio:hover::after, .auto:hover::after, .logro:hover::after, .paso:hover::after { background: linear-gradient(90deg, var(--naranja), var(--verde)); }
.auto, .logro, .paso { transition: transform .2s, border-color .2s, box-shadow .2s; }
.auto:hover, .logro:hover, .paso:hover { transform: translateY(-3px); border-color: rgba(255,107,26,.35); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.nivel { transition: transform .2s, box-shadow .2s; }
.nivel:hover { transform: translateY(-4px); box-shadow: 0 0 34px color-mix(in srgb, var(--c) 22%, transparent); }

/* Método: línea en degradado que une los pasos en escritorio */
@media (min-width: 1040px) {
  .pasos { position: relative; }
  .pasos::before { content: ''; position: absolute; top: 3.1rem; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--naranja), var(--verde)); opacity: .35; }
  .paso { background: rgba(13,35,64,.96); }
}

/* Botón principal y CTA con el degradado de la V0.1 */
.btn-primario, .nav-links .nav-cta { background: linear-gradient(135deg, var(--naranja) 0%, var(--naranja-suave) 100%); }
.btn-primario:hover, .nav-links .nav-cta:hover { box-shadow: 0 0 30px rgba(255,107,26,.45); }

/* Foto con marco en degradado */
.sobre img { border: 2px solid transparent; background: linear-gradient(var(--azul-profundo), var(--azul-profundo)) padding-box, linear-gradient(135deg, var(--naranja), var(--verde)) border-box; }

/* Separador de luz entre secciones */
#confianza { position: relative; }
#confianza::before, #confianza::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,107,26,.45), rgba(0,200,83,.45), transparent); }
#confianza::before { top: -1px; }
#confianza::after { bottom: -1px; }

@media (prefers-reduced-motion: reduce) {
  .degradado, .titulo em, .hero-titulo .acento, .frase span,
  .hero-visual .halo, .hero-visual .anillo, .insignia::before, .rotador .cursor { animation: none; }
}