/* ============================================================
   MK EMPRESARIAL — V5
   Rediseño visual. Carga después de mk.css y v4.css y los redefine.

   Tres decisiones que gobiernan todo el archivo:
   1. Tipografía: Fraunces (display, óptico) + Inter (texto).
   2. Sin eyebrows: el titular carga su propio peso.
   3. El logo es el sistema gráfico: las barras ascendentes de la M
      y la diagonal dorada de la K se reutilizan como separadores,
      viñetas, marcas de agua y acentos de sección.
   ============================================================ */

:root{
  /* ---- Tipografía ---- */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* ---- Color ----
     La paleta de la marca, sin añadidos: azul marino + dorado + los
     grises del sistema. Los azules se profundizan y el dorado se
     vuelve algo más sobrio, pero no entra ninguna familia nueva. */
  --ink:#071320;
  --ink-2:#0C1E33;
  --ink-3:#12293F;
  --slate:#4C5F75;
  --slate-2:#647A92;
  --bg:#FFFFFF;
  --bg-soft:#F7F8FA;
  --bg-warm:var(--bg-soft);   /* sin cremas: gris azulado del sistema */
  --bg-dark:#071320;
  --line:#E6E9ED;
  --line-2:#EFF1F4;
  --line-dark:rgba(255,255,255,.10);

  --gold:#8A6420;
  --gold-line:#C9A057;
  --gold-2:#E8CC8E;
  --gold-soft:rgba(201,160,87,.10);

  /* Sin familia cálida: la paleta es la de la marca, azul + dorado.
     Los tokens se conservan porque v6.css los usa en 36 reglas, pero
     apuntan al dorado y a los grises del sistema original. */
  --clay:var(--gold);          /* acentos: dorado oscuro, legible sobre blanco */
  --clay-2:#6E4F17;            /* dorado profundo: hover */
  --clay-soft:var(--bg-soft);  /* fondos de bloque: gris azulado */
  --sand:var(--line);
  --sand-2:var(--bg-soft);

  /* Radios de cápsula — el lenguaje de forma de la referencia */
  --r-pill:999px;
  --r-xl:22px;
  --r-2xl:32px;

  /* ---- Escala de espaciado (4px base) ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* ---- Radios: más contenidos ---- */
  --r-s:6px; --r-m:10px; --r-l:16px;

  /* ---- Sombras con offset real, nunca halos ---- */
  --sh-1:0 1px 2px rgba(7,19,32,.05),0 4px 12px rgba(7,19,32,.04);
  --sh-2:0 2px 4px rgba(7,19,32,.06),0 12px 32px rgba(7,19,32,.08);
  --sh-3:0 4px 8px rgba(7,19,32,.08),0 24px 56px rgba(7,19,32,.12);

  --max:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   Base tipográfica
   ============================================================ */
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  letter-spacing:-.011em;
  color:var(--ink);
  font-feature-settings:"cv05" 1,"cv08" 1,"ss01" 1;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.025em;
  font-variation-settings:"SOFT" 0,"WONK" 0;
  text-wrap:balance;
}

/* Fraunces es óptica: el tamaño display pide menos contraste de eje
   y un tracking más cerrado que el texto. */
h1{
  font-size:clamp(2.4rem,5.4vw,4.4rem);
  line-height:1.03;
  letter-spacing:-.035em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
}
h2{
  font-size:clamp(1.85rem,3.9vw,2.9rem);
  line-height:1.09;
  letter-spacing:-.03em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 72;
}
h3{
  font-size:clamp(1.08rem,2vw,1.26rem);
  line-height:1.3;
  letter-spacing:-.018em;
}

p{line-height:1.65}
.lede{
  font-size:clamp(1.06rem,1.9vw,1.2rem);
  line-height:1.6;
  color:var(--slate);
  max-width:68ch;
  letter-spacing:-.012em;
}

/* Medida de lectura: ningún párrafo pasa de 75ch */
.stack p,.sec p:not(.lede):not(.micro):not(.v4-note){max-width:72ch}

/* ============================================================
   Ritmo vertical — más aire entre secciones
   ============================================================ */
.wrap{max-width:var(--max);padding-inline:24px}
@media(min-width:768px){.wrap{padding-inline:40px}}

