/* ==========================================================================
   PÁGINAS DE PILAR — lidera / marca / monetiza / invierte
   Cada página se tiñe sola desde el <body>:
     --c     color luminoso del pilar (para fondos oscuros)
     --hero  fondo oscuro de su familia de color
   ========================================================================== */

/* ---------- HERO ---------- */
.p-hero{
  position:relative; overflow:hidden; background:var(--hero); color:var(--cream);
  padding:calc(var(--nav-h) + clamp(70px,10vw,130px)) 0 clamp(60px,8vw,110px);
}
.p-hero .beam{
  background:
    radial-gradient(880px 520px at 82% 6%, color-mix(in srgb,var(--c) 30%,transparent), transparent 68%),
    radial-gradient(700px 500px at 4% 100%, color-mix(in srgb,var(--c) 16%,transparent), transparent 66%);
}
.p-hero .wrap{ position:relative; z-index:2; }
.p-hero .rose{
  position:absolute; right:-6vw; top:50%; translate:0 -50%; width:min(52vw,640px); z-index:1; pointer-events:none;
  opacity:.5;
}
.p-hero .rose circle, .p-hero .rose line{ fill:none; stroke:rgba(243,237,227,.14); stroke-width:1; }
.p-hero .rose .needle{ fill:var(--c); opacity:.55; }
.p-hero .rose .needle-back{ fill:rgba(243,237,227,.1); }
.p-hero .crumbs{
  display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(243,237,227,.5);
}
.p-hero .crumbs b{ color:var(--c); font-weight:500; }
.p-hero h1{ font-size:clamp(38px,6vw,82px); letter-spacing:-.035em; max-width:17ch; margin:26px 0 24px; }
.p-hero h1 b{ font-weight:500; color:var(--c); }
.p-hero .claim{ font-size:clamp(17px,1.7vw,22px); color:rgba(243,237,227,.72); max-width:54ch; line-height:1.5; }
.p-hero .claim + .claim{ margin-top:10px; }
.p-hero .acts{ display:flex; gap:12px; margin-top:38px; flex-wrap:wrap; }
.p-hero .btn-accent{ background:var(--c); }
.p-hero .btn-line{ border-color:rgba(243,237,227,.24); color:var(--cream); }
@media (max-width:900px){ .p-hero .rose{ opacity:.25; width:90vw; right:-30vw; } }

/* ---------- MARQUESINA (versión chica) ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding:11px 0; background:var(--bg-2); }
.marquee .row{ display:flex; gap:30px; white-space:nowrap; will-change:transform; }
.marquee span{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:30px;
}
.marquee span::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); }

/* ---------- IMAGEN + TEXTO ---------- */
.p-media{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,80px); align-items:center; }
.p-media.rev{ grid-template-columns:1.2fr .8fr; }
.p-media.rev .p-img{ order:2; }
.p-img{ margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--bg-2); }
.p-img img{ width:100%; height:auto; }
.divider{ border:0; height:1px; background:var(--line); margin:34px 0; }

/* ---------- TEXTO LARGO ---------- */
.p-text .answer b, .p-media .answer b{ color:var(--ink); font-weight:600; }
.p-text h2{ font-size:clamp(28px,4vw,50px); letter-spacing:-.03em; margin:18px 0 30px; }

/* frases destacadas */
.asks{ display:grid; gap:10px; margin:26px 0; }
.asks li{
  padding:18px 22px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--card);
  font-family:'Fraunces',serif; font-size:clamp(18px,1.8vw,22px); line-height:1.35; letter-spacing:-.01em;
  border-left:3px solid var(--accent);
}

/* ---------- ¿QUÉ VAS A APRENDER? ---------- */
.numlist{ display:grid; }
.numrow{
  display:grid; grid-template-columns:70px 1fr; gap:22px; padding:30px 6px;
  border-top:1px solid var(--line); align-items:start;
  transition:padding-left .4s var(--ease), background .4s var(--ease);
}
.numrow:last-child{ border-bottom:1px solid var(--line); }
.numrow:hover{ padding-left:20px; background:color-mix(in srgb,var(--accent) 7%,transparent); }
.numrow .n{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); padding-top:8px; letter-spacing:.08em; }
.numrow h3{ font-size:clamp(22px,2.4vw,30px); margin-bottom:10px; letter-spacing:-.02em; }
.numrow p{ color:var(--muted); font-size:16.5px; line-height:1.6; max-width:60ch; }

/* especialidades (Marca) */
.speclist{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 32px; margin:26px 0 8px; }
.speclist li{
  padding:15px 0; border-bottom:1px solid var(--line); font-size:16px; font-weight:500;
  display:flex; align-items:center; gap:13px; transition:padding-left .35s var(--ease);
}
.speclist li:hover{ padding-left:10px; }
.speclist li::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

/* tarjetas "Porque…" (Monetiza) */
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.why-card{ padding:clamp(24px,2.6vw,34px); }
.why-card .n{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); letter-spacing:.08em; }
.why-card p{ margin-top:14px; color:var(--muted); font-size:16px; line-height:1.65; }
.why-card p b{ color:var(--ink); font-weight:600; }

/* ---------- VIDEO ---------- */
.p-video{ background:var(--ink-deep); color:var(--cream); }
.p-video .note{ margin-top:18px; }
.p-video .link-arrow{ color:var(--c); }

/* ---------- OTROS PILARES ---------- */
.nextgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.nextcard{
  display:flex; flex-direction:column; gap:10px; padding:28px 26px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card); transition:all .45s var(--ease);
}
.nextcard:hover{ transform:translateY(-5px); border-color:var(--c); box-shadow:var(--shadow-2); }
.nextcard .dot{ width:9px; height:9px; border-radius:50%; background:var(--c); }
.nextcard h3{ font-size:28px; letter-spacing:-.02em; color:var(--c); margin-top:6px; }
.nextcard p{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; line-height:1.7; color:var(--muted); }
.nextcard .go{ margin-top:auto; padding-top:10px; color:var(--c); font-size:14px; font-weight:600; transition:transform .35s var(--ease); }
.nextcard:hover .go{ transform:translateX(6px); }

@media (max-width:900px){
  .p-media, .p-media.rev{ grid-template-columns:1fr; }
  .p-media.rev .p-img{ order:0; }
  .p-img{ max-width:520px; }
  .speclist, .why-grid, .nextgrid{ grid-template-columns:1fr; }
  .numrow{ grid-template-columns:44px 1fr; gap:14px; }
}