/* ============================================================
   PLAYING CAMP — Robots Work, Humans Play
   Shared brand system
   Colors  : Dark Green #054129 · Orange #F68840 · White
   Type    : Playfair Display (display) · Comfortaa (UI/body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500&family=Comfortaa:wght@300;400;500;600;700&display=swap');

:root {
  --green:        #054129;
  --green-deep:   #032d1c;
  --green-soft:   #0a5a39;
  --orange:       #F68840;
  --orange-soft:  #f9a868;
  --orange-deep:  #e2691f;
  --cream:        #FDF6EE;
  --cream-2:      #f6ebdc;
  --sand:         #f2ddc4;
  --white:        #FFFFFF;
  --ink:          #08110c;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui:      'Comfortaa', system-ui, sans-serif;

  --maxw: 1180px;
  --radius: 16px;
}

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

body {
  background: var(--cream);
  color: var(--green);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; }

/* ---------- LOGO ---------- */
.pc-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.pc-logo svg { width: 34px; height: 34px; display: block; }
.pc-logo .pc-word {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.92;
  font-size: 15px;
  text-transform: uppercase;
}
.pc-logo .pc-word small { display: block; font-weight: 600; }

/* ---------- TOP NAV ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 32px;
  background: rgba(5,65,41,0.92);
  backdrop-filter: blur(10px);
  color: var(--cream);
  border-bottom: 1px solid rgba(246,136,64,0.25);
}
.topbar .pc-logo { color: var(--orange); }
.topbar .pc-word { color: var(--cream); }
.topbar nav { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar nav a {
  color: var(--cream); text-decoration: none;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.8; transition: opacity .2s, color .2s;
}
.topbar nav a:hover { opacity: 1; color: var(--orange); }
.topbar .back { color: var(--orange); font-weight: 600; }
@media (max-width: 720px){ .topbar nav { display: none; } }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
  padding: 13px 24px; border-radius: 999px; border: 2px solid var(--orange);
  background: var(--orange); color: var(--green); transition: all .2s;
}
.btn:hover { background: transparent; color: var(--orange); }
.btn.ghost { background: transparent; color: var(--orange); }
.btn.ghost:hover { background: var(--orange); color: var(--green); }
.btn.on-green { border-color: var(--orange); }

/* ---------- TYPE HELPERS ---------- */
.eyebrow {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--orange); font-weight: 600; margin-bottom: 22px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content:''; width: 30px; height: 2px; background: var(--orange); border-radius:2px; }
.display {
  font-family: var(--font-display); font-weight: 700; line-height: 1.04;
  letter-spacing: -0.01em;
}
.serif-i { font-family: var(--font-display); font-style: italic; }

/* ---------- SECTIONS ---------- */
section { padding: 92px 32px; }
.section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08; margin-bottom: 16px;
}
.section-lead { font-size: 17px; line-height: 1.75; max-width: 640px; opacity: 0.82; }

/* tone variants */
.on-green { background: var(--green); color: var(--cream); }
.on-green .eyebrow { color: var(--orange-soft); }
.on-green .eyebrow::before { background: var(--orange-soft); }
.on-orange { background: var(--orange); color: var(--green); }
.on-cream { background: var(--cream); color: var(--green); }
.on-sand { background: var(--sand); color: var(--green); }

