/*
=====================================================
CDA - style.css (ordenado)
=====================================================
SECCIONES:
- ROOT / TOKENS
- RESET / BASE
- HEADER / NAV
- INDEX / HOME
- PAGES: EVENTOS
- PAGES: DOJOS
- PAGES: INFORMACION / INSTRUCTORES
- FOOTER
- LIGHTBOX / GALERIAS
- MEDIA QUERIES
=====================================================
*/

:root{
  --bg0:#05050a;
  --bg1:#0a0b10;
  --paper:#f7f5ef;
  --ink:#0b0b0f;
  --text:#eef2ff;
  --muted:rgba(238,242,255,.68);

  --gold1:#e7d28a;
  --gold2:#b48e47;

  --red:#e11d48;
  --blue:#60a5fa;

  --stroke:rgba(255,255,255,.10);
  --shadow: rgba(0,0,0,.55);

  --radius: 22px;
  --radiusSm: 16px;

  --max: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: #37517e;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  overflow-x:hidden;
}

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

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.grain{
  pointer-events:none;
  position:fixed;
  inset:0;
  opacity:.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  z-index: 0;
}

#inkCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity: .55;
}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(26px);
transition: opacity .9s ease, transform .9s ease, filter .9s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; filter:none; }
  .hero__img{ transition:none ; }
}

/* Header */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 18px;
  background: rgba(5,5,10,.62);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
}
.brand__logo{
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.45));
}
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__title{
  font-family: Jost, Inter, sans-serif;
  font-weight:700;
  letter-spacing:.4px;
  font-size: 25px;
  background: linear-gradient(180deg, var(--gold1), var(--gold2));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}
.brand__sub{
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,242,255,.7);
}

/* Nav */
.nav{ display:flex; align-items:center; gap: 12px; }
.nav__toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,11,15,.55);
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: rgba(238,242,255,.9);
  border-radius: 999px;
  transition: transform .25s ease, opacity .25s ease;
}

.nav__menu{
  list-style:none;
  display:flex;
  gap: 18px;
  margin:0;
  padding:0;
}
.nav__link{
  text-decoration:none;
  font-weight:600;
  font-size: 13px;
  color: rgba(238,242,255,.86);
  padding: 10px 12px;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.nav__link:hover{
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.nav__cta{
  border: 1px solid rgba(231,210,138,.35);
  background: linear-gradient(180deg, rgba(231,210,138,.08), rgba(180,142,71,.06));
}
.nav__cta:hover{ background: rgba(231,210,138,.12); }


/* ===========================
   Responsive menu scaling
   Ajusta header/nav a cualquier resolución
   =========================== */
:root{
  --header-pad-y: clamp(10px, 1.0vw, 14px);
  --header-pad-x: clamp(12px, 1.2vw, 18px);
  --brand-logo: clamp(34px, 2.2vw, 44px);
  --brand-title: clamp(16px, 1.25vw, 22px);
  --brand-sub: clamp(10px, .85vw, 13px);
  --nav-font: clamp(12px, .95vw, 14px);
  --nav-gap: clamp(10px, 1.1vw, 16px);
  --nav-pad-y: clamp(8px, .8vw, 10px);
  --nav-pad-x: clamp(10px, .9vw, 12px);
}

.site-header{
  padding: var(--header-pad-y) var(--header-pad-x);
}

.brand__logo{
  width: var(--brand-logo);
  height: var(--brand-logo);
}

.brand__title{
  font-size: var(--brand-title);
  letter-spacing: .25px;
  white-space: nowrap;
}

.brand__sub{
  font-size: var(--brand-sub);
  letter-spacing: .20em;
}

.nav{
  gap: var(--nav-gap);
}

.nav__menu{
  gap: var(--nav-gap);
}

.nav__link{
  font-size: var(--nav-font);
  padding: var(--nav-pad-y) var(--nav-pad-x);
  white-space: nowrap;
}

/* Evita que el menú “explote” en pantallas medianas:
   pasamos a modo hamburguesa un poco antes */
@media (max-width: 1100px){
  .nav__toggle{ display:block; }
  .nav__menu{
    position: fixed;
    top: 72px;
    left: 14px;
    right: 14px;
    background: rgba(5,5,10,.92);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 14px;
    display:grid;
    gap: 10px;
    transform: translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .nav__menu.is-open{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }
}

/* En desktop amplio: mantiene una sola línea y evita saltos raros */
@media (min-width: 1101px){
  .nav__menu{
    display:flex;
    flex-wrap: nowrap;
    align-items:center;
  }
}


@media (max-width: 880px){
  .nav__toggle{ display:block; }
  .nav__menu{
    position: fixed;
    top: 70px;
    left: 14px;
    right: 14px;
    background: rgba(5,5,10,.92);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 14px;
    display:grid;
    gap: 10px;
    transform: translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .nav__menu.is-open{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }
}

/* Hero */
.hero{
  position:relative;
  min-height: 92vh;
  padding-top: 86px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  z-index: 1;
}
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; min-height: auto; }
}

.hero__media{
  position:relative;
  overflow:hidden;
  border-bottom-right-radius: 40px;
  border-top-right-radius: 40px;
  border: 1px solid rgba(255,255,255,.06);
  margin-left: 18px;
  background: #000;
}
@media (max-width: 980px){
  .hero__media{
    margin: 0 18px;
    border-radius: 26px;
    height: 56vh;
  }
}

.hero__slides{ position:absolute; inset:0; }
.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity:0;
  transform: scale(1.03);
  transition: opacity .9s ease, transform 1.2s ease;
  filter: saturate(1.05) contrast(1.05);
}
.hero__img.is-active{
  opacity:1;
  transform: scale(1.00);
}

.hero__mask{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding: 18px;
}
.hero__sun{
  position:absolute;
  right: 10%;
  top: 14%;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(225,29,72,.35), rgba(225,29,72,.10) 72%, transparent 74%);
  filter: blur(.2px);
  animation: sunPulse 6.2s ease-in-out infinite;
}
@keyframes sunPulse{
  0%,100%{ transform: scale(1); opacity:.9; }
  50%{ transform: scale(1.04); opacity:1; }
}
.hero__kanji{
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: clamp(28px, 4vw, 54px);
  color: rgba(255,255,255,.90);
  text-shadow: 0 18px 40px rgba(0,0,0,.55);
  transform: translateY(-6px);
}

.hero__dots{
  position:absolute;
  left: 18px;
  bottom: 16px;
  display:flex;
  gap: 10px;
  z-index: 2;
}
.dot{
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.25);
  cursor:pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.dot.is-active{
  background: rgba(225,29,72,.9);
  border-color: rgba(225,29,72,.9);
  transform: scale(1.25);
}

.hero__content{
  padding: 62px 0 42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 16px;
}
@media (max-width: 980px){
  .hero__content{ padding: 26px 0 40px; }
}
.eyebrow{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(238,242,255,.78);
  display:flex;
  align-items:center;
  gap: 10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(231,210,138,.28);
  background: rgba(231,210,138,.08);
  font-weight:700;
  letter-spacing: .10em;
  font-size: 11px;
  color: rgba(231,210,138,.95);
}
.pill--dark{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(238,242,255,.9);
}

.hero__title{
  margin:0;
  font-family: Jost, Inter, sans-serif;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
}
.ink{
  position:relative;
  display:inline-block;
}
.ink::after{
  content:"";
  position:absolute;
  left: -6px;
  right: -6px;
  bottom: .12em;
  height: .62em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(225,29,72,.40), rgba(231,210,138,.22));
  filter: blur(0.5px);
  z-index: -1;
  transform: rotate(-1.2deg);
  opacity:.85;
  animation: inkSweep 3.8s ease-in-out infinite;
}
@keyframes inkSweep{
  0%,100%{ transform: rotate(-1.2deg) scaleX(1); opacity:.78; }
  50%{ transform: rotate(.3deg) scaleX(1.04); opacity:1; }
}

.hero__lead{
  margin:0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 54ch;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 4px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(238,242,255,.92);
  font-weight:700;
  font-size: 13px;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 18px 34px rgba(0,0,0,.22);
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{
  border-color: rgba(231,210,138,.32);
  background: linear-gradient(180deg, rgba(231,210,138,.22), rgba(180,142,71,.12));
}
.btn--primary:hover{
  background: linear-gradient(180deg, rgba(231,210,138,.30), rgba(180,142,71,.18));
  box-shadow: 0 24px 60px rgba(231,210,138,.10);
}
.btn--ghost{
  background: rgba(255,255,255,.05);
}
.btn--sm{ padding: 10px 14px; font-size: 12px; }
.btn--block{ width:100%; }

.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 540px){
  .stats{ grid-template-columns: 1fr; }
}
.stat{
  padding: 14px 14px 12px;
  border-radius: var(--radiusSm);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.stat__k{
  font-weight:800;
  letter-spacing:.02em;
  font-size: 15px;
  background: linear-gradient(180deg, var(--gold1), var(--gold2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat__v{
  margin-top: 6px;
  display:block;
  color: rgba(238,242,255,.72);
  font-size: 12.5px;
}

.scrollcue{
  position:absolute;
  right: 18px;
  bottom: 16px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(238,242,255,.72);
  text-decoration:none;
  z-index: 2;
}
.scrollcue__line{
  width: 44px;
  height: 1px;
  background: rgba(231,210,138,.55);
  position:relative;
  overflow:hidden;
}
.scrollcue__line::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation: line 1.7s ease-in-out infinite;
}
@keyframes line{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}
.scrollcue__txt{ font-size: 12px; letter-spacing:.18em; text-transform: uppercase; }

/* Sections */
.section{
  position:relative;
  z-index: 1;
  padding: 74px 0;
}
.section--dark{
  background: radial-gradient(900px 420px at 10% 0%, rgba(231,210,138,.10), transparent 60%),
              radial-gradient(900px 420px at 90% 20%, rgba(96,165,250,.08), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section--paper{
  background: radial-gradient(1100px 520px at 20% -10%, rgba(231,210,138,.14), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-top: 1px solid rgba(255,255,255,.06);
}

.section-head{ margin-bottom: 22px; }
.h2{
  margin: 0;
  font-family: Jost, Inter, sans-serif;
  font-size: clamp(26px, 2.7vw, 36px);
  line-height: 1.1;
}
.h3{
  margin: 0;
  font-family: Jost, Inter, sans-serif;
  font-size: 18px;
  letter-spacing: .2px;
}
.muted{ color: var(--muted); margin: 6px 0 0; }
.body{ color: rgba(238,242,255,.86); line-height: 1.7; }
.fineprint{ color: rgba(238,242,255,.58); font-size: 12px; margin: 10px 0 0; }

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 980px){
  .grid-2{ grid-template-columns: 1fr; }
}

.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,10,.55);
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
  padding: 22px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 240px at 10% 0%, rgba(225,29,72,.14), transparent 60%);
  pointer-events:none;
}
.card__badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  letter-spacing:.18em;
  text-transform: uppercase;
  color: rgba(238,242,255,.75);
  margin-bottom: 12px;
}
.dot-red{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(225,29,72,.9);
  box-shadow: 0 0 0 6px rgba(225,29,72,.12);
}
.divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 16px 0;
}
.jp{
  font-family: "Noto Serif JP", serif;
  letter-spacing: .08em;
  margin-left: 6px;
  opacity:.88;
}
.quote{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.quote__bar{
  width: 4px;
  height: auto;
  align-self: stretch;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(231,210,138,.75), rgba(225,29,72,.45));
}
.card__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Right panel */
.panel{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.20);
}
.panel__top{
  display:flex;
  gap: 14px;
  align-items:center;
  margin-bottom: 14px;
}
.seal{
  width: 56px; height: 56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(231,210,138,.32), rgba(180,142,71,.08));
  border: 1px solid rgba(231,210,138,.30);
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}
.feature-list{
  list-style:none;
  padding:0;
  margin: 14px 0 0;
  display:grid;
  gap: 10px;
}
.feature-list li{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  color: rgba(238,242,255,.86);
  line-height:1.6;
}
.feature-list i{ color: rgba(231,210,138,.9); margin-top: 2px; }

.mini-gallery{ margin-top: 18px; }
.mini{
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
}
.mini img{
  height: 170px;
  width: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  transition: transform .8s ease;
}
.mini:hover img{ transform: scale(1.06); }
.mini figcaption{
  padding: 10px 12px;
  color: rgba(238,242,255,.72);
  font-size: 12px;
}

/* Dojos */
.dojo-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .dojo-grid{ grid-template-columns: 1fr; }
}
.dojo-card{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,10,.55);
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
}
.dojo-card__img{ position:relative; }
.dojo-card__img img{
  height: 240px;
  width: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.08);
  transition: transform 1.0s ease;
}
.dojo-card:hover .dojo-card__img img{ transform: scale(1.06); }
.dojo-card__label{
  position:absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(238,242,255,.92);
  font-weight: 800;
  letter-spacing:.06em;
  backdrop-filter: blur(10px);
}
.dojo-card__body{ padding: 16px; }
.dojo-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}

.dojo-more{
  text-align: center;
  margin-top: 30px;
}

/* Events */
.events{
  display:grid;
  gap: 14px;
  margin-top: 18px;
}
.event-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 16px;
  display:grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  box-shadow: 0 26px 70px rgba(0,0,0,.18);
}
@media (max-width: 620px){
  .event-card{ grid-template-columns: 1fr; }
}
.event-card__date{
  border-radius: 18px;
  border: 1px solid rgba(231,210,138,.22);
  background: linear-gradient(180deg, rgba(231,210,138,.18), rgba(180,142,71,.08));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding: 12px 10px;
  min-height: 86px;
}
.event-card__date .m{
  font-size: 12px;
  letter-spacing:.22em;
  text-transform: uppercase;
  color: rgba(231,210,138,.95);
  font-weight: 900;
}
.event-card__date .d{
  font-size: 18px;
  font-weight: 900;
  color: rgba(238,242,255,.92);
}
.event-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Contact paper */
.paper{
  border-radius: var(--radius);
  color: white;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 34px 90px rgba(0,0,0,.25);
  padding: 22px;
  position:relative;
  overflow:hidden;
}
.paper::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(231,210,138,.18), transparent 55%),
              radial-gradient(circle at 70% 65%, rgba(225,29,72,.08), transparent 58%);
  transform: rotate(18deg);
  pointer-events:none;
}
.paper *{ position:relative; }
.paper .muted{ color: rgb(255, 255, 255); }
.paper a{ color: rgba(255, 255, 255, 0.92); }

