/* ==========================================================================
   kabbalah.css · /kabbalah/ — la Cábala como trabajo intelectual
   hero (Tzimtzum en sección) · maestría · ideas · lo que no es · vídeos · puertas
   ========================================================================== */

/* HERO ---------------------------------------------------------------------- */
.kh { overflow-x: clip; padding-bottom: clamp(64px, 8vw, 128px); }
.kh__rejilla { row-gap: 48px; align-items: center; }
.kh__texto { --c: 1 / 7; --ct: 1 / 11; }
.kh__meta { color: var(--c-sec); max-width: 44ch; }
.kh__meta li + li { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-linea); }
.kh__h { margin-top: clamp(24px, 3vw, 40px); font-size: clamp(3rem, 6.2vw, 6.6rem); line-height: .95; max-width: 11ch; }
.kh__entradilla { margin-top: clamp(24px, 3vw, 40px); max-width: 34ch; }
.kh__nota { margin-top: 14px; }
@media (min-width: 1024px) { .kh__nota .nota__in { margin-left: clamp(0px, 6vw, 110px); max-width: 32ch; } }
.kh__enlaces { margin-top: clamp(28px, 3vw, 44px); }
.kh__fig { --c: 7 / 13; position: relative; }
@media (min-width: 1024px) { .kh__fig { margin-right: calc(-1 * min(var(--margen), 40px)); } }
.kh__leyenda { margin-top: 8px; max-width: 46ch; }
@media (max-width: 1023px) { .kh__fig { max-width: 560px; } }

.ks__svg { width: 100%; height: auto; overflow: visible; }
.ks__trama { stroke: var(--fucsia); stroke-width: 1; stroke-opacity: .6; }
.ks__borde { fill: none; stroke: var(--fucsia); stroke-width: 1.4; stroke-dasharray: 1; }
.ks__arco { fill: none; stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 1; }
.ks__he { font-family: var(--f-he); font-size: 19px; fill: var(--tinta); paint-order: stroke; stroke: var(--papel); stroke-width: 6px; stroke-linejoin: round; }
.ks__tr { font-family: var(--f-mono); font-size: 10.5px; font-stretch: 87.5%; letter-spacing: .08em; fill: var(--grafito); paint-order: stroke; stroke: var(--papel); stroke-width: 5px; stroke-linejoin: round; }
.ks__kav { stroke: var(--fucsia); stroke-width: 2.5; stroke-dasharray: 1; }
.ks__centro { fill: var(--fucsia); }
.ks__kav-t { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; fill: var(--fucsia-tinta); }
.ks__kav-t tspan { font-family: var(--f-he); font-size: 16px; letter-spacing: 0; }
.ks__ein rect { fill: var(--papel); stroke: var(--tinta); stroke-width: 1; }
.ks__ein-t { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; fill: var(--grafito); }
.ks__ein-he { font-family: var(--f-he); font-size: 21px; fill: var(--tinta); }
.ks__cota line { stroke: var(--grafito); stroke-width: 1; }
.ks__cota rect { fill: var(--papel); }
.ks__cota text { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; fill: var(--grafito); }
@media (max-width: 767px) {
  /* a 390 px el SVG se reduce a la mitad: fuera la letra mono pequeña, el hebreo crece */
  .ks__he { font-size: 27px; stroke-width: 8px; }
  .ks__tr, .ks__cota, .ks__ein-t, .ks__kav-t { display: none; }
  .ks__ein rect { y: 30px; height: 50px; width: 200px; }
  .ks__ein-he { font-size: 30px; }
}
/* trazado al entrar */
html.js .kh__fig:not(.is-in) .ks__arco, html.js .kh__fig:not(.is-in) .ks__borde, html.js .kh__fig:not(.is-in) .ks__kav { stroke-dashoffset: 1; }
html.js .kh__fig:not(.is-in) .ks__he, html.js .kh__fig:not(.is-in) .ks__tr { opacity: 0; }
.kh__fig .ks__arco { transition: stroke-dashoffset 1.3s var(--ease) calc(.3s + var(--i) * 70ms); }
.kh__fig .ks__borde { transition: stroke-dashoffset 1.6s var(--ease-io) .2s; }
.kh__fig .ks__kav { transition: stroke-dashoffset 1.4s var(--ease-io) 1.1s; }
.kh__fig .ks__he, .kh__fig .ks__tr { transition: opacity .6s calc(1s + var(--i) * 60ms); }

