/* ==========================================================================
   AUTOKEN — sistema de diseño "red neuronal" (tema oscuro)
   Navy profundo del logotipo · tinta clara · corriente naranja
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fuentes auto-hospedadas (subset latin). Sin peticiones a terceros:
   mejor privacidad (sin cookies de Google), sin bloqueo de render externo.
   Archivo e IBM Plex Sans son variables; IBM Plex Mono, estática por peso.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("assets/fonts/archivo-var-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("assets/fonts/plexsans-var-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/plexmono-400-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("assets/fonts/plexmono-500-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("assets/fonts/plexmono-600-latin.woff2") format("woff2");
}

:root{
  /* fondo: navy del logo llevado a profundidad */
  --fondo:       #0B1322;
  --fondo-2:     #101A2E;   /* superficies elevadas */
  --fondo-3:     #16233B;   /* navy exacto del logotipo */
  --tinta:       #E8EDF5;   /* texto principal */
  --tinta-2:     #B7C3D8;   /* texto secundario */
  --tinta-suave: #7C8CA8;   /* anotaciones */
  --naranja:     #F26522;
  --naranja-claro:#FF8A47;  /* naranja legible en texto pequeño */
  --naranja-osc: #D45315;
  --linea:       rgba(151,169,199,0.14);
  --linea-fuerte:rgba(151,169,199,0.26);

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body:    "IBM Plex Sans", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --radius: 4px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  color:var(--tinta);
  background-color:var(--fondo);
  /* atmósfera: dos focos muy tenues, navy del logo y naranja */
  background-image:
    radial-gradient(1100px 700px at 82% -10%, rgba(43,74,131,0.32), transparent 60%),
    radial-gradient(900px 600px at -10% 108%, rgba(242,101,34,0.07), transparent 55%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* lienzo de red neuronal, detrás de todo */
#neural-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
main, .site-header, .site-footer, .ticker{
  position:relative;
  z-index:1;
}

img{ max-width:100%; display:block; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:820px; }

::selection{ background:rgba(242,101,34,0.35); color:#fff; }

/* ---------- cursor personalizado (nodo de la red) ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  body.cursor-on, body.cursor-on a, body.cursor-on button,
  body.cursor-on summary, body.cursor-on input, body.cursor-on textarea,
  body.cursor-on label{ cursor:none; }
}
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0;
  pointer-events:none;
  z-index:9999;
  opacity:0;
  transform:translate(-100px,-100px);
}
body.cursor-on .cursor-dot, body.cursor-on .cursor-ring{ opacity:1; }
.cursor-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--naranja);
  box-shadow:0 0 10px rgba(242,101,34,0.8);
}
.cursor-ring{
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid rgba(255,138,71,0.55);
  transition:width .22s ease, height .22s ease, border-color .22s ease, background-color .22s ease;
}
body.cursor-hover .cursor-ring{
  width:52px; height:52px;
  border-color:var(--naranja);
  background:rgba(242,101,34,0.08);
}
body.cursor-down .cursor-ring{
  width:22px; height:22px;
  border-color:var(--naranja);
}

/* ---------- tipografía ---------- */
h1,h2,h3{
  font-family:var(--f-display);
  font-stretch:118%;
  font-weight:800;
  line-height:1.06;
  letter-spacing:-0.015em;
  text-transform:uppercase;
  color:#fff;
}
h1{ font-size:clamp(2.1rem, 4.6vw, 3.6rem); }
h1 em{ font-style:normal; color:var(--naranja-claro); }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); }
h3{ font-size:1.06rem; letter-spacing:0.01em; }

.annot{
  font-family:var(--f-mono);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.14em;
  color:var(--tinta-suave);
  display:flex; align-items:center; gap:10px;
}
.annot-node{
  width:9px; height:9px; border-radius:50%;
  background:var(--fondo); border:2.5px solid var(--naranja);
  box-shadow:0 0 8px rgba(242,101,34,0.5);
  flex:none;
}