/* ---------- FOOTER ---------- */
footer {
  background: var(--green-deep); color: var(--cream);
  padding: 60px 32px 36px;
}
.footer-top {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(246,136,64,0.2);
}
.footer-tagline { margin-top: 18px; font-size: 13px; opacity: 0.6; line-height: 1.7; max-width: 360px; }
.footer-credits { font-size: 13px; opacity: 0.7; line-height: 1.9; }
.footer-credits strong { color: var(--orange); font-weight: 600; }
.footer-bottom {
  max-width: var(--maxw); margin: 28px auto 0;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.4; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
@media (max-width: 720px){ .footer-top { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- ANIMATION ---------- */
@keyframes fadeUp { from { opacity:0; transform: translateY(26px);} to {opacity:1; transform:none;} }
.fade { animation: fadeUp .9s ease both; }

/* ============================================================
   LESSON PAGE COMPONENTS
   ============================================================ */
.lesson-hero { background: var(--green); color: var(--cream); padding: 70px 32px 56px; position:relative; overflow:hidden; }
.lesson-hero::after { content:''; position:absolute; inset:0;
  background: radial-gradient(700px 460px at 88% -20%, rgba(246,136,64,0.18), transparent 60%); pointer-events:none; }
.lesson-hero .wrap { position:relative; z-index:1; }
.lesson-kicker { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:22px; }
.chip { font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:6px 14px; border-radius:999px; }
.chip.phase-robots { background: rgba(246,136,64,.18); color: var(--orange-soft); }
.chip.phase-humans { background: var(--orange); color: var(--green); }
.chip.week { background: rgba(253,246,238,.12); color: var(--cream); }
.lesson-num { font-family: var(--font-display); font-weight:900; font-size: clamp(60px,9vw,120px);
  line-height:.85; color: var(--orange); opacity:.85; }
.lesson-h1 { font-family: var(--font-display); font-weight:700; font-size: clamp(30px,5vw,56px); line-height:1.06; margin:6px 0 16px; }
.lesson-tagline { font-family: var(--font-display); font-style:italic; font-size: clamp(16px,2.2vw,22px); opacity:.7; max-width:680px; }

.lesson-body { max-width: 880px; margin: 0 auto; padding: 64px 32px; }
.block { margin-bottom: 56px; }
.block > .label { font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:700;
  color: var(--orange-deep); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.block > .label::before { content:''; width:26px; height:2px; background: var(--orange); border-radius:2px; }
.block h2 { font-family: var(--font-display); font-weight:700; font-size: clamp(24px,3.4vw,36px); line-height:1.12; margin-bottom:18px; }
.block h3 { font-family: var(--font-display); font-weight:700; font-size:21px; margin:26px 0 10px; }
.block p { font-size:16px; line-height:1.8; margin-bottom:16px; color: var(--green); }
.block p strong { color: var(--green); }
.block em { font-style: italic; }
.lead-q { font-family: var(--font-display); font-size: clamp(20px,3vw,28px); line-height:1.35;
  color: var(--green); border-left:4px solid var(--orange); padding: 6px 0 6px 22px; margin: 8px 0 28px; }
.lead-q em { color: var(--orange-deep); }

ul.ticks, ol.steps { list-style:none; margin: 6px 0 18px; }
ul.ticks li { position:relative; padding: 9px 0 9px 30px; font-size:15.5px; line-height:1.6; border-bottom:1px solid rgba(5,65,41,.1); }
ul.ticks li:last-child { border-bottom:none; }
ul.ticks li::before { content:'⛺'; position:absolute; left:0; font-size:14px; }
ol.steps { counter-reset: s; }
ol.steps li { position:relative; padding: 12px 0 12px 48px; font-size:15.5px; line-height:1.6; border-bottom:1px solid rgba(5,65,41,.1); }
ol.steps li:last-child { border-bottom:none; }
ol.steps li::before { counter-increment:s; content: counter(s); position:absolute; left:0; top:10px;
  width:30px; height:30px; border-radius:50%; background: var(--orange); color: var(--green);
  font-family: var(--font-display); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }

.callout { background: var(--green); color: var(--cream); border-radius: var(--radius); padding: 30px 30px; margin: 28px 0; }
.callout .label { color: var(--orange-soft); }
.callout .label::before { background: var(--orange-soft); }
.callout p { color: var(--cream); opacity:.9; margin-bottom:0; }
.callout h3 { color: var(--cream); margin-top:0; }

.case { background: var(--sand); border-radius: var(--radius); padding: 30px; margin: 28px 0; border-left:5px solid var(--orange); }
.case .tag { font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color: var(--orange-deep); }
.case h3 { margin-top:6px; }
.case p { margin-bottom:0; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:2px; border-radius:var(--radius); overflow:hidden; margin:24px 0; }
.split > div { background: var(--cream-2); padding: 26px 24px; }
.split h4 { font-family:var(--font-display); font-size:18px; margin-bottom:8px; }
.split p { font-size:14px; line-height:1.65; margin:0; opacity:.85; }
.split .pro { border-top:4px solid var(--green-soft); }
.split .con { border-top:4px solid var(--orange-deep); }

.readings { background: var(--cream-2); border-radius: var(--radius); padding: 28px 30px; }
.readings ul { list-style:none; }
.readings li { padding: 10px 0; border-bottom:1px solid rgba(5,65,41,.1); font-size:14.5px; line-height:1.5; }
.readings li:last-child { border-bottom:none; }
.readings li b { color: var(--green); }
.readings li span { opacity:.6; }

.deliverable { background: var(--orange); color: var(--green); border-radius: var(--radius); padding: 32px; }
.deliverable .label { color: var(--green); }
.deliverable .label::before { background: var(--green); }
.deliverable h3 { color: var(--green); margin-top:0; }
.deliverable p { color: var(--green); margin-bottom:0; }

.lesson-nav { max-width: 880px; margin: 0 auto; padding: 0 32px 72px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.lesson-nav a { text-decoration:none; }
.lesson-nav .prev, .lesson-nav .next { display:flex; flex-direction:column; gap:4px; max-width:46%; }
.lesson-nav .next { text-align:right; }
.lesson-nav small { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--orange-deep); font-weight:600; }
.lesson-nav b { font-family: var(--font-display); font-size:16px; color: var(--green); }

@media (max-width:640px){ .split { grid-template-columns:1fr; } }

/* ============================================================
   COMERCIAL · PILARES RWHP · LENS · PRICING
   ============================================================ */

/* 4 pilares Robots · Work · Humans · Play */
.pillars { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-top:40px; }
.pillar { position:relative; border-radius: var(--radius); overflow:hidden; min-height:300px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:var(--cream);
  background:var(--green-deep); text-decoration:none; transition:transform .2s, box-shadow .2s; }
a.pillar:hover { transform:translateY(-5px); box-shadow:0 14px 34px rgba(3,45,28,.4); }
a.pillar .arrow { position:absolute; top:18px; right:20px; z-index:1; color:var(--orange);
  font-size:18px; opacity:0; transition:opacity .2s; }
a.pillar:hover .arrow { opacity:1; }
.pillar .bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.55; }
.pillar::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,45,28,.15) 0%, rgba(3,45,28,.92) 78%); }
.pillar > * { position:relative; z-index:1; }
.pillar .k { font-family:var(--font-display); font-weight:900; font-size:34px; line-height:1; color:var(--orange); }
.pillar h3 { font-family:var(--font-display); font-size:20px; margin:10px 0 6px; }
.pillar p { font-size:13px; line-height:1.55; opacity:.85; }
@media (max-width:860px){ .pillars { grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .pillars { grid-template-columns:1fr; } }

/* Lens: pasado / presente / futuro × optimista / pesimista */
.lens { display:grid; grid-template-columns: 120px 1fr 1fr; gap:1px; margin-top:32px;
  background:rgba(253,246,238,.12); border-radius:var(--radius); overflow:hidden; }
.lens > div { background:var(--green); padding:16px 18px; font-size:13.5px; line-height:1.5; }
.lens .head { background:var(--green-deep); font-weight:700; color:var(--orange-soft);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; }
.lens .rowlabel { font-family:var(--font-display); font-size:16px; color:var(--cream); display:flex; align-items:center; }
.lens .opt { color:var(--cream); } .lens .opt b { color:var(--orange-soft); }
.lens .pes { color:var(--cream); opacity:.82; } .lens .pes b { color:#e9a07f; }
@media (max-width:640px){ .lens { grid-template-columns:1fr; } .lens .head:first-child{display:none;} }

/* Pricing */
.price-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:36px; }
.price-card { background:var(--cream); color:var(--green); border:1px solid rgba(5,65,41,.14); border-radius:var(--radius);
  padding:28px 24px; display:flex; flex-direction:column; position:relative; }
.price-card.featured { background:var(--green); color:var(--cream); border-color:var(--orange); transform:translateY(-6px); }
.price-card .badge { position:absolute; top:-11px; left:24px; background:var(--orange); color:var(--green);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border-radius:999px; }
.price-card .dur { font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--orange-deep); }
.price-card.featured .dur { color:var(--orange-soft); }
.price-card h3 { font-family:var(--font-display); font-size:21px; margin:6px 0 10px; line-height:1.15; }
.price-card .price { font-family:var(--font-display); font-weight:700; font-size:32px; color:var(--orange-deep); line-height:1; }
.price-card.featured .price { color:var(--orange); }
.price-card .price small { font-size:13px; font-weight:400; opacity:.6; display:block; margin-top:4px; }
.price-card ul { list-style:none; margin:18px 0 0; font-size:13.5px; line-height:1.5; }
.price-card li { padding:7px 0 7px 22px; position:relative; opacity:.9; border-top:1px solid rgba(5,65,41,.1); }
.price-card.featured li { border-top-color:rgba(253,246,238,.14); }
.price-card li::before { content:'⛺'; position:absolute; left:0; font-size:12px; }
.price-card .cta { margin-top:auto; padding-top:18px; }