.form{ margin-top: 14px; }
.form__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .form__row{ grid-template-columns: 1fr; }
}
.field{
  display:grid;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}
.field span{ color: rgba(255, 255, 255, 0.72); }
.field input, .field textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,11,15,.22);
  background: rgba(255,255,255,.75);
  outline:none;
  font: inherit;
  font-weight: 600;
}
.field input:focus, .field textarea:focus{
  border-color: rgba(180,142,71,.55);
  box-shadow: 0 0 0 4px rgba(231,210,138,.20);
}

/* Contact cards */
.contact-cards{
  display:grid;
  gap: 12px;
}
.contact-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,10,.55);
  padding: 16px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.contact-card__icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(231,210,138,.12);
  border: 1px solid rgba(231,210,138,.22);
  color: rgba(231,210,138,.92);
  flex: 0 0 auto;
}

/* Footer */
.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.28);
  padding: 22px 0;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}
.footer__brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.footer__brand img{
  width: 44px; height: 44px;
}
.footer__title{
  margin:0;
  font-weight: 900;
  letter-spacing:.2px;
}
.footer__sub{
  margin: 3px 0 0;
  font-family: "Noto Serif JP", serif;
  letter-spacing: .10em;
  font-size: 12px;
  color: rgba(238,242,255,.66);
}
.social{
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  display:inline-grid;
  place-items:center;
  text-decoration:none;
  transition: transform .25s ease, background .25s ease;
}
.social:hover{ transform: translateY(-2px) rotate(4deg); background: rgba(231,210,138,.12); }

/* Small safety: prevent anchor being hidden by fixed header */
:target{ scroll-margin-top: 90px; }


/* === Ultra Footer CDA (integrado) === */
.ua-footer{
      --bg0:#020617;
      --bg1:#0b1220;
      --text:#e5e7eb;
      --muted:#9ca3af;
      --accent:#22c55e;
      --accent2:#60a5fa;
      --shadow: rgba(0,0,0,.45);
    }

.ua-footer.reveal.is-visible{
      opacity:1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .ua-footer{
      position:relative;
      overflow:hidden;
      padding: 80px 18px 38px;
      background:
        radial-gradient(1200px 500px at 15% -10%, rgba(34,197,94,.18), transparent 60%),
        radial-gradient(900px 420px at 85% 0%, rgba(96,165,250,.14), transparent 55%),
        linear-gradient(180deg, #0b1220 0%, #020617 70%);
      border-top: 1px solid rgba(255,255,255,.06);
    }

    .ua-footer::before{
      content:"";
      position:absolute;
      top:0; left:-15%;
      width:130%;
      height:4px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity:.75;
      filter: drop-shadow(0 8px 18px rgba(34,197,94,.35));
      animation: brush 6.2s linear infinite;
    }
    @keyframes brush{
      0%{ transform: translateX(-28%); }
      100%{ transform: translateX(28%); }
    }

    .ua-particle{
      position:absolute;
      width:6px; height:6px;
      border-radius:999px;
      background: rgba(34,197,94,.55);
      box-shadow: 0 0 0 6px rgba(34,197,94,.08);
      opacity:.65;
      animation: particleRise linear infinite;
      pointer-events:none;
    }
    .ua-particle.ua-blue{
      background: rgba(96,165,250,.45);
      box-shadow: 0 0 0 6px rgba(96,165,250,.08);
    }
    @keyframes particleRise{
      from{ transform: translateY(0) translateX(0); }
      to{ transform: translateY(-120vh) translateX(40px); }
    }

    .ua-footer-wrap{
      max-width: 1200px;
      margin: 0 auto;
      display:grid;
      grid-template-columns: 1.25fr 1fr 1fr;
      gap: 34px;
      align-items:start;
    }

    @media (max-width: 980px){
      .ua-footer-wrap{ grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px){
      .ua-footer{ padding-top: 64px; }
      .ua-footer-wrap{ grid-template-columns: 1fr; text-align:left; }
    }

    .ua-brand{
      display:flex;
      gap:14px;
      align-items:center;
      margin-bottom: 14px;
    }
    .ua-brand svg{
      width:62px; height:62px;
      flex:0 0 auto;
      filter: drop-shadow(0 14px 22px rgba(0,0,0,.35));
    }
    .ua-brand-mark{
      stroke-dasharray: 260;
      stroke-dashoffset: 260;
      animation: draw 2.2s ease forwards;
    }
    @keyframes draw{
      to{ stroke-dashoffset: 0; }
    }
    .ua-brand-title{
      margin:0;
      font-weight: 700;
      letter-spacing:.2px;
      line-height:1.1;
      font-size: 18px;
    }
    .ua-brand-sub{
      margin:4px 0 0;
      color: var(--muted);
      font-size: 13px;
      letter-spacing:.3px;
    }

    .ua-block{
      padding: 60px 60px 60px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(2,6,23,.55);
      border-radius: 18px;
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      position:relative;
      overflow:hidden;
    }
    .ua-block::after{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(500px 160px at 10% 0%, rgba(34,197,94,.10), transparent 60%);
      pointer-events:none;
    }
    .ua-block h4{
      margin:0 0 10px;
      font-size: 14px;
      letter-spacing: .6px;
      text-transform: uppercase;
      color: rgba(229,231,235,.92);
    }
    .ua-block p, .ua-block li{
      color: rgba(229,231,235,.86);
      margin: 0;
      line-height:1.55;
      font-size: 13.5px;
    }
    .ua-kv{
      display:grid;
      gap:10px;
      margin-top: 10px;
    }
    .ua-kv .ua-k{
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing:.5px;
      margin-bottom: 3px;
    }
    .ua-kv a{
      color: rgba(229,231,235,.9);
      text-decoration:none;
      border-bottom: 1px dashed rgba(34,197,94,.35);
      transition: all .25s ease;
    }
    .ua-kv a:hover{
      color: var(--accent);
      border-bottom-color: rgba(34,197,94,.85);
    }

    .ua-links{
      list-style:none;
      padding:0;
      margin: 0;
      display:grid;
      gap: 8px;
    }
    .ua-links a{
      text-decoration:none;
      color: rgba(229,231,235,.9);
      display:inline-flex;
      gap:10px;
      align-items:center;
      transition: transform .25s ease, color .25s ease;
      position:relative;
    }
    .ua-links a::before{
      content:"";
      width:10px; height:2px;
      background: rgba(96,165,250,.8);
      border-radius:999px;
      transition: width .25s ease, background .25s ease;
    }
    .ua-links a:hover{
      transform: translateX(4px);
      color: var(--accent);
    }
    .ua-links a:hover::before{
      width:18px;
      background: rgba(34,197,94,.95);
    }

    .ua-social-row{
      display:flex;
      flex-wrap:wrap;
      gap: 14px;
      margin-top: 60px;
    }
    .ua-social-item{ position:relative; isolation:isolate; }

    .ua-social-item a{
      width:56px; height:56px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 23px;
      color: rgba(229,231,235,.95);
      background: rgba(2,6,23,.92);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 16px 28px rgba(0,0,0,.35);
      transition: transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .45s ease, background .45s ease, color .45s ease, border-color .45s ease;
      animation: floaty 6.5s ease-in-out infinite;
      position:relative;
      overflow:hidden;
    }
    .ua-social-item a::before{
      content:"";
      position:absolute;
      inset:-60%;
      background:
        radial-gradient(circle at 30% 30%, rgba(34,197,94,.35), transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(96,165,250,.25), transparent 60%);
      transform: rotate(25deg) scale(.6);
      opacity: 0;
      transition: opacity .45s ease, transform .45s ease;
    }
    .ua-social-item a::after{
      content:"";
      position:absolute;
      inset:8px;
      border-radius:999px;
      border: 2px solid rgba(34,197,94,.0);
      transform: scale(.85);
      opacity:0;
      transition: opacity .45s ease, transform .45s ease, border-color .45s ease;
    }

    @keyframes floaty{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-10px); }
    }
    .ua-social-item:nth-child(2) a{ animation-delay:.25s }
    .ua-social-item:nth-child(3) a{ animation-delay:.55s }
    .ua-social-item:nth-child(4) a{ animation-delay:.85s }
    .ua-social-item:nth-child(5) a{ animation-delay:1.15s }
    .ua-social-item:nth-child(6) a{ animation-delay:1.45s }

    .ua-social-item a:hover{
      transform: translateY(-14px) scale(1.28) rotate(8deg);
      background: rgba(34,197,94,.95);
      color: #04110b;
      border-color: rgba(34,197,94,.75);
      box-shadow: 0 24px 60px rgba(34,197,94,.35);
    }
    .ua-social-item a:hover::before{
      opacity: 1;
      transform: rotate(10deg) scale(1.05);
    }
    .ua-social-item a:hover::after{
      opacity:1;
      transform: scale(1.05);
      border-color: rgba(2,6,23,.35);
    }

    .ua-tip{
      position:absolute;
      left:50%;
      bottom: 76px;
      transform: translateX(-50%) translateY(14px);
      opacity:0;
      pointer-events:none;
      transition: opacity .25s ease, transform .25s ease;
      white-space:nowrap;
      z-index:2;
    }
    .ua-tip .ua-bubble{
      background: rgba(34,197,94,.95);
      color: #04110b;
      padding: 7px 10px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing:.2px;
      box-shadow: 0 16px 40px rgba(0,0,0,.3);
    }
    .ua-tip .ua-bubble small{
      display:block;
      font-weight:600;
      opacity:.85;
      margin-top: 1px;
    }
    .ua-tip::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:-8px;
      transform: translateX(-50%);
      border: 8px solid transparent;
      border-top-color: rgba(34,197,94,.95);
      filter: drop-shadow(0 10px 14px rgba(0,0,0,.25));
    }
    .ua-social-item:hover .ua-tip{
      opacity:1;
      transform: translateX(-50%) translateY(0);
    }

    .ua-footer-bottom{
      max-width:1200px;
      margin: 28px auto 0;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.07);
      color: rgba(156,163,175,.9);
      font-size: 12.5px;
      display:flex;
      gap: 14px;
      justify-content: space-between;
      flex-wrap:wrap;
    }
    .ua-footer-bottom a{
      color: rgba(229,231,235,.9);
      text-decoration:none;
      border-bottom: 1px dashed rgba(96,165,250,.35);
    }
    .ua-footer-bottom a:hover{ color: var(--accent); border-bottom-color: rgba(34,197,94,.8); }

            @keyframes shine{
      0%,100%{ transform: translateX(-10px) rotate(20deg); opacity:.75; }
      50%{ transform: translateX(14px) rotate(20deg); opacity:1; }
    }

    .demo-spacer{
      height: 120vh;
      display:flex;
      align-items:center;
      justify-content:center;
      color: rgba(229,231,235,.45);
      font-size: 14px;
    }

/* CDA integration override: align footer accents with site palette */
.ua-footer{
  --accent: var(--gold1);
  --accent2: var(--blue);
  --bg0: rgba(0,0,0,.35);
  --bg1: rgba(255,255,255,.04);
  --text: rgba(238,242,255,.94);
  --muted: rgba(238,242,255,.68);
}

.ua-footer, .ua-footer *{ font-family: inherit; }


/* === Inner pages (Dojos / Eventos) === */
.page-hero{
  padding-top: 104px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(900px 420px at 20% -20%, rgba(231,210,138,.16), transparent 55%),
    radial-gradient(900px 520px at 80% -10%, rgba(225,29,72,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
}
.page-hero .container{ padding: 8px 0 0; }

.dojo-filters{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 16px;
  box-shadow: 0 26px 70px rgba(0,0,0,.18);
}
.search-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.search{
  flex: 1 1 280px; min-height:44px; padding:12px 14px;
  border-radius: 14px; border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22); color: rgba(238,242,255,.92);
  outline:none; font-weight:700;
}
.search:focus{ border-color: rgba(231,210,138,.38); box-shadow: 0 0 0 4px rgba(231,210,138,.14); }

.zona-buttons{ margin-top:12px; display:flex; flex-wrap:wrap; gap:10px; }
.zona-btn{
  border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(238,242,255,.86);
  padding: 10px 14px;
  font-weight:900; font-size:12px; letter-spacing:.08em;
  cursor:pointer;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.zona-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
.zona-btn.is-active{
  border-color: rgba(231,210,138,.35);
  background: linear-gradient(180deg, rgba(231,210,138,.18), rgba(180,142,71,.10));
  color: rgba(238,242,255,.95);
}

.dojo-list{ margin-top:16px; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
@media (max-width: 980px){ .dojo-list{ grid-template-columns: 1fr; } }

.dojo-item{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,10,.55);
  padding: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.20);
  position:relative; overflow:hidden;
}
.dojo-item::before{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(520px 220px at 10% 0%, rgba(96,165,250,.10), transparent 60%);
  pointer-events:none;
}
.dojo-item__title{
  margin:0 0 10px;
  font-family: Jost, Inter, sans-serif;
  font-size: 18px; letter-spacing:.3px;
  background: rgb(255, 196, 2); font-weight: 900; text-decoration:none;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.dojo-item p{ margin:6px 0; color: rgba(238,242,255,.82); line-height:1.6; font-size:13.5px; }
.dojo-item a{ color: rgba(231,210,138,.92); font-weight:900; text-decoration:none; }
.dojo-item a:hover{ text-decoration: underline; }

.events-filters{ margin-bottom: 16px; }
.field--dark span{ color: rgba(238,242,255,.70); }
.field--dark select{
  width:100%; padding:12px 12px;
  border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22); color: rgba(238,242,255,.92);
  font-weight:800; outline:none;
}

.months{ display:grid; gap:14px; }
.month-section{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 16px;
  box-shadow: 0 26px 70px rgba(0,0,0,.16);
}
.month-section h2{ margin:0 0 10px; font-family:Jost, Inter, sans-serif; letter-spacing:.2px; }
.event-box{
  border-radius: 18px;
  border: 1px solid rgba(231,210,138,.18);
  background: linear-gradient(180deg, rgba(231,210,138,.10), rgba(180,142,71,.05));
  padding: 14px;
}
.event-box h4{ margin:0 0 8px; color: rgba(231,210,138,.95); }
.event-box p{ margin:6px 0; color: rgba(238,242,255,.86); line-height:1.6; }

/* === Footer social animated icons === */
.ua-social-item.ua-anim a{
  position:relative;
  overflow:hidden;
}
.ua-social-item.ua-anim a i{
  font-size: 18px;
  transition: transform .35s ease, color .35s ease, filter .35s ease;
}
.ua-social-item.ua-anim a:hover i{
  transform: translateY(-2px) scale(1.15) rotate(6deg);
  color: var(--accent);
  filter: drop-shadow(0 6px 14px rgba(231,210,138,.45));
}

/* Ripple effect */
.ua-social-item .ua-ripple{
  position:absolute;
  inset:50% auto auto 50%;
  width:8px;
  height:8px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(231,210,138,.55), rgba(231,210,138,.15), transparent 70%);
  transform: translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}
