/* ═══════════════════════════════════════════════════════════════════
   NOXIGY — Design System v2
   style-urbn-v2.css

   Arquitectura:
   01. Tokens       — Variables CSS, Design System base
   02. Reset        — Normalize y box model
   03. Base         — HTML, Body, Tipografía global
   04. Utilities    — Clases de apoyo transversales
   05. Nav          — Navegación sticky
   06. Hero         — Primera sección
   07. Ticker       — Banda animada
   08. Results      — Métricas y resultados
   09. Services     — Grid de servicios
   10. Portfolio    — Grid de trabajos
   11. Process      — Pasos del proceso
   12. Clients      — Grid de clientes
   13. Testimonials — Citas de clientes
   14. FAQ          — Acordeón de preguntas
   15. Contact      — Formulario de contacto
   16. Footer       — Pie de página
   17. Animations   — Keyframes globales
═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   01. TOKENS — Design System
   ─────────────────────────────────────────────────────────────────
   Todas las decisiones de diseño centralizadas aquí.
   Nunca hardcodees un valor que exista como token.
═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Superficie ─────────────────────────────────────────────── */
  --bg:            #09090B;   /* Background principal              */
  --bg-secondary:  #111113;   /* Background secundario / cards     */
  --surface:       #18181B;   /* Surface / elevated cards          */
  --border:        #1F1F23;   /* Borde sutil                       */
  --border-light:  #2A2A30;   /* Borde con más peso               */

  /* ── Color de marca ─────────────────────────────────────────── */
  --accent:        #C9F31D;   /* Verde NOXIGY — CTA, activos         */
  --accent-hover:  #d6ff33;   /* Hover del verde                   */
  --accent-soft:   rgba(201, 243, 29, 0.10);   /* Soft fill        */
  --accent-border: rgba(201, 243, 29, 0.28);   /* Soft border      */
  --accent-glow:   rgba(201, 243, 29, 0.15);   /* Glow sutil       */

  /* ── Texto ──────────────────────────────────────────────────── */
  --text:          #FAFAFA;   /* Texto primario                    */
  --t2:            #A1A1AA;   /* Texto secundario                  */
  --t3:            #71717A;   /* Texto terciario / placeholders    */

  /* ── Tipografía ─────────────────────────────────────────────── */
  --font-display:  'Satoshi', 'Inter', -apple-system, sans-serif;
  --font:          'Inter', -apple-system, sans-serif;
  --mono:          'Geist Mono', 'Fira Code', monospace;

  /* ── Tamaños tipográficos ────────────────────────────────────── */
  --text-xs:       11px;
  --text-sm:       12px;
  --text-base:     14px;
  --text-md:       15px;
  --text-lg:       16px;

  /* ── Radios ─────────────────────────────────────────────────── */
  --r-sm:          4px;
  --r:             6px;
  --rl:            10px;
  --r-xl:          14px;
  --r-pill:        999px;

  /* ── Espaciado ──────────────────────────────────────────────── */
  --space-xs:      8px;
  --space-sm:      16px;
  --space-md:      24px;
  --space-lg:      40px;
  --space-xl:      64px;
  --space-2xl:     96px;
  --space-3xl:     128px;

  /* ── Transiciones ───────────────────────────────────────────── */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      350ms;
  --dur-enter:     550ms;

  /* ── Sombras ────────────────────────────────────────────────── */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 0 1px var(--accent-border), 0 4px 24px var(--accent-glow);

  /* ── Layout ─────────────────────────────────────────────────── */
  --max-w:         1200px;
  --pad-x:         48px;
}


/* ═══════════════════════════════════════════════════════════════════
   02. RESET
═══════════════════════════════════════════════════════════════════ */

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

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

button, input, textarea, select {
  font-family: inherit;
  font-size:   inherit;
  color:       inherit;
}

a {
  color:           inherit;
  text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════
   03. BASE
═══════════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
}

body {
  background:   var(--bg);
  color:        var(--text);
  font-family:  var(--font);
  font-weight:  400;
  font-size:    var(--text-base);
  line-height:  1.6;
  overflow-x:   hidden;
  min-height:   100dvh;
}

.logo-img {

    height: 24px; /* Cambia el tamaño a tu gusto */

    width: auto;

    display: block;

    transition: transform .25s var(--ease);

    animation: logoNeonPulse 2.6s ease-in-out infinite;

}

.logo:hover .logo-img {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .logo-img {
    animation: none;
    transition: none !important;
    filter: drop-shadow(0 0 16px rgba(201, 243, 29, .3));
  }
}


/* ═══════════════════════════════════════════════════════════════════
   04. UTILITIES
═══════════════════════════════════════════════════════════════════ */

/* Sección base */
section {
  padding:    var(--space-2xl) var(--pad-x);
  background: var(--bg);
}

/* Separador semántico */
.border-top {
  border-top: 1px solid var(--border);
}

/* Animación de entrada por scroll */
.fade-up {
  opacity:    0;
  transform:  translateY(20px);
  transition:
    opacity   var(--dur-enter) var(--ease),
    transform var(--dur-enter) var(--ease);
}

.fade-up.in {
  opacity:   1;
  transform: translateY(0);
}

/* Títulos de sección */
.sec-title {
  font-family:     var(--font-display);
  font-size:       clamp(32px, 4vw, 52px);
  font-weight:     600;
  letter-spacing:  -0.025em;
  color:           var(--text);
  line-height:     1.05;
  margin-bottom:   10px;
}

.sec-sub {
  font-size:    var(--text-base);
  font-weight:  300;
  color:        var(--t2);
  max-width:    480px;
  line-height:  1.8;
}


/* ═══════════════════════════════════════════════════════════════════
   05. NAV
   Sticky, con blur. Grid de tres columnas: logo | links | cta.
═══════════════════════════════════════════════════════════════════ */

nav {
  position:         sticky;
  top:              0;
  z-index:          100;
  display:          grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:      center;
  padding:          0 var(--pad-x);
  height:           54px;
  background:       rgba(9, 9, 11, 0.80);
  border-bottom:    1px solid var(--border);
  backdrop-filter:  blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

/* Logo */
.logo {
  display:         flex;
  align-items:     center;
  gap:             9px;
  font-family:     var(--font-display);
  font-size:       15px;
  font-weight:     700;
  letter-spacing:  -0.02em;
  color:           var(--text);
  text-decoration: none;
  transition:      opacity var(--dur-base) var(--ease);
}

.logo:hover {
  opacity: 0.8;
}

.logo em {
  color:      var(--accent);
  font-style: normal;
}

/* Nav links centrados */
.nav-center {
  display:     flex;
  align-items: center;
  gap:         2px;
  list-style:  none;
}

.nav-center a {
  color:           var(--t3);
  text-decoration: none;
  font-size:       var(--text-xs);
  font-weight:     500;
  padding:         5px 12px;
  border-radius:   var(--r-pill);
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  transition:
    color      var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease);
}

.nav-center a:hover {
  color:      var(--text);
  background: rgba(255, 255, 255, 0.05);
}

/* Zona derecha: CTA + lang */
.nav-right {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             8px;
}

/* Botón hamburguesa — oculto en escritorio, visible en móvil (ver 18. RESPONSIVE) */
.nav-toggle {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           30px;
  height:          30px;
  background:      none;
  border:          none;
  padding:         0;
  cursor:          pointer;
}

.nav-toggle span {
  display:    block;
  width:      100%;
  height:     1.5px;
  background: var(--text);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}

nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Botones del nav (School, Nexo, Hablemos) — estilo "ghost" tipo Entrar de Nexo */
.nav-cta {
  display:         inline-flex;
  align-items:     center;
  padding:         7px 14px;
  border-radius:   var(--r);
  background:      transparent;
  border:          1px solid var(--border-light);
  color:           var(--t3);
  font-family:     var(--mono);
  font-size:       var(--text-xs);
  font-weight:     500;
  text-decoration: none;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  white-space:     nowrap;
  transition:
    color        var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

.nav-cta:hover {
  color:        var(--text);
  border-color: var(--t3);
}

/* Academia / Nexo — versión "ghost", sin caja, para no competir en peso
   visual con el CTA principal (Hablemos) */
.nav-secondary {
  border-color: transparent;
  background:   transparent;
}

.nav-secondary:hover {
  background:   rgba(255, 255, 255, 0.06);
  border-color: transparent;
}

.nav-center-only {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════════
   06. HERO
   Full viewport. Mucho espacio negativo. Tipografía masiva.
═══════════════════════════════════════════════════════════════════ */

#hero {
  padding:         var(--space-2xl) var(--pad-x);
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  position:        relative;
  overflow:        hidden;
}

/* Gradiente de fondo sutil en el hero */
#hero::before {
  content:    '';
  position:   absolute;
  top:        -200px;
  right:      -200px;
  width:      700px;
  height:     700px;
  background: radial-gradient(ellipse at center, rgba(201,243,29,0.04) 0%, transparent 65%);
  pointer-events: none;
}

/* Badge de localización */
.hero-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       5px 14px 5px 5px;
  border:        1px solid var(--border-light);
  border-radius: var(--r-pill);
  font-size:     var(--text-xs);
  font-weight:   400;
  color:         var(--t2);
  margin-bottom: 18px;
  width:         fit-content;
  background:    rgba(255, 255, 255, 0.025);
}

/* Wrapper del punto pulsante */
.pin-wrap {
  position:        relative;
  width:           22px;
  height:          22px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.pin-pulse {
  position:   absolute;
  inset:      0;
  border-radius: 50%;
  background: rgba(201, 243, 29, 0.20);
  animation:  ping 2.4s var(--ease-out) infinite;
}

.pin-pulse2 {
  position:   absolute;
  inset:      4px;
  border-radius: 50%;
  background: rgba(201, 243, 29, 0.12);
  animation:  ping 2.4s var(--ease-out) infinite 0.45s;
}

.pin-dot {
  width:       8px;
  height:      8px;
  background:  var(--accent);
  border-radius: 50%;
  position:    relative;
  z-index:     1;
  box-shadow:  0 0 8px rgba(201, 243, 29, 0.7);
}

/* Titular principal */
h1.hero-h {
  font-family:    var(--font-display);
  font-size:      clamp(56px, 9vw, 108px);
  font-weight:    700;
  line-height:    0.97;
  letter-spacing: -0.04em;
  max-width:      none;
  text-transform: uppercase;
  color:          var(--text);
}

h1.hero-h em {
  color:      var(--accent);
  font-style: normal;
  animation:  neonPulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  h1.hero-h em {
    animation:   none;
    text-shadow: 0 0 16px rgba(201, 243, 29, .3);
  }
}

/* Subtítulo */
.hero-sub {
  margin-top:  var(--space-md);
  font-size:   var(--text-lg);
  font-weight: 300;
  color:       var(--t2);
  max-width:   480px;
  line-height: 1.75;
}

.hero-sub strong {
  color:       var(--text);
  font-weight: 500;
}

/* Botonera */
.hero-actions {
  margin-top:  var(--space-lg);
  display:     flex;
  gap:         10px;
  flex-wrap:   wrap;
  align-items: center;
}

/* Botón primario — verde sólido */
.btn-contact {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         11px 20px;
  border-radius:   var(--r);
  background:      var(--accent);
  border:          none;
  color:           #09090B;
  font-family:     var(--mono);
  font-size:       var(--text-xs);
  font-weight:     600;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  text-decoration: none;
  transition:
    background  var(--dur-base) var(--ease),
    transform   var(--dur-fast) var(--ease),
    box-shadow  var(--dur-base) var(--ease);
}

.btn-contact:hover {
  background: var(--accent-hover);
  transform:  translateY(-1px);
  box-shadow: var(--shadow-accent);
}

.btn-contact:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   07. TICKER
   Banda de texto en loop. Minimalista.
═══════════════════════════════════════════════════════════════════ */

.ticker-wrap {
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding:       10px 0;
  overflow:      hidden;
  background:    var(--bg);
}

.ticker-track {
  --tick-set-count: 2; /* el script recalcula esto según cuánto haga falta */
  display:   flex;
  width:     max-content;
  animation: tick 32s linear infinite;
}

.ticker-set {
  display: flex;
}

.ticker-item {
  display:     flex;
  align-items: center;
  gap:         16px;
  padding:     0 28px;
  font-size:   var(--text-xs);
  font-weight: 600;
  font-family: var(--mono);
  color:       var(--t2);
  white-space: nowrap;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.tsep {
  width:        3px;
  height:       3px;
  background:   var(--accent);
  border-radius: 50%;
  opacity:      0.5;
  flex-shrink:  0;
}


/* ═══════════════════════════════════════════════════════════════════
   08. RESULTS
   Tres métricas en grid. Números grandes con acento verde.
═══════════════════════════════════════════════════════════════════ */

#results {}

.results-headline {
  font-family:    var(--font-display);
  font-size:      clamp(26px, 3.4vw, 50px);
  font-weight:    700;
  letter-spacing: -0.03em;
  line-height:    1.1;
  margin-bottom:  10px;
  color:          var(--text);
}

.results-headline em {
  color:      var(--accent);
  font-style: normal;
  animation:  neonPulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .results-headline em {
    animation: none;
    text-shadow: 0 0 16px rgba(201, 243, 29, .3);
  }
}

.results-sub {
  font-size:     var(--text-base);
  font-weight:   300;
  color:         var(--t2);
  margin-bottom: var(--space-lg);
}

/* Grid de tarjetas de resultado */
.results-grid {
  display:        grid;
  grid-template-columns: repeat(3, 1fr);
  gap:            1px;
  background:     var(--border);
  border:         1px solid var(--border);
  border-radius:  var(--r-xl);
  overflow:       hidden;
}

.result-card {
  background:     var(--bg-secondary);
  padding:        48px 40px;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  text-align:     center;
  gap:            12px;
  min-height:     170px;
  position:       relative;
  overflow:       hidden;
  transition:     background var(--dur-slow) var(--ease);
}

/* Número watermark de fondo */
.result-card::before {
  content:        attr(data-num);
  position:       absolute;
  bottom:         -24px;
  right:          -8px;
  font-family:    var(--font-display);
  font-size:      160px;
  font-weight:    800;
  letter-spacing: -0.06em;
  color:          rgba(255, 255, 255, 0.025);
  line-height:    1;
  pointer-events: none;
  user-select:    none;
}

.result-card:hover {
  background: var(--surface);
}

.result-value {
  font-family:    var(--font-display);
  font-size:      clamp(40px, 4.5vw, 56px);
  font-weight:    700;
  letter-spacing: -0.04em;
  line-height:    1;
  color:          var(--text);
}

.result-value em {
  color:      var(--accent);
  font-style: normal;
}

.result-label {
  font-size:   var(--text-sm);
  font-weight: 300;
  color:       var(--t2);
  line-height: 1.65;
  max-width:   240px;
}


/* ═══════════════════════════════════════════════════════════════════
   09. SERVICES
   Cuatro fases del proceso creativo, no una lista de tareas sueltas.
═══════════════════════════════════════════════════════════════════ */

.phases-grid {
  display:        grid;
  grid-template-columns: repeat(2, 1fr);
  gap:            1px;
  background:     var(--border);
  border:         1px solid var(--border);
  border-radius:  var(--r-xl);
  overflow:       hidden;
  margin-top:     var(--space-lg);
}

.phase-card {
  background:  var(--bg);
  padding:     44px 40px;
  display:     flex;
  flex-direction: column;
  gap:         26px;
  transition:  background var(--dur-slow) var(--ease);
}

.phase-card:hover {
  background: var(--bg-secondary);
}

/* Visual de la fase — sin fotografía inventada: número + ícono */
.phase-visual {
  position:        relative;
  height:          120px;
  border:          1px solid var(--border-light);
  border-radius:   var(--rl);
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      radial-gradient(circle at 85% 15%, var(--accent-glow), transparent 60%);
  transition:      border-color var(--dur-base) var(--ease);
}

.phase-card:hover .phase-visual {
  border-color: var(--accent-border);
}

.phase-num {
  position:       absolute;
  top:            14px;
  left:           16px;
  font-family:    var(--mono);
  font-size:      var(--text-xs);
  letter-spacing: 0.1em;
  color:          var(--t3);
}

.phase-visual svg {
  width:            38px;
  height:           38px;
  stroke:           var(--t3);
  fill:             none;
  stroke-width:     1.4;
  stroke-linecap:   round;
  stroke-linejoin:  round;
  transition:       stroke var(--dur-base) var(--ease);
}

.phase-card:hover .phase-visual svg {
  stroke: var(--accent);
}

.phase-body h3 {
  font-family:    var(--font-display);
  font-size:      22px;
  font-weight:    600;
  letter-spacing: -0.02em;
  color:          var(--text);
  margin-bottom:  8px;
}

.phase-desc {
  font-size:   var(--text-sm);
  font-weight: 300;
  color:       var(--t2);
  line-height: 1.8;
  max-width:   420px;
}

.phase-tags {
  display:      flex;
  flex-wrap:    wrap;
  gap:          8px;
  margin-top:   18px;
}

.phase-tags span {
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color:          var(--t3);
  border:         1px solid var(--border-light);
  border-radius:  var(--r-pill);
  padding:        5px 11px;
  transition:
    border-color var(--dur-base) var(--ease),
    color        var(--dur-base) var(--ease);
}

.phase-card:hover .phase-tags span {
  border-color: var(--accent-border);
  color:        var(--t2);
}


/* ═══════════════════════════════════════════════════════════════════
   10. PORTFOLIO
   Grid 3×3. Overlay reveal al hover con animación stagger.
═══════════════════════════════════════════════════════════════════ */

#portfolio {
  border-top: 1px solid var(--border);
}

/* Header con filtros */
.portfolio-header {
  display:       flex;
  align-items:   flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  flex-wrap:     wrap;
  gap:           var(--space-sm);
}

/* Grid del portfolio */
.portfolio-grid {
  display:        grid;
  grid-template-columns: repeat(3, 1fr);
  gap:            2px;
  background:     var(--border);
  border:         1px solid var(--border);
  border-radius:  var(--r-xl);
  overflow:       hidden;
}

/* Tarjeta individual */
.pf-card {
  position:      relative;
  overflow:      hidden;
  cursor:        pointer;
  background:    var(--bg-secondary);
  aspect-ratio:  16 / 9;
  transition:
    opacity   var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

/* Bordes externos para las esquinas del grid */
.pf-card:first-child  { border-radius: var(--r-xl) 0 0 0; }
.pf-card:nth-child(3) { border-radius: 0 var(--r-xl) 0 0; }
.pf-card:nth-child(7) { border-radius: 0 0 0 var(--r-xl); }
.pf-card:last-child   { border-radius: 0 0 var(--r-xl) 0; }

/* Imagen real */
.pf-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.6s var(--ease);
}

/* Placeholder cuando no hay imagen */
.pf-placeholder {
  width:       100%;
  height:      100%;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  transform 0.6s var(--ease);
}

/* Escala al hover */
.pf-card:hover .pf-img,
.pf-card:hover .pf-placeholder {
  transform: scale(1.05);
}

/* Overlay degradado de revelación */
.pf-overlay {
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
    to top,
    rgba(9, 9, 11, 0.95) 0%,
    rgba(9, 9, 11, 0.45) 45%,
    transparent 100%
  );
  opacity:        0;
  transition:     opacity var(--dur-slow) var(--ease);
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:        20px;
}

