/* P2-WEB-04: navbar y pie del sitio de plataforma (diseño aprobado en P2-WEB-01, opción 2).
   Va después de src/styles.css y usa sus tokens; el simulador no la carga. */
:root { --vt-band: #173447; --vt-band-2: #1F4258; --vt-glow: rgba(70, 160, 200, 0.28); --arc-line: #FF9900; --arc-glow: rgba(255, 153, 0, 0.55); --arc-soft: rgba(255, 110, 0, 0.22); --vt-line: rgba(255, 255, 255, 0.12); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --vt-band: #E3ECF2; --vt-band-2: #D2E0EA; --vt-glow: rgba(40, 110, 150, 0.16); --arc-line: #E08700; --arc-glow: rgba(255, 153, 0, 0.42); --arc-soft: rgba(255, 170, 60, 0.22); --vt-line: rgba(0, 0, 0, 0.12); } }
:root[data-theme="light"] { --vt-band: #E3ECF2; --vt-band-2: #D2E0EA; --vt-glow: rgba(40, 110, 150, 0.16); --arc-line: #E08700; --arc-glow: rgba(255, 153, 0, 0.42); --arc-soft: rgba(255, 170, 60, 0.22); --vt-line: rgba(0, 0, 0, 0.12); }

body.site { display: flex; flex-direction: column; align-items: stretch; min-height: 100vh; padding: 0; background: var(--dark-bg); color: var(--text); font-size: 1rem; line-height: 1.5; -webkit-text-size-adjust: 100%; }

/* P2-WEB-15, opcion 2 de v1: el azul petroleo es el fondo de la pagina, no de cada banda (y de la pantalla del telefono del home, P2-WEB-11). Empieza detras del navbar
   y se apaga con una curva ease in-out en una distancia fija (40rem), sea cual sea el alto de la banda: no queda
   borde. Navbar, menu movil, .band y .sim-band son transparentes. Sin color-mix() (navegador viejo) la
   declaracion se ignora y queda el fondo liso de arriba. */
body.site, .home .phone .ph-screen {
  background-image:
    radial-gradient(40rem 24rem at 58% 11rem, var(--vt-glow), color-mix(in srgb, var(--vt-glow) 45%, transparent) 40%, transparent 100%),
    linear-gradient(180deg,
      var(--vt-band) 0,
      var(--vt-band) 4.5rem,
      color-mix(in oklab, var(--vt-band) 73.8%, var(--dark-bg)) 11.25rem,
      color-mix(in oklab, var(--vt-band) 54.1%, var(--dark-bg)) 16.57rem,
      color-mix(in oklab, var(--vt-band) 38.2%, var(--dark-bg)) 21.18rem,
      color-mix(in oklab, var(--vt-band) 27.8%, var(--dark-bg)) 24.56rem,
      color-mix(in oklab, var(--vt-band) 19.4%, var(--dark-bg)) 27.57rem,
      color-mix(in oklab, var(--vt-band) 12.6%, var(--dark-bg)) 30.41rem,
      color-mix(in oklab, var(--vt-band) 7.5%, var(--dark-bg)) 32.97rem,
      color-mix(in oklab, var(--vt-band) 4.2%, var(--dark-bg)) 35.07rem,
      color-mix(in oklab, var(--vt-band) 2.1%, var(--dark-bg)) 36.8rem,
      color-mix(in oklab, var(--vt-band) 0.8%, var(--dark-bg)) 38.3rem,
      color-mix(in oklab, var(--vt-band) 0.2%, var(--dark-bg)) 39.36rem,
      var(--dark-bg) 40rem);
  background-repeat: no-repeat;
  background-size: 100% 42rem;
}
.site .band, .site .sim-band { background: none; }
/* El simulador (body.sim) conserva el color de sus enlaces: .btn-primary, .donate-card, etc. */
:where(.site):not(.sim) a { color: inherit; }
.site main { flex: 1; width: 100%; }
.site main:focus { outline: none; }
.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }

.skip { position: absolute; left: -100vw; top: 0.5rem; z-index: 200; background: var(--card-bg); color: var(--text); padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 700; }
.skip:focus-visible { left: 0.5rem; }

.site .brand { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; text-decoration: none; color: var(--text); font-weight: 800; }
.site .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin: 0; border: 1.5px solid var(--orange); border-radius: 50%; color: var(--orange); flex-shrink: 0; }
.brand-name { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; }

