/* ==========================================================================
   KAIKA DOJO — Escuela de Aikido Tenerife
   Sistema de diseño: tinta sumi + papel washi + sellos hanko
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- color: tinta, papel, sellos --- */
  --sumi:        #1c2d3d;   /* tinta azul noche, más clara — fondo base */
  --sumi-2:      #1c3323;   /* tinta verde bosque, más clara — paneles, secciones alternas */
  --sumi-3:      #2f4150;   /* tinta azul clara — bordes/hover */
  --washi:       #efe9db;   /* papel — texto principal sobre tinta */
  --washi-dim:   #b8b0a0;   /* papel apagado — texto secundario */
  --washi-faint: #7d7869;   /* papel tenue — texto terciario */
  --aka:         #a13c30;   /* bermellón del tatami — acento primario */
  --aka-bright:  #c15040;   /* bermellón hover */
  --ai:          #1c5fa8;   /* azul emblema, más vivo — acento secundario */
  --ai-light:    #4a90d9;   /* azul agua claro — Hombu Dojo, Bushido */
  --sun:         #cf9c52;   /* oro/madera — detalle, sello */
  --moss:        #5c8f5f;   /* verde bosque/tatami, más claro — Beneficios, naturaleza */
  --moss-bright: #7ab87d;   /* verde hover, más claro */
  --paper-bg:    #e3e2d1;   /* sección clara tipo pergamino, con matiz musgo */
  --paper-ink:   #201c16;   /* texto sobre pergamino */
  --line:        rgba(239,233,219,0.14);
  --line-strong: rgba(239,233,219,0.28);
  --shadow-ink:  0 30px 60px -20px rgba(0,0,0,0.55);

  /* --- tipografía --- */
  --f-display: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  --f-body: 'Hanken Grotesk', 'Hiragino Sans', sans-serif;
  --f-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;

  /* --- escala --- */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --radius: 3px;

  /* --- easing (Emil) --- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--sumi);
  color: var(--washi);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection{ background: var(--aka); color: var(--washi); }

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  letter-spacing: 0.01em;
}
p{ margin: 0; }
ul{ margin:0; padding:0; list-style:none; }
sup{ font-family: var(--f-body); font-size: 0.62em; vertical-align: 0.4em; line-height:0; }

:focus-visible{
  outline: 2px solid var(--sun);
  outline-offset: 3px;
}

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* subtle ink-grain overlay, fixed, tactile paper/ink feel */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */
.eyebrow{
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sun);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before{
  content:"";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aka);
  display: inline-block;
}
.h-display{
  font-size: clamp(2.4rem, 6vw, 5rem);
  color: var(--washi);
}
.h-section{
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--washi);
}
.h-card{ font-size: clamp(1.2rem, 2vw, 1.5rem); }
.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--washi-dim);
  font-weight: 400;
  max-width: 62ch;
}
.mono-label{
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--washi-faint);
}

/* numerales kanji — marcador de listas ordenadas reales (bushido, reglas, técnicas) */
.kanji-list{ display:flex; flex-direction:column; gap:0; }
.kanji-list > li{
  display:grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.4rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}
.kanji-list > li:last-child{ border-bottom: 1px solid var(--line); }
.kanji-num{
  font-family: var(--f-display);
  font-size: 2.1rem;
  color: var(--sun);
  line-height: 1;
}
.kanji-list h3{ font-size: 1.15rem; color: var(--washi); margin-bottom:0.4rem; }
.kanji-list p{ color: var(--washi-dim); font-size:0.98rem; max-width: 58ch; }

/* ==========================================================================
   SELLO HANKO — firma visual recurrente
   ========================================================================== */
.hanko{
  width: 34px; height: 34px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aka);
  flex-shrink: 0;
}
.hanko svg{ width: 60%; height: 60%; }

/* ensō — círculo trazado a mano, elemento de firma animado con DrawSVG */
.enso-wrap{ pointer-events:none; }
.enso-wrap path{
  fill:none;
  stroke: var(--sun);
  stroke-width: 3;
  stroke-linecap: round;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  padding: 18px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(28,45,61,0.86);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.brand{
  display:flex;
  align-items:center;
  gap: 0.85rem;
  z-index: 2;
}
.brand img{ height: 46px; width:auto; }
.brand-text{
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--washi);
  line-height: 1.15;
}
.brand-text small{
  display:block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--washi-faint);
  text-transform: uppercase;
  margin-top: 2px;
}

.main-nav{
  display:flex;
  align-items:center;
  gap: 2.2rem;
}
.main-nav a{
  font-size: 0.92rem;
  color: var(--washi-dim);
  position: relative;
  padding: 4px 0;
  transition: color 200ms var(--ease-out);
}
.main-nav a:hover, .main-nav a.is-active{ color: var(--washi); }
.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background: var(--aka);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.main-nav a:hover::after, .main-nav a.is-active::after{ transform: scaleX(1); }

.header-cta{ display:flex; align-items:center; gap: 1rem; }
.tel-link{
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--washi);
  display:none;
}

.menu-btn{
  width: 44px; height:44px;
  background:none; border:1px solid var(--line-strong);
  border-radius: 2px;
  display:none;
  align-items:center; justify-content:center;
  cursor:pointer;
  z-index: 2;
}
.menu-btn svg{ width:20px; height:20px; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor:pointer;
  transition: transform 160ms var(--ease-out), background-color 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out);
  min-height: 48px;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--aka); color: var(--washi); }
