/* Scaling On — sitio (versión puente) · Identidad Visual v1.3 + paleta funcional de los cuatro frentes */
:root{
  --navy:#1A2B4A;
  --navy-90:#243556;
  --mostaza:#C9A961;        /* envejecido — sobre navy y oscuros */
  --mostaza-hover:#D6B872;
  --mostaza-prof:#B8860B;   /* profundo — sobre claros, solo ≥24px o formas */
  --hueso:#FAFAF7;
  --hueso-80:rgba(250,250,247,.82);
  --hueso-60:rgba(250,250,247,.62);
  --texto:#1A1A1A;
  --texto-2:#3A3A3A;
  --gris-calido:#E8E5E0;
  --gris-medio:#6A6A6A;
  --gris-claro:#9A9A9A;
  /* Paleta funcional — cuatro frentes (derivada y desplazada del flywheel de Scaling Up; solo donde aparecen los frentes) */
  --estrategia:#2E7D9A;  --estrategia-t:#E3EEF2;
  --personas:#C8763F;    --personas-t:#F6EAE1;
  --ejecucion:#7A4E2D;   --ejecucion-t:#EEE6E0;
  --cash:#6E9A48;        --cash-t:#E9EFE2;
  --font:"Hanken Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ancho:75rem;      /* 1200px */
  --medida:40rem;     /* párrafos largos */
  --radio:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--hueso);color:var(--texto);
  font-family:var(--font);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--navy)}
p{margin:0 0 1.2em}
h1,h2,h3,h4{color:var(--navy);font-weight:600;line-height:1.12;margin:0 0 .5em;letter-spacing:-0.012em}
h1{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.06}
h2{font-size:clamp(1.8rem,3.2vw,2.7rem)}
h3{font-size:1.35rem}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.medida{max-width:var(--medida)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Wordmark — Variante A3 "El punto de decisión" */
.wordmark{
  display:inline-flex;align-items:baseline;text-decoration:none;
  font-weight:600;letter-spacing:-0.015em;word-spacing:-0.06em;
  color:var(--navy);white-space:nowrap;line-height:1;
}
.wordmark .dot{display:inline-block;width:.1632em;height:.1632em;border-radius:50%;background:var(--mostaza-prof);margin-left:.09em;transform:translateY(-.02em)}
.wordmark--oscuro{color:var(--hueso)}
.wordmark--oscuro .dot{background:var(--mostaza)}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(250,250,247,.94);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--gris-calido)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.nav .wordmark{font-size:1.4rem}
.nav__der{display:flex;align-items:center;gap:28px}
.nav__links{display:flex;gap:26px;margin:0;padding:0;list-style:none}
.nav__links a{text-decoration:none;font-weight:500;font-size:1rem;color:var(--navy);padding:6px 0;border-bottom:2px solid transparent}
.nav__links a:hover,.nav__links a[aria-current="page"]{border-bottom-color:var(--mostaza-prof)}
.nav .btn{padding:11px 18px;font-size:.95rem}
.nav .btn .largo{display:inline}
.nav .btn .corto{display:none}

/* Botones */
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:1.05rem;
  padding:16px 28px;border-radius:8px;border:2px solid transparent;line-height:1.2;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn--primario{background:var(--mostaza);color:var(--navy);border-color:var(--mostaza)}
.btn--primario:hover{background:var(--mostaza-hover);border-color:var(--mostaza-hover)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:var(--hueso)}
.btn--outline-claro{background:transparent;color:var(--hueso);border-color:var(--hueso-60)}
.btn--outline-claro:hover{background:var(--hueso);color:var(--navy)}

/* Secciones */
.sec{padding:104px 0}
.sec--alt{background:var(--gris-calido)}
.sec--navy{background:var(--navy);color:var(--hueso)}
.sec--navy h2{color:var(--hueso)}
.sec__cab{max-width:46rem;margin-bottom:48px}
.sec__intro{font-size:1.25rem;color:var(--navy);margin:0}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.dos--ancha{grid-template-columns:1.1fr .9fr}

/* Hero */
.hero{padding:72px 0 88px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{max-width:18ch}
.hero__sub{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;max-width:30em;margin:1.1em 0 1.8em}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:1.4em}
.hero__ancla{font-size:1rem;color:var(--gris-medio);margin:0;max-width:34em}
.hero__fig{margin:0;width:100%;max-width:520px;justify-self:end}
.hero__fig svg{width:100%;height:auto}
.hero--metodo{padding-bottom:64px}
.hero--metodo h1{max-width:none}
.hero--metodo .sub{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.5;max-width:36em;margin:1em 0 .6em}
.hero--metodo .secuencia{font-style:italic;color:var(--navy);font-size:1.15rem;margin:1.6em 0 1.8em}

