/* =====================================================================
   Beatriz Real · Portfolio de IA — Próximamente
   Hoja de estilos
   ===================================================================== */

/* ---------- Reset & tokens ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color .45s ease, color .45s ease;
}

:root {
  --bg:#ffffff; --surface:#fafafb; --surface2:#fbfbfd;
  --text:#141419; --dim:#55555f; --mute:#6a6a74;
  --border:#e9e9ee; --bordersoft:#ececf0; --num:#e9c9cf;
  --chip-bg:rgba(208,64,88,.08); --accent:#D04058;
  --cta-bg:#141419; --cta-text:#ffffff; --cta-btn-bg:#D04058; --cta-btn-text:#ffffff;
  --brand-b:#141419; --toggle-bg:#f4f4f7; --toggle-bd:#e6e6ec; --glow:rgba(208,64,88,.16);
}

html[data-theme="dark"] {
  --bg:#0d0e15; --surface:rgba(255,255,255,.03); --surface2:#12131c;
  --text:#f3f3f7; --dim:#c2c2ce; --mute:#9a9aa8;
  --border:rgba(255,255,255,.1); --bordersoft:rgba(255,255,255,.08); --num:rgba(208,64,88,.5);
  --chip-bg:rgba(208,64,88,.16); --accent:#D04058;
  --cta-bg:linear-gradient(120deg,#D04058,#8f2a3c); --cta-text:#ffffff; --cta-btn-bg:#ffffff; --cta-btn-text:#D04058;
  --brand-b:#f3f3f7; --toggle-bg:rgba(255,255,255,.06); --toggle-bd:rgba(255,255,255,.14); --glow:rgba(208,64,88,.22);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #b5324a; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 6.5vw, 80px); }

/* ---------- Animations ---------- */
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.cursor { display:inline-block; width:.6ch; background:var(--accent); animation:blink 1s steps(1) infinite; color:transparent; }

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordersoft);
  transition: background-color .45s ease, border-color .45s ease;
}
.nav { display:flex; justify-content:space-between; align-items:center; padding-block:26px; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--text); }
.brand .mark {
  display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center;
  border:2px solid var(--brand-b); border-radius:8px;
  font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; color:var(--text);
  transition:border-color .45s ease, color .45s ease;
}
.brand .ia { color:var(--accent); font-family:'JetBrains Mono',monospace; margin-left:-10px; }
.nav-right { display:flex; align-items:center; gap:26px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--mute); }
.nav-links { display:flex; gap:26px; }
.back { display:inline-flex; align-items:center; gap:8px; color:var(--text); transition:gap .3s; }
.back:hover { gap:14px; color:var(--text); }
.toggle {
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--text); background:var(--toggle-bg); border:1px solid var(--toggle-bd);
  border-radius:50%; width:38px; height:38px; padding:0;
  transition:background-color .45s ease, border-color .45s ease, color .45s ease, transform .2s;
}
.toggle:hover { transform:rotate(20deg); }
.sun { display:inline-flex; } html[data-theme="dark"] .sun { display:none; }
.moon { display:none; } html[data-theme="dark"] .moon { display:inline-flex; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding: clamp(48px,8vw,84px) 0 clamp(40px,6vw,64px); }
#mesh { position:absolute; top:-40px; right:-60px; width:min(760px,90vw); height:620px; pointer-events:none; opacity:.85; }
.glow {
  position:absolute; top:-120px; right:-40px; width:520px; height:520px; max-width:90vw;
  border-radius:50%; background:radial-gradient(circle, var(--glow), transparent 65%); filter:blur(10px);
}
.hero-inner { position:relative; z-index:2; }
.id { display:flex; align-items:center; gap:16px; margin-bottom:30px; }
.avatar { width:64px; height:64px; border:2px solid var(--accent); border-radius:12px; padding:3px; animation:float 5s ease-in-out infinite; flex:none; }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }
.id-meta { font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.5; color:var(--mute); }
.id-meta .k { color:var(--accent); letter-spacing:.1em; }
h1 { margin:0; font-size:clamp(52px,11vw,118px); line-height:.9; font-weight:700; letter-spacing:-.035em; color:var(--text); }
h1 span { color:var(--accent); }
.lede { max-width:600px; margin:30px 0 0; font-size:clamp(17px,2.4vw,21px); line-height:1.55; color:var(--dim); }
.lede strong { color:var(--text); }