.pf-card:hover .pf-overlay {
  opacity: 1;
}

/* Etiqueta de tipo con stagger */
.pf-tag {
  font-size:      var(--text-xs);
  font-family:    var(--mono);
  color:          var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom:  5px;
  transform:      translateY(10px);
  transition:     transform var(--dur-slow) 60ms var(--ease);
}

.pf-title {
  font-size:   var(--text-base);
  font-weight: 500;
  color:       var(--text);
  margin-bottom: 4px;
  transform:   translateY(10px);
  transition:  transform var(--dur-slow) 90ms var(--ease);
  line-height: 1.3;
  /* Máximo 2 líneas — así un título largo nunca hace que esa tarjeta
     se vea más "pesada" que el resto de la cuadrícula. */
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
}

.pf-channel {
  font-size:   var(--text-xs);
  font-weight: 300;
  color:       var(--t2);
  display:     flex;
  align-items: center;
  gap:         6px;
  transform:   translateY(10px);
  transition:  transform var(--dur-slow) 110ms var(--ease);
}

.pf-card:hover .pf-tag,
.pf-card:hover .pf-title,
.pf-card:hover .pf-channel {
  transform: translateY(0);
}

.pf-channel-dot {
  width:         3px;
  height:        3px;
  background:    var(--accent);
  border-radius: 50%;
  flex-shrink:   0;
}

/* Label de placeholder */
.ph-label {
  font-size:      var(--text-xs);
  font-family:    var(--mono);
  color:          rgba(255, 255, 255, 0.10);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  user-select:    none;
}

