/* ============================================================
   GUSUKU — kyudokan-v3 vuelta 3
   Okinawa, no Japón-genérico: muros de gusuku encalados sobre
   coral, teja roja, mar Kerama. La isla como prueba del linaje.
   ============================================================ */

@font-face {
  font-family: 'Shippori Mincho';
  src: url('assets/fonts/shippori-mincho-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Zen Kaku';
  src: url('assets/fonts/zen-kaku-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Zen Kaku';
  src: url('assets/fonts/zen-kaku-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --cal: #e9e1d0;        /* encalado, fondo general */
  --cal-2: #d9cfba;      /* revoque en sombra, bandas */
  --hueso: #f6f1e6;      /* paspartú de retratos */
  --tinta: #2a2520;      /* texto, casi negro cálido */
  --tinta-2: #5c5347;    /* texto secundario */
  --teja: #a63e1c;       /* techos rojos, sellos, flourish */
  --curso-teja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='11'%3E%3Cpath d='M0 0 H26 V3 A13 8.5 0 0 1 0 3 Z' fill='%23a63e1c'/%3E%3C/svg%3E");
  --mar: #0e668c;        /* mar Kerama, enlaces */
  --pelo: rgba(42, 37, 32, 0.25);
  --sombra: 0 2px 14px rgba(42, 37, 32, 0.16), 0 10px 34px rgba(42, 37, 32, 0.10);
  /* escala tipográfica por rol: display, título, sección, cuerpo, secundario */
  --fs-display: clamp(52px, 9vw, 104px);
  --fs-titulo: clamp(28px, 4.5vw, 42px);
  --fs-h2: 28px;
  --fs-cuerpo: 16.5px;
  --fs-label: 12.5px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* entrada del home: el muro se asienta */
@keyframes posar-izq {
  from { opacity: 0; transform: translateY(-16px) rotate(-3deg); }
  60% { opacity: 1; transform: translateY(2px) rotate(1.5deg); }
  to { opacity: 1; transform: none; }
}
@keyframes posar-der {
  from { opacity: 0; transform: translateY(-16px) rotate(3deg); }
  60% { opacity: 1; transform: translateY(2px) rotate(-1.5deg); }
  to { opacity: 1; transform: none; }
}
.shisa-izq { animation: posar-izq .7s cubic-bezier(.2, .7, .3, 1.15) .15s backwards; }
.shisa-der { animation: posar-der .7s cubic-bezier(.2, .7, .3, 1.15) .3s backwards; }
/* descubrimiento: los guardianes vigilan */
.shisa { transition: transform .35s ease; transform-origin: bottom center; }
.shisa-izq:hover { transform: rotate(-2.5deg); }
.shisa-der:hover { transform: rotate(2.5deg); }
/* caligrafa: trazo de pincel al entrar */
.callig {
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: mask-position 1.1s cubic-bezier(.25, .6, .25, 1), -webkit-mask-position 1.1s cubic-bezier(.25, .6, .25, 1);
}
.callig.trazado {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .shisa { animation: none; }
  .callig, .callig.trazado { -webkit-mask-image: none; mask-image: none; transition: none; }
  .callig-wrap .accion .cinturon { transition: none; }
  .callig-wrap .accion a, .callig-wrap .accion a .alza { transition: none; }
  .callig-wrap .accion a:hover, .callig-wrap .accion a:hover .alza { transform: none; }
}

body {
  font-family: 'Zen Kaku', sans-serif;
  font-weight: 400;
  color: var(--tinta);
  background: var(--cal) url('assets/texturas/encalado.jpg') repeat;
  background-size: 512px;
  line-height: 1.65;
  font-size: var(--fs-cuerpo);
}

::selection { background: var(--teja); color: var(--hueso); }

a { color: var(--mar); text-decoration-color: rgba(14, 102, 140, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--teja); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--mar); outline-offset: 3px; }

img { max-width: 100%; display: block; }

/* --- curso de teja: el signature del mundo --- */
.teja,
.teja-flourish,
.pagina-titulo::after {
  background: var(--curso-teja) repeat-x;
  background-size: 26px 11px;
}
.teja { height: 11px; }
.teja-flourish { width: 78px; height: 11px; margin: 14px 0 22px; }
/* tejas bajo el título en toda página interna (el home arma las suyas) */
.pagina-titulo::after {
  content: "";
  display: block;
  width: 78px;
  height: 11px;
  margin-top: 14px;
}

/* --- fantasmas de muro: la marca de cada sala como agua de fondo --- */
.pagina { position: relative; }
.pagina.wm-fenix::before,
.pagina.wm-shisa-izq::before,
.pagina.wm-shisa-der::before,
.pagina.wm-kanjis::before,
.pagina.wm-castillo::before,
.pagina.wm-emblema::before,
.pagina.wm-kyudokan::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(44%, 340px);
  background: no-repeat right bottom / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: -1;
}
.pagina.wm-fenix::before { aspect-ratio: 440 / 230; background-image: url('assets/marca/fenix-shuri.png'); }
.pagina.wm-shisa-izq::before { aspect-ratio: 258 / 408; background-image: url('assets/marca/shisa-izq.png'); }
.pagina.wm-shisa-der::before { aspect-ratio: 258 / 408; background-image: url('assets/marca/shisa-der.png'); }
.pagina.wm-kanjis::before { aspect-ratio: 98.88 / 254.4; background-image: url('assets/marca/kyudokan_kanjis.svg'); }
.pagina.wm-castillo::before { width: min(56%, 440px); aspect-ratio: 1536 / 1022; background-image: url('assets/marca/castillo-shuri.png'); }
.pagina.wm-emblema::before { aspect-ratio: 680 / 678; background-image: url('assets/marca/emblema-shorinryu.png'); }
.pagina.wm-kyudokan::before { width: min(16%, 120px); aspect-ratio: 103 / 265; background-image: url('assets/marca/kyudokan-vertical.png'); }

/* --- masthead: el muro con el nombre --- */
.masthead { border-bottom: 1px solid var(--pelo); }
.masthead-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 28px 26px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.crest { width: 84px; height: auto; flex: none; filter: drop-shadow(0 2px 6px rgba(42, 37, 32, 0.25)); }
.titular .sobre {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  color: var(--teja);
  text-transform: uppercase;
}
.titular .razon-social {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: var(--fs-titulo);
  line-height: 1.15;
  text-wrap: balance;
  margin: 6px 0 10px;
}
.titular .ficha {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

/* --- riel de navegación --- */
.riel {
  border-bottom: 1px solid var(--pelo);
  background: rgba(246, 241, 230, 0.55);
}
.riel-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 13px 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  align-items: center;
}
.riel a {
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  padding: 2px 12px;
}
.riel a:hover { color: var(--teja); }
.riel a[aria-current] { color: var(--teja); }
.riel .sep { color: var(--teja); font-size: 9px; padding: 0 2px; }

/* --- cuerpo --- */
main { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

.bienvenida {
  padding: 64px 0 30px;
}
.bienvenida .display {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: clamp(38px, 4.9vw, 62px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 48px);
}
.shisa {
  width: clamp(44px, 5vw, 72px);
  height: auto;
  flex: none;
}
.bienvenida .display::after {
  content: none;
}

/* --- la escuela: texto + retrato del sensei --- */
.escuela {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 46px;
  padding: 44px 0 72px;
  align-items: start;
}
.escuela h2 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  margin: 0 0 14px;
}
.escuela .cuerpo p { margin-bottom: 16px; max-width: 66ch; }
.escuela .cuerpo b { font-weight: 700; }

.retrato {
  background: var(--hueso);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra);
  padding: 12px 12px 14px;
}
.retrato.tarjeta { justify-self: center; margin-top: 10px; }
.retrato img { width: 100%; height: auto; }
.retrato figcaption {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-align: center;
  padding-top: 12px;
}
.retrato figcaption b { color: var(--tinta); }

.callig-wrap { text-align: center; padding: 0 0 64px; }
.callig-wrap .accion { text-align: center; margin: 44px 0 0; }
/* CTA principal del sitio: teja llena, presencia de sello */
.callig-wrap .accion a {
  position: relative;
  background: var(--teja);
  color: var(--hueso);
  font-size: 15px;
  padding: 18px 44px;
  box-shadow: var(--sombra);
  transition: background-color 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.callig-wrap .accion a:hover {
  background: #8f2f10;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 6px 18px rgba(42, 37, 32, 0.22), 0 14px 40px rgba(42, 37, 32, 0.14);
}
.callig-wrap .accion a .alza {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.callig-wrap .accion a:hover .alza { transform: translateY(-1px); }
/* el cinturón negro se anuda y sus puntas caen por fuera del botón */
.callig-wrap .accion .nudo { position: relative; display: inline-block; }
.callig-wrap .accion .cinturon {
  position: absolute;
  left: 50%;
  top: 40px;
  width: 220px;
  height: 74px;
  margin-left: -110px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.callig-wrap .accion .nudo:hover .cinturon { opacity: 1; transform: none; }
.callig {
  mix-blend-mode: multiply;
  display: inline-block;
  width: min(440px, 100%);
  height: auto;
}

/* --- el mar: banda seigaiha bajo las tejas --- */
.olas {
  height: 40px; /* 2 filas del tile 40×20; 1 fila = 20px si querés más sutil */
  background: #0e668c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='%230e668c' stroke='%23cfe8ef' stroke-width='1.4'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='0' cy='0' r='13'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='13'/%3E%3Ccircle cx='40' cy='0' r='7'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3Ccircle cx='20' cy='20' r='13'/%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3C/g%3E%3C/svg%3E") repeat;
  background-size: 40px 20px;
}

/* --- pared del linaje: el muro de coral, fantasma del fénix de Shuri --- */
.linaje {
  background: var(--cal-2) url('assets/texturas/muro.jpg') repeat;
  background-size: 512px;
  border-top: 1px solid var(--pelo);
  border-bottom: 1px solid var(--pelo);
  box-shadow: inset 0 10px 26px rgba(42, 37, 32, 0.10), inset 0 -10px 26px rgba(42, 37, 32, 0.10);
  position: relative;
  overflow: hidden;
}
.linaje::after {
  content: '';
  position: absolute;
  right: 2%;
  bottom: 4%;
  width: min(380px, 42vw);
  height: auto;
  aspect-ratio: 440 / 230;
  background: url('assets/marca/fenix-shuri.png') no-repeat right bottom / contain;
  opacity: 0.16;
  pointer-events: none;
}
.linaje-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 28px 64px;
}
.linaje h2 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: var(--fs-h2);
}
.linaje .nota {
  color: var(--tinta);
  font-size: 16px;
  margin: 8px 0 34px;
}
.pared {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 34px;
}
/* retratos del linaje: paspartú ceñido a cada foto, nombre fuera, sobre el muro */
.pared .retrato {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  width: 216px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pared .retrato img {
  background: var(--hueso);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra);
  padding: 10px;
  width: 100%;
  height: auto;
}
.pared .retrato figcaption { padding: 0; text-align: center; max-width: 216px; color: var(--tinta); font-size: 14px; }
.pared .retrato figcaption span {
  display: block;
  margin-top: 8px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.55;
  color: #3f3831;
  max-width: 240px;
}
.pared .falta { max-width: 216px; height: 274px; display: flex; flex-direction: column; justify-content: center; font-size: 12.5px; }

/* --- pie: banda de muro con sitemap --- */
footer {
  background: var(--cal-2) url('assets/texturas/muro.jpg') repeat;
  background-size: 512px;
}
footer .pie-inner,
footer .sitemap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px 28px 12px;
  text-align: left;
}
footer .pie-inner { text-align: center; padding-bottom: 42px; }
.sitemap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 28px;
  padding-bottom: 26px;
}
.sitemap-col h2 {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8f2f10; /* teja-horno: la teja de sello no lee bien sobre muro a 12px */
  margin-bottom: 12px;
}
.sitemap-col a {
  display: block;
  padding: 10px 0;
  font-size: 14.5px;
  color: var(--tinta);
  text-decoration: none;
}
.sitemap-col a:hover { color: var(--teja); }
.sitemap-col .social {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin-top: 16px;
}
.sitemap-col p a {
  display: inline-block;
  padding: 10px 0;
}
.sitemap-col a small { color: var(--tinta-2); font-size: 12.5px; }
.sitemap-col p { font-size: 14.5px; margin-bottom: 8px; }
.legal {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 28px 32px;
  border-top: 1px solid var(--pelo);
  font-size: 12.5px;
  color: #3f3831;
}
.legal .fuente { margin-top: 4px; font-size: 12px; color: #3f3831; }
.legal .fuente a { color: #8f2f10; font-weight: 700; text-decoration: none; display: inline-block; padding: 13px 0; }

/* --- páginas internas: el mismo muro, salas contiguas --- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hueso);
  color: var(--tinta);
  padding: 10px 18px;
  z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

.pagina { max-width: 920px; margin: 0 auto; padding: 52px 28px 46px; }
.pagina-titulo {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: var(--fs-titulo);
  line-height: 1.15;
  text-wrap: balance;
  margin-bottom: 22px;
}
/* --- subnav de subsecciones: tejas arriba, links debajo --- */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 22px;
  margin-bottom: 26px;
}
.subnav a { color: var(--mar); }
.cuerpo { font-size: var(--fs-cuerpo); }
.cuerpo p { margin-bottom: 16px; max-width: 68ch; text-wrap: pretty; }
.cuerpo b, .cuerpo strong { font-weight: 700; }
.cuerpo ul, .cuerpo ol { margin: 0 0 16px 22px; }

.hoja-foto { max-width: 920px; margin: 0 auto; padding: 48px 28px 46px; }
.hoja-foto .lamina { margin: 0 auto; max-width: 640px; }
.hoja-foto nav {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.hoja-foto nav a { color: var(--mar); text-decoration: none; padding: 4px 0; }
.hoja-foto nav a:hover { color: var(--teja); }

.lamina {
  background: var(--hueso);
  border: 1px solid var(--pelo);
  box-shadow: var(--sombra);
  padding: 10px 10px 12px;
  width: fit-content;
  max-width: 100%;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.lamina img { display: block; height: auto; }
.lamina figcaption {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tinta-2);
  padding-top: 10px;
  max-width: 46ch;
}
.lamina.pre { opacity: 0; transform: translateY(10px); }

.secuencia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 24px;
  align-items: start;
}
.secuencia .lamina { width: auto; }
.secuencia .lamina img { width: 100%; }

.falta {
  border: 1px dashed var(--teja);
  background: rgba(246, 241, 230, 0.65);
  padding: 16px 18px;
  font-size: 14px;
  max-width: 440px;
}
.falta strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teja);
  margin-bottom: 6px;
}
.falta code { font-size: 12px; color: var(--tinta-2); overflow-wrap: anywhere; }