.ua-social-item.ua-anim a:hover .ua-ripple{
  animation: uaRipple .8s ease-out forwards;
}
@keyframes uaRipple{
  0%{ transform: translate(-50%,-50%) scale(0); opacity:.9; }
  100%{ transform: translate(-50%,-50%) scale(12); opacity:0; }
}

/* Subtle idle float */
@media (prefers-reduced-motion: no-preference){
  .ua-social-item.ua-anim{
    animation: uaFloat 6s ease-in-out infinite;
  }
  .ua-social-item.ua-anim:nth-child(2){ animation-delay: .6s; }
  .ua-social-item.ua-anim:nth-child(3){ animation-delay: 1.2s; }
  .ua-social-item.ua-anim:nth-child(4){ animation-delay: 1.8s; }
}
@keyframes uaFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

/* Footer social SVG icons (no external dependency) */
.ua-ico{
  width: 18px;
  height: 18px;
  display:block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ua-ico--fill{
  fill: currentColor;
  stroke: none;
}
.ua-social-item.ua-anim a{
  color: rgba(238,242,255,.92);
}
.ua-social-item.ua-anim a:hover{
  color: var(--accent);
}

/* === Rich content pages === */
.rich{max-width: 78ch;}
.rich p{line-height:1.75; margin: 0 0 14px;}
.rich h3,.rich h4{margin:18px 0 8px; font-family: var(--font-serif);}
.rich img{max-width:100%; height:auto; border-radius:18px; border:1px solid rgba(231,210,138,.18); box-shadow: var(--shadow-soft);}
.figure{margin:14px 0;}
.figure img{display:block;}
.toc{border:1px solid rgba(231,210,138,.18); border-radius:22px; padding:16px; background: rgba(10,10,18,.55); box-shadow: var(--shadow-soft);}
.toc__title{margin:0 0 10px; font-weight:900; letter-spacing:.06em; color: rgba(238,242,255,.85);}
.toc__grid{display:flex; flex-wrap:wrap; gap:10px;}
.toc__link{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:1px solid rgba(231,210,138,.18); background: rgba(0,0,0,.25); color: rgba(238,242,255,.9); text-decoration:none; transition: transform .2s ease, border-color .2s ease, background .2s ease;}
.toc__link:hover{transform: translateY(-2px); border-color: rgba(231,210,138,.36); background: rgba(231,210,138,.08);}

.gallery{display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px;}
.gallery__item{grid-column: span 6;}
@media (min-width: 900px){ .gallery__item{grid-column: span 4;} }
.gallery__link{display:block; position:relative; overflow:hidden; border-radius:24px; border:1px solid rgba(231,210,138,.18); box-shadow: var(--shadow-soft); background: rgba(0,0,0,.25);}
.gallery__link img{display:block; width:100%; height: 240px; object-fit: cover; transform: scale(1.02); transition: transform .5s ease;}
.gallery__cap{position:absolute; left:12px; right:12px; bottom:12px; padding:10px 12px; border-radius:16px; background: rgba(5,5,10,.72); border: 1px solid rgba(231,210,138,.18); color: rgba(238,242,255,.92); font-weight:800; backdrop-filter: blur(10px); opacity:0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;}
.gallery__link:hover img{transform: scale(1.08);}
.gallery__link:hover .gallery__cap{opacity:1; transform: translateY(0);}

.details-stack{display:grid; gap: 12px;}
.ua-details{border:1px solid rgba(231,210,138,.18); border-radius:22px; background: rgba(10,10,18,.55); overflow:hidden;}
.ua-details summary{list-style:none; cursor:pointer; padding:16px 18px; font-weight:900; color: rgba(238,242,255,.92); position:relative;}
.ua-details summary::-webkit-details-marker{display:none;}
.ua-details summary::after{content:"＋"; position:absolute; right:18px; top:14px; color: rgba(231,210,138,.9); font-size: 18px; transition: transform .25s ease;}
.ua-details[open] summary::after{transform: rotate(45deg);}
.ua-details__body{padding: 0 18px 18px;}
.ua-details__body a{color: rgba(231,210,138,.95); font-weight:800;}

/* === Performance mode ===
   Improves scroll FPS by reducing heavy filters while scrolling and on mobile. */
body.is-scrolling .grain{ opacity: .22; }
body.is-scrolling .ua-footer,
body.is-scrolling .card,
body.is-scrolling .dojo-item,
body.is-scrolling .month-section{
  /* reduce costly shadows during active scroll */
  box-shadow: none ;
}

@media (max-width: 820px){
  /* backdrop-filter is expensive on many mobiles */
  .glass, .ua-bubble, .ua-footer, .nav{
    backdrop-filter: none ;
    -webkit-backdrop-filter: none ;
  }
  /* soften big shadows on mobile */
  .card, .dojo-item, .month-section, .ua-footer{
    box-shadow: 0 10px 26px rgba(0,0,0,.14);
  }
}

/* === Nav submenu (Aikidō / CDA) === */
.nav__item--has-sub{ position: relative; }
.nav__chev{ margin-left: 8px; font-weight: 900; opacity: .8; }

.nav__sub{
  list-style: none;
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,10,.86);
  box-shadow: 0 26px 70px rgba(0,0,0,.26);
  display: none;
  min-width: 260px;
}
.nav__sub li{ margin: 0; }
.nav__sub a{
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(238,242,255,.88);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 13px;
  line-height: 1.25;
}
.nav__sub a:hover{
  background: rgba(255,255,255,.06);
  color: rgba(231,210,138,.95);
}

/* Desktop: open on hover/focus */
@media (min-width: 981px){
  .nav__item--has-sub:hover > .nav__sub,
  .nav__item--has-sub:focus-within > .nav__sub{
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    z-index: 999;
  }
}

/* Mobile: submenu becomes accordion inside open menu */
@media (max-width: 980px){
  .nav__sub{
    position: static;
    min-width: unset;
    margin-top: 8px;
  }
  .nav__item--has-sub.is-sub-open > .nav__sub{ display: block; }
  .nav__link--parent{ display:flex; align-items:center; justify-content:space-between; }
}

/* Dojos: map pin */
.dojo-item__pin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(231,210,138,.12);
  border: 1px solid rgba(231,210,138,.22);
  margin-right: 8px;
}
.dojo-item a{
  color: rgba(231,210,138,.95);
  text-decoration: none;
  font-weight: 900;
}
.dojo-item a:hover{ text-decoration: underline; }


.dojo-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.dojo-item{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dojo-item > *{
  flex-shrink: 0;
}

.dojo-item .card,
.dojo-item__content{
  flex: 1;
}

/* Mantener botones o links al fondo */
.dojo-item .actions{
  margin-top: auto;
}

@media (max-width: 900px){
  .dojo-list{
    grid-template-columns: 1fr;
  }
}

/* === Dojos grid: 2 columnas, altura según contenido === */
.dojo-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start; /* no estirar tarjetas */
}

.dojo-item{
  height: auto; /* se ajusta al contenido */
}

@media (max-width: 900px){
  .dojo-list{ grid-template-columns: 1fr; }
}

/* === Animación de aparición (stagger) para Dojos === */
.dojo-item.reveal{
  transform: translateY(14px) scale(.99);
}
.dojo-item.reveal.is-visible{
  transform: translateY(0) scale(1);
}

/* escalonado suave por filas */
@media (prefers-reduced-motion: no-preference){
  .dojo-list .dojo-item.reveal{ transition-delay: 0ms; }
  .dojo-list .dojo-item.reveal:nth-child(1){ transition-delay: 40ms; }
  .dojo-list .dojo-item.reveal:nth-child(2){ transition-delay: 80ms; }
  .dojo-list .dojo-item.reveal:nth-child(3){ transition-delay: 120ms; }
  .dojo-list .dojo-item.reveal:nth-child(4){ transition-delay: 160ms; }
  .dojo-list .dojo-item.reveal:nth-child(5){ transition-delay: 200ms; }
  .dojo-list .dojo-item.reveal:nth-child(6){ transition-delay: 240ms; }
  .dojo-list .dojo-item.reveal:nth-child(7){ transition-delay: 280ms; }
  .dojo-list .dojo-item.reveal:nth-child(8){ transition-delay: 320ms; }
  .dojo-list .dojo-item.reveal:nth-child(9){ transition-delay: 360ms; }
  .dojo-list .dojo-item.reveal:nth-child(10){ transition-delay: 400ms; }
  /* luego se repite para no sumar delays enormes */
  .dojo-list .dojo-item.reveal:nth-child(n+11){ transition-delay: 120ms; }
}

/* === Dojos grid alignment fix === */
/* Fuerza alineación a la izquierda cuando hay un número impar */
.dojo-list{
  justify-items: stretch; /* evita centrado */
}
.dojo-item{
  justify-self: start; /* si hay una sola, queda a la izquierda */
}

/* === Eventos month filter compact === */
.events-filters{
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.events-filters .field{
  max-width: 260px; /* más corto */
  width: 100%;
}

.events-filters select{
  text-align: center;
  padding: 10px 12px;
  font-weight: 900;
}

@media (max-width: 520px){
  .events-filters .field{
    max-width: 220px;
  }
}

/* === Menu dropdown contrast === */
/* Fondo más claro y texto más oscuro para mejor legibilidad */
.nav__sub{
  background: linear-gradient(
    180deg,
    rgba(245,245,245,.95),
    rgba(230,230,235,.92)
  );
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.nav__sub a{
  color: #1a1a1f;
  font-weight: 900;
}

.nav__sub a:hover{
  background: linear-gradient(
    135deg,
    rgba(208,0,32,.15),
    rgba(48,16,112,.12)
  );
  color: #000;
}

/* === Menu brand emphasis (Centro de Difusión) === */
.nav__brand,
.nav__title,
.nav li:first-child > a{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .06em;
}

@media (max-width: 900px){
  .nav__brand,
  .nav__title,
  .nav li:first-child > a{
    font-size: 14px;
  }
}

/* === Logo text emphasis === */
/* Texto del logo (no afecta links del menú) */
.logo-text,
.site-logo__text,
.header-logo span,
.brand-text{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.1;
}

@media (max-width: 900px){
  .logo-text,
  .site-logo__text,
  .header-logo span,
  .brand-text{
    font-size: 28px;
  }
}

@media (max-width: 520px){
  .logo-text,
  .site-logo__text,
  .header-logo span,
  .brand-text{
    font-size: 24px;
  }
}

/* === Login page === */
.jp-login{
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,10,.55);
  box-shadow: 0 26px 70px rgba(0,0,0,.18);
  padding: 18px;
  overflow:hidden;
  position: relative;
}
.jp-login::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 220px at 15% 0%, rgba(96,165,250,.10), transparent 60%),
    radial-gradient(520px 220px at 85% 0%, rgba(225,29,72,.12), transparent 60%);
  pointer-events:none;
}
.jp-login__form{ position: relative; z-index: 1; display:flex; flex-direction:column; gap: 14px; }
.jp-login__title{
  margin: 0 0 6px;
  font-family: Jost, Inter, sans-serif;
  letter-spacing: .2px;
}
.jp-field{ display:flex; flex-direction:column; gap: 8px; }
.jp-field input{
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255, 255, 255, 0.7); 
  outline: none;
  font-weight: 800;
}
.jp-field input:focus{
  border-color: rgba(231,210,138,.38);
  box-shadow: 0 0 0 4px rgba(231,210,138,.14);
}
.jp-pass{ position: relative; display:flex; align-items:center; }
.jp-pass input{ width: 100%; padding-right: 52px; }
.jp-pass__toggle{
  position:absolute;
  right: 8px;
  height: 36px;
  width: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.jp-pass__toggle:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(231,210,138,.30); }
.jp-login__submit{ width: 100%; min-height: 48px; }
.jp-login__note{ margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 13px; line-height: 1.5; }

/* === Contact form unified background === */
.contact-form,
.form-contacto,
form[action*="contact"],
form#contact,
#contacto form{
  background: #37517e;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: 0 26px 70px rgba(0,0,0,.18);
  padding: 18px;
}

.contact-form input,
.contact-form textarea,
.form-contacto input,
.form-contacto textarea,
#contacto input,
#contacto textarea{
  background: rgba(224, 210, 210, 0.671);
  color: rgba(0, 0, 0, 0.92);
  border: 1px solid rgba(255,255,255,.14);
}

/* === Login  === */
.jp-login{
  padding: 22px;
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(48,16,112,.22), transparent 60%),
    radial-gradient(900px 320px at 80% 0%, rgba(208,0,32,.16), transparent 60%),
    rgba(5,5,10,.55);
  border: 1px solid rgba(231,210,138,.12);
}

.jp-login::after{
  content:"";
  position:absolute; inset:-1px;
  background:
    linear-gradient(120deg, rgba(231,210,138,.10), transparent 25%),
    linear-gradient(300deg, rgba(231,210,138,.08), transparent 25%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.7;
}

.jp-login__title{
  font-size: 28px;
}

.jp-login__sub{
  margin: -6px 0 10px;
  color: rgba(238,242,255,.72);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 12px;
  text-transform: uppercase;
}

/* Wax seal */
.jp-seal{
  position:absolute;
  top: 16px;
  right: 16px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,.25), transparent 55%),
    linear-gradient(145deg, rgba(208,0,32,.92), rgba(128,0,20,.92));
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  transform: rotate(-8deg);
}

.jp-seal__kanji{
  font-weight: 1000;
  font-size: 26px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 18px rgba(0,0,0,.35);
  letter-spacing: .08em;
}

.jp-seal__ring{
  position:absolute;
  inset: 7px;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.35);
  opacity: .7;
}

@media (prefers-reduced-motion: no-preference){
  .jp-seal{
    animation: jpSealFloat 6.5s ease-in-out infinite;
  }
  @keyframes jpSealFloat{
    0%,100%{ transform: rotate(-8deg) translateY(0); }
    50%{ transform: rotate(-6deg) translateY(-3px); }
  }

  .jp-login{
    animation: jpLoginGlow 9s ease-in-out infinite;
  }
  @keyframes jpLoginGlow{
    0%,100%{ box-shadow: 0 26px 70px rgba(0,0,0,.20); }
    50%{ box-shadow: 0 30px 90px rgba(0,0,0,.26); }
  }
}