/* Placeholders con gradientes de color */
.g1 { background: linear-gradient(145deg, #100a0a, #1e0c0c); }
.g7 { background: linear-gradient(145deg, #100a0e, #1c0b14); }
.g8 { background: linear-gradient(145deg, #090e10, #0b151c); }
.g9 { background: linear-gradient(145deg, #0c0f09, #141a0a); }

/* CTA inferior del portfolio */
.portfolio-cta {
  margin-top:     var(--space-md);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        20px 24px;
  border:         1px solid var(--border);
  border-radius:  var(--r-xl);
  background:     var(--bg-secondary);
  gap:            var(--space-sm);
}

.portfolio-cta-text {
  font-size: var(--text-base);
  color:     var(--t2);
}

.portfolio-cta-text strong {
  color:       var(--text);
  font-weight: 500;
}

/* Botón pequeño rojo/verde */
.btn-red-sm {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         9px 18px;
  border-radius:   var(--r);
  font-size:       var(--text-xs);
  font-weight:     600;
  font-family:     var(--mono);
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  background:      var(--accent);
  color:           #09090B;
  flex-shrink:     0;
  transition:
    background var(--dur-base) var(--ease),
    transform  var(--dur-fast) var(--ease);
}

.btn-red-sm:hover {
  background: var(--accent-hover);
  transform:  translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════════
   11. PROCESS
   No un proceso de producción — una metodología. Pestañas + vista
   previa: los 5 pasos van en una fila arriba, la idea de cada uno
   se revela debajo, a todo el ancho, al pasar el cursor o tocar.
═══════════════════════════════════════════════════════════════════ */

.proc-wrap {
  position:       relative;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xl);
  margin-top:     var(--space-xl);
}

.proc-index {
  display:        flex;
  align-items:    flex-start;
  gap:            var(--space-2xl);
  border-bottom:  1px solid var(--border);
  overflow-x:     auto;
  scrollbar-width: none;
}

.proc-index::-webkit-scrollbar {
  display: none;
}

.proc-idx-item {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            6px;
  position:       relative;
  flex-shrink:    0;
  padding:        0 0 var(--space-md) 0;
  border:         none;
  border-bottom:  2px solid transparent;
  background:     none;
  font:           inherit;
  text-align:     left;
  cursor:         pointer;
  -webkit-tap-highlight-color: transparent;
}

.proc-idx-item.is-active {
  border-bottom-color: var(--border-light);
}

/* Barra de progreso del auto-avance: vive sobre el borde inferior
   de la pestaña y se llena de izquierda a derecha durante el ciclo. */
.proc-idx-bar {
  position:   absolute;
  left:       0;
  bottom:     -2px;
  width:      0%;
  height:     2px;
  background: var(--accent);
  z-index:    1;
}

.proc-idx-item.is-progressing .proc-idx-bar {
  animation: procBarFill var(--proc-duration, 4200ms) linear forwards;
}

.proc-idx-item.is-progress-paused .proc-idx-bar {
  animation-play-state: paused;
}

@keyframes procBarFill {
  from { width: 0%; }
  to   { width: 100%; }
}

.proc-idx-n {
  font-family:    var(--mono);
  font-size:      var(--text-xs);
  color:          var(--t3);
  letter-spacing: 0.08em;
  transition:     color var(--dur-base) var(--ease);
}

.proc-idx-t {
  font-family:    var(--font-display);
  font-size:      clamp(16px, 1.6vw, 20px);
  font-weight:    500;
  letter-spacing: -0.01em;
  color:          var(--t2);
  white-space:    nowrap;
  transition:     color var(--dur-base) var(--ease);
}

.proc-idx-item.is-active .proc-idx-n,
.proc-idx-item:hover .proc-idx-n {
  color: var(--accent);
}

.proc-idx-item.is-active .proc-idx-t,
.proc-idx-item:hover .proc-idx-t {
  color: var(--text);
}

.proc-preview {
  position:      relative;
  overflow:      hidden;
  min-height:    200px;
  transition:
    opacity   var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.proc-preview.is-switching {
  opacity:   0;
  transform: translateY(8px);
}

.proc-preview-ghost {
  position:    absolute;
  top:         -0.22em;
  right:       0;
  z-index:     0;
  font-family: var(--font-display);
  font-size:   clamp(120px, 16vw, 260px);
  font-weight: 700;
  line-height: 1;
  color:       var(--border);
  pointer-events: none;
  user-select: none;
}

.proc-preview-n {
  position:       relative;
  z-index:        1;
  font-family:    var(--mono);
  font-size:      var(--text-xs);
  color:          var(--accent);
  letter-spacing: 0.1em;
  margin-bottom:  var(--space-md);
}

.proc-preview-t {
  position:       relative;
  z-index:        1;
  font-family:    var(--font-display);
  font-size:      clamp(32px, 4.5vw, 56px);
  font-weight:    600;
  letter-spacing: -0.02em;
  color:          var(--text);
  margin-bottom:  var(--space-md);
}

.proc-preview-d {
  position:    relative;
  z-index:     1;
  font-size:   var(--text-lg);
  font-weight: 300;
  color:       var(--t2);
  line-height: 1.75;
  max-width:   520px;
}

@media (prefers-reduced-motion: reduce) {
  .proc-idx-item.is-progressing .proc-idx-bar {
    animation: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   12. CLIENTS
   Cinta en loop automático (mismo mecanismo que el ticker de arriba),
   con fotos grandes — no es una lista de clientes, son personas con
   las que construimos algo. Toda la info vive en la propia tarjeta:
   al pasar el cursor la foto crece, aparece una línea y se revela el
   nombre + el tipo de proyecto. Cierra con una tarjeta de invitación.
═══════════════════════════════════════════════════════════════════ */

#clients {
  border-top: 1px solid var(--border);
}

.cl-wrap {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xl);
  margin-top:     var(--space-lg);
}

/* Full-bleed: rompe el padding de la sección, igual que el ticker de
   arriba, para que se sienta como una cinta viva y no un bloque más. */
.cl-marquee-mask {
  width:       calc(100% + 2 * var(--pad-x));
  margin-left: calc(-1 * var(--pad-x));
  overflow:    hidden;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding:     14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.cl-marquee {
  --cl-set-count: 2; /* el script recalcula esto según cuánto haga falta */
  display:   flex;
  width:     max-content;
  animation: clMarquee 24s linear infinite;
}

.cl-marquee:hover {
  animation-play-state: paused;
}

@keyframes clMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--cl-set-count))); }
}

.cl-mq-set {
  display: flex;
  gap:     var(--space-xl);
  padding-right: var(--space-xl);
}

.cl-mq-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  flex-shrink:     0;
  width:           142px;
  padding:         4px 8px;
  text-decoration: none;
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
}

.cl-mq-photo {
  width:         104px;
  height:        104px;
  border-radius: 50%;
  border:        1.5px solid var(--border-light);
  flex-shrink:   0;
  overflow:      hidden;
  position:      relative;
  background:    var(--surface);
  transition:    transform .5s var(--ease), border-color .4s var(--ease);
}

.cl-mq-item:hover .cl-mq-photo {
  transform:    scale(1.06);
  border-color: var(--border-light);
}

.cl-mq-fallback {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       24px;
  font-weight:     700;
}

.cl-mq-photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  position:   relative;
  z-index:    1;
}

/* Línea fina que aparece bajo la foto en hover — el detalle que dice
   "esto se puede tocar", sin recurrir a un marco o una sombra pesada. */
.cl-mq-line {
  display:    block;
  width:      0;
  height:     1px;
  background: var(--accent);
  margin:     14px 0 10px;
  transition: width .4s var(--ease);
}

.cl-mq-item:hover .cl-mq-line {
  width: 26px;
}

.cl-mq-info {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            5px;
  min-height:     34px; /* reserva el alto del tipo de proyecto para que no salte el layout */
}

.cl-mq-name {
  font-family:    var(--font-display);
  font-size:      14px;
  font-weight:    500;
  letter-spacing: -0.005em;
  color:          var(--text);
  white-space:    nowrap;
  opacity:        .5;
  transition:     opacity .35s var(--ease);
}

.cl-mq-item:hover .cl-mq-name {
  opacity: 1;
}

.cl-mq-type {
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--t3);
  white-space:    nowrap;
  opacity:        0;
  transform:      translateY(-3px);
  transition:     opacity .35s var(--ease), transform .35s var(--ease);
}

.cl-mq-item:hover .cl-mq-type {
  opacity:   1;
  transform: translateY(0);
}

/* Tarjeta de cierre — no es una persona, es una invitación. Un círculo
   discontinuo con un "+" en vez de foto; el texto ya se ve sin hover
   (es la única tarjeta pensada para leerse, no solo para descubrirse). */
.cl-mq-invite-circle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-style:    dashed;
  background:      transparent;
  transition:
    border-color .4s var(--ease),
    background   .4s var(--ease),
    box-shadow   .4s var(--ease),
    transform    .5s var(--ease);
}

.cl-mq-invite:hover .cl-mq-invite-circle {
  border-color: var(--accent-border);
  background:   var(--accent-soft);
  box-shadow:   0 0 22px var(--accent-glow);
  transform:    scale(1.06);
}

.cl-mq-plus {
  font-family: var(--font-display);
  font-size:   30px;
  font-weight: 300;
  color:       var(--t3);
  transition:  color .4s var(--ease);
}

.cl-mq-invite:hover .cl-mq-plus {
  color: var(--accent);
}

.cl-mq-invite-text {
  font-family: var(--font-display);
  font-size:   12.5px;
  font-weight: 500;
  color:       var(--t2);
  text-align:  center;
  line-height: 1.4;
  opacity:     .85;
  transition:  opacity .35s var(--ease), color .35s var(--ease);
}

.cl-mq-invite:hover .cl-mq-invite-text {
  opacity: 1;
  color:   var(--text);
}

.cl-note {
  margin-top:     var(--space-md);
  font-size:      var(--text-xs);
  font-weight:    300;
  color:          var(--t3);
  font-family:    var(--mono);
  letter-spacing: 0.06em;
}


/* ═══════════════════════════════════════════════════════════════════
   13. TESTIMONIALS
   Avatares horizontales con opacidad. Cita grande en itálica.
═══════════════════════════════════════════════════════════════════ */

#testimonials {
  border-top: 1px solid var(--border);
  padding:    var(--space-2xl) var(--pad-x);
}