.sec{padding:clamp(64px,8.5vw,128px) 0}
.sec--soft{background:var(--bg-soft);border-block:1px solid var(--line-2)}
.sec--warm{background:var(--bg-soft);border-block:1px solid var(--line-2)}

/* Más espacio encima de un titular que debajo */
.sec h2{margin-top:0}
.sec h2 + .lede,.sec h2 + p,.sec h2 + .stack{margin-top:var(--s-5)}

/* ============================================================
   EYEBROWS — eliminados
   El titular carga su propio peso. Se neutraliza la clase en lugar
   de tocar 33 llamadas repartidas por seis módulos de contenido.
   ============================================================ */
.eyebrow{display:none !important}

/* El titular carga su propio peso: sin sello delante. El logo
   trabaja a escala de sección, no como viñeta de párrafo. */

/* ============================================================
   SISTEMA GRÁFICO DEL LOGO
   ============================================================ */

/* --- 1. mk-edge — la diagonal de la K como corte de sección ---
   No es un adorno en una esquina: el ángulo de la K (126°) recorre
   el borde izquierdo de la sección a altura completa. Se percibe
   como estructura, no como sticker. */
.mk-edge{position:relative}
.mk-edge::before{
  content:"";position:absolute;pointer-events:none;
  left:0;top:0;bottom:0;width:clamp(90px,14vw,220px);
  background:linear-gradient(126deg,transparent calc(50% - .5px),var(--gold-line) 50%,transparent calc(50% + .5px));
  opacity:.28;
}
@media(max-width:860px){.mk-edge::before{display:none}}

/* --- 2. mk-climb — las barras ascendentes como columna ---
   Las cuatro barras de la M, verticales y a escala de sección,
   acompañando la rejilla de las cinco dimensiones. Aparecen una
   sola vez en toda la página. */
.mk-climb{position:relative}
.mk-climb::before{
  content:"";position:absolute;pointer-events:none;
  left:0;bottom:0;
  width:clamp(120px,16vw,230px);height:clamp(90px,11vw,170px);
  background:
    linear-gradient(to top,var(--gold-line) 0 100%) 0 100%/13% 30% no-repeat,
    linear-gradient(to top,var(--gold-line) 0 100%) 29% 100%/13% 52% no-repeat,
    linear-gradient(to top,var(--gold-line) 0 100%) 58% 100%/13% 76% no-repeat,
    linear-gradient(to top,var(--gold-line) 0 100%) 87% 100%/13% 100% no-repeat;
  opacity:.16;
}
@media(max-width:1180px){.mk-climb::before{display:none}}

/* --- 3. mk-diag — la K, enorme, detrás del hero ---
   A esta escala el trazo deja de leerse como logo y se convierte
   en la geometría del fondo. */
.mk-diag{position:relative;overflow:hidden}
.mk-diag::before{
  content:"";position:absolute;pointer-events:none;
  top:-28%;right:-8%;
  width:min(52vw,720px);aspect-ratio:1/1.25;
  background:
    linear-gradient(126deg,transparent calc(50% - 1.5px),var(--gold-line) 50%,transparent calc(50% + 1.5px)),
    linear-gradient(54deg,transparent calc(50% - 1.5px),var(--gold-line) 50%,transparent calc(50% + 1.5px));
  opacity:.16;
}
@media(max-width:980px){.mk-diag::before{width:86vw;top:auto;bottom:-14%;right:-26%;opacity:.1}}

/* --- 4. mk-mark — el isotipo como marca de agua ---
   Solo en secciones oscuras, sangrado por el borde: se lee como
   materia de fondo, no como un logo pegado. */
.mk-mark{position:relative;overflow:hidden;isolation:isolate}
.mk-mark > *{position:relative;z-index:1}
.mk-mark::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-8%;bottom:-30%;
  width:min(52vw,600px);aspect-ratio:420/260;
  background:url("/assets/img/mk-isotipo.svg") right bottom/contain no-repeat;
  opacity:.09;filter:brightness(1.8);
}
@media(max-width:700px){.mk-mark::after{width:86vw;opacity:.06;bottom:-18%}}

/* ============================================================
   Header — más ligero, con filete dorado de progreso
   ============================================================ */
