/* ============================================================
   MosmanLAB — /teoria/ CSS
   ============================================================ */

:root {
  --bg: #0d0d0f;
  --bg2: #141418;
  --bg3: #1c1c22;
  --border: #2a2a35;
  --text: #e8e8f0;
  --text-muted: #8888a8;
  --accent: #00c896;
  --accent2: #0099ff;
  --accent-warm: #f5a623;
  --font-serif: 'Lora', Georgia, serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.7; }

/* URGENCY */
.urgency-bar { background: linear-gradient(90deg,#1a3a1a,#0d2d1a); border-bottom: 1px solid var(--accent); text-align: center; padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--accent); }
.urgency-bar a { color:#fff; text-decoration:underline; margin-left:8px; }

/* NAV */
nav { background:var(--bg2); border-bottom:1px solid var(--border); padding:0 40px; display:flex; align-items:center; justify-content:space-between; height:64px; position:sticky; top:0; z-index:100; }
.nav-logo { font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--text); text-decoration:none; }
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { color:var(--text-muted); text-decoration:none; font-size:14px; font-weight:500; transition:color 0.2s; }
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-cta { background:var(--accent); color:#000!important; padding:8px 18px; border-radius:6px; font-weight:600!important; }

/* BREADCRUMB */
.breadcrumb { padding:14px 40px; font-size:13px; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--bg2); }
.breadcrumb a { color:var(--text-muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb span { margin:0 6px; }

/* HERO */
.hero { max-width:1100px; margin:0 auto; padding:64px 40px 48px; }
.hero-tag { display:inline-flex; align-items:center; gap:6px; background:rgba(0,200,150,0.1); border:1px solid rgba(0,200,150,0.25); color:var(--accent); font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:4px 12px; border-radius:20px; margin-bottom:20px; }
.hero h1 { font-family:var(--font-serif); font-size:clamp(28px,4vw,44px); font-weight:700; line-height:1.15; margin-bottom:16px; letter-spacing:-0.02em; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero-intro { font-size:17px; color:var(--text-muted); max-width:680px; line-height:1.8; }

/* CONTENT */
.content { max-width:1100px; margin:0 auto; padding:60px 40px; }
.section-label { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:24px; display:flex; align-items:center; gap:12px; }
.section-label::after { content:''; flex:1; height:1px; background:var(--border); }

/* ÁREA CARDS — hub principal */
.areas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:60px; }
.area-card { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:28px; text-decoration:none; display:flex; flex-direction:column; gap:16px; transition:border-color 0.2s, transform 0.15s, background 0.2s; position:relative; overflow:hidden; }
.area-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--card-color,var(--accent)); opacity:0; transition:opacity 0.2s; }
.area-card:hover { border-color:var(--card-color,var(--accent)); background:var(--bg3); transform:translateY(-2px); }
.area-card:hover::before { opacity:1; }
.area-icon { font-size:32px; line-height:1; }
.area-title { font-family:var(--font-serif); font-size:19px; font-weight:700; color:var(--text); }
.area-desc { font-size:14px; color:var(--text-muted); line-height:1.7; flex:1; }
.area-topics { display:flex; flex-wrap:wrap; gap:5px; }
.topic-pill { background:var(--bg3); border:1px solid var(--border); border-radius:4px; font-size:11px; padding:2px 8px; color:var(--text-muted); }
.area-cta { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--card-color,var(--accent)); padding-top:12px; border-top:1px solid var(--border); }
.area-cta svg { width:16px; height:16px; transition:transform 0.2s; }
.area-card:hover .area-cta svg { transform:translateX(4px); }

/* COMO USAR */
.como-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:48px; }
.como-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:24px; }
.como-num { font-family:var(--font-serif); font-size:32px; font-weight:700; color:var(--border); line-height:1; margin-bottom:12px; }
.como-title { font-size:15px; font-weight:600; color:var(--text); margin-bottom:8px; }
.como-desc { font-size:14px; color:var(--text-muted); line-height:1.75; }
.como-desc a { color:var(--accent); text-decoration:none; }

/* PROFESSOR STRIP */
.prof-strip { background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 12px 12px 0; padding:28px 32px; }
.prof-badge { display:inline-block; background:rgba(0,200,150,0.15); border:1px solid rgba(0,200,150,0.3); border-radius:50px; padding:4px 14px; font-size:12px; font-weight:600; color:var(--accent); margin-bottom:16px; }
.prof-strip p { font-size:15.5px; color:var(--text); line-height:1.85; margin-bottom:12px; }
.prof-strip p:last-child { margin-bottom:0; }

/* FOOTER */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:32px 40px; text-align:center; color:var(--text-muted); font-size:13px; }
footer a { color:var(--text-muted); }

@media(max-width:900px){ .areas-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px){
  nav { padding:0 20px; }
  .nav-links a:not(.nav-cta) { display:none; }
  .hero, .content { padding-left:20px; padding-right:20px; }
  .breadcrumb { padding-left:20px; }
  .areas-grid { grid-template-columns:1fr; }
  .como-grid { grid-template-columns:1fr; }
}