/* ============================================================
   WITEC Group — Asesoría en IA (página dedicada)
   Hoja autocontenida (no depende de styles.css). Marca WITEC, tema oscuro.
   ============================================================ */

/* Fuentes self-hosted (mismas del sitio) */
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg:#05080f; --panel:#0e1421; --panel-2:#131b2c;
  --head:#e9eef6; --text:#c3d2e2; --muted:#8a98b0;
  --line:rgba(120,160,220,.12); --line-2:rgba(120,160,220,.22);
  --accent:#46c1c0; --accent-2:#10a6e0; --accent-lt:#3bc4f5; --teal-lt:#5bd0cf;
  --accent-glow:rgba(16,166,224,.35);
  --disp:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --maxw:1120px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 32px; }
a { color:inherit; text-decoration:none; }
strong { color:var(--head); font-weight:600; }
.muted { color:var(--muted); }

.ai-eyebrow { font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-lt); font-weight:600;
  display:flex; align-items:center; gap:14px; }
.ai-eyebrow::before { content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--accent-2),transparent); }
h2 { font-family:var(--disp); font-weight:700; font-size:clamp(28px,4vw,44px); line-height:1.08; letter-spacing:-.015em; color:var(--head); }
h3 { font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:-.01em; color:var(--head); }
p.lead { font-size:clamp(17px,2vw,20px); color:var(--muted); line-height:1.6; }