/* Strip de avatares */
.test-avatars-strip {
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap:     wrap;
}

.test-av-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  cursor:         pointer;
  opacity:        0.22;
  transition:
    opacity   var(--dur-slow)  var(--ease),
    transform var(--dur-base)  var(--ease);
}

.test-av-item:hover {
  opacity:   0.55;
  transform: translateY(-2px);
}

.test-av-item.active {
  opacity:   1;
  transform: translateY(-3px);
}

/* Imagen del avatar */
.test-av-img {
  width:           52px;
  height:          52px;
  border-radius:   50%;
  overflow:        hidden;
  border:          2px solid transparent;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       13px;
  font-weight:     700;
  flex-shrink:     0;
  transition:      border-color var(--dur-slow) var(--ease);
}

.test-av-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.test-av-item.active .test-av-img {
  border-color: var(--accent);
}

/* Nombre bajo avatar */
.test-av-label {
  font-size:      9px;
  font-family:    var(--mono);
  color:          var(--t3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space:    nowrap;
  transition:     color var(--dur-slow) var(--ease);
}

.test-av-item.active .test-av-label {
  color: var(--text);
}

/* Fila: flecha | cita | flecha — ancho fijo y centrado, para que las
   flechas se queden pegadas al texto en vez de a los bordes de la pantalla */
.test-nav-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  max-width:   900px;
  margin:      0 auto;
}

.test-arrow {
  flex-shrink:     0;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  border:          1px solid var(--border-light);
  background:      transparent;
  color:           var(--t2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:
    border-color var(--dur-base) var(--ease),
    background   var(--dur-base) var(--ease),
    color        var(--dur-base) var(--ease);
}

.test-arrow:hover {
  border-color: var(--accent-border);
  background:   var(--accent-soft);
  color:        var(--accent);
}

/* Bloque de cita */
.test-body {
  flex:       1;
  min-width:  0;
  text-align: center;
}

/* Envuelve la cita + el botón "Leer más" para que el hueco antes del
   nombre sea siempre el mismo, tenga o no tenga botón la reseña. */
.test-quote-wrap {
  margin-bottom: var(--space-md);
}

/* Reserva siempre el espacio de 6 líneas (la más larga posible) y centra
   la cita dentro — así una reseña de 1 línea o de 6 ocupan la misma
   altura y ni las flechas ni lo que hay debajo se mueven al cambiar. */
.test-quote-frame {
  font-size:       clamp(20px, 2.8vw, 34px);
  min-height:      calc(1.45em * 6);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.test-quote-text {
  font-family:    var(--font-display);
  font-size:      clamp(20px, 2.8vw, 34px);
  font-weight:    400;
  color:          var(--text);
  line-height:    1.45;
  letter-spacing: -0.02em;
  font-style:     italic;
  /* Recorta reseñas largas a 6 líneas — se puede expandir con el botón
     "Leer más" sin tener que acortar el texto original. */
  display:            -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp:         6;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
  transition:
    opacity   var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.test-quote-text.expanded {
  display:             block;
  -webkit-line-clamp:  unset;
  line-clamp:          unset;
  overflow:            visible;
}

.test-quote-toggle {
  display:        none;
  margin:         10px auto 0;
  background:     none;
  border:         none;
  cursor:         pointer;
  font-family:    var(--mono);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--accent);
  padding:        4px 8px;
}

.test-quote-toggle:hover {
  text-decoration: underline;
}

.test-quote-text.out {
  opacity:   0;
  transform: translateY(14px);
}

.test-author-name {
  font-family:    var(--mono);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--text);
  margin-bottom:  4px;
}

.test-author-subs {
  font-size:   var(--text-xs);
  font-family: var(--mono);
  color:       var(--t3);
}


/* ═══════════════════════════════════════════════════════════════════
   14. FAQ
   Acordeón limpio. Ícono rotando. Sin fondo en la pregunta.
═══════════════════════════════════════════════════════════════════ */

#faq {
  border-top: 1px solid var(--border);
}

.faq-list {
  margin-top: var(--space-lg);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width:           100%;
  background:      none;
  border:          none;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         22px 0;
  font-family:     var(--font);
  font-size:       var(--text-base);
  font-weight:     500;
  color:           var(--text);
  text-align:      left;
  cursor:          pointer;
  gap:             var(--space-sm);
  letter-spacing:  0.02em;
  transition:      color var(--dur-base) var(--ease);
}

.faq-question:hover {
  color: var(--t2);
}

/* Ícono + */
.faq-icon {
  width:           24px;
  height:          24px;
  border:          1px solid var(--border-light);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-size:       15px;
  line-height:     1;
  color:           var(--t3);
  transition:
    transform    var(--dur-slow) var(--ease),
    border-color var(--dur-base) var(--ease),
    background   var(--dur-base) var(--ease),
    color        var(--dur-base) var(--ease);
}

.faq-item.open .faq-icon {
  transform:    rotate(45deg);
  border-color: var(--accent-border);
  background:   var(--accent-soft);
  color:        var(--accent);
}

/* Respuesta acordeón */
.faq-answer {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.38s var(--ease-in-out);
}

.faq-answer-inner {
  padding:     0 0 22px;
  font-size:   var(--text-sm);
  font-weight: 300;
  color:       var(--t2);
  line-height: 1.85;
  max-width:   680px;
}

.faq-item.open .faq-answer {
  max-height: 320px;
}


/* ═══════════════════════════════════════════════════════════════════
   15. CONTACT
   Formulario limpio.
═══════════════════════════════════════════════════════════════════ */

/* Formulario */
.cf-form {
  text-align: left;
}

