/* ============================================================
   MK EMPRESARIAL — V6 · lenguaje de formas
   Carga después de v5.css.

   Cuatro sistemas, todos en SVG o CSS puro, sin imágenes nuevas:
     1. Nav en cápsula flotante
     2. Trama sobre la fotografía (recorte editorial)
     3. Formas orgánicas de fondo
     4. Tarjetas superpuestas fuera de rejilla
   ============================================================ */

/* ============================================================
   1. NAV EN CÁPSULA FLOTANTE
   El header deja de ser una barra pegada al borde y pasa a ser
   una píldora que flota sobre el contenido.
   ============================================================ */
@media(min-width:1000px){
  /* mk.css pinta .hdr en azul opaco sin media query; hay que
     anularlo explícitamente o la cápsula queda velada de oscuro. */
  .hdr,
  html body .hdr{
    position:fixed;
    top:18px;left:0;right:0;
    z-index:100;          /* por encima del hero y sus decoraciones */
    background:transparent;
    background-color:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:0;
    border-bottom:0;
    box-shadow:none;
  }
  .hdr__in{
    max-width:1180px;
    margin-inline:auto;
    min-height:0;
    padding:10px 10px 10px 26px;
    background:rgba(255,255,255,.93);
    backdrop-filter:saturate(180%) blur(18px);
    border:1px solid rgba(7,19,32,.07);
    border-radius:var(--r-pill);
    box-shadow:0 2px 6px rgba(7,19,32,.05),0 14px 40px rgba(7,19,32,.10);
  }

  /* Sobre fondo claro el logo va en su versión oscura.
     El claim del SVG ("consultoría que genera resultados") es
     ilegible por debajo de ~46px de alto: se recorta el lienzo a la
     zona del lockup y el claim queda fuera, en lugar de mostrarse
     borroso. El texto alternativo lo sigue anunciando. */
  .brand__logo{
    filter:none;
    width:clamp(172px,15vw,206px);
    max-height:44px;
    object-fit:cover;
    object-position:left top;
    aspect-ratio:1075/215;
  }
  .hdr .nav__lista a,
  .hdr .nav__grupo-btn{color:var(--slate)}
  .hdr .nav__lista a:hover,
  .hdr .nav__grupo-btn:hover{color:var(--ink)}
  .hdr .nav__lista a[aria-current]{color:var(--clay)}

  .hdr .btn{
    border-radius:var(--r-pill);
    padding:13px 24px;
    background:var(--ink);
    color:#fff;
  }
  .hdr .btn:hover{background:var(--clay)}

  /* El submenú también se acapsula.
     z-index propio: el hero crea contexto de apilado (transform en
     sus decoraciones) y, sin esto, el panel queda por debajo y no
     recibe los clics aunque se vea. */
  .nav__grupo{position:relative;z-index:70}
  .nav__sub{
    z-index:80;
    background:#fff;
    border:1px solid rgba(7,19,32,.08);
    border-radius:var(--r-xl);
    box-shadow:0 8px 20px rgba(7,19,32,.08),0 24px 60px rgba(7,19,32,.12);
    padding:10px;
    /* Puente invisible: evita que el panel se cierre al cruzar el
       hueco entre el botón y la lista. */
    margin-top:0;
  }
  .nav__grupo::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:14px;
  }
  .nav__sub a{color:var(--slate);border-radius:12px}
  .nav__sub a:hover{background:var(--bg-soft);color:var(--ink)}

  /* El hero compensa la cabecera flotante */
  .hero{padding-top:clamp(120px,11vw,168px)}
  .hero--pag{padding-top:clamp(116px,10vw,150px)}
  .crumbs{padding-top:96px}

  /* Al bajar, la cápsula se compacta */
  /* Al bajar solo cambian sombra y opacidad del fondo: animar el
     padding forzaría un recálculo de layout en cada scroll. */
  .hdr.is-scrolled .hdr__in{
    background:rgba(255,255,255,.97);
    box-shadow:0 2px 6px rgba(7,19,32,.08),0 10px 30px rgba(7,19,32,.16);
  }
  .hdr::after{display:none}
}