/* Inputs premium */
.jp-field input:focus{
  border-color: rgba(231,210,138,.44);
  box-shadow: 0 0 0 4px rgba(231,210,138,.14), 0 18px 40px rgba(0,0,0,.22);
}

/* Button premium */
.btn.btn--primary.jp-login__submit{
  border: 1px solid rgba(231,210,138,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
}
.btn.btn--primary.jp-login__submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(0,0,0,.30);
}

/* === Info cards (CDA/Aikido) === */
.info-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.info-card{
  position: relative;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,10,.55);
  box-shadow: 0 26px 70px rgba(0,0,0,.18);
  overflow: hidden;
}
.info-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 15% 0%, rgba(48,16,112,.16), transparent 60%),
    radial-gradient(520px 220px at 85% 0%, rgba(208,0,32,.12), transparent 60%);
  pointer-events:none;
  opacity:.9;
}
.info-card__head{
  position: relative;
  z-index: 1;
  padding: 16px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.info-card__head h2,
.info-card__head h3,
.info-card__head h4{
  margin: 0;
  font-size: 18px;
  letter-spacing: .02em;
}
.info-card__body{
  position: relative;
  z-index: 1;
  padding: 14px 18px 18px;
  color: rgba(238,242,255,.88);
}
.info-card__body p{ margin: 0 0 10px; }
.info-card__body ul{ margin: 0; padding-left: 18px; }
.info-card__body li{ margin: 6px 0; }

@media (max-width: 980px){
  .info-cards{ grid-template-columns: 1fr; }
}

/* === Info card media === */
.info-card__media{
  margin: 12px 0 14px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.info-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .45s ease, filter .45s ease;
  filter: saturate(1.05) contrast(1.02);
}
@media (prefers-reduced-motion: no-preference){
  .info-card:hover .info-card__img{ transform: scale(1.06); }
}

/* === Dojos rebuilt grid === */
.dojo-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
  justify-items: stretch;
}
@media (max-width: 900px){
  .dojo-grid{ grid-template-columns: 1fr; }
}

.dojo-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,10,.55);
  box-shadow: 0 26px 70px rgba(0,0,0,.18);
  padding: 16px 18px 18px;
  overflow: hidden;
  position: relative;
}
.dojo-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 220px at 15% 0%, rgba(48,16,112,.12), transparent 60%),
    radial-gradient(520px 220px at 85% 0%, rgba(208,0,32,.10), transparent 60%);
  pointer-events:none;
}
.dojo-card > *{ position: relative; z-index: 1; }

.dojo-item__title{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: .02em;
}
.dojo-item__pin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(48,16,112,.14);
  border: 1px solid rgba(208,0,32,.22);
  margin-right: 8px;
}
.dojo-card p{ margin: 8px 0; color: rgba(238,242,255,.88); }
.dojo-card b{ color: rgba(238,242,255,.96); }
.dojo-card a{ color: rgb(255, 196, 2); font-weight: 900; text-decoration:none; }
.dojo-card a:hover{ text-decoration: underline; }

/* === Dojos filters (zona) === */
.dojos-filters{
  display:flex;
  justify-content:center;
  margin: 0 0 18px;
}
.dojos-filters .field{
  max-width: 320px;
  width: 100%;
}
.dojos-filters label{
  display:block;
  margin: 0 0 8px;
  color: rgba(238,242,255,.72);
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 12px;
  text-transform: uppercase;
  text-align:center;
}
.dojos-filters select{
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(238,242,255,.92);
  font-weight: 900;
  outline: none;
}
.dojos-filters select:focus{
  border-color: rgba(231,210,138,.38);
  box-shadow: 0 0 0 4px rgba(231,210,138,.14);
}

.dojo-grid.has-single{
  justify-items: start;
}

/* === Back to top === */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(5,5,10,.72);
  color: rgba(238,242,255,.92);
  box-shadow: 0 18px 46px rgba(0,0,0,.30);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
  z-index: 9999;
}
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover{
  background: rgba(48,16,112,.28);
  border-color: rgba(231,210,138,.28);
}
.back-to-top__icon{
  font-size: 18px;
  font-weight: 1000;
  transform: translateY(-1px);
}

/* === Dojos chips filters (zona) === */
.dojos-filters{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
  margin: 0 0 18px;
}
.dojos-filters__label{
  margin: 0;
  color: rgba(238,242,255,.72);
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 12px;
  text-transform: uppercase;
  text-align:center;
}
.dojos-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 980px;
}
.chip{
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(238,242,255,.86);
  font-weight: 900;
  letter-spacing: .02em;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.chip:hover{ transform: translateY(-1px); border-color: rgba(231,210,138,.22); }
.chip--active{
  background: linear-gradient(135deg, rgba(48,16,112,.34), rgba(208,0,32,.22));
  border-color: rgba(231,210,138,.24);
  color: rgba(240,240,240,.95);
}

/* === Submenu: mismo fondo que menú + hover indicador === */
.nav__sub{
  background: rgba(5,5,10,.72);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav__sub a{
  position: relative;
  color: rgba(238,242,255,.90);
}
.nav__sub a::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(231,210,138,.0), rgba(231,210,138,.9), rgba(231,210,138,.0));
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.nav__sub a:hover::after,
.nav__sub a:focus-visible::after{
  transform: scaleX(1);
  opacity: 1;
}
.nav__sub a:hover{
  background: linear-gradient(135deg, rgba(48,16,112,.18), rgba(208,0,32,.14));
  color: rgba(240,240,240,.98);
}

/* === Dojos search === */
.dojos-search{
  width: 100%;
  max-width: 980px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.dojos-search__label{
  width: 100%;
  text-align:center;
  color: rgba(238,242,255,.72);
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 12px;
  text-transform: uppercase;
}
#dojoSearch{
  width: 100%;
  max-width: 520px;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(238,242,255,.92);
  outline: none;
  font-weight: 900;
}
#dojoSearch:focus{
  border-color: rgba(231,210,138,.38);
  box-shadow: 0 0 0 4px rgba(231,210,138,.14);
}
.dojos-empty{
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,10,.55);
  color: rgba(238,242,255,.82);
  text-align: center;
  font-weight: 900;
}


/* ===========================
   Director / Leonardo card
   Más ancho para el texto
   =========================== */

#director .grid-2{
  grid-template-columns: 1.4fr 0.6fr;
  align-items: start;
}

/* Extra (ultra-wide): limita el ancho de lectura para que no quede “tirado” */
@media (min-width: 1400px){
  #director .grid-2 > .card{
    width: 140%;
    max-width: 760px;
  }
  #director .grid-2 > .card p{
    line-height: 1.7;
  }
}

/* En pantallas medianas */
@media (max-width: 1100px){
  #director .grid-2{
    grid-template-columns: 1.2fr 0.8fr;
  }
}

/* En mobile vuelve a una sola columna */
@media (max-width: 980px){
  #director .grid-2{
    grid-template-columns: 1fr;
  }
}
/*--------------------------------------------------------------
#  DANES INSTRUCTORES
--------------------------------------------------------------*/

/* ==== Tablas ==== */
.table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background-color: #428bca; /* Fondo azul */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  color: #000000; /* Texto negro */
}
.table th {
  background-color: #2a6ebd; /* Azul más oscuro */
  color: #fff;
  text-align: center;
  font-weight: 500;
  padding: 12px;
}
.table td {
  padding: 12px;
  vertical-align: middle;
  color: #0e0000; /* Texto negro */
}
.table tr:nth-child(even) { background-color: #3a7bb5; }
.table tr:nth-child(odd) { background-color: #428bca; }
.table tr:hover { background-color: #2a6ebd; }

/* ==== Tabs Modernos ==== */
.nav-tabs {
  border-bottom: none;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.nav-tabs .nav-link {
  border: none;
  border-radius: 12px;
  margin: 6px;
  padding: 12px 20px;
  background: #f1f7ff;
  color: #428bca;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.nav-tabs .nav-link:hover {
  background: #e1efff;
  color: #2a6ebd;
}
.nav-tabs .nav-link.active {
  background: #428bca;
  color: #fff;
  box-shadow: 0 4px 12px rgba(66,139,202,0.3);
}

/* Responsive: tabs como botones apilados */
@media (max-width: 768px) {
  .nav-tabs {
    flex-direction: column;
    align-items: stretch;
  }
  .nav-tabs .nav-link {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin: 6px 0;
    padding: 14px;
  }
}

.table td,
.table th {
  border: 1px solid #cfcfcf;
}


/* ===========================
   Secciones (TOC)
   Más ancho en Aikido y CDA
   (migrado desde style_japon.css)
   =========================== */

.toc{
  max-width: 1000px;   /* antes era más chico */
  margin-left: auto;
  margin-right: auto;
}

/* En pantallas grandes que aproveche mejor el espacio */
@media (min-width: 1200px){
  .toc{
    max-width: 1100px;
  }
}

/* En mobile se mantiene normal */
@media (max-width: 640px){
  .toc{
    max-width: 100%;
  }
}


/* ===========================
   PREMIUM LIGHTBOX CDA
   =========================== */

.img-lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.82);padding:14px}
.img-lightbox.is-open{display:block}
.img-lightbox__dialog{width:100%;height:100%;display:grid;place-items:center}
.img-lightbox__stage{
  width:min(1100px,96vw);
  height:min(84vh,84dvh);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:12px;
  transform:translateY(6px) scale(.98);
  opacity:0;
}
.img-lightbox__stage.is-enter{
  animation: cdaLbIn .18s ease-out forwards;
}
@keyframes cdaLbIn{
  to{transform:translateY(0) scale(1);opacity:1}
}
.img-lightbox__img{
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  display:block;
}
.img-lightbox__close{
  position:absolute; top:10px; right:10px;
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  color:#fff;font-size:26px;line-height:1;
  cursor:pointer;
}
.img-lightbox__prev,.img-lightbox__next{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.30);
  color:#fff;font-size:34px;line-height:1;
  cursor:pointer;
}
.img-lightbox__prev{left:10px}
.img-lightbox__next{right:10px}
.img-lightbox__counter{
  position:absolute; bottom:10px; left:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.28);
  color:#fff;
  font-size:.92rem;
}
@media (max-width:640px){
  .img-lightbox{padding:10px}
  .img-lightbox__stage{width:96vw;height:86vh}
  .img-lightbox__prev,.img-lightbox__next{width:44px;height:44px;font-size:30px}
}


/* ===========================
   FIX MOBILE GALERIA 1 COLUMNA
   =========================== */
@media (max-width: 768px){

  .gallery{
    display:grid ;
    grid-template-columns:1fr ;
    gap:14px;
  }

  .gallery__item{
    width:100%;
  }

  .gallery__link img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

}


/* ===========================
   8B) CDA TABLES (PALETA ORIGINAL)
   - Header dorado + base oscura como el sitio original
   - Responsive: scroll horizontal suave (sin romper contenido)
   =========================== */

.table-wrap{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border-radius: var(--radiusSm);
  border:1px solid var(--stroke);
  background: rgba(10,11,16,.86);
}

.table-wrap table{
  width:100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

main table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radiusSm);
  overflow:hidden;
  background: rgba(10,11,16,.78);
}

main thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 12px;
  text-align:left;
  font-weight: 800;
  color: var(--gold1);
  background: linear-gradient(180deg, rgba(180,142,71,.35), rgba(10,11,16,.95));
  border-bottom: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
}

main tbody td{
  padding: 12px 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.06);
  vertical-align: top;
}

main tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.02); }
main tbody tr:hover td{ background: rgba(231,210,138,.10); }

main tr > *:last-child{ border-right: 0; }
main tbody tr:last-child td{ border-bottom: 0; }

@media (max-width: 640px){
  .table-wrap table{ min-width: 640px; }
  main thead th, main tbody td{ padding: 10px 10px; }
}


/* ===========================
   UA TABS (SOLAPAS) - ORIGINAL
   - Colores como el sitio (negro + dorado)
   - Responsive: en mobile una debajo de la otra
   =========================== */
.ua-tabs{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background: #37517e;
  backdrop-filter: blur(8px);
  padding:12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.ua-tabs__bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
  align-items:center;
  padding:10px;
  border-radius:16px;
  background: #37517e;
  border:1px solid rgba(255,255,255,.10);
}
.ua-tab{
  appearance:none;
  border:1px solid rgba(231,210,138,.32);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  border-radius:999px;
  padding:10px 14px;
  font-weight:750;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  line-height:1;
  white-space:nowrap;
}
.ua-tab:hover{ transform: translateY(-1px); border-color: rgba(231,210,138,.55); background: rgba(231,210,138,.10); }
.ua-tab.is-active{
  background: linear-gradient(180deg, rgba(231,210,138,.28), rgba(0,0,0,.22));
  border-color: rgba(231,210,138,.75);
  color: rgba(255,255,255,.98);
}
.ua-tabs__panels{ margin-top:14px; background:#37517e;}
.ua-panel{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius:18px;
  padding:14px;
}
.ua-panel:focus{ outline:2px solid rgba(231,210,138,.55); outline-offset:2px; }
.ua-panel[hidden]{ display:none ; }

@media (max-width: 720px){
  .ua-tabs__bar{
    flex-direction:column;
    align-items:stretch;
  }
  .ua-tab{
    width:100%;
    text-align:center;
  }
}

/* ===========================
   TABLAS - ORIGINAL (negro + dorado)
   - Header dorado + fondo oscuro
   - Responsive: scroll horizontal con .table-wrap
   =========================== */
.table-wrap{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
.table-wrap table{
  width:100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
}
table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
  background: rgba(0,0,0,.18);
}
thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  text-align:left;
  padding: 12px 12px;
  font-weight: 900;
  color: rgba(231,210,138,.98);
  background: linear-gradient(180deg, rgba(231,210,138,.22), rgba(0,0,0,.72));
  border-bottom: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
}
tbody td{
  padding: 12px 12px;
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.02); }
tbody tr:hover td{ background: rgba(231,210,138,.08); }
tr > *{ border-right: 1px solid rgba(255,255,255,.06); }
tr > *:last-child{ border-right: 0; }
tbody tr:last-child td{ border-bottom: 0; }

@media (max-width: 640px){
  .table-wrap table{ min-width: 720px; }
  thead th, tbody td{ padding: 10px 10px; }
}


