/* =========================================================
   Japan's Notebook — Landing page
   Design tokens tomados de MARCA.md (fuente de verdad de marca)
   ========================================================= */

:root{
  --bg: #17181A;           /* sumi */
  --surface: #1F2A33;      /* indigo noche */
  --surface-2: #263340;
  --line: rgba(244,239,225,0.12);
  --line-strong: rgba(244,239,225,0.24);
  --text: #F4EFE1;         /* washi */
  --text-dim: #B3AC99;
  --shu: #C1442E;          /* acento de marca */
  --shu-dim: rgba(193,68,46,0.16);
  --gold: #C9A227;         /* kintsugi */
  --gold-dim: rgba(201,162,39,0.16);
  --vermillion: #E4572E;   /* CTA */

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --font-display: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --font-body: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-label: 'Archivo Black', 'Arial Black', sans-serif;

  --container: 1160px;
  --header-h: 72px;

  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family: var(--font-display); margin:0; text-wrap: balance; }
p{ margin:0; }

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

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.skip-link{
  position: fixed; top:-60px; left:12px; z-index: 999; background: var(--shu); color:#fff;
  padding: 10px 16px; border-radius: var(--radius-sm); transition: top .15s;
}
.skip-link:focus{ top: 12px; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-weight:600; font-size: 15px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--shu); color: #fff; box-shadow: 0 8px 24px -10px rgba(193,68,46,0.65); }
.btn-primary:hover{ background: #d6512f; }
.btn-outline{ border-color: var(--line-strong); color: var(--text); }
.btn-outline:hover{ border-color: var(--text); background: rgba(244,239,225,0.05); }
.btn-gold{ background: var(--gold); color: var(--bg); box-shadow: 0 8px 24px -10px rgba(201,162,39,0.55); }
.btn-gold:hover{ background: #ddb636; }
.btn-gold .ico{ font-family: 'Noto Sans JP', sans-serif; }
.btn-sm{ padding: 9px 18px; font-size: 13.5px; }
.btn-block{ width:100%; }

/* ============ HEADER ============ */
.site-header{
  position: sticky; top:0; z-index: 60; height: var(--header-h);
  display:flex; align-items:center;
  background: rgba(23,24,26,0.72); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-header.scrolled{ border-color: var(--line); background: rgba(23,24,26,0.92); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ border-radius:50%; }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size: 17px; letter-spacing:.2px; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{ font-size: 14.5px; color: var(--text-dim); font-weight:500; transition: color .15s; }
.main-nav a:hover{ color: var(--text); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background: var(--text); border-radius:2px; transition: transform .2s, opacity .2s; }

@media (max-width: 860px){
  .main-nav{
    position:fixed; inset: var(--header-h) 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
    background: var(--bg); border-bottom:1px solid var(--line);
    padding: 8px 20px 18px; transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .main-nav.open{ opacity:1; transform: translateY(0); pointer-events:auto; }
  .main-nav a{ padding: 12px 0; width:100%; border-bottom: 1px dashed var(--line); font-size:16px; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-sm{ display:none; }
}

/* ============ HERO ============ */
.hero{
  position: relative; min-height: min(880px, 100svh); display:flex; align-items:center;
  padding: calc(var(--header-h) + 40px) 0 80px; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; overflow:hidden;
  filter: saturate(1.05) brightness(.55);
}
.hero-bg img{
  width:100%; height:100%; object-fit: cover; object-position: center;
}
.hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(23,24,26,.55) 0%, rgba(23,24,26,.72) 55%, var(--bg) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width: 760px; }
.hero-enso{ width: 84px; height:84px; margin-bottom: 18px; opacity:.9; }
.hero-enso-track{ fill:none; stroke: rgba(244,239,225,.12); stroke-width:6; }
.hero-enso-stroke{
  fill:none; stroke: var(--shu); stroke-width:7; stroke-linecap:round;
  stroke-dasharray: 480; stroke-dashoffset: 480;
  animation: draw-enso 1.6s cubic-bezier(.65,0,.35,1) .3s forwards;
}
@keyframes draw-enso{ to{ stroke-dashoffset: 0; } }

.eyebrow{
  font-family: var(--font-label); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px;
}
.hero-title{
  font-size: clamp(34px, 6vw, 62px); font-weight:900; line-height:1.05; margin-bottom: 20px;
}
.hero-sub{
  font-size: clamp(16px, 2vw, 19px); color: var(--text-dim); max-width: 56ch; line-height:1.6; margin-bottom: 34px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom: 30px; }
.hero-socials{ display:flex; gap:22px; }
.hero-socials a{ font-size: 13.5px; color: var(--text-dim); font-weight:600; letter-spacing:.03em; border-bottom: 1px solid transparent; }
.hero-socials a:hover{ color: var(--text); border-color: var(--line-strong); }

.scroll-cue{
  position:absolute; left:50%; bottom: 28px; transform: translateX(-50%); z-index:2;
  width: 26px; height: 42px; border: 2px solid var(--line-strong); border-radius: 20px;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; width:4px; height:8px; margin-left:-2px; border-radius:2px;
  background: var(--gold); animation: cue 1.6s ease-in-out infinite;
}
@keyframes cue{ 0%{ opacity:1; transform: translateY(0);} 70%{ opacity:0; transform: translateY(14px);} 100%{opacity:0;} }

/* ============ SECTIONS (shared) ============ */
.section{ padding: 96px 0; }
.section-title{ font-size: clamp(26px, 3.6vw, 40px); font-weight:800; max-width: 18ch; margin-bottom: 14px; }
.section-sub{ color: var(--text-dim); font-size: 16px; max-width: 62ch; line-height:1.6; margin-bottom: 48px; }

/* ============ AD SLOTS ============ */
.ad-slot{ display:none; } /* se activa (display:block/flex) cuando tenga contenido real de AdSense */
.ad-slot.has-ad{
  display:flex; align-items:center; justify-content:center; min-height: 100px;
  max-width: var(--container); margin: 0 auto; padding: 16px 20px;
}

/* ============ MANIFIESTO ============ */
.manifesto-lead{
  font-size: clamp(18px, 2.2vw, 22px); line-height:1.65; max-width: 68ch; margin-bottom: 56px; color: var(--text);
}
.pillars{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; transition: border-color .2s, transform .2s;
}
.pillar:hover{ border-color: var(--line-strong); transform: translateY(-4px); }
.pillar-mark{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; background: var(--shu-dim); color: var(--shu); font-family: var(--font-display);
  font-size: 20px; font-weight:700; margin-bottom: 18px;
}
.pillar h3{ font-size: 18px; margin-bottom: 10px; }
.pillar p{ color: var(--text-dim); font-size: 14.5px; line-height:1.6; }

@media (max-width: 760px){ .pillars{ grid-template-columns: 1fr; } }

/* ============ UNIVERSO / VIDEO GRID ============ */
.video-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 52px;
}
.video-card{
  position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 9/16;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .25s ease, border-color .25s ease;
}
.video-card:hover{ transform: translateY(-6px); border-color: var(--line-strong); }
.video-card img{ width:100%; height:100%; object-fit: cover; }
.video-card .vc-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding: 14px; background: linear-gradient(180deg, transparent 40%, rgba(23,24,26,.92) 100%);
}
.video-card .vc-kanji{
  align-self:flex-start; font-family: var(--font-display); font-size: 12px; font-weight:700;
  background: rgba(23,24,26,.7); border: 1px solid var(--gold); color: var(--gold);
  padding: 3px 9px; border-radius: 999px; margin-bottom: auto;
}
.video-card .vc-title{ font-family: var(--font-display); font-weight:700; font-size: 14.5px; line-height:1.25; margin-bottom:4px; }
.video-card .vc-hook{ font-size: 11.5px; color: var(--text-dim); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.universo-cta{ text-align:center; }
.universo-cta p{ color: var(--text-dim); margin-bottom: 20px; }
.universo-cta .hero-ctas{ justify-content:center; margin:0; }

@media (max-width: 980px){ .video-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px){ .video-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; } }

/* ============ FILOSOFÍA ============ */
.philosophy-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.phi-tile{
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius: var(--radius); padding: 30px 24px;
  transition: transform .2s, border-color .2s;
}
.phi-tile:hover{ transform: translateY(-4px); border-color: var(--gold); }
.phi-kanji{ display:block; font-family: var(--font-display); font-size: 30px; font-weight:700; color: var(--gold); margin-bottom: 14px; }
.phi-tile h3{ font-size: 18px; margin-bottom: 8px; }
.phi-tile p{ font-size: 14px; color: var(--text-dim); line-height:1.6; }

@media (max-width: 860px){ .philosophy-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .philosophy-grid{ grid-template-columns: 1fr; } }

/* ============ PRÓXIMAMENTE ============ */
.coming-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom: 56px; }
.coming-card{
  position:relative; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px 24px; text-align:center;
}
.coming-badge{
  position:absolute; top:16px; right:16px; font-size: 10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; background: var(--gold-dim); color: var(--gold); padding:4px 10px; border-radius: 999px;
}
.coming-icon{ font-size: 34px; display:block; margin-bottom: 16px; }
.coming-card h3{ font-size: 19px; margin-bottom: 10px; }
.coming-card p{ font-size: 14px; color: var(--text-dim); line-height:1.6; }

.waitlist{
  display:grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items:center;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 40px;
}
.waitlist-copy h3{ font-size: 24px; margin-bottom: 12px; }
.waitlist-copy p{ color: var(--text-dim); line-height:1.6; }
.waitlist-form-wrap{ background: var(--text); border-radius: var(--radius); overflow:hidden; min-height: 420px; }
.waitlist-form-wrap iframe{ width:100%; height:420px; border:0; display:block; }

@media (max-width: 900px){
  .coming-grid{ grid-template-columns: 1fr; }
  .waitlist{ grid-template-columns: 1fr; padding: 26px; }
}

/* ============ SOCIAL BAND ============ */
.social-band{
  position:relative; padding: 90px 0; text-align:center; overflow:hidden;
  background: radial-gradient(ellipse at 50% 0%, var(--surface) 0%, var(--bg) 70%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.band-enso{
  position:absolute; top:50%; left:50%; width: 520px; height:520px; transform: translate(-50%,-50%);
  opacity: .05; fill:none; stroke: var(--shu); stroke-width:3;
}
.social-band-inner{ position:relative; z-index:1; }
.social-band h2{ font-size: clamp(28px,4vw,44px); margin-bottom: 10px; }
.social-band p{ color: var(--text-dim); margin-bottom: 36px; }
.social-buttons{ display:flex; justify-content:center; gap: 16px; flex-wrap:wrap; }
.social-btn{
  display:flex; flex-direction:column; gap:4px; min-width: 180px; padding: 18px 26px;
  border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface);
  transition: transform .2s, border-color .2s;
}
.social-btn:hover{ transform: translateY(-4px); border-color: var(--gold); }
.social-btn strong{ font-family: var(--font-display); font-size: 16px; }
.social-btn span{ font-size: 13px; color: var(--text-dim); }

/* ============ CONTACTO ============ */
.contact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.contact-card{
  display:block; text-align:left; width:100%; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); padding: 28px 24px; transition: transform .2s, border-color .2s;
}
.contact-card:hover{ transform: translateY(-4px); border-color: var(--line-strong); }
.contact-icon{ font-size: 26px; display:block; margin-bottom: 14px; }
.contact-card h3{ font-size: 17px; margin-bottom: 8px; }
.contact-card p{ font-size: 14px; color: var(--text-dim); line-height:1.5; word-break: break-word; }
.contact-social-links{ display:flex; gap:14px; margin-top:6px; flex-wrap:wrap; }
.contact-social-links a{ font-size: 13.5px; font-weight:600; color: var(--gold); }
.contact-social-links a:hover{ text-decoration: underline; }

@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ============ FOOTER ============ */
.site-footer{ border-top: 1px solid var(--line); padding: 56px 0 0; }
.footer-inner{
  display:flex; flex-wrap:wrap; gap: 32px; justify-content:space-between; align-items:flex-start;
  padding-bottom: 40px; border-bottom: 1px solid var(--line);
}
.footer-brand{ display:flex; gap:12px; align-items:center; }
.footer-name{ font-family: var(--font-display); font-weight:700; }
.footer-tagline{ font-size: 13px; color: var(--text-dim); margin-top:2px; }
.footer-nav{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-nav a{ font-size: 14px; color: var(--text-dim); }
.footer-nav a:hover{ color: var(--text); }
.footer-socials{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-socials a{ font-size: 14px; color: var(--text-dim); font-weight:600; }
.footer-socials a:hover{ color: var(--gold); }
.footer-legal{ padding: 22px 20px 32px; display:flex; flex-direction:column; gap:8px; }
.footer-legal p{ font-size: 12px; color: var(--text-dim); }
.footer-note{ max-width: 74ch; line-height:1.6; opacity:.75; }

/* ============ WHATSAPP CHAT WIDGET ============ */
.chat-widget{ position: fixed; right: 18px; bottom: 18px; z-index: 80; }
.chat-fab{
  width: 58px; height:58px; border-radius:50%; background: var(--shu); color:#fff; font-size: 26px;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 30px -8px rgba(193,68,46,.7);
  transition: transform .2s;
}
.chat-fab:hover{ transform: scale(1.06); }

.chat-panel{
  position: absolute; right:0; bottom: 74px; width: min(340px, 88vw); max-height: 70vh;
  background: var(--surface); border:1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -15px rgba(0,0,0,.6); display:flex; flex-direction:column; overflow:hidden;
}
.chat-panel[hidden]{ display:none; }
.chat-panel-header{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.chat-panel-title{ font-weight:700; font-size: 14.5px; }
.chat-panel-status{ font-size: 11.5px; color: var(--gold); margin-top:3px; }
.chat-close{ font-size: 16px; color: var(--text-dim); line-height:1; padding:4px; }
.chat-close:hover{ color: var(--text); }

.chat-messages{ padding: 16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; flex:1; min-height: 160px; }
.chat-msg{ max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height:1.5; }
.chat-msg.bot{ align-self:flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius:4px; }
.chat-msg.user{ align-self:flex-end; background: var(--shu-dim); color: var(--text); border-bottom-right-radius:4px; }

.chat-quick-replies{ display:flex; flex-wrap:wrap; gap:8px; padding: 0 18px 14px; }
.chat-quick-replies button{
  font-size: 12.5px; padding: 8px 12px; border-radius: 999px; border:1px solid var(--line-strong);
  color: var(--text); transition: border-color .15s, background .15s;
}
.chat-quick-replies button:hover{ border-color: var(--gold); background: var(--gold-dim); }

.chat-footer{ padding: 14px 18px; border-top: 1px solid var(--line); }

@media (max-width: 480px){
  .chat-widget{ right:12px; bottom:12px; }
  .chat-panel{ width: 92vw; }
}

/* ============ CURSO DE JAPONÉS ============ */
.curso-hero{
  padding: calc(var(--header-h) + 56px) 0 64px; text-align:center;
  background: radial-gradient(ellipse at 50% 0%, var(--surface) 0%, var(--bg) 72%);
  border-bottom: 1px solid var(--line);
}
.curso-hero .eyebrow{ justify-content:center; display:flex; }
.curso-hero h1{ font-size: clamp(30px, 5vw, 48px); font-weight:900; max-width: 20ch; margin: 0 auto 16px; }
.curso-hero p{ color: var(--text-dim); max-width: 56ch; margin: 0 auto; line-height:1.6; font-size:16px; }

.curso-progreso{
  display:flex; justify-content:center; gap:10px; margin-top: 32px; flex-wrap:wrap;
}
.curso-progreso span{
  width:10px; height:10px; border-radius:50%; background: var(--line-strong);
}
.curso-progreso span.done{ background: var(--gold); }

.leccion-teaser{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; display:flex; align-items:center; gap:28px; margin-top: 40px;
}
.leccion-teaser-kana{ font-family: var(--font-display); font-size: 48px; color: var(--gold); line-height:1; }
.leccion-teaser h3{ font-size: 19px; margin-bottom: 6px; }
.leccion-teaser p{ color: var(--text-dim); font-size:14px; line-height:1.5; }

.nivel-badge{
  display:inline-block; font-family: var(--font-label); font-size: 11px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--gold); background: var(--gold-dim);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
}
.nivel-badge.proximo{ color: var(--text-dim); background: rgba(244,239,225,0.06); }

.leccion-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-bottom: 20px; }
.leccion-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; transition: transform .2s ease, border-color .2s ease;
}
.leccion-card:hover{ transform: translateY(-4px); border-color: var(--gold); }
.leccion-num{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; background: var(--shu-dim); color: var(--shu); font-family: var(--font-display);
  font-weight:700; font-size:15px;
}
.leccion-card h3{ font-size: 17px; }
.leccion-card p{ color: var(--text-dim); font-size:13.5px; line-height:1.55; flex:1; }
.leccion-card .leccion-kana-preview{ font-family: var(--font-display); font-size:22px; color: var(--gold); letter-spacing:.06em; }
.leccion-card .leccion-go{ font-size:13px; font-weight:700; color: var(--gold); }

.leccion-card.locked{ opacity:.5; pointer-events:none; }

.descargables{ margin-top: 44px; }
.descargables-kicker{
  font-family: var(--font-label); font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-dim); margin-bottom: 16px;
}
.descargables-grid{ display:flex; flex-direction:column; gap:18px; }
.descargable-card{
  display:flex; align-items:center; gap:26px; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 30px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.descargable-card:hover{
  transform: translateY(-5px); border-color: var(--gold);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.6);
}
.descargable-visual{
  position:relative; flex-shrink:0; width: 104px; height:104px; border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.descargable-visual--cuaderno{ background: linear-gradient(135deg, #3a1a12 0%, var(--shu) 55%, #6e2116 100%); }
.descargable-visual--resumen{ background: linear-gradient(135deg, var(--surface-2) 0%, #4a3a12 65%, var(--gold) 140%); }
.descargable-visual-kanji{
  position:absolute; right:-8px; bottom:-16px; font-family: var(--font-display); font-weight:700;
  font-size: 74px; line-height:1; color: rgba(255,255,255,0.12); z-index:1; pointer-events:none;
}
.descargable-visual-icon{
  font-size: 40px; z-index:2; filter: drop-shadow(0 6px 12px rgba(0,0,0,.4));
  transition: transform .3s ease;
}
.descargable-card:hover .descargable-visual-icon{ transform: scale(1.1) rotate(-4deg); }
.descargable-content{ flex:1; min-width:0; }
.descargable-badge{
  display:inline-block; font-family: var(--font-label); font-size: 10px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--gold); background: var(--gold-dim);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.descargable-content h3{ font-size: 17px; margin-bottom: 6px; }
.descargable-content p{ color: var(--text-dim); font-size:13.5px; line-height:1.55; margin-bottom: 8px; }
.descargable-meta{ font-size:11.5px; color: var(--text-dim); opacity:.75; }
.descargable-cta{ flex-shrink:0; white-space:nowrap; }

@media (max-width: 700px){
  .descargable-card{ flex-direction:column; text-align:center; padding: 28px 24px; }
  .descargable-cta{ width:100%; }
}

@media (max-width: 980px){ .leccion-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .leccion-grid{ grid-template-columns: 1fr; } .leccion-teaser{ flex-direction:column; text-align:center; } }

/* ---- Lesson page shell ---- */
.leccion-shell{ padding: calc(var(--header-h) + 40px) 0 90px; }
.leccion-breadcrumb{ font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }
.leccion-breadcrumb a{ color: var(--gold); }
.leccion-header{ margin-bottom: 44px; }
.leccion-header .nivel-badge{ margin-bottom: 14px; }
.leccion-header h1{ font-size: clamp(26px, 4vw, 38px); font-weight:800; margin-bottom: 12px; }
.leccion-header p{ color: var(--text-dim); max-width: 62ch; line-height:1.6; font-size:15.5px; }

.leccion-block{ margin-bottom: 52px; }
.leccion-block h2{ font-size: 21px; margin-bottom: 8px; }
.leccion-block > p{ color: var(--text-dim); font-size:14.5px; margin-bottom: 22px; line-height:1.6; max-width: 68ch; }

.kana-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.kana-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  aspect-ratio: 1; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s, background .15s;
}
.kana-cell:hover{ border-color: var(--gold); background: var(--surface-2); }
.kana-cell b{ font-family: 'Noto Sans JP', sans-serif; font-size: clamp(20px, 3vw, 28px); font-weight:500; }
.kana-cell small{ font-size: 11px; color: var(--text-dim); letter-spacing:.03em; }
.kana-cell.kana-empty{ background:none; border:none; }

@media (max-width: 620px){ .kana-grid{ grid-template-columns: repeat(5, 1fr); gap:6px; } .kana-cell b{ font-size:18px; } }

.frase-tabla{ width:100%; border-collapse: collapse; }
.frase-tabla th, .frase-tabla td{ text-align:left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align:top; }
.frase-tabla th{ color: var(--text-dim); font-size: 12px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.frase-tabla td.jp{ font-family: 'Noto Sans JP', sans-serif; font-size: 18px; white-space:nowrap; }
.frase-tabla td.romaji{ color: var(--gold); font-style:italic; white-space:nowrap; }
.frase-tabla td.uso{ color: var(--text-dim); font-size: 13.5px; }
.frase-tabla-wrap{ overflow-x:auto; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 6px 16px; }

.nota-tip{
  background: var(--gold-dim); border:1px solid rgba(201,162,39,0.3); border-radius: var(--radius);
  padding: 16px 20px; font-size: 14px; color: var(--text); line-height:1.6; margin-top: 18px;
}
.nota-tip b{ color: var(--gold); }

.leccion-nav{
  display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top: 60px;
  padding-top: 28px; border-top: 1px solid var(--line); flex-wrap:wrap;
}
.leccion-nav a{ font-size:14px; font-weight:600; color: var(--text-dim); }
.leccion-nav a:hover{ color: var(--text); }
.leccion-nav a.siguiente{ color: var(--gold); }
.leccion-nav-center a{ color: var(--text-dim); font-size:13px; }