/* MexaByte · tinta profunda con acento jade y un toque dorado */
:root {
  --fondo: #070C16;
  --fondo-2: #0B1424;
  --vidrio: rgba(16, 26, 44, 0.62);
  --borde: rgba(148, 178, 214, 0.14);
  --borde-fuerte: rgba(94, 234, 212, 0.38);
  --texto: #E7EEF7;
  --tenue: #8E9DB2;
  --jade: #2DD4BF;
  --jade-claro: #5EEAD4;
  --jade-hondo: #0EA5A4;
  --oro: #E3BC5C;
  --cuerpo: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --radio: 20px;
  --ancho: 1320px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 500 17px/1.65 var(--cuerpo); overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p { margin: 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--jade-claro); outline-offset: 3px; border-radius: 8px; }
b { color: #fff; font-weight: 700; }
.degradado { background: linear-gradient(100deg, var(--jade-claro), #7DD3FC 55%, var(--oro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tenue { color: var(--tenue); }

/* ---------- Fondo vivo ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(110px); opacity: 0.22; animation: flotar 26s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { background: #0EA5A4; top: -25vmax; left: -15vmax; }
.aurora span:nth-child(2) { background: #1D4ED8; bottom: -30vmax; right: -20vmax; animation-delay: -9s; opacity: 0.16; }
.aurora span:nth-child(3) { background: #B8892A; top: 40%; left: 55%; width: 30vmax; height: 30vmax; animation-delay: -16s; opacity: 0.09; }
@keyframes flotar { to { transform: translate(6vmax, 4vmax) scale(1.08); } }
.rejilla-fondo { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--borde) 1px, transparent 1px), linear-gradient(90deg, var(--borde) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 65%); opacity: 0.5; }

/* ---------- Barra y navegación ---------- */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 4vw, 40px); transition: background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.barra.solida { background: rgba(7, 12, 22, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--borde); }
.barra__acciones { display: flex; align-items: center; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -0.01em; }
.marca b { color: var(--jade-claro); }
.lateral { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 999px; background: var(--vidrio); border: 1px solid var(--borde); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lateral a { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--tenue); text-decoration: none; transition: color 0.25s, background 0.25s; }
.lateral a:hover { color: #fff; }
.lateral a.activo { background: var(--texto); color: var(--fondo); }
.lateral a span { position: absolute; left: 54px; white-space: nowrap; padding: 4px 10px; border-radius: 8px; background: var(--fondo-2); border: 1px solid var(--borde); color: var(--texto); font-size: 13px; opacity: 0; transform: translateX(-6px); pointer-events: none; transition: 0.2s; }
.lateral a:hover span { opacity: 1; transform: none; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s; }
.boton:hover { transform: translateY(-2px); }
.boton--primario { background: linear-gradient(135deg, var(--jade-claro), var(--jade-hondo)); color: #04201E; box-shadow: 0 10px 30px -10px rgba(45, 212, 191, 0.7); }
.boton--primario:hover { box-shadow: 0 16px 38px -12px rgba(45, 212, 191, 0.9); }
.boton--contorno { border: 1px solid var(--borde-fuerte); background: rgba(45, 212, 191, 0.06); }
.boton--contorno:hover { background: rgba(45, 212, 191, 0.14); }
.boton--fantasma { border: 1px solid var(--borde); }
.boton--chico { padding: 9px 16px; font-size: 14px; }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton .marca-ic { fill: currentColor; stroke: none; }
/* Botón principal de la barra: grande, con brillo y halo que respira */
.boton--brillo { position: relative; overflow: hidden; padding: 14px 26px; font-size: 16px; font-weight: 800; color: #04201E; background: linear-gradient(120deg, #99F6E4, var(--jade) 45%, #F2D184); box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.55), 0 12px 32px -10px rgba(45, 212, 191, 0.8); animation: halo 2.8s ease-in-out infinite; }
.boton--brillo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%); transform: translateX(-120%); animation: destello 3.6s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 0 8px rgba(45, 212, 191, 0), 0 16px 40px -10px rgba(45, 212, 191, 0.95); } }
@keyframes destello { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.boton--whatsapp { background: #25D366; color: #052E16; box-shadow: 0 10px 30px -12px rgba(37, 211, 102, 0.8); }
.idioma { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; text-decoration: none; font: 700 14px var(--mono); border: 1px solid var(--borde); background: var(--vidrio); transition: border-color 0.2s, color 0.2s; }
.idioma:hover { border-color: var(--borde-fuerte); color: var(--jade-claro); }
.idioma svg { width: 18px; height: 18px; }
/* Redes */
.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.redes a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; text-decoration: none; font-size: 14px; color: #C7D2E1; border: 1px solid var(--borde); background: var(--vidrio); transition: 0.2s; }
.redes a:hover { color: #fff; border-color: var(--borde-fuerte); transform: translateY(-2px); }
.redes svg { width: 18px; height: 18px; }
.redes .marca-ic { fill: currentColor; stroke: none; }
.redes--portada { margin-top: 22px; }

/* ---------- Portada ---------- */
.portada { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px clamp(16px, 4vw, 40px) 60px; max-width: 1180px; margin: 0 auto; }
.insignia { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: rgba(45, 212, 191, 0.07); font-size: 14px; color: var(--tenue); }
.insignia i { font-style: normal; opacity: 0.5; }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.7); animation: latido 2s infinite; display: inline-block; }
@keyframes latido { 70% { box-shadow: 0 0 0 9px rgba(45, 212, 191, 0); } 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); } }
.monograma { position: relative; width: 112px; height: 112px; margin: 30px 0 12px; display: grid; place-items: center; }
.monograma span { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 34px; letter-spacing: 0.02em; background: radial-gradient(circle at 35% 30%, #16324A, #0B1424); border: 1px solid var(--borde); color: var(--jade-claro); }
.monograma svg { position: absolute; inset: 0; width: 112px; height: 112px; transform: rotate(-90deg); }
.monograma circle { stroke: var(--jade); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; animation: trazo 2.2s 0.4s cubic-bezier(.6,.1,.2,1) forwards; }
@keyframes trazo { to { stroke-dashoffset: 18; } }
.titulo-pre { color: var(--jade-claro); font: 500 15px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.portada h1 { font-size: clamp(38px, 6.6vw, 76px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; margin: 6px 0 14px; }
.rol { font: 500 clamp(13px, 1.6vw, 16px) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tenue); min-height: 1.6em; }
.rol [data-rotar] { color: var(--jade-claro); }
.cursor { color: var(--jade-claro); animation: parpadeo 1s steps(1) infinite; margin-left: 2px; }
@keyframes parpadeo { 50% { opacity: 0; } }
.resumen { width: 100%; max-width: 900px; margin: 26px 0 30px; padding: 24px 28px; border-radius: var(--radio); background: var(--vidrio); border: 1px solid var(--borde); text-align: left; }
.resumen__intro { font-size: 19px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 16px; }
.resumen ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.resumen li { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; color: #C7D2E1; font-size: 15.5px; line-height: 1.5; }
.resumen li::before { content: ''; grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; background: rgba(45, 212, 191, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235EEAD4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; border: 1px solid var(--borde-fuerte); }
.resumen li b { color: #fff; }
.stack { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.stack span { padding: 5px 13px; border-radius: 999px; font: 500 13px var(--mono); color: var(--jade-claro); border: 1px solid var(--borde-fuerte); background: rgba(45, 212, 191, 0.06); }
.rol .sep { color: var(--borde-fuerte); margin: 0 6px; }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 44px; width: 100%; }
.dato { padding: 16px; border-radius: 16px; background: var(--vidrio); border: 1px solid var(--borde); text-align: left; display: grid; gap: 2px; }
.dato__et { font: 500 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--jade-claro); }
.dato b { font-size: 17px; }
.dato small { color: var(--tenue); font-size: 13px; }
.explorar { margin-top: 44px; display: grid; justify-items: center; gap: 2px; color: var(--tenue); font: 500 11px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
.explorar svg { animation: bajar 1.8s ease-in-out infinite; }
@keyframes bajar { 50% { transform: translateY(5px); } }

/* ---------- Secciones ---------- */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 110px clamp(16px, 4vw, 48px) 30px; }
.cabeza { text-align: center; max-width: 680px; margin: 0 auto 46px; }
.etiqueta { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--borde); font: 500 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--jade-claro); margin-bottom: 14px; }
.cabeza h2 { font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -0.03em; line-height: 1.1; font-weight: 800; margin-bottom: 12px; }
.cabeza p { color: var(--tenue); }
.mini--logros { margin: 22px 0 -10px; }
.mini { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--jade-claro); }

/* Tarjetas con luz que sigue al cursor */
.tarjeta, .dato, .grupo, .puesto, .proximo, .servicio, .producto { position: relative; isolation: isolate; }
[data-luz]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 212, 191, 0.12), transparent 45%); }
[data-luz]:hover::before { opacity: 1; }
.tarjeta { padding: 26px; border-radius: var(--radio); background: var(--vidrio); border: 1px solid var(--borde); transition: border-color 0.3s; }
.tarjeta:hover { border-color: var(--borde-fuerte); }
.tarjeta p + p { margin-top: 12px; }