/* ---------- accesibilidad ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--naranja); color:#fff; padding:10px 16px; z-index:200;
  font-family:var(--f-mono); font-size:0.8rem;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{
  outline:3px solid var(--naranja);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 26px;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease,
             box-shadow .18s ease, transform .12s ease;
}
.btn-primary{
  background:var(--naranja);
  color:#fff;
  border-color:var(--naranja);
  box-shadow:0 0 24px rgba(242,101,34,0.25);
}
.btn-primary:hover{
  background:var(--naranja-osc); border-color:var(--naranja-osc);
  box-shadow:0 0 34px rgba(242,101,34,0.4);
}
.btn-primary:active{ transform:translateY(1px); }
.btn-ghost{
  background:rgba(232,237,245,0.03);
  color:var(--tinta);
  border-color:var(--linea-fuerte);
}
.btn-ghost:hover{ border-color:var(--naranja); color:var(--naranja-claro); }
.btn-block{ width:100%; text-align:center; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,19,34,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  height:72px;
  display:flex; align-items:center; gap:28px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--tinta);
}
.brand-text{
  font-family:var(--f-display);
  font-stretch:118%; font-weight:800;
  font-size:1.22rem; letter-spacing:0.02em; line-height:1;
  display:flex; flex-direction:column; gap:2px;
  color:#fff;
}
.brand-text small{
  font-family:var(--f-mono); font-weight:500;
  font-size:0.5rem; letter-spacing:0.28em; color:var(--tinta-suave);
}
.main-nav{ display:flex; gap:26px; margin-left:auto; }
.main-nav a{
  font-family:var(--f-mono); font-size:0.8rem; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--tinta-2); text-decoration:none;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.main-nav a:hover{ color:var(--naranja-claro); border-bottom-color:var(--naranja); }
.btn-header{ padding:11px 20px; font-size:0.76rem; }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:44px; height:44px;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  margin-left:auto;
}
.nav-toggle span{
  display:block; width:24px; height:2.5px;
  background:var(--tinta); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.mobile-nav{
  display:none;
  flex-direction:column;
  border-top:1px solid var(--linea);
  background:var(--fondo-2);
}
.mobile-nav a{
  font-family:var(--f-mono); font-size:0.9rem; letter-spacing:0.08em;
  text-transform:uppercase; text-decoration:none; color:var(--tinta);
  padding:16px 24px;
  border-bottom:1px solid var(--linea);
}
.mobile-nav a:hover{ color:var(--naranja-claro); }
.mobile-nav .mobile-cta{ color:var(--naranja-claro); font-weight:600; }
.mobile-nav.open{ display:flex; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding:4px 0 28px; overflow:hidden; }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:56px;
  align-items:start;
}
.annot-top{ margin-bottom:26px; }
.hero-sub{
  margin-top:10px;
  font-size:1.12rem;
  color:var(--tinta-2);
  max-width:56ch;
}
.hero-actions{ margin-top:16px; display:flex; gap:14px; flex-wrap:wrap; }

.hero-specs{
  margin-top:18px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--linea-fuerte);
}
.hero-specs > div{ padding:16px 18px 4px 0; }
.hero-specs > div + div{
  border-left:1px solid var(--linea-fuerte);
  padding-left:18px;
}
.hero-specs dt{
  font-family:var(--f-mono); font-size:0.66rem; font-weight:600;
  letter-spacing:0.16em; color:var(--naranja-claro);
}
.hero-specs dd{
  margin-top:6px; font-size:0.88rem; color:var(--tinta-2); line-height:1.45;
}

.hero-visual{ position:relative; }
.circuit-brain{
  width:100%; height:auto;
  filter:drop-shadow(0 0 34px rgba(242,101,34,0.14));
}
/* la mitad orgánica pasa a tinta clara sobre fondo oscuro */
.circuit-brain .organic{ stroke:var(--tinta); }
.circuit-brain line{ stroke:var(--tinta); }
.circuit-brain .nodes{ fill:var(--fondo); }
/* pulso de corriente sobre las trazas sólidas */
.pulses{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .pulses{ display:block; }
  .pulse{
    stroke-dasharray:16 300;
    animation:current 2.8s linear infinite;
    animation-delay:calc(var(--d, 0) * 1s);
  }
  .p1{ --d:0; }   .p2{ --d:.5; } .p3{ --d:1.0; }
  .p4{ --d:1.5; } .p5{ --d:2.0; } .p6{ --d:2.4; }
  @keyframes current{
    from{ stroke-dashoffset:316; }
    to{ stroke-dashoffset:0; }
  }
}

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{
  border-top:1px solid var(--linea-fuerte);
  border-bottom:1px solid var(--linea-fuerte);
  background:rgba(22,35,59,0.55);
  backdrop-filter:blur(4px);
  color:var(--tinta-2);
  overflow:hidden;
  padding:13px 0;
}
.ticker-track{
  display:flex; gap:34px; align-items:center;
  width:max-content;
  font-family:var(--f-mono); font-size:0.82rem; letter-spacing:0.05em;
  white-space:nowrap;
}
.ticker-track i{ color:var(--naranja); font-style:normal; font-size:0.6rem; }
@media (prefers-reduced-motion: no-preference){
  .ticker-track{ animation:ticker 38s linear infinite; }
  @keyframes ticker{
    from{ transform:translateX(-50%); }
    to{ transform:translateX(0); }
  }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ flex-wrap:wrap; width:auto; white-space:normal; padding:0 24px; }
}

