/* ============================================================
   astellai.com · v2 «sala de máquinas» — identidad Convergencia
   Capas: reset → base → layout → components → panel → reveal.
   Regla: TODO selector vive en una capa. Panel = prefijo .pm-.
   El bloque reduced-motion (capa reveal, al final) apaga todo.
   ============================================================ */

@layer reset, base, layout, components, panel, reveal;

/* ---------- reset ---------- */
@layer reset {
  *{margin:0; padding:0; box-sizing:border-box}
  html{scroll-behavior:smooth}
}

/* ---------- base ---------- */
@layer base {
  :root{
    --papel:#F6F6F3; --panel:#E9EAE6; --tinta:#12181D; --tinta-2:#4A555C;
    --em:#0B7A55; --em-vivo:#12B47D; --alerta:#B2502C;
    --linea:rgba(18,24,29,.14); --linea-f:rgba(18,24,29,.55);
    --osc-fondo:#0E1517; --osc-panel:#141C1F; --osc-texto:#EDF1EE;
    --osc-muted:#9DABA4; --osc-em:#2FD69A; --osc-borde:rgba(237,241,238,.14);
    --body:"Archivo","Helvetica Neue",sans-serif;
    --mono:"Spline Sans Mono",ui-monospace,monospace;
    --ancho:1160px;
    --dur-1:.5s; --dur-2:.65s;
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  body{
    background:var(--papel); color:var(--tinta);
    font-family:var(--body); font-variation-settings:"wdth" 100;
    font-size:1rem; line-height:1.55; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a:focus-visible, button:focus-visible{outline:2.5px solid var(--em); outline-offset:2px}
  .mono-et{
    display:block; font-family:var(--mono); font-weight:500; font-size:.6875rem;
    letter-spacing:.24em; text-transform:uppercase; color:var(--em);
    margin-bottom:.6rem;
  }
  .eyebrow{
    font-family:var(--mono); font-size:.75rem; letter-spacing:.22em;
    text-transform:uppercase; color:var(--tinta-2); margin-bottom:1.4rem;
  }
}

/* ---------- layout ---------- */
@layer layout {
  .top{
    max-width:var(--ancho); margin:0 auto; padding:1.15rem 1.5rem;
    display:flex; align-items:center; gap:2rem;
    border-bottom:1.5px solid var(--tinta);
  }
  main{max-width:var(--ancho); margin:0 auto; padding:0 1.5rem}

  .hero{
    display:grid; grid-template-columns:1.1fr 1fr; gap:3.5rem;
    align-items:center; padding:4.5rem 0 5rem;
  }
  .hero-texto{max-width:34rem}

  .stats-banda{
    display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
    border-top:1.5px solid var(--tinta); border-bottom:1px solid var(--linea);
    padding:2.5rem 0;
  }

  .tesis{padding:6.5rem 0; text-align:left}

  .bloque{padding:4.75rem 0; border-top:1px solid var(--linea)}

  .cierre{
    background:var(--osc-fondo); color:var(--osc-texto);
    display:grid; grid-template-columns:1.25fr .75fr; gap:3rem; align-items:center;
    padding:3.75rem 3.25rem; margin:2rem 0 4.5rem; border-radius:2px;
  }

  footer{
    max-width:var(--ancho); margin:0 auto;
    display:grid; grid-template-columns:1.2fr 1fr 1.2fr; gap:2.5rem;
    padding:2.75rem 1.5rem 3rem; border-top:1.5px solid var(--tinta);
  }
}

/* ---------- components ---------- */
@layer components {
  /* marca + nav */
  .marca{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit}
  .simbolo{width:30px; height:30px; flex:none}
  .simbolo .trazo-a,.simbolo .trazo-b{stroke:var(--tinta)}
  .simbolo .nodo{fill:var(--em)}
  .wordmark{
    font-weight:800; font-variation-settings:"wdth" 125; font-size:1.35rem;
    letter-spacing:-.02em; line-height:1;
  }
  .top nav{display:flex; gap:1.5rem; margin-left:auto}
  .top nav a{text-decoration:none; color:var(--tinta-2); font-size:.9375rem; font-weight:500}
  .top nav a:hover{color:var(--em)}

  .cta{
    display:inline-block; background:var(--em); color:#fff; text-decoration:none;
    font-weight:650; font-size:.9375rem; padding:.66em 1.2em; border-radius:2px;
    border:1.5px solid var(--em); transition:background .15s, color .15s;
  }
  .cta:hover{background:transparent; color:var(--em)}
  .cta-sec{
    display:inline-block; color:var(--tinta); text-decoration:none; font-weight:650;
    font-size:.9375rem; padding:.66em 1.2em; border:1.5px solid var(--tinta);
    border-radius:2px; transition:border-color .15s, color .15s;
  }
  .cta-sec:hover{border-color:var(--em); color:var(--em)}

  /* hero texto */
  .hero h1{
    font-weight:800; font-variation-settings:"wdth" 125; letter-spacing:-.022em;
    font-size:clamp(2.5rem, 4.6vw, 4.35rem); line-height:1.0;
  }
  .hero h1 em{font-style:normal; color:var(--em)}
  .hero .lede{
    font-size:1.1875rem; line-height:1.55; color:var(--tinta-2);
    max-width:44ch; margin-top:1.4rem;
  }
  .hero .lede strong{color:var(--tinta); font-weight:650}
  .hero-acciones{display:flex; gap:.9rem; margin-top:2.1rem; flex-wrap:wrap}

  /* stats */
  .stat b{
    display:block; font-weight:800; font-variation-settings:"wdth" 122;
    font-size:clamp(2rem, 3.6vw, 3rem); letter-spacing:-.02em; line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .stat small{
    display:block; font-family:var(--mono); font-size:.6875rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2);
    margin-top:.55rem; line-height:1.6;
  }

  /* tesis */
  .tesis-linea{
    font-weight:800; font-variation-settings:"wdth" 125; letter-spacing:-.02em;
    font-size:clamp(1.9rem, 4.5vw, 3.4rem); line-height:1.06; max-width:24ch;
  }
  .tesis-linea em{font-style:normal; color:var(--em)}
  .tesis p{
    font-size:1.125rem; line-height:1.6; color:var(--tinta-2);
    max-width:62ch; margin-top:1.5rem;
  }

  /* títulos de sección */
  .titulo-seccion{
    font-weight:800; font-variation-settings:"wdth" 118; letter-spacing:-.015em;
    font-size:clamp(1.5rem, 3vw, 2.1rem); line-height:1.12; max-width:26ch;
    margin-bottom:2.5rem;
  }

  /* embudo */
  .embudo{
    list-style:none; display:grid; grid-template-columns:1fr 1fr 1fr;
    border:1.5px solid var(--tinta);
  }
  .embudo>li{padding:1.5rem 1.6rem 1.6rem; position:relative}
  .embudo>li+li{border-left:1.5px solid var(--tinta)}
  .embudo .paso{
    font-family:var(--mono); font-size:.6875rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--em); font-weight:600;
  }
  .embudo h3{font-weight:800; font-variation-settings:"wdth" 118; font-size:1.35rem; margin:.6rem 0 .35rem}
  .embudo .precio{
    font-weight:800; font-variation-settings:"wdth" 118; font-size:1.75rem;
    font-variant-numeric:tabular-nums;
  }
  .embudo .precio small{font-family:var(--mono); font-size:.5em; font-weight:500; letter-spacing:.04em}
  .embudo li>p:last-child{font-size:.9375rem; line-height:1.5; color:var(--tinta-2); margin-top:.55rem}
  .embudo .motor{background:var(--panel)}
  .embudo .motor::before{
    content:"el motor"; position:absolute; top:1.55rem; right:1.6rem;
    font-family:var(--mono); font-size:.6875rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--em);
  }
  .nota-credito{
    font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--tinta-2); margin-top:1rem;
  }
  .nota-credito b{color:var(--em); font-weight:600}

  /* verticales como cards */
  .verticales{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.25rem}
  .verticales article{
    border:1.5px solid var(--tinta); border-radius:2px; padding:1.5rem 1.6rem;
  }
  .verticales .ini{
    display:block; font-weight:800; font-variation-settings:"wdth" 122;
    color:var(--em); font-size:2.4rem; line-height:1; margin-bottom:.8rem;
  }
  .verticales b{font-weight:650; font-size:1.08rem}
  .verticales p{font-size:.9375rem; line-height:1.52; color:var(--tinta-2); margin-top:.5rem}

  .chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.75rem}
  .chips span{
    font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em;
    text-transform:uppercase; border:1px solid var(--linea-f);
    padding:.35em .8em .3em; border-radius:2px;
  }

  /* reglas */
  .reglas{list-style:none; max-width:50rem}
  .reglas li{
    padding:1.1rem 0; border-top:1px solid var(--linea);
    font-size:1.0625rem; line-height:1.55; color:var(--tinta-2);
  }
  .reglas li:first-child{border-top:0; padding-top:0}
  .reglas li::before{
    content:""; display:inline-block; width:.55em; height:.55em;
    background:var(--em); border-radius:999px; margin-right:.65em; vertical-align:.03em;
  }
  .reglas b{color:var(--tinta); font-weight:650}

  /* cierre */
  .cierre h2{
    font-weight:800; font-variation-settings:"wdth" 122; letter-spacing:-.01em;
    font-size:clamp(1.5rem, 3.2vw, 2.15rem); line-height:1.12;
  }
  .cierre h2 em{font-style:normal; color:var(--osc-em)}
  .cierre p{font-size:.9375rem; line-height:1.55; color:#C3CFC8; margin-top:.85rem; max-width:56ch}
  .contacto{border-left:1px solid rgba(237,241,238,.3); padding-left:2.25rem}
  .contacto .et{
    font-family:var(--mono); font-size:.6875rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--osc-muted); display:block; margin-bottom:.5rem;
  }
  .contacto .mail{
    color:var(--osc-em); text-decoration:none; font-weight:650; font-size:1.15rem;
    border-bottom:1.5px solid var(--osc-em); padding-bottom:.1em; word-break:break-all;
  }
  .contacto .mail:hover{color:var(--osc-texto); border-color:var(--osc-texto)}
  .contacto-nota{font-size:.8125rem; color:var(--osc-muted); margin-top:.7rem}

  /* footer */
  .pie-marca{display:flex; flex-direction:column; gap:.7rem}
  .pie-marca .simbolo{width:26px; height:26px; color:var(--tinta)}
  .pie-marca p{font-weight:650; font-size:.9375rem; line-height:1.45}
  .pie-marca small, .pie-contacto small{
    font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--tinta-2); line-height:1.7;
  }
  .pie-nav{display:flex; flex-direction:column; gap:.5rem}
  .pie-nav a{text-decoration:none; color:var(--tinta-2); font-size:.9375rem}
  .pie-nav a:hover{color:var(--em)}
  .pie-contacto{display:flex; flex-direction:column; gap:.7rem; align-items:flex-start}
  .pie-contacto a{
    color:var(--em); text-decoration:none; font-weight:650;
    border-bottom:1.5px solid var(--em); padding-bottom:.05em;
  }
}