/* El filete de progreso vive en el borde inferior de la cápsula.
   No puede recortarse con overflow:hidden en .hdr__in, porque eso
   también recorta el submenú de Servicios, que se despliega fuera.
   Se pinta en un ::before con su propio redondeo y el submenú queda
   libre para salir de la caja. */
@media(min-width:1000px){
  .hdr__in{position:relative}
  .hdr__in::before{
    content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;
    border-radius:var(--r-pill);
    background:linear-gradient(90deg,var(--gold),var(--gold-line));
    transform:scaleX(var(--leido,0));transform-origin:left;
    will-change:transform;
    pointer-events:none;
  }
}

/* ============================================================
   HERO — la rejilla genérica sale
   Una retícula de líneas a paso fijo es el fondo por defecto de
   cualquier landing. En su lugar, la trama de puntos de la marca
   (la misma que enmarca las fotos) en degradado hacia la esquina.
   ============================================================ */
.hero::before{
  background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.6px);
  background-size:26px 26px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(120% 95% at 78% 2%,#000 0%,transparent 68%);
  mask-image:radial-gradient(120% 95% at 78% 2%,#000 0%,transparent 68%);
}

/* ============================================================
   2. TRAMA SOBRE LA FOTOGRAFÍA
   La foto deja de ser un rectángulo plano: se recorta en cápsula
   y una trama de rombos la enmarca, como en la referencia.
   ============================================================ */
.ph--editorial{
  border-radius:var(--r-2xl);
  overflow:visible;
  position:relative;
}
.ph--editorial picture,
.ph--editorial img{
  border-radius:var(--r-2xl);
  overflow:hidden;
}

/* La trama asoma por detrás, desplazada: da profundidad sin sombra.
   Va detrás de la imagen (z-index negativo) para no velarla. */
.ph--editorial::before{
  content:"";position:absolute;z-index:-1;
  inset:auto -18px -18px auto;
  width:56%;height:56%;
  background-image:radial-gradient(var(--gold-line) 1.4px,transparent 1.5px);
  background-size:13px 13px;
  border-radius:var(--r-2xl);
  opacity:.5;
}
.ph--editorial{isolation:auto}
.ph--editorial picture{position:relative;z-index:1;display:block}
.ph--editorial img{position:relative;z-index:1}

/* v5 velaba la foto con un ::after en multiply que, con el nuevo
   apilado, quedaba por encima de la imagen. Se retira: el recorte
   en cápsula y la trama ya dan el tratamiento editorial. */
.ph--editorial::after{content:none}

/* Retrato de Jorge: cápsula alta y trama en arena */
.ph--retrato{border-radius:var(--r-xl)}
.ph--retrato img{border-radius:var(--r-xl)}

/* ============================================================
   3. FORMAS ORGÁNICAS DE FONDO
   Blobs suaves en SVG, muy desaturados. Nunca bajo texto largo:
   solo detrás de bloques cortos y de la fotografía.
   ============================================================ */
/* La forma se sangra por los bordes, así que la sección la recorta:
   sin esto el desbordamiento lateral ensancha el documento entero y
   aparece scroll horizontal en móvil. */
.mk-blob{position:relative;isolation:isolate;overflow:hidden}
.mk-blob > *{position:relative;z-index:1}
.mk-blob::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(46vw,560px);aspect-ratio:1;
  top:-12%;right:-12%;
  background:radial-gradient(circle at 34% 34%,var(--clay-soft),transparent 66%);
  filter:blur(6px);
  opacity:.85;
}
.mk-blob--left::before{left:-16%;right:auto;top:auto;bottom:-16%;
  background:radial-gradient(circle at 60% 40%,var(--sand-2),transparent 68%)}

/* Onda divisoria entre secciones: sustituye al filete recto */
.mk-wave{position:relative}
.mk-wave::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:44px;
  background:inherit;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V16c240-21 480-21 720 0s480 21 720 0v28z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V16c240-21 480-21 720 0s480 21 720 0v28z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  transform:translateY(-100%);
}