/* ==========================================================================
   ESPINA (traza de circuito de scroll)
   ========================================================================== */
.spine-wrap{ position:relative; }
.spine{
  position:absolute;
  top:0; bottom:0;
  left:max(18px, calc((100vw - var(--maxw)) / 2 - 34px));
  width:2px;
  background:var(--linea-fuerte);
}
.spine-fill{
  position:absolute; top:0; left:0; width:100%;
  height:0%;
  background:var(--naranja);
  box-shadow:0 0 12px rgba(242,101,34,0.6);
}
.spine-fill::after{
  content:"";
  position:absolute; bottom:-6px; left:50%;
  transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  background:var(--fondo); border:3px solid var(--naranja);
  box-shadow:0 0 12px rgba(242,101,34,0.7);
}
@media (max-width: 1300px){
  .spine{ display:none; }
}

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.section{ padding:96px 0; }
.section-alt{
  background:rgba(16,26,46,0.45);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.section-head{ max-width:680px; margin-bottom:52px; }
.section-head h2{ margin-top:18px; }
.section-lead{ margin-top:16px; color:var(--tinta-2); font-size:1.05rem; }

/* revelado al hacer scroll */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- módulos de servicio ---------- */
.modules{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.module{
  background:linear-gradient(180deg, rgba(232,237,245,0.045), rgba(232,237,245,0.015));
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radius);
  padding:26px 24px 24px;
  position:relative;
  backdrop-filter:blur(2px);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.module::before{
  /* pin de conexión superior */
  content:"";
  position:absolute; top:-7px; left:24px;
  width:12px; height:12px; border-radius:50%;
  background:var(--fondo);
  border:3px solid var(--linea-fuerte);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.module:hover{
  border-color:rgba(242,101,34,0.65);
  box-shadow:0 12px 40px rgba(0,0,0,0.35), 0 0 28px rgba(242,101,34,0.10);
  transform:translateY(-3px);
}
.module:hover::before{
  border-color:var(--naranja);
  box-shadow:0 0 10px rgba(242,101,34,0.6);
}
.module h3{
  line-height:1.15;
  margin-bottom:14px;
}
.module > p{ font-size:0.94rem; color:var(--tinta-2); margin-bottom:16px; }
.module ul{ list-style:none; }
.module li{
  font-size:0.88rem; color:var(--tinta-2);
  padding:7px 0 7px 20px;
  position:relative;
  border-top:1px dashed var(--linea);
}
.module li::before{
  content:"";
  position:absolute; left:2px; top:14px;
  width:7px; height:7px;
  background:var(--naranja);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- método / flujo ---------- */
.flow{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.flow-step{
  min-width:0;
  padding:8px 26px 0 0;
  position:relative;
}
.flow-step + .flow-step{ padding-left:26px; border-left:1px solid var(--linea-fuerte); }
.flow-num{
  font-family:var(--f-mono);
  font-size:0.78rem; font-weight:600; letter-spacing:0.1em;
  color:var(--fondo);
  background:var(--tinta);
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:28px;
  border-radius:var(--radius);
  margin-bottom:18px;
  position:relative;
}
.flow-step:last-child .flow-num{ background:var(--naranja); color:#fff; }
.flow-num::after{
  content:"";
  position:absolute; right:-26px; top:50%;
  width:26px; height:1px;
  background:var(--linea-fuerte);
}
.flow-step:last-child .flow-num::after{ display:none; }
.flow-step h3{
  line-height:1.15;
  margin-bottom:12px;
  overflow-wrap:anywhere;
}
.flow-step p{ font-size:0.92rem; color:var(--tinta-2); }
.flow-close{
  max-width:780px;
  margin:42px auto 0;
  padding-top:24px;
  border-top:1px solid var(--linea-fuerte);
  color:var(--tinta);
  font-size:clamp(1.05rem, 1.6vw, 1.28rem);
  line-height:1.45;
  text-align:center;
}

/* ---------- equipo ---------- */
.team{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:stretch;
}
.person{
  background:linear-gradient(180deg, rgba(232,237,245,0.045), rgba(232,237,245,0.015));
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radius);
  padding:28px;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:100%;
}
.person-photo{
  aspect-ratio:1 / 1;
  width:min(100%, 228px);
  overflow:hidden;
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radius);
  background:#fff;
  position:relative;
  margin-bottom:24px;
}
.person-photo::after{
  content:"";
  position:absolute; right:10px; bottom:10px;
  width:8px; height:8px;
  background:var(--naranja);
  border-radius:1px;
  box-shadow:0 0 8px rgba(242,101,34,0.45);
}
.person-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.person:not(.person-alberto) .person-photo img{ object-position:56% top; }
.person-alberto .person-photo img{ object-position:center top; }
.person-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1;
  max-width:560px;
}
.person-head{
  min-height:74px;
  margin-bottom:14px;
}
.person-head h3{
  line-height:1.12;
  overflow-wrap:anywhere;
}
.person-role{
  font-family:var(--f-mono);
  font-size:0.7rem;
  letter-spacing:0.12em;
  color:var(--tinta-suave);
  margin-top:8px;
}
.person-body > p{
  font-size:0.96rem;
  line-height:1.65;
  color:var(--tinta-2);
  max-width:52ch;
}
.person-link{
  margin-top:auto;
  padding-top:24px;
  font-family:var(--f-mono);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--naranja-claro);
  text-decoration:none;
  transition:color .15s ease, text-decoration-color .15s ease, transform .15s ease;
  text-decoration-line:underline;
  text-decoration-color:transparent;
  text-underline-offset:4px;
}
.person-link:hover,
.person-link:focus-visible{
  color:var(--tinta);
  text-decoration-color:currentColor;
  transform:translateX(2px);
}
.person-link:focus-visible{
  outline:2px solid var(--naranja);
  outline-offset:5px;
  border-radius:2px;
}
.team-close{
  margin-top:52px;
  padding-top:26px;
  border-top:1px solid var(--linea-fuerte);
  width:100%;
}
.team-close-main{
  color:var(--tinta);
  font-size:clamp(1.05rem, 1.5vw, 1.24rem);
  line-height:1.45;
}
.team-close-sub{
  color:var(--tinta-2);
  font-size:0.95rem;
  margin-top:8px;
}

/* ---------- stack ---------- */
.stack-table{
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(232,237,245,0.02);
}
.stack-row{
  display:grid;
  grid-template-columns:190px 1fr;
  align-items:baseline;
}
.stack-row + .stack-row{ border-top:1px solid var(--linea); }
.stack-cat{
  font-family:var(--f-mono); font-size:0.74rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--naranja-claro);
  padding:18px 20px;
  border-right:1px solid var(--linea);
  align-self:stretch;
  display:flex; align-items:center;
  background:rgba(22,35,59,0.5);
}
.stack-row p{
  padding:18px 22px;
  font-size:0.94rem; color:var(--tinta-2);
}

/* ---------- FAQ ---------- */
.faq-item{
  background:linear-gradient(180deg, rgba(232,237,245,0.04), rgba(232,237,245,0.015));
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radius);
  margin-bottom:14px;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:20px 56px 20px 22px;
  font-family:var(--f-display); font-stretch:110%; font-weight:700;
  font-size:1rem;
  color:var(--tinta);
  position:relative;
  user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  position:absolute; right:22px; top:50%;
  transform:translateY(-50%);
  font-family:var(--f-mono); font-size:1.3rem; color:var(--naranja-claro);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item p{
  padding:0 22px 22px;
  color:var(--tinta-2); font-size:0.95rem;
}
.faq-item summary:hover{ color:var(--naranja-claro); }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.section-contact{
  background:linear-gradient(180deg, rgba(22,35,59,0.65), rgba(11,19,34,0.2));
  border-top:1px solid var(--linea-fuerte);
}
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:start;
}
.annot-light{ color:var(--tinta-suave); }
.annot-node-orange{ background:var(--fondo); }
.contact-copy h2{ margin:18px 0 20px; }
.contact-copy p{ color:var(--tinta-2); max-width:48ch; }
.contact-direct{ margin-top:28px; font-size:0.95rem; }
.contact-direct a{
  color:var(--naranja-claro); text-decoration:none;
  font-family:var(--f-mono); font-size:1.05rem; font-weight:600;
  border-bottom:2px solid transparent;
}
.contact-direct a:hover{ border-bottom-color:var(--naranja); }

