:root {
  color-scheme: dark;
  --sh-ink: #17130f; --sh-ink-soft: #241a10; --sh-panel: #261d14;
  --sh-panel-raised: #392719; --sh-paper: #f4efe5; --sh-muted: #bdb3a2;
  --sh-line: #4a3b28; --sh-terracotta: #d99516; --sh-terracotta-hover: #f2b83f;
  --sh-gold: #d99516; --sh-gold-highlight: #f2b83f; --sh-serif: Georgia, 'Times New Roman', serif;
  --sh-sans: Arial, Helvetica, sans-serif;
  --bg: var(--sh-ink); --panel: var(--sh-panel); --panel-2: var(--sh-panel-raised);
  --text: var(--sh-paper); --muted: var(--sh-muted); --accent: var(--sh-gold);
  --accent-hover: var(--sh-gold-highlight); --border: var(--sh-line);
  --fondo: var(--sh-ink); --texto: var(--sh-paper); --secundario: var(--sh-muted);
  --borde: var(--sh-line); --acento: var(--sh-gold); --gold: var(--sh-gold); --line: var(--sh-line); --soft: var(--sh-ink-soft);
}
html { background: var(--sh-ink); }
body { color: var(--sh-paper); font-family: var(--sh-sans); background: radial-gradient(ellipse at 50% 0%, #392719 0%, var(--sh-ink) 68%); }
h1, h2, h3, .grade-progress-title { font-family: var(--sh-serif); font-weight: 400; letter-spacing: -.025em; }
:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 3px; }
.access-card, .registro-card, .card { border-color: var(--sh-line); box-shadow: 0 20px 54px rgb(0 0 0 / 24%); }
.access-card, .registro-card { background-color: rgb(38 29 20 / 96%); }
input, select, textarea { border-color: var(--sh-line) !important; background-color: #21180f !important; color: var(--sh-paper) !important; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--sh-gold) !important; box-shadow: 0 0 0 3px rgb(217 149 22 / 20%); }
button, .button, .boton-siguiente-leccion { transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.access-card button, .registro-card button, .button, .boton-siguiente-leccion { background-color: var(--sh-terracotta); color: #17130f; }
.access-card button:hover, .registro-card button:hover, .button:hover, .boton-siguiente-leccion:hover { background-color: var(--sh-terracotta-hover); box-shadow: 0 7px 20px rgb(217 149 22 / 22%); transform: translateY(-1px); }
.secondary-button { background: var(--sh-panel-raised) !important; color: var(--sh-paper) !important; }
.side, .mobile { background: #17130f !important; }
.menu a:hover, .menu a:first-child, .mobile-account-menu>a:hover { background: var(--sh-ink-soft) !important; }
.card, .mobile-account-menu { background-color: var(--sh-panel); }
.member { background: linear-gradient(120deg, #392719, var(--sh-panel) 76%) !important; }
.button { border-radius: 8px; }
.status.active { background: #294134; color: #bad5bf; }
.cabecera, .menu-lateral, .divisor { background-color: var(--sh-panel) !important; border-color: var(--sh-line) !important; }
.panel-texto h2, .menu-lateral-cabecera h2 { font-family: var(--sh-serif); font-weight: 400; }
#navegacion-lecciones button:hover, #navegacion-lecciones button:focus-visible,
.enlace-cuenta:hover, .enlace-cerrar-sesion:hover { background: #392719 !important; }
#navegacion-lecciones .elemento-seleccionado { background: #392719 !important; border-color: var(--sh-gold) !important; }
.boton-siguiente-leccion { background-color: var(--sh-terracotta) !important; color: #17130f !important; }
@media (prefers-reduced-motion: no-preference) {
  .access-card, .registro-card { animation: shizen-entrada .38s ease-out both; }
  @keyframes shizen-entrada { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Lockup institucional compartido */
.brand-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.05;text-decoration:none}.brand-primary{font:700 .9rem Arial,Helvetica,sans-serif;letter-spacing:.12em;color:inherit}.brand-descriptor{font:600 .58rem Arial,Helvetica,sans-serif;letter-spacing:.18em;color:inherit}.brand-motto{font:italic .7rem Georgia,'Times New Roman',serif;letter-spacing:.02em;color:var(--sh-muted)}.brand-affiliation{display:flex;gap:.32em;align-items:baseline;color:var(--sh-gold);font:500 .5rem Arial,Helvetica,sans-serif;letter-spacing:.11em;text-transform:uppercase}.brand-affiliation b{font-size:.56rem;letter-spacing:.15em}.brand .brand-lockup{min-width:0}
@media(max-width:480px){.brand-primary{font-size:.76rem}.brand-descriptor{font-size:.5rem}.brand-motto{font-size:.62rem}.brand-affiliation{font-size:.44rem}.brand-affiliation b{font-size:.49rem}}
.marca.brand-lockup{display:inline-flex;width:auto;margin:0 auto 26px;letter-spacing:normal;font-size:inherit}.marca.brand-lockup .brand-primary{color:var(--sh-paper)}.marca.brand-lockup .brand-descriptor{color:var(--sh-paper)}.marca.brand-lockup .brand-motto{color:var(--sh-muted)}.marca.brand-lockup .brand-affiliation{color:#C6A052}

/* Logotipo PNG transparente, sin círculo ni decoración CSS */
.brand-logo{display:block;width:112px;height:auto;max-width:100%;object-fit:contain;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;flex:0 0 auto}.brand-logo-link{display:block;width:128px;max-width:100%;margin:0 auto 22px}.access-shell .brand{justify-content:center}.access-shell .brand-logo{width:122px}.layout .brand-logo{width:76px}.profile-page-shell>.brand .brand-logo{width:94px}.menu-lateral-cabecera .brand-logo{width:70px}.marca .brand-logo{width:128px;margin:0 auto}
@media(max-width:480px){.access-shell .brand-logo{width:108px}.brand-logo-link,.marca .brand-logo{width:112px}}
.mobile-menu-heading .brand-logo{width:52px;height:52px}
.brand-with-logo,.brand-with-logo.brand-lockup{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin:0 auto 22px;text-decoration:none}.brand-with-logo .brand-logo{width:76px}.brand-with-logo .brand-lockup{margin:0}.access-shell .brand-lockup{margin:0}.layout .brand-lockup{margin:0}.profile-page-shell>.brand .brand-lockup{margin:0}.menu-lateral-cabecera .brand-with-logo{margin:0;gap:8px}.menu-lateral-cabecera .brand-with-logo .brand-logo{width:56px}.marca .brand-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0;text-align:left}.mobile-menu-heading .brand-lockup{flex:1;min-width:0;margin:0}

/* Paleta común de marca: tinta cálida, oro y marfil */
.access-card button,.registro-card button,.button,.boton-siguiente-leccion{background-color:var(--sh-gold);color:var(--sh-ink)}
.access-card button:hover,.registro-card button:hover,.button:hover,.boton-siguiente-leccion:hover{background-color:var(--sh-gold-highlight);color:var(--sh-ink);box-shadow:0 7px 20px rgb(217 149 22 / 22%)}
.eyebrow,.metric,.belt,.progress-percent{color:var(--sh-gold)}
.pending,.status{background:#392719;color:#f2b83f}
.mobile-menu .active,.menu a:first-child,.mobile a:first-child{color:var(--sh-gold)}
.side>.brand{justify-content:center;padding:4px 8px 30px}.side>.brand .brand-logo{width:112px}.menu-lateral-cabecera .brand-image-only{display:block;flex:0 0 56px;width:56px;margin:0}.menu-lateral-cabecera .brand-image-only .brand-logo{width:56px}