/* ============================================================
   ASEDESTO — Sistema de diseño
   Concepto: laboratorio de neuromarketing. La página se lee como
   un monitor clínico: fondo oscuro tipo panel, cuadrícula de
   osciloscopio y una franja de señales multicanal (EEG / GSR /
   Eye Tracking) que es el elemento de firma del sitio.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Color — paleta "panel clínico" */
  --bg-base:      #0B0F14;   /* fondo general */
  --bg-panel:     #121821;   /* tarjetas / paneles */
  --bg-panel-2:   #171F2A;   /* paneles elevados / hover */
  --grid-line:    #1E2733;   /* líneas de cuadrícula, bordes finos */
  --ink:          #E7ECEF;   /* texto principal */
  --ink-dim:      #8A97A3;   /* texto secundario / etiquetas */
  --ink-faint:    #566270;   /* texto terciario */

  --signal-amber: #E8A33D;   /* canal 1 — EEG / SOUL Lab */
  --signal-teal:  #3FB7A8;   /* canal 2 — GSR / TAI NeuroLab */
  --signal-coral: #E2665A;   /* canal 3 — alerta / CTA */

  --radius-sm: 4px;
  --radius-md: 8px;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --maxw: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg-base);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em 0;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1em 0; color: var(--ink); }
p.lead{ font-size: 1.15rem; color: var(--ink-dim); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal-amber);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-bottom: .9em;
}
.eyebrow::before{
  content:"";
  width: 7px; height: 7px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.eyebrow.teal{ color: var(--signal-teal); }
.eyebrow.coral{ color: var(--signal-coral); }

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

/* ---------- Header / Nav ---------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: rgba(11,15,20,.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grid-line);
}
.nav{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family: var(--font-display);
  font-weight:700; font-size:1.15rem;
  display:flex; align-items:center; gap:10px;
  color: var(--ink);
}
.brand small{
  display:block; font-family: var(--font-mono); font-weight:400;
  font-size: .62rem; letter-spacing:.12em; color: var(--ink-faint); text-transform:uppercase;
}
.brand-mark{
  height: 38px; width: auto;
  flex-shrink:0;
  object-fit: contain;
}
nav.links{ display:flex; gap: 28px; align-items:center; }
nav.links a{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
nav.links a:hover, nav.links a.active{
  color: var(--ink);
  border-color: var(--signal-amber);
}
.nav-toggle{ display:none; background:none; border:1px solid var(--grid-line); color:var(--ink); padding:8px 10px; border-radius:var(--radius-sm); font-family:var(--font-mono); }

@media (max-width: 860px){
  nav.links{
    position: fixed; top: 65px; right: 0; bottom: 0; left: 0; z-index: 100;
    background: var(--bg-base);
    flex-direction: column; align-items:flex-start; gap:0;
    padding: 10px 24px 24px; border-top:1px solid var(--grid-line);
    transform: translateY(-110%); transition: transform .25s ease, visibility .25s ease;
    visibility: hidden;
    overflow-y: auto;
  }
  nav.links.open{ transform: translateY(0); visibility: visible; }
  nav.links a{ padding: 14px 0; width:100%; border-bottom:1px solid var(--grid-line); }
  .nav-toggle{ display:block; }
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-mono);
  font-size: .82rem; letter-spacing:.03em; text-transform:uppercase;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--signal-amber);
  transition: transform .15s, background .15s, color .15s;
}
.btn-primary{ background: var(--signal-amber); color: #16110A; font-weight:600; }
.btn-primary:hover{ transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--grid-line); }
.btn-ghost:hover{ border-color: var(--signal-amber); color: var(--signal-amber); }
.btn-teal{ border-color: var(--signal-teal); }
.btn-teal.btn-primary{ background: var(--signal-teal); color:#06201C; }

/* ---------- Señal / waveform (elemento de firma) ---------- */
.signal-strip{
  width:100%; display:block; overflow:hidden;
}
.signal-strip svg{ display:block; width:100%; height:auto; }
.signal-path{ fill:none; stroke-width:2; }
.signal-amber{ stroke: var(--signal-amber); }
.signal-teal{ stroke: var(--signal-teal); }
.signal-coral{ stroke: var(--signal-coral); }

.signal-scroll{
  animation: scrollSignal 14s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .signal-scroll{ animation: none; }
}
@keyframes scrollSignal{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.channel-label{
  font-family: var(--font-mono); font-size:.68rem; color: var(--ink-faint);
  letter-spacing:.1em; text-transform:uppercase;
  display:flex; justify-content:space-between; padding: 4px 2px;
}

/* ---------- Hero ---------- */
.hero{ padding: 76px 0 40px; }
.hero-inner{ max-width: 760px; }
.hero p.lead{ margin-bottom: 1.8em; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 48px; }
.hero-panel{
  border:1px solid var(--grid-line);
  background: var(--bg-panel);
  border-radius: var(--radius-md);
  padding: 22px 22px 10px;
}

/* ---------- Secciones ---------- */
section{ padding: 64px 0; }
section.tight{ padding: 44px 0; }
.section-head{ max-width: 640px; margin-bottom: 40px; }
.divider{ border:none; border-top:1px solid var(--grid-line); margin:0; }

/* ---------- Grid / Cards ---------- */
.grid{ display:grid; gap: 22px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

.card{
  background: var(--bg-panel);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-md);
  padding: 26px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--signal-amber);
}
.card.teal::before{ background: var(--signal-teal); }
.card.coral::before{ background: var(--signal-coral); }
.card:hover{ border-color: var(--ink-faint); transform: translateY(-3px); }
.card h3{ margin-bottom:.4em; }
.card p{ color: var(--ink-dim); font-size:.95rem; margin-bottom:0; }
.card .tag{
  font-family: var(--font-mono); font-size:.68rem; color: var(--ink-faint);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; display:block;
}

/* Proceso numerado (justificado: pasos reales de un proceso de investigación) */
.process{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; counter-reset: step; }
@media (max-width: 900px){ .process{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .process{ grid-template-columns: 1fr; } }
.process .step{
  padding: 20px; border-left: 1px solid var(--grid-line);
}
.process .step:first-child{ border-left:none; }
.process .step .num{
  font-family: var(--font-mono); color: var(--signal-amber); font-size:.85rem;
  display:block; margin-bottom:10px;
}

/* ---------- Producto (SOUL / TAI) ---------- */
.product-hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center;
}
@media (max-width: 860px){ .product-hero{ grid-template-columns: 1fr; } }
.spec-list{ list-style:none; margin:0; padding:0; }
.spec-list li{
  display:flex; gap:14px; padding: 14px 0; border-top:1px solid var(--grid-line);
  font-size:.95rem; color: var(--ink-dim);
}
.spec-list li:last-child{ border-bottom:1px solid var(--grid-line); }
.spec-list li strong{ color: var(--ink); min-width: 190px; font-weight:600; }

/* ---------- Galería capacitaciones ---------- */
.gallery-card{
  background: var(--bg-panel); border:1px solid var(--grid-line); border-radius: var(--radius-md);
  overflow:hidden;
}
.gallery-photo{
  aspect-ratio: 4/3; background: var(--bg-panel-2);
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--grid-line);
  color: var(--ink-faint); font-family:var(--font-mono); font-size:.75rem; text-align:center; padding:14px;
}
.gallery-photo img{ width:100%; height:100%; object-fit:cover; }
.gallery-meta{ padding: 16px 18px; }
.gallery-meta .seminario{ font-weight:600; margin-bottom:2px; }
.gallery-meta .empresa{ color: var(--signal-teal); font-family: var(--font-mono); font-size:.78rem; }

