/* CHARLO · Neobrutalismo v1
   Superficies de marca: portal e índices de curso.
   La capa de estudio (platform/lesson.css) queda fuera de este archivo. */

.charlo-neobrutal {
  /* Fondo único de todo el sitio (portal, perfil, índices de curso, páginas
     estáticas): #F2F3F3, blanco grisáceo neutro. Fuente única aquí — ninguna
     página lo redeclara localmente. */
  --nb-canvas: #F2F3F3;
  --nb-paper: #ffffff;
  --nb-ink: #16181f;
  --nb-text: #1f2536;
  --nb-muted: #565d72;
  --nb-teal: #0e8477;
  --nb-teal-fill: #d7f1ec;
  --nb-violet: #6b4ee6;
  --nb-violet-fill: #e8e3ff;
  --nb-crimson: #be123c;
  --nb-crimson-fill: #f7e3e8;
  --nb-gold: #e9b10e;
  --nb-gold-fill: #fbeec2;
  /* Azul de marca único para topbars/etiquetas/badges de todo el sitio
     (portal, ambos cursos, lecciones). Reutilizado también como "fill":
     texto oscuro (--nb-ink) sobre #5195FC da 5.96:1 de contraste — no
     hace falta un tono pastel derivado. */
  --nb-royal: #5195FC;
  --nb-ok: #127a45;
  --nb-ok-fill: #dbf2e4;
  --nb-error: #b3261e;
  --nb-error-fill: #fbe2e0;
  --nb-border: 3px solid var(--nb-ink);
  --nb-border-small: 2px solid var(--nb-ink);
  --nb-radius: 12px;
  --nb-radius-small: 8px;
  --nb-shadow: 5px 5px 0 var(--nb-ink);
  --nb-shadow-small: 3px 3px 0 var(--nb-ink);
  --nb-shadow-pressed: 1px 1px 0 var(--nb-ink);
  --nb-shadow-theme: 5px 5px 0 var(--nb-theme);
  --nb-shadow-theme-small: 3px 3px 0 var(--nb-theme);
  --nb-shadow-theme-pressed: 1px 1px 0 var(--nb-theme);
  --nb-shadow-gold-small: 3px 3px 0 var(--nb-gold);
  --nb-shadow-gold-pressed: 1px 1px 0 var(--nb-gold);
  /* Tema por defecto (páginas sin .charlo-theme-fr/-en, p. ej. el perfil):
     azul único de marca, no violeta. */
  --nb-theme: var(--nb-royal);
  --nb-theme-fill: var(--nb-royal);
  background: var(--nb-canvas) !important;
  color: var(--nb-text);
}

/* Los cursos FR/EN ya no se distinguen por color de tema (antes teal/
   crimson): ambos usan el mismo azul único --nb-royal. */
.charlo-theme-fr {
  --nb-theme: var(--nb-royal);
  --nb-theme-fill: var(--nb-royal);
}

.charlo-theme-en {
  --nb-theme: var(--nb-royal);
  --nb-theme-fill: var(--nb-royal);
}

.charlo-neobrutal *,
.charlo-neobrutal *::before,
.charlo-neobrutal *::after {
  box-sizing: border-box;
}

.charlo-neobrutal :where(.portal-header, .portal-paths, .info-section) {
  animation: none;
}

.charlo-neobrutal :where(
    .nav-wrapper,
    .path-card,
    .info-box,
    .lang-dropdown,
    .lang-modal-overlay,
    #sidebar-overlay,
    #sidebar-menu,
    #about-modal,
    #terms-modal,
    #privacy-modal,
    #refund-modal
  ) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.charlo-neobrutal :where(
    a,
    button,
    [role="button"]
  ):focus-visible {
  outline: 3px solid var(--nb-ink) !important;
  outline-offset: 4px;
}

.charlo-neobrutal :where(
    .nav-btn,
    #hamburger-btn,
    .portal-plus-cta,
    .lang-option,
    .lang-card,
    .close-sidebar,
    .lang-close-btn
  ) {
  min-height: 44px;
}

.charlo-neobrutal .nav-wrapper {
  background: var(--nb-royal) !important;
  border-bottom: var(--nb-border) !important;
  box-shadow: 0 4px 0 var(--nb-ink);
}

.charlo-neobrutal .nav-wrapper > nav {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Logo CHARLO — fuente única para todos los topbars (portal, índices de
   curso, perfil). Antes vivía duplicado, verbatim, en el <style> de cada
   página; ahora es una sola definición aquí. Letras blancas + contorno negro
   y sombra coral (se lee sobre el azul --nb-royal de la topbar), para que el
   logo mantenga el mismo tratamiento en todas las superficies. */
.charlo-neobrutal .logo-wrap {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Alinea el logo pequeño del portal a la misma distancia del borde izquierdo
   que el índice de inglés (hamburger 44px + gap 12px + su padding propio):
   medido en navegador, 56px de diferencia. Solo desktop — en móvil (media
   query de abajo) vuelve a 0. No agrega ningún botón. */
.charlo-neobrutal--portal .logo-wrap {
  margin-left: 56px;
}

/* Logo pequeño (wordmark limpio) = topbar de todas las superficies neobrutal.
   Texto real (antes imagen charlo-logo-pequeno.svg; ya no existe): fuente
   Fredoka (la del wordmark de marca), blanco sólido, sin contorno ni sombra,
   para leerse sobre el azul --nb-royal del topbar. */
.charlo-neobrutal .logo {
  display: inline-block;
  color: #FFFFFF;
  font-family: "Fredoka", "Outfit", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

/* Logo grande (wordmark ilustrado) = logo hero, solo portal.html. Sigue siendo
   imagen (charlo-logo-grande.svg): tiene ilustración real que el texto no
   puede replicar. */
.charlo-neobrutal .portal-logo {
  width: min(100%, 1000px);
  height: clamp(150px, 24vw, 250px);
  color: transparent !important;
  font-weight: 800;
  text-transform: uppercase;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  /* contain = muestra el wordmark COMPLETO (cabezas incluidas) sin recortar y
     sin cambiar la altura de la caja, así no se corre nada del contenido. El
     viewBox del SVG ya incluye las cabezas (assets/images/charlo-logo-grande.svg). */
  background-size: contain;
  background-image: url("../images/charlo-logo-grande.svg");
  font-size: 0 !important;
  line-height: 0 !important;
}

.charlo-neobrutal .logo-badge {
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--nb-theme);
}

.charlo-neobrutal .nav-btn {
  justify-content: center;
  background: var(--nb-paper) !important;
  color: var(--nb-ink) !important;
  border: var(--nb-border-small) !important;
  border-radius: var(--nb-radius-small) !important;
  box-shadow: var(--nb-shadow-small);
  font-weight: 800;
  text-decoration: none;
  transition: transform 100ms steps(2), box-shadow 100ms steps(2), background-color 100ms linear;
}

.charlo-neobrutal .nav-btn--signup {
  background: var(--nb-ink) !important;
  color: #fff !important;
  box-shadow: var(--nb-shadow-small);
}

.charlo-neobrutal .nav-btn--profile {
  background: var(--nb-paper) !important;
  color: var(--nb-ink) !important;
}

.charlo-neobrutal #signout-btn {
  background: var(--nb-ink) !important;
  color: #fff !important;
  border-color: #fff !important;
}

.charlo-neobrutal :where(.nav-btn, #hamburger-btn):active {
  transform: translate(3px, 3px);
  box-shadow: var(--nb-shadow-pressed);
}

.charlo-neobrutal .nav-btn--signup:active {
  box-shadow: var(--nb-shadow-pressed);
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTONES PRINCIPALES DE AUTENTICACIÓN — regla visual única y global.
   Se dirige por id (#login-link, #signup-link, #profile-link, #signout-btn),
   los MISMOS ids que ya existen, sin cambios, en portal.html,
   espanol-frances/index.html, espanol-ingles/index.html y dashboard.html.
   Por eso el color nunca varía por página ni por estado de sesión: el
   par izquierda/derecha es siempre el mismo, sea "Ingresar/Registrarse"
   (visitante) o "Mi Perfil/Cerrar Sesión" (con sesión). No toca ningún
   otro .nav-btn (inicio, hamburguesa, feedback, enlaces del drawer) ni
   ningún botón de ejercicio (viven en platform/lesson.css, aparte).

   Blanco y negro puro en los dos botones — sin acento de color. Izquierda —
   fondo blanco, borde y texto negro (--nb-ink). Derecha — fondo negro
   (--nb-ink), borde y texto blanco. El hover invierte cada par. */
.charlo-neobrutal #login-link,
.charlo-neobrutal #profile-link {
  background: var(--nb-paper) !important;
  color: var(--nb-ink) !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-small) !important;
  box-shadow: var(--nb-shadow-small) !important;
}

/* "Mi Perfil" y "Cerrar Sesión" ya son texto negro sólido sobre fondo blanco
   (contraste directo, 21:1) — el contorno de 4 sombras de arriba era para
   letras blancas sobre el mostaza antiguo y aquí solo se ve como un borrón.
   #login-link conserva el contorno sin cambios. */
.charlo-neobrutal #profile-link,
.charlo-neobrutal #signout-btn {
  background: var(--nb-paper) !important;
  color: var(--nb-ink) !important;
  text-shadow: none !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-small) !important;
  box-shadow: var(--nb-shadow-small) !important;
}