/* Diagramas */
.fig{margin:0}
.fig svg{width:100%;height:auto}
.fig text{font-family:var(--font)}
.fig--sticky{position:sticky;top:96px}

/* Flujo: Cuatro frentes. Tres conversaciones. */
.flujo{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:stretch;margin:40px 0 8px}
.flujo__nodo{border-radius:var(--radio);padding:22px 20px 20px;border:1.5px solid transparent;display:flex;flex-direction:column;gap:10px;min-height:120px}
.flujo__nodo svg{width:36px;height:36px}
.flujo__nodo b{font-size:1.2rem;color:var(--navy);letter-spacing:-0.01em}
.flujo__nodo small{color:var(--texto-2);font-size:.92rem;line-height:1.35}
.flujo__nodo--estrategia{background:var(--estrategia-t);border-color:var(--estrategia)}
.flujo__nodo--personas{background:var(--personas-t);border-color:var(--personas)}
.flujo__nodo--ejecucion{background:var(--ejecucion-t);border-color:var(--ejecucion)}
.flujo__nodo--cash{background:var(--cash-t);border-color:var(--cash)}
.flujo__nodo--estrategia svg{color:var(--estrategia)}
.flujo__nodo--personas svg{color:var(--personas)}
.flujo__nodo--ejecucion svg{color:var(--ejecucion)}
.flujo__nodo--cash svg{color:var(--cash)}
.flujo__arr{display:flex;align-items:center;justify-content:center;color:var(--navy);padding:0 2px}
.flujo__arr svg{width:34px;height:34px}
.flujo__leyenda{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:.95rem;color:var(--gris-medio);margin:14px 0 0}
.flujo__leyenda span b{color:var(--navy);font-weight:600}