.hdr{
  background:rgba(7,19,32,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hdr__in{min-height:74px;gap:var(--s-4)}
.hdr .btn{padding:12px 22px;font-size:.88rem;letter-spacing:-.006em}

/* El logo lleva el claim dentro del SVG: por debajo de cierto ancho
   ese texto se vuelve ilegible y se corta. Se limita la altura y se
   deja que el SVG escale completo. */
.brand{flex:0 1 auto;min-width:0}
.brand__logo{
  width:clamp(158px,20vw,210px);
  max-height:56px;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:599px){
  .brand__logo{width:clamp(150px,44vw,182px);max-height:48px}
  .hdr__in{min-height:66px;gap:var(--s-3)}
}
@media(max-width:380px){.brand__logo{width:140px;max-height:44px}}

/* Filete de lectura: la barra del logo convertida en indicador */
.hdr::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold-line),var(--gold-2));
  transform:scaleX(var(--leido,0));transform-origin:left;
  will-change:transform;
}
.hdr{position:sticky;top:0}

/* ============================================================
   Botones — menos ruido, más intención
   ============================================================ */
.btn{
  font:600 .96rem/1 var(--sans);
  letter-spacing:-.008em;
  padding:17px 30px;
  border-radius:var(--r-s);
  box-shadow:0 1px 2px rgba(7,19,32,.10);
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),background .18s var(--ease);
}
.btn:hover{transform:translateY(-1.5px);box-shadow:0 8px 22px rgba(7,19,32,.18)}
.btn--lg{padding:19px 34px;font-size:1rem}
/* Sobre fondo oscuro el CTA va en blanco, no en dorado: el dorado
   es el acento de la marca, no el color de acción. Blanco sobre
   azul profundo da el contraste más alto de la página. */
.btn--light,
.hero .btn--light,
.sec--dark .btn--light{--btn-bg:#FFFFFF;--btn-fg:var(--ink)}
.btn--light:hover,
.hero .btn--light:hover,
.sec--dark .btn--light:hover{--btn-bg:#F4F1EB}

/* El CTA primario lleva la diagonal del logo al hacer hover */
.btn--light{position:relative;overflow:hidden}
.btn--light::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(201,160,87,.28) 50%,transparent 60%);
  transform:translateX(-120%);
  transition:transform .6s var(--ease-out);
}
.btn--light:hover::before{transform:translateX(120%)}

/* ============================================================
   Hero — la pieza que fija el tono
   ============================================================ */
.hero{
  background:var(--bg-dark);
  padding:clamp(64px,8vw,120px) 0 clamp(72px,9vw,128px);
}

/* El fondo del hero lo define v6.css con la trama de puntos de la
   marca. La retícula heredada de mk.css se anula aquí. */
.hero::before{background-image:none}

/* Halo dorado más contenido */
.hero::after{
  width:680px;height:680px;right:-240px;top:-320px;
  background:radial-gradient(circle,rgba(201,160,87,.16),transparent 64%);
}

