/* ============================================================
   sections.css — Header, hero, ecosistema, SCAF, IA, inversores,
   contacto y footer. Identidad oficial · vibe "producto vivo".
   ============================================================ */

/* Utilidades de color de marca para palabras clave */
.ink-coral{color:var(--aw-coral)}
.ink-mint{color:var(--aw-mint)}
.ink-blue{color:var(--aw-blue)}
.ink-purple{color:var(--aw-purple)}
.lead{font-size:var(--text-xl);line-height:1.45;color:var(--text-muted)}
.rule{height:1px;background:var(--border);border:0;margin:0}

/* ======================= HEADER ======================= */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:74px}
.nav{display:flex;gap:2px}
.nav a{
  padding:9px 14px;border-radius:var(--radius-pill);
  font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-muted);
  transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.nav a:hover{color:var(--ink);background:var(--surface)}
.header-actions{display:flex;align-items:center;gap:var(--space-2)}
.lang-toggle{display:inline-flex;border:1.5px solid var(--border);border-radius:var(--radius-pill);overflow:hidden;background:#fff}
.lang-toggle button{padding:7px 12px;font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.04em;color:var(--text-muted);background:transparent;border:0}
.lang-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.menu-btn{display:none;width:44px;height:44px;border:1.5px solid var(--border);border-radius:var(--radius-pill);background:#fff;position:relative}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--ink);border-radius:2px;transform:translate(-50%,-50%)
}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}

/* ======================= HERO ======================= */
.hero{position:relative;padding-top:clamp(48px,9vw,120px);padding-bottom:clamp(44px,7vw,104px)}
.hero::before{
  content:"";position:absolute;z-index:-1;inset:-90px 0 auto 0;height:640px;pointer-events:none;
  background:
    radial-gradient(52% 60% at 12% 8%, color-mix(in srgb,var(--aw-coral) 12%,transparent), transparent 62%),
    radial-gradient(46% 60% at 92% 4%, color-mix(in srgb,var(--aw-mint) 12%,transparent), transparent 60%),
    linear-gradient(180deg, var(--aw-cream), transparent 70%);
}
.hero-mark{margin-bottom:var(--space-5);opacity:0;transform:translateY(10px) scale(.96);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.hero-mark.is-in{opacity:1;transform:none}
.hero h1{max-width:16ch}
.hero .lead{max-width:40ch;margin-top:var(--space-4)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--space-6)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8);padding-top:var(--space-4);border-top:1px solid var(--border);color:var(--text-muted);font-size:var(--text-sm)}
.hero-meta b{color:var(--ink);font-family:var(--font-display);font-size:var(--text-2xl);display:block;letter-spacing:var(--tracking-tight)}

/* Respiración sutil del símbolo (motion con propósito) */
@media (prefers-reduced-motion: no-preference){
  .hero-mark.is-in span{animation:aw-breathe 4.2s var(--ease) infinite}
  .hero-mark.is-in span:nth-child(2){animation-delay:.15s}
  .hero-mark.is-in span:nth-child(3){animation-delay:.30s}
  .hero-mark.is-in span:nth-child(4){animation-delay:.45s}
}
@keyframes aw-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ======================= ECOSISTEMA (lista de proyectos) ======================= */
.eco-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap}
.eco-head .measure{max-width:46ch}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--space-5)}

/* ---- Bola del mundo (mismo motivo que .hero-blob de amazing-shops-web:
   gradiente cónico de marca + líneas tipo meridiano/paralelo + giro lento),
   aquí en primer plano con halo y un anillo de órbita con los colores de
   cada producto. Decorativa: aria-hidden, oculta si el usuario pide menos
   movimiento o en móvil (donde no cabe sin apretar el resto). ---- */
.eco-globe-wrap{position:relative;flex:0 0 auto;width:280px;height:280px;align-self:center;display:grid;place-items:center}
.eco-globe-glow{
  position:absolute;inset:-40px;z-index:0;border-radius:50%;
  background:conic-gradient(from 200deg, var(--aw-coral), var(--aw-purple), var(--aw-blue), var(--aw-mint), var(--aw-coral));
  filter:blur(46px);opacity:.55;
}
.eco-globe{
  position:relative;z-index:1;width:280px;height:280px;border-radius:50%;overflow:hidden;
  background:conic-gradient(from 200deg, var(--aw-coral), var(--aw-purple), var(--aw-blue), var(--aw-mint), var(--aw-coral));
  box-shadow:0 30px 60px -24px color-mix(in srgb, var(--aw-purple) 45%, transparent), inset 0 0 40px rgba(0,0,0,.08);
  animation:eco-globe-spin 42s linear infinite;
}
.eco-globe::after{
  content:"";position:absolute;inset:0;background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,.55) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.55) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 30px);
  mix-blend-mode:overlay;
}
.eco-globe-ring{
  position:absolute;inset:-22px;z-index:2;--ring-r:162px;
  border-radius:50%;border:1.5px dashed color-mix(in srgb, var(--ink) 16%, transparent);
  animation:eco-globe-spin 70s linear infinite reverse;
}
.eco-globe-dot{
  position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px;
  border-radius:50%;background:var(--c);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent), 0 2px 6px rgba(0,0,0,.15);
  transform:rotate(var(--a)) translateX(var(--ring-r));
}
@keyframes eco-globe-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .eco-globe,.eco-globe-ring{animation:none}
}