.charlo-neobrutal #login-link:hover,
.charlo-neobrutal #profile-link:hover,
.charlo-neobrutal #signout-btn:hover {
  background: var(--nb-ink) !important;
  color: #fff !important;
  border-color: var(--nb-ink) !important;
}

.charlo-neobrutal #signup-link {
  background: var(--nb-ink) !important;
  color: #fff !important;
  border: var(--nb-border) !important;
  border-color: #fff !important;
  border-radius: var(--nb-radius-small) !important;
  box-shadow: 3px 3px 0 var(--nb-ink) !important;
}

.charlo-neobrutal #signup-link:hover {
  background: var(--nb-paper) !important;
  color: var(--nb-ink) !important;
  border-color: var(--nb-ink) !important;
}

.charlo-neobrutal #login-link:active,
.charlo-neobrutal #profile-link:active,
.charlo-neobrutal #signout-btn:active {
  box-shadow: var(--nb-shadow-pressed) !important;
}

.charlo-neobrutal #signup-link:active {
  box-shadow: 1px 1px 0 var(--nb-ink) !important;
}

.charlo-neobrutal #signout-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 3px 3px 0 var(--nb-ink) !important;
}

.charlo-neobrutal .hero {
  color: var(--nb-text);
}

.charlo-neobrutal .hero-tag {
  color: var(--nb-ink);
  background: var(--nb-theme-fill);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-theme-small);
  font-weight: 800;
}

.charlo-neobrutal .hero-tag::before {
  width: 8px;
  height: 8px;
  border: 1px solid var(--nb-ink);
  border-radius: 2px;
  background: var(--nb-theme);
  animation: none;
}

.charlo-neobrutal .hero-title {
  color: var(--nb-ink);
  font-weight: 800;
}

.charlo-neobrutal .hero-title > span:not([data-lang]),
.charlo-neobrutal .hero-title [data-lang] > span {
  color: var(--nb-theme);
}

.charlo-neobrutal .hero-desc {
  color: var(--nb-text);
}

/* Índices es→en / es→fr: el hero-right aloja la ilustración SVG del curso
   (assets/images/course-hero/*.svg). La imagen trae su propio fondo y forma,
   así que el contenedor va sin marco (sin borde/relleno/sombra) para que el
   dibujo se lea "pintado" sobre el lienzo, no dentro de una tarjeta. */
.charlo-neobrutal .hero-right {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* El SVG del hero trae fondo casi-blanco opaco (#FDFDFD); sobre el lienzo gris
   (#F2F3F3) se notaría un rectángulo. multiply funde ese blanco exactamente con
   el fondo de la página sin tocar el dibujo ni crear PNG: queda "pintado". */
.charlo-neobrutal .hero-right img {
  mix-blend-mode: multiply;
}

.charlo-neobrutal :where(.fr-word-item, .en-word-item) {
  animation: none;
}

.charlo-neobrutal :where(.fr-word, .en-word) {
  color: var(--nb-ink);
}

.charlo-neobrutal :where(.fr-word-divider, .en-word-divider, .char-divider) {
  height: 2px;
  background: var(--nb-ink);
}

.charlo-neobrutal .hero-stats .stat-num {
  color: var(--nb-ink);
  font-weight: 800;
}

.charlo-neobrutal .hero-stats .stat-label {
  color: var(--nb-muted);
  font-weight: 700;
}

.charlo-neobrutal .hero-stats .stat a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px !important;
  color: var(--nb-ink) !important;
  background: var(--nb-paper) !important;
  border: var(--nb-border-small) !important;
  border-radius: var(--nb-radius-small) !important;
  box-shadow: var(--nb-shadow-small);
}

.charlo-neobrutal .hero-stats .stat a[href="#lessons-heading"] {
  background: var(--nb-ink) !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: var(--nb-shadow-small);
}

.charlo-neobrutal .hero-stats .stat a[href="#lessons-heading"]:active {
  transform: translate(3px, 3px);
  box-shadow: var(--nb-shadow-pressed);
}

.charlo-neobrutal .section-header {
  padding: 14px 16px;
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  background: var(--nb-paper);
  box-shadow: var(--nb-shadow-small);
}

.charlo-neobrutal .section-label {
  color: var(--nb-ink);
  font-weight: 800;
}

.charlo-neobrutal .section-count {
  padding: 5px 9px;
  color: var(--nb-ink);
  background: var(--nb-gold-fill);
  border: var(--nb-border-small);
  border-radius: 6px;
  font-weight: 800;
}

.charlo-neobrutal .lessons-grid {
  gap: 20px;
}

.charlo-neobrutal .lesson-card {
  min-height: 250px;
  padding: 30px 22px 22px;
  gap: 12px;
  overflow: hidden;
  color: var(--nb-text);
  background: var(--nb-paper) !important;
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow);
  transition: transform 100ms steps(2), box-shadow 100ms steps(2);
}

.charlo-neobrutal .lesson-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 34px;
  padding: 5px 9px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  font-weight: 800;
}

.charlo-neobrutal .cecr-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 8px;
  color: var(--nb-ink);
  background: var(--nb-gold-fill);
  border: var(--nb-border-small);
  border-radius: 6px;
}

.charlo-neobrutal .card-char {
  margin: 7px 0 3px;
  color: var(--nb-ink);
  font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.charlo-neobrutal .lesson-title-main {
  color: var(--nb-ink);
  font-size: 1.06rem;
  font-weight: 800;
}

.charlo-neobrutal .lesson-title-pinyin {
  color: var(--nb-text);
  font-style: normal;
  font-weight: 600;
}

.charlo-neobrutal .lesson-sub {
  padding-top: 12px;
  color: var(--nb-ink);
  border-top: var(--nb-border-small);
  font-weight: 800;
}

.charlo-neobrutal .lesson-card:hover .lesson-sub {
  color: var(--nb-ink);
}

.charlo-neobrutal .lesson-arrow {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  color: #ffffff;
  background: var(--nb-ink);
  border-radius: 7px;
  opacity: 1;
}

.charlo-neobrutal .lesson-card:hover .lesson-arrow {
  transform: none;
}

.charlo-neobrutal footer {
  color: var(--nb-text);
  border-top: var(--nb-border);
}

.charlo-neobrutal :where(.footer-brand, .footer-link, .footer-copy) {
  color: var(--nb-muted);
}

/* Los footers de índices y portal comparten el mismo wordmark de texto. */

/* Páginas informativas globales */

body.charlo-static-page {
  --nb-theme: var(--nb-ink);
  --nb-theme-fill: #edf0f6;
  --nb-static-accent: var(--nb-ink);
  --nb-static-accent-fill: #edf0f6;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--nb-canvas) !important;
  color: var(--nb-text);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.charlo-static-page--about {
  --nb-static-accent: var(--nb-teal);
  --nb-static-accent-fill: var(--nb-teal-fill);
}

body.charlo-static-page--terms,
body.charlo-static-page--privacy {
  --nb-static-accent: var(--nb-crimson);
  --nb-static-accent-fill: var(--nb-crimson-fill);
}

body.charlo-static-page--refund {
  --nb-static-accent: var(--nb-gold);
  --nb-static-accent-fill: var(--nb-gold-fill);
}

.charlo-static-page :where(h1, h2, h3, p) {
  margin-top: 0;
}

.charlo-static-page .nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.charlo-static-page .nav-wrapper > nav {
  width: 100%;
  max-width: 1080px;
  min-height: 76px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.charlo-static-page .logo-wrap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--nb-ink);
  text-decoration: none;
}

.charlo-static-page .logo {
  display: inline-block;
  font-family: "Fredoka", "Outfit", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.charlo-static-page .logo span {
  color: inherit;
}

.charlo-static-page .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 13px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-small);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 100ms steps(2), box-shadow 100ms steps(2), background-color 100ms linear;
}