.nav { background: transparent; position: relative; z-index: 10; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.nav-end { display: flex; align-items: center; gap: 0.75rem; justify-self: end; }
.nav-links { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
.nav-links a { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; text-decoration: none; color: var(--text-soft); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.375rem; height: 2px; background: var(--orange); }

.nav-prefs { display: flex; align-items: center; gap: 0.5rem; }
.nav-prefs .header-prefs-sep { display: none; }
.nav-prefs .theme-toggle { border: 1px solid var(--border); border-radius: 99px; padding: 0.125rem; }
.site .theme-btn { color: var(--text-muted); border-radius: 99px; }
.site .theme-btn:hover { color: var(--text); }
.site .theme-btn[aria-pressed="true"] { color: var(--text); background: var(--hover-bg); }

.menu-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; background: none; border: 1px solid transparent; border-radius: 0.5rem; color: var(--text); font: inherit; cursor: pointer; }
.menu-sheet { background: transparent; padding: 0.5rem 0 1.25rem; }
.menu-sheet[hidden] { display: none; }
.menu-sheet .nav-links { flex-direction: column; gap: 0; }
.menu-sheet .nav-links a { width: 100%; min-height: 3.25rem; font-size: 1.125rem; letter-spacing: 0.06em; }
.menu-sheet .nav-links a[aria-current="page"]::after { bottom: 0.625rem; right: auto; width: 2rem; }
.menu-sheet .nav-prefs { margin-top: 0.75rem; }
.menu-sheet .theme-btn { min-width: 2.75rem; min-height: 2.75rem; }

/* Barra: enlaces y preferencias en el navbar; el botón y el menú, solo en pantallas angostas. */
.nav .nav-main, .nav-end > .nav-prefs { display: none; }
@media (min-width: 64rem) {
  .nav .nav-main, .nav-end > .nav-prefs { display: flex; }
  .nav-row { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav-end > .menu-btn { display: none; }
  .menu-sheet { display: none; }
}

.site-footer { margin-top: 0; }
/* P2-WEB-12, opción 2 "Degradado de vuelta": el fondo baja hacia el azul del navbar, espejo de .home .band. */
.site-footer {
  background:
    radial-gradient(40rem 20rem at 50% 100%, var(--vt-glow), transparent 70%),
    linear-gradient(180deg, var(--dark-bg) 0%, var(--vt-band) 60%, var(--vt-band) 100%);
  border-top: 0; padding: 4.5rem 1rem 2.25rem; gap: 0.75rem;
}
.site-footer .fa-btn:hover, .site-footer .site-footer-actions .donate-link:hover { background: var(--vt-band-2); }
@media (min-width: 900px) { .site-footer { padding: 6rem 1.5rem 2.75rem; } }
@media (prefers-reduced-motion: reduce) { .site * { scroll-behavior: auto; } }

/* Home (P2-WEB-05, opción 2 "Esfera" de P2-WEB-01). */
.home .pill-tag { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.75rem; border-radius: 99px; background: var(--vt-band-2); color: var(--text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.home .code { margin-top: 1.5rem; color: var(--text-soft); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.home h1 { margin-top: 0.5rem; font-size: clamp(2.125rem, 1rem + 3vw, 2.75rem); font-weight: 400; line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase; color: var(--text); }
.home .lead { margin-top: 1.25rem; max-width: 34ch; color: var(--text-soft); font-size: 1.125rem; line-height: 1.5; }
.home .pill-cta { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.375rem; border-radius: 99px; background: var(--orange); color: var(--on-orange); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.home .pill-ghost { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 99px; border: 1px solid var(--text-muted); color: var(--text); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.home .cta-row { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.home .side { align-self: start; display: flex; gap: 0.875rem; align-items: center; padding: 0.875rem; border-radius: 1.25rem; background: var(--vt-band-2); text-decoration: none; min-height: 2.75rem; }
.home .side:hover { outline: 1px solid var(--orange); }
.home .side b { display: block; font-size: 1rem; }
.home .side span span { color: var(--text-soft); font-size: 0.8125rem; }
.home .sec { padding-block: 3rem; }
.home .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.home h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.home .link { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--orange); }
.home .tiles { list-style: none; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .home .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .home .tiles { grid-template-columns: repeat(3, 1fr); } }
.home .tile { display: flex; flex-direction: column; height: 100%; border-radius: 1.25rem; overflow: hidden; background: var(--card-bg); text-decoration: none; }
.home .tile:hover .tile-media { filter: brightness(1.15); }
.home .tile-media { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.25rem; min-height: 7rem; background: radial-gradient(18rem 9rem at 85% 0%, var(--vt-glow), transparent 70%), var(--vt-band); }
.home .tile-code { font-size: 1.75rem; font-weight: 400; letter-spacing: 0.04em; color: var(--text); }
.home .side .level-icon, .home .tile-media .level-icon { width: 3rem; height: 3rem; }
.home .tile-body { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1.25rem 1.25rem; flex: 1; }
.home .tile-top { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.home .tile-prov { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.home .tile-badge { border: 1px solid var(--border); color: var(--text-soft); border-radius: 99px; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 700; }
.home .tile-name { font-size: 1.125rem; font-weight: 700; color: var(--text); }
.home .tile-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--text-soft); font-size: 0.875rem; }
.home .tile-meta span { display: inline-flex; gap: 0.375rem; align-items: center; }
.home .tile-meta svg { color: var(--orange); }
.home .tile-bank { margin-top: auto; padding-top: 0.5rem; color: var(--text-muted); font-size: 0.8125rem; }
.home .ment { display: grid; gap: 1.25rem; align-items: center; padding: 1.75rem; border-radius: 1.25rem; background: var(--vt-band); }
.home .ment p { color: var(--text-soft); max-width: 52ch; margin-top: 0.5rem; }
@media (min-width: 48rem) { .home .ment { grid-template-columns: 1fr auto; padding: 2.25rem 2.5rem; } }
.home .home-hero { display: grid; gap: 2.5rem; padding-block: 2.5rem 3.5rem; }
.home .orb { position: relative; width: min(24rem, 86vw); aspect-ratio: 1; margin: 2.5rem auto; }
.home .ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--arc-line);
  box-shadow: 0 0 3.5rem -0.5rem var(--arc-glow), inset 0 0 4rem -1rem var(--arc-glow);
  background: radial-gradient(closest-side, var(--arc-soft), transparent 80%); pointer-events: none; }
.home .phone { position: absolute; left: 50%; top: -10%; width: 54%; height: 120%; transform: translateX(-50%); overflow: hidden;
  border-radius: 1.75rem; border: 1px solid var(--vt-line); background: var(--dark-bg);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); }
.home .phone .level-info { min-width: 0; }
/* P2-WEB-11, opcion 2 de v1: la banda azul con la ruta dentro del telefono, a tamanos fijos de telefono (390 px). */
.home .phone .ph-screen { min-height: 100%; background-color: var(--dark-bg); }
.home .phone .wrap { padding-inline: 1rem; }
.home .phone .ph-link { color: var(--text-soft); text-decoration: underline; text-underline-offset: 0.2em; }
.home .phone .ph-h1 { margin-top: 0.25rem; font-size: 1.875rem; font-weight: 400; line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; color: var(--text); text-wrap: balance; }
.home .phone .ph-content { padding: 0 1rem; }
.home .phone .divider { font-size: 1.25rem; }
.home .phone .level-card .level-beta, .home .phone .level-card .level-info + .level-badge { margin-left: 3.25rem; }
.home .phone .level-card .level-beta + .level-badge { margin-left: -0.25rem; }
.home .phone .level-badge { text-transform: uppercase; }

/* Mas grande (0.58 en vez de 0.48): la ruta y el titulo se leen sin acercarse; sin navbar ni texto de bienvenida. */
.home .phone > div { zoom: 0.58; }
.home .phone .sim-band .wrap { padding-top: 1.5rem; padding-bottom: 1.25rem; }
.home .phone .crumbs ol { font-size: 0.875rem; }
.home .aside { display: grid; gap: 1.5rem; align-content: end; }
.home .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.home .nums div { display: flex; flex-direction: column-reverse; gap: 0.25rem; }
.home .nums dd { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); font-weight: 400; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.home .nums dt { color: var(--text-soft); font-size: 0.875rem; line-height: 1.35; }
@media (min-width: 64rem) {
  .home .home-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 3fr); align-items: center; column-gap: 2rem; padding-block: 3.5rem 4.5rem; }
  .home .orb { width: min(26rem, 100%); margin: 2.5rem auto; }
  .home .nums { grid-template-columns: 1fr; gap: 1.75rem; }
  .home .aside { align-self: stretch; align-content: space-between; padding-block: 1rem; }
  .home .side { flex-direction: column; align-items: flex-start; }
}

/* Acerca de este proyecto (P2-WEB-08, opción 2 "Esfera" de P2-WEB-01). */
.about .page-head, .cert .page-head, .mentoring-page .page-head { padding-block: 2rem 3rem; }
.about .crumbs, .cert .crumbs, .mentoring-page .crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--text-soft); font-size: 0.8125rem; }
.about .crumbs a, .cert .crumbs a, .mentoring-page .crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; text-decoration: underline; text-underline-offset: 0.2em; }
.about .crumbs li, .cert .crumbs li, .mentoring-page .crumbs li { display: flex; align-items: center; }
.about .crumbs li + li::before, .cert .crumbs li + li::before, .mentoring-page .crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.about h1, .mentoring-page h1 { margin-top: 0.5rem; font-size: clamp(2.125rem, 1rem + 3vw, 3rem); font-weight: 400; line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase; color: var(--text); }
.about .lead, .mentoring-page .lead { margin-top: 1.25rem; max-width: 34ch; color: var(--text-soft); font-size: 1.125rem; line-height: 1.5; }
.about .sec, .mentoring-page .sec { padding-block: 3rem; }
.about h2, .mentoring-page h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.about .two, .mentoring-page .two { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .about .two, .mentoring-page .two { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.about .prose h2, .mentoring-page .prose h2 { margin-bottom: 1rem; }
.about .prose p, .mentoring-page .prose p { color: var(--text-soft); max-width: 60ch; font-size: 1.0625rem; }
.about .prose p + p, .mentoring-page .prose p + p { margin-top: 0.75rem; }
.about .prose p a { padding-block: 0.8125rem; color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--orange); }
/* Mentorías (P2-WEB-07): solo lo propio de la página; lo común va con .about arriba. */
.mentoring-page .h1-pre { display: block; margin-bottom: 0.5rem; color: var(--text-soft); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; }
.mentoring-page .price { display: inline-flex; align-items: baseline; gap: 0.5rem; margin-top: 1.25rem; }
.mentoring-page .price b { font-size: 2.5rem; font-weight: 400; }
.mentoring-page .price span { color: var(--text-soft); }
.mentoring-page .prose h2.gap-top { margin-top: 2rem; }
.mentoring-page .prose p a { padding-block: 0.8125rem; text-decoration: underline; text-underline-offset: 0.2em; }
.mentoring-page .checks { list-style: none; display: grid; gap: 0.625rem; margin-top: 0.75rem; }
.mentoring-page .checks li { display: flex; gap: 0.625rem; color: var(--text-soft); }
.mentoring-page .checks li::before { content: ""; flex-shrink: 0; width: 0.5rem; height: 0.5rem; margin-top: 0.55rem; border-radius: 50%; background: var(--orange); }
.mentoring-page .ment-card { align-self: start; background: var(--card-bg); border-radius: 1.25rem; padding: 1.5rem; }
.mentoring-page .ment-card h2 { margin-bottom: 1rem; }
.mentoring-page .ment-form { display: grid; gap: 0.25rem; max-width: 36rem; }
.mentoring-page .ment-form .report-comment { min-height: 2.75rem; margin-bottom: 0.75rem; }
.mentoring-page .paths { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.mentoring-page .path { border-radius: 1rem; }
.mentoring-page .path .btn-primary, .mentoring-page .path .btn-secondary { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; border-radius: 99px; text-decoration: none; font-family: inherit; }
.mentoring-page .refund { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.75rem; }
.about #h-faq { margin-bottom: 1.5rem; }
.about .faq, .cert .faq { display: grid; gap: 0.5rem; max-width: 52rem; }
.about .faq details, .cert .faq details { background: var(--card-bg); border-radius: 1rem; padding: 0.25rem 1.25rem; }
.about .faq details[open], .cert .faq details[open] { padding-bottom: 1rem; }
.about .faq summary, .cert summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.75rem; cursor: pointer; font-weight: 700; }
.about .faq summary::-webkit-details-marker, .cert summary::-webkit-details-marker { display: none; }
.about .faq p, .cert .faq p { color: var(--text-soft); line-height: 1.6; max-width: 65ch; }
.about .chev, .cert .chev { flex-shrink: 0; color: var(--orange); transition: transform 0.2s; }
.about details[open] > summary .chev, .cert details[open] > summary .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .about .chev, .cert .chev { transition: none; } }
/* Páginas de certificación (P2-WEB-06, opción 2 de P2-WEB-01): listado y página de cada examen. */
.cert h1 { font-size: clamp(2.125rem, 1rem + 3vw, 3rem); }
.cert .h1-pre { display: block; margin-bottom: 0.5rem; color: var(--text-soft); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: none; }
.cert .ph-grid { display: grid; gap: 2rem; }
.cert .ph-grid .pill-tag + h1 { margin-top: 1rem; }
@media (min-width: 64rem) { .cert .ph-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; } }
.cert .facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.cert .facts div { display: flex; gap: 0.375rem; align-items: baseline; padding: 0.375rem 0.875rem; border-radius: 99px; background: var(--vt-band-2); font-size: 0.875rem; }
.cert .facts dt { color: var(--text-soft); }
.cert .facts dd { color: var(--text); font-weight: 800; order: -1; }
.cert .panel { padding: 1.5rem; border-radius: 1.25rem; background: var(--vt-band-2); }
.cert .panel h2 { font-size: 1.125rem; margin-bottom: 1rem; }
.cert .dom-bars { list-style: none; display: grid; gap: 0.875rem; }
.cert .dom-bars li { display: grid; grid-template-columns: 1fr auto; gap: 0.375rem 1rem; }
.cert .dom-bars .dn { color: var(--text-soft); }
.cert .dom-bars b { font-variant-numeric: tabular-nums; }
/* Barra de peso con <progress>: el ancho sale de value/max, sin estilos en línea (style-src 'self'). */
.cert .bar { grid-column: 1 / -1; appearance: none; width: 100%; height: 0.5rem; border: 0; border-radius: 99px; background: transparent; overflow: hidden; }
.cert .bar::-webkit-progress-bar { background: transparent; }
.cert .bar::-webkit-progress-value { background: var(--orange); border-radius: 99px; }
.cert .bar::-moz-progress-bar { background: var(--orange); border-radius: 99px; }
.cert .group-title { margin: 2rem 0 1.25rem; }
.cert .group-title:first-child { margin-top: 0; }
.cert .tiles + .group-title { margin-top: 3rem; }
.cert .sec-title { margin-bottom: 1.5rem; }
.cert .samples { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) { .cert .samples { grid-template-columns: 1fr 1fr; } }
.cert .sample-app .question-text { font-size: 1rem; font-weight: 600; margin: 0; text-transform: none; letter-spacing: 0; }
.cert .sample-app .options { list-style: none; margin-top: 0.5rem; }
.cert .sample-app .option.correct { background: var(--card-bg); border-left-color: var(--orange); box-shadow: none; }
.cert .sample-app .option.correct .option-letter { color: var(--text-muted); }
.cert .sample-ans { margin-top: 0.25rem; }
.cert .sample-ans p { padding: 0.75rem 1rem; border-left: 0.3125rem solid var(--green); background: var(--expl-bg); border-radius: 0.75rem; font-size: 0.9375rem; color: var(--text-soft); line-height: 1.6; }

