/* enhanzu — sitio. Tokens: rebrand/brand-kit/tokens.css (Obsidian Signal). */
:root{
  --bg:#0A0B0F; --surface:#13151C; --surface-alt:#1C1F2A;
  --primary:#B8FF4F; --accent:#7AE100; --text:#EEEEF0; --muted:#7E8599;
  --border:#252836; --on-primary:#0A0B0F;
  --font-display:'Onest',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --radius-sm:10px; --radius:16px; --radius-lg:24px;
  --wrap:1080px; --pad:clamp(20px,5vw,40px); --sec:clamp(64px,10vw,120px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh;
}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--primary); outline-offset:3px; border-radius:4px}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--primary); color:var(--on-primary);
  padding:10px 16px; border-radius:0 0 var(--radius-sm) 0; font-weight:600; z-index:50}
.skip-link:focus{left:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.wrap-narrow{width:100%; max-width:720px; margin-inline:auto; padding-inline:var(--pad)}

/* ---- wordmark / logo ---- */
.wordmark{font-family:var(--font-display); font-weight:700; font-size:23px;
  letter-spacing:-0.02em; color:var(--text); line-height:1}
.wordmark.sm{font-size:20px}
.wordmark .z,h1 .brand-z,h2 .brand-z,h3 .brand-z{color:var(--primary)}

/* ---- header ---- */
.site-header{position:sticky; top:0; z-index:40; background:rgba(10,11,15,.82);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border)}
.nav{position:relative; display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px}
.brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none}
.brand .mark{width:28px; height:28px; flex:none}
/* toggle solo en móvil; en desktop la nav va siempre visible (patrón boring, sin <details>) */
.nav-toggle{display:none; cursor:pointer; width:42px; height:42px; padding:0; background:transparent;
  border:1px solid var(--border); border-radius:var(--radius-sm); align-items:center; justify-content:center}
.bars,.bars::before,.bars::after{display:block; width:18px; height:2px; background:var(--text); border-radius:2px}
.bars{position:relative}
.bars::before,.bars::after{content:""; position:absolute; left:0}
.bars::before{top:-6px} .bars::after{top:6px}
.nav-links{display:flex; align-items:center; gap:6px}
.nav-links a{font-family:var(--font-body); font-weight:500; font-size:15px; color:var(--muted);
  text-decoration:none; padding:8px 12px; border-radius:var(--radius-sm); transition:color .15s ease, background .15s ease}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links .lang-switch{color:var(--text); border:1px solid var(--border); margin-left:6px; font-weight:600; padding:7px 12px}
.nav-links .lang-switch:hover{border-color:var(--primary); color:var(--primary)}

/* ---- botones ---- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:700; font-size:16px; text-decoration:none; padding:14px 24px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, filter .15s ease, border-color .15s ease, color .15s ease}
.btn svg{width:18px; height:18px; flex:none}
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.06)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary)}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}

/* ---- estado "activo" ---- */
.status{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:7px 15px; margin-bottom:24px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--primary);
  box-shadow:0 0 0 0 rgba(184,255,79,.5); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(184,255,79,.45)}70%{box-shadow:0 0 0 10px rgba(184,255,79,0)}100%{box-shadow:0 0 0 0 rgba(184,255,79,0)}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}

/* ---- tipografía de sección ---- */
h1,h2,h3{font-family:var(--font-display); letter-spacing:-0.02em; line-height:1.08}
.hero{padding:clamp(56px,10vw,104px) 0 clamp(36px,7vw,72px)}
.hero h1{font-weight:800; font-size:clamp(36px,6.4vw,64px); line-height:1.03;
  letter-spacing:-0.03em; margin:0 0 20px; max-width:17ch}
.hero .sub{font-size:clamp(17px,2.4vw,21px); color:var(--muted); max-width:54ch; margin:0 0 32px}