.charlo-static-page .nav-link:active {
  transform: translate(3px, 3px);
  box-shadow: var(--nb-shadow-pressed);
}

.charlo-static-page main {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 58px 24px 76px;
  flex: 1;
}

.charlo-static-page .page-header {
  margin-bottom: 34px;
  padding: 30px 32px;
  background: var(--nb-paper);
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: 5px 5px 0 var(--nb-static-accent);
  text-align: left;
}

.charlo-static-page .page-title {
  margin-bottom: 10px;
  color: var(--nb-ink);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: clamp(2rem, 5vw, 3.35rem);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
}

.charlo-static-page .page-subtitle {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--nb-text);
  font-size: 1rem;
  font-weight: 600;
}

.charlo-static-page .timeline {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.charlo-static-page .update-card {
  position: relative;
  min-width: 0;
  padding: 36px 32px 32px;
  overflow: hidden;
  color: var(--nb-text);
  background: var(--nb-paper);
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: 5px 5px 0 var(--nb-static-accent);
}

.charlo-static-page .update-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  background: var(--nb-static-accent);
  border-bottom: var(--nb-border-small);
}

.charlo-static-page .update-date {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 22px;
  padding: 7px 12px;
  color: var(--nb-ink);
  background: var(--nb-gold-fill);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-gold-small);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.charlo-static-page .update-content h3 {
  margin: 28px 0 8px;
  color: var(--nb-ink);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.25;
}

.charlo-static-page .update-content h3:first-of-type {
  margin-top: 0;
}

.charlo-static-page .update-content p {
  margin-bottom: 0;
  color: var(--nb-text);
  font-size: 0.96rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.charlo-static-page .static-content-card .update-content p {
  margin-bottom: 14px;
  line-height: 1.65;
}

.charlo-static-page .static-content-card .update-content :where(ul, ol) {
  margin: 0 0 18px;
  padding-left: 1.35rem;
  color: var(--nb-text);
}

.charlo-static-page .static-content-card .update-content li {
  margin-bottom: 8px;
}

.charlo-static-page .static-content-card .update-content strong {
  color: var(--nb-ink);
  font-weight: 800;
}

.charlo-static-page .static-content-card .update-content > :last-child {
  margin-bottom: 0;
}

.charlo-static-page--terms .update-date,
.charlo-static-page--privacy .update-date,
.charlo-static-page--refund .update-date {
  background: var(--nb-static-accent-fill);
  box-shadow: 3px 3px 0 var(--nb-static-accent);
}

/* Portal */

.charlo-neobrutal--portal {
  --nb-theme: var(--nb-royal);
  --nb-theme-fill: var(--nb-royal);
}

.charlo-neobrutal--portal .portal-main {
  flex: 1;
}

.charlo-neobrutal--portal .nav-wrapper > nav > .portal-plus-row {
  display: flex;
  justify-content: flex-start;
  flex: 0 0 auto;
  align-self: center;
}

/* Charlo Plus oculto temporalmente de la landing: el atributo `hidden` por sí
   solo no le gana en especificidad a la regla `display:flex` de arriba. */
.charlo-neobrutal--portal .nav-wrapper > nav > .portal-plus-row[hidden] {
  display: none;
}

.charlo-neobrutal--portal .portal-plus-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 210px;
  min-height: 44px;
  padding: 10px 18px;
  color: #ffffff;
  background: var(--nb-ink) !important;
  border: var(--nb-border-small) !important;
  border-color: #fff !important;
  border-radius: var(--nb-radius-small) !important;
  box-shadow: var(--nb-shadow-small);
  text-decoration: none;
  overflow: hidden;
  transition: transform 100ms steps(2), box-shadow 100ms steps(2);
}

.charlo-neobrutal--portal .portal-plus-cta::before {
  content: "★";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: 1px solid var(--nb-ink);
  border-radius: 5px;
  position: relative;
  z-index: 1;
}

.charlo-neobrutal--portal .portal-plus-cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -35%;
  bottom: -35%;
  left: 0;
  width: 34%;
  background: rgba(255, 255, 255, 0.4);
  transform: translateX(-220%) skewX(-18deg);
  animation: charlo-plus-sheen 6s ease-in-out infinite;
  pointer-events: none;
}

.charlo-neobrutal--portal .portal-plus-cta span {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes charlo-plus-sheen {
  0%,
  14% {
    transform: translateX(-220%) skewX(-18deg);
  }

  44%,
  100% {
    transform: translateX(520%) skewX(-18deg);
  }
}

/* El fondo lo hereda de .charlo-neobrutal (--nb-canvas, #F2F3F3, fuente
   única en todo el sitio) — el portal ya no lo redeclara aparte.
   --portal-content-max: ancho máximo compartido por .portal-course-section
   (única fuente, no un "840px" repetido) para que las tarjetas de curso no
   puedan desalinearse entre sí.
   --portal-info-max/--portal-info-gutter: EXACTAMENTE el max-width (1040px)
   y el padding lateral (20px) que .info-section define en portal.html para
   la tarjeta "Aprende desde tu propio idioma" — el bloque de marca reutiliza
   estos mismos dos números (no las tarjetas de curso, que usan otro ancho). */
.charlo-neobrutal--portal {
  /* Fondo blanco SOLO en el portal (los índices/dashboard/legales siguen en
     --nb-canvas #F2F3F3). Override scoped, sin tocar el token global. */
  background: #FFFFFF !important;
  --portal-content-max: 840px;
  --portal-info-max: 1040px;
  --portal-info-gutter: 20px;
}

.charlo-neobrutal--portal .portal-header {
  /* Compactación vertical: menos aire arriba (moderado) y abajo (principal
     responsable de empujar las tarjetas fuera del primer viewport). */
  padding-top: clamp(28px, 4vw, 40px);
  padding-bottom: clamp(8px, 1.5vw, 14px);
  /* Alineado a la izquierda con el mismo ancho/centrado y el mismo padding
     lateral que .info-section (la tarjeta "Aprende desde tu propio idioma"
     vive dentro de ese contenedor, no del de las tarjetas de curso): mismo
     --portal-info-max, mismo --portal-info-gutter como padding-left, y el
     mismo margen de 20px que aplica .portal-container (de ahí el "- 40px")
     — así "CHARLO" queda exactamente sobre el borde izquierdo exterior de
     esa tarjeta inferior en cualquier ancho de pantalla. */
  padding-left: var(--portal-info-gutter);
  padding-right: var(--portal-info-gutter);
  width: min(calc(100% - 40px), var(--portal-info-max));
  margin-inline: auto;
  text-align: left;
}

.charlo-neobrutal--portal .portal-logo {
  letter-spacing: 0.24em;
  height: clamp(110px, 18vw, 180px);
  background-position: left center;
  margin-bottom: 12px;
}

.charlo-neobrutal--portal .portal-hero__content {
  max-width: 780px;
}

.charlo-neobrutal--portal .portal-subtitle {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 7px 12px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  /* Blanco y negro puro, mismo offset 3px 3px. */
  box-shadow: 3px 3px 0 var(--nb-ink);
  font-weight: 800;
  text-decoration: none;
}

.charlo-neobrutal--portal .portal-hero__title {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--nb-ink);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: clamp(2.15rem, 5.5vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.charlo-neobrutal--portal .portal-hero__lead {
  max-width: 660px;
  margin: 16px 0 0;
  color: var(--nb-text);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 600;
  line-height: 1.55;
}

.charlo-neobrutal--portal .portal-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.charlo-neobrutal--portal .portal-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--nb-ink) !important;
  background: var(--nb-paper) !important;
  border-color: var(--nb-ink) !important;
}