.btn-primary:hover{ background: var(--aka-bright); }
.btn-ghost{ background: transparent; color: var(--washi); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--washi-dim); background: rgba(239,233,219,0.05); }
.btn-paper{ background: var(--washi); color: var(--sumi); }
.btn-paper:hover{ background:#fff; }
.btn-sm{ padding: 0.7rem 1.2rem; font-size: 0.85rem; min-height: 40px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  padding-top: 110px;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg{
  position:absolute; inset:0;
  z-index:0;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(0.35) brightness(0.42) contrast(1.08);
  transform: scale(1.08);
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(28,45,61,0.55) 0%, rgba(28,45,61,0.72) 55%, var(--sumi) 100%);
}
.hero-inner{
  position:relative; z-index:1;
  width:100%;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items:center;
}
.hero-seal{
  display:flex;
  justify-content:center;
  position:relative;
}
.hero-seal img{
  width: min(340px, 70vw);
  height: auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  align-self: center;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}
.hero-seal .enso-wrap{
  position:absolute;
  inset: -8%;
  width: 116%; height:116%;
}
.hero h1{ margin-bottom: 1.1rem; }
.hero .lede{ margin-bottom: 1.6rem; }
.hero-address{
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--washi-faint);
  margin-bottom: 2.1rem;
  display:flex; align-items:center; gap:0.6rem;
}
.hero-address svg{ width:15px; height:15px; flex-shrink:0; color: var(--aka); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap: 1rem; margin-bottom: 2.4rem; }
.hero-trust{
  display:flex; flex-wrap:wrap;
  gap: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.trust-item{ display:flex; flex-direction:column; }
.trust-num{ font-family: var(--f-display); font-size: 1.7rem; color: var(--sun); }
.trust-label{ font-size: 0.8rem; color: var(--washi-faint); }

.scroll-cue{
  position:absolute;
  bottom: 28px; left:50%;
  transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:1;
  color: var(--washi-faint);
}
.scroll-cue .line{ width:1px; height:34px; background: linear-gradient(var(--washi-faint), transparent); }

/* ==========================================================================
   SECCIONES
   ========================================================================== */
section{ position:relative; }
.section{ padding: clamp(4rem, 9vw, 8rem) 0; }
.section-head{
  max-width: 720px;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
}
.section-head .eyebrow{ margin-bottom: 1rem; }
.section-head h2{ margin: 0.6rem 0 1.1rem; }

.section-alt{ background: var(--sumi-2); }
.section-line-top{ border-top: 1px solid var(--line); }

/* pergamino claro — sección tipo papel para reglas/citas destacadas */
.section-paper{
  background: var(--paper-bg);
  color: var(--paper-ink);
}
.section-paper .eyebrow{ color: var(--aka); }
.section-paper h2, .section-paper h3{ color: var(--paper-ink); }
.section-paper .lede, .section-paper p{ color: #4a4436; }
.section-paper .kanji-list > li{ border-color: rgba(32,28,22,0.14); }
.section-paper .btn-ghost{ color: var(--paper-ink); border-color: rgba(32,28,22,0.3); }
.section-paper .btn-ghost:hover{ border-color: rgba(32,28,22,0.55); background: rgba(32,28,22,0.05); }
.section-paper .mono-label{ color: #6b6455; }
.section-paper .kanji-num{ color: var(--aka); }
/* las tarjetas oscuras (.benefit, .tech-card...) mantienen su propia paleta
   aunque estén anidadas dentro de una sección clara */
.section-paper .benefit h3,
.section-paper .tech-card h3{ color: var(--washi); }
.section-paper .benefit p,
.section-paper .tech-card p{ color: var(--washi-dim); }
.section-paper .benefit .kanji-num,
.section-paper .tech-card .kanji-num{ color: var(--sun); }
.section-paper.tema-verde .benefit .kanji-num,
.section-paper.tema-verde .tech-card .kanji-num{ color: var(--moss-bright); }
.section-paper.tema-azul .benefit .kanji-num,
.section-paper.tema-azul .tech-card .kanji-num{ color: var(--ai-light); }

/* grid de 3 razones */
.reasons-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.reason{
  background: var(--sumi);
  padding: 2.4rem 2rem;
}
.reason .kanji-num{ display:block; margin-bottom: 1.2rem; }
.reason h3{ font-size: 1.15rem; margin-bottom: 0.8rem; }
.reason p{ color: var(--washi-dim); font-size: 0.95rem; }

/* imagen + texto */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items:center;
}
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ width:100%; height:auto; }
.split-media .frame-tag{
  position:absolute; bottom:-1px; left:-1px;
  background: var(--sumi);
  border: 1px solid var(--line-strong);
  padding: 0.5rem 0.9rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--washi-faint);
  letter-spacing: 0.05em;
}
.split-body h2{ margin-bottom: 1.1rem; }
.split-body p + p{ margin-top: 1rem; }
.split-body p{ color: var(--washi-dim); }

/* timeline de maestros / historia */
.timeline{ border-top: 1px solid var(--line); }
.timeline-row{
  display:grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.6rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.timeline-row .yr{ font-family: var(--f-mono); color: var(--sun); font-size:0.95rem; }
.timeline-row h4{ font-family: var(--f-body); font-weight:700; font-size:1rem; color:var(--washi); margin-bottom:0.3rem; }
.timeline-row p{ color: var(--washi-dim); font-size:0.92rem; }

/* maestros grid */
.masters-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem 1.6rem;
}
.masters-grid li{
  font-size: 0.92rem;
  color: var(--washi-dim);
  padding-left: 1.1rem;
  position:relative;
}
.masters-grid li::before{
  content:"合";
  position:absolute; left:0; top:0;
  color: var(--aka);
  font-family: var(--f-display);
  font-size: 0.75rem;
  opacity: 0.7;
}

/* tarjetas técnicas / armas */
.card-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.card-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.tech-card{
  background: var(--sumi);
  padding: 2rem 1.6rem;
}
.tech-card .mono-label{ display:block; margin-bottom: 0.6rem; }
.tech-card h3{ font-size: 1.1rem; margin-bottom: 0.6rem; }
.tech-card p{ color: var(--washi-dim); font-size: 0.9rem; }

