/* innovaycree.cl — piezas propias sobre «La pizarra» (9 oct 2026).
   Solo tokens del sistema (--e-*): ⛔ no se inventan colores aquí. */

/* ---------- héroe con el diagrama del agente a la derecha ---------- */
.cl-heroe { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.cl-heroe .pz-heroe__in h1 { font-size: clamp(40px, 5vw, 70px); max-width: 15ch; }
.cl-heroe .pz-heroe__lead { font-size: clamp(18px, 1.6vw, 21px); }
.pz-heroe:has(.cl-heroe) { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 90px); }
.cl-heroe__flujo { min-width: 0; }
.cl-heroe__flujo .flujo { max-width: 560px; margin-inline: auto; }
@media (max-width: 900px) { .cl-heroe { grid-template-columns: 1fr; } }

/* ---------- la demo dentro de la página ---------- */
.cl-demo__cab { display: grid; gap: 16px; margin-bottom: 26px; }
.cl-demo__invita { margin: 0 0 12px; font-size: 19px; }
.cl-demo .dm .app { max-width: none; }

/* ---------- tres piezas ---------- */
.cl-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.cl-tres article, .cl-pieza { border: 1px solid var(--e-line); border-radius: var(--e-radio); background: var(--e-panel); padding: 26px; display: grid; gap: 10px; align-content: start; }
.cl-tres h3, .cl-pieza h3 { font-size: 23px; font-weight: 800; line-height: 1.15; }
.cl-tres p, .cl-pieza p { color: var(--e-text-2); font-size: 16px; }
.cl-tres a { font-weight: 700; color: var(--e-amber); margin-top: 4px; }
.cl-pieza__k, .cl-area__ley, .cl-oblig__ley { font-family: var(--e-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--e-amber); }

/* ---------- áreas ---------- */
.cl-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.cl-area { border: 1px solid var(--e-line); border-radius: var(--e-radio); background: var(--e-panel); padding: 24px; display: grid; gap: 10px; align-content: start;
  color: var(--e-text); text-decoration: none; transition: border-color var(--e-dur-ui) var(--e-ease-firme), transform var(--e-dur-ui) var(--e-ease-firme); }
.cl-area:hover { border-color: var(--e-amber); transform: translateY(-3px); }
.cl-area h3 { font-size: 24px; font-weight: 800; line-height: 1.1; }
.cl-area p { color: var(--e-text-2); font-size: 16px; }
.cl-area__ir { font-weight: 700; color: var(--e-amber); }

/* ---------- garantías ---------- */
.cl-garantias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px; }
.cl-garantias > div { padding: 22px 24px 26px; border-left: 2px solid var(--e-linea-tiza); display: grid; gap: 8px; align-content: start; }
.cl-garantias h3 { font-size: 20px; font-weight: 800; }
.cl-garantias p { color: var(--e-text-2); font-size: 16px; }

/* ---------- páginas de área ---------- */
.cl-h1-area { font-size: clamp(40px, 6.4vw, 88px) !important; max-width: 17ch !important; }
.cl-obligs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.cl-oblig { border: 1px solid var(--e-line); border-radius: var(--e-radio); padding: 24px; background: var(--e-panel); display: grid; gap: 10px; align-content: start; }
.cl-oblig h3 { font-size: 22px; font-weight: 800; line-height: 1.15; }
.cl-oblig p { color: var(--e-text-2); font-size: 16px; }
.cl-oblig .pz-fuente { color: var(--e-muted); font-size: 13px; }
.cl-dolor { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.cl-dolor__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cl-dolor__lista li { padding: 18px 0 18px 34px; border-bottom: 1px dashed var(--e-linea-tiza); position: relative; color: var(--e-text-2); font-size: 18px; }
.cl-dolor__lista li::before { content: "✕"; position: absolute; left: 4px; top: 18px; color: var(--e-red); font-weight: 700; }
.cl-piezas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.cl-no { margin-top: 34px; border: 1px dashed var(--e-linea-tiza); border-radius: var(--e-radio); padding: 24px 26px; }
.cl-no h3 { font-family: var(--e-mano); font-weight: 700; font-size: 24px; color: var(--e-amber); }
.cl-no ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--e-text-2); }

/* ---------- reloj de plazos (simulación con fechas reales calculadas al cargar) ---------- */
.cl-reloj { margin-top: 34px; border: 1px solid var(--e-line); border-radius: var(--e-radio); background: var(--e-bg-raise); padding: clamp(18px, 3vw, 30px); }
.cl-reloj__btn { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 var(--e-sans); padding: 16px 24px; border-radius: 999px; border: 0;
  background: var(--e-amber); color: var(--e-on-amber); cursor: pointer; }