.proj-list{margin-top:var(--space-5);border-top:1px solid var(--border)}
.proj{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:var(--space-3);padding:var(--space-4) 8px;border-bottom:1px solid var(--border);
  transition:background var(--dur-2) var(--ease-out),padding var(--dur-2) var(--ease-out);
}
.proj:hover{background:var(--bg-alt);padding-inline:18px 14px}
.proj-mod{width:38px;height:38px;border-radius:var(--radius-mod);flex:0 0 auto;box-shadow:var(--shadow-sm)}
.proj-main{min-width:0}
.proj-name{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.proj-name b{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xl);letter-spacing:var(--tracking-tight);color:var(--ink)}
.proj-cat{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.proj-desc{color:var(--text-muted);font-size:var(--text-base);margin-top:4px}
.proj-side{display:flex;align-items:center;gap:var(--space-3);justify-self:end}
.proj-arw{color:var(--text-faint);transition:transform var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.proj:hover .proj-arw{color:var(--ink);transform:translateX(4px)}
.proj[hidden]{display:none}

/* Estado mínimo (sustituye a la pastilla en las filas) */
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.status i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.status--live{color:var(--aw-success)}
.status--soon{color:var(--aw-warning)}
.status--beta{color:var(--aw-info)}

/* ======================= SCAF (oscuro, protagonista) ======================= */
.scaf{background:var(--dark);color:var(--on-dark)}
.scaf-head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.scaf-mark{width:60px;height:60px;border-radius:16px;display:block;box-shadow:var(--shadow)}
.scaf h2{color:#fff}
.scaf .sub{color:var(--on-dark-muted);font-weight:var(--weight-semibold);letter-spacing:.02em;font-family:var(--font-mono);text-transform:uppercase;font-size:var(--text-xs)}
.scaf .claim{color:#fff;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-black);max-width:24ch;line-height:var(--leading-snug);margin-top:var(--space-2)}
.scaf-matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:var(--space-6)}
.module{
  background:var(--dark-2);border:1px solid var(--border-dark);border-radius:var(--radius);
  padding:16px;min-height:96px;
  transition:border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.module:hover,.module:focus-within,.module.is-active{border-color:var(--scaf-secondary);transform:translateY(-3px);background:#182642}
.module b{display:block;color:#fff;font-size:var(--text-sm);font-weight:var(--weight-bold)}
.module .desc{
  display:block;color:var(--on-dark-muted);font-size:var(--text-xs);margin-top:6px;
  max-height:0;overflow:hidden;opacity:0;transition:max-height var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
}
.module:hover .desc,.module:focus-within .desc,.module.is-active .desc{max-height:64px;opacity:1}
.scaf .note-ai{margin-top:var(--space-4);color:var(--on-dark-muted);font-size:var(--text-sm)}

/* ======================= AMAZING INTELLIGENCE ======================= */
.intel{background:var(--bg-alt)}
.intel .measure{max-width:52ch}
.diagram{margin-top:var(--space-6);display:flex;justify-content:center}
.diagram svg{width:100%;max-width:640px;height:auto}

/* ======================= INVERSORES ======================= */
.investors{background:var(--aw-sand);border-block:1px solid var(--border)}
.investors .thesis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-6)}
.investors .t{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4)}
.investors .t small{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--aw-coral)}
.investors .t span{display:block;margin-top:8px;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--ink)}

/* ======================= CONTACTO ======================= */
.contact.on-dark{background:var(--dark);color:var(--on-dark)}
.contact .eyebrow{color:var(--on-dark-muted)}
.contact h2{color:#fff}
.contact .lead{color:var(--on-dark-muted);max-width:46ch}
.contact form{max-width:560px;margin-top:var(--space-4)}

/* ======================= FOOTER ======================= */
.site-footer{background:var(--ink);color:var(--on-dark);padding-block:var(--space-8) var(--space-6)}
.site-footer .wordmark{color:#fff}
.footer-top{display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.footer-links{display:grid;grid-template-columns:repeat(2,auto);gap:10px 40px}
.footer-links a{color:var(--on-dark-muted);font-size:var(--text-sm);transition:color var(--dur-1) var(--ease)}
.footer-links a:hover{color:#fff}
.footer-fine{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--border-dark);color:var(--on-dark-muted);font-size:var(--text-sm)}