/* ================================================================
   _chrome.css — Chrome común de las plantillas (landings, servicios,
   IA industria, blog, casos, sobre mí, auditor, legales, 404, gracias)
   · Tokens propios (espejo de styles.css) para no depender de la home
   · Nav con desplegable de servicios, breadcrumb shell, footer, WhatsApp,
     barra CTA móvil, formulario reutilizable y botones
   Lo pinta/activa _landing-ui.js. Sin dependencias externas.
================================================================ */

/* ---------- TOKENS ---------- */
:root{
  --black:#0a0f0a;--white:#e0e0d0;--green:#00ff41;--green-dim:rgba(0,255,65,.08);--green-glow:rgba(0,255,65,.4);--green-deep:rgba(0,255,65,.15);
  --amber:#ffb300;--red:#ff5a4f;--g100:#e0e0d0;--g200:#b0b0a0;--g300:#909080;--g400:#8a8a78;--g500:#808070;--g500-deco:#505040;--g600:#353530;--g700:#252520;--g800:#1a1f1a;--g900:#111811;
  --on-green:#000;--line:rgba(0,255,65,.18);--panel:#0c130c;
  --font-display:'IBM Plex Mono',ui-monospace,monospace;--font-body:'JetBrains Mono',ui-monospace,monospace;--font-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;--bar-h:56px;
  --z-bar:990;--z-wa:980;--z-nav:1000;--z-skip:100010;
}
/* Modo claro «papel térmico»: solo si el usuario lo elige */
body.light-mode{
  --black:#f4f4ef;--white:#0a0a0a;--green:#00661a;--green-dim:rgba(0,102,26,.10);--green-glow:rgba(0,102,26,.35);--green-deep:rgba(0,102,26,.22);
  --amber:#b34700;--red:#b3261e;--g100:#111;--g200:#222;--g300:#333;--g400:#444;--g500:#555;--g600:#777;--g700:#bbb;--g800:#d8d8d0;--g900:#e8e8e0;--g500-deco:#bbb;
  --on-green:#fff;--line:rgba(0,102,26,.25);--panel:#fbfbf6;
}

/* ---------- BASE ---------- */
html{background:var(--black)}
body{background:var(--black);color:var(--white);animation:none}
body.light-mode{color:var(--white)}
/* Cursor del sistema por defecto; el custom solo con .has-custom-cursor */
*,*::before,*::after{cursor:auto !important}
a,button,summary,label,select,[role="button"],input[type="range"],input[type="checkbox"],input[type="submit"]{cursor:pointer !important}
input[type="text"],input[type="email"],input[type="tel"],textarea{cursor:text !important}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.has-custom-cursor,body.has-custom-cursor *,body.has-custom-cursor *::before,body.has-custom-cursor *::after{cursor:none !important}
}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:100005;will-change:transform}
.cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--green);box-shadow:0 0 8px var(--green-glow)}
.cursor-ring{width:28px;height:28px;margin:-14px 0 0 -14px;border:1px solid var(--green);opacity:.55;transition:width .2s,height .2s,margin .2s,opacity .2s}
.cursor-ring.hover{width:44px;height:44px;margin:-22px 0 0 -22px;opacity:.9}
@media (prefers-reduced-motion:reduce){.cursor-dot,.cursor-ring{display:none !important}}

.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:12px;z-index:var(--z-skip);padding:12px 16px;background:var(--black);color:var(--green);border:1px solid var(--green);font-family:var(--font-mono);font-size:13px;letter-spacing:1px;text-decoration:none}
.skip-link:focus{top:12px;outline:2px solid var(--green);outline-offset:2px}
:where(a,button,input,textarea,summary,select):focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* Hueco de la nav fija reservado desde el primer pintado (sin CLS) */
body.has-fixed-nav{padding-top:0}
.land-topbar,.post-topbar,.topbar{display:none !important}