/* ===========================
   INDEX HORARIOS LIGHTBOX
   - Botón guardar + compatibilidad
   =========================== */
.img-lightbox__download{
  position:absolute;
  top:10px;
  left:10px;
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:20px;
  display:grid;
  place-items:center;
  text-decoration:none;
  cursor:pointer;
}
.img-lightbox__download:hover{
  background:rgba(231,210,138,.12);
  border-color:rgba(231,210,138,.55);
}

/* ===========================
   INFORMACION - EXAMEN KYU ADULTO
   2 columnas desktop / 1 columna mobile
   =========================== */
.ua-cards--adulto{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:start;
}
@media (max-width: 720px){
  .ua-cards--adulto{ grid-template-columns: 1fr; }
  .ua-cards--adulto .ua-card{ margin-bottom: 0; }
}

/* ===========================
   MOBILE - SEPARAR TABLAS (INFO/INSTRUCTORES)
   =========================== */
@media (max-width: 720px){
  .ua-panel .table-wrap{ margin-bottom: 18px; }
}


/* ===========================
   UA TABS (SOLAPAS) - MOBILE STACK
   =========================== */
@media (max-width: 720px){
  .ua-tabs__bar{ flex-direction:column; align-items:stretch; }
  .ua-tab{ width:100%; text-align:center; }
}


/* ===========================
   INFO KYU ADULTO - TARJETAS
   - Desktop 2 columnas / Mobile 1 columna
   =========================== */
.ua-cards--adulto{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:start;
}
@media (max-width: 820px){
  .ua-cards--adulto{ grid-template-columns: 1fr; }
}
.ua-card--adulto{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
}
.ua-card--adulto .ua-card__head{
  padding:12px 14px;
  background: linear-gradient(180deg, rgba(231,210,138,.18), rgba(0,0,0,.0));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ua-card--adulto .ua-card__title{
  margin:0;
  color: rgba(231,210,138,.98);
  font-weight:900;
}
.ua-card--adulto .ua-card__body{
  padding:12px 14px 14px;
}
.ua-card--adulto .ua-card__body a[download]{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-top:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(231,210,138,.45);
  background: rgba(231,210,138,.08);
  text-decoration:none;
  font-weight:800;
}
.ua-card--adulto .ua-card__body a[download]:hover{
  background: rgba(231,210,138,.14);
  border-color: rgba(231,210,138,.75);
}


/* ===========================
   INSTRUCTORES - REQUISITOS EN TARJETAS (MOBILE)
   - Desktop: tabla
   - Mobile: tarjetas por graduación
   =========================== */
.req-cards{ display:none; }

@media (max-width: 820px){
  table.req-table{ display:none; }
  .req-cards{
    display:grid;
    gap:14px;
    margin-top:12px;
  }
  .req-card{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    border-radius:18px;
    padding:12px;
    box-shadow: 0 18px 40px rgba(0,0,0,.30);
  }
  .req-card__title{
    margin:0 0 10px;
    font-weight:900;
    color: rgba(231,210,138,.98);
  }
  .req-card__grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  .req-card__item{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    padding:10px;
    border-radius:14px;
    background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
  }
  .req-card__k{
    color: rgba(255,255,255,.78);
    font-weight:800;
  }
  .req-card__v{
    text-align:right;
    color: rgba(255,255,255,.95);
    font-weight:800;
  }
}


/* =====================================================
   MOBILE MENU - CONTRASTE (mejor legibilidad)
   -----------------------------------------------------
   En mobile el desplegable del menú se veía muy oscuro.
   Ajuste: fondo más claro + texto oscuro + hover visible.
   ===================================================== */

@media (max-width: 1100px){
  .nav__menu{
    background: #37517e;
    box-shadow: 0 22px 55px rgba(0,0,0,.30);
  }
  .nav__menu .nav__link{
    color: white;
    font-weight: 900;
    background: rgba(0,0,0,.02);
  }
  .nav__menu .nav__link:hover{
    background: linear-gradient(135deg, rgba(208,0,32,.14), rgba(48,16,112,.10));
    color: white;
    transform: none;
  }
  .nav__menu .nav__cta{
    border-color: rgba(208,0,32,.25);
    background: rgba(208,0,32,.08);
  }
  .nav__menu .nav__cta:hover{
    background: rgba(208,0,32,.12);
  }
  /* Indicador del submenú (flecha) */
  .nav__chev{ color:#121218; opacity:.7; }
}


/* =====================================================
   HEADER TITULO AJUSTE (Argentina más abajo)
   -----------------------------------------------------
   Evita que el subtítulo choque con "Centro de Difusión del Aikido"
   ===================================================== */

.brand__subtitle,
.header__subtitle,
.brand small,
.brand span{
  display:block;
  margin-top:6px; /* separa el texto de Argentina hacia abajo */
  line-height:1.25;
}

/* ajuste extra en mobile */
@media (max-width: 768px){
  .brand__subtitle,
  .header__subtitle,
  .brand small,
  .brand span{
    margin-top:8px;
  }
}


/* =====================================================
   EVENTOS (Cards por mes + filtros)
   ===================================================== */

.events-controls{
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 10px 0;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,10,14,.75), rgba(10,10,14,.35));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.controls-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.controls-left{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.controls-label{
  font-weight: 1000;
  letter-spacing: .2px;
  color: rgba(231,210,138,.98);
}
.month-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.month-filter-btn{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(231,210,138,.30);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.month-filter-btn:hover{
  background: rgba(231,210,138,.12);
  border-color: rgba(231,210,138,.55);
  transform: translateY(-1px);
}
.month-filter-btn.is-active{
  background: rgba(231,210,138,.18);
  border-color: rgba(231,210,138,.75);
  color: rgba(255,255,255,.96);
}
.controls-right{display:flex; align-items:center; gap:10px;}
.month-select{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(231,210,138,.30);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  outline:none;
}
@media (min-width: 901px){
  .month-select{display:none;}
}
@media (max-width: 900px){
  .month-filters{display:none;}
}

/* Meses */
.events-wrap{padding: 18px 0 38px;}
.events-by-month{display:flex; flex-direction:column; gap:18px;}
.month-block{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius: 22px;
  padding: 16px 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}
.month-head{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.month-title{
  font-size: 22px;
  font-weight: 1100;
  letter-spacing: .3px;
}
.month-note{
  margin:0;
  opacity:.86;
  font-weight: 850;
}
.empty-month{
  opacity:.8;
  font-weight: 850;
  padding: 10px 2px 2px;
}

/* Grid de tarjetas: 3-4 columnas desktop, 1 columna mobile */
.events-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 980px){
  .events-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (min-width: 1240px){
  .events-grid{grid-template-columns: repeat(4, minmax(0, 1fr));}
}
@media (max-width: 700px){
  .events-grid{grid-template-columns: 1fr;}
}

/* Tarjetas de evento */
.event-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 12px 12px 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
  position:relative;
}
.event-card:hover{
  transform: translateY(-2px);
  border-color: rgba(231,210,138,.30);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.event-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.event-date{
  font-weight: 1000;
  opacity: .88;
  font-size: 13px;
  white-space: nowrap;
}
.event-title{
  margin: 0 0 8px 0;
  font-weight: 1100;
  letter-spacing: .2px;
  font-size: 16px;
  line-height: 1.25;
}
.event-desc{
  margin:0;
  opacity:.88;
  font-weight: 850;
  font-size: 13.5px;
  line-height: 1.35;
}

/* Badges por tipo */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1100;
  font-size: 12px;
  border: 1px solid rgba(231,210,138,.35);
  background: rgba(231,210,138,.10);
  color: rgba(255,255,255,.95);
}
.badge--national{
  border-color: rgba(208,0,32,.35);
  background: rgba(208,0,32,.10);
}
.badge--international{
  border-color: rgba(48,16,112,.40);
  background: rgba(48,16,112,.16);
}

/* Resaltado del card por tipo */
.event-card[data-type="national"]::before,
.event-card[data-type="international"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 18px;
  opacity:.75;
}
.event-card[data-type="national"]::before{
  box-shadow: inset 0 0 0 1px rgba(208,0,32,.22);
}
.event-card[data-type="international"]::before{
  box-shadow: inset 0 0 0 1px rgba(48,16,112,.26);
}

/* Animaciones de aparición */
.reveal-card{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}
.reveal-card.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Ocultar por filtro */
.month-block.is-hidden{display:none;}


.event-search{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(231,210,138,.30);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  outline:none;
  min-width: 260px;
}
.controls-search{display:flex; align-items:center;}
@media (max-width: 900px){
  .event-search{width:100%; min-width: 0;}
  .controls-search{flex: 1 1 280px;}
}

/* Tarjetas más compactas */
.event-card{
  padding: 10px 10px 12px;
}
.event-title{
  font-size: 15px;
  margin: 0 0 6px 0;
}
.event-desc{
  font-size: 12.8px;
  line-height: 1.33;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta: lugar / dicta / organiza */
.event-meta{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.meta-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  font-weight: 950;
  font-size: 12px;
  opacity: .95;
}
.meta-chip b{
  opacity:.78;
  font-weight: 1000;
}

/* Badge extra: Examen */
.badge--exam{
  border-color: rgba(0,170,120,.40);
  background: rgba(0,170,120,.12);
}

/* Animación más marcada */
.reveal-card{
  opacity: 0;
  transform: translateY(18px) scale(.985);
  filter: blur(2px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.9,.2,1), filter .55s ease;
  will-change: transform, opacity, filter;
}
.reveal-card.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.event-card:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 22px 55px rgba(0,0,0,.32);
}

/* Estado: búsqueda */
.event-card.is-hidden{display:none;}


/* Filtro SOLO desplegable */
.controls-bar{
  justify-content: center;
}
.controls-left{
  width: 100%;
  justify-content: center;
}
.controls-right{
  width: 100%;
  justify-content: center;
}
.month-select--only{
  min-width: min(340px, 88vw);
  text-align: center;
}
@media (min-width: 901px){
  .month-select{display:inline-flex ;}
}
.month-filters{display:none ;}

/* Callout del mes (pre-inscripción / inscripción final / etc.) */
.month-callout{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(231,210,138,.25);
  background: rgba(231,210,138,.08);
  margin: 10px 0 12px;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
}
.month-callout__pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1100;
  font-size: 12px;
  border: 1px solid rgba(231,210,138,.35);
  background: rgba(0,0,0,.14);
  color: rgba(231,210,138,.98);
  white-space: nowrap;
}
.month-callout__text{
  font-weight: 900;
  opacity: .92;
  line-height: 1.35;
}

/* Más prolijo: títulos y spacing */
.month-title{font-size: 20px;}
.month-block{padding: 14px 14px;}


.events-controls .controls-right{
  max-width: 420px;
}
@media (max-width: 700px){
  .events-controls .controls-right{max-width: 92vw;}
}


/* =====================================================
   EVENTOS ULTRA PRO (altura uniforme + meta con íconos)
   ===================================================== */

/* Grid prolijo: tarjetas misma altura por fila */
.events-grid{
  align-items: stretch;
}
.event-card{
  height: 100%;
  display:flex;
  flex-direction:column;
}
.event-meta{
  margin-top:auto; /* empuja meta al final para uniformidad */
}
.event-card__head{min-height: 34px;}
.event-desc{margin-bottom: 10px;}

/* Meta chips con íconos */
.meta-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight: 950;
  font-size: 12px;
  line-height: 1;
}
.meta-ico{
  width: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}
.meta-chip b{
  opacity:.72;
  font-weight: 1100;
}
.meta-val{
  opacity:.92;
}

/* Borde animado suave para Internacional */
.event-card[data-type="international"]{
  position:relative;
}
.event-card[data-type="international"]::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  padding:1px;
  background: conic-gradient(from 180deg, rgba(48,16,112,0), rgba(48,16,112,.7), rgba(231,210,138,.55), rgba(48,16,112,.7), rgba(48,16,112,0));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
  animation: intlGlow 4.5s linear infinite;
  pointer-events:none;
}
@keyframes intlGlow{
  0%{filter: blur(.2px); transform: rotate(0deg);}
  100%{filter: blur(.2px); transform: rotate(360deg);}
}
@media (prefers-reduced-motion: reduce){
  .event-card[data-type="international"]::after{animation:none;}
}


/* =====================================================
   EVENTOS VIEW TOGGLE (Tarjetas ↔ Lista)
   ===================================================== */

.controls-view{display:flex; align-items:center;}
.view-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(231,210,138,.30);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.view-toggle:hover{
  transform: translateY(-1px);
  background: rgba(231,210,138,.12);
  border-color: rgba(231,210,138,.55);
}
.view-toggle__icon{
  font-size: 14px;
  opacity:.92;
}
.view-toggle__text{
  font-size: 13px;
  letter-spacing:.2px;
}

/* LIST MODE */
.events-wrap.is-list .events-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.events-wrap.is-list .event-card{
  flex-direction:row;
  align-items:flex-start;
  gap:14px;
  padding: 12px 12px;
}
.events-wrap.is-list .event-card__head{
  flex: 0 0 190px;
  align-items:flex-start;
  justify-content:flex-start;
  margin-bottom:0;
  min-height:auto;
}
.events-wrap.is-list .badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.events-wrap.is-list .event-date{
  margin-top:8px;
}
.events-wrap.is-list .event-title,
.events-wrap.is-list .event-desc,
.events-wrap.is-list .event-meta{
  flex: 1 1 auto;
}
.events-wrap.is-list .event-title{margin-top:2px;}
.events-wrap.is-list .event-desc{
  -webkit-line-clamp: initial;
  overflow: visible;
}
.events-wrap.is-list .event-meta{
  margin-top:10px;
}

/* list mobile: vuelve a columna */
@media (max-width: 820px){
  .events-wrap.is-list .event-card{
    flex-direction:column;
  }
  .events-wrap.is-list .event-card__head{
    flex: none;
    width: 100%;
    justify-content:space-between;
    align-items:center;
  }
}


.controls-bar{justify-content:center;}
.controls-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  width:100%;
}

.month-select--ghost,
.view-toggle--ghost{
  background: transparent ;
  border: 0 ;
  box-shadow: none ;
  padding: 8px 10px ;
  border-radius: 12px ;
  color: rgba(255,255,255,.95);
}

.month-select--ghost{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align:center;
  min-width: min(260px, 88vw);
  outline:none;
  border: 1px solid rgba(231,210,138,.30) ;
  background: rgba(0,0,0,.10) ;
}
.month-select--ghost:focus{
  border-color: rgba(231,210,138,.70) ;
}