/* Tarjetas con ícono (patrones / bullets de frentes / "no soy") */
.tarjetas{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tarjeta{background:var(--hueso);border:1px solid var(--gris-calido);border-radius:var(--radio);padding:28px 28px 26px;display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
.sec--alt .tarjeta{border-color:transparent}
.tarjeta__ico{width:52px;height:52px;border-radius:12px;background:var(--navy);display:flex;align-items:center;justify-content:center;color:var(--hueso)}
.tarjeta__ico svg{width:30px;height:30px}
.tarjeta__n{font-size:1.55rem;font-weight:600;color:var(--mostaza-prof);line-height:1;padding-top:.1em}
.tarjeta b{display:block;color:var(--navy);font-size:1.18rem;line-height:1.25;margin-bottom:.4em}
.tarjeta p{margin:0;font-size:1.02rem;color:var(--texto-2)}
.tarjeta--estrategia .tarjeta__ico{background:var(--estrategia)}
.tarjeta--personas .tarjeta__ico{background:var(--personas)}
.tarjeta--ejecucion .tarjeta__ico{background:var(--ejecucion)}
.tarjeta--cash .tarjeta__ico{background:var(--cash)}
.tarjetas--num .tarjeta{grid-template-columns:40px 1fr}
.cierre{font-size:1.25rem;color:var(--navy);margin:44px 0 0;font-weight:500;max-width:46rem}

/* Pares (teaser del método) */
.pares{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pares li{background:var(--hueso);border:1px solid var(--gris-calido);border-radius:var(--radio);padding:22px 22px 20px}
.pares .pts{display:flex;gap:6px;margin-bottom:12px}
.pares .pts i{width:14px;height:14px;border-radius:50%;display:inline-block}
.pares b{display:block;color:var(--navy);font-size:1.08rem;margin-bottom:.35em}
.pares span{color:var(--texto-2);font-size:1rem;line-height:1.45;display:block}
.p-estrategia{background:var(--estrategia)}.p-personas{background:var(--personas)}.p-ejecucion{background:var(--ejecucion)}.p-cash{background:var(--cash)}

/* Reencuadre */
.ancla{font-style:italic;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.3;color:var(--navy);margin:1.5em 0;padding-left:22px;border-left:4px solid var(--mostaza)}
.prosa p{max-width:var(--medida)}

/* Puente */
.puente{padding:120px 0;text-align:center}
.puente p{font-style:italic;font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--navy);max-width:30em;margin:0 auto;line-height:1.35}

/* Quién está detrás */
.quien{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:56px;align-items:start}
.foto{aspect-ratio:4/5;border-radius:var(--radio);background:var(--navy);display:flex;align-items:center;justify-content:center;overflow:hidden;position:sticky;top:96px}
.foto img{width:100%;height:100%;object-fit:cover}
.foto__ini{font-weight:600;font-size:5rem;color:var(--hueso);letter-spacing:-0.02em;line-height:1}
.foto__ini i{display:inline-block;width:.18em;height:.18em;border-radius:50%;background:var(--mostaza);margin-left:.06em}
.bio{font-size:1.15rem;max-width:var(--medida)}
.nosoy{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nosoy li{background:var(--hueso);border-radius:var(--radio);padding:22px 24px;border-left:4px solid var(--mostaza)}
.nosoy li b{display:block;color:var(--navy);font-size:1.08rem;margin-bottom:.3em}
.nosoy li span{color:var(--texto-2);font-size:1rem}

/* Conversación (franja navy) */
.conv{padding:104px 0}
.conv__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.conv p{color:var(--hueso-80);font-size:1.15rem;max-width:36em}
.conv p.cualifica{color:var(--hueso-60);font-size:1rem;margin:1.4em 0 0}
.conv__cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.conv__cta .btn{font-size:1.1rem;padding:18px 30px}
.conv__cta small{color:var(--hueso-60);font-size:.95rem}
.conv--mitad{padding:72px 0}
.conv--mitad h2{font-size:clamp(1.5rem,2.4vw,2rem)}

/* Footer */
.footer{padding:88px 0 40px;text-align:center;border-top:1px solid var(--gris-calido)}
.footer__mtp{font-style:italic;color:var(--navy);font-size:1.25rem;margin:0 0 48px}
.footer__marca{display:flex;align-items:baseline;justify-content:center;gap:10px;font-size:1.05rem;color:var(--gris-medio);margin-bottom:20px}
.footer__marca .wordmark{font-size:1.3rem}
.footer__nav{display:flex;justify-content:center;gap:22px;margin:0 0 22px;padding:0;list-style:none;font-size:.98rem}
.footer__nav a{text-decoration:none;color:var(--navy);font-weight:500}
.footer__social{margin:0 0 26px}
.footer__social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--navy);font-weight:500;font-size:.98rem}
.footer__social svg{width:18px;height:18px;fill:var(--navy)}
.footer__copy{font-size:.8rem;color:var(--gris-claro);margin:0}

/* /metodo — frentes */
.frente{padding:96px 0;border-top:1px solid var(--gris-calido)}
.frente__grid{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:64px;align-items:start}
.frente__lado{position:sticky;top:96px}
.frente__ico{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--hueso);margin-bottom:22px}
.frente__ico svg{width:36px;height:36px}
.frente--estrategia .frente__ico{background:var(--estrategia)}
.frente--personas .frente__ico{background:var(--personas)}
.frente--ejecucion .frente__ico{background:var(--ejecucion)}
.frente--cash .frente__ico{background:var(--cash)}
.frente__num{font-size:.95rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-medio);margin-bottom:12px;display:block}
.frente__kicker{display:block;color:var(--mostaza-prof);font-weight:500;font-size:1.15rem;margin:-.2em 0 1em}
.tesis{font-style:italic;font-size:clamp(1.3rem,2vw,1.55rem);line-height:1.35;color:var(--navy);margin:1em 0 0;padding-left:20px;border-left:4px solid var(--mostaza)}
.frente--estrategia .tesis{border-color:var(--estrategia)}
.frente--personas .tesis{border-color:var(--personas)}
.frente--ejecucion .tesis{border-color:var(--ejecucion)}
.frente--cash .tesis{border-color:var(--cash)}
.frente__prosa p{max-width:var(--medida)}
.capas{list-style:none;padding:0;margin:8px 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.capas li{background:var(--gris-calido);border-radius:var(--radio);padding:24px 26px}
.capas b{display:block;color:var(--navy);font-size:1.1rem;margin-bottom:.4em}
.capas p{margin:0;font-size:1rem;color:var(--texto-2)}
.frente__ancho{margin-top:44px}
.frente .tarjetas{margin-top:0}
.frente__ancho .cierre{margin:36px 0 24px}
.frente__ancho .capas{margin:0 0 8px}
.frente .tarjetas--num .tarjeta{padding:24px 24px 22px}
.frente__cierre{font-style:italic;color:var(--navy);font-size:1.2rem;margin:40px 0 0;max-width:var(--medida)}
.cierre-pagina{padding:104px 0}
.cierre-pagina .dos{grid-template-columns:1.1fr .9fr}
.blockquote-final{font-style:italic;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.3;color:var(--navy);margin:0 0 1.4em;padding-left:22px;border-left:4px solid var(--mostaza)}
.cta-final p{color:var(--navy);font-size:1.15rem;font-weight:500;margin-bottom:.9em}
.caja-navy{background:var(--navy);color:var(--hueso);border-radius:var(--radio);padding:40px 36px}
.caja-navy p{color:var(--hueso-80)}

/* 404 */
.p404{padding:140px 0;text-align:center}
.p404 p{max-width:32em;margin:0 auto 2em}

@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__fig{justify-self:center;max-width:440px}
  .dos,.dos--ancha{grid-template-columns:1fr;gap:40px}
  .fig--sticky{position:static;max-width:520px}
  .flujo{grid-template-columns:1fr 1fr;gap:14px}
  .flujo__arr{display:none}
  .frente__grid{grid-template-columns:1fr;gap:36px}
  .frente__lado{position:static}
  .pares{grid-template-columns:1fr 1fr}
  .conv__grid{grid-template-columns:1fr;gap:32px}
  .cierre-pagina .dos{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:17px}
  .sec{padding:72px 0}
  .hero{padding:48px 0 64px}
  .nav__in{height:62px}
  .nav__links{gap:16px}
  .nav__links a{font-size:.95rem}
  .nav .btn .largo{display:none}
  .nav .btn .corto{display:inline}
  .nav .btn{padding:10px 14px}
  .tarjetas,.nosoy,.capas,.pares,.flujo{grid-template-columns:1fr}
  .tarjeta{grid-template-columns:44px 1fr;gap:14px;padding:22px 20px}
  .tarjeta__ico{width:44px;height:44px}
  .quien{grid-template-columns:1fr;gap:28px}
  .foto{max-width:280px;position:static}
  .puente{padding:80px 0}
  .frente{padding:64px 0}
  .conv{padding:72px 0}
  .caja-navy{padding:30px 24px}
}
@media (max-width:420px){
  .nav__links li:first-child{display:none}
  .nav__der{gap:14px}
}