/* ---------- Recursos ---------- */
.resource-card .tag{ color: var(--signal-teal); }

/* ---------- Formulario contacto ---------- */
.form-field{ margin-bottom: 18px; }
.form-field label{ display:block; font-family: var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-dim); margin-bottom:8px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background: var(--bg-panel); border:1px solid var(--grid-line); color: var(--ink);
  padding: 12px 14px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size:.95rem;
}
.form-field textarea{ resize: vertical; min-height:120px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:2px solid var(--signal-amber); outline-offset:1px; border-color:var(--signal-amber); }
.form-note{ font-size:.82rem; color: var(--ink-faint); }

.contact-info-list{ list-style:none; margin:0; padding:0; }
.contact-info-list li{ padding: 16px 0; border-top:1px solid var(--grid-line); }
.contact-info-list li:last-child{ border-bottom:1px solid var(--grid-line); }
.contact-info-list .label{ font-family:var(--font-mono); font-size:.7rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:4px;}

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--bg-panel);
  border-top:1px solid var(--grid-line); border-bottom:1px solid var(--grid-line);
  padding: 56px 0; text-align:center;
}
.cta-band h2{ margin-bottom:.3em; }
.cta-band p.lead{ max-width:560px; margin:0 auto 1.6em; }

/* ---------- Footer ---------- */
footer.site{ padding: 48px 0 30px; border-top:1px solid var(--grid-line); margin-top: 20px;}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; margin-bottom:36px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:14px; }
.footer-grid a, .footer-grid p{ display:block; color: var(--ink-dim); font-size:.9rem; margin-bottom:8px; }
.footer-grid a:hover{ color: var(--signal-amber); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family: var(--font-mono); font-size:.72rem; color: var(--ink-faint); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Chip de logo (fondo blanco para logos con texto oscuro) ---------- */
.logo-chip{
  background:#fff;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display:inline-flex; align-items:center; gap:12px;
}
.logo-chip img{ display:block; }
.logo-chip span{
  font-family: var(--font-mono); font-size:.72rem; color:#2A2E33;
  letter-spacing:.02em; line-height:1.3;
}

a:focus-visible, button:focus-visible{ outline:2px solid var(--signal-amber); outline-offset:2px; }