/* ==========================================================================
   empresa.css · /empresa/ · «La parte que factura»
   Sólo esta página. Usa tokens y roles de base.css.
   ========================================================================== */

/* PORTADILLA · la memoria de alguien -------------------------------------- */
.emp-portada__kicker { margin-bottom: clamp(16px, 2vw, 24px); }
.emp-portada__h { font-size: clamp(2.7rem, 5.9vw, 6.1rem); max-width: 17ch; line-height: .96; }
.emp-portada__cuerpo { margin-top: clamp(36px, 4.5vw, 64px); row-gap: 48px; align-items: start; }
.emp-portada__texto { --c: 4 / 9; }
.emp-portada__texto .entradilla { max-width: 38ch; margin-top: 0; }
.emp-portada__nota { margin-top: 18px; }
@media (min-width: 1024px) { .emp-portada__nota .nota__in { margin-left: clamp(0px, 6vw, 96px); max-width: 32ch; } }
.memoria { --c: 9 / 13; --ct: 3 / 11; max-width: 480px; }

.memoria__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--c-fuerte); padding-top: 10px; }
.memoria__ej, .agente__ej {
  font-size: .625rem; color: var(--c-acento-texto); border: 1px dashed currentColor; padding: 1px 7px; white-space: nowrap;
}
.memoria__lista { margin-top: 12px; }
.memoria__fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline;
  padding: 10px 0 9px; border-bottom: 1px solid var(--c-linea);
}
.memoria__que {
  justify-self: start; font-size: 1.0625rem; line-height: 1.3; color: var(--c-sec);
  background: linear-gradient(var(--c-acento), var(--c-acento)) 0 58% / 100% 1px no-repeat;
  transition: background-size .55s var(--ease), color .4s;
}
.memoria__donde { color: var(--c-acento-texto); transition: opacity .4s var(--ease) .25s, transform .4s var(--ease) .25s; }
.memoria__pie { display: flex; justify-content: space-between; margin-top: 12px; color: var(--c-sec); }
.memoria__pie b { font-family: var(--f-display); font-size: 1.75rem; line-height: .8; font-weight: 400; color: var(--c-texto); letter-spacing: -0.02em; }
/* con JS: empieza sin tachar y se va «sacando de la cabeza» */
html.js .memoria__fila:not(.is-hecho) .memoria__que { background-size: 0 1px; color: var(--c-texto); }
html.js .memoria__fila:not(.is-hecho) .memoria__donde { opacity: 0; transform: translateX(-8px); }

/* 3NITRAM ------------------------------------------------------------------ */
.nit__cab { align-items: start; row-gap: 12px; }
.nit__marca { padding-top: .8em; }
.nit__claim { --c: 4 / 13; font-size: clamp(3rem, 7.4vw, 7.6rem); line-height: .92; letter-spacing: -0.03em; max-width: 12ch; }
.nit__claim em { font-family: var(--f-texto); font-style: italic; font-weight: 400; color: var(--c-acento); letter-spacing: -0.035em; }
.nit__cuerpo { row-gap: 40px; align-items: start; }
.nit__texto { --c: 4 / 8; }
.nit__ledger { --c: 8 / 13; }
@media (min-width: 768px) { .nit__ledger .ledger__fila { grid-template-columns: 13ch minmax(0, 1fr) auto; } }
.nit__ledger .ledger__d { font-family: var(--f-display); font-size: 1.35rem; line-height: 1; letter-spacing: -0.01em; text-transform: none; }
@media (min-width: 768px) and (max-width: 1023px) { .nit__texto, .nit__ledger { --ct: 1 / 11; } }