.hero h1{color:#fff;max-width:15ch}
.hero h1 em{
  font-style:normal;
  color:var(--gold-2);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
}
.hero__sub{
  margin-top:var(--s-5);
  font-size:clamp(1.06rem,2vw,1.22rem);
  line-height:1.58;
  color:#AFC0D2;
  max-width:50ch;
}
.hero__cta{margin-top:var(--s-7);gap:var(--s-3)}
.hero__micro{
  margin-top:var(--s-5);
  gap:var(--s-2) var(--s-5);
  font-size:.86rem;
  color:#8399B0;
  letter-spacing:-.005em;
}
.dot{background:var(--gold-line)}

/* Hero interior: las barras sustituyen al eyebrow eliminado */
.hero--pag{padding:clamp(56px,7vw,96px) 0 clamp(52px,6.5vw,84px)}
.hero--pag h1{font-size:clamp(2rem,4.6vw,3.4rem);max-width:20ch}
.hero--pag .wrap::before{
  content:"";display:block;width:44px;height:18px;margin-bottom:var(--s-5);
  background:
    linear-gradient(to top,var(--gold-2) 0 100%) 0 100%/7px 40% no-repeat,
    linear-gradient(to top,var(--gold-2) 0 100%) 12.5px 100%/7px 62% no-repeat,
    linear-gradient(to top,var(--gold-2) 0 100%) 25px 100%/7px 82% no-repeat,
    linear-gradient(to top,var(--gold-2) 0 100%) 37.5px 100%/7px 100% no-repeat;
}

/* ============================================================
   Tarjetas — planas, con filete superior en hover
   ============================================================ */
.dcard,.chips li,.pasos li,.deliver li,.canal{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  box-shadow:none;
  transition:border-color .22s var(--ease),transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.dcard:hover,.canal:hover{
  border-color:var(--gold-line);
  transform:translateY(-2px);
  box-shadow:var(--sh-2);
}
.dcard{padding:var(--s-5) var(--s-5) var(--s-6)}
.dcard::after{height:2px;background:var(--gold-line)}

.dcard h3{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
}
.dcard p{margin-top:var(--s-2);font-size:.88rem;line-height:1.5;color:var(--slate)}
.dcard__link{
  margin-top:var(--s-4);
  font:600 .8rem/1 var(--sans);
  letter-spacing:-.004em;
  color:var(--gold);
}

.chips li{padding:var(--s-5)}
.chips b{
  font-size:.74rem;
  letter-spacing:.1em;
  color:var(--gold);
  margin-bottom:var(--s-2);
}
.chips span{font-size:.92rem;line-height:1.55}

.pasos li{padding:var(--s-5);gap:var(--s-4)}
.pasos__n{
  width:34px;height:34px;flex:0 0 34px;
  border:1px solid var(--gold-line);
  color:var(--gold);
  font:600 .82rem/1 var(--sans);
  letter-spacing:.02em;
}
.pasos h3{margin-bottom:var(--s-2)}
.pasos p{font-size:.92rem;line-height:1.55}

.deliver li{padding:var(--s-5);gap:var(--s-4)}
.deliver h3{margin-bottom:var(--s-2)}
.deliver p{font-size:.92rem;line-height:1.55}
.deliver svg{color:var(--gold-line)}

/* ============================================================
   Señales de alarma — franja, no tarjetas
   ============================================================ */
.signals{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;margin-top:var(--s-6)}
.signal{
  border:0;border-radius:0;box-shadow:none;
  padding:var(--s-5) var(--s-3);
  background:#fff;
}
.signal__k{font-size:.72rem;letter-spacing:.09em}
.signal__g{margin-top:var(--s-2);font-size:.7rem;line-height:1.4}

/* ============================================================
   Bloque de impacto con fotografía
   ============================================================ */
.split{gap:clamp(32px,4.5vw,72px)}
@media(min-width:920px){
  .split--imp{grid-template-columns:1fr 1fr;align-items:center}
}
.split--imp .ph{align-self:stretch;min-height:340px}
.split--imp .ph img{height:100%}

/* Las fotos llevan un velo tenue de la marca: unifica temperaturas
   de color distintas sin teñir la escena. */
.ph--editorial{aspect-ratio:3/2;border-radius:var(--r-m);box-shadow:var(--sh-2)}
.ph--editorial::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(7,19,32,.16),transparent 52%);
  mix-blend-mode:multiply;
}

/* ============================================================
   Cita destacada — tipografía, no caja
   ============================================================ */
.pull{
  margin-top:var(--s-6);
  padding:0 0 0 var(--s-5);
  background:none;
  border-left:1px solid var(--gold-line);
  border-radius:0;
}
.pull p{
  font-family:var(--serif);
  font-size:clamp(1.15rem,2.6vw,1.5rem);
  line-height:1.32;
  letter-spacing:-.022em;
  color:var(--ink);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 48;
}

/* ============================================================
   Tarjeta de autoridad — el retrato manda
   ============================================================ */
