:root{
  --bg:#f6f8ff; --bg2:#eef2ff; --text:#0f172a; --muted:#6b7280;
  --card:#fff; --border:#e5e7eb; --primary:#60a5fa; --glow:#8b5cf6;
}
[data-theme="dark"]{
  --bg:#0b1220; --bg2:#0f172a; --text:#e5e7eb; --muted:#9aa4b2;
  --card:#111827; --border:#1f2937; --primary:#60a5fa; --glow:#8b5cf6;
}

/* ========= Base ========= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text);
  font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(600px circle at var(--mx,50%) var(--my,20%), rgba(139,92,246,.18), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
a{ color:inherit; text-decoration:none }
.muted{ color:var(--muted) }
.icon{ margin-right:6px }

/* ========= Header ========= */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(226,232,240,.7);
}
[data-theme="dark"] .site-header{ background:rgba(17,24,39,.65); border-color:#1f2937 }
.logo{ display:block; margin:10px auto; height:32px }

/* ========= Layout ========= */
main{ padding:24px 16px 160px }
section{ margin:0 auto 40px }
h1{ font-size:1.8rem; margin:.25rem 0 6px }
h2{ font-size:1.25rem; margin:0 0 14px }
#hero-sub{ color:var(--muted) }

/* ancho mayor solo para Historia */
#historia-page{ width:min(1400px,96vw) }

/* ========= Resume / contenedores ========= */
.resume-card{
  max-width:1000px; margin:0 auto;
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:22px; box-shadow:0 12px 30px rgba(15,23,42,.10);
}
.resume-title{ font-weight:800; margin:0 0 12px }

/* ========= Chips navegación ========= */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips button{
  appearance:none; border:1px solid var(--border); background:#eef2ff; color:#1f2937;
  padding:.48rem .95rem; border-radius:999px; font-size:.9rem; cursor:pointer;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(15,23,42,.06);
  transition:transform .08s ease, box-shadow .15s ease;
}
[data-theme="dark"] .chips button{ background:#0f172a; color:#e5e7eb }
.chips button:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(139,92,246,.18) }
.chips button i{ margin-right:6px }

/* ========= Chat ========= */
.chat{ display:flex; flex-direction:column; gap:10px; max-height:40vh; overflow-y:auto }
.bubble{
  max-width:80%; padding:12px 14px; line-height:1.45; border-radius:18px;
  box-shadow:0 8px 24px rgba(15,23,42,.08)
}
.bubble.assistant{
  align-self:flex-start; background:rgba(255,255,255,.9);
  border:1px solid rgba(148,163,184,.35); backdrop-filter:blur(8px)
}
[data-theme="dark"] .bubble.assistant{ background:rgba(17,24,39,.75); border-color:#1f2937 }
.bubble.user{
  align-self:flex-end; color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--glow));
  border:1px solid rgba(99,102,241,.45)
}

/* === Composer dentro de la barra === */
.chat-input{ align-items:center; }

/* Botón + embebido */
.chat-input .composer-btn{
  width:36px; height:36px;
  display:grid; place-items:center;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:10px;
  box-shadow:0 6px 16px rgba(15,23,42,.10);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease;
}
.chat-input .composer-btn:hover{ transform:translateY(-1px); }

/* Icono + con rotación al abrir */
.chat-input .composer-btn i{ transition:transform .15s ease; }
.chat-input .composer-btn[aria-expanded="true"] i{ transform:rotate(45deg); }

/* Chips colapsables (igual que antes) */
#chat-chips{
  position:fixed; left:50%; transform:translateX(-50%) scale(.98);
  bottom:86px; width:min(820px,92vw);
  display:flex; flex-wrap:wrap; gap:8px; z-index:6;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
}
#chat-chips.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) scale(1); }

@media (max-width:920px){
  .chat-input .composer-btn{ width:34px; height:34px; }
}

#chat-chips{
  position:fixed; left:50%; transform:translateX(-50%) scale(.98);
  bottom:86px; width:min(820px,92vw);
  display:flex; flex-wrap:wrap; gap:8px; z-index:6;
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
#chat-chips.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) scale(1); }

