/* TikkunLäb — hoja de estilos única. Derivada del Manual de Identidad Visual,
   Edición 01 · 2026. Sin dependencias, sin preprocesador. */

:root {
  /* Color — cap. 11 del manual */
  --tinta: #0D0D0D;
  --papel: #FFFFFF;
  --gris: #6B6862;
  --hairline: #E6E4E0;
  --gris-tenue: #F2F1EE;

  /* Paleta de unidades — oklch(0.58 0.14 H) */
  --h40:  oklch(0.58 0.14 40);   /* marca madre */
  --h70:  oklch(0.58 0.14 70);
  --h100: oklch(0.58 0.14 100);  /* Projects */
  --h155: oklch(0.58 0.14 155);  /* Tools */
  --h195: oklch(0.58 0.14 195);
  --h250: oklch(0.58 0.14 250);  /* Knowledge */
  --h300: oklch(0.58 0.14 300);  /* Methods */
  --h340: oklch(0.58 0.14 340);

  /* Tipografía — cap. 12 */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Retícula — cap. 13 */
  --ancho: 1240px;
  --gutter: 24px;
  --seccion: 84px;
  --curva: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--mono);
  font-weight: 400;
  text-wrap: pretty;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tinta); text-decoration: none; }
a:hover { color: var(--h40); }
:focus-visible { outline: 2px solid var(--h40); outline-offset: 3px; }
::selection { background: var(--h40); color: var(--papel); }

/* ————— utilidades de composición ————— */
.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); overflow-x: clip; }
.section { padding: var(--seccion) 0; border-bottom: 1px solid var(--hairline); }
.eyebrow { font-size: 12px; letter-spacing: 0.14em; color: var(--gris); margin: 0 0 40px; }
.lead { font-size: 15.5px; line-height: 1.75; margin: 0; }
.muted { color: var(--gris); }

/* ————— botones ————— */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 15px 26px;
  border: 1px solid var(--tinta);
  cursor: pointer;
  transition: background 160ms var(--curva), color 160ms var(--curva);
}
.btn-solid { background: var(--tinta); color: var(--papel); }
.btn-solid:hover { background: var(--h40); color: var(--papel); }
.btn-outline { background: transparent; color: var(--tinta); }
.btn-outline:hover { background: var(--gris-tenue); color: var(--tinta); }
.btn-methods:hover { background: var(--h300); }

/* ————— cabecera ————— */
.topnav {
  position: sticky; top: 0; z-index: 20;
  background: var(--papel);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 28px;
  padding: 18px max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter)));
}
.mark { display: flex; align-items: center; gap: 14px; margin-right: auto; color: var(--tinta); }
.mark:hover .wordmark { color: var(--h40); }
.isotype { display: flex; align-items: center; gap: 11px; }
.isotype .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--tinta); flex: none; }
.isotype .bar { width: 46px; height: 22px; background: var(--h40); border-radius: 11px; } /* forma del isótipo tal como aparece en las cubiertas definitivas */
.wordmark { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; }
.wordmark .dieresis { color: var(--h40); }
.navlink { font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
.navcta { font-size: 12px; letter-spacing: 0.04em; font-weight: 600; border: 1px solid var(--tinta); padding: 10px 16px; }
.navcta:hover { background: var(--tinta); color: var(--papel); }

/* Movimiento — cap. 15: reposo → tensión → acción, 1,6 s, sin repetición */
@keyframes tension { 0% { width: 46px; } 45% { width: 22px; } 100% { width: 46px; } }
.mark:hover .isotype .bar { animation: tension 1.6s var(--curva); }
@media (prefers-reduced-motion: reduce) { .mark:hover .isotype .bar { animation: none; } }

/* ————— hero ————— */
.hero { padding: 108px 0 92px; border-bottom: 1px solid var(--hairline); }
.hero .eyebrow { margin-bottom: 42px; }
.h1 {
  font-size: clamp(40px, 7vw, 92px);
  font-weight: 500; line-height: 1.04; letter-spacing: -0.026em;
  margin: 0; max-width: 20ch;
}
.accent { color: var(--h40); }
.hero-copy {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px 64px; margin-top: 56px; max-width: 980px;
}
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 48px; }

/* ————— 01 principio rector ————— */
.rhythm { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 34px 24px; }
.rhythm-mark { display: flex; align-items: center; gap: 8px; height: 14px; margin-bottom: 20px; }
.rhythm-mark .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--tinta); flex: none; }
.rhythm-mark .line { height: 3px; background: var(--hairline); flex: 1; }
.num { font-size: 12px; letter-spacing: 0.1em; color: var(--gris); margin: 0 0 10px; }
.h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 10px; }
.note { font-size: 14px; line-height: 1.65; margin: 0; color: var(--gris); }

/* ————— tesis ————— */
.tesis { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; }
.h2-display { font-size: clamp(28px, 4.4vw, 54px); font-weight: 500; line-height: 1.1; letter-spacing: -0.026em; margin: 0; max-width: 24ch; }
.tesis-side { align-self: end; }
.stamp { font-size: 13px; letter-spacing: 0.04em; color: var(--gris); margin: 18px 0 0; }