/* MAESTRÍA (vino) ------------------------------------------------------------ */
.km__h { --c: 1 / 10; max-width: 16ch; }
.km__rejilla { row-gap: 40px; align-items: start; }
.km__diploma { --c: 1 / 8; padding: clamp(8px, 1.4vw, 20px) 0; }
.km__hoja { background: #fff; padding: clamp(4px, .5vw, 8px); transform: rotate(-1.2deg); outline: 1px solid rgba(239, 233, 234, .25); outline-offset: 10px; transition: transform .8s var(--ease); }
.km__diploma:hover .km__hoja { transform: rotate(-.4deg) translateY(-3px); }
.km__trans { --c: 9 / 13; }
.km__trans-cab { color: var(--c-sec); margin-bottom: 10px; }
.km__ledger { border-top-color: var(--hueso); }
.km__ledger .ledger__fila { grid-template-columns: 9ch minmax(0, 1fr); padding-inline: 0; }
.km__ledger .ledger__v::after { display: none; }
.km__ledger .ledger__v { color: var(--hueso); }
.km__ledger .ledger__k { color: var(--hueso-2); font-weight: 400; }
.km__cita { margin-top: 24px; padding-left: 16px; border-left: 1px solid var(--fucsia-luz); font-style: italic; font-size: clamp(1.125rem, 1.4vw, 1.3rem); line-height: 1.45; color: var(--hueso); }
.km__cita footer { margin-top: 8px; font-style: normal; color: var(--hueso-2); font-size: .625rem; }
.km__par .texto p { font-size: clamp(1.1875rem, 1.35vw, 1.3125rem); }
@media (max-width: 1023px) { .km__trans { --ct: 1 / 11; } }
@media (max-width: 767px) { .km__ledger .ledger__fila { grid-template-columns: 1fr; } .km__ledger .ledger__v { grid-row: 2; } }

/* IDEAS ---------------------------------------------------------------------- */
.ke__h { --c: 1 / 10; max-width: 18ch; }
.idea { margin-top: clamp(72px, 10vw, 160px); }
.idea__etq { color: var(--c-acento-texto); }
.idea__etq::before { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; margin-right: 10px; transform: translateY(-4px); }
.idea__etq--linea { margin-bottom: 14px; }
@media (min-width: 1024px) { .idea > .margen.idea__etq { padding-top: 1.1em; } }
@media (max-width: 1023px) { .idea > .margen.idea__etq { margin-bottom: 14px; } }
.idea__h { font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1; max-width: 17ch; }
.idea__texto { margin-top: clamp(18px, 2vw, 26px); }
.idea__texto p { font-size: clamp(1.1875rem, 1.35vw, 1.3125rem); }

.idea__planos { margin-top: clamp(28px, 3vw, 40px); max-width: 720px; }
.idea__planos .ledger__fila { grid-template-columns: 10ch minmax(0, 1fr) auto; padding-inline: 0; }
.idea__planos .ledger__v { font-family: var(--f-texto); font-size: 1.125rem; letter-spacing: 0; gap: 10px; }
.idea__planos .ledger__v [lang="he"] { color: var(--c-sec); font-size: 1.1rem; }
.idea__planos .ledger__d { text-transform: none; font-family: var(--f-texto); font-style: italic; font-size: 1.0625rem; letter-spacing: 0; }
.idea__planos-fin .ledger__fila { color: var(--fucsia-tinta); border-bottom-color: var(--fucsia); }
.idea__planos-fin .ledger__v [lang="he"] { color: var(--fucsia-tinta); }
.idea__fuente { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.idea__fuente-q { font-style: italic; font-size: 1.0625rem; line-height: 1.45; max-width: 58ch; }
.idea__fuente .mono { color: var(--c-sec); font-size: .625rem; }
@media (max-width: 767px) {
  .idea__planos .ledger__fila { grid-template-columns: 1fr auto; }
  .idea__planos .ledger__v { grid-row: 1; grid-column: 2; justify-content: flex-end; }
  .idea__planos .ledger__d { grid-row: 2; grid-column: 1 / -1; text-align: left; font-size: 1rem; }
}

.idea__par { margin-top: clamp(32px, 4vw, 56px); row-gap: 28px; }
.idea__q { --c: 4 / 8; --ct: 1 / 7; position: relative; }
.idea__q--guevura { --c: 8 / 12; --ct: 7 / 13; }
@media (min-width: 768px) { .idea__q--guevura { border-left: 1px solid var(--c-fuerte); padding-left: var(--gutter); } }
@media (max-width: 767px) { .idea__q--guevura { border-top: 1px solid var(--c-fuerte); padding-top: 20px; } }
.idea__q-he { font-family: var(--f-he); font-size: clamp(3.6rem, 6.4vw, 6.2rem); line-height: 1; color: var(--fucsia); text-align: left; }
.idea__q-k { margin-top: 10px; color: var(--c-sec); }
.idea__q-t { margin-top: 10px; font-style: italic; font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.25; max-width: 22ch; }
.idea__q-pie { margin-top: 10px; color: var(--c-sec); font-size: .625rem; }

.idea--centro { row-gap: 48px; align-items: center; }
.idea__t3 { --c: 1 / 8; --ct: 1 / 11; }
.idea__dicho { margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--c-fuerte); padding-top: 14px; font-family: var(--f-texto); font-style: italic; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.3; color: var(--c-acento-texto); max-width: 30ch; }
.eje { --c: 9 / 13; --ct: 1 / 9; position: relative; display: flex; flex-direction: column; padding-left: 8px; }
.eje__nodo { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 18px; align-items: center; }
.eje__he { grid-column: 1; grid-row: 1; justify-self: center; font-size: clamp(2.2rem, 2.9vw, 2.75rem); line-height: 1; padding: 6px 0; white-space: nowrap; }
.eje__t { grid-column: 2; color: var(--c-texto); line-height: 1.4; }
.eje__sub { text-transform: none; letter-spacing: .01em; color: var(--c-sec); font-family: var(--f-texto); font-style: italic; font-size: 1.0625rem; }
.eje__tramo { position: relative; height: clamp(120px, 14vw, 200px); margin-left: calc(4.25rem - .5px); border-left: 1px dashed var(--grafito); }
.eje__cota { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--c-sec); font-size: .625rem; }
.eje__nodo--tiferet .eje__he { color: var(--fucsia); }
.eje__aqui { grid-column: 2; margin-top: 8px; color: var(--senal); font-size: .625rem; display: flex; align-items: center; gap: 8px; }
.eje__aqui::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--senal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--senal) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) { .eje__aqui::before { animation: eje-aqui 2.4s var(--ease) infinite; } }
@keyframes eje-aqui { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--senal) 50%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