/* ---------- Notebook cell ---------- */
.cell { margin-top:42px; max-width:600px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface2); transition:background-color .45s ease, border-color .45s ease; }
.cell-bar { display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--bordersoft); font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--mute); }
.cell-bar .dot { width:9px; height:9px; border-radius:50%; background:var(--accent); }
.cell-body { display:flex; font-family:'JetBrains Mono',monospace; font-size:14px; }
.cell-in { padding:18px 12px 18px 18px; color:var(--accent); }
.cell-code { padding:18px 18px 18px 4px; line-height:1.9; color:var(--dim); }
.cell-code .fn { color:#9a5cff; }
.cell-code .str { color:#1a8f5e; }
.cell-code .cmt { color:var(--mute); margin-top:4px; }

/* ---------- Sections ---------- */
section { padding: clamp(28px,5vw,44px) 0; }
.sec-head { display:flex; align-items:baseline; gap:16px; margin-bottom:32px; }
.sec-head h2 { margin:0; font-size:15px; font-family:'JetBrains Mono',monospace; letter-spacing:.14em; color:var(--accent); }
.sec-head .rule { flex:1; height:1px; background:var(--bordersoft); transition:background-color .45s ease; }
.sec-head .count { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--mute); }

.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-areas { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, background-color .45s ease, color .45s ease, box-shadow .35s; }
.card:hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 24px 50px -24px rgba(208,64,88,.45); }

/* Qué encontrarás */
.find { border:1px solid var(--border); border-radius:4px 4px 16px 16px; padding:26px 22px; background:var(--surface); }
.find.alt { border-top:3px solid var(--text); }
.find.acc { border-top:3px solid var(--accent); }
.find .ic { margin-bottom:16px; }
.find.acc .ic { color:var(--accent); }
.find.alt .ic { color:var(--text); }
.find h3 { margin:0; font-size:19px; font-weight:600; color:var(--text); }
.find p { margin:8px 0 0; font-size:14px; line-height:1.55; color:var(--mute); }

/* Áreas */
.area { position:relative; border:1px solid var(--border); border-radius:16px; padding:24px; background:var(--surface); }
.area-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.area-n { font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:700; color:var(--num); }
.chip { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--accent); background:var(--chip-bg); border-radius:20px; padding:4px 10px; }
.area h3 { margin:0; font-size:17px; font-weight:600; line-height:1.2; color:var(--text); }
.area p { margin:8px 0 14px; font-size:13px; line-height:1.5; color:var(--mute); }
.area .tags { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--mute); }

/* Proyecto final */
.final { position:relative; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; border:1px solid var(--border); border-radius:20px; padding:44px 48px; background:var(--surface); overflow:hidden; transition:background-color .45s ease, border-color .45s ease; }
.final .bar { position:absolute; top:0; left:0; bottom:0; width:5px; background:var(--accent); }
.final .k { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em; color:var(--accent); margin-bottom:14px; }
.final h3 { margin:0; font-size:clamp(28px,4vw,38px); font-weight:700; letter-spacing:-.02em; color:var(--text); }
.final p { margin:14px 0 0; max-width:520px; font-size:16px; line-height:1.6; color:var(--dim); }
.final .pills { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.final .pill { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text); border:1px solid var(--border); border-radius:20px; padding:6px 14px; transition:border-color .45s ease, color .45s ease; }
.final-right { display:flex; justify-content:flex-end; }
.final-right .box { text-align:center; }
.final-right .big { font-size:88px; font-weight:700; line-height:1; color:var(--accent); }
.final-right .lbl { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; color:var(--mute); margin-top:6px; }

/* CTA */
.cta { margin: clamp(20px,4vw,40px) 0; padding: clamp(40px,6vw,60px); border-radius:20px; background:var(--cta-bg); text-align:center; transition:background .45s ease; }
.cta h3 { margin:0; font-size:clamp(32px,5vw,44px); font-weight:700; letter-spacing:-.02em; color:var(--cta-text); }
.cta h3 span { color:var(--accent); }
.cta p { margin:14px auto 0; max-width:460px; font-size:16px; color:var(--cta-text); opacity:.72; }
.cta a.btn { display:inline-block; margin-top:26px; background:var(--cta-btn-bg); color:var(--cta-btn-text); font-weight:600; padding:14px 30px; border-radius:12px; }

/* Footer */
footer { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:34px 0 48px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--mute); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-areas { grid-template-columns:repeat(2,1fr); }
  .final { grid-template-columns:1fr; gap:28px; }
  .final-right { justify-content:flex-start; }
  .nav-links { display:none; }
  .nav { padding-block: 28px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 24px; }
  .hero { padding: 56px 0 48px; }
  section { padding: 44px 0; }
  .grid-4 { grid-template-columns:1fr; }
  .grid-areas { grid-template-columns:1fr; }
  .nav-right { gap:16px; }
  .nav { padding-block: 32px; }
  .cell { max-width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .avatar, .cursor { animation:none; }
}