/* ========= Input fijo (gated) ========= */
.chat-input{
  position:fixed; left:50%; transform:translateX(-50%); bottom:24px; width:min(820px,92vw);
  display:flex; gap:8px; padding:8px; border-radius:14px; z-index:6;
  background:linear-gradient(180deg,transparent,rgba(248,250,252,.92));
}
[data-theme="dark"] .chat-input{ background:linear-gradient(180deg,transparent,rgba(2,6,23,.72)) }
#chat-text{
  flex:1; font-size:1rem; padding:.75rem .95rem; background:#fff; border:1px solid var(--border); border-radius:12px;
}
[data-theme="dark"] #chat-text{ background:#0b1220; color:var(--text); border-color:#1f2937 }
#chat-text:disabled{ opacity:.65; cursor:not-allowed }
#chat-send{
  padding:.75rem 1rem; border-radius:12px; border:1px solid #c7d2fe;
  background:linear-gradient(135deg,var(--primary),var(--glow)); color:#fff; cursor:pointer;
}
#chat-send:disabled{ opacity:.6; cursor:not-allowed }

/* ========= Grillas genéricas ========= */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px }
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  transition:transform .12s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(15,23,42,.12) }
.card img{ width:100%; height:140px; object-fit:cover }
.card .p{ padding:12px }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.tag{
  font-size:.72rem; background:#eff6ff; border:1px solid #dbeafe; color:#1e3a8a;
  padding:.18rem .45rem; border-radius:999px;
}
[data-theme="dark"] .tag{ background:#0f172a; border-color:#1f2937; color:#c7d2fe }

/* ========= Modal ========= */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,.45); z-index:1000 }
.modal.hidden{ display:none }
.modal-content{
  width:min(720px,92vw); background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:0 20px 60px rgba(2,6,23,.35); position:relative;
}
.modal-close{ position:absolute; right:12px; top:10px; background:#f1f5f9; border:0; width:32px; height:32px; border-radius:999px; cursor:pointer }
[data-theme="dark"] .modal-close{ background:#0f172a; color:#e5e7eb }

/* ========= A11y ========= */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ========= Responsive base ========= */
@media (max-width:780px){
  main{ padding-bottom:180px }
  .bubble{ max-width:92% }
}

/* ========= Celebración ========= */
#celebration{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:2000 }
.confetti{
  position:absolute; top:-16px; width:10px; height:14px; border-radius:2px; opacity:.95;
  animation: confetti-fall var(--dur,1200ms) ease-out forwards,
             confetti-sway var(--dur,1200ms) ease-in-out;
}
@keyframes confetti-fall{ 0%{transform:translate3d(0,-10vh,0) rotate(0)} 100%{transform:translate3d(0,110vh,0) rotate(540deg)} }
@keyframes confetti-sway{ 0%{margin-left:0} 50%{margin-left:var(--dx,40px)} 100%{margin-left:0} }

/* ========================================================= */
/* =================== HISTORIA (página) =================== */

/* Head + breadcrumbs */
#historia-page .story-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px }
#story-breadcrumbs{ color:var(--muted) }

/* Asegura que el mount NO sea grid */
#story_mount{ display:block !important; width:100% }

/* Intro centrada (texto arriba y debajo del input) */
#historia-page .intro-center{
  min-height:48vh; display:flex; align-items:center; justify-content:center;
}
#historia-page .intro-stack{
  width:min(720px,92vw);
  display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;
}
#historia-page .intro-note{ color:var(--muted); margin:2px 0; }

/* Form de nombre */
#name-form{ width:min(680px,92vw); display:flex; gap:10px; align-items:center }
#name-form input{
  flex:1; height:52px; padding:0 16px; border-radius:14px;
  border:1px solid var(--border); background:var(--card);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
}
#name-form button{
  height:52px; border-radius:14px; padding:0 18px; border:0;
  background:linear-gradient(135deg,var(--primary),var(--glow));
  color:#fff; font-weight:600; box-shadow:0 6px 16px rgba(15,23,42,.25);
  transform:translateY(0); transition:transform .15s ease;
}
#name-form button:hover{ transform:translateY(-1px) }