.idea__regla { margin-top: clamp(24px, 3vw, 36px); padding-top: 14px; border-top: 1px solid var(--fucsia); font-style: italic; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.2; color: var(--fucsia-tinta); max-width: 26ch; }
.idea__regla p::before { content: "«"; } .idea__regla p::after { content: "»"; }

/* LO QUE NO ES --------------------------------------------------------------- */
.kn__h { --c: 1 / 10; font-size: clamp(3.2rem, 8vw, 8rem); line-height: .9; letter-spacing: -0.035em; }
.kn__lista { border-top: 1px solid var(--c-fuerte); }
.kn__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 6px; align-items: baseline; padding: clamp(18px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--c-linea); }
.kn__pre { grid-column: 1 / 4; color: var(--c-sec); }
.kn__palabra { grid-column: 4 / 10; font-family: var(--f-display); font-size: clamp(2.3rem, 4.3vw, 4.4rem); line-height: 1; letter-spacing: -0.025em; }
.kn__palabra s { position: relative; text-decoration: none; }
.kn__palabra s::after { content: ""; position: absolute; left: -.05em; right: -.05em; top: 52%; height: max(3px, .06em); background: var(--fucsia); transform-origin: 0 50%; transition: transform .7s var(--ease) .3s; }
html.js .kn__item:not(.is-in) .kn__palabra s::after { transform: scaleX(0); }
.kn__com { grid-column: 10 / 13; font-style: italic; color: var(--c-acento-texto); font-size: 1.0625rem; line-height: 1.4; }
.kn__com .enlace-mono { display: inline-block; margin-top: 6px; font-style: normal; color: var(--c-texto); }
@media (max-width: 1023px) {
  /* si la palabra parte en dos líneas, el tachado debe seguirla */
  .kn__palabra s { text-decoration: line-through; text-decoration-color: var(--fucsia); text-decoration-thickness: .07em; }
  .kn__palabra s::after { display: none; }
  .kn__pre { grid-column: 1 / -1; }
  .kn__palabra { grid-column: 1 / -1; }
  .kn__com { grid-column: 1 / -1; max-width: 44ch; margin-top: 4px; }
}