.view-toggle--ghost{
  border: 1px solid rgba(231,210,138,.30) ;
  background: rgba(0,0,0,.10) ;
}
.view-toggle--ghost:hover{
  background: rgba(231,210,138,.10) ;
}

/* Head layout: fecha arriba, badges debajo */
.event-card__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.event-date{
  font-size: 15px;
}
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* Badges por categoría */
.badge--seminario{
  border-color: rgba(231,210,138,.40);
  background: rgba(231,210,138,.14);
}
.badge--special{
  border-color: rgba(60,140,255,.35);
  background: rgba(60,140,255,.12);
}
.badge--danes{
  border-color: rgba(245,140,30,.35);
  background: rgba(245,140,30,.12);
}
.badge--examcat{
  border-color: rgba(0,170,120,.40);
  background: rgba(0,170,120,.14);
}
.badge--evento{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}

/* Lista view: conservar orden (fecha luego evento) */
.events-wrap.is-list .event-card__head{
  flex: 0 0 200px;
}
.events-wrap.is-list .event-card__head{
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
}
@media (max-width: 820px){
  .events-wrap.is-list .event-card__head{
    width:100%;
  }
}


/* Filtro meses: fondo más visible usando color base del sitio */
.month-select--ghost{
  background: #37517e ; /* tono del fondo CDA */
  color: #fff ;
  border: 1px solid rgba(231,210,138,.55) ;
  backdrop-filter: blur(6px);
}
.month-select--ghost:hover{
  background: #37517e ;
}
.month-select--ghost:focus{
  background: #37517e;
}

/* Quitar fondo de la sección de controles */
.events-controls{
  background: transparent ;
  box-shadow: none ;
  border: 0 ;
}

/* también limpiar posibles wrappers */
.controls-bar,
.controls-center{
  background: transparent ;
  box-shadow: none ;
}


/* ❌ Quitar cualquier posición fija o sticky */
.events-controls{
  position: relative ;
  top: auto ;
  z-index: auto ;
}

/* Fondo nuevo más acorde al estilo japonés CDA */
.month-select--ghost,
.view-toggle--ghost{
  border: 1px solid rgba(231,210,138,.45) ;
  color: #fff ;
  backdrop-filter: blur(8px);
}

/* Hover más elegante */
.month-select--ghost:hover,
.view-toggle--ghost:hover{
  background: #37517e;
  border-color: rgba(231,210,138,.75) ;
}

/* Flecha select visible */
.month-select--ghost{
  cursor:pointer;
  font-weight: 800;
  letter-spacing:.3px;
}


/* Wrapper para ocultar flecha nativa y usar icono propio */
.jp-select{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.jp-select select{
  padding-right: 42px ;
  background-image: none ;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.jp-select__icon{
  position:absolute;
  right: 14px;
  pointer-events:none;
  font-weight: 1100;
  opacity: .92;
  transform: translateY(-1px);
  transition: transform .18s ease, opacity .18s ease;
}

.jp-select:hover .jp-select__icon{
  transform: translateY(-2px);
  opacity: 1;
}

/* pequeño brillo al focus */
.jp-select:focus-within .jp-select__icon{
  transform: translateY(-2px) rotate(180deg);
}

/* Botón vista en el mismo lenguaje visual */
.view-toggle--jp{
  border: 1px solid rgba(231,210,138,.45) ;
  background:#37517e ;
}
.view-toggle--jp:hover{
  background: #37517e ;
  border-color: rgba(231,210,138,.75) ;
}


@media (max-width: 820px){
  /* Ocultar botón de vista en mobile */
  #viewToggle{display:none ;}

  /* Forzar vista tarjetas aunque exista is-list */
  .events-wrap.is-list .events-grid{
    display:grid ;
    gap: 14px ;
  }
  .events-wrap.is-list .event-card{
    flex-direction: column ;
    gap: 10px ;
  }
  .events-wrap.is-list .event-card__head{
    flex: none ;
    width: 100% ;
    justify-content: space-between ;
    align-items: flex-start ;
  }
}


/* Select de tipo: mismo look, un poco más corto */
.jp-select--type .type-select{
  min-width: min(220px, 86vw);
}

/* Badges (solo 5 tipos) */
.badge--seminario_internacional{
  border-color: rgba(231,210,138,.55);
  background: rgba(231,210,138,.16);
}
.badge--seminario_nacional{
  border-color: rgba(210,90,90,.45);
  background: rgba(210,90,90,.16);
}
.badge--clase_especial{
  border-color: rgba(60,140,255,.40);
  background: rgba(60,140,255,.14);
}
.badge--examen_kyu{
  border-color: rgba(0,170,120,.45);
  background: rgba(0,170,120,.16);
}
.badge--examen_danes{
  border-color: rgba(245,140,30,.45);
  background: rgba(245,140,30,.16);
}

/* cuando se filtra, ocultar tarjetas */
.event-card.is-hidden{
  display:none ;
}


/* ✅ Hacer visibles los "submenús" (options) del select */
.month-select--ghost,
.type-select{
  color: #fff ;
}

/* Estilo de options para que se lean */
.month-select--ghost option,
.type-select option{
  background-color: #1a0c40 ;
  color: #fff ;
}

/* Igualar filtro de tipo al de meses (mismo tamaño) */
.type-select{
  min-width: min(260px, 88vw);
}

/* Badges: 1 solo por evento, colores fijos */
.badge--seminario_internacional{
  border-color: rgba(231,210,138,.80) ;
  background: rgba(231,210,138,.22) ;
  color: rgba(255,255,255,.98) ;
  box-shadow: 0 0 0 1px rgba(231,210,138,.18) inset;
}
.badge--seminario_nacional{
  border-color: rgba(210,90,90,.65) ;
  background: rgba(210,90,90,.18) ;
}
.badge--clase_especial{
  border-color: rgba(60,140,255,.55) ;
  background: rgba(60,140,255,.16) ;
}
.badge--examen_kyu{
  border-color: rgba(0,170,120,.65) ;
  background: rgba(0,170,120,.18) ;
}
.badge--examen_dan{
  border-color: rgba(245,140,30,.70) ;
  background: rgba(245,140,30,.18) ;
}

/* Asegurar que el dropdown no quede "tapado" */
.events-controls,
.controls-bar,
.controls-center,
.jp-select{
  overflow: visible ;
}


.badge--clase_danes{
  border-color: rgba(180,120,255,.70) ;
  background: rgba(180,120,255,.18) ;
  color:#fff ;
}


/* Base icon */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.badge::before{
  display:inline-block;
  line-height: 1;
  font-size: 12px;
  opacity: .95;
  transform: translateY(-.5px);
}

/* Iconos por tipo */
.badge--seminario_internacional::before{ content:"⛩"; }   /* Torii = más importante */
.badge--seminario_nacional::before{ content:"🏯"; }        /* Castillo */
.badge--clase_especial::before{ content:"✨"; }            /* Especial */
.badge--clase_danes::before{ content:"🥋"; }               /* Gi */
.badge--examen_kyu::before{ content:"⬜"; } /* cinturón blanco */                /* Examen */
.badge--examen_dan::before{ content:"⬛"; } /* cinturón negro */                /* Examen */


/* Base: transición elegante */
.event-card{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

/* Internacional: dorado premium */
.event-card[data-kind="seminario_internacional"]{
  border-color: rgba(231,210,138,.75) ;
  box-shadow: 0 10px 30px rgba(231,210,138,.10);
}
.event-card[data-kind="seminario_internacional"]:hover{
  box-shadow: 0 14px 40px rgba(231,210,138,.16);
}

/* Nacional: rojo sobrio */
.event-card[data-kind="seminario_nacional"]{
  border-color: rgba(210,90,90,.60) ;
  box-shadow: 0 10px 30px rgba(210,90,90,.08);
}
.event-card[data-kind="seminario_nacional"]:hover{
  box-shadow: 0 14px 40px rgba(210,90,90,.12);
}

/* Clase especial: azul */
.event-card[data-kind="clase_especial"]{
  border-color: rgba(60,140,255,.55) ;
  box-shadow: 0 10px 30px rgba(60,140,255,.08);
}
.event-card[data-kind="clase_especial"]:hover{
  box-shadow: 0 14px 40px rgba(60,140,255,.12);
}

/* Clase de Danes: violeta */
.event-card[data-kind="clase_danes"]{
  border-color: rgba(180,120,255,.60) ;
  box-shadow: 0 10px 30px rgba(180,120,255,.08);
}
.event-card[data-kind="clase_danes"]:hover{
  box-shadow: 0 14px 40px rgba(180,120,255,.12);
}

/* Examen Kyū: blanco / perla */
.event-card[data-kind="examen_kyu"]{
  border-color: rgba(255,255,255,.32) ;
  box-shadow: 0 10px 30px rgba(255,255,255,.05);
}
.event-card[data-kind="examen_kyu"]:hover{
  box-shadow: 0 14px 40px rgba(255,255,255,.08);
}

/* Examen Dan: negro / obsidiana */
.event-card[data-kind="examen_dan"]{
  border-color: rgba(0,0,0,.55) ;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.event-card[data-kind="examen_dan"]:hover{
  box-shadow: 0 14px 40px rgba(0,0,0,.24);
}

/* Evitar que el borde negro se vea "cortado" en fondos oscuros */
.event-card[data-kind="examen_dan"]{
  outline: 1px solid rgba(255,255,255,.08);
  outline-offset: -1px;
}


.badge::before{
  content: none ;
  display: none ;
}


/* =====================================================
   EVENTOS (FINAL)
   - filtros (mes/tipo) select estilo CDA
   - badges por tipo (sin iconos)
   - borde + glow suave por tipo
   - animación reveal
   - helper: ocultar tarjetas
   ===================================================== */

/* Dropdown legible */
.month-select--ghost,
.type-select{
  color:#fff ;
}
.month-select--ghost option,
.type-select option{
  background-color:#1a0c40 ;
  color:#fff ;
}
.events-controls,
.controls-bar,
.controls-center,
.jp-select{
  overflow: visible ;
}

/* En mobile: ocultar toggle de vista (solo tarjetas) */
@media (max-width: 820px){
  #viewToggle{display:none ;}
}

/* Badges por tipo (1 sola por evento) */
.event-card.is-hidden{display:none ;}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.badge::before{
  content:none ;
  display:none ;
}

.badge--seminario_internacional{
  border-color: rgba(231,210,138,.80) ;
  background: rgba(231,210,138,.22) ;
  color: rgba(255,255,255,.98) ;
}
.badge--seminario_nacional{
  border-color: rgba(210,90,90,.65) ;
  background: rgba(210,90,90,.18) ;
}
.badge--clase_especial{
  border-color: rgba(60,140,255,.55) ;
  background: rgba(60,140,255,.16) ;
}
.badge--clase_danes{
  border-color: rgba(180,120,255,.70) ;
  background: rgba(180,120,255,.18) ;
}
.badge--examen_kyu{
  border-color: rgba(0,170,120,.65) ;
  background: rgba(0,170,120,.18) ;
}
.badge--examen_dan{
  border-color: rgba(245,140,30,.70) ;
  background: rgba(245,140,30,.18) ;
}

/* Borde y glow suave por tipo (tarjeta) */
.event-card{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.event-card[data-kind="seminario_internacional"]{
  border-color: rgba(231,210,138,.75) ;
  box-shadow: 0 10px 30px rgba(231,210,138,.10);
}
.event-card[data-kind="seminario_internacional"]:hover{ box-shadow: 0 14px 40px rgba(231,210,138,.16); }

.event-card[data-kind="seminario_nacional"]{
  border-color: rgba(210,90,90,.60) ;
  box-shadow: 0 10px 30px rgba(210,90,90,.08);
}
.event-card[data-kind="seminario_nacional"]:hover{ box-shadow: 0 14px 40px rgba(210,90,90,.12); }

.event-card[data-kind="clase_especial"]{
  border-color: rgba(60,140,255,.55) ;
  box-shadow: 0 10px 30px rgba(60,140,255,.08);
}
.event-card[data-kind="clase_especial"]:hover{ box-shadow: 0 14px 40px rgba(60,140,255,.12); }

.event-card[data-kind="clase_danes"]{
  border-color: rgba(180,120,255,.60) ;
  box-shadow: 0 10px 30px rgba(180,120,255,.08);
}
.event-card[data-kind="clase_danes"]:hover{ box-shadow: 0 14px 40px rgba(180,120,255,.12); }

.event-card[data-kind="examen_kyu"]{
  border-color: rgba(255,255,255,.32) ;
  box-shadow: 0 10px 30px rgba(255,255,255,.05);
}
.event-card[data-kind="examen_kyu"]:hover{ box-shadow: 0 14px 40px rgba(255,255,255,.08); }

.event-card[data-kind="examen_dan"]{
  border-color: rgba(0,0,0,.55) ;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  outline: 1px solid rgba(255,255,255,.08);
  outline-offset: -1px;
}
.event-card[data-kind="examen_dan"]:hover{ box-shadow: 0 14px 40px rgba(0,0,0,.24); }

/* Reveal animation */
.reveal{ opacity:0; transform: translateY(10px); }
.reveal.reveal--in{ opacity:1; transform:none; transition: opacity .35s ease, transform .35s ease; }


/* =====================================================
   EVENTOS v18 (Sin difuminado + borde por tipo suave)
   ===================================================== */

/* Animación sin blur: solo fade + slide */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  filter: none ;
  transition: opacity .28s ease, transform .28s ease;
}
.reveal.reveal--in{
  opacity: 1;
  transform: none;
  filter: none ;
}

/* Asegurar transición del borde bien suave */
.event-card{
  transition: transform .22s ease, box-shadow .22s ease, border-color .32s ease, background .22s ease ;
}


/* =====================================================
   EVENTOS v19 (Animación interna para Seminarios)
   - Internacional/Nacional: "sheen" interno + pulse suave
   ===================================================== */

@keyframes cdaSheenSweep{
  0%{ transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  15%{ opacity: .65; }
  55%{ opacity: .35; }
  100%{ transform: translateX(140%) skewX(-18deg); opacity: 0; }
}

@keyframes cdaPulse{
  0%, 100%{ box-shadow: 0 10px 30px rgba(231,210,138,.10); }
  50%{ box-shadow: 0 14px 46px rgba(231,210,138,.16); }
}

.event-card[data-kind="seminario_internacional"],
.event-card[data-kind="seminario_nacional"]{
  position: relative;
  overflow: hidden; /* necesario para el brillo interno */
}

/* Brillo interno (adentro de la tarjeta) */
.event-card[data-kind="seminario_internacional"]::after,
.event-card[data-kind="seminario_nacional"]::after{
  content:"";
  position:absolute;
  inset: -2px;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 30%,
    rgba(255,255,255,.06) 50%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%) skewX(-18deg);
  opacity: 0;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* Ejecutar sweep cuando aparece (reveal--in) */
.event-card[data-kind="seminario_internacional"].reveal--in::after{
  animation: cdaSheenSweep 1.35s ease forwards;
}
.event-card[data-kind="seminario_nacional"].reveal--in::after{
  animation: cdaSheenSweep 1.20s ease forwards;
}

/* Hover: sweep + leve lift */
@media (hover:hover){
  .event-card[data-kind="seminario_internacional"]:hover{
    transform: translateY(-2px);
  }
  .event-card[data-kind="seminario_internacional"]:hover::after{
    animation: cdaSheenSweep 1.05s ease forwards;
  }

  .event-card[data-kind="seminario_nacional"]:hover{
    transform: translateY(-2px);
  }
  .event-card[data-kind="seminario_nacional"]:hover::after{
    animation: cdaSheenSweep 1.00s ease forwards;
  }
}

/* Internacional: un pulso suave continuo (muy sutil) */
.event-card[data-kind="seminario_internacional"]{
  animation: cdaPulse 3.6s ease-in-out infinite;
}

/* Respetar accesibilidad */
@media (prefers-reduced-motion: reduce){
  .event-card[data-kind="seminario_internacional"],
  .event-card[data-kind="seminario_internacional"]::after,
  .event-card[data-kind="seminario_nacional"]::after{
    animation: none ;
    transition: none ;
  }
}


/* =====================================================
   EVENTOS v20 (Animación premium SOLO Seminario Internacional)
   - Glow dorado animado + sweep interno
   ===================================================== */

@keyframes cdaInternationalGlow{
  0%,100%{
    box-shadow:
      0 0 0 rgba(231,210,138,0),
      0 10px 30px rgba(231,210,138,.10);
  }
  50%{
    box-shadow:
      0 0 14px rgba(231,210,138,.35),
      0 14px 44px rgba(231,210,138,.22);
  }
}

@keyframes cdaInternationalSweep{
  0%{ transform: translateX(-140%) skewX(-18deg); opacity:0; }
  20%{ opacity:.9; }
  60%{ opacity:.45; }
  100%{ transform: translateX(160%) skewX(-18deg); opacity:0; }
}

/* Tarjeta internacional */
.event-card[data-kind="seminario_internacional"]{
  position: relative;
  overflow: hidden;
  animation: cdaInternationalGlow 3.2s ease-in-out infinite;
}

/* Brillo dorado adentro */
.event-card[data-kind="seminario_internacional"]::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(
    120deg,
    rgba(231,210,138,0) 0%,
    rgba(231,210,138,.35) 30%,
    rgba(255,255,255,.25) 45%,
    rgba(231,210,138,.18) 60%,
    rgba(231,210,138,0) 100%
  );
  transform: translateX(-140%) skewX(-18deg);
  pointer-events:none;
  mix-blend-mode: screen;
}

/* Animación cuando aparece */
.event-card[data-kind="seminario_internacional"].reveal--in::before{
  animation: cdaInternationalSweep 1.6s ease forwards;
}

/* Hover: repetir sweep */
@media (hover:hover){
  .event-card[data-kind="seminario_internacional"]:hover::before{
    animation: cdaInternationalSweep 1.1s ease forwards;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .event-card[data-kind="seminario_internacional"],
  .event-card[data-kind="seminario_internacional"]::before{
    animation:none ;
  }
}


/* =====================================================
   MOBILE ORDER LIQUIDACION (Graduación primero)
   ===================================================== */
@media (max-width:768px){
  .req-table td{
    display:block;
  }
  .req-table td[data-mobile-order="1"]{ order:1; }
  .req-table td[data-mobile-order="2"]{ order:2; }
  .req-table tr{
    display:flex;
    flex-direction:column;
  }
}


/* ===========================
   INSTRUCTORES - TABLAS EN TARJETAS (MOBILE)
   - Para Costos / Liquidación / Clases Especiales
   - Desktop: tabla (req-table)
   - Mobile: tarjetas (tbl-cards)
   =========================== */
.tbl-cards{ display:none; }

@media (max-width: 820px){
  /* ocultar tablas SOLO en paneles con cards */
  .has-mobile-cards table.req-table{ display:none ; }

  .tbl-cards{
    display:grid;
    gap:14px;
    margin-top:12px;
  }
  .tbl-card{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    border-radius:18px;
    padding:12px;
    box-shadow: 0 18px 40px rgba(0,0,0,.30);
  }
  .tbl-card__title{
    margin:0 0 10px;
    font-weight:900;
    color: rgba(231,210,138,.98);
  }
  .tbl-card__grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  .tbl-card__item{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    padding:10px;
    border-radius:14px;
    background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
  }
  .tbl-card__k{
    color: rgba(255,255,255,.78);
    font-weight:800;
  }
  .tbl-card__v{
    color: rgba(255,255,255,.96);
    font-weight:700;
    text-align:right;
    word-break: break-word;
  }
}

/* Ajuste extra: Liquidación en mobile (Graduación primero ya es title) */


/* =====================================================
   CLASES ESPECIALES MOBILE FIX (tarjetas legibles)
   - Evita columnas apretadas: key arriba, value abajo
   ===================================================== */
@media (max-width: 820px){
  /* Solo dentro del panel de Clases Especiales (panel-3) */
  #panel-3 .tbl-card__item{
    grid-template-columns: 1fr ;
    gap: 6px ;
    text-align: left;
  }
  #panel-3 .tbl-card__k{
    font-size: .86rem;
    letter-spacing: .2px;
    opacity: .92;
  }
  #panel-3 .tbl-card__v{
    text-align: left ;
    font-size: .95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #panel-3 .tbl-card__grid{ gap: 12px ; }
}


/* =====================================================
   PRICING MOBILE CLASES ESPECIALES (panel-3)
   - Mobile: layout agrupado por rango
   - Desktop: tabla req-table
   ===================================================== */
.pricing-mobile{ display:none; }

@media (max-width: 820px){
  #panel-3 table.req-table{ display:none ; }
  #panel-3 .pricing-mobile{
    display:grid;
    gap:14px;
    margin-top: 12px;
  }
  #panel-3 .pricing-group{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,.30);
  }
  #panel-3 .pricing-title{
    margin: 0 0 10px;
    font-weight: 900;
    color: rgba(231,210,138,.98);
  }
  #panel-3 .pricing-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:8px;
  }
  #panel-3 .pricing-item{
    display:flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
  }
  #panel-3 .pricing-item__label{
    color: rgba(255,255,255,.92);
    font-weight: 800;
  }
  #panel-3 .pricing-item__price{
    color: rgba(255,255,255,.98);
    font-weight: 900;
    white-space: nowrap;
  }
}