/* ————— 02 unidades de negocio ————— */
.units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.unit { background: var(--papel); padding: 34px 30px 38px; display: flex; flex-direction: column; gap: 14px; }
.unit-mark { display: flex; align-items: center; gap: 11px; }
.unit-mark .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--tinta); }
.unit-mark .bar { width: 34px; height: 16px; }
.unit-tone { font-size: 11.5px; letter-spacing: 0.12em; color: var(--gris); margin: 12px 0 0; }
.unit-name { font-size: 22px; font-weight: 500; letter-spacing: -0.022em; margin: 0; }
.unit-copy { font-size: 14px; line-height: 1.7; margin: 0; }
.unit-examples { font-size: 12.5px; line-height: 1.7; margin: 6px 0 0; color: var(--gris); }
.bar-h250 { background: var(--h250); }
.bar-h155 { background: var(--h155); }
.bar-h300 { background: var(--h300); }
.bar-h100 { background: var(--h100); }

/* ————— 03 motor ————— */
.motor-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px 64px; margin-bottom: 56px; }
.h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 500; line-height: 1.14; letter-spacing: -0.024em; margin: 0; }
.motor-head .lead { align-self: end; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 44px 32px; }
.step-mark { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.step-mark .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--h40); flex: none; }
.step-mark .line { height: 1px; background: var(--hairline); flex: 1; }
.step-title { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 10px; }
.step-copy { font-size: 13.5px; line-height: 1.7; margin: 0; color: var(--gris); }

/* ————— 04 primer producto ————— */
.product { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 44px clamp(32px, 6vw, 96px); align-items: center; }
.product .h2 { margin-bottom: 24px; max-width: 24ch; }
.product .lead { margin-bottom: 22px; max-width: 50ch; }
.formats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chip { font-size: 11.5px; letter-spacing: 0.08em; padding: 8px 14px; border: 1px solid var(--hairline); color: var(--gris); }
.chip-on { border-color: var(--tinta); color: var(--tinta); }
.cover { margin: 0; width: min(420px, 100%); justify-self: end; border: 1px solid var(--hairline); }
.cover img { display: block; width: 100%; height: auto; }
.cover-placeholder {
  aspect-ratio: 3 / 4; display: grid; place-content: center; text-align: center;
  padding: 24px; font-size: 12px; letter-spacing: 0.08em; color: var(--gris);
  background: var(--gris-tenue);
}

/* ————— 05 verticales ————— */
.verticals { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 14px 32px; }
.vertical { display: flex; align-items: baseline; gap: 12px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.vertical .idx { font-size: 11.5px; color: var(--gris); letter-spacing: 0.08em; }
.vertical .name { font-size: 14px; line-height: 1.5; }

/* ————— 06 newsletter ————— */
.newsletter { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 64px; }
.newsletter .h2 { margin-bottom: 20px; max-width: 22ch; }
.signup { align-self: end; display: flex; flex-direction: column; gap: 14px; max-width: 420px; width: 100%; }
.input {
  font-family: inherit; font-size: 15px; padding: 15px 16px;
  border: 1px solid var(--tinta); background: var(--papel); color: var(--tinta); min-height: 48px;
}
.input::placeholder { color: var(--gris); }
.signup .btn { min-height: 48px; }
.signup-note { font-size: 12.5px; line-height: 1.6; margin: 0; color: var(--gris); }

/* ————— pie ————— */
.footer { padding: 56px 0 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 48px; align-items: start; }
.footer p { margin: 0; }
.footer .claim { font-size: 13px; letter-spacing: 0.02em; }
.footer .meta { font-size: 12px; letter-spacing: 0.06em; color: var(--gris); }
.footer .edition { justify-self: end; }

/* ————— breakpoints ————— */
@media (max-width: 1139px) { .units { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .topnav .navlink { display: none; }
  .tesis, .product, .newsletter, .motor-head { grid-template-columns: 1fr; }
  .cover { order: -1; justify-self: start; }
  .tesis-side, .signup, .motor-head .lead { align-self: start; }
  :root { --seccion: 68px; }
  .hero { padding: 76px 0 68px; }
}
@media (max-width: 639px) {
  .units { grid-template-columns: minmax(0, 1fr); }
  .footer .edition { justify-self: start; }
}


/* ═══════════════════════════════════════════════════════════════════
   CAPA DE LANDING DE PRODUCTO — /cabala y /kabbalah
   Misma retícula, mismos tokens. Sólo añade patrones que la home no usa.
   ═══════════════════════════════════════════════════════════════════ */

/* Cinta de idioma / migas */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 18px 0; font-size: 11.5px; letter-spacing: 0.08em; color: var(--gris); }
.crumbs a { color: var(--gris); }
.crumbs a:hover { color: var(--h40); }
.crumbs .sep { color: var(--hairline); }
.crumbs .current { color: var(--tinta); }

/* Hero de producto: copy + portada cuadrada */
.phero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(32px, 6vw, 88px); align-items: center; padding: 64px 0 84px; border-bottom: 1px solid var(--hairline); }
.phero .h1 { font-size: clamp(34px, 5.2vw, 62px); max-width: 22ch; }
.phero .lead { margin-top: 28px; max-width: 52ch; }
.pcover { margin: 0; width: 100%; max-width: 460px; justify-self: end; border: 1px solid var(--hairline); }
.pcover img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.pcover figcaption { font-size: 11.5px; letter-spacing: 0.08em; color: var(--gris); padding: 12px 14px; border-top: 1px solid var(--hairline); }

