/* Akitsu Kendō Kai — sitio web. Tokens: sistema de marca AKK (project/tokens.json).
   Layout: columna central amplia; secciones separadas por líneas finas, tarjetas en surface-raised.
   Granate domina (logo, titulares, botones, banda de cierre); dorado solo acentúa. */
@font-face{font-family:"Saira";src:url("fonts/saira.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Yuji Syuku";src:url("fonts/yuji-syuku.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  interpolate-size:allow-keywords;
  /* Movimiento */
  --ease:cubic-bezier(.16,1,.3,1);
  --d-rapida:160ms; --d-media:280ms; --d-lenta:600ms;
  /* Color: el sitio es solo claro, por decisión del dōjō */
  --surface-base:#faf6ef; --surface-raised:#ffffff;
  --ink:#1c140f; --ink-muted:#6b5c4f; --border:#e2d6c3;
  --granate:#561825; --on-granate:#ffffff; --dorado:#ffb300;
  --acento:#561825;            /* texto de énfasis */
  --top-bg:rgba(250,246,239,.94);
  --ghost-border:#b9a68f;
  /* Texto sobre foto y sobre dorado */
  --sobre-foto:#f3eae0;
  --blanco:#ffffff; --sobre-dorado:#1c140f; --velo:rgba(22,17,14,.88); --telon:rgba(22,17,14,.94); --sombra:rgba(28,20,15,.28); --filo:cubic-bezier(.77,0,.18,1);
  /* Tipografía */
  --display:"Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nafuda:"Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* Radios y medidas */
  --r-sm:2px; --r-md:6px; --r-full:999px;
  --ancho:1120px;
  --gutter:clamp(16px,4vw,32px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--surface-base);color:var(--ink);font-family:var(--body);font-size:16px;line-height:24px}
img,svg{max-width:100%;display:block}
a{color:var(--acento)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:var(--r-sm)}
.cierre a:focus-visible{outline-color:var(--dorado)}

/* Jerarquía: display-hero → display-h1 → display-h2 → body */
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:clamp(36px,5.6vw,52px);line-height:1.08;font-weight:700}
h2{font-size:clamp(28px,3.6vw,34px);line-height:1.15;font-weight:700}
h3{font-size:22px;line-height:28px;font-weight:600}
p{margin:0;max-width:65ch}
.wrap{max-width:var(--ancho);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--acento)}
.muted{color:var(--ink-muted)}
.jp{font-family:var(--nafuda);font-weight:400}
.skip{position:absolute;left:-999px;top:8px;background:var(--granate);color:var(--on-granate);padding:8px 12px;z-index:50}
.skip:focus{left:8px}

/* Encabezado */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--top-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand img{width:40px;height:40px;flex:none}
.brand b{font-family:var(--display);font-size:17px;line-height:20px;font-weight:600;display:block}
.brand small{display:block;font-size:13px;line-height:16px;color:var(--ink-muted)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:var(--ink);text-decoration:none;font-size:14px;line-height:20px;font-weight:500;padding:8px 10px;border-radius:var(--r-sm)}
@media (hover:hover){.nav a:not(.btn):hover{text-decoration:underline;text-decoration-color:var(--dorado);text-decoration-thickness:2px;text-underline-offset:6px}}
.nav a[aria-current="page"]{color:var(--acento);font-weight:600}
.nav a.btn{margin-left:8px;color:var(--on-granate);font-size:13px;line-height:16px;font-weight:600;padding:12px 16px;border-radius:var(--r-md)}
.menu-btn{display:none;min-height:44px;background:none;border:1px solid var(--ghost-border);color:var(--ink);border-radius:var(--r-md);padding:8px 12px;font:inherit;font-size:14px;cursor:pointer;transition:transform var(--d-rapida) var(--ease)}
.menu-btn:active{transform:scale(.97)}
@media (max-width:980px){
  .menu-btn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--surface-base);border-bottom:1px solid var(--border);padding:8px var(--gutter) 24px;box-shadow:0 16px 32px -24px var(--sombra);max-height:calc(100dvh - 69px);overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--d-media) var(--ease),transform var(--d-media) var(--ease),visibility 0s linear var(--d-media)}
  .nav.open{visibility:visible;opacity:1;transform:none;transition:opacity var(--d-media) var(--ease),transform var(--d-media) var(--ease),visibility 0s}
  .nav a{padding:12px 4px;border-bottom:1px solid var(--border);font-size:16px;line-height:24px}
  .nav a.btn{margin:16px 0 0;text-align:center;border-bottom:1px solid var(--granate)}
}