.contact-form{
  background:var(--fondo-2);
  border-radius:var(--radius);
  padding:32px;
  color:var(--tinta);
  border:1px solid var(--linea-fuerte);
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-family:var(--f-mono); font-size:0.7rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--tinta-2);
  margin-bottom:8px;
}
.field .opt{ color:var(--tinta-suave); text-transform:none; letter-spacing:0.04em; }
.field input, .field textarea{
  width:100%;
  font-family:var(--f-body); font-size:0.98rem;
  color:var(--tinta);
  background:rgba(232,237,245,0.05);
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radius);
  padding:13px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--tinta-suave); }
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--naranja);
  box-shadow:0 0 0 3px rgba(242,101,34,0.22);
}
.field input.field-error, .field textarea.field-error{
  border-color:#E05C4B;
}
/* honeypot anti-bot: fuera de pantalla, invisible para humanos */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.form-privacy{
  font-size:0.78rem; color:var(--tinta-suave);
  margin:6px 0 18px; line-height:1.5;
}
.form-privacy a{ color:var(--tinta-2); text-decoration:underline; }
.form-privacy a:hover{ color:var(--naranja-claro); }
.form-status.form-ok{ color:#5FD08A; }
.form-status.form-err{ color:#E8846F; }
.form-status{
  margin-top:14px;
  font-family:var(--f-mono); font-size:0.8rem;
  color:var(--naranja-claro);
  min-height:1.2em;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:rgba(9,15,27,0.85);
  border-top:1px solid var(--linea-fuerte);
  padding:56px 0 28px;
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid var(--linea);
}
.footer-brand p{
  margin-top:16px; font-size:0.9rem; color:var(--tinta-suave); max-width:34ch;
}
.footer-nav, .footer-legal{ display:flex; flex-direction:column; gap:12px; }
.footer-nav a, .footer-legal a{
  font-family:var(--f-mono); font-size:0.8rem; letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--tinta-2); text-decoration:none;
  width:fit-content;
}
.footer-nav a:hover, .footer-legal a:hover{ color:var(--naranja-claro); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:24px;
  font-family:var(--f-mono); font-size:0.74rem; color:var(--tinta-suave);
  letter-spacing:0.06em;
}

/* ==========================================================================
   PÁGINAS LEGALES
   ========================================================================== */
.legal{ padding:56px 0 100px; }
.container-read{ max-width:720px; }

.legal-eyebrow{ margin-bottom:20px; }
.legal-title{ margin-bottom:14px; }
.legal-updated{
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.06em;
  color:var(--tinta-suave); margin-bottom:32px;
}
.legal-intro{ color:var(--tinta-2); font-size:1.02rem; margin-bottom:44px; }
.legal-intro p + p{ margin-top:14px; }

.legal-toc{
  list-style:none;
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radius);
  background:rgba(232,237,245,0.02);
  padding:6px 0;
  margin-bottom:56px;
  columns:2;
  column-gap:0;
}
.legal-toc li{ break-inside:avoid; }
.legal-toc a{
  display:block;
  font-family:var(--f-mono); font-size:0.8rem;
  color:var(--tinta-2); text-decoration:none;
  padding:9px 20px;
  border-bottom:1px dashed var(--linea);
  transition:color .15s ease;
}
.legal-toc a:hover{ color:var(--naranja-claro); }