/* Header */
header.bar { position:fixed; top:0; left:0; right:0; z-index:50; backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(5,8,15,.9),rgba(5,8,15,0)); transition:background .3s,border-color .3s,box-shadow .3s; border-bottom:1px solid transparent; }
header.bar .wrap { display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
header.bar.solid { background:rgba(5,8,15,.92); border-bottom:1px solid var(--line); box-shadow:0 2px 18px rgba(0,0,0,.28); }
header.bar .brand-logo { height:52px; width:auto; display:block; }
header.bar .tag { font-family:var(--disp); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
@media(max-width:640px){ header.bar .tag{ display:none; } }
header.bar .bar-right { display:flex; align-items:center; gap:18px; }
header.bar .lang-toggle { padding:7px 13px; border:1px solid var(--line-2); border-radius:999px; background:transparent;
  color:var(--muted); font:inherit; font-size:13px; font-weight:600; letter-spacing:.05em; line-height:1; cursor:pointer; transition:color .2s,border-color .2s; }
header.bar .lang-toggle:hover { color:var(--head); border-color:var(--accent-2); }

/* Hero */
.ai-hero { position:relative; min-height:100vh; display:flex; align-items:center; padding:120px 0 80px; overflow:hidden; }
.ai-hero .grid { display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:center; width:100%; }
.ai-hero .ai-eyebrow { margin-bottom:26px; }
.ai-hero h1 { font-family:var(--disp); font-weight:700; letter-spacing:-.025em; font-size:clamp(38px,6.2vw,68px); line-height:1.04; color:var(--head); margin-bottom:26px; }
.ai-hero h1 .accent { color:var(--accent-2); }
.ai-hero h1 .lineMask { display:block; overflow:hidden; }
.ai-hero h1 .lineMask > span { display:block; }
.ai-hero p.sub { max-width:32em; font-size:clamp(16px,1.7vw,19px); color:var(--text); }

.net-stage { position:relative; width:100%; max-width:440px; aspect-ratio:1; margin-left:auto; }
.net-stage svg { width:100%; height:100%; overflow:visible; }
.net-glow { position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle,rgba(16,166,224,.20),transparent 65%); z-index:-1; }
.edge { stroke:url(#wgrad); stroke-width:1.2; }
.node { fill:var(--bg); stroke:url(#wgrad); stroke-width:1.5; cursor:pointer; transform-box:fill-box; transform-origin:center;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), fill .3s ease, filter .3s ease; }
.node.lit { fill:var(--accent-2); stroke:#7dd8ff; filter:drop-shadow(0 0 5px var(--accent-glow)); transform:scale(2.4); }
@media(max-width:860px){ .ai-hero .grid{ grid-template-columns:1fr; gap:18px; } .net-stage{ order:-1; max-width:240px; margin:0 0 4px; } }

.scrollcue { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:10px; }
.scrollcue .ln { width:1px; height:34px; background:linear-gradient(var(--accent-2),transparent); }
@media(max-width:860px){ .scrollcue{ display:none; } }

/* Sections */
section.blk { padding:72px 0; position:relative; }
.secnum { font-size:12.5px; letter-spacing:.16em; color:var(--accent-lt); font-weight:600; }
.sechead { max-width:780px; margin-bottom:46px; }
.sechead h2 { margin:18px 0 0; }

.momento p { font-size:clamp(18px,2.3vw,24px); line-height:1.5; color:var(--head); max-width:880px; font-family:var(--disp); font-weight:500; }
.momento p strong { color:var(--accent-lt); font-weight:700; }

.who-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }
@media(max-width:860px){ .who-grid{ grid-template-columns:1fr; gap:32px; } }
.who p { color:var(--text); margin-bottom:18px; }
.team-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; }
.team-card .role { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-lt); margin-bottom:10px; font-weight:600; }
.team-card .nm { font-family:var(--disp); font-weight:700; font-size:21px; color:var(--head); margin-bottom:8px; line-height:1.15; }
.sectors { margin-top:24px; display:flex; flex-wrap:wrap; gap:9px; }
.sectors-band { margin-top:42px; padding-top:26px; border-top:1px solid var(--line); }
.sectors-band .sec-lbl { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:14px; font-weight:600; }
.sectors-band .sectors { margin-top:0; }
.sectors span { font-size:12px; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:7px 14px; transition:.25s; }
.sectors span:hover { color:var(--accent-lt); border-color:var(--accent-2); background:rgba(16,166,224,.07); }

.levels { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; }
@media(max-width:860px){ .levels{ grid-template-columns:1fr; gap:18px; } }
.lvl { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:34px; }
.lvl.exec { border-color:rgba(70,193,192,.35); }
.lvl .lbl { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; font-weight:600; }
.lvl.crit .lbl { color:var(--accent-lt); } .lvl.exec .lbl { color:var(--teal-lt); }
.lvl h3 { margin-bottom:22px; }
.pt { display:flex; gap:14px; padding:13px 0; border-top:1px solid var(--line); }
.pt:first-of-type { border-top:0; }
.pt .k { font-family:var(--disp); font-weight:700; color:var(--head); font-size:15.5px; min-width:34%; flex-shrink:0; }
.pt .v { color:var(--muted); font-size:14.5px; line-height:1.5; }
@media(max-width:520px){ .pt{ flex-direction:column; gap:3px; } .pt .k{ min-width:0; } }
.flowmid { display:flex; align-items:center; justify-content:center; padding:0 22px; }
.flowmid .arrow { color:var(--muted); font-size:12px; letter-spacing:.12em; text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; gap:14px; }
.flowmid .arrow::after { content:""; height:60px; width:1px; background:linear-gradient(var(--accent-2),var(--accent)); }
@media(max-width:860px){ .flowmid{ padding:4px 0; } .flowmid .arrow{ writing-mode:horizontal-tb; transform:none; } .flowmid .arrow::after{ width:60px; height:1px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); } }
.single-note { margin:46px auto 0; max-width:780px; text-align:center; font-family:var(--disp); font-weight:500; color:var(--head); font-size:clamp(20px,2.9vw,30px); line-height:1.32; padding-top:30px; position:relative; }
.single-note::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:48px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.single-note b { font-weight:700; }
.single-note .g1 { color:var(--accent-2); } .single-note .g2 { color:var(--accent); }

.mods { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(max-width:720px){ .mods{ grid-template-columns:1fr; } }
.mod { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px; transition:.3s; }
.mod:hover { border-color:var(--accent-2); transform:translateY(-3px); box-shadow:0 12px 34px rgba(0,0,0,.4); }
.mod .n { font-size:12px; color:var(--accent-lt); letter-spacing:.1em; font-weight:600; }
.mod h3 { font-size:18px; margin:12px 0 8px; }
.mod p { color:var(--muted); font-size:14.5px; line-height:1.55; }

.eco { border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.eco-row { display:grid; grid-template-columns:.9fr 2fr; gap:24px; padding:24px 28px; border-top:1px solid var(--line); align-items:start; }
.eco-row:first-child { border-top:0; }
@media(max-width:640px){ .eco-row{ grid-template-columns:1fr; gap:8px; padding:20px; } }
.eco-row .comp { font-family:var(--disp); font-weight:700; color:var(--head); font-size:16px; }
.eco-row .ph { font-size:12.5px; color:var(--accent-lt); margin-top:5px; letter-spacing:.04em; }
.eco-row .desc { color:var(--muted); font-size:14.5px; line-height:1.55; }
.principle { margin-top:24px; font-family:var(--disp); font-size:clamp(16px,2vw,20px); color:var(--head); }
.principle .em { color:var(--accent-lt); }
.eco-note { margin-top:14px; font-size:13px; color:var(--muted); }

.conf { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:720px){ .conf{ grid-template-columns:1fr; } }
.conf .c { border-top:2px solid var(--accent-2); padding-top:18px; }
.conf .c h3 { font-size:16px; margin-bottom:8px; }
.conf .c p { color:var(--muted); font-size:14px; line-height:1.55; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:56px; }
@media(max-width:720px){ .steps{ grid-template-columns:1fr; gap:18px; } }
.step { padding:0 26px; border-left:1px solid var(--line); }
.step:first-child { padding-left:0; border-left:0; }
@media(max-width:720px){ .step{ border-left:2px solid var(--accent-2); padding:0 0 0 18px; } }
.step .num { font-family:var(--disp); font-weight:700; font-size:40px; color:var(--accent-2); line-height:1; }
.step h3 { font-size:17px; margin:14px 0 6px; }
.step p { color:var(--muted); font-size:14px; }

.cta { background:linear-gradient(150deg,var(--panel-2),var(--panel)); border:1px solid var(--line-2); border-radius:20px; padding:48px; text-align:center; position:relative; overflow:hidden; }
.cta h2 { font-size:clamp(26px,3.4vw,38px); margin-bottom:14px; }
.cta p { color:var(--muted); max-width:40em; margin:0 auto 28px; }
.cta .contact { font-size:14px; color:var(--accent-lt); letter-spacing:.04em; font-weight:600; }
.cta .ring { position:absolute; width:340px; height:340px; border:1px solid rgba(16,166,224,.22); border-radius:50%; top:-150px; right:-120px; }
.cta .ring.b { width:220px; height:220px; border-color:rgba(70,193,192,.22); top:-90px; right:-60px; }

/* ---- Formulario de contacto ---- */
.ai-form { max-width:600px; margin:6px auto 0; text-align:left; position:relative; z-index:1; }
.af-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.af-field { display:flex; flex-direction:column; gap:7px; }
.af-field.af-full { grid-column:1 / -1; }
.ai-form label { font-size:12.5px; color:var(--muted); letter-spacing:.03em; font-weight:600; }
.ai-form .req { color:var(--accent-lt); }
.ai-form input, .ai-form textarea {
  width:100%; font:inherit; font-size:15px; color:var(--head); padding:11px 13px;
  background:rgba(6,10,18,.65); border:1px solid var(--line-2); border-radius:10px;
  transition:border-color .18s, box-shadow .18s; }
.ai-form textarea { resize:vertical; min-height:96px; }
.ai-form input::placeholder, .ai-form textarea::placeholder { color:var(--muted); }
.ai-form input:focus, .ai-form textarea:focus {
  outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px var(--accent-glow); }
.af-btn {
  width:100%; margin-top:18px; cursor:pointer; border:0; border-radius:11px;
  font:inherit; font-weight:700; font-size:15px; letter-spacing:.02em; padding:14px 20px;
  color:#04121b; background:linear-gradient(135deg,var(--accent-2),var(--accent));
  transition:filter .18s, transform .12s; }
.af-btn:hover { filter:brightness(1.08); }
.af-btn:active { transform:translateY(1px); }
.af-btn:disabled { opacity:.6; cursor:default; }
.af-note { margin:12px 0 0; min-height:1.2em; font-size:13.5px; text-align:center; color:var(--muted); }
.af-note.ok { color:var(--teal-lt); }
.af-note.err { color:#ff9b8a; }
.af-alt { margin:10px 0 0; font-size:13px; text-align:center; color:var(--muted); }
.af-alt a { color:var(--accent-lt); font-weight:600; text-decoration:none; }
.af-alt a:hover { text-decoration:underline; }
.ai-form .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:560px){ .af-grid { grid-template-columns:1fr; } .cta { padding:34px 22px; } }

footer.site { border-top:1px solid var(--line); padding:50px 0 80px; margin-top:120px; }
footer.site .row { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
footer.site .brand-logo { height:34px; width:auto; }
footer.site .fnote { font-size:12px; letter-spacing:.04em; color:var(--muted); }

.reveal { opacity:0; transform:translateY(26px); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1!important; transform:none!important; }
  html { scroll-behavior:auto; }
}