/* ============================================================
   4. TARJETAS SUPERPUESTAS
   Rompen la rejilla plana: leve rotación y solapamiento real.
   Solo en escritorio; en móvil se apilan rectas.
   ============================================================ */
/* La envoltura hereda el sitio que v5 daba a la figura */
.mk-stack{position:relative;width:100%;align-self:stretch}
.mk-stack .ph{width:100%;margin:0;min-height:0;aspect-ratio:3/2}
.mk-stack .ph picture,
.mk-stack .ph img{width:100%;height:100%}
.mk-stack .ph img{object-fit:cover}

@media(min-width:920px){
  .mk-stack .ph{transform:rotate(-1.4deg)}
  .mk-stack .mk-float{
    position:absolute;
    /* Dentro de la caja: la sección recorta su desbordamiento para
       evitar scroll horizontal, así que la ficha se solapa hacia
       adentro en vez de salirse. */
    left:-6px;bottom:-18px;
    z-index:3;
    transform:rotate(2deg);
  }
}

/* La ficha flotante: dato corto sobre bloque de color */
.mk-float{
  display:inline-flex;flex-direction:column;gap:2px;
  padding:20px 26px;
  background:var(--ink);
  color:#fff;
  border-radius:var(--r-xl);
  box-shadow:0 6px 16px rgba(7,19,32,.14),0 22px 48px rgba(7,19,32,.18);
  max-width:260px;
}
.mk-float b{
  font-family:var(--serif);
  font-size:1.85rem;
  line-height:1;
  letter-spacing:-.03em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 72;
}
.mk-float span{font-size:.82rem;line-height:1.4;color:rgba(255,255,255,.88)}

/* ============================================================
   Bloques cálidos — el color entra por secciones, no por acentos
   ============================================================ */
.sec--warm{background:var(--bg-soft);border-block:1px solid var(--line-2)}
.sec--clay{background:var(--bg-soft);border-block:1px solid var(--line-2)}

/* La cita destacada pasa a terracota */
.pull{border-left-color:var(--clay)}
.pull p{color:var(--ink)}

/* Los pasos numerados: cápsula en arena */
.pasos__n{
  border-radius:var(--r-pill);
  border-color:var(--clay);
  color:var(--clay);
  background:#fff;
}

/* Botones en cápsula */
.btn{border-radius:var(--r-pill)}
.btn--ghost{border-radius:var(--r-pill)}

/* La barra fija de móvil se ensanchaba por encima del viewport:
   el texto del CTA imponía un ancho mínimo que flex no podía
   reducir (min-width:auto por defecto en un ítem flex). */
.sticky{
  box-sizing:border-box;
  width:100%;max-width:100vw;
  overflow:hidden;
}
.sticky .btn{
  border-radius:var(--r-pill);
  flex:1 1 0;
  min-width:0;          /* deja que el ítem encoja por debajo de su contenido */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  line-height:1.3;
  padding:15px 16px;
}
.sticky__wa{flex:0 0 46px;width:46px;height:46px;border-radius:var(--r-pill)}

/* El CTA secundario del hero, en terracota sobre oscuro */
.hero .btn--ghost:hover{background:rgba(201,160,87,.16);border-color:var(--gold-line)}

/* Tarjetas de servicio: cápsula suave y acento cálido */
.dcard{border-radius:var(--r-xl)}
.dcard:hover{border-color:var(--clay)}
.dcard::after{background:var(--clay)}
.dcard__link{color:var(--clay)}
.dcard:hover .dcard__link{color:var(--clay-2)}
.chips li,.pasos li,.deliver li,.canal{border-radius:var(--r-xl)}
.chips b{color:var(--clay)}
.deliver svg{color:var(--clay)}
.canal:hover{border-color:var(--clay)}

/* ============================================================
   Señales de alarma — fichas sueltas, no una franja continua
   Sobre el bloque terracota cada señal es una cápsula propia,
   escalonada: el desnivel repite la subida de las barras del logo.
   ============================================================ */