.charlo-neobrutal--portal .portal-hero__cta--primary {
  background: var(--nb-royal) !important;
}

.charlo-neobrutal--portal .portal-hero__cta:hover {
  color: var(--nb-paper) !important;
  background: var(--nb-ink) !important;
}

.charlo-neobrutal--portal #method-title,
.charlo-neobrutal--portal #play-mode-title,
.charlo-neobrutal--portal #learn-solo-title,
.charlo-neobrutal--portal #portal-courses-title {
  scroll-margin-top: 120px;
}

/* "Regístrate" del portal y de los índices de curso: negro/blanco puro,
   no el morado/verde/carmesí de --nb-theme (que sí sigue aplicando a otros
   elementos con acento de curso, como .hero-tag). */
.charlo-neobrutal--portal .nav-btn--signup,
.charlo-neobrutal--index .nav-btn--signup {
  background: var(--nb-ink) !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: var(--nb-shadow-small);
}

.charlo-neobrutal--portal .nav-btn--signup:active,
.charlo-neobrutal--index .nav-btn--signup:active {
  box-shadow: var(--nb-shadow-pressed);
}

/* Botones del portal — negro/blanco puro, scoped al portal (decisión C: se
   permite override de color por página sin tocar la regla global). Cambia
   únicamente valores de color; estructura, offsets, texto y contorno
   intactos. Índices/dashboard no se ven afectados. */
.charlo-neobrutal--portal #login-link {
  background: var(--nb-paper) !important;
}
.charlo-neobrutal--portal #signup-link {
  border-color: #fff !important;
  box-shadow: 3px 3px 0 var(--nb-ink) !important;
}

/* Métrica única del par de autenticación del portal. También la consume la
   página de información, que comparte la identidad --portal pero añade el
   preset de páginas estáticas para el layout del encabezado. */
.charlo-neobrutal--portal #login-link,
.charlo-neobrutal--portal #signup-link {
  font-family: var(--font-sans, "Inter", Arial, sans-serif);
  font-weight: 700;
  font-size: 13px;
  line-height: normal;
  padding: 8px 18px;
  letter-spacing: 0.3px;
}

/* Altura efectiva del nav canónico del portal (contenido + padding). La
   página de información usa el preset estático para su layout, pero conserva
   esta misma medida para que el borde y la sombra comiencen en el mismo píxel. */
.charlo-neobrutal--portal .nav-wrapper > nav {
  min-height: 72px;
}

.charlo-neobrutal--portal .portal-container {
  /* Margen antes del bloque "Aprende desde español": lo justo para separar
     del hero sin sumar más aire vacío del necesario. */
  padding-top: clamp(12px, 2vw, 20px);
}