/* --- presentación: el linaje en cartelas (foto arriba, ficha debajo) --- */
.genealogia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 720px;
  margin: 26px auto 0;
}
.genealogia .lamina { width: auto; margin: 0; padding: 14px 14px 16px; display: flex; flex-direction: column; }
.cartela-link .lamina { height: 100%; }
.genealogia .cartela.centro { justify-self: center; }
.marco {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marco img { height: 100%; width: auto; }
.genealogia .lamina figcaption,
.cartela-sensei figcaption {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
  max-width: none;
  color: var(--tinta);
  text-align: center;
  padding-top: 12px;
  margin-top: auto;
}
.rol {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8f2f10; /* teja-horno: la teja de sello, como en el sitemap */
  margin-bottom: 5px;
}
.cartela-link { display: block; text-decoration: none; color: inherit; }
.cartela-link .lamina { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.cartela-link:hover .lamina { border-color: var(--teja); }
.cartela-link:focus-visible { outline: 2px solid var(--teja); outline-offset: 3px; }
.cartela-sensei { max-width: 460px; margin: 24px auto 0; }
.cartela-sensei img { width: 100%; height: auto; max-height: none; }
.cartela-sensei .marco { height: auto; }

/* --- centro de enseñanza: lectura con láminas flotadas --- */
.cuerpo .lamina.flota-der { float: right; margin: 6px 0 22px 28px; }
.cuerpo .lamina.flota-izq { float: left; margin: 6px 28px 22px 0; }
.cierre {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: clamp(21px, 3vw, 26px);
  text-align: left;
  max-width: 30ch;
  margin: 0;
}
/* firma de página: cierre + sello del dojo, el papel se funde con multiply */
.firma {
  clear: both;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 30px 0 0;
}
.firma .cierre { flex: 1 1 280px; max-width: none; }
.sello-dojo {
  width: 220px;
  height: auto;
  mix-blend-mode: multiply;
}
.accion { text-align: left; margin: 32px 0 4px; }
.accion a {
  display: inline-block;
  border: 1px solid var(--teja);
  color: var(--tinta);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 22px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.accion a:hover { background: var(--teja); color: var(--hueso); }
.accion a:focus-visible { outline: 2px solid var(--teja); outline-offset: 3px; }

/* --- subtítulos h3 de sección; mapa y ficha de visitanos --- */
.cuerpo h3 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 21px;
  margin: 36px 0 16px;
}
.visita section { scroll-margin-top: 72px; }
.cuerpo section:first-child h3 { margin-top: 0; }
.mapa-osm { width: min(100%, 640px); padding: 8px; }
.mapa-osm iframe { display: block; width: 100%; height: 400px; border: 0; }

/* --- katas de la escuela: ficha por kata con foto pendiente --- */
.kata {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px 28px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--pelo);
}
.kata:last-of-type { border-bottom: 0; }
.kata-falta {
  border: 1px dashed var(--teja);
  background: var(--hueso);
  padding: 18px 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.kata-falta code {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--teja);
}
.kata-ficha h4 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--teja);
  margin: 0 0 8px;
}
.kata-ficha p { margin-bottom: 10px; }
.kata-ficha p:last-child { margin-bottom: 0; }
/* h4 de subsección: un escalón bajo el h3 de sección */
.cuerpo h4 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 17px;
  margin: 28px 0 12px;
}
.torneo + .torneo { margin-top: 44px; border-top: 1px solid var(--pelo); }