.auth__card{
  background:linear-gradient(168deg,var(--ink-3),var(--ink));
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-l);
  padding:clamp(26px,3.4vw,40px);
  position:relative;
  overflow:hidden;
}
/* Diagonal de la K, marcando la tarjeta */
.auth__card::after{
  content:"";position:absolute;pointer-events:none;
  top:-18%;right:-14%;
  width:230px;aspect-ratio:1/1.4;
  background:linear-gradient(126deg,transparent 46%,var(--gold-line) 46%,var(--gold-line) 51%,transparent 51%);
  opacity:.26;
}
.auth__name{font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:-.025em;margin-bottom:var(--s-3)}
.auth__role{
  font-size:.76rem;
  letter-spacing:.12em;
  color:var(--gold-2);
}
.auth__role2{margin-top:var(--s-2);font-size:.86rem;color:#9FB3C8}
.creds{margin-top:var(--s-5);padding-top:var(--s-5);gap:var(--s-3)}
.creds li{font-size:.9rem;color:#BDCCDB}
.creds svg{color:var(--gold-2)}
.auth__sig{margin-top:var(--s-5);font-size:.82rem;color:#7E93AA}
.ph--retrato{border-radius:var(--r-m)}

/* ============================================================
   FAQ — lista, no tarjetas apiladas
   ============================================================ */
.faq{gap:0;border-top:1px solid var(--line);margin-top:var(--s-7)}
.faq details{
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
}
.faq summary{
  padding:var(--s-5) 52px var(--s-5) 0;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:-.015em;
  transition:color .18s var(--ease);
}
.faq summary:hover{color:var(--gold)}
.faq summary::after{right:var(--s-2)}
.faq .faq__a{padding:0 52px var(--s-5) 0;font-size:.96rem;line-height:1.6}

/* ============================================================
   CTA final — marca de agua del isotipo
   ============================================================ */
.sec--dark{background:var(--bg-dark)}
.final h2{color:#fff;max-width:18ch;margin-inline:auto}
.final .lede{color:#A7BACE}
.final .btn{margin-top:var(--s-6)}
.final__list{
  margin-top:var(--s-5);
  gap:var(--s-2) var(--s-5);
  font-size:.86rem;
  color:#8399B0;
}
.final__list span{display:inline-flex;align-items:center;gap:var(--s-2)}
.final__list span::before{
  content:"";width:3px;height:3px;border-radius:50%;background:var(--gold-line);
}

/* ============================================================
   Footer — más aire, jerarquía más clara
   ============================================================ */
.ftr{background:var(--ink);padding-top:var(--s-9)}
.ftr__nombre{font-family:var(--serif);letter-spacing:-.025em}
.ftr__claim{color:var(--gold-2);font-family:var(--serif);letter-spacing:-.018em}
.ftr__tit{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7E93AA;
}

/* ============================================================
   Dashboards V4 — alineados a la nueva paleta
   ============================================================ */
.v4-dashboard{
  background:linear-gradient(162deg,var(--ink-3),var(--ink-2));
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-l);
}
.v4-kpi dd{
  font-family:var(--serif);
  color:var(--gold-2);
  letter-spacing:-.03em;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 72;
}
.v4-system{background:var(--bg-soft);border-color:var(--line-2)}
.v4-system-map{background:var(--ink);border-radius:var(--r-l)}
.v4-nodes button{border-radius:var(--r-s);font-family:var(--sans);letter-spacing:-.008em}
.v4-analysis-center{background:var(--bg-soft);border-color:var(--gold-line)}
.v4-analysis-center strong{font-variation-settings:"SOFT" 0,"WONK" 1}
.v4-step{font-family:var(--sans);letter-spacing:.08em}
.v4-detail summary{font-family:var(--sans);letter-spacing:-.008em}
.v4-note{font-size:.75rem;line-height:1.6}

/* Radar y gráficos: dorado nuevo */
.v4-radar-shape{fill:rgba(201,160,87,.16);stroke:var(--gold-2)}
.v4-draw{stroke:var(--gold-2)}
.v4-stackbar span+span{background:var(--gold-2)}
.v4-value-bar{background:var(--gold-2)}

/* ============================================================
   Diagnóstico — la interfaz que convierte
   ============================================================ */
.q legend{font-family:var(--serif);letter-spacing:-.025em}
.opt{border-radius:var(--r-s);transition:border-color .18s var(--ease),background .18s var(--ease)}
.gauge-wrap{font-family:var(--serif)}

/* ============================================================
   Movimiento — una entrada, no una cascada por sección
   ============================================================ */
.rv{opacity:0;transform:translateY(12px)}
.rv.in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}

@media(prefers-reduced-motion:reduce){
  .btn--light::before{display:none}
  .hdr::after{transition:none}
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:560px){
  h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  .hero__sub{font-size:1.02rem}
  .mk-mark::after{display:none}
  .signals{grid-template-columns:repeat(2,1fr)}
  .faq summary{font-size:.98rem;padding-right:44px}
}

@media(min-width:1000px){
  .hero__in{grid-template-columns:1.1fr .9fr;gap:clamp(48px,6vw,88px)}
}