.weapon-card{ background: var(--sumi); padding: 0; overflow:hidden; }
.weapon-card img{ width:100%; aspect-ratio: 4/3; object-fit:contain; background: var(--washi); padding: 1.2rem; }
.weapon-card-body{ padding: 1.4rem 1.6rem 1.8rem; }
.weapon-card h3{ font-size:1.05rem; margin-bottom:0.4rem; }
.weapon-card p{ color:var(--washi-dim); font-size:0.9rem; }

/* beneficios */
.benefits-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--line);
  border:1px solid var(--line);
}
.benefit{ background: var(--sumi); padding: 1.8rem 2rem; display:flex; gap:1.2rem; }
.benefit .kanji-num{ font-size:1.6rem; flex-shrink:0; }
.benefit h3{ font-size:1.02rem; margin-bottom:0.4rem; }
.benefit p{ font-size:0.9rem; color:var(--washi-dim); }

/* galería draggable (eventos) — el track se arrastra por transform (Draggable type:"x"), el viewport lo recorta */
.gallery-wrap{ position:relative; }
.gallery-viewport{ overflow: hidden; }
.gallery-track{
  display:flex;
  gap: 1.2rem;
  width: max-content;
  cursor: grab;
  padding-bottom: 1.2rem;
}
.gallery-track.is-dragging{ cursor: grabbing; }
.gallery-item{
  flex: 0 0 clamp(260px, 34vw, 420px);
}
.gallery-item img{ width:100%; aspect-ratio: 4/3; object-fit:cover; }
.gallery-item figcaption{
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--washi-faint);
  padding-top: 0.7rem;
}
.gallery-hint{
  display:flex; align-items:center; gap:0.6rem;
  font-family: var(--f-mono); font-size:0.75rem; color: var(--washi-faint);
  margin-top: 0.5rem;
}

/* seminario destacado */
.feature-banner{
  position:relative;
  border: 1px solid var(--line-strong);
  padding: clamp(2.4rem, 5vw, 4rem);
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items:center;
}
.feature-banner h3{ font-size: clamp(1.4rem, 3vw, 2.1rem); margin-bottom: 0.8rem; }
.feature-banner p{ color: var(--washi-dim); max-width: 56ch; }
.feature-cities{
  display:flex; flex-wrap:wrap; gap: 0.6rem 1.4rem;
  margin-top: 1.2rem;
}
.feature-cities span{
  font-family: var(--f-mono); font-size:0.8rem; color: var(--sun);
}
.feature-cities span::before{ content:"— "; color: var(--washi-faint); }

/* horarios / precios */
.schedule-table{ width:100%; border-collapse: collapse; }
.schedule-table th, .schedule-table td{
  text-align:left;
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.schedule-table th{
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--washi-faint);
  font-weight: 500;
}
.schedule-table td.day{ font-family: var(--f-display); font-size: 1.05rem; color: var(--washi); }
.schedule-table td.time{ font-family: var(--f-mono); color: var(--sun); }

.pricing-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; }
.price-card{
  border: 1px solid var(--line-strong);
  padding: 2.2rem;
  position:relative;
}
.price-card.is-highlight{ border-color: var(--aka); background: rgba(161,60,48,0.06); }
.price-card .mono-label{ display:block; margin-bottom:1rem; }
.price-value{ font-family: var(--f-display); font-size: 2.6rem; color: var(--washi); }
.price-value sup{ font-size: 1.1rem; top:-1em; }
.price-value small{ font-family: var(--f-body); font-size: 0.9rem; color: var(--washi-faint); font-weight:400; }
.price-card p{ color: var(--washi-dim); font-size:0.92rem; margin-top: 0.8rem; }

.faq-item{ border-top: 1px solid var(--line); }
.faq-item:last-child{ border-bottom: 1px solid var(--line); }
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.5rem 0;
  background:none; border:none; color: var(--washi);
  font-family: var(--f-display); font-size: 1.1rem;
  cursor:pointer; text-align:left; gap:1rem;
}
.faq-q .plus{ font-family: var(--f-mono); font-size:1.3rem; color: var(--sun); transition: transform 260ms var(--ease-out); flex-shrink:0; }
.faq-item[data-open="true"] .plus{ transform: rotate(45deg); }
.faq-a{ height: 0; overflow: hidden; }
.faq-a-inner{ padding-bottom: 1.6rem; color: var(--washi-dim); max-width: 62ch; }

/* contacto */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.contact-card{ border:1px solid var(--line-strong); padding: clamp(1.8rem,3vw,2.6rem); }
.contact-row{
  display:flex; gap: 1rem; align-items:flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-row:last-child{ border-bottom:none; }
.contact-row svg{ width:19px; height:19px; color: var(--aka); margin-top:3px; flex-shrink:0; }
.contact-row .label{ display:block; font-family: var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--washi-faint); margin-bottom: 0.35rem; }
.contact-row a, .contact-row span.val{ font-size:1rem; color: var(--washi); }
.contact-row a:hover{ color: var(--sun); }