/* --- pensamiento: serie de kanjis y Dojo Kun --- */
.kanjis {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 36px 40px;
  margin: 40px 0 44px;
}
.kanji-par {
  width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.kanji-par .lamina { margin: 0; max-width: 100%; }
.kanji-par p { margin: 0; text-align: center; font-size: 14px; line-height: 1.5; }
.dojo-kun {
  border-top: 1px solid var(--pelo);
  padding-top: 34px;
}
.dojo-kun ul {
  margin: 18px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dojo-kun li { padding-left: 4px; }
.dojo-kun li::marker { color: var(--teja); }
@media (max-width: 760px) {
  .kata { grid-template-columns: 1fr; }
}
.sedes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sedes .mapa-osm { width: 100%; margin: 0; }
.sedes .mapa-osm iframe { height: 320px; }
.sedes figcaption span {
  display: block;
  margin-top: 6px;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--tinta);
}
.ficha p { margin-bottom: 10px; }
@media (max-width: 760px) {
  .sedes { grid-template-columns: 1fr; }
  .mapa-osm iframe { height: 300px; }
}

.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
  box-shadow: var(--sombra);
}
.tabla-nota { font-size: 13px; color: var(--tinta-2); margin: -6px 0 20px; }
.tabla-notacion {
  width: 100%;
  min-width: 780px;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  text-align: center;
  background: var(--hueso);
  border: 1px solid var(--pelo);
}
.tabla-notacion th, .tabla-notacion td {
  border: 1px solid var(--pelo);
  padding: 14px 10px;
}
.tabla-notacion th {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teja);
  border-bottom: 2px solid var(--teja);
}

