/* ══════════════════════════════════════════════════════════════
   Be+People — estilos compartidos de /metodo y las cinco fases
   Deriva del sistema visual de la home. No define paleta nueva.
   ══════════════════════════════════════════════════════════════ */

:root {
  --navy: #0a0f1e;
  --navy2: #0d1528;
  --card: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.09);
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent1: #60a5fa;   /* azul tech */
  --accent2: #ff9f00;   /* naranja ámbar */
  --accent3: #34d399;   /* verde esmeralda */
  --gold:    #ffd700;   /* oro puro */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Outfit',sans-serif; background:var(--navy); color:var(--text); overflow-x:hidden; }
:focus-visible { outline:2px solid var(--accent1); outline-offset:3px; border-radius:4px; }

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#fff; color:var(--navy); padding:10px 18px;
  border-radius:0 0 8px 0; font-size:0.85rem; font-weight:600;
}
.skip-link:focus { left:0; }

/* ── WORDMARK ── */
.bp { white-space:nowrap; text-transform:none; letter-spacing:normal; font-style:normal; }
.bp-a { color:var(--gold);    font-weight:700; }
.bp-b { color:var(--accent2); font-weight:400; }

/* ── NAV ── */
header {
  position:sticky; top:0; z-index:100;
  background:rgba(10,15,30,0.9); border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
}
.header-inner {
  max-width:1240px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; height:78px;
}
nav { display:flex; gap:24px; }
nav a { font-size:0.85rem; color:var(--muted); text-decoration:none; transition:color 0.2s; white-space:nowrap; }
nav a:hover, nav a[aria-current="page"] { color:#fff; }
.cta-btn {
  background:#fff; color:var(--navy); border-radius:999px;
  padding:10px 20px; font-size:0.82rem; font-weight:600;
  text-decoration:none; white-space:nowrap;
  transition:background 200ms ease, transform 160ms var(--ease-out);
}
.cta-btn:active { transform:scale(0.97); }
.nav-toggle {
  display:none; background:transparent; border:1px solid var(--border);
  border-radius:10px; width:42px; height:38px; cursor:pointer;
  color:#fff; align-items:center; justify-content:center;
}
.nav-toggle svg { width:20px; height:20px; }
.mobile-nav {
  display:none; border-top:1px solid var(--border);
  background:rgba(10,15,30,0.99); padding:12px 32px 20px;
}
.mobile-nav.open { display:block; }
.mobile-nav a {
  display:block; padding:12px 0; color:var(--text); text-decoration:none;
  font-size:0.95rem; border-bottom:1px solid rgba(255,255,255,0.05);
}
.mobile-nav .cta-btn { display:inline-block; margin-top:16px; border-bottom:none; }

/* ── LAYOUT ── */
section { padding:84px 0; }
.inner { max-width:1080px; margin:0 auto; padding:0 32px; }
.wide { max-width:1240px; }
.alt { background:var(--navy2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-tag {
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.22em;
  color:var(--muted); margin-bottom:14px;
}
h2.section-title {
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.8rem,3.2vw,2.4rem);
  color:#fff; line-height:1.18; max-width:720px; margin-bottom:20px;
}
h2.section-title em { font-style:italic; color:var(--accent1); }
.section-intro { font-size:1rem; color:var(--muted); line-height:1.82; max-width:700px; margin-bottom:44px; }

/* ── REVELADO AL SCROLL ── */
.reveal { opacity:0; transform:translateY(26px); }
.reveal.in { opacity:1; transform:none; transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.d1.in { transition-delay:80ms; }
.reveal.d2.in { transition-delay:160ms; }
.reveal.d3.in { transition-delay:240ms; }
.reveal.d4.in { transition-delay:320ms; }

/* ── BREADCRUMB ── */
.breadcrumb {
  max-width:1080px; margin:0 auto; padding:20px 32px 0;
  font-size:0.78rem; color:var(--muted);
}
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb span[aria-current] { color:var(--text); }

/* ── HERO ── */
.hero { padding:46px 0 68px; position:relative; overflow:hidden; }
.hero::before {
  content:""; position:absolute; top:-140px; left:50%; transform:translateX(-60%);
  width:900px; height:520px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center, var(--hero-glow, rgba(96,165,250,0.10)), transparent 68%);
}
.hero .inner { position:relative; z-index:1; }
.eyebrow {
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.2em;
  color:var(--fase-color, var(--accent1)); margin-bottom:20px;
}
.hero h1 {
  font-family:'DM Serif Display',serif; font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  color:#fff; line-height:1.16; letter-spacing:-0.01em; margin-bottom:24px; max-width:900px;
}
.hero h1 em { font-style:italic; color:var(--accent1); display:block; font-size:0.82em; margin-top:6px; }
.hero-sub { font-size:1.02rem; color:var(--muted); line-height:1.85; max-width:680px; margin-bottom:30px; }
.meta-row {
  display:flex; flex-wrap:wrap; gap:10px 28px;
  font-size:0.85rem; color:var(--fase-color, var(--accent1)); margin-bottom:32px;
  padding-bottom:28px; border-bottom:1px solid var(--border);
}
.btns { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn-primary {
  background:#fff; color:var(--navy); border-radius:999px;
  padding:13px 26px; font-size:0.9rem; font-weight:600; text-decoration:none;
  transition:background 200ms ease, transform 160ms var(--ease-out);
}
.btn-primary:active { transform:scale(0.97); }
.btn-secondary {
  background:transparent; color:#fff; border:1px solid var(--border);
  border-radius:999px; padding:13px 26px; font-size:0.9rem; text-decoration:none;
  transition:background 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.btn-secondary:active { transform:scale(0.97); }

/* ── LISTA DE SEÑALES ── */
.signals { list-style:none; display:flex; flex-direction:column; max-width:860px; }
.signals li {
  display:flex; gap:18px; align-items:flex-start;
  padding:20px 0; border-bottom:1px solid var(--border);
  font-size:1rem; color:var(--text); line-height:1.7;
}
.signals li::before { content:"—"; color:var(--fase-color, var(--accent1)); flex-shrink:0; }

/* ── BLOQUES DE CONTENIDO ── */
.blocks { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.block {
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:28px 26px;
  transition:border-color 220ms ease;
}
.block h3 { font-size:1.02rem; font-weight:600; color:#fff; margin-bottom:10px; }
.block p { font-size:0.9rem; color:var(--muted); line-height:1.72; }

/* ── ENTREGABLES ── */
.deliverables { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.deliverable {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:28px 26px;
  transition:border-color 220ms ease;
}
.del-num {
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.18em;
  color:var(--fase-color, var(--accent1)); margin-bottom:10px;
}
.del-title { font-size:1.04rem; font-weight:600; color:#fff; margin-bottom:10px; }
.del-text { font-size:0.89rem; color:var(--muted); line-height:1.72; }

/* ── TIMELINE ── */
.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; list-style:none; }
.tl-step { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:26px 22px; }
.tl-num { font-family:'DM Serif Display',serif; font-size:1.7rem; color:var(--fase-color, var(--accent1)); line-height:1; margin-bottom:12px; }
.tl-when { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.16em; color:var(--muted); margin-bottom:8px; }
.tl-title { font-size:1rem; font-weight:600; color:#fff; margin-bottom:10px; }
.tl-text { font-size:0.86rem; color:var(--muted); line-height:1.68; }

/* ── DESTACADO ── */
.highlight {
  border-left:2px solid var(--accent3); background:rgba(52,211,153,0.05);
  border-radius:0 12px 12px 0; padding:20px 24px;
  font-size:0.95rem; color:var(--text); line-height:1.78; margin-top:30px;
}
.highlight strong { color:#fff; font-weight:600; }

/* ── PREREQUISITO: refuerza que el orden no se saltea ── */
.prereq {
  display:flex; gap:18px; align-items:flex-start;
  background:rgba(52,211,153,0.05); border:1px solid rgba(52,211,153,0.22);
  border-radius:18px; padding:26px 28px; margin-bottom:44px;
}
.prereq-icon {
  font-family:'DM Serif Display',serif; font-size:1.5rem;
  color:var(--accent3); line-height:1; flex-shrink:0;
}
.prereq p { font-size:0.94rem; color:var(--text); line-height:1.76; }
.prereq a { color:var(--accent3); text-decoration:none; border-bottom:1px solid rgba(52,211,153,0.35); }

/* ── NAVEGACIÓN ENTRE FASES ── */
.phase-nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
.phase-nav-card {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:24px 26px; text-decoration:none; display:block;
  transition:border-color 220ms ease, transform 220ms var(--ease-out);
}
.pn-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.18em; color:var(--muted); margin-bottom:10px; }
.pn-title { font-size:1.02rem; font-weight:600; color:#fff; margin-bottom:6px; line-height:1.4; }
.pn-promise { font-size:0.86rem; color:var(--muted); line-height:1.6; }

/* ── CIERRE ── */
.close-box { text-align:center; max-width:720px; margin:0 auto; }
.close-box h2 { margin-left:auto; margin-right:auto; }
.close-box .section-intro { margin-left:auto; margin-right:auto; }
.close-box .btns { justify-content:center; }

/* ── FOOTER ── */
footer { border-top:1px solid var(--border); padding:56px 32px 36px; }
.footer-top {
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:36px;
  padding-bottom:36px; border-bottom:1px solid var(--border);
}
/* Logo con transparencia real (alfa por luminancia). Sin opacity: el PNG ya
   trae su propio gradiente y bajarle opacidad lo apaga. */
.footer-logo { height:46px; width:auto; display:block; }
.footer-tagline { font-size:0.76rem; color:var(--muted); margin-top:12px; line-height:1.6; max-width:260px; }
.footer-col h4 {
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.18em;
  color:var(--text); margin-bottom:14px; font-weight:600;
}
.footer-col a { display:block; font-size:0.82rem; color:var(--muted); text-decoration:none; margin-bottom:9px; line-height:1.5; }
.footer-col a:hover { color:#fff; }
.footer-bottom {
  max-width:1240px; margin:0 auto; padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:0.76rem; color:var(--muted);
}

/* ── HOVER (solo puntero fino) ── */
@media (hover:hover) and (pointer:fine) {
  .cta-btn:hover, .btn-primary:hover { background:#e2e8f0; }
  .btn-secondary:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.22); }
  .block:hover, .deliverable:hover { border-color:var(--fase-border-hover, rgba(96,165,250,0.3)); }
  .phase-nav-card:hover { border-color:rgba(255,255,255,0.24); transform:translateY(-3px); }
  .prereq a:hover { color:#fff; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .reveal { opacity:1 !important; transform:none !important; }
  .btn-primary:active, .btn-secondary:active, .cta-btn:active, .phase-nav-card:hover { transform:none; }
}

/* ── RESPONSIVE ── */
@media(max-width:1000px) {
  .timeline { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr 1fr; }
}
@media(max-width:900px) {
  nav { display:none; }
  .nav-toggle { display:flex; }
  .blocks, .deliverables, .phase-nav { grid-template-columns:1fr; }
}
@media(max-width:640px) {
  section { padding:60px 0; }
  .hero { padding:32px 0 48px; }
  .inner, .header-inner, .breadcrumb { padding-left:20px; padding-right:20px; }
  .mobile-nav { padding-left:20px; padding-right:20px; }
  .timeline { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; gap:28px; }
  .header-inner .cta-btn { display:none; }
  .btns .btn-primary, .btns .btn-secondary { width:100%; text-align:center; }
  .prereq { flex-direction:column; gap:12px; padding:22px 20px; }
  footer { padding:40px 20px 28px; }
}
@media(max-width:380px) {
  .inner, .header-inner, .breadcrumb, .mobile-nav { padding-left:16px; padding-right:16px; }
  .block, .deliverable, .tl-step { padding:22px 18px; }
  .footer-top { grid-template-columns:1fr; }
}