/* Botones: estilo label */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--granate);color:var(--on-granate);font-size:13px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:16px 24px;border-radius:var(--r-md);border:1px solid var(--granate);transition:border-color var(--d-rapida) var(--ease),box-shadow var(--d-rapida) var(--ease),background var(--d-rapida) var(--ease),color var(--d-rapida) var(--ease),transform var(--d-rapida) var(--ease)}
.btn:active{transform:scale(.97)}
@media (hover:hover){.btn:hover{border-color:var(--dorado);box-shadow:inset 0 0 0 1px var(--dorado)}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ghost-border)}
.btn svg{width:18px;height:18px}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Hero */
section.hero{position:relative;overflow:hidden;padding:0;border-bottom:1px solid var(--border)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:48px;padding-block:clamp(48px,8vw,64px)}
.hero-copy{display:grid;gap:24px;min-width:0}
.hero h1 span{color:var(--acento)}
.hero .lead{color:var(--ink-muted)}
.hero-mark{justify-self:center;width:min(360px,80%)}
.hero-mark img{width:100%;height:auto}
.facts{display:flex;flex-wrap:wrap;gap:12px 32px;color:var(--ink-muted);font-size:14px;line-height:20px}
.facts b{color:var(--ink);font-family:var(--display);font-size:22px;line-height:28px;font-weight:600;display:block}
.hero-foto{position:relative;justify-self:stretch;min-width:0}
.hero-foto .foto{aspect-ratio:4/5;max-height:560px;max-width:100%;border-radius:var(--r-md)}
.hero-sello{position:absolute;left:-24px;bottom:-24px;width:96px;height:96px}
.hero-sello img{width:100%;height:auto}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-mark{order:-1;width:140px;justify-self:start}
  .hero-foto{order:-1}
  .hero-foto .foto{aspect-ratio:16/10}
  .hero-sello{left:12px;bottom:-24px;width:72px;height:72px}
}

/* Portada con foto a todo el ancho: la foto se funde con el granate a la izquierda */
section.hero-pleno{background:var(--granate);color:var(--on-granate);border-bottom:0}
.hero-fondo{position:absolute;top:0;right:0;bottom:0;width:66%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.hero-fondo>img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;animation:asentar 1600ms var(--ease) both}
.hero-pleno .wrap{grid-template-columns:minmax(0,540px);min-height:clamp(540px,calc(100svh - 69px),760px);align-content:center}
.hero-pleno .eyebrow,.hero-pleno .hero-copy h1 span{color:var(--dorado)}
.hero-pleno .lead,.hero-pleno .facts{color:var(--sobre-foto)}
.hero-pleno .facts b{color:var(--blanco)}
.hero-pleno .btn{background:var(--blanco);border-color:var(--blanco);color:var(--granate)}
.hero-pleno .btn.ghost{background:transparent;color:var(--blanco);border-color:var(--sobre-foto)}
.hero-pleno a:focus-visible{outline-color:var(--dorado)}
@media (hover:hover){.hero-pleno .btn:hover{background:var(--dorado);border-color:var(--dorado);color:var(--sobre-dorado);box-shadow:none}.hero-pleno .btn.ghost:hover{background:transparent;color:var(--blanco);border-color:var(--dorado)}}
.hero-pleno .hero-sello{left:auto;right:var(--gutter);bottom:24px;width:88px;height:88px}
@keyframes asentar{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@media (max-width:820px){
  .hero-fondo{position:relative;width:100%;aspect-ratio:4/3;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .hero-pleno .wrap{min-height:0;padding-block:8px 48px}
  .hero-pleno .hero-sello{right:16px;bottom:16px;width:64px;height:64px}
}

/* Secciones */
section{padding-block:clamp(48px,8vw,64px);border-bottom:1px solid var(--border)}
.sec-head{display:grid;gap:12px;margin-bottom:32px;max-width:720px}

/* Disciplinas */
.disc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.disc a{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:var(--ink);display:grid;grid-template-rows:auto 1fr;min-width:0;transition:border-color var(--d-media) var(--ease),transform var(--d-media) var(--ease)}
.disc a:active{transform:scale(.99)}
.disc-foto{aspect-ratio:4/3;overflow:hidden;background:var(--border)}
.disc-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform var(--d-lenta) var(--ease)}
.disc-cuerpo{padding:24px;display:grid;gap:12px;align-content:start}
.disc-titulo{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media (hover:hover){.disc a:hover{border-color:var(--dorado)}.disc a:hover .disc-foto img{transform:scale(1.04)}.disc a:hover .more{text-decoration:underline;text-decoration-color:var(--dorado);text-decoration-thickness:2px;text-underline-offset:4px}}
.disc .kanji{font-family:var(--nafuda);font-weight:400;font-size:40px;line-height:1;color:var(--acento);white-space:nowrap}
.disc p{color:var(--ink-muted)}
.disc .more{font-size:14px;line-height:20px;font-weight:600;color:var(--acento)}
@media (max-width:820px){.disc{grid-template-columns:1fr}}

/* Sedes y horarios */
.sedes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sede{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:24px;display:grid;gap:16px;align-content:start;min-width:0}
.sede address{font-style:normal;color:var(--ink-muted)}
.clases{list-style:none;margin:0;padding:0;display:grid}
.clases li{position:relative;display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:baseline;padding:12px 0;font-variant-numeric:tabular-nums}
.clases li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--border);transform-origin:left;transition:transform 800ms var(--ease) calc(var(--i,0)*90ms)}
.clases .dia{font-weight:600}
.clases .hora{color:var(--ink-muted);font-size:14px;line-height:20px;text-align:right}
.sede .nota{font-size:14px;line-height:20px;color:var(--ink-muted)}
@media (max-width:820px){.sedes{grid-template-columns:1fr}}
@media (max-width:420px){.clases li{grid-template-columns:1fr auto}.clases .dia{grid-column:1/-1}}