.indice { list-style: none; max-width: 560px; }
.indice li { border-bottom: 1px solid var(--pelo); }
.indice a {
  display: block;
  padding: 11px 2px;
  font-weight: 700;
  font-size: 15px;
  color: var(--tinta);
  text-decoration: none;
}
.indice a:hover { color: var(--teja); }

@media (max-width: 1024px) {
  .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  /* HD en adelante: la fila de maestros nunca quiebra */
  .pared { flex-wrap: nowrap; }
  .pared .retrato { flex: 1 1 216px; max-width: 236px; }
}

@media (min-width: 1920px) {
  /* Full HD en adelante: un punto y medio más de cuerpo */
  :root {
    --fs-titulo: clamp(30px, 3vw, 46px);
    --fs-h2: 30px;
    --fs-cuerpo: 18.5px;
  }
  .pagina, .hoja-foto { max-width: 1000px; }
  .linaje .nota { font-size: 17.5px; }
}

/* --- móvil --- */
@media (max-width: 760px) {
  body { font-size: var(--fs-cuerpo); }
  .pagina[class*="wm-"]::before { width: min(56%, 250px); }
  .pagina.wm-kyudokan::before { width: min(22%, 90px); }
  .masthead-inner { flex-direction: row; gap: 20px; padding: 26px 20px 20px; }
  .crest { width: 64px; height: auto; }
  .riel-inner, main, .linaje-inner, footer .pie-inner { padding-left: 20px; padding-right: 20px; }
  .riel { position: sticky; top: 0; z-index: 5; background: var(--hueso); box-shadow: 0 1px 0 var(--pelo); }
  .riel-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 0 12px;
    gap: 0;
  }
  .riel-inner::-webkit-scrollbar { display: none; }
  .riel-inner {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  }
  .riel-inner.fin {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .riel .sep { display: none; }
  .riel a {
    flex: none;
    padding: 14px 10px;
    font-size: 12px;
    scroll-snap-align: start;
    border-bottom: 2px solid transparent;
  }
  .riel a[aria-current] { border-bottom-color: var(--teja); }
  .hoja-foto nav a { padding: 8px 2px; }
  .bienvenida { padding: 44px 0 16px; }
  .bienvenida .display { font-size: clamp(38px, 11vw, 52px); gap: 12px; }
  .shisa { width: 36px; }
  .escuela { grid-template-columns: 1fr; gap: 34px; padding: 30px 0 54px; }
  .olas { height: 40px; }
  .pared { gap: 24px; }
  .pared .retrato img { height: 230px; padding: 8px; object-fit: cover; object-position: center top; }
  .pagina, .hoja-foto { padding: 36px 20px 38px; }
  .sitemap { grid-template-columns: 1fr; gap: 26px; }
  .legal { padding: 14px 20px 30px; }
  .secuencia { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 18px; }
  .genealogia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .genealogia .lamina { padding: 10px 10px 12px; }
  .marco { height: auto; }
  .cartela-sensei { margin: 20px auto 0; }
  .marco img { height: auto; width: 100%; max-height: none; }
  .cuerpo .lamina.flota-der, .cuerpo .lamina.flota-izq { float: none; margin: 20px auto; max-width: min(100%, 320px); }
  .cuerpo .lamina.flota-der img, .cuerpo .lamina.flota-izq img { width: 100%; }
  .lamina figcaption, .retrato figcaption { font-size: 13.5px; }
  .rol { font-size: 12px; }
}