.legal-body section{
  padding-top:44px;
  margin-top:44px;
  border-top:1px solid var(--linea);
}
.legal-body section:first-child{ padding-top:0; margin-top:0; border-top:none; }
.legal-body h2{
  display:flex; align-items:baseline; gap:12px;
  font-size:1.3rem;
  margin-bottom:18px;
  scroll-margin-top:96px;
}
.legal-num{
  font-family:var(--f-mono); font-weight:600;
  font-size:0.9rem;
  color:var(--naranja-claro);
  flex:none;
}
.legal-body h3{
  text-transform:none;
  font-family:var(--f-body); font-weight:600;
  font-size:1rem; letter-spacing:0;
  color:var(--tinta);
  margin:22px 0 8px;
}
.legal-body p{ color:var(--tinta-2); margin-bottom:14px; }
.legal-body p:last-child{ margin-bottom:0; }
.legal-body a{ color:var(--naranja-claro); }

.legal-list{ list-style:none; margin:14px 0; }
.legal-list li{
  font-size:0.96rem; color:var(--tinta-2);
  padding:9px 0 9px 20px;
  position:relative;
  border-top:1px dashed var(--linea);
}
.legal-list li:first-child{ border-top:none; }
.legal-list li::before{
  content:"";
  position:absolute; left:2px; top:17px;
  width:7px; height:7px;
  background:var(--naranja);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.legal-list strong{ color:var(--tinta); }

.legal-contact{ margin:18px 0; }

.legal-back{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:64px;
  font-family:var(--f-mono); font-size:0.8rem; letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--tinta-2); text-decoration:none;
  transition:color .15s ease;
}
.legal-back:hover{ color:var(--naranja-claro); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1020px){
  .modules{ grid-template-columns:1fr 1fr; }
  .flow{ grid-template-columns:1fr 1fr; row-gap:44px; }
  .flow-step:nth-child(3){
    border-left:none;
    padding-left:0;
    padding-top:28px;
    border-top:1px solid var(--linea-fuerte);
  }
  .flow-step:nth-child(4){
    padding-top:28px;
    border-top:1px solid var(--linea-fuerte);
  }
  .flow-step:nth-child(2) .flow-num::after{ display:none; }
  .flow-step:nth-child(3) .flow-num::after{ display:none; }
  .team{ grid-template-columns:1fr; }
  .person{
    padding:26px;
  }
  .person-photo{ width:210px; }
  .person-head{ min-height:auto; }
}