/* Beneficios */
.beneficios{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.beneficio{position:relative;display:grid;gap:8px;align-content:start;min-width:0;padding-top:16px}
.beneficio::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--dorado);transform-origin:left;transition:transform 900ms var(--ease) calc(var(--i,0)*90ms + 150ms)}
.beneficio p{color:var(--ink-muted)}
@media (max-width:820px){.beneficios{grid-template-columns:1fr;gap:24px}}

/* Sensei */
.sensei{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.rango{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--dorado);color:var(--ink);font-size:13px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-full)}
.sensei-copy{display:grid;gap:16px;min-width:0}
@media (max-width:820px){.sensei{grid-template-columns:1fr;gap:24px}}

/* Primera clase */
.pasos{position:relative;list-style:none;margin:0;padding:24px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:p}
.pasos::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--dorado);transform-origin:left;transform:scaleX(var(--avance,1))}
.pasos li{position:relative;counter-increment:p;display:grid;gap:8px;align-content:start;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:24px}
.pasos li::before{content:counter(p);font-family:var(--display);font-size:34px;line-height:40px;font-weight:700;color:var(--acento)}
.pasos li::after{content:"";position:absolute;left:24px;top:-25px;width:12px;height:12px;border-radius:var(--r-full);border:2px solid var(--dorado);background:var(--surface-base);transition:background var(--d-media) var(--ease)}
.pasos li.activo::after{background:var(--dorado)}
.pasos p{color:var(--ink-muted)}
@media (max-width:820px){
  .pasos{grid-template-columns:1fr;padding:0 0 0 24px}
  .pasos::before{left:5px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:top;transform:scaleY(var(--avance,1))}
  .pasos li::after{left:-25px;top:28px}
}

/* Preguntas frecuentes */
.faq{display:grid;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;padding:16px 40px 16px 0;font-weight:600;position:relative;transition:color var(--d-rapida) var(--ease)}
@media (hover:hover){.faq summary:hover{color:var(--acento)}}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:24px;line-height:30px;color:var(--acento);font-weight:400;transition:transform var(--d-media) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
@supports (interpolate-size:allow-keywords){
  .faq details::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size var(--d-media) var(--ease),opacity var(--d-media) var(--ease),content-visibility var(--d-media) allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}
.faq details p{padding:0 0 24px;color:var(--ink-muted)}