/* VÍDEOS (vino) -------------------------------------------------------------- */
.kv__h { max-width: 15ch; }
.kv__h .nm { font-size: .32em; vertical-align: 1.1em; }
.kv__rejilla { row-gap: 40px; align-items: start; }
.kv__video { --c: 1 / 9; }
.kv__leyenda { margin-top: 12px; }
.kv__lado { --c: 9 / 13; --ct: 1 / 10; }
.kv__lado-cab { color: var(--hueso-2); padding-bottom: 10px; border-bottom: 1px solid var(--hueso); }
.kv__niveles li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 14px 0 13px; border-bottom: 1px solid var(--regla-vino); }
.kv__nivel { font-family: var(--f-display); font-size: clamp(1.4rem, 1.9vw, 1.8rem); line-height: 1.05; }
.kv__sf { grid-column: 2; grid-row: 1; color: var(--hueso-2); align-self: center; }
.kv__q { grid-column: 1 / -1; font-style: italic; color: var(--fucsia-luz); font-size: 1.0625rem; }
.kv__fuente { margin-top: 12px; color: var(--hueso-2); font-size: .625rem; }
.kv__canal { margin-top: 28px; }

/* PUERTAS -------------------------------------------------------------------- */
.kp__h { --c: 1 / 10; max-width: 18ch; }
.puertas { border-top: 1px solid var(--c-fuerte); }
.puertas li { border-bottom: 1px solid var(--c-linea); }
.puertas__a {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 4px; align-items: baseline;
  padding: clamp(18px, 2.2vw, 28px) 0; text-decoration: none; isolation: isolate; transition: color .3s;
}
.puertas__a::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; }
.puertas__a:hover, .puertas__a:focus-visible { color: var(--papel); outline: none; }
.puertas__a:hover::before, .puertas__a:focus-visible::before { transform: scaleY(1); }
.puertas__k { grid-column: 1 / 4; color: var(--c-sec); transition: color .3s; }
.puertas__a:hover .puertas__k, .puertas__a:focus-visible .puertas__k { color: var(--hueso-2); }
.puertas__t { grid-column: 4 / 8; font-family: var(--f-display); font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; }
.puertas__d { grid-column: 8 / 12; font-size: 1.0625rem; line-height: 1.4; }
.puertas__fl { grid-column: 12 / 13; justify-self: end; font-family: var(--f-mono); font-size: 1.25rem; transition: transform .35s var(--ease); }
.puertas__a:hover .puertas__fl, .puertas__a:focus-visible .puertas__fl { transform: translateX(6px); color: var(--fucsia-luz); }
@media (max-width: 1023px) {
  .puertas__a { grid-template-columns: minmax(0, 1fr) auto; }
  .puertas__k, .puertas__t, .puertas__d { grid-column: 1 / 2; }
  .puertas__fl { grid-column: 2; grid-row: 2; }
}