/* ---------- panel «sala de máquinas» ---------- */
@layer panel {
  .pm-panel{
    background:var(--osc-fondo); border-radius:2px; padding:1.1rem 1.2rem 1.3rem;
    display:flex; flex-direction:column; gap:.9rem;
    box-shadow:0 24px 60px -12px rgba(18,24,29,.35);
  }
  .pm-cabecera{
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    font-family:var(--mono); font-size:.625rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--osc-muted);
    padding:0 .1rem .1rem;
  }
  .pm-vivo{
    display:inline-flex; align-items:center; gap:.5em;
    font-family:var(--mono); font-size:.625rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--osc-em);
  }
  .pm-punto-vivo{
    width:.5em; height:.5em; background:var(--osc-em); border-radius:999px;
    position:relative; flex:none;
  }
  .pm-punto-vivo::after{
    content:""; position:absolute; inset:-3px; border-radius:999px;
    border:1px solid var(--osc-em);
    animation:pm-pulso 2.2s ease-out infinite;
  }

  .pm-tarjeta{border-radius:2px; opacity:1; transform:none}

  /* T1 · chat (superficie clara — fiel al demo) */
  .pm-chat{
    background:var(--papel); color:var(--tinta); padding:.9rem;
    width:92%; align-self:flex-end;
    display:flex; flex-direction:column; gap:.55rem;
    box-shadow:0 10px 28px rgba(0,0,0,.35);
  }
  .pm-chat-top{
    display:flex; align-items:center; gap:.6rem;
    border-bottom:1px solid var(--linea); padding-bottom:.55rem;
  }
  .pm-chat-avatar{
    width:24px; height:24px; border-radius:999px; background:var(--em); flex:none;
  }
  .pm-chat-top b{font-size:.8125rem; font-weight:650; display:block; line-height:1.2}
  .pm-chat-top small{font-size:.6875rem; color:var(--tinta-2); display:block}
  .pm-tag{
    margin-left:auto; font-family:var(--mono); font-size:.5625rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2);
    border:1px solid var(--linea-f); border-radius:2px; padding:.3em .6em;
    white-space:nowrap; flex:none;
  }
  .pm-burbuja{
    font-size:.8125rem; line-height:1.45; padding:.5rem .7rem; border-radius:2px;
    max-width:88%;
  }
  .pm-burbuja--bot{background:#fff; border:1px solid var(--linea); align-self:flex-start}
  .pm-burbuja--in{background:#DCF3E8; border:1px solid rgba(11,122,85,.3); align-self:flex-end}
  .pm-chat-badges{display:flex; gap:.4rem; flex-wrap:wrap}
  .pm-badge{
    font-family:var(--mono); font-size:.5625rem; letter-spacing:.1em;
    text-transform:uppercase; border:1px solid var(--linea-f); border-radius:2px;
    padding:.35em .6em; color:var(--tinta-2);
  }
  .pm-badge--ok{color:var(--em); border-color:var(--em); font-weight:600}
  .pm-escribiendo{display:flex; gap:.25rem; padding:.15rem .1rem 0}
  .pm-escribiendo i{
    width:.4em; height:.4em; background:var(--tinta-2); border-radius:999px;
    animation:pm-parpadeo 1.2s ease-in-out infinite;
  }
  .pm-escribiendo i:nth-child(2){animation-delay:.2s}
  .pm-escribiendo i:nth-child(3){animation-delay:.4s}

  /* T2 · dashboard (superficie oscura — terminal) */
  .pm-dash{
    background:var(--osc-panel); border:1px solid var(--osc-borde);
    color:var(--osc-texto); padding:.9rem 1rem;
    width:88%; align-self:flex-start;
    display:flex; flex-direction:column; gap:.7rem;
  }
  .pm-dash-top{
    display:flex; justify-content:space-between; align-items:center; gap:.8rem;
    border-bottom:1px solid var(--osc-borde); padding-bottom:.5rem;
  }
  .pm-dash-top b{font-size:.8125rem; font-weight:650}
  .pm-dash .pm-tag{color:var(--osc-muted); border-color:var(--osc-borde); margin-left:0}
  .pm-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem}
  .pm-kpi b{
    display:block; font-weight:800; font-variation-settings:"wdth" 118;
    font-size:1.05rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  }
  .pm-kpi small{
    display:block; font-family:var(--mono); font-size:.5rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--osc-muted); margin-top:.25rem; line-height:1.5;
  }
  .pm-verde{color:var(--osc-em)}
  .pm-barras-titulo{
    font-family:var(--mono); font-size:.5625rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--osc-muted);
  }
  .pm-barras{display:grid; grid-template-columns:repeat(6,1fr); gap:.45rem; align-items:end; height:52px}
  .pm-barras>div{display:flex; flex-direction:column; justify-content:flex-end; gap:.3rem; height:100%}
  .pm-barras i{
    display:block; height:var(--h); background:var(--osc-em); border-radius:1px;
    opacity:.9; transform-origin:bottom;
  }
  .pm-barras small{
    font-family:var(--mono); font-size:.5rem; letter-spacing:.04em;
    color:var(--osc-muted); text-align:center;
  }

  /* T3 · flujo n8n (superficie oscura) */
  .pm-flujo{
    background:var(--osc-panel); border:1px solid var(--osc-borde);
    color:var(--osc-texto); padding:.9rem 1rem;
    width:94%; align-self:flex-end;
    display:flex; flex-direction:column; gap:.6rem;
  }
  .pm-flujo-svg{width:100%; height:auto; display:block}
  .pm-nodo rect{
    fill:var(--osc-fondo); stroke:var(--osc-borde); stroke-width:1; rx:2;
  }
  .pm-nodo text{
    fill:var(--osc-texto); font-family:var(--mono); font-size:8.5px;
    text-anchor:middle; letter-spacing:.04em;
  }
  .pm-nodo--em rect{stroke:var(--osc-em)}
  .pm-nodo--em text{fill:var(--osc-em)}
  .pm-nodo--h text{fill:var(--osc-muted)}
  .pm-punteado{stroke-dasharray:3 3}
  .pm-arista{
    fill:none; stroke:var(--osc-muted); stroke-width:1.2;
    stroke-dasharray:6 4;
    animation:pm-flujo-anim 1.4s linear infinite;
  }

  /* entrada en cascada (dispara .listo, patrón v1) */
  .listo .pm-chat {animation:pm-entrar var(--dur-2) var(--ease) .15s backwards}
  .listo .pm-dash {animation:pm-entrar var(--dur-2) var(--ease) .3s backwards}
  .listo .pm-flujo{animation:pm-entrar var(--dur-2) var(--ease) .45s backwards}
  .listo .pm-barras i{animation:pm-crecer .7s var(--ease) .9s backwards}

  @keyframes pm-entrar{from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none}}
  @keyframes pm-crecer{from{transform:scaleY(0)} to{transform:scaleY(1)}}
  @keyframes pm-parpadeo{0%,100%{opacity:.25} 50%{opacity:1}}
  @keyframes pm-pulso{from{opacity:.9; transform:scale(.6)} to{opacity:0; transform:scale(1.8)}}
  @keyframes pm-flujo-anim{to{stroke-dashoffset:-20}}
}