/* Perfil */
.perfil { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.checks, .avances { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: #C7D2E1; font-size: 15.5px; }
.checks li::before { content: '✓'; color: var(--jade-claro); font-weight: 800; }
.avances li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borde); background: rgba(5, 9, 17, 0.45); }
.avances b { color: var(--jade-claro); }
.avances span { color: #C7D2E1; font-size: 14.5px; }
.tarjeta--grande { border-color: rgba(45, 212, 191, 0.3); background: linear-gradient(160deg, rgba(14, 165, 164, 0.12), var(--vidrio) 45%); }
.tarjeta__cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.tarjeta__cabeza h3 { font-size: 22px; letter-spacing: -0.02em; }
.tarjeta__cabeza small { color: var(--tenue); font-weight: 500; font-size: 15px; }
.icono { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(45, 212, 191, 0.1); border: 1px solid var(--borde-fuerte); color: var(--jade-claro); }
.icono svg { width: 22px; height: 22px; }
.estado { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 13px; color: var(--jade-claro); border: 1px solid var(--borde-fuerte); white-space: nowrap; }
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--borde); }
.pilares b { display: block; font: 500 12px var(--mono); color: var(--jade-claro); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.pilares span { font-size: 14px; color: var(--tenue); }
blockquote { margin: 14px 0; padding-left: 16px; border-left: 2px solid var(--jade); font-size: 19px; font-style: italic; color: #fff; }
.codigo { margin-top: 20px; border-radius: 14px; overflow: hidden; border: 1px solid var(--borde); background: #050911; }
.codigo__barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--borde); }
.codigo__barra i { width: 10px; height: 10px; border-radius: 50%; background: #2A3547; }
.codigo__barra i:first-child { background: #F87171; } .codigo__barra i:nth-child(2) { background: #FBBF24; } .codigo__barra i:nth-child(3) { background: #34D399; }
.codigo__barra span { margin-left: 8px; font: 12px var(--mono); color: var(--tenue); }
.codigo pre { margin: 0; padding: 14px 16px; font: 13px/1.7 var(--mono); color: #C7D2E1; overflow-x: auto; min-height: 175px; }
.codigo .k { color: #7DD3FC; } .codigo .t { color: var(--oro); } .codigo .s { color: var(--jade-claro); }

/* Habilidades */
.habilidades { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; align-items: start; }
.niveles { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 18px; }
.niveles li { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 15px; }
.niveles em { font-style: normal; font: 500 12px var(--mono); color: var(--jade-claro); align-self: center; }
.niveles i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(148, 178, 214, 0.12); position: relative; overflow: hidden; }
.niveles i::after { content: ''; position: absolute; inset: 0; width: var(--n); border-radius: inherit; background: linear-gradient(90deg, var(--jade-hondo), var(--jade-claro)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.visible .niveles i::after, .niveles.visible i::after { transform: scaleX(1); }
.grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grupo { padding: 18px; border-radius: 16px; background: var(--vidrio); border: 1px solid var(--borde); }
.grupo h3 { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips span { padding: 4px 11px; border-radius: 8px; font-size: 13px; background: rgba(148, 178, 214, 0.07); border: 1px solid var(--borde); color: #C7D2E1; transition: border-color 0.2s, color 0.2s; }
.chips span:hover { border-color: var(--borde-fuerte); color: #fff; }
.idiomas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.idiomas div { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--borde); background: var(--vidrio); display: grid; }
.idiomas span { color: var(--tenue); font-size: 14px; }

/* Experiencia */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
.filtros button { cursor: pointer; padding: 9px 16px; border-radius: 999px; font: 600 14px var(--cuerpo); color: var(--tenue); background: transparent; border: 1px solid var(--borde); transition: 0.2s; }
.filtros button:hover { color: #fff; }
.filtros button[aria-pressed='true'] { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.linea { display: grid; gap: 22px; position: relative; }
.puesto { padding: 28px; border-radius: 24px; background: var(--vidrio); border: 1px solid var(--borde); transition: opacity 0.35s, transform 0.35s, border-color 0.3s; }
.puesto--actual { border-color: rgba(45, 212, 191, 0.32); background: linear-gradient(160deg, rgba(14, 165, 164, 0.1), var(--vidrio) 40%); }
.puesto.oculto { display: none; }
.puesto__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 14px; }
.pastilla { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--borde); color: #C7D2E1; background: rgba(148, 178, 214, 0.06); }
.pastilla--oro { color: var(--oro); border-color: rgba(227, 188, 92, 0.4); }
.pastilla--verde { color: var(--jade-claro); border-color: var(--borde-fuerte); }
.fecha { color: var(--tenue); font: 500 13px var(--mono); }
.puesto h3 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; }
.sub { color: var(--jade-claro); margin-top: 2px; }
.lugar { color: var(--tenue); font-size: 14px; margin-top: 4px; }
.logros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 18px; }
.logros div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--borde); background: rgba(5, 9, 17, 0.45); display: grid; gap: 4px; }
.logros b { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.logros b::before { content: ''; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--jade); background: radial-gradient(circle, var(--jade) 0 3px, transparent 3.5px); }
.logros span { color: var(--tenue); font-size: 14px; }

/* Productos */
.productos { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.producto { display: flex; gap: 22px; padding: 26px; border-radius: 24px; background: var(--vidrio); border: 1px solid var(--borde); text-decoration: none; overflow: hidden; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s ease-out, border-color 0.3s; }
.producto:hover { border-color: var(--borde-fuerte); }
.producto--tlakko { grid-row: span 2; flex-direction: column-reverse; background: linear-gradient(170deg, rgba(227, 188, 92, 0.12), var(--vidrio) 50%); border-color: rgba(227, 188, 92, 0.3); }
.producto--tlakko:hover { border-color: rgba(227, 188, 92, 0.6); }
.producto__arte { margin: 4px auto -60px; width: 62%; max-width: 280px; border-radius: 30px 30px 0 0; border: 8px solid #101A2B; border-bottom: 0; overflow: hidden; box-shadow: 0 -10px 40px -10px rgba(227, 188, 92, 0.35); transition: transform 0.4s; }
.producto:hover .producto__arte { transform: translateY(-8px); }
.producto__texto { display: grid; gap: 10px; align-content: start; }
.producto h3 { display: flex; align-items: center; gap: 10px; font-size: 26px; letter-spacing: -0.02em; }
.producto h3 img { width: 34px; height: 34px; border-radius: 9px; }
.producto p { color: var(--tenue); font-size: 15.5px; }
.producto ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.producto li { font-size: 13px; padding: 3px 10px; border-radius: 8px; background: rgba(227, 188, 92, 0.1); color: var(--oro); }
.ir { display: inline-flex; align-items: center; gap: 6px; color: var(--jade-claro); font-weight: 700; font-size: 15px; }
.producto--tlakko .ir { color: var(--oro); }
.ir svg { transition: transform 0.2s; }
.producto:hover .ir svg { transform: translate(3px, -3px); }
.subcabeza { margin: 54px 0 18px; font: 500 13px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tenue); text-align: center; }
.proximos, .servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.servicios { grid-template-columns: repeat(4, 1fr); }
.proximo, .servicio { padding: 22px; border-radius: 20px; background: var(--vidrio); border: 1px dashed rgba(148, 178, 214, 0.25); display: grid; gap: 8px; align-content: start; transition: border-color 0.3s, transform 0.3s; }
.servicio { border-style: solid; border-color: var(--borde); }
.proximo:hover, .servicio:hover { border-color: var(--borde-fuerte); transform: translateY(-3px); }
.pronto { position: absolute; top: 18px; right: 18px; font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--oro); padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(227, 188, 92, 0.4); }
.proximo h4, .servicio h4 { font-size: 19px; margin-top: 6px; }
.proximo p, .servicio p { color: var(--tenue); font-size: 15px; }
.proximo small { color: var(--jade-claro); font: 500 12px var(--mono); }
.servicio b { font: 500 13px var(--mono); color: var(--jade-claro); }

/* Trabajemos juntos */
.seccion--cta { padding-top: 90px; }
.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(36px, 5vw, 64px) clamp(18px, 4vw, 54px); border-radius: 34px; border: 1px solid var(--borde-fuerte); background: linear-gradient(160deg, rgba(14, 165, 164, 0.18), rgba(11, 20, 36, 0.92) 40%, rgba(184, 137, 42, 0.14)); box-shadow: 0 40px 90px -40px rgba(45, 212, 191, 0.5); }
.cta__brillo { position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(94, 234, 212, 0.18) 80%, transparent 90%); animation: barrer 9s linear infinite; pointer-events: none; }
@keyframes barrer { to { transform: rotate(360deg); } }
.cta > * { position: relative; }
.cta h2 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.035em; line-height: 1.05; font-weight: 800; }
.cta__sub { color: var(--tenue); margin: 12px 0 34px; font-size: 18px; }
.caminos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; margin-bottom: 26px; }
.camino { position: relative; isolation: isolate; padding: 28px; border-radius: 24px; background: rgba(7, 12, 22, 0.72); border: 1px solid var(--borde-fuerte); display: grid; gap: 12px; align-content: start; transition: transform 0.3s; }
.camino:hover { transform: translateY(-4px); }
.camino--oro { border-color: rgba(227, 188, 92, 0.45); }
.camino h3 { font-size: 26px; letter-spacing: -0.02em; }
.camino p { color: #C7D2E1; }
.camino__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.icono--grande { width: 54px; height: 54px; border-radius: 16px; }
.icono--oro { color: var(--oro); border-color: rgba(227, 188, 92, 0.5); background: rgba(227, 188, 92, 0.1); }

/* Formación */
.formacion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tarjeta--cursos { grid-column: 1 / -1; }
.tarjeta--cursos .lista { grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
.tarjeta--curso { border-color: rgba(227, 188, 92, 0.4); background: linear-gradient(160deg, rgba(227, 188, 92, 0.1), var(--vidrio) 50%); }
.progreso-ingles { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 600 13px var(--mono); color: var(--oro); }
.progreso-ingles i { flex: 1; height: 8px; border-radius: 8px; background: rgba(148, 178, 214, 0.15); overflow: hidden; }
.progreso-ingles b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--oro), #F7DE94); transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.visible .progreso-ingles b { width: var(--p, 40%); }
.formacion h3 { font-size: 21px; margin-top: 14px; letter-spacing: -0.01em; }
.lista { margin: 14px 0 0; padding-left: 18px; color: #C7D2E1; font-size: 15px; display: grid; gap: 6px; }
.lista li::marker { color: var(--jade); }

/* Contacto y pie */
.contacto { text-align: center; padding: 56px 24px; border-radius: 30px; border: 1px solid var(--borde-fuerte); background: radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.16), var(--vidrio) 60%); display: grid; justify-items: center; gap: 14px; }
.contacto h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.03em; }
.contacto p { color: var(--tenue); max-width: 520px; }
.contacto img { animation: flotar-logo 5s ease-in-out infinite; filter: drop-shadow(0 10px 24px rgba(45, 212, 191, 0.35)); }
@keyframes flotar-logo { 50% { transform: translateY(-8px); } }
.pie { max-width: var(--ancho); margin: 70px auto 0; padding: 30px clamp(16px, 4vw, 48px) 44px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; font-size: 14px; }
.pie__marca { display: flex; align-items: center; gap: 10px; }
.pie__marca div { display: grid; }
.pie__marca span { color: var(--tenue); }
.redes--pie a { padding: 8px 10px; }
.redes--pie a span { display: none; }
.pie p { display: flex; align-items: center; gap: 8px; }
.pie a { color: var(--jade-claro); }