.provisional { background:#fff3e6; border:1px dashed var(--orange-deep); color:var(--orange-deep);
  border-radius:12px; padding:14px 18px; font-size:13px; font-weight:600; margin-top:20px; }
.on-green .provisional { background:rgba(246,136,64,.12); border-color:var(--orange); color:var(--orange-soft); }

/* ---------- STATS / POR LOS NÚMEROS ---------- */
.statbox { background: var(--green); color: var(--cream); border-radius: var(--radius); padding: 30px 30px 26px; margin: 28px 0; }
.statbox .label { color: var(--orange-soft); }
.statbox .label::before { background: var(--orange-soft); }
.statbox h3 { color: var(--cream); margin-top:0; margin-bottom:18px; }
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap:22px; }
.stat-fig .big { font-family: var(--font-display); font-weight:700; font-size: clamp(28px,4vw,40px); color: var(--orange); line-height:1; }
.stat-fig .cap { font-size:12.5px; line-height:1.45; opacity:.8; margin-top:8px; }
.statbox .src { font-size:11px; opacity:.5; margin-top:20px; padding-top:14px; border-top:1px solid rgba(253,246,238,.15); }
.statbox .src a { color: var(--orange-soft); }

/* ---------- SPEAKERS (index) ---------- */
.speakers-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:2px;
  background: rgba(5,65,41,.1); border-radius: var(--radius); overflow:hidden; margin-top:40px; }
.speaker-card { background: var(--cream-2); padding: 30px 24px; transition: background .25s, transform .2s; }
.speaker-card:hover { background: var(--sand); transform: translateY(-2px); }
.speaker-avatar { width:54px; height:54px; background: var(--green); border-radius:50%; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700;
  font-size:20px; color: var(--orange); flex-shrink:0; }
.speaker-name { font-family: var(--font-display); font-size:17px; margin-bottom:4px; line-height:1.15; }
.speaker-role { font-size:12px; opacity:.6; line-height:1.5; }
.speaker-field { margin-top:14px; display:inline-block; font-size:10px; padding:4px 11px; border-radius:999px;
  background: var(--orange); color: var(--green); letter-spacing:.08em; text-transform:uppercase; font-weight:700; }

/* ---------- RESPONSIVE BASE ---------- */
@media (max-width: 640px){
  section { padding: 60px 22px; }
  .topbar { padding: 14px 20px; }
}