.cl-reloj__btn:hover { background: var(--e-amber-hi); }
.cl-reloj__btn[aria-pressed="true"] { background: transparent; color: var(--e-text); box-shadow: inset 0 0 0 1.5px var(--e-linea-tiza); }
.cl-reloj__linea { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); position: relative; }
.cl-reloj__linea::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--e-linea-tiza); }
.cl-reloj__linea::after { content: ""; position: absolute; left: 0; top: 11px; height: 2px; width: var(--avance, 0%); background: var(--e-amber); transition: width 1.6s var(--e-ease-trazo); }
.cl-reloj__hito { position: relative; padding: 36px 16px 0 0; display: grid; gap: 6px; align-content: start; opacity: .35; transition: opacity .5s var(--e-ease-salida); }
.cl-reloj__hito::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--e-bg); border: 2px solid var(--e-linea-tiza); transition: all .4s; z-index: 1; }
.cl-reloj__hito.is-on { opacity: 1; }
.cl-reloj__hito.is-on::before { border-color: var(--e-amber); background: var(--e-amber); box-shadow: 0 0 0 6px rgba(var(--e-amber-rgb), .16); }
.cl-reloj__cuando { font-family: var(--e-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--e-muted); }
.cl-reloj__fecha { font-family: var(--e-display); font-weight: 800; font-size: clamp(18px, 1.55vw, 22px); color: var(--e-text); font-variant-numeric: tabular-nums; }
.cl-reloj__t { font-weight: 700; color: var(--e-text); }
.cl-reloj__s { color: var(--e-text-2); font-size: 15px; }
.cl-reloj__resumen { margin-top: 22px; font-family: var(--e-mano); font-weight: 700; font-size: 21px; color: var(--e-amber); min-height: 1.4em; }
@media (max-width: 760px) {
  .cl-reloj__linea { grid-template-columns: 1fr; gap: 18px; }
  .cl-reloj__linea::before, .cl-reloj__linea::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .cl-reloj__linea::after { height: var(--avance, 0%); bottom: auto; transition: height 1.6s var(--e-ease-trazo); }
  .cl-reloj__hito { padding: 0 0 0 34px; }
  .cl-reloj__hito::before { top: 2px; }
}

/* ---------- páginas de texto (plataformas, cómo trabajamos, directivos, nosotros) ---------- */
.cl-bloque { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-block: 34px; border-top: 1px dashed var(--e-linea-tiza); }
.cl-bloque:first-of-type { border-top: 0; }
.cl-bloque h2, .cl-bloque h3.cl-bloque__t { font-size: clamp(28px, 3.4vw, 40px); font-weight: 820; line-height: 1.06; }
.cl-bloque__txt { display: grid; gap: 14px; color: var(--e-text-2); font-size: 18px; }
.cl-bloque__txt strong { color: var(--e-text); }
.cl-bloque__txt ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.cl-pasos { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 0; counter-reset: paso; }
.cl-pasos > li { counter-increment: paso; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 20px; padding: 24px 0; border-top: 1px dashed var(--e-linea-tiza); }
.cl-pasos > li::before { content: counter(paso); grid-row: span 3; font-family: var(--e-display); font-weight: 860; font-size: 44px; line-height: 1; color: var(--e-amber); }
.cl-pasos h3 { font-size: 24px; font-weight: 800; }
.cl-pasos p { color: var(--e-text-2); }
.cl-pasos .cl-pasos__entrega { font-family: var(--e-mono); font-size: 13px; color: var(--e-muted); }
.cl-pasos .cl-pasos__entrega b { color: var(--e-green); font-weight: 500; }

/* ---------- agenda ---------- */
.cl-agenda-lista { margin: 18px 0; padding-left: 20px; display: grid; gap: 8px; color: var(--e-text-2); }
.cl-agenda-otros { margin-top: 16px; font-size: 15px; color: var(--e-muted); }
.cl-agenda-otros a { color: var(--e-amber); font-weight: 700; }

@media (max-width: 960px) {
  .cl-tres, .cl-areas { grid-template-columns: 1fr 1fr; }
  .cl-garantias { grid-template-columns: 1fr 1fr; row-gap: 18px; }
}
@media (max-width: 680px) {
  .cl-tres, .cl-areas, .cl-obligs, .cl-piezas, .cl-garantias, .cl-dolor, .cl-bloque { grid-template-columns: 1fr; }
}
.cl-demo .pz-wrap { max-width: 1280px; }
/* respiro entre rótulo, título y bajada (en el .com lo ponen en línea, página por página) */
.pz-sec .pz-rot + .pz-h2 { margin-top: 14px; }
.pz-sec .pz-h2 + .pz-lead { margin-top: 18px; }
/* tablero en celular: la tabla de obligaciones se desliza; se avisa (auditor fresco, 9 oct) */
@media (max-width: 700px) {
  .cl-demo .dm .tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cl-demo .dm .tbl::before { content: "← deslice para ver vencimiento, evidencia y estado →"; display: block; font: 12px/1.4 var(--e-mono); color: var(--e-amber); margin: 0 0 8px; }
}

/* Ficha de la empresa (12 oct 2026): los datos que revisa un área de compras, en un solo lugar */
.cl-ficha { margin-top: 32px; border: 1px solid var(--e-line); border-radius: var(--e-radio); background: var(--e-panel); display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.cl-ficha dt, .cl-ficha dd { margin: 0; padding: 16px 22px; border-top: 1px solid var(--e-line); }
.cl-ficha dt:first-of-type, .cl-ficha dt:first-of-type + dd { border-top: 0; }
.cl-ficha dt { font-family: var(--e-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--e-amber); padding-top: 19px; }
.cl-ficha dd { color: var(--e-text); font-size: 17px; overflow-wrap: anywhere; }
.cl-ficha dd small { display: block; color: var(--e-text-2); font-size: 15px; margin-top: 4px; }
.cl-ficha dd a, .cl-ficha__nota a { color: var(--e-amber); text-decoration: underline; text-underline-offset: 3px; }
.cl-ficha__nota { margin-top: 18px; color: var(--e-text-2); max-width: 70ch; }
@media (max-width: 640px) { .cl-ficha { grid-template-columns: 1fr; } .cl-ficha dd { border-top: 0; padding-top: 0; } .cl-ficha dt { padding-bottom: 6px; } }