/* ---------- NAV ---------- */
.ch-nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:var(--nav-h);background:rgba(8,12,8,.985);border-bottom:1px solid var(--g800);font-family:var(--font-mono);transition:border-color .3s,background .3s}
.ch-nav.scrolled{border-bottom-color:var(--line);background:rgba(6,10,6,.97)}
body.light-mode .ch-nav{background:rgba(244,244,239,.96);border-bottom-color:var(--g800)}
.ch-nav-in{max-width:1280px;height:100%;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:24px}
.ch-brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.28em;color:var(--white);text-decoration:none;white-space:nowrap;min-height:44px}
.ch-brand-p{color:var(--green);letter-spacing:0;text-shadow:0 0 8px var(--green-glow)}
.ch-brand b{margin-left:.45em;font-weight:700;color:var(--green);text-shadow:0 0 10px var(--green-glow)}
body.light-mode .ch-brand b,body.light-mode .ch-brand-p{text-shadow:none}
.ch-menu{display:flex;align-items:center;gap:22px;margin-left:auto}
.ch-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.ch-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;background:none;border:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--g200);text-decoration:none;transition:color .2s}
.ch-link:hover,.ch-link[aria-expanded="true"],.ch-link[aria-current="page"]{color:var(--green)}
.ch-link[aria-current="page"]{text-shadow:0 0 8px var(--green-glow)}
body.light-mode .ch-link{color:var(--g300)}
body.light-mode .ch-link:hover,body.light-mode .ch-link[aria-current="page"]{color:var(--green);text-shadow:none}
.ch-caret{font-size:10px;transition:transform .2s}
.ch-dd-btn[aria-expanded="true"] .ch-caret{transform:rotate(180deg)}
.ch-dd{position:relative}
.ch-dd-panel{position:absolute;top:calc(100% + 10px);left:50%;width:min(620px,92vw);transform:translate(-50%,-4px);opacity:0;visibility:hidden;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);padding:18px 18px 14px;transition:opacity .18s,transform .18s,visibility 0s .18s}
.ch-dd-panel.open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s,transform .18s}
body.light-mode .ch-dd-panel{box-shadow:0 18px 40px rgba(0,0,0,.12)}
.ch-dd-k{margin:0 0 12px;font-size:11px;letter-spacing:.16em;color:var(--green);text-transform:none}
.ch-dd-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ch-dd-grid a{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:8px;padding:10px 10px;text-decoration:none;border:1px solid transparent;transition:border-color .15s,background .15s}
.ch-dd-grid a:hover,.ch-dd-grid a:focus-visible,.ch-dd-grid a[aria-current="page"]{border-color:var(--line);background:var(--green-dim)}
.ch-dd-grid .n{grid-row:1/3;font-size:11px;color:var(--g400);padding-top:2px}
.ch-dd-grid .t{font-size:13px;font-weight:700;color:var(--white);letter-spacing:.02em}
.ch-dd-grid .d{font-size:12px;color:var(--g300);margin-top:2px}
.ch-dd-grid a:hover .t,.ch-dd-grid a[aria-current="page"] .t{color:var(--green)}
.ch-dd-foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--g700)}
.ch-dd-foot a{font-size:12px;letter-spacing:.08em;color:var(--green);text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.ch-dd-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.ch-tools{display:flex;align-items:center;gap:10px}
.ch-theme{min-height:44px;padding:0 8px;background:none;border:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--g300);white-space:nowrap}
.ch-theme:hover,.ch-theme[aria-pressed="true"]{color:var(--green)}
.ch-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--green);color:var(--green);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.ch-cta:hover{background:var(--green);color:var(--on-green);box-shadow:0 0 18px var(--green-glow)}
.ch-burger{display:none;margin-left:auto;width:44px;height:44px;background:none;border:1px solid var(--g700);position:relative;padding:0}
.ch-burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--green);transition:transform .2s,top .2s}
.ch-burger i:nth-of-type(1){top:16px}.ch-burger i:nth-of-type(2){top:25px}
.ch-burger[aria-expanded="true"] i:nth-of-type(1){top:20px;transform:rotate(45deg)}
.ch-burger[aria-expanded="true"] i:nth-of-type(2){top:20px;transform:rotate(-45deg)}