/* Saludo chip (cuando ya hay nombre) */
#historia-page .hello-wrap{ display:flex; justify-content:center; margin:10px 0 18px }
#historia-page .hello-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--glow));
  color:#fff; font-weight:700; font-size:1.05rem;
  box-shadow:0 10px 24px rgba(15,23,42,.15);
}
#historia-page .hello-chip i{
  width:24px; height:24px; border-radius:999px;
  background:rgba(255,255,255,.22); display:inline-grid; place-items:center;
}

/* (Opcional) grid de tarjetas si algún día volvemos al grid */
#historia-page .story-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:1200px){ #historia-page .story-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:880px){ #historia-page .story-grid{ grid-template-columns:1fr } }

/* Tarjeta horizontal base (fina, usada también por slides) */
#historia-page .story-item{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:14px; box-shadow:0 8px 24px rgba(15,23,42,.06);
  display:grid; grid-template-columns:180px 1fr; column-gap:16px; align-items:start; min-width:0;
}
#historia-page .si-left{ padding-right:12px; border-right:1px dashed var(--border) }
#historia-page .si-thumb{
  width:100%; height:120px; border-radius:12px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px;
  background:linear-gradient(135deg, hsl(var(--h,220) 80% 63%), hsl(calc(var(--h,220)+40) 82% 58%));
  box-shadow:0 8px 24px rgba(99,102,241,.18);
}
#historia-page .si-content{ min-width:0 }
#historia-page .si-head{ display:flex; gap:8px; align-items:center }
#historia-page .si-step{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--glow)); color:#fff; font-weight:700; font-size:.9rem;
  box-shadow:0 6px 16px rgba(99,102,241,.18);
}
#historia-page .si-content h4,
#historia-page .si-content h3{ margin:0 0 6px; line-height:1.2; font-size:1.05rem }
#historia-page .si-content p{
  margin:0; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:6; line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}

/* ===== Slides: 1 tarjeta central por paso (alto) ===== */
#historia-page .slides{ display:block; }
#historia-page .slides .story-item{
  max-width:1100px; margin:0 auto;
  grid-template-columns:280px 1fr; min-height:280px; padding:18px;
}
#historia-page .slides .si-left{ padding-right:16px; border-right:1px dashed var(--border); }
#historia-page .slides .si-thumb{
  aspect-ratio:4/3; border-radius:12px; overflow:hidden; border:1px solid var(--border);
  background:#fff; box-shadow:0 10px 28px rgba(15,23,42,.10);
}
#historia-page .slides .si-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* En slides mostramos más texto (sin clamping) */
#historia-page .slides .si-content p{
  display:block; -webkit-line-clamp:unset; line-clamp:unset; overflow:visible; margin:6px 0 0;
}

/* Navegación centrada con estilo */
#historia-page .story-nav{ display:flex; justify-content:center; gap:10px; margin-top:14px }
#historia-page .story-nav button{
  appearance:none; border-radius:10px; padding:.55rem .9rem; min-width:150px;
  border:1px solid var(--border); background:var(--card); color:var(--text);
  box-shadow:0 6px 16px rgba(15,23,42,.10); cursor:pointer;
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
}
#historia-page #st_prev:hover{ transform:translateY(-1px); }
#historia-page #st_prev:active{ transform:translateY(0); }
#historia-page #st_next{
  background:linear-gradient(135deg,var(--primary),var(--glow)); color:#fff; border-color:#c7d2fe;
}
#historia-page #st_next:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(99,102,241,.25); }
#historia-page .story-nav button:disabled{
  opacity:.55; cursor:not-allowed; transform:none; box-shadow:none;
}
#st_prev[hidden], #st_next[hidden]{ display:none !important }

/* Responsive slides */
@media (max-width:920px){
  #historia-page .slides .story-item{ grid-template-columns:1fr }
  #historia-page .slides .si-left{ border-right:0; padding-right:0; margin-bottom:10px }
  #composer-btn{ transform:translateX(calc(-50% - 44vw)); }
}