.nit__h3 { --c: 4 / 12; font-size: clamp(1.9rem, 3.4vw, 3.25rem); line-height: 1.02; max-width: 22ch; }
.cuatro { border-top: 1px solid var(--c-fuerte); }
.cuatro__fila {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline;
  padding: 18px 0 17px; border-bottom: 1px solid var(--c-linea);
}
.cuatro__k { grid-column: 1 / 4; color: var(--c-acento-texto); }
.cuatro__t { grid-column: 4 / 12; font-family: var(--f-display); font-size: clamp(1.35rem, 2.1vw, 1.95rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
@media (max-width: 767px) {
  .cuatro__fila { row-gap: 6px; }
  .cuatro__k, .cuatro__t { grid-column: 1 / -1; }
}

/* EL NOMBRE · nota al pie destacada («NITRAM ⇄ MARTÍN») ------------------- */
.nit__nota { margin-top: 10px; }
.nombre { border-top: 1px solid var(--c-fuerte); padding-top: 14px; }
.nombre__rejilla { row-gap: 0; align-items: start; }
.nombre__cab { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.nombre__etq { color: var(--c-texto); }
.nombre__marca { font-family: var(--f-texto); font-size: 1.5em; line-height: 0; color: var(--c-acento); vertical-align: -.1em; letter-spacing: 0; }
.nombre__palabra {
  --c: 4 / 13; display: flex; align-items: baseline; margin-top: clamp(8px, 1.5vw, 20px);
  font-size: clamp(3.2rem, 11vw, 10.5rem); line-height: .9; white-space: nowrap;
}
.nombre__tres { font-family: var(--f-display); color: var(--c-acento); letter-spacing: -0.04em; margin-right: .04em; }
.nombre__letras { --paso: calc(1ch + .06em); display: inline-flex; font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 300; letter-spacing: 0; }
.nombre__letras > span { display: inline-block; width: var(--paso); text-align: center; transition: transform 1.1s var(--ease-io) calc(var(--i) * 70ms); }
/* al revés: la letra i pasa al hueco 5 − i (Martian Mono tiene todas las letras del mismo ancho) */
.nombre.is-reves .nombre__letras > span { transform: translateX(calc((5 - 2 * var(--i)) * var(--paso))); }
.nombre__lectura { --c: 4 / 13; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 14px; color: var(--c-sec); }
.nombre__flecha { font-family: var(--f-texto); font-size: 1.4rem; line-height: 1; color: var(--c-acento); }
.nombre__texto { --c: 4 / 10; margin-top: clamp(24px, 3vw, 40px); }
.nombre__texto .voz { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.3; }
.nombre__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 24px !important; }
@media (min-width: 768px) and (max-width: 1023px) { .nombre__palabra, .nombre__lectura { --ct: 1 / 13; } .nombre__texto { --ct: 1 / 11; } }
@media (max-width: 767px) { .nombre__palabra { font-size: clamp(2.6rem, 16.5vw, 5rem); margin-top: 18px; } }

/* diez semanas · calendario real ----------------------------------------- */
.semanas__cab { row-gap: 16px; align-items: end; }
.semanas__h { --c: 1 / 9; font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1.02; max-width: 20ch; }
.semanas__fuente { --c: 9 / 13; }
@media (min-width: 1024px) { .semanas__fuente { text-align: right; } }
.semanas__scroll { margin-top: clamp(32px, 4vw, 56px); }
.semanas__scroll:focus-visible { outline-offset: 4px; }
.semanas__regla {
  --col: calc(100% / 12);
  position: relative;
  background: repeating-linear-gradient(90deg, var(--c-linea) 0 1px, transparent 1px var(--col));
  border-right: 1px solid var(--c-linea);
}
.semanas__marcas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 1px solid var(--c-fuerte); background: var(--c-fondo); }
.semanas__marcas li { font-family: var(--f-mono); font-size: .6875rem; font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; color: var(--c-sec); padding: 0 0 8px 8px; border-left: 1px solid var(--c-linea); }
.semanas__marcas li:first-child { border-left-color: transparent; }
.semanas__marcas .semanas__despues { color: var(--c-acento-texto); }
.fase { position: relative; padding: 22px 0 18px; }
.fase + .fase { border-top: 1px dashed var(--c-linea); }
.fase__barra {
  position: absolute; top: 0; height: 8px;
  left: calc(100% * var(--ini) / 12); width: calc(100% * (var(--fin) - var(--ini)) / 12);
  background: var(--c-fuerte); transform-origin: 0 50%;
  transition: transform .9s var(--ease) calc(var(--i) * .16s);
}
.fase--despues .fase__barra { background: repeating-linear-gradient(90deg, var(--c-acento) 0 6px, transparent 6px 10px); }
.fase:nth-child(1) .fase__barra { background: var(--c-acento); }
.fase__txt { display: flex; flex-direction: column; gap: 4px; width: fit-content; max-width: 340px; padding-right: 12px; background: var(--c-fondo);
  margin-left: clamp(0px, calc(100% * var(--ini) / 12 + 8px), calc(100% - 340px)); }
.fase__cuando { color: var(--c-sec); }
.fase__t { font-family: var(--f-display); font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1; letter-spacing: -0.01em; }
.fase__d { font-size: 1rem; line-height: 1.4; color: var(--c-sec); }
.fase--despues .fase__txt { margin-left: auto; padding: 0 0 0 12px; text-align: right; }
html.js .semanas__regla:not(.is-in) .fase__barra { transform: scaleX(0); }
@media (max-width: 1023px) {
  .semanas__marcas { display: none; }
  .semanas__regla { background: none; border-right: 0; border-top: 1px solid var(--c-fuerte); }
  .fase { padding: 34px 0 18px; }
  .fase::before { /* regla de 12 semanas en cada fila */
    content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 8px;
    background: repeating-linear-gradient(90deg, var(--c-linea) 0 1px, transparent 1px calc(100% / 12)); border-right: 1px solid var(--c-linea);
  }
  .fase__barra { top: 12px; }
  .fase__txt, .fase--despues .fase__txt { margin-left: 0; padding: 0; text-align: left; max-width: none; background: none; }
}

/* 2M KAPITAL · así trabaja un agente ------------------------------------- */
.dosm2__marca { padding-top: .8em; }
.dosm2__h { --c: 4 / 13; font-size: clamp(2.8rem, 6.4vw, 6.5rem); line-height: .94; letter-spacing: -0.025em; max-width: 14ch; }
.dosm2__intro { row-gap: 32px; align-items: end; }
.dosm2__texto { --c: 4 / 9; }
.dosm2__texto a { color: var(--fucsia-luz); text-underline-offset: 3px; }
.dosm2__cta { --c: 9 / 13; border-top: 1px solid var(--fucsia-luz); padding-top: 12px; }
.dosm2__cta p { max-width: 34ch; }
.dosm2__boton { margin-top: 16px; font-size: clamp(1.35rem, 1.9vw, 1.7rem); color: var(--fucsia-luz); }
.dosm2__boton:hover { color: var(--hueso); }
@media (min-width: 768px) and (max-width: 1023px) { .dosm2__texto { --ct: 1 / 8; } .dosm2__cta { --ct: 8 / 13; } }

.agente__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; border-top: 1px solid var(--c-fuerte); padding-top: 12px; }
.agente__cuerpo { margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 3vw, 44px); }
.agente__svg { display: block; width: 100%; height: auto; overflow: visible; }
.agente__svg--v { display: none; }
@media (max-width: 1023px) {
  .agente__svg--h { display: none; }
  .agente__svg--v { display: block; max-width: 360px; margin-inline: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .agente__cuerpo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gutter); align-items: center; }
}
.agente__ruta { fill: none; stroke: var(--hueso-2); stroke-opacity: .45; stroke-width: 1; }
.agente__flujo { fill: none; stroke: none; }
.agente__traza { fill: none; stroke: var(--senal); stroke-width: 2; }
.agente__marco { fill: none; stroke: var(--hueso-2); stroke-opacity: .6; stroke-dasharray: 4 5; }
.agente__nodo rect { fill: var(--vino); stroke: var(--hueso); stroke-width: 1; transition: stroke .35s, fill .35s; }
.agente__dibujo { fill: none; stroke: var(--hueso-2); stroke-width: 1; transition: stroke .35s; }
.agente__etq { font-family: var(--f-mono); font-size: 13px; font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; fill: var(--hueso); transition: fill .35s; }
.agente__sub { font-family: var(--f-mono); font-size: 11px; font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; fill: var(--hueso-2); }
.agente__etq--acento { fill: var(--fucsia-luz); }
.agente__nodo.is-activo rect { stroke: var(--fucsia-luz); fill: color-mix(in srgb, var(--fucsia-luz) 16%, var(--vino)); }
.agente__nodo.is-activo .agente__dibujo { stroke: var(--fucsia-luz); }
.agente__pulso { fill: var(--senal); opacity: 0; }
.agente__svg--v .agente__etq { font-size: 12px; }