/* Aparición al bajar */
.js .aparecer { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--retraso, 0s); }
.js .aparecer.visible { opacity: 1; transform: none; }

/* Pantallas */
@media (max-width: 1100px) { .perfil { grid-template-columns: 1fr 1fr; } .tarjeta--grande { grid-column: 1 / -1; } }
@media (max-width: 1000px) {
  .lateral { display: none; }
  .perfil, .habilidades, .productos, .formacion, .caminos { grid-template-columns: 1fr; }
  .tarjeta--cursos .lista { grid-template-columns: 1fr; }
  .producto--tlakko { grid-row: auto; }
  .servicios { grid-template-columns: 1fr 1fr; }
  .proximos { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .datos { grid-template-columns: 1fr 1fr; }
  .pilares, .logros, .grupos, .idiomas, .servicios { grid-template-columns: 1fr; }
  .tarjeta__cabeza { flex-wrap: wrap; }
  .estado { margin-left: 0; }
  .seccion { padding-top: 84px; }
  .barra .boton--brillo { padding: 10px 14px; font-size: 13px; }
  .barra .boton--brillo svg { display: none; }
  .barra { padding: 10px 14px; }
  .marca span { display: none; }
  .resumen ul { grid-template-columns: 1fr; }
  .redes a span { display: none; }
  .redes--portada a span, .redes--cta a span { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .aparecer { opacity: 1; transform: none; }
  .niveles i::after { transform: scaleX(1); }
}

/* Por qué trabajar conmigo */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.cifras div { padding: 22px; border-radius: 20px; border: 1px solid var(--borde); background: var(--vidrio); text-align: center; display: grid; gap: 4px; }
.cifras b { font-size: clamp(34px, 4vw, 48px); line-height: 1; letter-spacing: -0.03em; background: linear-gradient(100deg, var(--jade-claro), #7DD3FC 60%, var(--oro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifras span { color: var(--tenue); font-size: 14px; }
.valor { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.valor__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.valor__lista h3 { font-size: 19px; margin: 8px 0 6px; letter-spacing: -0.01em; }
.valor__lista p { color: var(--tenue); font-size: 15px; }
.valor__num { font: 500 13px var(--mono); color: var(--jade-claro); }
.filosofia { border-color: rgba(227, 188, 92, 0.35); background: linear-gradient(170deg, rgba(227, 188, 92, 0.1), var(--vidrio) 45%); }
/* Datos rápidos de los caminos */
.rapidos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 2px; }
.rapidos div { padding: 10px 12px; border-radius: 12px; background: rgba(45, 212, 191, 0.07); border: 1px solid var(--borde); }
.rapidos--oro div { background: rgba(227, 188, 92, 0.07); }
.rapidos dt { font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); }
.rapidos dd { margin: 2px 0 0; font-weight: 700; color: #fff; font-size: 15px; }
.cta__aviso { margin-top: 18px; font-size: 13px; color: var(--tenue); }
.cta__aviso a, .pie a { color: var(--jade-claro); }
/* Proceso */
.proceso { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.proceso li { counter-increment: paso; position: relative; padding: 20px 18px 18px 18px; border-radius: 18px; border: 1px solid var(--borde); background: var(--vidrio); display: grid; gap: 4px; }
.proceso li::before { content: counter(paso); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; font-weight: 800; color: #04201E; background: linear-gradient(135deg, var(--jade-claro), var(--jade-hondo)); }
.proceso span { color: var(--tenue); font-size: 14.5px; }
.centrado { text-align: center; }
.boton--grande { padding: 16px 30px; font-size: 17px; }
/* Páginas legales */
.legal .barra { position: sticky; }
.hoja-legal { max-width: 860px; margin: 0 auto; padding: 50px 20px 30px; }
.hoja-legal h1 { font-size: clamp(32px, 5vw, 48px); letter-spacing: -0.03em; margin: 6px 0 6px; }
.hoja-legal section { margin-top: 28px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--borde); background: var(--vidrio); }
.hoja-legal h2 { font-size: 19px; margin-bottom: 8px; color: var(--jade-claro); }
.hoja-legal section p { color: #C7D2E1; }
@media (max-width: 1000px) { .valor, .valor__lista { grid-template-columns: 1fr; } .proceso { grid-template-columns: 1fr 1fr; } .cifras { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .proceso, .rapidos { grid-template-columns: 1fr; } .formacion { grid-template-columns: 1fr; } }