/* ---------- reveal + firma del logo + reduced-motion ---------- */
@layer reveal {
  /* firma: el símbolo se dibuja al cargar (hipotenusa ≈ 73.3 → 74) */
  .simbolo .trazo-a,.simbolo .trazo-b{stroke-dasharray:74; stroke-dashoffset:0}
  .simbolo .nodo{transform-origin:50px 82px}
  .listo .top .trazo-a{animation:dibujar .55s ease-out backwards}
  .listo .top .trazo-b{animation:dibujar .55s ease-out .12s backwards}
  .listo .top .nodo{animation:nodo .3s ease-out .6s backwards}
  @keyframes dibujar{from{stroke-dashoffset:74} to{stroke-dashoffset:0}}
  @keyframes nodo{from{transform:scale(0)} 60%{transform:scale(1.35)} to{transform:scale(1)}}

  /* reveals: por defecto TODO visible; .con-reveal habilita el estado oculto */
  [data-revelar]{opacity:1; transform:none}
  .con-reveal [data-revelar]{
    opacity:0; transform:translateY(18px);
    transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .con-reveal [data-revelar].visto{opacity:1; transform:none}

  /* contrato reduced-motion: apagar TODO aquí, y solo aquí */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .listo .top .trazo-a,.listo .top .trazo-b,.listo .top .nodo,
    .listo .pm-chat,.listo .pm-dash,.listo .pm-flujo,.listo .pm-barras i,
    .pm-escribiendo i,.pm-punto-vivo::after,.pm-arista{animation:none}
    .con-reveal [data-revelar]{opacity:1; transform:none; transition:none}
  }
}

/* ---------- responsive (fuera de capas ganaría; va en sus capas) ---------- */
@layer layout {
  @media (max-width:1024px){
    .hero{grid-template-columns:1fr; gap:3rem; padding:3.5rem 0 4rem}
    .hero-texto{max-width:40rem}
    .pm-panel{max-width:34rem}
  }
  @media (max-width:900px){
    .top{flex-wrap:wrap; gap:.9rem 1.2rem}
    .top nav{order:3; width:100%; margin-left:0; gap:1.1rem}
    .top .cta{margin-left:auto}
    .stats-banda{grid-template-columns:1fr 1fr; gap:1.75rem}
    .tesis{padding:4.5rem 0}
    .cierre{grid-template-columns:1fr; padding:2.25rem 1.5rem; gap:2rem}
    footer{grid-template-columns:1fr; gap:2rem}
  }
}
@layer components {
  @media (max-width:900px){
    .embudo{grid-template-columns:1fr}
    .embudo>li+li{border-left:0; border-top:1.5px solid var(--tinta)}
    .verticales{grid-template-columns:1fr}
    .contacto{border-left:0; padding-left:0; border-top:1px solid rgba(237,241,238,.3); padding-top:1.5rem}
  }
}
@layer panel {
  @media (max-width:480px){
    .pm-chat,.pm-dash,.pm-flujo{width:100%}
    .pm-kpis{grid-template-columns:repeat(2,1fr)}
  }
}