/* Video */
.video{position:relative;display:block;aspect-ratio:16/9;max-width:100%;background:var(--granate);border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:var(--blanco)}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform var(--d-lenta) var(--ease)}
@media (hover:hover){.video:hover img{transform:scale(1.03)}.video:hover .play{transform:translate(-50%,-50%) scale(1.08)}}
.video:active .play{transform:translate(-50%,-50%) scale(.94)}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,var(--velo))}
.video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:var(--r-full);background:var(--dorado);color:var(--sobre-dorado);display:grid;place-items:center;z-index:1;transition:transform var(--d-media) var(--ease)}
.video .play svg{width:28px;height:28px;margin-left:4px}
.video .cap{position:absolute;left:16px;bottom:16px;z-index:1;font-size:14px;line-height:20px;font-weight:600}

/* Banda de cierre */
.cierre{position:relative;overflow:hidden;background:var(--granate);color:var(--on-granate);border-bottom:0}
.cierre .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.cierre-copy{display:grid;gap:12px}
.cierre .eyebrow{color:var(--dorado)}
.cierre .btn{background:var(--blanco);border-color:var(--blanco);color:var(--granate)}
@media (hover:hover){.cierre .btn:hover{background:var(--dorado);border-color:var(--dorado);color:var(--sobre-dorado);box-shadow:none}}
@media (max-width:820px){.cierre .wrap{grid-template-columns:1fr}}

/* Páginas interiores */
.page-hero{border-bottom:1px solid var(--border)}
.page-hero .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;padding-block:clamp(48px,8vw,64px) clamp(32px,6vw,48px)}
.page-hero .kanji-xl{font-family:var(--nafuda);font-weight:400;font-size:clamp(72px,12vw,144px);line-height:.95;color:var(--acento)}
.page-hero .hero-copy{gap:16px}
@media (max-width:720px){.page-hero .wrap{grid-template-columns:1fr}.page-hero .kanji-xl{order:-1}}
.page-hero.con-foto .wrap{grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding-block:clamp(32px,6vw,56px)}
.page-hero.con-foto .kanji-xl{font-size:clamp(64px,8vw,104px);line-height:1}
.page-foto{min-width:0}
.page-foto .foto{aspect-ratio:4/3;max-width:100%;border-radius:var(--r-md)}
.page-foto .foto img{object-position:50% 40%}
@media (max-width:820px){.page-hero.con-foto .wrap{grid-template-columns:1fr;gap:24px}.page-foto{order:-1}.page-foto .foto{aspect-ratio:16/10}}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.two > *{min-width:0}
.mark-nombre{width:min(280px,70%)}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:32px}.two .hero-mark{width:120px;order:-1;justify-self:start}}
.prose{display:grid;gap:16px}
.prose h2:not(:first-child){margin-top:16px}
.sec-head.sin-margen{margin:0}
.citas{display:grid;gap:28px}
.enlace-fuerte{font-weight:600;display:inline-block;padding-block:10px;margin-block:-10px}
.aprendes{list-style:none;margin:0;padding:0;display:grid}
.aprendes li{padding:16px 0;border-top:1px solid var(--border);display:grid;gap:4px}
.aprendes b{font-weight:600}
.aprendes span{color:var(--ink-muted)}
.ficha{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:24px;display:grid;gap:16px}
.ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.ficha dt{color:var(--ink-muted)}
.ficha dd{margin:0;font-weight:600}
.glosario{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.glosario div{border-top:1px solid var(--dorado);padding-top:12px;display:grid;gap:4px}
.glosario b{font-weight:600}
.glosario span{color:var(--ink-muted);font-size:14px;line-height:20px}

/* Hakama: siete pliegues */
.pliegues{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface-raised)}
.pliegue{display:grid;grid-template-rows:auto auto 1fr;gap:8px;justify-items:center;text-align:center;padding:24px 8px;border-left:1px solid var(--border);min-width:0}
.pliegue:first-child{border-left:0}
.pliegue .k{font-family:var(--nafuda);font-weight:400;font-size:32px;line-height:1.2;color:var(--acento);writing-mode:vertical-rl;letter-spacing:.1em;min-height:90px}
.pliegue b{font-family:var(--display);font-size:15px;line-height:20px;font-weight:600}
.pliegue span{font-size:13px;line-height:18px;color:var(--ink-muted)}
@media (max-width:900px){
  .pliegues{grid-template-columns:1fr}
  .pliegue{grid-template-columns:60px 1fr;grid-template-rows:auto auto;justify-items:start;text-align:left;border-left:0;border-top:1px solid var(--border);padding:16px;column-gap:16px;row-gap:4px}
  .pliegue:first-child{border-top:0}
  .pliegue .k{writing-mode:horizontal-tb;min-height:0;font-size:24px;grid-row:1/3;align-self:center}
}
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.persona{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:24px;display:grid;gap:12px;align-content:start;min-width:0}
.persona .rol{font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--acento);font-weight:600}
.persona p{color:var(--ink-muted)}
@media (max-width:1000px){.equipo{grid-template-columns:1fr 1fr}.equipo .persona:first-child{grid-column:1/-1}}
@media (max-width:820px){.equipo{grid-template-columns:1fr}}