/* =====================================================
   CLASES ESPECIALES (AUTO MOBILE desde tabla)
   ===================================================== */
#pricingMobileClases{ display:none; }

@media (max-width: 820px){
  #panel-3 table.req-table{ display:none ; }
  #pricingMobileClases{ display:grid; }
}


/* =====================================================
   CLASES ESPECIALES - SOLO SHIDOIN (MOBILE)
   ===================================================== */
@media (max-width: 820px){
  #panel-3 .pricing-title{ margin-bottom: 10px; }
}


/* =====================================================
   FIX v30 - Evitar "Graduación" repetido en MOBILE
   - Fuerza ocultar tabla en Clases Especiales
   - Oculta labels "Graduación" si por alguna razón se renderiza la tabla apilada
   ===================================================== */
@media (max-width: 820px){
  /* Clases Especiales: mostrar SOLO pricing auto */
  #panel-3 .table-responsive{ display:none ; }
  #panel-3 table.req-table{ display:none ; }
  #pricingMobileClases{ display:grid ; }

  /* Si alguna tabla apilada muestra labels, ocultar el label "Graduación" */
  #panel-3 td[data-label*="Gradu"]::before,
  #panel-1 td[data-label*="Gradu"]::before,
  #panel-2 td[data-label*="Gradu"]::before,
  #panel-4 td[data-label*="Gradu"]::before{
    content: "" ;
    display:none ;
  }
}


/* =====================================================
   MOBILE AUTO TARJETAS (Costos Exámenes + Liquidación)
   - En mobile se oculta la tabla y se muestran tarjetas
   ===================================================== */
@media (max-width: 1024px){
  #panel-1 table.req-table{ display:none ; }
  #mobileCostosExamenes, #mobileLiquidacion{ display:block ; }
}


/* =====================================================
   NO DUPLICATES (MOBILE) - Panel 1 y 4
   ===================================================== */
@media (max-width: 820px){
  #panel-1 .req-cards:not(#mobileCostosExamenes){ display:none ; }
  #panel-2 .req-cards:not(#mobileLiquidacion){ display:none ; }
}


/* =====================================================
   FIX DUPLICADOS (MOBILE) - Panel 1 y 4
   Oculta el generador genérico .tbl-cards en esos paneles
   ===================================================== */
@media (max-width: 1024px){
  #panel-1 .tbl-cards{ display:none ; } /* evitar duplicado con mobileCostosExamenes */
  #panel-2 .tbl-cards{ display:none ; } /* por si se inyecta en runtime */
}


/* =====================================================
   PANEL-4 (Liquidación) - MOBILE: evitar duplicados
   Oculta todas las tablas y muestra solo tarjetas
   ===================================================== */
@media (max-width: 1024px){
  #mobileLiquidacion{ display:block ; }
}


/* =====================================================
   REQUISITOS / LIQUIDACIÓN - Desktop: columna Años más ancha
   ===================================================== */
@media (min-width: 1025px){
  /* 1ra tabla de panel-4: la 2da columna es 'Años' */
  #panel-4 .req-table thead th:nth-child(2),
  #panel-4 .req-table tbody td:nth-child(2){
    min-width: 120px;
  }
  /* Mejor encaje general */
  #panel-4 .req-table thead th,
  #panel-4 .req-table tbody td{
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* =====================================================
   PANEL-2 (Liquidación de porcentajes) - MOBILE
   No duplicar: ocultar tabla y mostrar solo tarjetas generadas
   ===================================================== */
@media (max-width: 1024px){
  #panel-2 .table-responsive{ display:none ; }
  #panel-2 table{ display:none ; }
  #panel-2 .tbl-cards{ display:none ; } /* por si un generador genérico lo inyecta */
  #panel-2 #mobileLiquidacion{ display:block ; }
}


/* =====================================================
   IMÁGENES CENTRADAS - AIKIDO / CDA
   Desktop + Mobile
   ===================================================== */

.pages-content img,
.section-content img,
main img{
  display:block;
  margin-left:auto;
  margin-right:auto;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

/* asegurar centrado del contenedor */
.pages-content,
.section-content{
  text-align:center;
}

/* Mobile */
@media (max-width:1024px){
  .pages-content img,
  .section-content img,
  main img{
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;
  }
}


/* =====================================================
   FIX MOBILE: imágenes completas (sin recorte) en AIKIDO/CDA
   Evita el recorte producido por aspect-ratio + overflow hidden
   ===================================================== */
@media (max-width: 820px){
  /* Contenedor */
  .info-card__media{
    aspect-ratio: auto ;
    overflow: visible ;
    background: transparent ;
  }
  /* Imagen (funciona si tiene clase o no) */
  .info-card__media img,
  .info-card__img{
    width: 100% ;
    height: auto ;
    max-width: 100% ;
    object-fit: contain ;
    transform: none ;
    filter: none ;
  }
}


/* =====================================================
   MOBILE: Paleta igual a Desktop + Menú más legible
   ===================================================== */
:root{
  --cda-bg: #37517e;            /* fondo principal (desktop) */
  --cda-surface: rgba(255,255,255,.10);
  --cda-surface-2: rgba(255,255,255,.14);
  --cda-text: rgba(238,242,255,.92);
  --cda-text-strong: #ffffff;
  --cda-border: rgba(255,255,255,.18);
  --cda-accent: rgba(231,210,138,.85); /* dorado */
}

/* Asegura que mobile no cambie a tonos oscuros diferentes */
@media (max-width: 1100px){
  body{ background: var(--cda-bg); }

  /* Botón hamburguesa: más claro y visible */
  .nav__toggle{
    border-color: var(--cda-border) ;
    background: rgba(255,255,255,.10) ;
    box-shadow: 0 10px 28px rgba(0,0,0,.18) ;
  }
  .nav__toggle span{
    background: var(--cda-text-strong) ;
  }

  /* Dropdown móvil: mismo estilo que desktop, pero con contraste */
  .nav__menu{
    background: var(--cda-bg) ;
    border: 1px solid var(--cda-border) ;
  }
  .nav__menu .nav__link{
    color: var(--cda-text-strong) ;
    background: transparent ;
  }
  .nav__menu .nav__link:hover{
    background: rgba(255,255,255,.10) ;
  }

  /* Submenú: mantener fondo del menú + hover notorio */
  .nav__sub{
    background: var(--cda-bg) ;
    border: 1px solid var(--cda-border) ;
  }
  .nav__sub a{
    color: var(--cda-text-strong) ;
  }
  .nav__sub a:hover{
    background: rgba(255,255,255,.10) ;
  }

  /* Marca "Centro de Difusión del Aikido - Argentina": más notoria */
  .nav__brand,
  .nav__title,
  .nav li:first-child > a{
    text-shadow: 0 2px 10px rgba(0,0,0,.25) ;
  }

  /* Textos del logo (header) más legibles */
  .brand-text,
  .header-logo span,
  .site-logo__text,
  .logo-text{
    text-shadow: 0 2px 14px rgba(0,0,0,.28);
  }
  .brand__subtitle,
  .header__subtitle,
  .brand small,
  .brand span{
    color: rgba(238,242,255,.95) ;
  }
}


/* =====================================================
   FIX: Mobile marca igual a Desktop
   ===================================================== */
@media (max-width: 1100px){
  .brand-text,
  .site-logo__text,
  .nav__brand,
  .nav__title{
    color: rgba(238,242,255,.72) ;
  }
}


/* =====================================================
   MOBILE - IMÁGENES PRINCIPALES MÁS CLARAS
   Ajuste específico solicitado para mobile
   ===================================================== */

@media(max-width:768px){

    #home .hero::before,
    .hero-overlay,
    .home-overlay{
        background: rgba(0,0,0,0.08) ;
    }

    #home .hero img,
    .hero img,
    .home-hero img{
        filter: brightness(1.25) contrast(1.08) saturate(1.05) ;
    }

}


/* =====================================================
   MODO OSCURO DEL NAVEGADOR (especialmente MOBILE)
   Objetivo: mantener la paleta clara del sitio (no invertir colores)
   ===================================================== */

/* Evita que el navegador "recoloree" inputs/scrollbars en dark mode */
:root{
  color-scheme: light;
}

/* Si el usuario está en modo oscuro, seguimos mostrando el sitio claro (CDA) */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: light;
  }

  html, body{
    background: #37517e ;
    color: rgba(238,242,255,.92) ;
  }

  .card, .panel, .box, .surface, .month-block, .event-card, .dojo-card, .info-card{
    background: rgba(255,255,255,.10) ;
    border-color: rgba(255,255,255,.18) ;
  }

  h1,h2,h3,h4,h5,h6{
    color: rgba(255,255,255,.95) ;
  }
  p,li,span,label{
    color: rgba(238,242,255,.90) ;
  }

  a{ color: rgba(231,210,138,.95); }
  a:hover{ color: rgba(231,210,138,1); }

  input, select, textarea, button{
    background: rgba(255,255,255,.10) ;
    color: rgba(255,255,255,.95) ;
    border-color: rgba(255,255,255,.22) ;
  }
  input::placeholder, textarea::placeholder{
    color: rgba(238,242,255,.65) ;
  }

  .nav__menu, .nav__sub, .nav__drawer, .mobile-menu{
    border-color: rgba(255,255,255,.18) ;
  }
  .nav__menu a, .nav__sub a, .mobile-menu a{
    color: rgba(255,255,255,.95) ;
  }
  .nav__menu a:hover, .nav__sub a:hover, .mobile-menu a:hover{
    background: rgba(255,255,255,.10) ;
  }
  .nav__toggle{
    background: rgba(255,255,255,.10) ;
    border-color: rgba(255,255,255,.18) ;
  }
  .nav__toggle span{ background: #fff ; }

  footer, .site-footer, .footer{
    background: rgba(255,255,255,.06) ;
    border-top-color: rgba(255,255,255,.14) ;
  }
}