.cf-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.cf-label {
  font-family:    var(--mono);
  font-size:      10px;
  font-weight:    500;
  color:          var(--t3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Input estilo minimalista */
.cf-input {
  background:  rgba(255, 255, 255, 0.03);
  border:      1px solid var(--border-light);
  border-radius: var(--r-xl);
  color:       var(--text);
  font-family: var(--font);
  font-size:   var(--text-base);
  font-weight: 300;
  padding:     13px 16px;
  outline:     none;
  width:       100%;
  transition:
    border-color var(--dur-base) var(--ease),
    background   var(--dur-base) var(--ease);
}

.cf-input:focus {
  border-color: var(--accent-border);
  background:   rgba(201, 243, 29, 0.03);
  box-shadow:   0 0 0 3px rgba(201, 243, 29, 0.06);
}

.cf-input::placeholder {
  color: var(--t3);
}

/* Textarea */
.cf-textarea {
  background:  rgba(255, 255, 255, 0.03);
  border:      1px solid var(--border-light);
  border-radius: var(--r-xl);
  color:       var(--text);
  font-family: var(--font);
  font-size:   var(--text-base);
  font-weight: 300;
  padding:     13px 16px;
  outline:     none;
  width:       100%;
  resize:      vertical;
  min-height:  110px;
  line-height: 1.65;
  transition:
    border-color var(--dur-base) var(--ease),
    background   var(--dur-base) var(--ease);
}

.cf-textarea:focus {
  border-color: var(--accent-border);
  background:   rgba(201, 243, 29, 0.03);
  box-shadow:   0 0 0 3px rgba(201, 243, 29, 0.06);
}

.cf-textarea::placeholder {
  color: var(--t3);
}

/* Botón de envío */
.cf-submit-btn {
  width:          100%;
  background:     var(--accent);
  color:          #09090B;
  border:         none;
  border-radius:  var(--r-xl);
  padding:        16px;
  font-family:    var(--mono);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor:         pointer;
  margin-top:     10px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  transition:
    background var(--dur-base) var(--ease),
    transform  var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.cf-submit-btn:hover {
  background: var(--accent-hover);
  transform:  translateY(-1px);
  box-shadow: var(--shadow-accent);
}

.cf-submit-btn:active {
  transform: translateY(0);
}

/* Mensajes de estado */
.cf-err {
  font-size:   var(--text-xs);
  color:       #f87171;
  margin-top:  10px;
  font-family: var(--mono);
  text-align:  center;
  min-height:  16px;
  letter-spacing: 0.04em;
}


/* ═══════════════════════════════════════════════════════════════════
   15b. ABOUT — Página "Sobre NOXIGY"
   Editorial, a pantalla completa por bloque. Sin tarjetas, sin iconos.
   Solo tipografía grande, aire y ritmo. Scroll-snap sutil solo en
   esta página (activado vía body.about-page).
═══════════════════════════════════════════════════════════════════ */

body.about-page {
  scroll-snap-type: y proximity;
}

.about-chapter {
  scroll-snap-align: start;
  scroll-margin-top: 54px;
  padding:           var(--space-2xl) var(--pad-x);
  display:           flex;
  flex-direction:    column;
  justify-content:   flex-start;
  position:          relative;
  border-top:        1px solid var(--border);
}

.about-chapter:first-child {
  border-top: none;
}

.about-head {
  margin-bottom: var(--space-lg);
}

.about-eyebrow {
  font-family:    var(--mono);
  font-size:      var(--text-xs);
  color:          var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom:  var(--space-md);
}

/* ── Hero ── */
.about-hero {
  align-items: center;
  text-align:  center;
  overflow:    hidden;
}

.about-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  opacity:    .05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.about-hero-title {
  font-family:    var(--font-display);
  /* Fórmula ligada al ancho real disponible (no vw a secas) para que
     el titular quepa siempre en una sola línea, del móvil más
     estrecho al escritorio más ancho. */
  font-size:      clamp(18px, calc((100vw - 2 * var(--pad-x)) / 12.4), 92px);
  font-weight:    700;
  letter-spacing: -0.035em;
  line-height:    1.05;
  white-space:    nowrap;
  color:          var(--text);
  position:       relative;
  z-index:        1;
}

.about-hero-sub {
  font-size:   var(--text-lg);
  font-weight: 300;
  color:       var(--t2);
  max-width:   620px;
  line-height: 1.75;
  margin-top:  var(--space-md);
  position:    relative;
  z-index:     1;
}

/* "AGENCIA" se tacha en bucle — la negación hecha gesto, mismo ritmo que el
   brillo de CONEXIÓN pero contando lo contrario: esto no es lo que somos. */
.strike-word {
  position:   relative;
  display:    inline-block;
  animation:  strikeFade 5s ease-in-out infinite;
}

.strike-word::after {
  content:          '';
  position:         absolute;
  left:             -3%;
  right:            -3%;
  top:              52%;
  height:           0.08em;
  border-radius:    2px;
  background:       var(--accent);
  box-shadow:       0 0 10px var(--accent), 0 0 22px var(--accent-glow);
  transform-origin: left center;
  transform:        scaleX(0);
  animation:        strikeLoop 5s ease-in-out infinite;
}

@keyframes strikeLoop {
  0%   { transform: scaleX(0); }
  22%  { transform: scaleX(1); }
  65%  { transform: scaleX(1); }
  88%  { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}

@keyframes strikeFade {
  0%, 20%   { opacity: 1; }
  35%, 55%  { opacity: .5; }
  78%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .strike-word,
  .strike-word::after {
    animation: none;
  }
  .strike-word::after {
    transform: scaleX(1);
  }
  .strike-word {
    opacity: .6;
  }
}

/* "NO SON CLIENTES" arriba, "CONEXIONES" abajo — en bucle lento: se
   lee "CLIENTES", se sostiene, se tacha, se apaga, y en ese momento
   aparece "CONEXIONES" con el mismo neón que usa el resto del sitio.
   Luego vuelve atrás y repite. */
.clients-line {
  display: block;
}

.clients-strike-loop {
  position:  relative;
  display:   inline-block;
  animation: clientsWordLoop 9s ease-in-out infinite;
}

.clients-strike-loop::after {
  content:          '';
  position:         absolute;
  left:             -2%;
  right:            -2%;
  top:              52%;
  height:           0.06em;
  border-radius:    2px;
  background:       var(--accent);
  box-shadow:       0 0 6px var(--accent);
  transform-origin: left center;
  transform:        scaleX(0);
  animation:        clientsStrikeLoop 9s ease-in-out infinite;
}

@keyframes clientsStrikeLoop {
  0%, 15%   { transform: scaleX(0); }
  40%       { transform: scaleX(1); }
  75%       { transform: scaleX(1); }
  92%, 100% { transform: scaleX(0); }
}

@keyframes clientsWordLoop {
  0%, 15%   { opacity: 1; }
  40%, 75%  { opacity: .35; }
  92%, 100% { opacity: 1; }
}

/* "SON CONEXIONES QUE NOS DEFINEN" queda siempre visible — solo
   CONEXIONES tiene el brillo neón continuo (el mismo que usa el
   resto del sitio), sin animación de aparición/desaparición. */
.conexiones-glow {
  color:      var(--accent);
  font-style: normal;
  animation:  neonPulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .clients-strike-loop,
  .clients-strike-loop::after {
    animation: none;
  }
  .clients-strike-loop {
    opacity: .6;
  }
  .clients-strike-loop::after {
    transform: scaleX(1);
  }
  .conexiones-glow {
    animation:   none;
    text-shadow: 0 0 16px rgba(201, 243, 29, .3);
  }
}


/* ── Bloques de sección (01–05) ── */
.about-section-title {
  font-family:    var(--font-display);
  font-size:      clamp(24px, 5vw, 60px);
  font-weight:    700;
  letter-spacing: -0.03em;
  line-height:    1.08;
  color:          var(--text);
  margin-bottom:  var(--space-lg);
}

/* "Todo empieza con una conexión" (01 — Origen): mismo titular que el
   cierre, así que se fuerza también a una sola línea siempre. Las
   demás secciones (más largas) se quedan con el wrap seguro de arriba. */
.about-section-title--oneline {
  font-size:   clamp(13px, calc((100vw - 2 * var(--pad-x)) / 17.8), 60px);
  white-space: nowrap;
}

.about-section-title em,
.about-closing-title em {
  color:      var(--accent);
  font-style: normal;
  animation:  neonPulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .about-section-title em,
  .about-closing-title em {
    animation:   none;
    text-shadow: 0 0 16px rgba(201, 243, 29, .3);
  }
}

.about-lede {
  font-family:    var(--font-display);
  font-size:      clamp(20px, 2.4vw, 28px);
  font-weight:    400;
  letter-spacing: -0.01em;
  line-height:    1.55;
  color:          var(--t2);
  max-width:      780px;
}

.about-lede strong {
  color:       var(--text);
  font-weight: 500;
}

/* ── Sección 02: creencias ── */
.beliefs-list {
  max-width:     900px;
  border-bottom: 1px solid var(--border);
}

.belief-item {
  border-top:     1px solid var(--border);
  padding:        var(--space-md) 0;
  font-family:    var(--font-display);
  font-size:      clamp(19px, 2.4vw, 28px);
  font-weight:    500;
  letter-spacing: -0.01em;
  line-height:    1.4;
  color:          var(--text);
}

/* ── Sección 04: cómo trabajamos ── */
.about-process {
  max-width: var(--max-w);
}

.about-process-step {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-2xl);
  border-top:  1px solid var(--border);
  padding:     var(--space-md) 0;
  flex-wrap:   wrap;
}

.about-process-step:last-child {
  border-bottom: 1px solid var(--border);
}

.about-process-word {
  font-family:    var(--font-display);
  font-size:      clamp(24px, 3.2vw, 40px);
  font-weight:    600;
  letter-spacing: -0.02em;
  color:          var(--text);
  min-width:      220px;
}

.about-process-desc {
  font-size:   var(--text-base);
  font-weight: 300;
  color:       var(--t2);
  line-height: 1.75;
  max-width:   460px;
}

/* ── Cierre ── */
.about-closing {
  align-items:     center;
  justify-content: center;
  text-align:      center;
}

.about-closing-title {
  font-family:    var(--font-display);
  font-size:      clamp(16px, calc((100vw - 2 * var(--pad-x)) / 17.8), 72px);
  font-weight:    700;
  letter-spacing: -0.03em;
  white-space:    nowrap;
  color:          var(--text);
  margin-bottom:  var(--space-lg);
}

@media (prefers-reduced-motion: reduce) {
  body.about-page { scroll-snap-type: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   16. FOOTER
   Tres columnas: logo | links | copyright.
═══════════════════════════════════════════════════════════════════ */

footer {
  border-top:      1px solid var(--border);
  padding:         22px var(--pad-x);
  display:         grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:     center;
  gap:             var(--space-sm);
}

.ft-logo-img {
  height:      24px;
  width:       auto;
  justify-self: start;
}

.ft-links {
  display:      flex;
  justify-self: center;
  gap:          24px;
  list-style:   none;
}

.ft-links a {
  font-size:   var(--text-xs);
  color:       var(--t3);
  text-decoration: none;
  transition:  color var(--dur-base) var(--ease);
  letter-spacing: 0.03em;
}

.ft-links a:hover {
  color: var(--text);
}

.ft-copy {
  font-size:      var(--text-xs);
  color:          var(--t3);
  font-family:    var(--mono);
  letter-spacing: 0.04em;
  justify-self:   end;
}


/* ═══════════════════════════════════════════════════════════════════
   16c. LEGAL — Términos y Privacidad
   Cabecera corta + contenido en columna legible. Nada de tipografía
   gigante aquí: son páginas para leer, no para emocionar.
═══════════════════════════════════════════════════════════════════ */

/* Cabecera minimal: solo un enlace para volver a la web, sin el nav completo */
.legal-topbar {
  max-width: 760px;
  margin:    0 auto;
  padding:   var(--space-lg) var(--pad-x) 0;
}

.legal-back {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-size:       var(--text-sm);
  color:           var(--t2);
  text-decoration: none;
  transition:      color var(--dur-base) var(--ease);
}

.legal-back:hover {
  color: var(--text);
}

.legal-hero {
  max-width: 760px;
  margin:    0 auto;
  padding:   var(--space-xl) var(--pad-x) var(--space-lg);
}

.legal-title {
  font-family:    var(--font-display);
  font-size:      clamp(24px, 3.2vw, 34px);
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height:    1.3;
  color:          var(--text);
  margin-bottom:  10px;
}

.legal-sub {
  font-size:     var(--text-base);
  font-weight:   300;
  color:         var(--t2);
  margin-bottom: 8px;
}

.legal-updated {
  font-family:    var(--mono);
  font-size:      var(--text-xs);
  color:          var(--t3);
  letter-spacing: 0.04em;
}

.legal-body {
  padding:    0 var(--pad-x) var(--space-2xl);
  max-width:  760px;
  margin:     0 auto;
}

.legal-section {
  border-top: 1px solid var(--border);
  padding:    var(--space-lg) 0;
}

.legal-section:last-child {
  border-bottom: 1px solid var(--border);
}

.legal-section h2 {
  font-family:    var(--font-display);
  font-size:      22px;
  font-weight:    600;
  letter-spacing: -0.01em;
  color:          var(--text);
  margin-bottom:  14px;
}

.legal-section h3 {
  font-family:    var(--mono);
  font-size:      var(--text-xs);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--t2);
  margin:         18px 0 8px;
}

.legal-section p {
  font-size:   var(--text-base);
  font-weight: 300;
  color:       var(--t2);
  line-height: 1.8;
  margin-bottom: 12px;
}

.legal-section ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

.legal-section li {
  font-size:   var(--text-base);
  font-weight: 300;
  color:       var(--t2);
  line-height: 1.8;
  margin-bottom: 6px;
}

.legal-section strong {
  color:       var(--text);
  font-weight: 500;
}

.legal-section a {
  color:           var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Datos que el propietario del sitio tiene que rellenar antes de publicar */
.legal-todo {
  background:    var(--accent-soft);
  color:         var(--accent);
  padding:       1px 6px;
  border-radius: 4px;
  font-weight:   500;
}


/* ═══════════════════════════════════════════════════════════════════
   16b. SCHOOL MODAL
   "Próximamente" — franja de construcción animada en verde NOXIGY.
═══════════════════════════════════════════════════════════════════ */

.school-modal-overlay {
  position:        fixed;
  inset:            0;
  z-index:          200;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          var(--space-sm);
  background:       rgba(9, 9, 11, 0.88);
  backdrop-filter:  blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity:          0;
  pointer-events:   none;
  transition:       opacity var(--dur-slow) var(--ease);
}

.school-modal-overlay.open {
  opacity:        1;
  pointer-events: all;
}

.school-modal {
  position:      relative;
  width:         min(420px, 100%);
  background:    var(--bg-secondary);
  border:        1px solid var(--border-light);
  border-radius: var(--r-xl);
  padding:       40px 36px;
  text-align:    center;
  transform:     scale(.94) translateY(8px);
  transition:    transform var(--dur-slow) var(--ease);
}

/* Modal de NEXO — más ancho para que el titular quepa en una sola línea */
.nexo-modal-card {
  width: min(600px, 100%);
}

.nexo-modal-title {
  font-size:   26px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .nexo-modal-title {
    white-space: normal;
  }
}

.school-modal-overlay.open .school-modal {
  transform: scale(1) translateY(0);
}

.school-modal-close {
  position:      absolute;
  top:           14px;
  right:         14px;
  width:         28px;
  height:        28px;
  border-radius: 50%;
  border:        1px solid var(--border-light);
  background:    transparent;
  color:         var(--t3);
  font-size:     13px;
  cursor:        pointer;
  transition:
    color        var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

.school-modal-close:hover {
  color:        var(--text);
  border-color: var(--t3);
}

/* Estado: punto pulsante, mismo lenguaje que el badge del hero */
.school-modal-status {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  margin-bottom:   16px;
}

.school-modal-dot {
  position:      relative;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--accent);
  box-shadow:    0 0 8px rgba(201, 243, 29, 0.7);
}

.school-modal-dot::before {
  content:       '';
  position:      absolute;
  inset:         -6px;
  border-radius: 50%;
  background:    rgba(201, 243, 29, 0.20);
  animation:     ping 2.4s var(--ease-out) infinite;
}

.school-modal-eyebrow {
  font-family:    var(--mono);
  font-size:      var(--text-xs);
  color:          var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.school-modal-title {
  font-family:    var(--font-display);
  font-size:      32px;
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--text);
  margin-bottom:  10px;
}

.school-modal-text {
  font-size:   var(--text-sm);
  font-weight: 300;
  color:       var(--t2);
  line-height: 1.7;
}

/* Palabra en neón dentro de un modal (ej. "Nexo" en el aviso de construcción) */
.modal-neon {
  color:      var(--accent);
  font-style: normal;
  animation:  neonPulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .school-modal-dot::before { animation: none; }
  .modal-neon { animation: none; text-shadow: 0 0 16px rgba(201, 243, 29, .3); }
}

/* Modal de contacto — mismo overlay/tarjeta que School, más ancho para el formulario */
.contact-modal {
  width:      min(460px, 100%);
  text-align: left;
  max-height: 88vh;
  overflow-y: auto;
}

.contact-modal-title {
  font-family:    var(--font-display);
  font-size:      26px;
  font-weight:    700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align:     center;
  color:          var(--text);
  margin-bottom:  4px;
}

.contact-modal-sub {
  font-size:     var(--text-sm);
  font-weight:   300;
  color:         var(--t2);
  text-align:    center;
  margin-bottom: var(--space-lg);
}

.contact-modal-note {
  font-size:      10px;
  font-weight:    300;
  color:          var(--t3);
  text-align:     center;
  margin-top:     12px;
  letter-spacing: 0.02em;
}

/* Estado de éxito tras enviar */
.contact-success {
  text-align: center;
  padding:    28px 0 12px;
}

.contact-success-icon {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      var(--surface);
  color:           #4ade80;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 22px;
}

.contact-success-title {
  font-family:    var(--font-display);
  font-size:      21px;
  font-weight:    700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color:          var(--text);
  margin-bottom:  8px;
}

.contact-success-sub {
  font-size:   var(--text-sm);
  font-weight: 300;
  color:       var(--t2);
}


/* ═══════════════════════════════════════════════════════════════════
   17. ANIMATIONS — Keyframes globales
═══════════════════════════════════════════════════════════════════ */

/* Punto pulsante del hero badge */
@keyframes ping {
  0%   { transform: scale(0.8); opacity: 0.8; }
  70%  { transform: scale(1.7); opacity: 0;   }
  100% { transform: scale(1.7); opacity: 0;   }
}

/* Ticker horizontal */
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--tick-set-count))); }
}