/* Texto legal */
.legal{max-width:760px;display:grid;gap:16px}
.legal h2{font-size:22px;line-height:28px;font-weight:600;margin-top:16px}
.legal ul{margin:0;padding-left:20px;display:grid;gap:8px}

/* Pie */
.pie{padding-block:48px 32px;background:var(--surface-raised);color:var(--ink);border-top:1px solid var(--border)}
.pie .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.pie .brand,.pie h4{color:var(--ink)}
.pie .brand small,.pie .muted,.pie a{color:var(--ink-muted)}
.pie-nota{margin-top:16px;font-size:14px;line-height:20px}
.pie h2{font-family:var(--body);font-size:13px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;font-size:14px;line-height:20px}
.pie a{text-decoration:none;transition:color var(--d-rapida) var(--ease)}
.pie li a,.legalline a{display:inline-block;padding-block:6px}
@media (hover:hover){.pie a:hover{color:var(--acento);text-decoration:underline;text-decoration-color:var(--dorado);text-decoration-thickness:2px;text-underline-offset:4px}}
.pie .legalline{grid-column:1/-1;border-top:1px solid var(--border);padding-top:16px;font-size:13px;line-height:16px;color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
@media (max-width:760px){.pie .wrap{grid-template-columns:1fr}.pie li a,.legalline a{padding-block:12px}.pie .brand{min-height:44px}}

/* Botón flotante de WhatsApp en móvil */
.wa-float{display:none}
@media (max-width:720px){
  .wa-float{display:flex;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;padding:12px 16px;box-shadow:0 6px 24px var(--sombra);transition:opacity var(--d-media) var(--ease),transform var(--d-media) var(--ease),visibility 0s}
  .wa-float.oculto{opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none;transition:opacity var(--d-media) var(--ease),transform var(--d-media) var(--ease),visibility 0s linear var(--d-media)}
  body{padding-bottom:72px}
}

/* Fotos */
.foto{display:block;overflow:hidden;background:var(--surface-raised);cursor:zoom-in}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-lenta) var(--ease)}
@media (hover:hover){.foto:hover img{transform:scale(1.03)}}
.galeria .foto img,.hito-cuerpo .foto img,.hero-foto .foto img{object-position:50% 30%}
.foto img.foco-medio,.galeria .foto img.foco-medio,.hito-cuerpo .foto img.foco-medio,.hero-foto .foto img.foco-medio{object-position:50% 55%}
.foto img.foco-bajo,.galeria .foto img.foco-bajo,.hito-cuerpo .foto img.foco-bajo,.hero-foto .foto img.foco-bajo{object-position:50% 78%}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:12px}
.galeria figure{margin:0;position:relative;min-width:0;overflow:hidden;border-radius:var(--r-md)}
.galeria figure:first-child{grid-column:span 2;grid-row:span 2}
.galeria .foto{height:100%}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 8px;font-size:14px;line-height:20px;color:var(--blanco);background:linear-gradient(transparent,var(--velo));pointer-events:none}
/* Cantidad de fotos: la última se estira para no dejar huecos */
.galeria-r1 figure:last-child{grid-column:1/-1}
.galeria-r2 figure:last-child{grid-column:span 2}
.galeria-2{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(280px,34vw)}
.galeria-2 figure:first-child{grid-column:auto;grid-row:auto}
.galeria-1{grid-template-columns:1fr;grid-auto-rows:minmax(280px,44vw)}
.galeria-1 figure:first-child{grid-column:auto;grid-row:auto}
@media (max-width:820px){.galeria{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}.galeria-r1 figure:last-child,.galeria-r2 figure:last-child{grid-column:auto}.galeria-r1 figure:first-child{grid-column:1/-1;grid-row:auto;height:240px}.galeria-r2 figure:first-child{grid-column:1/-1;grid-row:span 2}.galeria-2,.galeria-1{grid-template-columns:1fr;grid-auto-rows:240px}}
@media (max-width:480px){.galeria{grid-template-columns:1fr;grid-auto-rows:240px}.galeria figure:first-child{grid-column:auto;grid-row:span 1}}
.ver-mas{display:inline-block;margin-top:14px;padding-block:10px;font-weight:600;color:var(--acento)}
.galeria-sec + .galeria-sec{border-top:0;padding-top:0}