/* ---- firma: la señal viva (el Trazo-Z como pulso del sistema, siempre activo) ---- */
.signal{display:block; width:100%; margin:clamp(36px,6vw,64px) 0 0; overflow:visible}
.signal svg{display:block; width:100%; height:auto}
.signal .trace{fill:none; stroke:var(--primary); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation:trace-draw 2.2s cubic-bezier(.4,0,.2,1) .25s forwards}
.signal .base{fill:none; stroke:var(--border); stroke-width:1.5; stroke-linecap:round}
.signal .node{opacity:0; fill:var(--primary); animation:node-in .3s ease 2.05s forwards, node-glow 2.6s ease-in-out 2.5s infinite}
@keyframes trace-draw{to{stroke-dashoffset:0}}
@keyframes node-in{to{opacity:1}}
@keyframes node-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(184,255,79,.55))}50%{filter:drop-shadow(0 0 10px rgba(184,255,79,.95))}}
@media (prefers-reduced-motion:reduce){
  .signal .trace{stroke-dashoffset:0; animation:none}
  .signal .node{opacity:1; animation:none}
}
.section{padding:var(--sec) 0}
.section + .section{padding-top:0}
/* eyebrow = etiqueta de readout del sistema (mono, con tick lima "en vivo") */
.kicker{font-family:var(--font-mono); font-weight:500; font-size:12.5px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); margin:0 0 16px;
  display:inline-flex; align-items:center; gap:9px}
.kicker::before{content:""; width:14px; height:2px; background:var(--primary); flex:none}
.section-title{font-weight:700; font-size:clamp(28px,4.6vw,44px); margin:0 0 18px; max-width:20ch}
.section-lead{font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:60ch; margin:0 0 40px}

/* ---- grid de resultados / servicios ---- */
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px 26px; transition:border-color .2s ease, transform .2s ease}
.card:hover{border-color:#33384a; transform:translateY(-3px)}
/* lima con moderación: el ícono es muted en reposo y se "activa" (lima) al hover */
.card .ico{width:32px; height:32px; margin-bottom:16px; color:var(--muted); transition:color .2s ease}
.card:hover .ico{color:var(--primary)}
.card h3{font-weight:700; font-size:20px; margin:0 0 8px}
.card p{margin:0; color:var(--muted); font-size:15.5px}

/* ---- franja CTA ---- */
.band{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(32px,5vw,56px); text-align:center}
.band h2{font-weight:700; font-size:clamp(26px,4vw,38px); margin:0 0 12px}
.band p{color:var(--muted); max-width:52ch; margin:0 auto 26px; font-size:18px}
.band .cta-row{justify-content:center}

/* ---- precios ---- */
.price-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(30px,4vw,44px); max-width:560px}
.price-card.feature{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset}
.price-amount{font-family:var(--font-mono); font-weight:600; font-size:clamp(38px,6.4vw,56px); line-height:1; margin:8px 0 6px; font-variant-numeric:tabular-nums; letter-spacing:-0.02em}
.price-amount .from{font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--muted); display:block; margin-bottom:6px; letter-spacing:1.5px; text-transform:uppercase}
.price-note{color:var(--muted); font-size:15px; margin:0 0 26px}
.price-lines{margin:0 0 28px; padding:0; list-style:none}
.price-lines p{margin:0 0 12px; color:var(--text); font-size:16px; display:flex; gap:10px; align-items:flex-start}
.price-lines p::before{content:""; width:18px; height:18px; margin-top:2px; flex:none;
  background:var(--muted); border-radius:50%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
/* el lima se concentra en el plan destacado (el "activo") */
.price-card.feature .price-lines p::before{background:var(--primary)}

/* ---- nosotros ---- */
.prose p{font-size:clamp(17px,1.8vw,19px); color:var(--text); max-width:62ch; margin:0 0 20px}
.prose p.muted{color:var(--muted)}
.stat-row{display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,56px); margin:36px 0 0}
.stat b{display:block; font-family:var(--font-mono); font-weight:600; font-size:clamp(28px,4.6vw,40px); color:var(--primary); font-variant-numeric:tabular-nums; letter-spacing:-0.02em}
.stat span{color:var(--muted); font-size:14px; font-family:var(--font-mono); letter-spacing:.3px; margin-top:4px; display:block}