.portal-course-section {
  /* Sin caja contenedora: cada idioma agrupa sus tarjetas bajo su propio
     encabezado, sin fondo/borde/sombra exterior que las envuelva a todas.
     La sección inferior "Así funciona The 9th Method" (.method-section,
     en portal.html) es la referencia de ancho: mismas --portal-info-max/
     --portal-info-gutter (1040px / 20px) para que .portal-course-grid y
     .method-framework compartan el mismo borde izquierdo y derecho. */
  width: min(100%, var(--portal-info-max, 1040px));
  padding: 0 var(--portal-info-gutter, 20px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 640px) {
  /* Mismo colapso de padding lateral que .method-section a este ancho
     (portal.html), para conservar el borde compartido en móvil. */
  .portal-course-section {
    padding-inline: 0;
  }
}

.portal-course-heading {
  max-width: 720px;
}

.portal-course-kicker {
  color: var(--nb-muted);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.portal-course-heading h2 {
  margin-top: 6px;
  color: var(--nb-ink);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  font-weight: 800;
  line-height: 1.05;
}

.charlo-neobrutal--portal .portal-course-heading__lead {
  max-width: 690px;
  margin: 12px 0 0;
  color: var(--nb-text);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.55;
}

/* ── Encabezado de idioma dentro de la sección de cursos (INGLÉS / FRANCÉS):
   título + línea negra, sin caja alrededor. ── */
.charlo-neobrutal--portal .portal-lang-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.charlo-neobrutal--portal .portal-lang-heading__title {
  margin: 0;
  color: var(--nb-ink);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.charlo-neobrutal--portal .portal-lang-heading__rule {
  flex: 1;
  height: 3px;
  background: var(--nb-ink);
}

/* ── Tarjetas de curso: icono + insignias + descripción + CTA. Cada tarjeta
   es su propia caja (borde negro, sombra mostaza); no hay envoltorio extra
   agrupándolas. ── */
.charlo-neobrutal--portal .portal-course-grid {
  display: grid;
  gap: 20px;
}

.charlo-neobrutal--portal .portal-course-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.charlo-neobrutal--portal .portal-course-grid--1 {
  grid-template-columns: 1fr;
}

.charlo-neobrutal--portal .portal-course-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card {
  height: 100%;
  min-width: 0;
  flex-direction: column;
}

.charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__media {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  padding: 0;
  border-bottom: var(--nb-border);
}

.charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__media img {
  width: 100%;
  max-width: none;
  height: auto;
}

.charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__body {
  gap: 10px;
  padding: 12px 16px 16px;
}

.charlo-neobrutal--portal .portal-course-grid--3 .portal-course-badge {
  white-space: normal;
}

.charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__footer {
  justify-content: stretch;
  padding-top: 8px;
}

.charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__footer .nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  text-align: center;
}

.charlo-neobrutal--portal .portal-course-card {
  display: flex;
  color: var(--nb-text);
  background: var(--nb-paper) !important;
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  /* Sombra oscura (legibilidad), mismo offset 3px 3px que --nb-shadow-gold-small. */
  box-shadow: 3px 3px 0 #151820;
  overflow: hidden;
}

/* Las ilustraciones (assets/images/course-cards/*.svg) son apaisadas y se
   muestran como banner superior a todo el ancho de la tarjeta, con un borde
   inferior que las separa del cuerpo. La tarjeta va en blanco para que el
   dibujo se lea con claridad. */
.charlo-neobrutal--portal .portal-course-card__media {
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.charlo-neobrutal--portal .portal-course-card__media img {
  display: block;
  width: 100%;
  max-width: 76px;
  height: auto;
}

.charlo-neobrutal--portal .portal-course-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
}

.charlo-neobrutal--portal .portal-course-card__title {
  margin: 0;
  color: var(--nb-ink);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
}

.charlo-neobrutal--portal .portal-course-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.charlo-neobrutal--portal .portal-course-badge {
  padding: 4px 6px;
  border: 2px solid;
  border-radius: 6px;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.charlo-neobrutal--portal .portal-course-badge--accent {
  color: var(--nb-ink);
  background: var(--nb-royal);
  border-color: var(--nb-ink);
}

.charlo-neobrutal--portal .portal-course-badge--gold {
  color: var(--nb-ink);
  background: var(--nb-gold-fill);
  border-color: var(--nb-ink);
}

.charlo-neobrutal--portal .portal-course-badge--muted {
  color: var(--nb-muted);
  background: var(--nb-paper);
  border-color: var(--nb-ink);
}

.charlo-neobrutal--portal .portal-course-card__desc {
  margin: 0;
  color: var(--nb-text);
  font-size: 0.85rem;
  line-height: 1.4;
}

.charlo-neobrutal--portal .portal-course-card__footer {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  justify-content: flex-end;
}

.charlo-neobrutal--portal .portal-course-card__icon-wrap {
  color: var(--nb-ink);
  background: var(--nb-canvas);
}

.charlo-neobrutal--portal .portal-course-card__footer .nav-btn {
  color: var(--nb-ink) !important;
  background: var(--nb-royal) !important;
}

.charlo-neobrutal--portal .portal-course-card__footer .nav-btn:hover {
  background-color: var(--nb-ink) !important;
  color: var(--nb-paper) !important;
  border-color: var(--nb-ink);
}

@media (max-width: 720px) {
  .charlo-neobrutal--portal .portal-course-grid--2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .charlo-neobrutal--portal .portal-course-grid--3 {
    grid-template-columns: 1fr;
  }

  .charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card {
    flex-direction: column;
  }

  .charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__media {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding: 0;
  }

  .charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__body {
    gap: 7px;
    padding: 12px 16px;
  }

  .charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__footer {
    justify-content: flex-end;
  }

  .charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__footer .nav-btn {
    width: auto;
  }
}

@media (max-width: 520px) {
  .charlo-neobrutal--portal .portal-course-card {
    flex-direction: column;
  }

  .charlo-neobrutal--portal .portal-course-card__media {
    flex: 0 0 auto;
    width: 100%;
    padding: 18px;
  }

  .charlo-neobrutal--portal .portal-course-card__media img {
    max-width: 64px;
  }

  .charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card {
    flex-direction: column;
  }

  .charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__media {
    flex: 0 0 auto;
    width: 100%;
    padding: 0;
  }

  .charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__footer {
    justify-content: stretch;
  }

  .charlo-neobrutal--portal .portal-course-grid--3 .portal-course-card__footer .nav-btn {
    width: 100%;
  }
}

/* Bloques informativos del portal: el Medidor, Play Mode y las guías comparten
   tipografía y espaciado, sin marco exterior. */
.charlo-neobrutal--portal .portal-progress {
  width: min(100%, var(--portal-info-max, 1040px));
  margin: 38px auto 0;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  color: var(--nb-text);
}

.charlo-neobrutal--portal .portal-progress.portal-progress--play {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  margin-top: 16px;
}

.charlo-neobrutal--portal .portal-feature__visual {
  min-height: 190px;
  display: grid;
  place-items: center;
}

.charlo-neobrutal--portal .portal-feature__visual svg {
  display: block;
  width: clamp(120px, 16vw, 170px);
  height: auto;
}

.charlo-neobrutal--portal .portal-progress__preview {
  padding: 14px;
  background: var(--nb-canvas);
  border: var(--nb-border);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-small);
}

.charlo-neobrutal--portal .portal-progress__preview-title {
  display: block;
  margin-bottom: 10px;
  color: var(--nb-ink);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.charlo-neobrutal--portal .portal-progress__preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.charlo-neobrutal--portal .portal-progress__preview-grid span {
  min-width: 0;
  min-height: 58px;
  padding: 9px;
  display: flex;
  align-items: flex-end;
  color: var(--nb-ink);
  background: var(--nb-theme-fill);
  border: var(--nb-border-small);
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.charlo-neobrutal--portal .portal-progress__preview-grid span:nth-child(2),
.charlo-neobrutal--portal .portal-progress__preview-grid span:nth-child(3) {
  background: var(--nb-gold-fill);
}

.charlo-neobrutal--portal .portal-progress__content {
  min-width: 0;
}

.charlo-neobrutal--portal .portal-progress__eyebrow {
  display: inline-flex;
  padding: 5px 8px;
  color: var(--nb-ink);
  background: var(--nb-gold-fill);
  border: var(--nb-border-small);
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.charlo-neobrutal--portal .portal-progress h2 {
  margin: 12px 0 0;
  color: var(--nb-ink);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.charlo-neobrutal--portal .portal-progress__content > p {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--nb-text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.55;
}

.charlo-neobrutal--portal .portal-progress__actions {
  margin-top: 16px;
}

.charlo-neobrutal--portal .portal-progress--skills .portal-progress__actions {
  display: flex;
  justify-content: flex-end;
}

.charlo-neobrutal--portal .portal-progress__actions > span {
  display: inline-flex;
}

.charlo-neobrutal--portal .portal-progress__actions > span[hidden] {
  display: none !important;
}

.charlo-neobrutal--portal .portal-progress__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 14px;
  text-align: center;
}

.charlo-neobrutal--portal .portal-progress--play .portal-progress__cta,
.charlo-neobrutal--portal .portal-progress--skills .portal-progress__cta {
  color: var(--nb-ink) !important;
  background: var(--nb-royal) !important;
}

.charlo-neobrutal--portal .portal-progress--play .portal-progress__cta:hover,
.charlo-neobrutal--portal .portal-progress--skills .portal-progress__cta:hover {
  color: var(--nb-paper) !important;
  background: var(--nb-ink) !important;
}

.charlo-neobrutal--portal #progress-signup-link {
  color: var(--nb-ink) !important;
  background: var(--nb-royal) !important;
  border-color: var(--nb-ink) !important;
}

.charlo-neobrutal--portal #progress-signup-link:hover {
  color: var(--nb-paper) !important;
  background: var(--nb-ink) !important;
}

@media (max-width: 720px) {
  .charlo-neobrutal--portal .portal-progress,
  .charlo-neobrutal--portal .portal-progress.portal-progress--play {
    grid-template-columns: 1fr;
  }

  .charlo-neobrutal--portal .portal-feature__visual {
    min-height: 150px;
  }
}

@media (max-width: 520px) {
  .charlo-neobrutal--portal .nav-wrapper > nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .charlo-neobrutal--portal .nav-right {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .charlo-neobrutal--portal .portal-hero__cta,
  .charlo-neobrutal--portal .portal-progress__actions,
  .charlo-neobrutal--portal .portal-progress__actions > span,
  .charlo-neobrutal--portal .portal-progress__cta {
    width: 100%;
  }

  .charlo-neobrutal--portal .portal-progress {
    padding: 16px;
  }
}

/* Modelo aprobado (huérfano): reglas de .path-card / .portal-paths que ya no
   se usan en el HTML de esta sección (reemplazadas por .portal-course-card).
   Se conservan sin tocar por si algún .path-card--* de idiomas extra vuelve
   a usarse; no afectan el render actual. */
.charlo-neobrutal--portal .portal-paths {
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: none;
}

/* Tarjetas bajas y horizontales (modelo aprobado): rectángulo delgado, borde
   negro grueso, sombra amarilla plana. El color por curso queda solo como
   acento (lomo lateral, insignia y botón), no como fondo ni sombra. */
.charlo-neobrutal--portal .path-card {
  position: relative;
  display: flex;
  color: var(--nb-text);
  background: var(--nb-paper) !important;
  border: var(--nb-border);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-gold-small);
  overflow: hidden;
  transition: transform 100ms steps(2), box-shadow 100ms steps(2);
}

.charlo-neobrutal--portal .path-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7px;
  height: auto;
  background: var(--card-color);
  border-right: var(--nb-border-small);
  opacity: 1;
}

.charlo-neobrutal--portal .path-card--french-es {
  --card-color: var(--nb-teal);
  --card-fill: var(--nb-teal-fill);
}

.charlo-neobrutal--portal .path-card--english-es {
  --card-color: var(--nb-crimson);
  --card-fill: var(--nb-crimson-fill);
}

.charlo-neobrutal--portal .path-card__badge {
  padding: 4px 7px;
  color: var(--card-color);
  background: var(--card-fill);
  border: 2px solid var(--card-color);
  border-radius: 6px;
  font-size: 0.68rem;
  white-space: nowrap;
}

/* Fila horizontal: texto (idiomas/título/descripción) a la izquierda,
   insignia + acción a la derecha, sin envoltorio nuevo en el HTML. */
.charlo-neobrutal--portal .path-card__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "lang   footer"
    "title  footer"
    "desc   footer";
  align-items: center;
  column-gap: 20px;
  row-gap: 2px;
  padding: 14px 20px 14px 24px;
  width: 100%;
}

.charlo-neobrutal--portal .path-card__languages {
  grid-area: lang;
  color: var(--card-color);
  font-weight: 800;
  font-size: 0.68rem;
  margin-bottom: 0;
}

.charlo-neobrutal--portal .path-card__title {
  grid-area: title;
  color: var(--nb-ink);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 800;
  margin-bottom: 0;
}

.charlo-neobrutal--portal .path-card__description {
  grid-area: desc;
  color: var(--nb-text);
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.35;
  margin-bottom: 0;
}

.charlo-neobrutal--portal .path-card__footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.charlo-neobrutal--portal .path-card__action {
  color: var(--nb-ink);
  font-weight: 800;
  font-size: 0.8rem;
  white-space: nowrap;
}

.charlo-neobrutal--portal .path-card__arrow {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  color: #ffffff;
  background: var(--card-color);
  border: 1px solid var(--nb-ink);
  border-radius: 7px;
}

.charlo-neobrutal--portal .path-card:hover .path-card__arrow {
  transform: none;
}

.charlo-neobrutal--portal .path-card:hover .path-card__footer {
  background: transparent;
  border-color: transparent;
}

.charlo-neobrutal--portal .info-section {
  margin-top: 54px;
}

.charlo-neobrutal--portal .info-title {
  color: var(--nb-ink);
  font-weight: 800;
}

.charlo-neobrutal--portal .info-box,
.charlo-neobrutal--portal .info-illustration {
  background: var(--nb-paper) !important;
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow);
}