/* Bloque de dos columnas reutilizable (problema, para quién, etc.) */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px 64px; }
.duo-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.duo .lead + .lead { margin-top: 20px; }

/* Diagrama de flujo vertical — CARTOGRAFÍA INTERIOR */
.flow { display: grid; gap: 0; max-width: 720px; }
.flow-step { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; }
.flow-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.flow-rail .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--tinta); flex: none; margin-top: 5px; }
.flow-rail .dot-accent { background: var(--h300); }
.flow-rail .stem { width: 1px; flex: 1; min-height: 34px; background: var(--hairline); }
.flow-body { padding-bottom: 30px; }
.flow-num { font-size: 11.5px; letter-spacing: 0.1em; color: var(--gris); margin: 0 0 8px; }
.flow-title { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; }
.flow-copy { font-size: 14px; line-height: 1.7; margin: 0; color: var(--gris); }

/* Listas de contenido */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 48px; }
.checklist li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start; border-top: 1px solid var(--hairline); padding: 16px 0; font-size: 14.5px; line-height: 1.65; }
.checklist li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--h300); margin-top: 7px; }

/* Ejemplo práctico — bloque enmarcado */
.example { border: 1px solid var(--hairline); padding: clamp(24px, 4vw, 44px); }
.example-label { font-size: 11.5px; letter-spacing: 0.12em; color: var(--gris); margin: 0 0 22px; }
.example-case { font-size: clamp(19px, 2.4vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 28px; max-width: 34ch; }
.example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px 40px; }
.example-grid h4 { font-size: 12px; letter-spacing: 0.1em; color: var(--gris); font-weight: 400; margin: 0 0 10px; }
.example-grid p { font-size: 14px; line-height: 1.7; margin: 0; }

/* Es / no es */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.pair > div { background: var(--papel); padding: 30px; }
.pair h3 { font-size: 12px; letter-spacing: 0.12em; color: var(--gris); font-weight: 400; margin: 0 0 20px; }
.pair ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pair li { font-size: 14.5px; line-height: 1.6; display: grid; grid-template-columns: 22px 1fr; }
.pair li::before { font-size: 13px; color: var(--gris); }
.pair-yes li::before { content: "+"; color: var(--h155); }
.pair-no li::before { content: "—"; }

/* Ficha de producto y compra */
.buy { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 64px; align-items: start; border: 1px solid var(--tinta); padding: clamp(26px, 4vw, 48px); }
.specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.specs li { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--hairline); padding: 13px 0; font-size: 13.5px; }
.specs li:first-child { border-top: 0; padding-top: 0; }
.specs .k { color: var(--gris); letter-spacing: 0.04em; }
.buy-actions { display: grid; gap: 14px; }
.buy-note { font-size: 12.5px; line-height: 1.6; color: var(--gris); margin: 0; }

/* CTA de cierre */
.closing { padding: var(--seccion) 0; }
.closing .h2-display { margin-bottom: 32px; }

@media (max-width: 900px) {
  .phero, .duo, .duo-wide, .buy { grid-template-columns: 1fr; }
  .phero { padding: 40px 0 60px; gap: 34px; }
  .pcover { justify-self: start; order: -1; max-width: 340px; }
  .flow-step { grid-template-columns: 40px 1fr; gap: 16px; }
}

/* v1.1 conversion refinements */
.value-line {
  max-width: 720px;
  margin: 22px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--h300);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.8;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.faq-item {
  padding: 34px 32px;
}

.faq-item + .faq-item {
  border-left: 1px solid var(--line);
}

.faq-item h3 {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.closing-copy {
  max-width: 760px;
  margin: 28px 0 34px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

@media (max-width: 820px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-item + .faq-item { border-left: 0; border-top: 1px solid var(--line); }
  .value-line { font-size: 14px; }
}



/* v1.3 product video */
.product-video .video-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px 64px;
  align-items: end;
  margin-bottom: 34px;
}
.product-video .video-intro .h2,
.product-video .video-intro .lead { margin: 0; }
.video-frame {
  border: 1px solid var(--hairline);
  background: #000;
  width: 100%;
  overflow: hidden;
}
.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
@media (max-width: 900px) {
  .product-video .video-intro { grid-template-columns: 1fr; gap: 14px; }
}