/* ---- contacto ---- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,56px); align-items:start}
.form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(24px,3vw,34px)}
.field{margin-bottom:18px}
.field label{display:block; font-size:14px; font-weight:600; margin-bottom:7px; color:var(--text)}
.field input,.field textarea{width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font:inherit; font-size:16px; padding:12px 14px; transition:border-color .15s ease}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--primary)}
.field textarea{resize:vertical; min-height:120px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status{margin:14px 0 0; font-size:15px; min-height:1.2em}
.form-status.ok{color:var(--primary)}
.form-status.err{color:#ff8b6b}
.channels{display:flex; flex-direction:column; gap:14px; margin-top:8px}
.channel{display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px; text-decoration:none; transition:border-color .2s ease, transform .2s ease}
.channel:hover{border-color:var(--primary); transform:translateY(-2px)}
.channel .ico{width:26px; height:26px; color:var(--primary); flex:none}
.channel b{display:block; font-family:var(--font-display); font-size:16px}
.channel span{color:var(--muted); font-size:14px}
.embed-card{border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface)}
.embed-card .calendly-inline-widget{width:100%}

/* ---- blog ---- */
.post-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.post-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px 26px; transition:border-color .2s ease, transform .2s ease}
.post-card:hover{border-color:#33384a; transform:translateY(-3px)}
.post-card time{color:var(--muted); font-size:13.5px}
.post-card h2{font-weight:700; font-size:21px; margin:8px 0 10px}
.post-card h2 a{text-decoration:none}
.post-card h2 a:hover{color:var(--primary)}
.post-card p{color:var(--muted); font-size:15.5px; margin:0 0 16px}
.link-arrow{display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-weight:600;
  font-size:15px; text-decoration:none}
.link-arrow::after{content:"\2192"; transition:transform .15s ease}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---- post ---- */
.post{padding:clamp(48px,8vw,88px) 0}
.post .back{margin-bottom:26px; color:var(--muted)}
.post .back::after{content:""}
.post .back::before{content:"\2190"; margin-right:6px}
.post-date{color:var(--muted); font-size:14px}
.post-title{font-weight:800; font-size:clamp(30px,5vw,48px); line-height:1.05; margin:10px 0 28px}
.post-body{font-size:18px; line-height:1.72}
.post-body h2{font-size:clamp(22px,3vw,28px); margin:38px 0 14px}
.post-body h3{font-size:clamp(19px,2.4vw,22px); margin:30px 0 12px}
.post-body p{margin:0 0 20px; color:var(--text)}
.post-body a{color:var(--primary); text-underline-offset:3px}
.post-body blockquote{margin:28px 0; padding:14px 22px; border-left:3px solid var(--primary);
  color:var(--text); font-family:var(--font-display); font-size:clamp(19px,2.4vw,23px); font-style:italic}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--border); margin-top:auto; padding:clamp(40px,6vw,64px) 0}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; align-items:start}
.foot-tag{color:var(--muted); font-size:14.5px; max-width:40ch; margin:12px 0 0}
.foot-nav{display:flex; flex-direction:column; gap:10px}
.foot-nav a{color:var(--muted); text-decoration:none; font-size:15px}
.foot-nav a:hover{color:var(--text)}
.foot-meta{display:flex; flex-direction:column; gap:10px; font-size:15px}
.foot-meta a{color:var(--text); text-decoration:none}
.foot-meta a:hover{color:var(--primary)}
.foot-enter{font-family:var(--font-display); font-weight:700}
.foot-copy{color:var(--muted); font-size:13.5px; margin-top:4px}

/* ---- reveals ---- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ---- responsive ---- */
@media (max-width:860px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none; position:absolute; right:0; top:calc(100% + 8px); flex-direction:column; align-items:stretch;
    gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:10px; min-width:220px; box-shadow:0 20px 50px rgba(0,0,0,.5)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px}            /* touch target >=44px en móvil */
  .nav-links .lang-switch{margin:6px 0 0; text-align:center}
  .grid-3,.grid-2,.post-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr; gap:24px}
}