.sec--clay .signals{
  background:none;border:0;border-radius:0;overflow:visible;
  gap:var(--s-3);
}
.sec--clay .signal{
  background:#fff;
  border-radius:var(--r-xl);
  padding:var(--s-5) var(--s-4);
  box-shadow:0 2px 5px rgba(7,19,32,.05),0 12px 28px rgba(7,19,32,.07);
}
@media(min-width:760px){
  .sec--clay .signal:nth-child(2){transform:translateY(-10px)}
  .sec--clay .signal:nth-child(3){transform:translateY(-20px)}
  .sec--clay .signal:nth-child(4){transform:translateY(-12px)}
  .sec--clay .signal:nth-child(5){transform:translateY(-4px)}
}
.sec--clay .signal__k{color:var(--ink)}
.sec--clay .signal__k i{color:var(--clay-2)}
.signals{border-radius:var(--r-xl)}

/* FAQ: el hover pasa a terracota */
.faq summary:hover{color:var(--clay)}

/* Tarjeta de autoridad */
.auth__card{border-radius:var(--r-2xl)}
.auth__card::after{opacity:.2}

/* ============================================================
   Panel del diagnóstico — bloque de color, no caja blanca
   ============================================================ */
.diagnosis-entry{background:var(--bg-soft);border-block:1px solid var(--line-2)}
.diagnosis-entry__panel{
  background:#fff;
  border-radius:var(--r-2xl);
  border:1px solid rgba(7,19,32,.07);
  box-shadow:0 4px 10px rgba(7,19,32,.05),0 24px 56px rgba(7,19,32,.10);
  padding:clamp(24px,3vw,36px);
  position:relative;
}
/* La trama asoma tras el panel, como en la fotografía */
.diagnosis-entry__panel::before{
  content:"";position:absolute;z-index:-1;
  right:-20px;bottom:-20px;width:58%;height:52%;
  background-image:radial-gradient(var(--gold-line) 1.4px,transparent 1.5px);
  background-size:13px 13px;
  border-radius:var(--r-2xl);opacity:.45;
}
.diagnosis-entry__scale{
  font-family:var(--serif);
  font-size:clamp(2.6rem,5vw,3.6rem);
  line-height:1.02;
  color:var(--clay);
  letter-spacing:-.035em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 96;
}
/* El pie no puede heredar el interlineado del número */
.diagnosis-entry__scale span{
  font-family:var(--sans);
  font-size:.86rem;
  line-height:1.5;
  letter-spacing:-.005em;
  color:var(--slate);
  margin-top:var(--s-3);
}
.diagnosis-entry__dims{
  margin-top:var(--s-2);
  font-size:.82rem;
  color:var(--slate-2);
}
.flow__s{border-radius:var(--r-xl)}
.flow__n{border-radius:var(--r-pill);border-color:var(--clay);color:var(--clay)}

/* Dashboards V4 */
.v4-dashboard{border-radius:var(--r-2xl)}
.v4-system-map{border-radius:var(--r-2xl)}
.v4-nodes button{border-radius:14px}
.v4-analysis-center{background:var(--sand-2);border-color:var(--clay)}
.v4-analysis-center > span{color:var(--clay)}

/* ============================================================
   Movimiento — la cápsula y las formas reaccionan al scroll
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  @media(min-width:1000px){
    .hdr__in{transition:box-shadow .28s var(--ease-out),background-color .28s var(--ease-out)}
  }
  .mk-float{transition:transform .3s var(--ease-out)}
  .mk-stack:hover .mk-float{transform:rotate(2deg) translateY(-4px)}
}

@media(prefers-reduced-motion:reduce){
  .mk-stack .ph,.mk-stack .mk-float{transform:none}
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:919px){
  .mk-float{
    position:static;margin-top:var(--s-5);
    max-width:none;width:100%;
    border-radius:var(--r-xl);
  }
}
@media(max-width:700px){
  .ph--editorial::before{display:none}
  .mk-blob::before{opacity:.5;width:86vw}
}