@media (max-width: 880px){
  .hero{ padding:0 0 24px; }
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-visual{ max-width:420px; margin:0 auto; }
  .main-nav, .btn-header{ display:none; }
  .nav-toggle{ display:flex; }
  .contact-grid{ grid-template-columns:1fr; gap:44px; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
}

@media (max-width: 640px){
  body{ font-size:16px; }
  .section{ padding:64px 0; }
  .modules{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; }
  .flow-step + .flow-step{ border-left:none; padding-left:0; border-top:1px solid var(--linea-fuerte); padding-top:28px; }
  .flow-num::after{ display:none; }
  .flow-close{ margin-top:34px; text-align:left; }
  .person{ padding:22px; }
  .person-photo{
    width:min(100%, 210px);
    margin-inline:auto;
  }
  .team-close{ margin-top:34px; }
  .hero-specs{ grid-template-columns:1fr; }
  .hero-specs > div + div{ border-left:none; padding-left:0; border-top:1px dashed var(--linea-fuerte); margin-top:6px; }
  .stack-row{ grid-template-columns:1fr; }
  .stack-cat{ border-right:none; border-bottom:1px dashed var(--linea); padding-bottom:12px; }
  .contact-form{ padding:24px 20px; }
  .legal{ padding:40px 0 72px; }
  .legal-toc{ columns:1; }
}

/* ==========================================================================
   COHETES — capa de espectáculo (secuencia de arranque, magnetismo, foco)
   Todo bajo html.js (no rompe sin JS) y desactivado en prefers-reduced-motion.
   ========================================================================== */

/* --- 1. Secuencia de arranque del hero ("sistema encendiéndose") --- */
html.js .hero-copy > .boot{
  opacity:0;
  transform:translateY(18px);
}
html.js .hero-visual.boot{
  opacity:0;
  clip-path:inset(0 0 100% 0);
}
html.js.booted .hero-copy > .boot{
  opacity:1;
  transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i, 0) * 0.09s);
}
html.js.booted .hero-visual.boot{
  opacity:1;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s cubic-bezier(.7,0,.2,1) .15s, opacity .5s ease .15s;
}
/* línea de escaneo que barre el circuito durante el arranque */
.hero-visual .scan{
  position:absolute; left:0; right:0; top:0; height:22%;
  pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(242,101,34,0.28), rgba(255,138,71,0.85), rgba(242,101,34,0.28), transparent);
  mix-blend-mode:screen;
  filter:blur(1px);
}
html.js.booted .hero-visual .scan{ animation:scan 1.15s cubic-bezier(.7,0,.2,1) .15s 1; }
@keyframes scan{
  0%{ opacity:0; transform:translateY(-30%); }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ opacity:0; transform:translateY(470%); }
}