/* Scrollbar (opcional, mejora en Chrome/Edge) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{ background: rgba(231,210,138,.35); border-radius: 10px; }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }


/* =====================================================
   FORZAR PALETA CLARA AUNQUE EL NAVEGADOR ESTE EN MODO OSCURO
   ===================================================== */
:root{ color-scheme: light; }


/* =====================================================
   PAGES: INFORMACIÓN (V2 - layout nuevo, más vistoso)
   ===================================================== */

body.jp-info-v2 #informacion .ua-tabs{
  margin-top: 18px;
}

.jp-hero-v2{
  position: relative;
  overflow: hidden;
}
.jp-hero-v2 .jp-hero__ink{
  position:absolute;
  inset:-45% -30% auto -30%;
  height:260px;
  background:
    radial-gradient(closest-side, rgba(231,210,138,.22), transparent 68%),
    radial-gradient(closest-side, rgba(255,255,255,.10), transparent 72%);
  filter: blur(7px);
  transform: rotate(-7deg);
  pointer-events:none;
}

/* Surface */
.jp-surface{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  overflow: hidden;
}

/* Layout */
.info-layout{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
}

.info-aside{
  padding: 16px 14px;
  border-right: 1px solid rgba(255,255,255,.12);
}

.info-aside__head h2{
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.info-aside__head .muted{
  margin: 0 0 12px;
  opacity: .85;
}

.info-content{
  padding: 16px 16px 18px;
}

.info-content__head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 10px 10px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 14px;
}
.info-content__head .info-title{
  margin: 0 0 4px;
}
.info-content__head .muted{
  margin: 0;
  opacity: .9;
}
.jp-katana{
  width: 10px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(231,210,138,.95), rgba(231,210,138,.15));
  box-shadow: 0 8px 18px rgba(231,210,138,.18);
  margin-top: 3px;
}

/* Vertical tabs */
.info-tabs{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.info-tabs .ua-tab{
  width: 100%;
  text-align: left;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  transition: transform .20s ease, background .20s ease, box-shadow .20s ease;
  position: relative;
}
.info-tabs .ua-tab::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(231,210,138,0);
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform .26s ease, background .26s ease;
}
.info-tabs .ua-tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
}
.info-tabs .ua-tab.is-active{
  background: rgba(231,210,138,.14) !important;
}
.info-tabs .ua-tab.is-active::after{
  background: rgba(231,210,138,.90);
  transform: scaleX(1);
}

/* Panels */
.info-panels{
  padding: 0;
  margin: 0;
}
#informacion .ua-panel{
  padding: 0;
  margin: 0;
}
#informacion .ua-panel[hidden]{
  display:none !important;
}
.info-panel__inner{
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px;
  box-shadow: 0 14px 35px rgba(0,0,0,.14);
}

/* Reveal */
[data-animate="reveal"]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-animate="reveal"].is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .info-layout{ grid-template-columns: 240px 1fr; }
}
@media (max-width: 780px){
  .info-layout{ grid-template-columns: 1fr; }
  .info-aside{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  /* tabs become horizontal scroll in mobile */
  .info-tabs{
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 4px;
  }
  .info-tabs .ua-tab{
    width: auto;
    white-space: nowrap;
  }
  .info-content{ padding: 14px; }
  .info-panel__inner{ padding: 14px; }
}


/* =====================================================
   PAGES: INFORMACIÓN (V2) - MEJORAS MOBILE
   ===================================================== */
@media (max-width: 780px){
  body.jp-info-v2 #informacion .ua-tabs{
    border-radius: 16px;
  }

  .info-aside{
    position: sticky;
    top: 0;
    z-index: 3;
    backdrop-filter: blur(10px);
  }

  .info-tabs{
    scroll-snap-type: x mandatory;
    padding: 4px 2px 8px;
    margin: 0 -2px;
  }
  .info-tabs .ua-tab{
    scroll-snap-align: start;
    padding: 10px 12px !important;
    font-size: .95rem;
  }

  .info-content{
    padding-top: 10px;
  }

  .info-panel__inner{
    border-radius: 16px;
    padding: 14px;
    background: rgba(255,255,255,.07);
  }

  #informacion table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #informacion th, #informacion td{
    white-space: nowrap;
  }
}


/* =====================================================
   PAGES: INSTRUCTORES (Desktop como Información V2)
   - Sidebar de solapas a la izquierda
   - Contenido/tablas a la derecha
   - Mobile queda como estaba (stack + scroll)
   ===================================================== */

body.jp-instructores-page #instructores .ua-tabs{
  margin-top: 18px;
}

.jp-instructores-v2{
  border-radius: 18px;
}

.instructores-layout{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
}

.instructores-aside{
  padding: 16px 0px;
  border-right: 1px solid rgba(255,255,255,.12);
}

.instructores-aside__head h2{
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.instructores-aside__head .muted{
  margin: 0 0 12px;
  opacity: .85;
}

.instructores-content{
  padding: 16px 16px 18px;
}

.instructores-content__head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 10px 10px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 14px;
}
.instructores-content__head .instructores-title{
  margin: 0 0 4px;
}
.instructores-content__head .muted{
  margin: 0;
  opacity: .9;
}

/* Vertical tabs in desktop */
.instructores-tabs{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.instructores-tabs .ua-tab{
  width: 100%;
  text-align: left;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  transition: transform .20s ease, background .20s ease, box-shadow .20s ease;
  position: relative;
}
.instructores-tabs .ua-tab::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(231,210,138,0);
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform .26s ease, background .26s ease;
}
.instructores-tabs .ua-tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
}
.instructores-tabs .ua-tab.is-active{
  background: rgba(231,210,138,.14) !important;
}
.instructores-tabs .ua-tab.is-active::after{
  background: rgba(231,210,138,.90);
  transform: scaleX(1);
}

/* Panels */
.instructores-panels{
  padding: 0;
  margin: 0;
}
#instructores .ua-panel{
  padding: 0;
  margin: 0;
}
#instructores .ua-panel[hidden]{ display:none !important; }

.instructores-panel__inner{
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px;
  box-shadow: 0 14px 35px rgba(0,0,0,.14);
}

/* Ajuste tablas en desktop para que entren mejor */
#instructores table{
  width: 100%;
}
#instructores th, #instructores td{
  vertical-align: top;
}

/* RESPONSIVE: en mobile vuelve al stack y tabs horizontales (como venía) */
@media (max-width: 780px){
  .instructores-layout{ grid-template-columns: 1fr; }
  .instructores-aside{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    position: static;
  }
  .instructores-tabs{
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 4px;
  }
  .instructores-tabs .ua-tab{
    width: auto;
    white-space: nowrap;
  }
  .instructores-content{ padding: 14px; }
  .instructores-panel__inner{ padding: 14px; }

  /* tablas: scroll horizontal en mobile */
  #instructores table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }
  #instructores th, #instructores td{ white-space: nowrap; }
}


/* =====================================================
   INSTRUCTORES: TABLAS (Desktop completas, Mobile mantiene diseño)
   - En desktop: sin min-width forzado, permite wrap, sin scroll innecesario
   - En mobile: sigue usando scroll horizontal / tarjetas (según cada panel)
   ===================================================== */
@media (min-width: 781px){
  /* Evitar que la tabla quede “cortada” o con scroll innecesario */
  .table-wrap{
    overflow: visible;
  }
  .table-wrap table{
    min-width: 0;
  }
  /* Permitir que encabezados y celdas rompan línea para que entre todo */
  main thead th{
    white-space: normal;
  }
  main tbody td{
    white-space: normal;
    word-break: break-word;
  }
}


/* Ajuste: en desktop las solapas se ajustan al ancho del texto */
@media (min-width: 781px){
  .instructores-tabs{ align-items: flex-start; }
  .instructores-tabs .ua-tab{
    width: fit-content;
    max-width: 100%;
  }
}

/* Cards util (usado en Organización Financiera dentro de Instructores) */
.card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.jp-card{
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.jp-card h4{ margin: 0 0 8px; }
.jp-card p{ margin: 0 0 10px; }
@media (max-width: 780px){
  .card-grid{ grid-template-columns: 1fr; }
}


/* =====================================================
   INSTRUCTORES: Mobile - Costos Exámenes + Clases Especiales
   - Desktop: tabla original
   - Mobile: tarjetas generadas automáticamente desde la tabla
   ===================================================== */
.table-cards--mobile{ display:none; }

@media (max-width: 780px){
  /* Ocultar tablas desktop en mobile (solo en estas 2 secciones) */
  #panel-1 .table-wrap--desktop-costos{ display:none; }
  #panel-3 .table-wrap--desktop-clases{ display:none; }

  /* Mostrar tarjetas mobile */
  #panel-1 .table-cards--mobile,
  #panel-3 .table-cards--mobile{
    display:grid;
    gap:12px;
  }

  .table-cards--mobile .tc-card{
    border-radius: 16px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 14px 35px rgba(0,0,0,.14);
    padding: 14px;
  }
  .table-cards--mobile .tc-title{
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: .2px;
  }
  .table-cards--mobile .tc-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .table-cards--mobile .tc-row{
    display:flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(255,255,255,.10);
  }
  .table-cards--mobile .tc-k{ opacity:.92; }
  .table-cards--mobile .tc-v{ font-weight: 800; text-align:right; }
}



/* =====================================================
   CONTACTO MOBILE - TEXTO NEGRO EN INPUTS (SOLO FORMULARIO CONTACTO)
   ===================================================== */
@media (max-width:768px){
  /* Solo el formulario de contacto del home (class="form") */
  .form input,
  .form textarea,
  .form select{
    color:#000;
    -webkit-text-fill-color:#000;
  }
  .form input::placeholder,
  .form textarea::placeholder{
    color:#222;
    opacity:1;
  }
}

/* =====================================================
   MOBILE FIX - TEXTOS (LOGIN / EVENTOS / DOJOS)
   ===================================================== */
@media (max-width:768px){

  /* ---------- LOGIN (php/login.html) ---------- */
  .jp-login,
  .jp-login__title,
  .jp-login__sub,
  .jp-login__note{
    color:#fff;
  }

  .jp-login .jp-field input{
    color:#fff;
    -webkit-text-fill-color:#fff; /* Chrome/Android */
  }
  .jp-login .jp-field input::placeholder{
    color:rgba(255,255,255,.85);
    opacity:1;
  }

  /* Autofill (Chrome) */
  .jp-login input:-webkit-autofill,
  .jp-login input:-webkit-autofill:hover,
  .jp-login input:-webkit-autofill:focus{
    -webkit-text-fill-color:#fff;
    transition: background-color 9999s ease-in-out 0s;
    box-shadow: 0 0 0px 1000px rgba(0,0,0,.22) inset;
    border: 1px solid rgba(255,255,255,.14);
  }


  /* ---------- EVENTOS (pages/eventos.html) ---------- */
  .events-controls,
  .events-controls label{
    color:#fff;
  }

  .events-controls select,
  .events-controls .jp-select select,
  .events-controls .month-select{
    color:#fff;
    -webkit-text-fill-color:#fff;
  }

  /* En algunos móviles el <option> usa su propia paleta */
  .events-controls option{
    color:#000;
  }


  /* ---------- DOJOS (pages/dojos.html) ---------- */
  /* Chips (los “botones” de filtro) + texto del buscador */
  .dojos-filters,
  .dojos-filters__label,
  .dojos-search__label{
    color:#fff;
  }

  .dojos-chips .chip{
    color:#fff;
  }

  .dojos-search input{
    color:#fff;
    -webkit-text-fill-color:#fff;
  }

  .dojos-search input::placeholder{
    color:rgba(255,255,255,.85);
    opacity:1;
  }
}

/* ===== BOTON MAS DOJOS MOBILE ===== */
@media (max-width: 768px){

  .dojo-more{
      display:flex;
      justify-content:center;
      align-items:center;
      width:100%;
      margin-top:25px;
  }

  .dojo-more .btn{
      margin:0 auto;
      display:inline-flex;
      justify-content:center;
      align-items:center;
  }

}
/* Accessibility/SEO helper */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}

/* SEO intro section */
.seo-intro{max-width:1100px;margin:0 auto;padding:24px 16px;}
.seo-intro h2{margin-bottom:10px;}
.seo-intro p{margin:6px 0;line-height:1.6;}