/* Framework 4D (bloque gateado) — misma colorimetría que el flujo: tinte de fondo + borde + ícono en el color del frente */
.sistema{background:var(--hueso);border-top:1px solid var(--gris-calido)}
.capas4d{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.capa4d{display:grid;grid-template-columns:minmax(200px,.28fr) 1fr;gap:24px;align-items:start;background:var(--gris-calido);border:2px solid var(--navy);border-radius:var(--radio);padding:22px 26px}
.capa4d__cab{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline}
.capa4d__cab h3{margin:0;font-size:1.3rem}
.capa4d__cab small{grid-column:2;color:var(--gris-medio);font-size:.95rem}
.capa4d__n{font-size:1.6rem;font-weight:600;color:var(--mostaza-prof);line-height:1}
.capa4d__items{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.capa4d__items li{background:var(--hueso);border-radius:10px;padding:14px 16px;border:1.5px solid transparent;border-left:3px solid var(--navy)}
.capa4d__items b{display:block;color:var(--navy);font-size:1.02rem;margin-bottom:.15em}
.capa4d__items span{display:block;color:var(--texto-2);font-size:.95rem;line-height:1.4}
.capa4d__items--4{grid-template-columns:repeat(4,1fr)}
.capa4d--decisiones{background:var(--navy);border-color:var(--navy)}
.capa4d--decisiones h3{color:var(--hueso)}
.capa4d--decisiones .capa4d__n{color:var(--mostaza)}
.capa4d--decisiones small{color:var(--hueso-60)}
.capa4d--decisiones .capa4d__items li{border-left-width:1.5px;padding-top:16px}
.capa4d--decisiones .capa4d__items svg{width:30px;height:30px;margin-bottom:10px;display:block}
.d-estrategia{background:var(--estrategia-t)!important;border-color:var(--estrategia)!important;color:var(--estrategia)}
.d-personas{background:var(--personas-t)!important;border-color:var(--personas)!important;color:var(--personas)}
.d-ejecucion{background:var(--ejecucion-t)!important;border-color:var(--ejecucion)!important;color:var(--ejecucion)}
.d-cash{background:var(--cash-t)!important;border-color:var(--cash)!important;color:var(--cash)}
.resultados4d{display:grid;grid-template-columns:minmax(200px,.28fr) 1fr;gap:24px;align-items:center;margin-top:14px;padding:22px 26px;border:3px solid var(--mostaza);border-radius:var(--radio)}
.resultados4d__cab h3{margin:0;font-size:1.3rem}
.resultados4d__items{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.resultados4d__items b{display:block;font-size:2rem;line-height:1;color:var(--mostaza-prof);font-weight:600}
.resultados4d__items span{display:block;color:var(--navy);font-weight:500;margin-top:6px}
.sistema__fuente{margin:22px 0 0;font-size:.9rem;color:var(--gris-medio)}
@media (max-width:1024px){
  .capa4d__items,.capa4d__items--4{grid-template-columns:1fr 1fr}
  .resultados4d__items{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .capa4d,.resultados4d{grid-template-columns:1fr;gap:14px;padding:18px 18px}
  .capa4d__items,.capa4d__items--4{grid-template-columns:1fr}
}