.charlo-neobrutal--portal .info-box {
  color: var(--nb-text);
}

.charlo-neobrutal--portal .info-box h3 {
  color: var(--nb-ink);
  font-weight: 800;
}

.charlo-neobrutal--portal .info-box p {
  color: var(--nb-text);
}

.charlo-neobrutal .portal-footer {
  margin-top: 36px;
  padding: 30px 20px 28px;
  color: var(--nb-text);
  background: var(--nb-paper);
  border-top: var(--nb-border) !important;
  text-align: center;
}

.charlo-neobrutal :is(.footer-brand, .portal-footer__brand) {
  display: inline-block;
  color: var(--nb-ink);
  font-family: "Fredoka", "Outfit", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* Footer del portal: el wordmark de marca se muestra como TEXTO estilizado
   (fuente Fredoka, tinta oscura — el footer tiene fondo --nb-paper blanco).
   Ya no usa imagen. */

.charlo-neobrutal .portal-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  width: min(100%, 1040px);
  margin: 22px auto 20px;
}

.charlo-neobrutal .portal-footer__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--nb-ink);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 100ms steps(2), box-shadow 100ms steps(2), background-color 100ms linear;
}

.charlo-neobrutal .portal-footer__link:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.charlo-neobrutal .portal-footer__copy {
  margin: 0;
  color: var(--nb-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) {
  background: rgba(22, 24, 31, 0.82) !important;
  padding: 24px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.charlo-neobrutal--portal #about-modal {
  --nb-modal-accent: var(--nb-teal);
  --nb-modal-accent-fill: var(--nb-teal-fill);
  --nb-modal-on-accent: #ffffff;
}

.charlo-neobrutal--portal :where(#terms-modal, #privacy-modal) {
  --nb-modal-accent: var(--nb-crimson);
  --nb-modal-accent-fill: var(--nb-crimson-fill);
  --nb-modal-on-accent: #ffffff;
}

.charlo-neobrutal--portal #refund-modal {
  --nb-modal-accent: var(--nb-gold);
  --nb-modal-accent-fill: var(--nb-gold-fill);
  --nb-modal-on-accent: var(--nb-ink);
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div {
  width: min(100%, 800px) !important;
  max-width: 800px !important;
  max-height: calc(100dvh - 48px) !important;
  padding: clamp(28px, 4vw, 40px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  color: var(--nb-text) !important;
  background: var(--nb-paper) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow:
    inset 0 7px 0 var(--nb-modal-accent),
    5px 5px 0 var(--nb-modal-accent) !important;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif) !important;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > h2 {
  min-height: 44px;
  margin: 0 0 18px !important;
  padding: 0 60px 14px 0 !important;
  color: var(--nb-ink) !important;
  border-bottom: var(--nb-border-small);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif) !important;
  font-size: clamp(1.5rem, 3vw, 1.75rem) !important;
  font-weight: 900 !important;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > h2 + span {
  display: inline-flex !important;
  align-items: center;
  min-height: 32px;
  margin: 0 0 28px !important;
  padding: 5px 9px;
  color: var(--nb-muted) !important;
  background: var(--nb-modal-accent-fill);
  border: var(--nb-border-small);
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--nb-modal-accent);
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  line-height: 1.25 !important;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > h3 {
  margin: 26px 0 10px !important;
  color: var(--nb-ink) !important;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.charlo-neobrutal--portal :where(#terms-modal, #privacy-modal, #refund-modal) > div > h2 + span + h3 {
  margin-top: 0 !important;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div strong {
  color: var(--nb-ink) !important;
  font-weight: 800 !important;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div :where(p, li, span) {
  color: var(--nb-text) !important;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div p {
  margin: 0 0 14px !important;
  font-size: 0.95rem !important;
  font-weight: 500;
  line-height: 1.65 !important;
  overflow-wrap: anywhere;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div :where(ul, ol) {
  margin: 0 0 18px !important;
  padding-left: 1.35rem !important;
  color: var(--nb-text) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div li {
  margin: 0 0 8px !important;
  padding-left: 2px;
  line-height: 1.6 !important;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div :where(p, li):last-child {
  margin-bottom: 0 !important;
}

.charlo-neobrutal--portal #about-modal > div > div {
  margin-top: 0 !important;
  color: var(--nb-text) !important;
  line-height: 1.65 !important;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > button {
  position: absolute !important;
  top: 28px !important;
  right: 28px !important;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  color: var(--nb-ink) !important;
  background: var(--nb-paper) !important;
  border: var(--nb-border-small) !important;
  border-radius: var(--nb-radius-small);
  box-shadow: 3px 3px 0 var(--nb-ink);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif) !important;
  font-size: 1.75rem !important;
  font-weight: 800;
  line-height: 1 !important;
  cursor: pointer;
  transition: transform 100ms steps(2), box-shadow 100ms steps(2), background-color 100ms linear !important;
}

.charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > button:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

/* Índice francés: modal de idioma existente. */

.charlo-neobrutal--index .lang-modal-overlay {
  background: rgba(22, 24, 31, 0.82);
}

.charlo-neobrutal--index .charlo-lang-container {
  color: var(--nb-text);
  background: var(--nb-paper);
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow);
}

.charlo-neobrutal--index :where(.lang-title, .lang-name) {
  color: var(--nb-ink);
}

.charlo-neobrutal--index .lang-subtitle {
  color: var(--nb-muted);
}

.charlo-neobrutal--index .lang-card {
  width: 100%;
  padding: 12px 14px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-small);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.charlo-neobrutal--index .lang-card.active {
  background: var(--nb-theme-fill);
  border-color: var(--nb-ink);
}

.charlo-neobrutal--index .lang-status {
  color: var(--nb-theme);
}

.charlo-neobrutal--index .lang-close-btn {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  padding: 0;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-small);
}

/* Índices de curso: navegación de utilidades y niveles curriculares compartidos. */

.charlo-neobrutal--index {
  overflow-x: clip;
}

.charlo-neobrutal--index .course-index-nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.charlo-neobrutal--index .course-drawer-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

.charlo-neobrutal--index .course-utilities-overlay {
  position: fixed;
  z-index: 900;
  inset: 0;
  border: 0;
  background: rgba(22, 24, 31, 0.82);
  cursor: default;
}

.charlo-neobrutal--index :where(.course-utilities-overlay, .course-utilities-drawer)[hidden] {
  display: none !important;
}

.charlo-neobrutal--index .course-utilities-drawer {
  position: fixed;
  z-index: 901;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(332px, calc(100vw - 24px));
  padding: 22px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--nb-text);
  background: var(--nb-paper);
  border-right: var(--nb-border);
  box-shadow: 5px 0 0 var(--nb-ink);
}

.charlo-neobrutal--index .course-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: var(--nb-border-small);
}

/* Sobre el panel del drawer (fondo --nb-paper, blanco): tinta oscura sólida,
   sin el contorno/sombra pensados para leerse sobre azul --nb-royal — ahí
   blanco-sobre-blanco solo dejaba visible el contorno + la sombra coral. */
.charlo-neobrutal--index .course-drawer__title {
  color: var(--nb-ink);
  font-family: "Fredoka", "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.charlo-neobrutal--index .course-drawer__close {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-small);
  font: inherit;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.charlo-neobrutal--index .course-drawer__nav {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.charlo-neobrutal--index .course-drawer__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-small);
  font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 100ms steps(2), box-shadow 100ms steps(2), background-color 100ms linear;
}

.charlo-neobrutal--index .course-drawer__footer {
  margin-top: auto;
  padding-top: 20px;
}

.charlo-neobrutal--index .course-drawer__signout {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--nb-error);
  background: var(--nb-error-fill);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-small);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.charlo-neobrutal.course-drawer-open {
  overflow: hidden;
}

.charlo-neobrutal--index .course-curriculum {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.charlo-neobrutal--index .course-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-small);
  font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.charlo-neobrutal--index .course-level--current {
  /* Texto oscuro: blanco sobre #5195FC solo da 2.98:1 (falla WCAG AA). */
  color: var(--nb-ink);
  background: var(--nb-theme);
  box-shadow: var(--nb-shadow-theme-small);
}

.charlo-neobrutal--index .course-level--coming {
  flex-direction: column;
  min-width: 74px;
  color: var(--nb-muted);
  background: var(--nb-paper);
  font-size: 0.95rem;
  line-height: 1;
}

.charlo-neobrutal--index .course-level__status {
  color: var(--nb-muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.charlo-neobrutal--index .course-updates-link {
  position: relative;
  isolation: isolate;
  color: var(--nb-ink);
  text-decoration: none;
}

.charlo-neobrutal--index .course-updates-preview {
  position: absolute;
  z-index: 110;
  top: calc(100% + 14px);
  left: 0;
  display: grid;
  gap: 9px;
  width: min(360px, calc(100vw - 36px));
  padding: 16px;
  color: var(--nb-text);
  background: var(--nb-paper);
  border: var(--nb-border-small);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-theme);
  font-family: var(--font-body, "Noto Sans", system-ui, sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  visibility: hidden;
}

.charlo-neobrutal--index .course-updates-preview__items {
  display: grid;
  gap: 6px;
}

.charlo-neobrutal--index .course-updates-preview__cta {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--nb-ink);
  font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.charlo-neobrutal--index .course-updates-link:focus-visible .course-updates-preview {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

body.charlo-static-page.charlo-theme-fr {
  --nb-theme: var(--nb-teal);
  --nb-theme-fill: var(--nb-teal-fill);
  --nb-static-accent: var(--nb-teal);
  --nb-static-accent-fill: var(--nb-teal-fill);
}

body.charlo-static-page.charlo-theme-en {
  --nb-theme: var(--nb-crimson);
  --nb-theme-fill: var(--nb-crimson-fill);
  --nb-static-accent: var(--nb-crimson);
  --nb-static-accent-fill: var(--nb-crimson-fill);
}

@media (hover: hover) and (pointer: fine) {
  .charlo-neobrutal :where(
      .nav-btn,
      #hamburger-btn,
      .sidebar-nav a,
      .sidebar-nav button
    ):hover {
    color: var(--nb-paper);
    background-color: var(--nb-ink);
    border-color: var(--nb-paper);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--nb-ink);
  }

  .charlo-neobrutal :where(
      .lesson-card,
      .path-card,
      .lang-card
    ):hover {
    color: var(--nb-ink);
    background-color: var(--nb-theme-fill);
    border-color: var(--nb-ink);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--nb-ink);
  }

  .charlo-neobrutal .lesson-card:hover {
    background: var(--nb-canvas) !important;
  }

  .charlo-neobrutal .nav-btn--signup:hover {
    box-shadow: 2px 2px 0 var(--nb-ink);
  }

  .charlo-neobrutal .hero-stats .stat a[href="#lessons-heading"]:hover {
    background: var(--nb-paper) !important;
    color: var(--nb-ink) !important;
    border-color: var(--nb-ink) !important;
    box-shadow: 2px 2px 0 var(--nb-ink);
  }

  .charlo-neobrutal--portal .path-card:hover {
    /* Mostaza plana, igual que en reposo (más corta) — nunca el color del
       curso ni el --nb-theme-fill (morado) de la regla genérica de :hover. */
    background-color: var(--nb-paper) !important;
    box-shadow: 2px 2px 0 var(--nb-gold);
  }

  .charlo-neobrutal--portal .portal-plus-cta:hover {
    background: var(--nb-paper) !important;
    color: var(--nb-ink);
    border-color: var(--nb-ink) !important;
    box-shadow: 2px 2px 0 var(--nb-ink);
  }

  .charlo-neobrutal--portal .portal-plus-cta:hover span {
    color: var(--nb-ink);
  }

  /* Sin esto, la regla general de :hover de .nav-btn (más arriba en este mismo
     bloque) pinta el fondo con --nb-ink (negro) al pasar el mouse. */
  .charlo-neobrutal--portal .nav-btn--signup:hover,
  .charlo-neobrutal--index .nav-btn--signup:hover {
    background-color: var(--nb-paper) !important;
    color: var(--nb-ink) !important;
    border-color: var(--nb-ink) !important;
    box-shadow: 2px 2px 0 var(--nb-ink);
  }

  .charlo-static-page .nav-link:hover {
    color: var(--nb-paper);
    background: var(--nb-ink);
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--nb-ink);
  }

  .charlo-neobrutal .portal-footer__link:hover {
    color: var(--nb-paper);
    background: var(--nb-ink);
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--nb-ink);
  }

  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > button:hover {
    color: var(--nb-paper) !important;
    background: var(--nb-ink) !important;
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--nb-ink);
  }

  .charlo-neobrutal--index :where(.course-drawer__close, .course-drawer__link, .course-drawer__signout, .course-level--current):hover {
    color: var(--nb-paper);
    background: var(--nb-ink);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--nb-ink);
  }

  .charlo-neobrutal--index .course-level--current:hover {
    color: var(--nb-paper);
    background: var(--nb-ink);
    box-shadow: 2px 2px 0 var(--nb-ink);
  }

  .charlo-neobrutal--index .course-updates-link:hover .course-updates-preview {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

.charlo-neobrutal :where(.lesson-card, .path-card, .portal-plus-cta, .lang-card):active {
  transform: translate(4px, 4px);
  box-shadow: var(--nb-shadow-pressed);
}

.charlo-neobrutal--portal .path-card:active {
  box-shadow: var(--nb-shadow-gold-pressed);
}

.charlo-neobrutal--portal .portal-plus-cta:active {
  box-shadow: var(--nb-shadow-pressed);
}

@media (max-width: 900px) {
  .charlo-neobrutal--portal .portal-paths {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

@media (max-width: 860px) {
  .charlo-neobrutal .hero {
    padding-top: 56px;
  }

  .charlo-neobrutal .lessons-grid {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  }

}

@media (max-width: 640px) {
  .charlo-neobrutal .nav-wrapper > nav {
    gap: 10px;
  }

  .charlo-neobrutal--portal .logo-wrap {
    margin-left: 0;
  }

  .charlo-neobrutal--portal .nav-wrapper > nav {
    flex-wrap: wrap;
  }

  .charlo-neobrutal--portal .nav-wrapper > nav > .portal-plus-row,
  .charlo-neobrutal--portal .nav-right {
    width: 100%;
  }

  .charlo-neobrutal--portal .nav-right {
    justify-content: flex-end;
  }

  .charlo-neobrutal .nav-right {
    gap: 8px;
  }

  .charlo-neobrutal .hero {
    padding: 48px 18px 38px;
  }

  .charlo-neobrutal .hero-right {
    max-width: none;
  }

  .charlo-neobrutal .lessons-section {
    padding-inline: 16px;
  }

  .charlo-neobrutal .lessons-grid {
    grid-template-columns: 1fr;
  }

  .charlo-neobrutal .lesson-card {
    min-height: 0;
    padding: 28px 18px 18px;
  }

  .charlo-neobrutal .section-header {
    align-items: flex-start;
    gap: 10px;
  }

  .charlo-neobrutal--index .course-curriculum {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 240px);
  }

  .charlo-neobrutal--index .course-level,
  .charlo-neobrutal--index .course-level--coming {
    width: 100%;
  }

  .charlo-neobrutal--portal .portal-plus-cta {
    width: min(100%, 260px);
  }

  /* Compacta pero legible: la fila texto/acción se apila en una columna. */
  .charlo-neobrutal--portal .path-card__content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lang"
      "title"
      "desc"
      "footer";
    row-gap: 6px;
    padding: 14px 16px 14px 20px;
  }

  .charlo-neobrutal--portal .path-card__footer {
    justify-content: space-between;
  }

  .charlo-neobrutal--portal .info-section {
    padding-inline: 0;
  }

  /* .portal-header replica el mismo colapso de padding que .info-section en
     este ancho (arriba) — si no, "CHARLO" se desalinea de la tarjeta
     "Aprende desde tu propio idioma" en pantallas angostas. */
  .charlo-neobrutal--portal .portal-header {
    padding-inline: 0;
  }

  .charlo-neobrutal--portal .info-box {
    padding: 24px;
  }

  .charlo-static-page main {
    padding: 40px 16px 56px;
  }

  .charlo-static-page .page-header {
    margin-bottom: 26px;
    padding: 24px 20px;
  }

  .charlo-static-page .update-card {
    padding: 32px 20px 24px;
  }
}

@media (max-width: 640px), (hover: none), (pointer: coarse) {
  .charlo-neobrutal--index .course-updates-preview {
    display: none;
  }
}

@media (max-width: 460px) {
  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) {
    padding: 12px;
  }

  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div {
    max-height: calc(100dvh - 24px) !important;
    padding: 22px !important;
    border-radius: 10px !important;
    box-shadow:
      inset 0 7px 0 var(--nb-modal-accent),
      3px 3px 0 var(--nb-modal-accent) !important;
  }

  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > h2 {
    margin-bottom: 14px !important;
    padding-right: 56px !important;
    padding-bottom: 12px !important;
    font-size: clamp(1.35rem, 6vw, 1.55rem) !important;
  }

  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > h2 + span {
    margin-bottom: 22px !important;
  }

  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > h3 {
    margin-top: 22px !important;
    margin-bottom: 8px !important;
  }

  .charlo-neobrutal--portal :where(#terms-modal, #privacy-modal, #refund-modal) > div > h2 + span + h3 {
    margin-top: 0 !important;
  }

  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div :where(p, ul, ol) {
    font-size: 0.925rem !important;
  }

  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > button {
    top: 16px !important;
    right: 16px !important;
  }

  .charlo-neobrutal .nav-wrapper > nav {
    padding-inline: 12px;
  }

  .charlo-neobrutal .nav-btn {
    padding-inline: 11px;
    font-size: 12px;
  }

  .charlo-neobrutal--portal .portal-header {
    /* Coherente con el clamp() de la regla base para pantallas angostas. */
    padding-top: 28px;
    /* .portal-container (justo debajo) baja su padding-inline a 14px en
       este ancho — el "- 28px" (14px * 2) mantiene "CHARLO" alineado con
       .info-section, que hereda ese mismo padding de .portal-container. */
    width: min(calc(100% - 28px), var(--portal-info-max));
  }

  .charlo-neobrutal--portal .portal-container {
    padding-inline: 14px;
  }

  .charlo-neobrutal .portal-footer {
    padding-inline: 14px;
  }

  .charlo-neobrutal .portal-footer__links {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .charlo-neobrutal .portal-footer__link {
    width: 100%;
  }

  .charlo-neobrutal--portal .path-card__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .charlo-static-page .nav-wrapper > nav {
    padding-inline: 12px;
  }

  .charlo-static-page .logo {
    font-size: 0.95rem;
  }

  .charlo-static-page .nav-link {
    padding-inline: 10px;
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .charlo-neobrutal *,
  .charlo-neobrutal *::before,
  .charlo-neobrutal *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .charlo-neobrutal #charlo-transition {
    transition: none !important;
  }

  .charlo-neobrutal--portal .portal-plus-cta::after {
    animation: none !important;
  }

  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > button {
    transition: none !important;
  }

  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > button:hover,
  .charlo-neobrutal--portal :where(#about-modal, #terms-modal, #privacy-modal, #refund-modal) > div > button:active {
    transform: none !important;
  }
}

/* Controles de autenticación: mismo sistema claro/oscuro en ambos estados.
   Se limitan a los cuatro IDs para no alterar otros .nav-btn del portal. */
.charlo-neobrutal #login-link,
.charlo-neobrutal #profile-link,
.charlo-neobrutal #signout-btn {
  background: var(--nb-paper) !important;
  color: var(--nb-ink) !important;
  text-shadow: none !important;
  border-color: var(--nb-ink) !important;
}

/* Registrarse conserva el coral de marca, con la misma tinta y borde. */
.charlo-neobrutal #signup-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FF716F !important;
  color: var(--nb-ink) !important;
  text-shadow: none !important;
  border-color: var(--nb-ink) !important;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
}