.agente__registro { border-top: 1px solid var(--regla-vino); align-self: start; }
.agente__linea {
  position: relative; display: grid; grid-template-columns: 9ch minmax(0, 1fr); column-gap: 16px; align-items: baseline;
  padding: 12px 0 11px 18px; border-bottom: 1px solid var(--regla-vino); transition: color .35s;
}
.agente__linea::before { content: ""; position: absolute; left: 0; top: 19px; width: 7px; height: 7px; border: 1px solid var(--hueso-2); transition: background .3s, border-color .3s; }
.agente__k { color: var(--hueso); }
.agente__v { font-size: 1.0625rem; line-height: 1.4; }
@media (min-width: 1024px) {
  .agente__registro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: var(--gutter); border-top: 0; }
  .agente__linea:nth-child(1), .agente__linea:nth-child(4) { border-top: 1px solid var(--regla-vino); }
  .agente__linea { grid-template-columns: 10ch minmax(0, 1fr); }
}
html.js .agente.is-vivo .agente__linea:not(.is-visto) { color: var(--hueso-2); }
html.js .agente.is-vivo .agente__linea:not(.is-visto) .agente__k { color: var(--hueso-2); }
.agente__linea.is-visto::before { border-color: var(--hueso); background: var(--hueso); }
.agente__linea.is-actual::before { border-color: var(--fucsia-luz); background: var(--fucsia-luz); }
.agente__linea.is-actual .agente__k { color: var(--fucsia-luz); }
@media (max-width: 767px) {
  .agente__linea { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

/* PRINCIPIOS --------------------------------------------------------------- */
.principios__titulo { font-size: var(--t-h2); max-width: 19ch; }
.principios__titulo .nm { font-size: .3em; vertical-align: 1.3em; }
.principios__lista { border-top: 1px solid var(--c-fuerte); }
.principio {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 12px; align-items: baseline;
  padding-block: clamp(28px, 3.5vw, 52px); border-bottom: 1px solid var(--c-linea);
}
.principio > * { grid-column: 1 / -1; min-width: 0; }
.principio__frase { font-family: var(--f-display); font-size: clamp(2rem, 4.1vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; max-width: 22ch; }
@media (min-width: 1024px) {
  .principio > .principio__k { grid-column: 1 / 4; grid-row: 1; }
  .principio > .principio__frase { grid-column: 4 / 12; grid-row: 1; }
  .principio--der > .principio__k { grid-column: 10 / 13; text-align: right; }
  .principio--der > .principio__frase { grid-column: 2 / 10; }
}
.principio--crm { display: block; }
.principio--crm .par__texto .principio__k { margin-bottom: 12px; }
.principio--crm .principio__frase { font-family: var(--f-texto); font-style: italic; font-weight: 400; color: var(--fucsia); letter-spacing: -0.03em; font-size: clamp(2.3rem, 4.6vw, 4.5rem); }
.principio--crm .principio__frase .nm { font-size: .32em; vertical-align: 1.2em; font-style: normal; }

/* REMATE · Árbol en modo empresa ------------------------------------------ */
.remate__rejilla { row-gap: 48px; align-items: center; }
.remate__texto { --c: 1 / 6; }
.remate__h { font-size: clamp(2.3rem, 4vw, 3.9rem); line-height: 1; max-width: 14ch; }
.remate__p { margin-top: clamp(20px, 2.5vw, 32px); max-width: 38ch; color: var(--hueso); }
.remate__arbol { --c: 7 / 13; }
.remate .arbol { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ctr ctr" "lienzo meta"; column-gap: clamp(20px, 3vw, 40px); row-gap: 20px; }
.remate .arbol__controles { grid-area: ctr; }
.remate .arbol__lienzo { grid-area: lienzo; width: auto; height: clamp(440px, calc(100vh - 260px), 580px); }
.remate .arbol__meta { grid-area: meta; align-self: end; }
@media (max-width: 1279px) {
  .remate .arbol { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ctr" "lienzo" "meta"; }
  .remate .arbol__lienzo { justify-self: center; }
}
@media (max-width: 1023px) { .remate .arbol__lienzo { height: auto; width: min(100%, 400px); } }

/* CIERRE ------------------------------------------------------------------- */
.cierre-emp__h { --c: 1 / 11; font-size: clamp(2.6rem, 6.2vw, 6.2rem); line-height: .94; max-width: 17ch; }
.puertas { border-top: 1px solid var(--c-fuerte); }
.puertas li { border-bottom: 1px solid var(--c-linea); }
.puerta {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 6px; align-items: baseline;
  padding: clamp(20px, 2.4vw, 32px) 0; text-decoration: none; isolation: isolate; transition: color .3s;
}
.puerta::before { content: ""; position: absolute; inset: 0 calc(-1 * min(var(--margen), 24px)); background: var(--tinta); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .4s var(--ease); z-index: -1; }
.puerta:hover, .puerta:focus-visible { color: var(--papel); outline: none; }
.puerta:hover::before, .puerta:focus-visible::before { transform: scaleY(1); }
.puerta__k { grid-column: 1 / 4; color: var(--c-acento-texto); }
.puerta:hover .puerta__k, .puerta:focus-visible .puerta__k { color: var(--fucsia-luz); }
.puerta__t { grid-column: 4 / 11; font-family: var(--f-display); font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
.puerta__url { grid-column: 11 / 13; justify-self: end; transition: transform .35s var(--ease); }
.puerta:hover .puerta__url { transform: translate(3px, -3px); }
@media (max-width: 1023px) {
  .puerta__k { grid-column: 1 / -1; }
  .puerta__t { grid-column: 1 / 11; }
  .puerta__url { grid-column: 11 / 13; }
}
@media (max-width: 767px) {
  .puerta__t, .puerta__url { grid-column: 1 / -1; justify-self: start; }
}