/* Brillo neón en bucle — mismo lenguaje que el TOGETHER del hero, sin el efecto de escritura */
@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 14px rgba(201, 243, 29, .35), 0 0 28px rgba(201, 243, 29, .15); }
  50%      { text-shadow: 0 0 24px rgba(201, 243, 29, .7),  0 0 46px rgba(201, 243, 29, .32); }
}

@keyframes logoNeonPulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(201, 243, 29, .35)) drop-shadow(0 0 28px rgba(201, 243, 29, .15)); }
  50%      { filter: drop-shadow(0 0 24px rgba(201, 243, 29, .7))  drop-shadow(0 0 46px rgba(201, 243, 29, .32)); }
}


/* ═══════════════════════════════════════════════════════════════════
   18. RESPONSIVE
   Un único punto de corte: por debajo de 860px el nav pasa a menú
   hamburguesa, los titulares dejan de forzar una sola línea y las
   rejillas de varias columnas se apilan.
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {

  :root {
    --pad-x: 22px;
  }

  /* Nav → menú desplegable. El logo ya no reparte el ancho al 50% con
     nav-right (no tiene sentido cuando nav-center está oculto) — el
     logo toma solo lo que necesita y el resto queda para los botones. */
  nav {
    grid-template-columns: auto 1fr;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-right {
    gap: 6px;
  }

  .nav-cta {
    padding:     6px 10px;
    font-size:   10px;
  }

  /* Academia y Nexo se van al desplegable — junto a Hablemos + hamburguesa
     no caben en una pantalla de móvil sin desbordar */
  .nav-desktop-only {
    display: none;
  }

  .nav-center-only {
    display: block;
  }

  .nav-center {
    display:        none;
    flex-direction:  column;
    align-items:     stretch;
    gap:             2px;
    position:        absolute;
    top:             100%;
    left:            0;
    right:           0;
    background:      var(--bg);
    border-bottom:   1px solid var(--border);
    padding:         8px var(--pad-x) 18px;
  }

  nav.menu-open .nav-center {
    display: flex;
  }

  .nav-center a {
    width:   100%;
    padding: 12px 10px;
  }

  h1.hero-h {
    font-size: clamp(40px, 13vw, 64px);
  }

  /* Rejillas de varias columnas → una sola columna */
  .results-grid,
  .phases-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .cl-mq-item {
    width: 118px;
  }

  .cl-mq-photo,
  .cl-mq-invite-circle {
    width:  84px;
    height: 84px;
  }

  .proc-wrap {
    gap: var(--space-lg);
  }

  .proc-index {
    gap:              var(--space-lg);
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }

  .proc-idx-item {
    scroll-snap-align: start;
  }

  .proc-preview-ghost {
    display: none;
  }

  .result-card::before {
    font-size: 100px;
  }

  /* Página "Sobre": menos aire vertical en pantallas pequeñas */
  .about-chapter {
    padding: var(--space-xl) var(--pad-x);
  }

  .work-media {
    height: 46vh;
  }

  .about-process-step {
    gap: var(--space-sm);
  }

  /* Flechas de testimonios: más pequeñas y pegadas en móvil */
  .test-nav-row {
    gap: var(--space-sm);
  }

  .test-arrow {
    width:  32px;
    height: 32px;
  }

  .test-arrow svg {
    width:  14px;
    height: 14px;
  }

  /* Footer: apila en vez de forzar todo en una fila */
  footer {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            var(--space-sm);
  }

  .ft-links {
    flex-wrap:       wrap;
    justify-content: center;
    row-gap:         8px;
  }
}

/* Teléfonos angostos (~360-430px): un poco más de margen de seguridad
   para que Hablemos + hamburguesa nunca peguen con el borde */
@media (max-width: 480px) {
  :root {
    --pad-x: 16px;
  }

  .logo-img {
    height: 20px;
  }

  .nav-right {
    gap: 4px;
  }

  .nav-cta {
    padding:    5px 8px;
    font-size:  9px;
  }

  .nav-toggle {
    width:  26px;
    height: 26px;
    gap:    4px;
  }
}