/* El estado de auth comienza pendiente: ninguno de los dos controles se
   presenta hasta que Supabase confirma si hay sesión. Evita el destello de
   Ingresar/Registrarse antes de mostrar el menú de usuario. */
.charlo-neobrutal :is(.nav-auth-guest, .nav-auth-user)[hidden] {
  display: none !important;
}

.charlo-neobrutal .auth-provider-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

@media (hover: hover) and (pointer: fine) {
  .charlo-neobrutal #login-link:hover,
  .charlo-neobrutal #profile-link:hover,
  .charlo-neobrutal #signout-btn:hover {
    background: var(--nb-ink) !important;
    color: var(--nb-paper) !important;
    border-color: var(--nb-ink) !important;
  }

  .charlo-neobrutal #signup-link:hover {
    background: #FF716F !important;
    color: var(--nb-ink) !important;
    border-color: var(--nb-ink) !important;
  }
}

.charlo-neobrutal #login-link:active,
.charlo-neobrutal #profile-link:active,
.charlo-neobrutal #signout-btn:active,
.charlo-neobrutal #signup-link:active {
  box-shadow: var(--nb-shadow-pressed) !important;
}

.charlo-neobrutal #signup-link:active {
  background: #FF716F !important;
  color: var(--nb-ink) !important;
  border-color: var(--nb-ink) !important;
}