@media (max-width:1023px){
  .ch-nav-in{padding:0 16px;gap:12px}
  .ch-burger{display:block}
  .ch-menu{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;margin:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:12px 20px calc(24px + env(safe-area-inset-bottom));background:var(--black);border-top:1px solid var(--g800);overflow-y:auto;overscroll-behavior:contain}
  .ch-menu.open{display:flex}
  .ch-links{flex-direction:column;align-items:stretch;gap:0}
  .ch-links>li{border-bottom:1px solid var(--g800)}
  .ch-link{width:100%;min-height:52px;padding:0 4px;font-size:14px;justify-content:space-between}
  .ch-dd-panel{position:static;width:auto;transform:none;opacity:1;visibility:visible;display:none;box-shadow:none;border:0;border-left:1px solid var(--line);padding:4px 0 12px 12px;margin:0 0 8px;background:transparent;transition:none}
  .ch-dd-panel.open{display:block;transform:none}
  .ch-dd-k{display:none}
  .ch-dd-grid{grid-template-columns:1fr}
  .ch-dd-grid a{padding:10px 6px}
  .ch-dd-grid .d{display:none}
  .ch-dd-grid .n{grid-row:auto;padding-top:1px}
  .ch-tools{justify-content:space-between;padding-top:18px}
  .ch-cta{min-height:48px;flex:1;justify-content:center}
  body.ch-menu-open{overflow:hidden}
}
@media (max-width:420px){.ch-brand{font-size:12px;letter-spacing:.2em}}

/* ---------- BREADCRUMB SHELL ---------- */
.ch-crumb{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--g400);margin:0 0 22px}
.ch-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0}
.ch-crumb li{display:inline-flex;align-items:center}
.ch-crumb li+li::before{content:'/';padding:0 8px;color:var(--g500-deco)}
.ch-crumb a{color:var(--g300);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.ch-crumb a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.ch-crumb [aria-current="page"]{color:var(--green)}
.ch-crumb [aria-current="page"]::after{content:'_';margin-left:2px;animation:chBlink 1.1s steps(1) infinite}
body.light-mode .ch-crumb li+li::before{color:var(--g600)}
@keyframes chBlink{50%{opacity:0}}

/* ---------- BOTONES (2 variantes) ---------- */
.ch-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;background:var(--green);color:var(--on-green);border:1px solid var(--green);font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;box-shadow:3px 3px 0 var(--g700);transition:transform .2s var(--ease-out-expo),box-shadow .2s}
.ch-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--g700),0 0 24px var(--green-glow)}
.ch-btn--ghost{background:transparent;color:var(--g200);border-color:var(--g500);box-shadow:none}
.ch-btn--ghost:hover{color:var(--green);border-color:var(--green);box-shadow:none;transform:none}
body.light-mode .ch-btn--ghost{color:var(--g300)}