/* Línea de tiempo */
.linea{list-style:none;margin:0;padding:0;display:grid;gap:32px;position:relative}
.linea::before{content:"";position:absolute;left:129px;top:8px;bottom:8px;width:1px;background:var(--dorado)}
.hito{display:grid;grid-template-columns:110px 1fr;gap:40px;align-items:start;position:relative}
.hito::before{content:"";position:absolute;left:123px;top:12px;width:13px;height:13px;border-radius:var(--r-full);background:var(--surface-base);border:2px solid var(--dorado)}
.anio{font-family:var(--display);font-size:22px;line-height:28px;font-weight:600;color:var(--acento);text-align:right;padding-top:4px;font-variant-numeric:tabular-nums}
.hito-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;min-width:0}
.hito-cuerpo .foto{aspect-ratio:16/10;max-width:100%;border-radius:var(--r-md)}
.hito-txt{display:grid;gap:8px}
.hito-txt p{color:var(--ink-muted)}
@media (max-width:820px){
  .linea::before{left:7px}
  .hito{grid-template-columns:1fr;gap:12px;padding-left:32px}
  .hito::before{left:1px;top:8px}
  .anio{text-align:left;padding:0}
  .linea{gap:28px}
  .hito-cuerpo{grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start}
  .hito-cuerpo .foto{aspect-ratio:1}
  .hito-txt h3{font-size:18px;line-height:24px}
}

/* Pestañas de galería */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs a{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--ghost-border);color:var(--ink);text-decoration:none;padding:8px 16px;border-radius:var(--r-full);font-size:14px;line-height:20px;font-weight:600;transition:border-color var(--d-rapida) var(--ease),transform var(--d-rapida) var(--ease)}
.tabs a:active{transform:scale(.97)}
@media (hover:hover){.tabs a:hover{border-color:var(--dorado)}}

/* Visor de fotos */
.visor{border:0;padding:0;background:transparent;max-width:min(1200px,94vw);max-height:92vh;color:var(--blanco);opacity:0;transition:opacity var(--d-media) var(--ease),overlay var(--d-media) allow-discrete,display var(--d-media) allow-discrete}
.visor[open]{opacity:1}
.visor::backdrop{background:var(--telon);opacity:0;transition:opacity var(--d-media) var(--ease),overlay var(--d-media) allow-discrete,display var(--d-media) allow-discrete}
.visor[open]::backdrop{opacity:1}
.visor img,.visor video,.visor .yt-marco{transition:transform var(--d-media) var(--ease)}
@starting-style{
  .visor[open],.visor[open]::backdrop{opacity:0}
  .visor[open] img,.visor[open] video,.visor[open] .yt-marco{transform:scale(.97)}
}
.visor img{max-width:100%;max-height:80vh;width:auto;height:auto;margin:0 auto}
.visor p{text-align:center;margin:12px auto 0;color:var(--sobre-foto);font-size:14px;line-height:20px}
.visor-cerrar{position:fixed;top:16px;right:16px;min-height:44px;background:var(--dorado);color:var(--sobre-dorado);border:0;border-radius:var(--r-md);padding:12px 16px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:transform var(--d-rapida) var(--ease)}
.visor-cerrar:active{transform:scale(.97)}
.visor-nav{position:fixed;top:50%;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;background:var(--velo);color:var(--blanco);border:1px solid var(--sobre-foto);border-radius:var(--r-full);font:inherit;font-size:20px;cursor:pointer;transition:background var(--d-rapida) var(--ease),color var(--d-rapida) var(--ease),transform var(--d-rapida) var(--ease)}
.visor-nav[hidden]{display:none}
.visor-nav:active{transform:scale(.94)}
@media (hover:hover){.visor-nav:hover{background:var(--dorado);color:var(--sobre-dorado)}}
.visor-ant{left:16px}.visor-sig{right:16px}
.visor button:focus-visible,.visor a:focus-visible{outline:2px solid var(--blanco);outline-offset:3px}
.visor-foto{touch-action:pan-y}
@media (max-width:720px){.visor-nav{top:auto;bottom:16px;margin:0}.visor-foto img{max-height:70vh}}
.visor-yt{width:min(960px,94vw);overflow:visible}
.yt-marco{aspect-ratio:16/9;background:var(--sobre-dorado);border-radius:var(--r-md);overflow:hidden}
.yt-marco iframe{display:block;width:100%;height:100%;border:0}