.charlo-neobrutal #signout-btn:disabled {
  background: var(--nb-paper) !important;
  color: var(--nb-ink) !important;
  border-color: var(--nb-ink) !important;
}

/* Menú de cuenta del topbar: una sola presentación para portal, índices y perfil. */
.charlo-neobrutal .account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.charlo-neobrutal .account-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 5px;
  cursor: pointer;
  background: transparent;
  border: 3px solid var(--nb-paper);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-small);
}

.charlo-neobrutal .account-menu__toggle:hover,
.charlo-neobrutal .account-menu__toggle[aria-expanded="true"] {
  background: var(--nb-ink);
}

.charlo-neobrutal .account-menu__toggle:focus-visible {
  outline: 3px solid var(--nb-paper);
  outline-offset: 3px;
}

.charlo-neobrutal .account-menu__item:focus-visible {
  outline: 3px solid var(--nb-royal);
  outline-offset: -3px;
}

.charlo-neobrutal .account-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 190px;
  padding: 8px;
  background: var(--nb-paper);
  border: var(--nb-border);
  border-radius: var(--nb-radius-small);
  box-shadow: var(--nb-shadow-small);
}

.charlo-neobrutal .account-menu__panel[hidden] {
  display: none !important;
}

.charlo-neobrutal .account-menu :is(#profile-link, #signout-btn) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px 12px;
  background: var(--nb-paper) !important;
  color: var(--nb-ink) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  text-shadow: none !important;
  cursor: pointer;
}

.charlo-neobrutal .account-menu :is(#profile-link, #signout-btn):hover,
.charlo-neobrutal .account-menu :is(#profile-link, #signout-btn):focus-visible {
  background: var(--nb-ink) !important;
  color: var(--nb-paper) !important;
}

.charlo-neobrutal .account-menu #signout-btn:disabled {
  cursor: wait;
  opacity: .65;
}