.map-embed{
  position:relative; width:100%; aspect-ratio: 4/3.4;
  border:1px solid var(--line-strong); overflow:hidden;
  background-color: var(--sumi-2);
  background-image:
    linear-gradient(rgba(239,233,219,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,233,219,0.06) 1px, transparent 1px);
  background-size: 34px 34px;
}
.map-card{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap: 0.6rem;
  padding: 2rem;
}
.map-pin-wrap{ position:relative; width:74px; height:74px; margin-bottom:0.6rem; display:flex; align-items:center; justify-content:center; }
.map-pin-wrap::before, .map-pin-wrap::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(207,156,82,0.35);
  animation: map-ping 3.2s var(--ease-out) infinite;
}
.map-pin-wrap::before{ inset:-14px; }
.map-pin-wrap::after{ inset:-28px; border-color: rgba(207,156,82,0.18); animation-delay: 0.9s; }
@keyframes map-ping{
  0%{ transform: scale(0.75); opacity:1; }
  100%{ transform: scale(1.15); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .map-pin-wrap::before, .map-pin-wrap::after{ animation:none; }
}
.map-pin{ width:34px; height:34px; color: var(--sun); position:relative; z-index:1; }
.map-card-title{ font-family: var(--f-display); font-size:1.15rem; color: var(--washi); }
.map-card-address{ font-family: var(--f-mono); font-size:0.82rem; color: var(--washi-faint); max-width:28ch; }
.map-card .btn{ margin-top:0.6rem; }

.social-row{ display:flex; gap: 0.8rem; margin-top: 1.6rem; }
.social-row a{
  width:44px; height:44px;
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.social-row a:hover{ border-color: var(--aka); color: var(--aka); transform: translateY(-2px); }
.social-row svg{ width:19px; height:19px; }

.form-field{ margin-bottom: 1.2rem; }
.form-field label{ display:block; font-family: var(--f-mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--washi-faint); margin-bottom:0.5rem; }
.form-field input, .form-field textarea{
  width:100%;
  background: var(--sumi-2);
  border: 1px solid var(--line-strong);
  color: var(--washi);
  font-family: var(--f-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 2px;
  transition: border-color 200ms var(--ease-out);
}
.form-field input:focus, .form-field textarea:focus{ border-color: var(--sun); outline:none; }
.form-field textarea{ min-height: 120px; resize: vertical; }
.form-note{ font-size:0.82rem; color: var(--washi-faint); margin-top: 0.9rem; }

/* CTA de cierre */
.closing-cta{
  text-align:center;
  padding: clamp(4rem,9vw,7rem) 0;
  border-top: 1px solid var(--line);
}
.closing-cta h2{ max-width: 20ch; margin: 0 auto 1.3rem; }
.closing-cta .lede{ max-width: 50ch; margin: 0 auto 2.2rem; }
.closing-cta .hero-ctas{ justify-content:center; }

/* breadcrumb */
.breadcrumb{
  padding: 130px 0 0;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--washi-faint);
}
.breadcrumb a:hover{ color: var(--sun); }
.breadcrumb span{ margin: 0 0.5rem; }
.page-hero{ padding-bottom: clamp(3rem,6vw,5rem); border-bottom: 1px solid var(--line); }
.page-hero h1{ margin: 1rem 0 1.2rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  background: var(--sumi-2);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-brand img{ height: 64px; margin-bottom: 1.2rem; }
.footer-brand p{ color: var(--washi-dim); font-size:0.9rem; max-width:34ch; }
.footer-col h4{
  font-family: var(--f-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--washi-faint); margin-bottom: 1.1rem; font-weight:500;
}
.footer-col a, .footer-col span{ display:block; color: var(--washi-dim); font-size:0.92rem; margin-bottom:0.7rem; }
.footer-col a:hover{ color: var(--sun); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--washi-faint);
}

/* barra fija móvil */
.mobile-bar{
  position: fixed; bottom:0; left:0; right:0;
  z-index: 400;
  display:none;
  background: rgba(28,45,61,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong);
  padding: 0.6rem var(--gutter);
  gap: 0.6rem;
}
.mobile-bar a{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family: var(--f-mono); font-size:0.66rem; letter-spacing:0.03em;
  color: var(--washi-dim);
  padding: 0.4rem 0;
}
.mobile-bar a svg{ width:19px; height:19px; }
.mobile-bar a.is-primary{ color: var(--sun); }

/* ==========================================================================
   UTILIDADES SCROLL-REVEAL (JS añade .is-visible vía GSAP; CSS = estado base)
   ========================================================================== */
[data-reveal]{ }
.reveal-line{ overflow:hidden; }
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.word-inner{ display:inline-block; will-change:transform; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 900px){
  .tel-link{ display:inline; }
}

@media (max-width: 980px){
  .main-nav{ display:none; }
  .menu-btn{ display:flex; }
  .hero-grid{ grid-template-columns: 1fr; text-align:center; }
  .hero-address{ justify-content:center; }
  .hero-ctas{ justify-content:center; }
  .hero-trust{ justify-content:center; }
  .hero-seal{ order:-1; margin-bottom: 1rem; }
  .split, .split.reverse{ grid-template-columns: 1fr; }
  .split.reverse .split-media{ order:0; }
  .reasons-grid{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: repeat(2,1fr); }
  .card-grid.cols-3{ grid-template-columns: 1fr 1fr; }
  .benefits-grid{ grid-template-columns: 1fr; }
  .masters-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .feature-banner{ grid-template-columns: 1fr; }
  .mobile-bar{ display:flex; }
  body{ padding-bottom: 64px; }
}

@media (max-width: 640px){
  .card-grid, .card-grid.cols-3{ grid-template-columns: 1fr; }
  .masters-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .kanji-list > li{ grid-template-columns: 2.4rem 1fr; gap:1rem; }
  .timeline-row{ grid-template-columns: 1fr; gap:0.4rem; }
}

/* ==========================================================================
   GALERÍA — filtros, mosaico, lightbox (full efectos)
   ========================================================================== */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:0.7rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filter-btn{
  background:none;
  border:1px solid var(--line-strong);
  color: var(--washi-dim);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 0.65rem 1.2rem;
  border-radius: 2px;
  cursor:pointer;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.filter-btn:hover{ color: var(--washi); border-color: var(--washi-dim); }
.filter-btn.is-active{ color: var(--sumi); background: var(--sun); border-color: var(--sun); }

.masonry{
  columns: 3 260px;
  column-gap: 1.1rem;
}
.g-item{
  position: relative;
  break-inside: avoid;
  margin-bottom: 1.1rem;
  overflow: hidden;
  cursor: zoom-in;
  border: 1px solid var(--line);
}
.g-item img{
  width:100%; height:auto; display:block;
  transition: transform 700ms var(--ease-out), filter 500ms var(--ease-out);
  filter: grayscale(0.15) contrast(1.02);
}
.g-item:hover img{ transform: scale(1.06); filter: grayscale(0) contrast(1.05); }
.g-item .g-corner{
  position:absolute; inset: 10px;
  pointer-events:none;
  opacity:0;
  transition: opacity 260ms var(--ease-out);
}
.g-item:hover .g-corner{ opacity:1; }
.g-item .g-corner path{ fill:none; stroke: var(--sun); stroke-width:1.5; }
.g-item .g-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 1.1rem 1rem 0.9rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  color: var(--washi);
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  transform: translateY(10px);
  opacity:0;
  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.g-item:hover .g-caption{ transform: translateY(0); opacity:1; }
.g-item[data-cat]{ }

/* lightbox */
.lightbox{
  position: fixed; inset:0;
  z-index: 900;
  background: rgba(10,11,13,0.94);
  display:flex; align-items:center; justify-content:center;
  padding: 5vh 4vw;
  opacity:0;
  visibility:hidden;
  transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition: opacity 320ms var(--ease-out), visibility 0s; }
.lightbox-frame{ position:relative; max-width: 1100px; max-height: 88vh; width:100%; text-align:center; }
.lightbox-frame img{
  max-width:100%; max-height: 78vh; width:auto; margin:0 auto;
  box-shadow: var(--shadow-ink);
  transform: scale(0.94);
  opacity:0;
  transition: transform 360ms var(--ease-out), opacity 360ms var(--ease-out);
}
.lightbox.is-open .lightbox-frame img{ transform: scale(1); opacity:1; }
.lightbox-caption{
  color: var(--washi-dim);
  font-family: var(--f-mono);
  font-size: 0.85rem;
  margin-top: 1.2rem;
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute;
  background: rgba(28,45,61,0.7);
  border: 1px solid var(--line-strong);
  color: var(--washi);
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ border-color: var(--sun); background: rgba(28,45,61,0.95); }
.lightbox-close{ top: -4vh; right:0; }
.lightbox-prev{ top:50%; left: -60px; transform: translateY(-50%); }
.lightbox-next{ top:50%; right: -60px; transform: translateY(-50%); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:18px; height:18px; }

@media (max-width: 900px){
  .masonry{ columns: 2 180px; }
  .lightbox{ padding: 10vh 6vw; }
  .lightbox-prev{ left:4px; }
  .lightbox-next{ right:4px; }
  .lightbox-close{ top:10px; right:10px; }
}
@media (max-width: 560px){
  .masonry{ columns: 1; }
}

/* full-bleed navegación móvil */
.mobile-nav{
  position: fixed; inset:0;
  background: var(--sumi);
  z-index: 480;
  display:flex; flex-direction:column;
  justify-content:center;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform 420ms var(--ease-in-out);
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav a{
  font-family: var(--f-display);
  font-size: 2rem;
  color: var(--washi);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .mobile-nav-foot{ margin-top: 2rem; display:flex; flex-direction:column; gap:1rem; }
.mobile-nav .mobile-nav-foot a.btn{
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.95rem 1.7rem;
  border-bottom: none;
  text-align: center;
  justify-content: center;
}

/* ==========================================================================
   MÁS EFECTOS — marquesina, cursor, tilt, movimiento continuo
   ========================================================================== */

/* marquesina infinita */
.marquee-band{
  position:relative;
  overflow:hidden;
  background: var(--sumi-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}
.marquee-track{
  display:flex;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
  will-change: transform;
}
.marquee-band:hover .marquee-track{ animation-play-state: paused; }
.marquee-group{ display:flex; align-items:center; flex-shrink:0; }
.marquee-group span{
  font-family: var(--f-mono);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--washi-dim);
  padding: 0 1.6rem;
  white-space: nowrap;
}
.marquee-group .kanji-mark{
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--sun);
  letter-spacing: 0;
  padding: 0 1.6rem;
}
@keyframes marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; } }

/* cursor a medida: la clase la añade JS solo si el cursor se crea con éxito,
   así un fallo de JS nunca deja al usuario sin puntero visible */
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor .g-item,
html.has-custom-cursor .gallery-item,
html.has-custom-cursor .faq-q{ cursor: none; }
html.has-custom-cursor body{ cursor: none; }
.cursor-dot, .cursor-ring{
  position: fixed;
  top:0; left:0;
  pointer-events:none;
  z-index: 2000;
  transform: translate(-50%,-50%);
}
.cursor-dot{
  width:7px; height:7px;
  border-radius:50%;
  background: var(--sun);
  opacity:0;
  transition: opacity 200ms ease;
}
.cursor-ring{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid rgba(239,233,219,0.5);
  opacity:0;
  transition: border-color 220ms var(--ease-out), background-color 220ms var(--ease-out), opacity 200ms ease;
}
.cursor-dot.is-visible, .cursor-ring.is-visible{ opacity:1; }
.cursor-ring.is-active{ border-color: var(--sun); background: rgba(207,156,82,0.08); }

/* tilt 3D en tarjetas */
.tilt-target{ will-change: transform; transition: box-shadow 260ms var(--ease-out); }
.tilt-target:hover{ box-shadow: 0 20px 45px -18px rgba(0,0,0,0.55); }

/* regla dibujada bajo los titulares de sección */
.head-rule{
  display:block;
  width:0;
  height:2px;
  background: var(--aka);
  margin: 0.9rem 0 1.15rem;
}
.section-paper .head-rule{ background: var(--aka); }

/* ==========================================================================
   TEMAS DE COLOR POR CONTENIDO — verde naturaleza y azul, aparte del rojo
   de las llamadas a la acción (ese se queda igual en todo el sitio para
   no diluir la conversión). Verde en lo que habla de bienestar/crecimiento
   (Beneficios); azul en lo que habla de alcance/calma (Hombu Dojo, Bushido).
   ========================================================================== */
.tema-verde .eyebrow{ color: var(--moss-bright); }
.tema-verde .eyebrow::before{ background: var(--moss); }
.tema-verde .kanji-num{ color: var(--moss); }
.tema-verde .head-rule{ background: var(--moss); }
.tema-verde.section-paper .eyebrow{ color: var(--moss); }
.tema-verde.section-paper .kanji-num{ color: var(--moss); }
.tema-verde.section-paper .head-rule{ background: var(--moss); }
.tema-verde .btn-ghost:hover{ border-color: var(--moss-bright); }
.tema-verde.section-paper .btn-ghost{ color: var(--paper-ink); border-color: rgba(92,143,95,0.4); }
.tema-verde.section-paper .btn-ghost:hover{ border-color: var(--moss); background: rgba(92,143,95,0.08); }

.tema-azul .eyebrow{ color: var(--ai-light); }
.tema-azul .eyebrow::before{ background: var(--ai-light); }
.tema-azul .kanji-num{ color: var(--ai-light); }
.tema-azul .head-rule{ background: var(--ai-light); }
.tema-azul .tech-card .mono-label,
.tema-azul .mono-label{ color: var(--ai-light); }
.tema-azul.section-paper .eyebrow{ color: var(--ai); }
.tema-azul.section-paper .kanji-num{ color: var(--ai); }
.tema-azul.section-paper .head-rule{ background: var(--ai); }

/* el color también en los propios bloques, no solo en los detalles pequeños */
.tema-verde .reasons-grid,
.tema-verde .benefits-grid,
.tema-verde .card-grid{ background: rgba(92,143,95,0.35); }
.tema-verde .reason,
.tema-verde .benefit,
.tema-verde .tech-card{
  background: linear-gradient(180deg, rgba(92,143,95,0.14), rgba(92,143,95,0) 60%), var(--sumi);
  border-top: 3px solid var(--moss);
}
.tema-verde.section-paper .benefit,
.tema-verde.section-paper .tech-card{
  background: linear-gradient(180deg, rgba(92,143,95,0.22), rgba(28,45,61,0) 60%), var(--sumi);
}

.tema-azul .reasons-grid,
.tema-azul .card-grid,
.tema-azul .benefits-grid{ background: rgba(74,144,217,0.35); }
.tema-azul .reason,
.tema-azul .benefit,
.tema-azul .tech-card{
  background: linear-gradient(180deg, rgba(74,144,217,0.14), rgba(74,144,217,0) 60%), var(--sumi);
  border-top: 3px solid var(--ai-light);
}
.tema-azul.section-paper .benefit,
.tema-azul.section-paper .tech-card{
  background: linear-gradient(180deg, rgba(74,144,217,0.22), rgba(28,45,61,0) 60%), var(--sumi);
}

/* separadores de las listas (Beneficios, Bushido) también teñidos */
.tema-verde .kanji-list > li{ border-top-color: rgba(92,143,95,0.3); }
.tema-azul .kanji-list > li{ border-top-color: rgba(74,144,217,0.3); }

/* Ken Burns continuo en el fondo del hero */
.hero-bg img{ animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform: scale(1.06); } to{ transform: scale(1.18); } }

/* giro lento continuo del ensō tras dibujarse */
.enso-wrap.is-spinning{ animation: enso-spin 50s linear infinite; transform-origin: center; }
@keyframes enso-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

/* velo de revelado tipo "wipe" para imágenes grandes de sección */
.split-media{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .hero-bg img{ animation:none; }
  .enso-wrap.is-spinning{ animation:none; }
}

@media (max-width: 900px){
  .marquee-group span, .marquee-group .kanji-mark{ font-size: 0.72rem; padding: 0 1rem; }
}

/* ==========================================================================
   SAKURA — pétalos de cerezo cayendo en bucle (algunas secciones)
   ========================================================================== */
.page-hero{ position: relative; overflow: hidden; }
.sakura-container{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.sakura-petal{
  position: absolute;
  top: -8%;
  left: var(--x, 50%);
  width: var(--size, 16px);
  height: var(--size, 16px);
  opacity: 0;
  animation: sakura-fall var(--duration, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
.sakura-petal svg{ width: 100%; height: 100%; display:block; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
@keyframes sakura-fall{
  0%    { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  6%    { opacity: 0.9; }
  50%   { transform: translate3d(var(--drift, 40px), calc(var(--caida, 800px) * 0.58), 0) rotate(190deg); }
  94%   { opacity: 0.85; }
  100%  { transform: translate3d(calc(var(--drift, 40px) * -1), var(--caida, 800px), 0) rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .sakura-petal{ display: none; }
}


/* ---- Nuestro dojo: vídeo, rejilla de fotos y foto de la entrada en el mapa ---- */
.video-frame{ position:relative; border:1px solid var(--line-strong); background:#000; box-shadow: var(--shadow-ink); }
.video-frame video{ display:block; width:100%; height:auto; aspect-ratio: 848/478; background:#000; }
.dojo-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px, 1.6vw, 18px); margin-top: clamp(16px, 2.4vw, 28px); }
.dojo-grid figure{ position:relative; margin:0; overflow:hidden; border:1px solid var(--line); }
.dojo-grid img{ display:block; width:100%; height:auto; aspect-ratio: 16/9; object-fit:cover; transition: transform .8s var(--ease-out); }
.dojo-grid figure:hover img{ transform: scale(1.04); }
.dojo-grid figcaption{ position:absolute; left:0; right:0; bottom:0; padding: 1.4rem 1rem 0.7rem; font-family: var(--f-mono); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--washi); background: linear-gradient(transparent, rgba(0,0,0,0.65)); }
@media (max-width: 640px){ .dojo-grid{ grid-template-columns: 1fr; } }
.map-embed .map-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.map-embed:has(.map-photo)::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,23,26,0.35), rgba(20,23,26,0.82)); }
.map-embed .map-photo ~ .map-card{ z-index:1; justify-content:flex-end; }
.map-embed .map-photo ~ .map-card .map-card-address{ color: var(--washi-dim); }


/* ---- v1.3: vídeo YouTube, grupos adultos/infantil, horarios, Suzuki Sensei, página infantil ---- */
:root{ --kids: #e07a2e; --kids-bright: #f0934a; --adults: #4a90d9; }
.yt-embed{ position:relative; aspect-ratio:16/9; background:#000; border:1px solid var(--line-strong); box-shadow: var(--shadow-ink); overflow:hidden; }
.yt-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-facade{ position:absolute; inset:0; display:block; background: radial-gradient(circle at 50% 50%, #2a3b4c, #0d1114); }
.yt-facade img{ width:100%; height:100%; object-fit:cover; opacity:.85; transition: opacity .3s, transform .8s var(--ease-out); }
.yt-facade:hover img{ opacity:1; transform: scale(1.02); }
.yt-play{ position:absolute; left:50%; top:50%; width:84px; height:60px; transform:translate(-50%,-50%); filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)); transition: transform .25s var(--ease-out); }
.yt-play svg{ width:100%; height:100%; }
.yt-facade:hover .yt-play{ transform:translate(-50%,-50%) scale(1.08); }
.yt-label{ position:absolute; left:1rem; bottom:.9rem; font-family: var(--f-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color: var(--washi); background: rgba(0,0,0,.55); padding:.35rem .6rem; }

.groups-split{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(24px, 3vw, 40px); }
.group-block{ border:1px solid var(--line); border-top: 3px solid var(--adults); padding: clamp(14px, 2vw, 22px); display:flex; flex-direction:column; gap: 1rem; background: rgba(0,0,0,.08); }
.group-block.is-kids{ border-top-color: var(--kids); }
.group-block .dojo-grid{ margin-top:0; grid-template-columns: 1fr 1fr; }
.group-block .btn{ align-self:flex-start; }
.group-block-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; }
.group-pill{ font-family: var(--f-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; padding:.35rem .7rem; color:#0d1114; background: var(--adults); font-weight:600; }
.is-kids .group-pill{ background: var(--kids); }
.group-block-time{ font-family: var(--f-mono); font-size:.8rem; color: var(--washi-dim); }
@media (max-width: 860px){ .groups-split{ grid-template-columns: 1fr; } }
@media (max-width: 640px){ .group-block .dojo-grid{ grid-template-columns: 1fr 1fr; } }

.sched-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(14px, 2vw, 26px); }
.sched-card{ border:1px solid var(--line-strong); border-left: 4px solid var(--adults); padding: clamp(18px, 2.4vw, 30px); display:flex; flex-direction:column; gap:1.2rem; background: rgba(0,0,0,.1); }
.sched-card.is-kids{ border-left-color: var(--kids); }
.sched-card header{ display:flex; align-items:center; gap:1rem; }
.sched-icon{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--adults); color:#fff; flex-shrink:0; }
.is-kids .sched-icon{ background: var(--kids); }
.sched-icon svg{ width:30px; height:30px; }
.sched-card h3{ font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--washi); line-height:1.1; }
.sched-age{ font-family: var(--f-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--washi-dim); margin-top:.2rem; }
.sched-rows{ list-style:none; margin:0; padding:0; }
.sched-rows li{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding: .85rem 0; border-top:1px solid var(--line); }
.sched-day{ font-family: var(--f-display); font-size:1.1rem; color: var(--washi); }
.sched-time{ font-family: var(--f-mono); color: var(--sun); white-space:nowrap; font-size:1rem; }
.sched-card .btn{ align-self:flex-start; margin-top:auto; }
.sched-place{ display:flex; align-items:center; gap:.6rem; margin-top:1.6rem; font-family: var(--f-mono); font-size:.82rem; color: var(--washi-dim); }
.sched-place svg{ width:18px; height:18px; color: var(--aka-bright); flex-shrink:0; }
@media (max-width: 760px){ .sched-grid{ grid-template-columns: 1fr; } }
.pricing-grid.pricing-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.price-card.is-kids-price{ border-color: var(--kids); }
.price-value.price-ask{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
@media (max-width: 900px){ .pricing-grid.pricing-3{ grid-template-columns: 1fr; } }

.suzuki-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(8px, 1.2vw, 14px); }
.suzuki-grid figure{ position:relative; margin:0; overflow:hidden; border:1px solid var(--line); }
.suzuki-grid img{ display:block; width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-out); }
.suzuki-grid figure:hover img{ transform: scale(1.04); }
.suzuki-grid figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .6rem; font-family: var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--washi); background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.sz-main{ grid-column: span 4; aspect-ratio: 16/8; }
.sz-main img{ object-position: center 30%; }
.sz-wide{ grid-column: span 2; aspect-ratio: 4/3; }
.sz-tall{ grid-column: span 1; aspect-ratio: 9/16; }
.sz-full{ grid-column: span 4; aspect-ratio: 16/7; }
.suzuki-grid .sz-tall{ aspect-ratio:auto; }
.suzuki-grid > .sz-wide:nth-child(2){ grid-column: span 2; grid-row: span 1; }
@media (max-width: 760px){
  .suzuki-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sz-main, .sz-full, .sz-wide{ grid-column: span 2; }
  .sz-main{ aspect-ratio: 16/10; }
  .sz-tall{ grid-column: span 1; aspect-ratio: 9/14; }
}

.g-tag{ position:absolute; top:.6rem; left:.6rem; z-index:2; font-family: var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:.25rem .55rem; color:#0d1114; background: var(--adults); }
.g-tag-infantil{ background: var(--kids); }

/* página infantil */
.kids-hero-badge{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem; font-family: var(--f-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:#0d1114; background: var(--kids); padding:.45rem .8rem; font-weight:600; }
.kids-steps{ counter-reset: paso; }
.kids-steps .tech-card .mono-label{ color: var(--kids-bright); }
.tema-infantil .kanji-num{ color: var(--kids); }
.kids-photos{ display:grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: clamp(8px, 1.2vw, 14px); }
.kids-photos figure{ position:relative; margin:0; overflow:hidden; border:1px solid var(--line); }
.kids-photos img{ width:100%; height:100%; object-fit:cover; display:block; }
.kids-photos .kp-main{ grid-row: span 2; }
.kids-photos figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .6rem; font-family: var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--washi); background: linear-gradient(transparent, rgba(0,0,0,.7)); }
@media (max-width: 760px){ .kids-photos{ grid-template-columns:1fr; } .kids-photos .kp-main{ grid-row:auto; } }
.main-nav{ gap: clamp(.9rem, 1.6vw, 1.8rem); }
@media (min-width: 1181px){ .main-nav a, .header-cta .btn, .brand-text, .brand-text small{ white-space: nowrap; } }
@media (max-width: 1340px){ .header-cta .tel-link{ display:none; } }
@media (max-width: 1180px){ .main-nav{ display:none; } .menu-btn{ display:flex; } }


/* ---- v1.4: página de instructores ---- */
.inst-photo{ position:relative; margin:0; border:1px solid var(--line-strong); box-shadow: var(--shadow-ink); overflow:hidden; }
.inst-photo img{ display:block; width:100%; height:auto; aspect-ratio: 16/9; object-fit:cover; object-position: center 62%; }
.inst-photo figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.1rem .8rem; font-family: var(--f-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color: var(--washi); background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.inst-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(14px, 2vw, 24px); align-items:stretch; }
.inst-card{ border:1px solid var(--line-strong); border-top: 3px solid var(--sun); padding: clamp(20px, 2.6vw, 32px); background: rgba(0,0,0,.12); display:flex; flex-direction:column; gap:.55rem; }
.inst-card.is-sensei{ border-top-color: var(--aka); }
.inst-card h3{ font-family: var(--f-display); font-size: clamp(1.35rem, 2.2vw, 1.8rem); color: var(--washi); line-height:1.15; }
.inst-card p{ color: var(--washi-dim); font-size:.95rem; }
.inst-card p + p{ margin-top:.3rem; }
.inst-rank{ width:76px; height:76px; border-radius:50%; border:1px solid var(--sun); display:flex; align-items:center; justify-content:center; margin-bottom:.6rem; }
.is-sensei .inst-rank{ border-color: var(--aka-bright); background: rgba(161,60,48,.12); }
.inst-kanji{ font-family: var(--f-display); font-size:1.35rem; color: var(--washi); letter-spacing:.05em; }
.inst-role{ font-family: var(--f-mono); font-size:.74rem !important; letter-spacing:.1em; text-transform:uppercase; color: var(--sun) !important; }
.is-sensei .inst-role{ color: var(--aka-bright) !important; }
.inst-grade{ font-family: var(--f-mono); font-size:.9rem !important; color: var(--washi) !important; padding-bottom:.6rem; border-bottom:1px solid var(--line); margin-bottom:.4rem; }
@media (max-width: 900px){ .inst-grid{ grid-template-columns: 1fr 1fr; } .inst-card.is-sensei{ grid-column: span 2; } }
@media (max-width: 600px){ .inst-grid{ grid-template-columns: 1fr; } .inst-card.is-sensei{ grid-column: auto; } .inst-photo img{ aspect-ratio: 4/3; } }
@media (min-width: 1181px) and (max-width: 1300px){ .main-nav{ gap: .85rem; } .main-nav a{ font-size: .9rem; } }

.inst-photos{ display:grid; grid-template-columns: 1.6fr 1fr; gap: clamp(10px, 1.6vw, 18px); align-items:stretch; }
.inst-photos .inst-photo img{ height:100%; aspect-ratio:auto; }
.inst-photos .inst-photo:first-child img{ aspect-ratio: 4/3; }
.inst-photo-2 img{ object-position: center 35% !important; }
@media (max-width: 760px){ .inst-photos{ grid-template-columns: 1fr; } .inst-photos .inst-photo img{ aspect-ratio: 4/3; height:auto; } }

.sz-w3{ grid-column: span 3; aspect-ratio: 16/10; }
@media (max-width: 760px){ .sz-w3{ grid-column: span 2; } }
/* menú móvil: con 8 apartados debe poder desplazarse y no cortar el primero */
.mobile-nav{ justify-content: flex-start; overflow-y: auto; padding-top: calc(var(--gutter) + 72px); padding-bottom: calc(var(--gutter) + 72px); }
.mobile-nav > a{ font-size: clamp(1.3rem, 4.2vh, 2rem); padding: .5rem 0; }

.inst-avatar{ position:relative; width:112px; height:112px; margin-bottom:.6rem; }
.inst-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center center; border:2px solid var(--sun); display:block; }
.inst-avatar-kanji{ position:absolute; right:-6px; bottom:-2px; font-family: var(--f-display); font-size:.85rem; color:#0d1114; background: var(--sun); border-radius:999px; padding:.2rem .5rem; letter-spacing:.04em; }

.is-sensei .inst-avatar img{ border-color: var(--aka-bright); }
.is-sensei .inst-avatar-kanji{ background: var(--aka-bright); color:#fff; }


/* ---- WordPress ---- */
body.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px; } }
.form-notice{ padding:0.9rem 1rem; margin-bottom:1.2rem; border:1px solid var(--line-strong); font-size:0.95rem; }
.form-notice.is-ok{ border-color: var(--moss); color: var(--moss-bright); }
.form-notice.is-error{ border-color: var(--aka); color: var(--aka-bright); }
.kd-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }