/* HPNEUMA landing -- negro carbon / cobre / cian */
:root{
  --bg:          #0b0c0f;
  --bg-2:        #101216;
  --panel:       #14171d;
  --panel-2:     #191d24;
  --line:        #262b34;
  --line-copper: rgba(200,129,74,.35);
  --ink:         #e9e7e2;
  --ink-soft:    #9b988f;
  --ink-faint:   #6b6860;
  --copper:      #c8814a;
  --copper-bright:#e0a066;
  --cyan:        #37e6d4;
  --cyan-dim:    #1c6f68;
  --danger:      #e0705a;
  --radius:      14px;
  --maxw:        1180px;
  --font: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 78% -8%, rgba(55,230,212,.06), transparent 60%),
    radial-gradient(700px 500px at 12% 8%, rgba(200,129,74,.07), transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3{font-weight:600; letter-spacing:-.01em; line-height:1.15; text-wrap:balance}
p{margin:0 0 1rem}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono)}
img{max-width:100%; display:block}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{padding:88px 0; border-top:1px solid var(--line)}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--copper-bright);
}

/* --- top bar --- */
.topbar{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
  background:rgba(11,12,15,.72); border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; gap:16px}
.brand-person{display:flex; flex-direction:column; line-height:1.25}
.brand-person .co{font-family:var(--mono); font-size:.82rem; letter-spacing:.14em; color:var(--ink)}
.brand-person .role{font-size:.7rem; color:var(--ink-soft)}
.brand-person .name{font-size:.7rem; color:var(--copper-bright); letter-spacing:.08em}
.brand-harness{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.8rem; color:var(--ink-soft)}
.brand-harness b{color:var(--ink); letter-spacing:.12em}
.brand-harness .spark{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan)}

/* --- hero --- */
.hero{padding:96px 0 80px; border-top:none}
.hero .wrap{display:grid; grid-template-columns:120px 1fr; gap:36px; align-items:center}
/* la imagen trae fondo casi negro: 'screen' lo funde con el fondo carbon y deja solo la llama */
.flame{width:120px; height:auto; mix-blend-mode:screen; filter:drop-shadow(0 0 22px rgba(224,160,102,.22))}
.hero h1{font-size:clamp(2.8rem,7vw,4.6rem); margin:.2em 0 .1em; letter-spacing:.02em}
.hero .lede{font-size:1.22rem; color:var(--ink-soft); max-width:52ch; margin:.6rem 0 1.8rem}
.hero .lede b{color:var(--ink); font-weight:500}
.cta-row{display:flex; flex-wrap:wrap; gap:16px 18px; align-items:center}
.cta-note{margin:0; font-size:.82rem; line-height:1.5; color:var(--ink-soft); max-width:40ch}
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font:inherit; font-weight:600; font-size:.98rem; padding:13px 24px;
  border-radius:10px; border:1px solid transparent; transition:.16s;
}
.btn-primary{background:linear-gradient(180deg,var(--copper-bright),var(--copper)); color:#221206; border-color:var(--copper-bright)}
.btn-primary:hover{filter:brightness(1.08); text-decoration:none}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan); text-decoration:none}

/* --- pitch --- */
#pitch h2{font-size:clamp(1.8rem,4vw,2.5rem); max-width:20ch; margin:.4rem 0 2.4rem}
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  position:relative; overflow:hidden;
}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,var(--copper),transparent)}
.card h3{font-size:1.12rem; margin:0 0 .5rem}
.card p{color:var(--ink-soft); font-size:.95rem; margin:0}
.card .idx{font-family:var(--mono); font-size:.72rem; color:var(--copper-bright); letter-spacing:.14em}
.pitch-cta{margin-top:36px; padding-top:30px; border-top:1px solid var(--line); max-width:62ch}
.pitch-cta h3{font-size:1.35rem; margin:0 0 .5rem}
.pitch-cta p{color:var(--ink-soft); margin:0 0 1.1rem}

/* --- que es --- */
#que-es h2{font-size:clamp(1.8rem,4vw,2.5rem); margin:.4rem 0 1rem}
.que-es-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center}
#que-es .col{max-width:62ch; color:var(--ink-soft)}
#que-es .col b{color:var(--ink); font-weight:500}
.etym{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px}
.etym .card h3{color:var(--copper-bright); font-family:var(--mono); font-size:.9rem; letter-spacing:.1em; text-transform:uppercase}
.etym .card .big{font-size:1.5rem; color:var(--ink); margin:.2rem 0 .5rem; font-weight:600}

/* --- chat flotante: pestaña vertical al borde derecho + panel abajo a la derecha --- */
.chat-dock{ position:fixed; inset:0 0 auto auto; z-index:70; }

/* lanzador: pestaña vertical pegada al extremo derecho, centrada */
.dock-launcher{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.08em;
  color:#231204;
  background:linear-gradient(90deg,var(--copper),var(--copper-bright));
  border:1px solid var(--copper-bright); border-right:none;
  border-radius:9px 0 0 9px;
  padding:16px 8px; box-shadow:-8px 0 24px -12px rgba(0,0,0,.6);
  transition:filter .15s;
}
.dock-launcher:hover{ filter:brightness(1.08); }
.dock-launcher .dot{ width:7px; height:7px; border-radius:50%; background:var(--bg-2); box-shadow:none; }

/* panel del chat */
.dock-panel{
  position:fixed; right:16px; bottom:16px;
  width:510px; max-width:calc(100vw - 32px);
  height:min(560px, calc(100vh - 32px));
  display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--line-copper);
  border-radius:14px; overflow:hidden;
  box-shadow:0 26px 64px -22px rgba(0,0,0,.75);
  font-size:13px;
}
.chat-dock.collapsed .dock-panel{ display:none; }
.chat-dock:not(.collapsed) .dock-launcher{ display:none; }
.dock-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);
}
.dock-head .dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); display:inline-block; margin-right:6px}
.dock-min{
  background:none; border:1px solid var(--line); color:var(--ink);
  width:24px; height:24px; border-radius:6px; cursor:pointer;
  font-size:1rem; line-height:1; flex:none;
}
.dock-min:hover{ border-color:var(--cyan); color:var(--cyan); }
.chat-log{flex:1; overflow-y:auto; padding:14px 13px; display:flex; flex-direction:column; gap:11px}
.msg{max-width:84%; padding:10px 12px; border-radius:11px; font-size:.83rem; line-height:1.5; white-space:normal}
.msg.user{align-self:flex-end; background:var(--copper); color:#231204; border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start; background:var(--panel-2); border:1px solid var(--line); border-bottom-left-radius:4px}
.msg.bot.err{border-color:var(--danger); color:var(--danger)}
.msg p:last-child{margin-bottom:0}
.msg table{border-collapse:collapse; width:100%; margin:.5rem 0; font-size:.76rem}
.msg th,.msg td{border:1px solid var(--line); padding:4px 7px; text-align:left}
.msg th{background:var(--panel); font-family:var(--mono); font-size:.7rem; color:var(--copper-bright)}
.msg code{font-family:var(--mono); background:var(--bg); padding:.1em .35em; border-radius:4px; font-size:.86em}
.msg ul,.msg ol{margin:.4rem 0; padding-left:1.3em}
.msg a{color:var(--cyan)}
.typing{align-self:flex-start; display:flex; gap:5px; padding:12px 15px}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--ink-faint); animation:bounce 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{opacity:.3; transform:translateY(0)}40%{opacity:1; transform:translateY(-4px)}}

.chat-input{display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line)}
.chat-input textarea{
  flex:1; resize:none; background:var(--panel); border:1px solid var(--line);
  border-radius:9px; color:var(--ink); font-family:inherit; font-size:.83rem; padding:9px 11px; max-height:110px;
}
.chat-input textarea:focus{outline:none; border-color:var(--cyan)}
.chat-input button{flex:none; font-size:.83rem; padding:9px 16px}
.chips{display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px}
.chip{
  font-family:var(--mono); font-size:.68rem; color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:5px 10px; cursor:pointer; transition:.14s; line-height:1.35;
}
.chip:hover{border-color:var(--copper); color:var(--copper-bright)}

/* imagen de producto (usada en la seccion "que es") -- mismo halo cobre suave que .flame */
.shot{
  border:1px solid var(--line-copper); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  filter:drop-shadow(0 0 24px rgba(224,160,102,.28));
}

footer{border-top:1px solid var(--line); padding:28px 0; font-family:var(--mono); font-size:.76rem; color:var(--ink-faint)}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* --- responsive --- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:20px; text-align:left}
  .flame{width:88px}
  .cards-3{grid-template-columns:1fr}
  .etym{grid-template-columns:1fr}
  .que-es-grid{grid-template-columns:1fr; gap:24px}
}
@media (max-width:560px){
  .topbar .brand-person .role{display:none}
  section{padding:64px 0}
  .dock-panel{
    right:10px; left:10px; bottom:10px;
    width:auto; max-width:none;
    height:min(78vh, calc(100vh - 20px));
  }
  .dock-launcher{ font-size:.64rem; padding:13px 7px; }
}