/* Simulador (P2-WEB-10, opción 2 "Banda del sitio con ruta"): navbar y pie del sitio, banda azul con la ruta
   donde estaba el encabezado naranja, y el simulador alineado con los bordes del navbar (76rem). */
body.sim { justify-content: flex-start; }
body.sim > .app { flex: 1 0 auto; width: 100%; max-width: none; min-height: 0; background: none; border-radius: 0; box-shadow: none; }
body.sim #screenQuiz { min-width: 0; }
.sim-band .wrap { padding-block: 0.25rem 1.75rem; }
.sim-band[data-level] .wrap { padding-bottom: 1rem; }
.sim-band:not([data-level]) .sim-level, .sim-band[data-level] .sim-home { display: none; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin: 0; padding: 0; font-size: 0.8125rem; color: var(--text-soft); }
.crumbs li { display: inline-flex; align-items: center; min-height: 2.75rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--text-soft); }
.crumbs a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-soft); text-decoration: underline; text-underline-offset: 0.2em; }
.crumbs a:hover { color: var(--text); }
/* Área táctil de 44 px a lo ancho sin mover el texto ("Inicio" mide 30 px). */
.crumbs a::after { content: ""; position: absolute; inset: 0 -0.4375rem; }
.sim-band h1 { margin-top: 0.25rem; font-size: clamp(1.875rem, 1rem + 2.6vw, 2.75rem); font-weight: 400; line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; color: var(--text); text-wrap: balance; }
.sim-band[data-level] h1 { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); }
/* h1 con tabindex="-1": recibe el foco al volver a la lista de niveles, no es un control. */
.sim-band h1:focus { outline: none; }
.sim-lead { margin-top: 0.75rem; max-width: 60ch; color: var(--text-soft); font-size: 1rem; line-height: 1.5; }
.sim-lead strong { color: var(--text); }
.sim-chip { display: inline-flex; align-items: center; min-height: 1.75rem; margin-top: 0.75rem; padding: 0 0.75rem; border-radius: 99px; background: var(--vt-band-2); color: var(--text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.sim-chip:empty { display: none; }
body.sim .content { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
body.sim .total-timer-bar, body.sim .footer { padding-inline: max(clamp(1rem, 3vw, 2rem), calc((100% - 76rem) / 2 + clamp(1rem, 3vw, 2rem))); }
@media (min-width: 1100px) { body.sim .content { padding-block: 0.5rem 2rem; } }
/* Idioma fijo durante el examen en el navbar (mismo patrón que tenía el encabezado). */
.nav .theme-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.nav .theme-btn[aria-pressed="true"]:disabled { opacity: 1; background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; }
.lock-note { margin-top: 0.5rem; color: var(--text-soft); font-size: 0.8125rem; }
.lock-note[hidden] { display: none; }
/* Pie del simulador: Recursos, Sugerencias y donación caben en una fila (mockup aprobado). */
body.sim .site-footer-actions { max-width: 36rem; }