/* ---------- WHATSAPP FLOTANTE (solo ≥768 px) ---------- */
.ch-wa{position:fixed;right:24px;bottom:24px;z-index:var(--z-wa);display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 16px 0 14px;background:rgba(8,12,8,.96);border:1px solid var(--green);color:var(--green);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-decoration:none;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.45);transition:box-shadow .2s,transform .2s var(--ease-out-expo)}
.ch-wa svg{width:22px;height:22px;fill:currentColor;flex:none}
.ch-wa:hover{box-shadow:0 0 22px var(--green-glow),0 10px 30px rgba(0,0,0,.45);transform:translateY(-2px)}
body.light-mode .ch-wa{background:#0a0f0a;color:#00ff41;border-color:#00ff41}
@media (max-width:767px){.ch-wa{display:none}}

/* ---------- BARRA CTA MÓVIL ----------
   .m-cta-bar también existe en styles.css (home); aquí se encadena .ch-bar
   para que el estado «aparece tras el hero» no dependa de esas reglas. */
.m-cta-bar.ch-bar{display:none}
@media (max-width:767px){
  .m-cta-bar.ch-bar{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:var(--z-bar);display:grid;grid-template-columns:1fr 1fr;height:auto;padding:0 0 env(safe-area-inset-bottom,0px);margin:0;background:rgba(4,8,4,.96);border:0;border-top:1px solid #00ff41;box-shadow:0 -8px 24px rgba(0,0,0,.45);font-family:var(--font-mono);transform:none;visibility:visible;transition:transform .28s var(--ease-out-expo),visibility 0s}
  .m-cta-bar.ch-bar:not(.show){transform:translateY(105%);visibility:hidden;transition:transform .28s var(--ease-out-expo),visibility 0s .28s}
  .m-cta-bar.ch-bar a{display:flex;align-items:center;justify-content:center;gap:6px;height:var(--bar-h);min-height:var(--bar-h);padding:0;color:#00ff41;font:700 13px/1 var(--font-mono);letter-spacing:.16em;text-decoration:none;text-shadow:0 0 8px rgba(0,255,65,.4)}
  .m-cta-bar.ch-bar a+a{border-left:1px solid rgba(0,255,65,.28)}
  .m-cta-bar.ch-bar a:active{background:rgba(0,255,65,.1)}
  .m-cta-bar.ch-bar a:focus-visible{outline:2px solid #00ff41;outline-offset:-4px}
  body.has-cta-bar{padding-bottom:calc(var(--bar-h) + 8px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.m-cta-bar.ch-bar,.m-cta-bar.ch-bar.show{transition:none}}

/* ---------- FOOTER ---------- */
.ch-foot{position:relative;z-index:2;margin-top:96px;border-top:1px solid var(--g800);background:linear-gradient(180deg,rgba(0,255,65,.025),transparent 140px);font-family:var(--font-mono);color:var(--g400);text-align:left}
.ch-foot-in{max-width:1280px;margin:0 auto;padding:64px 28px 40px;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
.ch-foot-tag{margin:14px 0 18px;font-size:13px;line-height:1.7;color:var(--g300);max-width:40ch}
.ch-foot-proof{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--amber);font-size:13px;text-decoration:none;border-bottom:1px solid rgba(255,179,0,.35)}
.ch-foot-proof:hover{border-bottom-color:var(--amber)}
.ch-nap{margin-top:18px;font-style:normal;font-size:12px;line-height:1.9;color:var(--g400)}
.ch-nap a{color:var(--g200);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--g500)}
.ch-nap a:hover{color:var(--green)}
.ch-foot-h{margin:0 0 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.ch-foot-h::before{content:'> '}
.ch-foot ul{list-style:none;margin:0;padding:0}
.ch-foot li a{display:inline-flex;align-items:center;min-height:32px;font-size:13px;color:var(--g300);text-decoration:none;transition:color .15s}
.ch-foot li a:hover{color:var(--green)}
.ch-foot li a[aria-current="page"]{color:var(--green)}
.ch-foot-bar{max-width:1280px;margin:0 auto;padding:18px 28px 28px;border-top:1px dashed var(--g800);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:12px;line-height:1.8}
.ch-foot-bar p{margin:0}
.ch-foot-bar a{color:var(--g300);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--g500);display:inline-block;padding:4px 2px}
.ch-foot-bar a:hover{color:var(--green)}
.ch-legal-k{color:var(--green);letter-spacing:.16em}
body.light-mode .ch-foot{background:#eeeee6}
@media (max-width:1023px){.ch-foot-in{grid-template-columns:1fr 1fr;gap:32px 24px}.ch-foot-brand{grid-column:1/-1}}
@media (max-width:767px){
  .ch-foot{margin-top:64px}
  .ch-foot-in{padding:44px 20px 28px}
  .ch-foot-bar{padding:16px 20px 24px;flex-direction:column}
  .ch-foot li a{min-height:40px}
  .ch-foot-h{font-size:12px}
}

/* ---------- FORMULARIO REUTILIZABLE ---------- */
.ch-contact{position:relative;z-index:2;max-width:1200px;margin:96px auto 0;padding:0 50px;scroll-margin-top:calc(var(--nav-h) + 16px)}
.ch-contact-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;padding:48px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(0,255,65,.045),var(--g900) 55%)}
.ch-kicker{margin:0 0 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.ch-contact h2{font-family:var(--font-display);font-size:clamp(28px,3.6vw,44px);font-weight:900;line-height:1.1;letter-spacing:-.02em;color:var(--white);margin:0 0 18px;text-wrap:balance}
.ch-contact h2 .accent{color:var(--green);text-shadow:0 0 22px var(--green-glow)}
body.light-mode .ch-contact h2 .accent{text-shadow:none}
.ch-contact-copy>p{font-family:var(--font-mono);font-size:15px;line-height:1.75;color:var(--g300);margin:0 0 22px;max-width:44ch}
.ch-contact-alt{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-family:var(--font-mono);font-size:14px}
.ch-contact-alt a{display:inline-flex;align-items:center;gap:10px;min-height:40px;color:var(--g200);text-decoration:none}
.ch-contact-alt a span{color:var(--green);min-width:3.2em}
.ch-contact-alt a:hover{color:var(--green)}
.eo-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;font-family:var(--font-mono)}
.eo-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.eo-field--full{grid-column:1/-1}
.eo-field label{font-size:12px;letter-spacing:.1em;color:var(--green)}
.eo-opt{color:var(--g400);letter-spacing:0}
.eo-field input,.eo-field textarea{width:100%;font-family:var(--font-mono);font-size:16px;line-height:1.5;color:var(--white);background:var(--black);border:1px solid var(--g700);border-radius:0;padding:13px 14px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.eo-field textarea{min-height:128px;resize:vertical}
.eo-field input::placeholder,.eo-field textarea::placeholder{color:var(--g500)}
.eo-field input:focus,.eo-field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 18px rgba(0,255,65,.12)}
.eo-field input:focus-visible,.eo-field textarea:focus-visible{outline:none}
.eo-field input[aria-invalid="true"],.eo-field textarea[aria-invalid="true"]{border-color:var(--red)}
body.light-mode .eo-field input,body.light-mode .eo-field textarea{background:#fff;border-color:#c8c8c0}
.eo-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}
.eo-legal{grid-column:1/-1;margin:0;padding:12px 14px;border-left:2px solid var(--line);background:rgba(0,0,0,.18);font-size:12px;line-height:1.7;color:var(--g400)}
.eo-legal a{color:var(--g200);text-decoration:underline;text-underline-offset:3px}
body.light-mode .eo-legal{background:rgba(0,0,0,.03)}
.eo-consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.6;color:var(--g300)}
.eo-consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--green)}
.eo-consent a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.eo-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.eo-submit{border:1px solid var(--green)}
.eo-submit[disabled]{opacity:.6;transform:none;box-shadow:none}
.eo-note{font-size:12px;color:var(--g400);margin:0}
.eo-status{grid-column:1/-1;margin:0;min-height:1.6em;font-size:13px;line-height:1.6;color:var(--g300)}
.eo-status.err{color:var(--amber)}
.eo-status.ok{color:var(--green)}
.eo-status a{color:var(--green);text-decoration:underline}
@media (max-width:900px){.ch-contact-in{grid-template-columns:1fr;gap:32px;padding:32px 24px}}
@media (max-width:768px){.ch-contact{padding:0 20px;margin-top:64px}.eo-form{grid-template-columns:1fr}.ch-btn{width:100%}}

/* ---------- MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion:reduce){
  .ch-crumb [aria-current="page"]::after{animation:none}
  .ch-dd-panel,.ch-nav,.ch-btn,.ch-wa{transition:none}
}