/* Citas */
.quote{font-family:var(--display);font-size:22px;line-height:28px;font-weight:600;color:var(--ink)}
.quote .jp{font-size:24px;font-weight:400}
.quote small{display:block;font-family:var(--body);font-size:14px;line-height:20px;font-weight:400;color:var(--ink-muted);margin-top:12px}

/* Videos recientes de Instagram */
.reels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}
.reels:empty{display:none}
.reel-vacio{aspect-ratio:9/16;max-width:100%;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);animation:latido 1.6s ease-in-out infinite alternate}
.reel{display:grid;gap:8px;align-content:start;min-width:0;scroll-snap-align:start;color:var(--ink);text-decoration:none}
.reel-foto{position:relative;display:block;aspect-ratio:9/16;max-width:100%;overflow:hidden;border-radius:var(--r-md);background:var(--surface-raised)}
.reel-foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-lenta) var(--ease)}
@media (hover:hover){.reel:hover .reel-foto img{transform:scale(1.03)}.reel:hover .reel-play{transform:scale(1.1)}}
.reel:active .reel-play{transform:scale(.94)}
.reel-play{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:var(--r-full);background:var(--dorado);color:var(--sobre-dorado);display:grid;place-items:center;transition:transform var(--d-media) var(--ease)}
.reel-play svg{width:16px;height:16px;margin-left:2px}
.reel-fecha{font-size:13px;line-height:16px;font-weight:600;color:var(--acento)}
.reel-txt{font-size:14px;line-height:20px;color:var(--ink-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.reel:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:var(--r-sm)}
.visor-reel{width:min(420px,94vw);overflow:visible}
.visor-reel video{width:100%;max-height:74vh;background:var(--sobre-dorado);border-radius:var(--r-md);margin:0 auto;display:block}
.visor-reel video[hidden]{display:none}
.visor-reel .visor-pie{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:left}
.visor-reel .visor-error{color:var(--blanco);text-align:center;padding:24px 0}
.visor-reel.cargando::after{content:"";position:absolute;left:50%;top:32%;width:40px;height:40px;margin-left:-20px;border-radius:var(--r-full);border:3px solid var(--sobre-foto);border-top-color:var(--dorado);animation:giro .9s linear infinite;pointer-events:none}
.ver-instagram{display:block;margin-top:8px;font-size:14px;line-height:20px;font-weight:600;color:var(--dorado)}

/* Movimiento: la portada entra una sola vez; el contenido es visible si la animación no corre */
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes revelar{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes sello{from{opacity:0;transform:scale(.82) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes latido{from{opacity:1}to{opacity:.55}}
@keyframes giro{to{transform:rotate(360deg)}}
.hero-copy>*{animation:subir 700ms var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:60ms}
.hero-copy>:nth-child(3){animation-delay:120ms}
.hero-copy>:nth-child(4){animation-delay:180ms}
.hero-copy>:nth-child(5){animation-delay:240ms}
.hero-foto .foto,.page-foto .foto{background:var(--granate);animation:revelar 900ms var(--ease) 80ms both}
.hero-sello{animation:sello 600ms var(--ease) 520ms both}
.page-hero .kanji-xl{animation:revelar 900ms var(--ease) both}

/* La línea de tiempo se dibuja al bajar por la página */
@keyframes trazo{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes punto{from{background:var(--surface-base)}to{background:var(--dorado)}}
@supports (animation-timeline:view()){
  .linea{view-timeline:--linea block}
  .linea::before{transform-origin:top;animation:trazo linear both;animation-timeline:--linea;animation-range:cover 10% cover 80%}
  .hito::before{animation:punto linear both;animation-timeline:view();animation-range:entry 60% cover 40%}
}

/* Libélula: forma tomada del logo */
.libelula{display:block;background:currentColor;-webkit-mask:url("img/libelula.svg") center/contain no-repeat;mask:url("img/libelula.svg") center/contain no-repeat}

/* Avance de lectura: la libélula vuela hacia adelante */
.avance{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;color:var(--granate)}
.avance-linea{position:absolute;inset:0;background:var(--dorado);transform-origin:left;transform:scaleX(0)}
.avance .libelula{position:absolute;left:0;top:-17px;width:34px;height:34px;opacity:0;transition:opacity var(--d-media) var(--ease)}
.avance.en-marcha .libelula{opacity:1}

/* Banda de Ichigo ichie: el kanji se desliza al bajar */
section.banda-kanji{background:var(--granate);color:var(--on-granate);padding-block:clamp(32px,6vw,64px);overflow:hidden;border-bottom:0}
.banda-k{display:block;width:max-content;margin-inline:auto;font-family:var(--nafuda);font-size:clamp(112px,24vw,320px);line-height:1.1;color:var(--dorado);white-space:nowrap}
.banda-nota{margin-top:clamp(12px,2vw,24px);color:var(--on-granate)}
.banda-nota b{font-family:var(--display);font-weight:600}

/* Vuelo de la banda final */
.cierre-vuelo{position:absolute;left:0;top:0;width:40px;height:40px;color:var(--dorado);pointer-events:none;z-index:1}

/* Corte de espada en el título de la portada */
@keyframes corte{from{clip-path:polygon(-5% -20%,-5% -20%,-15% 120%,-15% 120%)}to{clip-path:polygon(-5% -20%,115% -20%,105% 120%,-15% 120%)}}
@keyframes filo{0%{left:-2%;opacity:1}80%{opacity:1}100%{left:102%;opacity:0}}
.hero h1{position:relative;animation:corte 800ms var(--filo) 80ms both}
.hero-copy h1::after{content:"";position:absolute;top:-10%;bottom:-10%;width:2px;background:var(--dorado);transform:rotate(5deg);opacity:0;animation:filo 800ms var(--filo) 80ms both;pointer-events:none}
.facts b{font-variant-numeric:tabular-nums}

/* Apariciones al bajar. JavaScript las arma solo debajo de la pantalla: sin JS todo se ve */
html{--paso:80ms;--entrada:700ms;--recorrido:20px}
html .rv{transition:opacity var(--entrada) var(--ease) calc(var(--i,0)*var(--paso)),transform var(--entrada) var(--ease) calc(var(--i,0)*var(--paso)),clip-path 900ms var(--ease) calc(var(--i,0)*var(--paso))}
html .rv.pre{opacity:0;transform:translateY(var(--recorrido))}
html .rv-lado.pre{transform:translateX(calc(var(--recorrido)*2.2))}
html .rv-cerca.pre{transform:scale(.94)}
html .rv-foto.pre{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
html .rv-trazo.pre{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
html .rv .disc-foto img{transition:transform 1100ms var(--ease) calc(var(--i,0)*var(--paso))}
html .rv.pre .disc-foto img{transform:scale(1.12)}
html .rv .kanji{transition:clip-path 900ms var(--ease) calc(var(--i,0)*var(--paso) + 220ms)}
html .rv.pre .kanji{clip-path:inset(0 100% 0 0)}
html .beneficio.rv.pre::before,html .clases li.rv.pre::before{transform:scaleX(0)}
@media (max-width:720px){html{--paso:45ms;--entrada:480ms;--recorrido:14px}.avance .libelula{top:-13px;width:26px;height:26px}}
@media print{html .rv.pre{opacity:1;transform:none;clip-path:none}}