/* --- 2. Glow vivo de la palabra "circuitos" y de los nodos --- */
@media (prefers-reduced-motion: no-preference){
  h1 em{ animation:emGlow 3.6s ease-in-out infinite; }
  @keyframes emGlow{
    0%,100%{ text-shadow:0 0 0 rgba(242,101,34,0); }
    50%{ text-shadow:0 0 22px rgba(242,101,34,0.55); }
  }
  .circuit-brain .nodes{ animation:nodeGlow 3.2s ease-in-out infinite; }
  @keyframes nodeGlow{
    0%,100%{ filter:drop-shadow(0 0 0 rgba(242,101,34,0)); }
    50%{ filter:drop-shadow(0 0 6px rgba(242,101,34,0.7)); }
  }
}

/* --- 2b. Decodificado terminal de las anotaciones mono --- */
.annot .annot-txt{ display:inline; }
.annot-txt.scrambling{ color:var(--naranja-claro); }

/* --- 3. Botones magnéticos --- */
html.js .btn.magnetic{ will-change:transform; }

/* --- 4. Tarjetas de servicio: foco de luz que sigue al cursor + relieve 3D --- */
.modules{ perspective:1100px; }
html.js .module{
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.module::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
            rgba(242,101,34,0.16), transparent 62%);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
html.js .module:hover::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  html.js .module{ transform:none !important; }
}

/* --- salvaguarda: sin animación, todo visible de inmediato --- */
@media (prefers-reduced-motion: reduce){
  html.js .hero-copy > .boot,
  html.js .hero-visual.boot{
    opacity:1; transform:none; clip-path:none; transition:none;
  }
  .hero-visual .scan{ display:none; }
}