/*
 * Course landing, page level. CUBE order: scoped globals, compositions,
 * utilities, blocks (band, hero, syllabus, teacher, gallery, note, button,
 * motifs), exceptions (band colours, motion). Tokens come from tokens.css;
 * nothing here is a colour literal. No !important and no @layer: Kadence is
 * unlayered, and this file loads after kadence-content, so scoped selectors
 * at (0,2,0) win.
 *
 * Direction: a dojo with more punch. Sumi-ink bands, washi paper, white, and one
 * seal-red band; big Abhaya Libre type with the key words in red; outline words
 * as the one decorative accent; motion only for visitors who did not ask for less.
 */

/* Globals, scoped so nothing leaks into the theme */
.dojo-landing {
  color: var(--dojo-c-text);
  font-family: var(--dojo-font-text);
  font-size: var(--dojo-step-0);
  line-height: 1.7;
  background: var(--dojo-paper);
  --dojo-band-space: calc(var(--dojo-space-xl) + var(--dojo-space-l));
}

.dojo-landing *,
.dojo-landing *::before,
.dojo-landing *::after {
  box-sizing: border-box;
}

.dojo-landing :is(p, ul, ol, h1, h2, h3, figure, blockquote),
.dojo-landing .wp-block-group {
  margin-block: 0;
}

.dojo-landing :is(p, ul, ol, h1, h2, h3, figure, blockquote) {
  margin-inline: 0;
}

.dojo-landing :is(h1, h2, h3) {
  color: var(--dojo-c-strong);
  font-family: var(--dojo-font-display);
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

.dojo-landing h1 {
  font-size: var(--dojo-step-7);
  letter-spacing: -0.015em;
  line-height: 0.9;
}

.dojo-landing h2 {
  font-size: var(--dojo-step-5);
  letter-spacing: -0.01em;
}

.dojo-landing h3 {
  font-size: var(--dojo-step-2);
  font-weight: 700;
  line-height: 1.15;
}

/* The key words of the headline: the seal red, large enough for AA at 3:1 on ink. */
.dojo-landing .dojo-key {
  color: var(--dojo-seal);
}

.dojo-landing .dojo-reviews .dojo-reviews__title {
  font-size: var(--dojo-step-5);
  font-weight: 800;
  line-height: 1.05;
}

/* A short red dash above each section title, the mark of the logo's seal. */
.dojo-landing :is(.dojo-rail > h2, .dojo-rail__head > h2, .dojo-inner > h2, .dojo-flow > h2)::before,
.dojo-landing .dojo-reviews__title::before {
  content: "";
  display: block;
  inline-size: var(--dojo-space-l);
  block-size: 0.25rem;
  margin-block-end: var(--dojo-space-xs);
  background: var(--dojo-c-dash);
}

.dojo-landing :is(p, li) {
  max-inline-size: var(--dojo-measure);
}

/* Tiny letter-spaced caps above a title or a callout. */
.dojo-landing .dojo-eyebrow {
  color: var(--dojo-c-accent);
  font-size: var(--dojo-step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Lists: a red dash instead of a dot. */
.dojo-landing :is(ul, ol) {
  padding-inline-start: 0;
  list-style: none;
}

.dojo-landing ul:not(.dojo-reviews__track, .dojo-reviews__summary, .dojo-carousel__track, .dojo-header__list, .dojo-checks) > li {
  position: relative;
  padding-inline-start: 1.5em;
}

.dojo-landing ul:not(.dojo-reviews__track, .dojo-reviews__summary, .dojo-carousel__track, .dojo-header__list, .dojo-checks) > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.85em;
  inset-inline-start: 0;
  inline-size: 0.9em;
  block-size: 0.125rem;
  background: var(--dojo-c-dash);
}

.dojo-landing ul:not(.dojo-carousel__track, .dojo-reviews__summary, .dojo-reviews__track, .dojo-header__list, .dojo-checks) > li + li {
  margin-block-start: var(--dojo-space-2xs);
}

.dojo-landing strong {
  color: var(--dojo-c-strong);
  font-weight: 700;
}

.dojo-landing a:not(.dojo-button, .dojo-link-more, .wp-block-button__link) {
  color: var(--dojo-c-strong);
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

.dojo-landing a:not(.dojo-button, .dojo-link-more, .wp-block-button__link):hover {
  color: var(--dojo-c-accent);
}

.dojo-landing img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* Compositions */
.dojo-landing .dojo-flow > * + * {
  margin-block-start: var(--dojo-flow-space, var(--dojo-space-s));
}

.dojo-landing .dojo-band {
  --dojo-c-strong: var(--dojo-band-strong, var(--dojo-ink));
  --dojo-c-text: var(--dojo-band-text, var(--dojo-text));
  --dojo-c-muted: var(--dojo-band-muted, var(--dojo-muted));
  --dojo-c-edge: var(--dojo-band-edge, var(--dojo-rule));
  --dojo-c-field: var(--dojo-band-field, var(--dojo-field-edge));
  --dojo-c-accent: var(--dojo-band-accent, var(--dojo-seal-deep));
  --dojo-c-dash: var(--dojo-band-dash, var(--dojo-seal));
  --dojo-c-focus: var(--dojo-band-focus, var(--dojo-ink));
  --dojo-c-inverse: var(--dojo-band-inverse, var(--dojo-paper));

  position: relative;
  isolation: isolate;
  padding-block: var(--dojo-band-space);
  padding-inline: var(--dojo-gutter);
  overflow-x: clip; /* full-bleed children (the reviews strip) never add a horizontal scrollbar */
  color: var(--dojo-c-text);
  scroll-margin-block-start: calc(var(--dojo-header-height) + var(--dojo-space-s));
}

.dojo-landing .dojo-band :focus-visible {
  outline-color: var(--dojo-c-focus);
}

.dojo-landing .dojo-inner {
  display: grid;
  gap: var(--dojo-space-m) var(--dojo-space-xl);
  max-inline-size: var(--dojo-wide);
  margin-inline: auto;
}

/* A two-column rail: the heading on the left, the content on the right. */
@media (min-width: 64em) {
  .dojo-landing .dojo-rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    row-gap: 0;
  }

  .dojo-landing .dojo-rail > * {
    grid-column: 2;
  }

  /* The heading spans every row of the right column, so a tall heading never stretches the gap between its neighbours;
     the vertical rhythm comes from flow margins instead of row gaps, and empty spanned rows collapse to nothing. */
  .dojo-landing .dojo-rail > :is(h2, .dojo-rail__head) {
    grid-column: 1;
    grid-row: 1 / span 12;
  }

  .dojo-landing .dojo-rail > :not(h2, .dojo-rail__head) + * {
    margin-block-start: var(--dojo-flow-space, var(--dojo-space-s));
  }

  .dojo-landing .dojo-rail > .dojo-rail__wide {
    grid-column: 1 / -1;
    margin-block-start: var(--dojo-space-m);
  }
  /* Beside the enrollment form the side column holds the heading and the chosen date's card, which stays in view
     (under the header) while the steps of the form add up on the right. */
  .dojo-landing .dojo-rail > .dojo-enrollment-side {
    align-self: stretch;
    padding-inline-end: var(--dojo-space-l);
  }

  .dojo-landing .dojo-enrollment-side .dojo-edition[data-layout="summary"] {
    position: sticky;
    top: calc(var(--dojo-header-height) + var(--dojo-space-m));
  }
}

/* In step 1 the date is chosen right there in the form, so the side shows only the price; the date box joins it from
   step 2 on, once there is a choice to recall. Without the module (one-page form) both boxes stay. */
.dojo-landing #inscripcion:has(.dojo-enrollment[data-ready]:not([data-step="2"], [data-step="3"])) .dojo-summary__date {
  display: none;
}

/* The heading and the card under it, in every width. */
.dojo-landing .dojo-enrollment-side .dojo-edition[data-layout="summary"] {
  margin-block-start: var(--dojo-space-m);
}

.dojo-landing .dojo-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-xs);
}

/* Utility */
.dojo-landing .dojo-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A band whose block printed nothing (reviews with no reviews) disappears whole. */
.dojo-landing .dojo-band:has(> .dojo-inner:empty) {
  display: none;
}

/* The opinions band is a quiet strip: less air above, more below so the cards do not touch the next section. */
.dojo-landing .dojo-band:has(.dojo-reviews) {
  padding-block: var(--dojo-space-l) var(--dojo-space-2xl);
}

/* Exceptions: what a band means for the colours its content reads (see tokens.css, --dojo-c-*). */
.dojo-landing .dojo-band--wash {
  background: var(--dojo-washi);
}

.dojo-landing .dojo-band--ink {
  --dojo-band-strong: var(--dojo-paper);
  --dojo-band-text: var(--dojo-on-ink);
  --dojo-band-muted: var(--dojo-on-ink-muted);
  --dojo-band-edge: var(--dojo-on-ink-edge);
  --dojo-band-field: var(--dojo-on-ink-muted);
  --dojo-band-accent: var(--dojo-seal-on-ink);
  --dojo-band-dash: var(--dojo-seal);
  --dojo-band-focus: var(--dojo-paper);
  --dojo-band-inverse: var(--dojo-sumi);

  background: var(--dojo-sumi);
}

.dojo-landing .dojo-band--red {
  --dojo-band-strong: var(--dojo-paper);
  --dojo-band-text: var(--dojo-paper);
  --dojo-band-muted: var(--dojo-paper);
  --dojo-band-edge: var(--dojo-seal-edge);
  --dojo-band-field: var(--dojo-paper);
  --dojo-band-accent: var(--dojo-paper);
  --dojo-band-dash: var(--dojo-paper);
  --dojo-band-focus: var(--dojo-paper);
  --dojo-band-inverse: var(--dojo-seal);

  background: var(--dojo-seal);
}

/* Motifs. All decorative: behind the text (z-index -1 inside the band's own stacking context),
   never under the pointer, never carrying content. */
.dojo-landing .dojo-band--wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dojo-grain);
  opacity: 0.22;
  pointer-events: none;
}

/* The outline word: one per chosen section, vertical in the wide left margin, horizontal above the title elsewhere. */
.dojo-landing .dojo-band[class*="dojo-word-"]::after {
  position: absolute;
  top: calc(var(--dojo-band-space) - 3.75rem);
  left: var(--dojo-gutter);
  z-index: -1;
  color: transparent;
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-word-size, var(--dojo-step-4));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
  -webkit-text-stroke: 0.09rem var(--dojo-c-dash);
}

.dojo-landing .dojo-word-practica::after {
  content: "Práctica" / "";
}

.dojo-landing .dojo-word-asistentes::after {
  content: "Asistentes" / "";
}

.dojo-landing .dojo-word-sumate::after {
  content: "Sumate" / "";
}

.dojo-landing .dojo-word-ubicacion::after {
  content: "Ubicación" / "";
}

/* On a phone the word would sit horizontal over the title and add nothing: it is left out. */
@media (max-width: 47.99em) {
  .dojo-landing .dojo-band[class*="dojo-word-"]::after {
    display: none;
  }
}

/* Wide screens: the word stands vertical in the left margin and stays in view (sticky, under the header) while its
   section scrolls. The band becomes a one-cell grid shared by the content and the word, so the word never takes
   room from the content and stops at the end of its own section instead of spilling into the next one. */
@media (min-width: 86em) {
  .dojo-landing .dojo-band[class*="dojo-word-"] {
    display: grid;
  }

  .dojo-landing .dojo-band[class*="dojo-word-"] > * {
    grid-area: 1 / 1;
  }

  .dojo-landing .dojo-band[class*="dojo-word-"]::after {
    position: sticky;
    top: calc(var(--dojo-header-height) + var(--dojo-space-m));
    left: auto;
    grid-area: 1 / 1;
    align-self: start;
    justify-self: start;
    /* The grid cell starts at the gutter; this puts the word 6rem left of the wide measure, as before. Physical on
       purpose: in vertical writing the logical inline margin would push the word down, not sideways. */
    margin-left: calc(50% - (var(--dojo-wide) / 2) - 6rem);
    font-size: var(--dojo-step-6);
    transform: rotate(180deg);
    writing-mode: vertical-rl;
  }

  /* The word in the right margin instead, reading top to bottom: alternates with a word in the section before. */
  .dojo-landing .dojo-band.dojo-word--end::after {
    justify-self: end;
    margin-right: calc(50% - (var(--dojo-wide) / 2) - 6rem);
    margin-left: 0;
    transform: none;
  }
}

/* Block: button */
.dojo-landing .dojo-button,
.dojo-landing .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--dojo-target);
  padding: var(--dojo-space-2xs) var(--dojo-space-m);
  border: var(--dojo-border) solid var(--dojo-seal);
  border-radius: var(--dojo-radius);
  background: var(--dojo-seal);
  color: var(--dojo-paper);
  font-family: var(--dojo-font-text);
  font-size: var(--dojo-step-0);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: none; /* the theme fades buttons; a fade is a mid-way colour that fails contrast */
}

.dojo-landing .dojo-button:hover,
.dojo-landing .wp-block-button__link:hover {
  border-color: var(--dojo-seal-deep);
  background: var(--dojo-seal-deep);
  color: var(--dojo-paper);
}

.dojo-landing .dojo-button--quiet,
.dojo-landing .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-background) {
  border-color: var(--dojo-c-strong);
  background: transparent;
  color: var(--dojo-c-strong);
}

.dojo-landing .dojo-button--quiet:hover,
.dojo-landing .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-background):hover {
  border-color: var(--dojo-c-strong);
  background: var(--dojo-c-strong);
  color: var(--dojo-c-inverse);
}

/* On the red band the filled button is paper with ink text, so it does not vanish into the ground. */
.dojo-landing .dojo-band--red .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  border-color: var(--dojo-paper);
  background: var(--dojo-paper);
  color: var(--dojo-ink);
}

.dojo-landing .dojo-band--red .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  border-color: var(--dojo-ink);
  background: var(--dojo-ink);
  color: var(--dojo-paper);
}

/* Block: the secondary link. Text only, next to a button; it says "more", it does not ask for a decision. */
.dojo-landing .dojo-link-more {
  display: inline-flex;
  gap: var(--dojo-space-2xs);
  align-items: center;
  min-block-size: var(--dojo-target);
  color: var(--dojo-c-strong);
  font-weight: 700;
  text-decoration: none;
}

.dojo-landing .dojo-link-more::after {
  content: "\2193" / "";
  transition: none;
}

.dojo-landing .dojo-link-more:hover {
  color: var(--dojo-c-accent);
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.3em;
}

.dojo-landing .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-xs);
  margin: 0;
  padding: 0;
}

.dojo-landing .wp-block-button {
  margin: 0;
}

/* Block: the landing's own header (sticky, ink) and footer. The site's general ones are off for this page. */
.dojo-landing .dojo-skip {
  position: absolute;
  inset-block-start: -10rem;
  inset-inline-start: var(--dojo-gutter);
  z-index: 60;
  padding: var(--dojo-space-2xs) var(--dojo-space-s);
  background: var(--dojo-paper);
  color: var(--dojo-ink);
  font-weight: 700;
}

.dojo-landing .dojo-skip:focus {
  inset-block-start: var(--dojo-space-2xs);
}

.dojo-landing .dojo-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  padding: 0;
  border-block-end: var(--dojo-hairline) solid transparent;
  overflow-x: visible;
}

.dojo-landing .dojo-header[data-scrolled] {
  border-block-end-color: var(--dojo-c-edge);
}

.dojo-landing .dojo-header__bar {
  display: flex;
  gap: var(--dojo-space-s);
  align-items: center;
  justify-content: space-between;
  /* The bands pad outside the wide measure; the bar pads inside it, so add the gutters back to share the same edges. */
  max-inline-size: calc(var(--dojo-wide) + 2 * var(--dojo-gutter));
  min-block-size: var(--dojo-header-height);
  margin-inline: auto;
  padding-inline: var(--dojo-gutter);
}

.dojo-landing .dojo-header__logo {
  display: block;
  flex: none;
  line-height: 0;
}

.dojo-landing .dojo-header__logo img {
  inline-size: 9.5rem;
  block-size: auto;
}

.dojo-landing .dojo-header__nav ul {
  display: flex;
  gap: var(--dojo-space-xs);
  margin: 0;
  padding: 0;
}

.dojo-landing .dojo-header__nav li {
  margin: 0;
  padding: 0;
}

.dojo-landing .dojo-header__nav li::before {
  content: none;
}

.dojo-landing .dojo-header__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--dojo-target);
  padding-inline: var(--dojo-space-2xs);
  border-block-end: 0.1875rem solid transparent;
  color: var(--dojo-c-text);
  font-size: var(--dojo-step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.dojo-landing .dojo-header__nav a:hover {
  color: var(--dojo-c-strong);
}

.dojo-landing .dojo-header__nav a[aria-current="true"] {
  border-block-end-color: var(--dojo-seal);
  color: var(--dojo-c-strong);
}

.dojo-landing .dojo-header__cta {
  flex: none;
}

/* Wide screens show the words; the pencil, the three lines and the drawer's own button are for phones. */
.dojo-landing .dojo-header__icon,
.dojo-landing .dojo-header__burger,
.dojo-landing .dojo-header__nav-cta {
  display: none;
}

.dojo-landing .dojo-header__menu {
  min-inline-size: var(--dojo-target);
  min-block-size: var(--dojo-target);
  padding-inline: var(--dojo-space-xs);
  border: var(--dojo-hairline) solid var(--dojo-c-field);
  border-radius: var(--dojo-radius);
  background: transparent;
  color: var(--dojo-c-strong);
  font: inherit;
  font-size: var(--dojo-step--1);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.dojo-landing .dojo-header__menu[hidden] {
  display: none;
}

/* Wide: logo, sections, then the call to action. Small: logo, call to action, a Secciones disclosure. */
@media (min-width: 64em) {
  .dojo-landing .dojo-header__bar {
    gap: var(--dojo-space-l);
  }

  .dojo-landing .dojo-header__nav {
    flex: 1;
  }

  .dojo-landing .dojo-header__nav ul {
    justify-content: center;
  }

  .dojo-landing .dojo-header__menu,
  .dojo-landing .dojo-header__nav .dojo-header__nav-cta,
  .dojo-landing .dojo-header__nav .dojo-header__next {
    display: none; /* drawer-only pieces: the wide bar stays one line */
  }
}

@media (max-width: 63.99em) {
  .dojo-landing .dojo-header__bar {
    gap: var(--dojo-space-2xs);
  }

  .dojo-landing .dojo-header__logo {
    margin-inline-end: auto;
  }

  .dojo-landing .dojo-header__logo img {
    inline-size: 11.5rem;
  }

  /* Two square 44px icon buttons: the pencil (enrol) and the three lines (sections). */
  .dojo-landing .dojo-header__cta,
  .dojo-landing .dojo-header__menu {
    display: inline-grid;
    place-items: center;
    inline-size: var(--dojo-target);
    min-inline-size: var(--dojo-target);
    block-size: var(--dojo-target);
    padding: 0;
  }

  .dojo-landing .dojo-header__menu {
    justify-items: end; /* the lines sit on the right margin, level with the page edge */
    border: 0;
  }

  .dojo-landing .dojo-header__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .dojo-landing .dojo-header__icon {
    display: block;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    fill: currentcolor;
  }

  /* Three lines, the top one a little shorter, all flush right. */
  .dojo-landing .dojo-header__burger {
    display: grid;
    justify-items: end;
    gap: 0.3125rem;
    inline-size: 1.375rem;
  }

  .dojo-landing .dojo-header__burger > span {
    display: block;
    inline-size: 100%;
    block-size: 0.125rem;
    border-radius: 1px;
    background: currentcolor;
  }

  .dojo-landing .dojo-header__burger > span:first-child {
    inline-size: 70%;
  }

  /* Open: the three lines fold into a cross. */
  .dojo-landing .dojo-header__burger > span {
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.2s ease, inline-size 0.25s ease;
  }

  .dojo-landing .dojo-header__menu[aria-expanded="true"] .dojo-header__burger > span:first-child {
    inline-size: 100%;
    transform: translateY(0.4375rem) rotate(45deg);
  }

  .dojo-landing .dojo-header__menu[aria-expanded="true"] .dojo-header__burger > span:nth-child(2) {
    opacity: 0;
  }

  .dojo-landing .dojo-header__menu[aria-expanded="true"] .dojo-header__burger > span:last-child {
    transform: translateY(-0.4375rem) rotate(-45deg);
  }

  /* The room for the button is kept while the module loads, so nothing moves when it shows. */
  .dojo-landing .dojo-header__menu[hidden] {
    display: inline-grid;
    visibility: hidden;
  }

  /* The drawer: below the header, from the right edge, over a dimmed page. Closed it is out of sight and out of
     the tab order (visibility), so it can slide instead of popping. */
  .dojo-landing .dojo-header__nav {
    position: fixed;
    inset-block: var(--dojo-drawer-top, var(--dojo-header-height)) 0;
    inset-inline-end: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--dojo-space-m);
    inline-size: min(86vw, 22rem);
    padding: var(--dojo-space-s) var(--dojo-gutter) var(--dojo-space-l);
    overflow-y: auto;
    border-inline-start: var(--dojo-hairline) solid var(--dojo-c-edge);
    background: var(--dojo-sumi);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.32s;
  }

  .dojo-landing .dojo-header[data-open] .dojo-header__nav {
    visibility: visible;
    transform: none;
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
  }

  /* The page behind dims; a tap on it closes the drawer (header-level click, see landing-header.js). */
  .dojo-landing .dojo-header[data-open]::after {
    content: "";
    position: fixed;
    inset: var(--dojo-drawer-top, var(--dojo-header-height)) 0 0;
    z-index: 1;
    background: color-mix(in srgb, var(--dojo-sumi) 72%, transparent);
  }

  .dojo-landing .dojo-header__nav ul {
    flex-direction: column;
    gap: 0;
  }

  /* The sections, big and in the display face: a list to read at a glance, the current one marked in red. */
  .dojo-landing .dojo-header__nav li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 3.5rem;
    padding-inline: 0;
    border-block-end: var(--dojo-hairline) solid var(--dojo-c-edge);
    color: var(--dojo-c-strong);
    font-family: var(--dojo-font-display);
    font-size: var(--dojo-step-3);
    font-weight: 800;
    letter-spacing: 0;
  }

  .dojo-landing .dojo-header__nav li > a::after {
    content: "→";
    color: var(--dojo-c-muted);
    font-family: var(--dojo-font-text);
    font-size: var(--dojo-step-0);
    font-weight: 400;
  }

  .dojo-landing .dojo-header__nav li > a:hover,
  .dojo-landing .dojo-header__nav li > a[aria-current="true"] {
    color: var(--dojo-seal-on-ink);
  }

  .dojo-landing .dojo-header__nav li > a[aria-current="true"] {
    border-block-end-color: var(--dojo-seal-on-ink);
  }

  /* The next date, quiet, right above the button. */
  .dojo-landing .dojo-header__next {
    display: grid;
    gap: var(--dojo-space-3xs);
    margin-block-start: auto;
    padding: var(--dojo-space-s);
    border: var(--dojo-hairline) solid var(--dojo-c-edge);
    border-radius: var(--dojo-radius);
  }

  .dojo-landing .dojo-header__next p {
    margin: 0;
  }

  .dojo-landing .dojo-header__next-label {
    color: var(--dojo-seal-on-ink);
    font-size: var(--dojo-step--1);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .dojo-landing .dojo-header__next-dates {
    color: var(--dojo-c-strong);
    font-family: var(--dojo-font-display);
    font-size: var(--dojo-step-1);
    font-weight: 800;
    line-height: 1.15;
  }

  .dojo-landing .dojo-header__next-hours {
    color: var(--dojo-c-text);
    font-family: var(--dojo-font-text);
    font-size: var(--dojo-step-0);
    font-weight: 400;
    white-space: nowrap;
  }

  .dojo-landing .dojo-header__next-meta {
    color: var(--dojo-c-text);
    font-size: var(--dojo-step--1);
  }

  /* A real button: it does not inherit the small grey type of the section links. */
  .dojo-landing .dojo-header__nav .dojo-header__nav-cta {
    display: flex;
    justify-content: center;
    min-block-size: var(--dojo-target);
    margin-block-start: auto;
    border-block-end: 0;
    color: var(--dojo-paper);
    font-size: var(--dojo-step-0);
    letter-spacing: 0;
  }

  .dojo-landing .dojo-header__nav .dojo-header__next + .dojo-header__nav-cta {
    margin-block-start: 0; /* the box takes the push to the bottom; the button follows it */
  }


  html[data-dojo-menu-open] {
    overflow: hidden;
  }
}

.dojo-landing .dojo-footer {
  padding-block: var(--dojo-space-xl);
}

.dojo-landing .dojo-footer__inner {
  display: grid;
  gap: var(--dojo-space-s);
  max-inline-size: var(--dojo-wide);
  margin-inline: auto;
}

.dojo-landing .dojo-footer__logo {
  display: block;
  line-height: 0;
}

.dojo-landing .dojo-footer__logo img {
  inline-size: 9.5rem;
  block-size: auto;
}

.dojo-landing .dojo-footer__name {
  color: var(--dojo-c-strong);
  font-weight: 700;
}

.dojo-landing .dojo-footer__contact,
.dojo-landing .dojo-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-3xs) var(--dojo-space-m);
  font-size: var(--dojo-step--1);
}

.dojo-landing .dojo-footer__legal {
  padding-block-start: var(--dojo-space-s);
  border-block-start: var(--dojo-hairline) solid var(--dojo-c-edge);
  color: var(--dojo-c-muted);
}
/* Block: hero. Title, flyer, schedule in reading order; the flyer moves beside them on wide screens. */
.dojo-landing .dojo-hero {
  padding-block: var(--dojo-space-m) var(--dojo-band-space); /* the title sits close under the header */
  overflow-x: clip;
}

.dojo-landing .dojo-hero__grid {
  align-items: start;
}

.dojo-landing .dojo-hero__title {
  --dojo-flow-space: var(--dojo-space-s);
}

.dojo-landing .dojo-hero__title > .dojo-eyebrow {
  margin-block-end: var(--dojo-space-m);
}

.dojo-landing .dojo-lead {
  font-size: var(--dojo-step-1);
  line-height: 1.45;
}

/* An enso, the open brush circle, behind the flyer and cut by the page edge. It is a mask: paper-coloured on ink. */
.dojo-landing .dojo-hero::after {
  content: "";
  position: absolute;
  inset-block-start: var(--dojo-space-l);
  inset-inline-end: -16rem;
  z-index: -1;
  inline-size: 40rem;
  aspect-ratio: 1;
  background: var(--dojo-c-strong);
  mask: var(--dojo-motif-enso) center / contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
}

@media (min-width: 64em) {
  .dojo-landing .dojo-hero__grid:has(.dojo-edition[data-layout="flyer"]) {
    grid-template-areas:
      "title flyer"
      "schedule flyer"
      "schedule checks";
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    /* The flexible last row takes the date's extra height, so the middle row only tops the carousel up and the tags
       sit right under it instead of being pushed down. */
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }

  .dojo-landing .dojo-hero__grid:has(.dojo-edition[data-layout="flyer"]) .dojo-hero__title {
    grid-area: title;
  }

  .dojo-landing .dojo-hero__grid .dojo-edition[data-layout="flyer"] {
    grid-area: flyer;
  }

  .dojo-landing .dojo-hero__grid .dojo-edition[data-layout="schedule"] {
    grid-area: schedule;
  }

  /* How the course is given, under the carousel: the left column keeps the title, the lead and the date. */
  .dojo-landing .dojo-hero__grid > .dojo-checks {
    grid-area: checks;
    /* As wide as the carousel (34rem at most) and flush with its right edge, under its controls. */
    justify-content: flex-end;
    inline-size: 100%;
    max-inline-size: 34rem;
  }
}

/* Block: note. A callout with the thick red edge; its label is an eyebrow. */
.dojo-landing .dojo-note {
  padding: var(--dojo-space-s) var(--dojo-space-m);
  border-inline-start: 0.375rem solid var(--dojo-seal);
  background: var(--dojo-paper);
  box-shadow: var(--dojo-lift);
}

.dojo-landing .dojo-note > * + * {
  margin-block-start: var(--dojo-space-3xs);
}

.dojo-landing .dojo-note p:not(.dojo-eyebrow) {
  color: var(--dojo-text);
}

/* Block: syllabus. Four sessions, each numbered in a thin ring. */
.dojo-landing .dojo-syllabus {
  display: grid;
  gap: var(--dojo-space-l) var(--dojo-space-xl);
  counter-reset: session;
}

@media (min-width: 48em) {
  .dojo-landing .dojo-syllabus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dojo-landing .dojo-session {
  display: grid;
  gap: var(--dojo-space-xs);
  align-content: start;
  padding-block-start: var(--dojo-space-s);
  border-block-start: var(--dojo-hairline) solid var(--dojo-c-edge);
  counter-increment: session;
}

.dojo-landing .dojo-session h3 {
  display: flex;
  gap: var(--dojo-space-xs);
  align-items: center;
}

.dojo-landing .dojo-session h3::before {
  content: counter(session);
  display: grid;
  flex: none;
  place-content: center;
  inline-size: 1.9em;
  block-size: 1.9em;
  border: var(--dojo-hairline) solid var(--dojo-c-accent);
  border-radius: 50%;
  color: var(--dojo-c-accent);
  font-size: var(--dojo-step-0);
  font-weight: 700;
  line-height: 1;
}

/* Block: teacher */
.dojo-landing .dojo-teacher {
  display: grid;
  gap: var(--dojo-space-l);
  align-items: center;
}

@media (min-width: 48em) {
  .dojo-landing .dojo-teacher {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.dojo-landing .dojo-teacher .wp-block-image img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--dojo-lift);
}

/* Block: gallery of previous courses */
.dojo-landing .dojo-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dojo-space-xs);
}

@media (min-width: 48em) {
  .dojo-landing .dojo-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dojo-landing .dojo-gallery .wp-block-image img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Block: the place. The address under the heading, then a static map (the site's own file, linked to Google Maps)
   and how to get there. */
.dojo-landing .dojo-place__address {
  margin-block-start: var(--dojo-space-xs);
  color: var(--dojo-c-strong);
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-1);
  line-height: 1.3;
}

/* Under the rail's own spacing: the theme's 32px below the figure is reset. */
/* The bright seal red: 4.95:1 on the paper band this section sits on (AA). Not on a washi band, where it is 4.47:1. */
.dojo-landing .dojo-place__area {
  color: var(--dojo-seal);
}

.dojo-landing .dojo-rail > .dojo-place__map {
  margin-block-end: 0;
}

.dojo-landing .dojo-place__map a {
  display: block;
}

.dojo-landing .dojo-place__map img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--dojo-hairline) solid var(--dojo-c-edge);
}


.dojo-landing .dojo-place__near {
  display: grid;
  gap: var(--dojo-space-2xs);
  margin: 0;
  padding-inline-start: 1.1em;
}

.dojo-landing .dojo-place__near li::marker {
  color: var(--dojo-c-dash);
}

/* Block: contact */
.dojo-landing .dojo-contact {
  --dojo-flow-space: var(--dojo-space-s);
}

/* The two channel marks (contact band and footer), used as masks so they take the text colour. */
.dojo-landing {
  --dojo-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
  --dojo-icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E");
}

/* The channel is an icon, not a label, so the address and the number fit one line on a phone. The icon's
   alt text ("Correo", "WhatsApp") keeps the channel in the link's accessible name. */
.dojo-landing .dojo-contact .wp-block-button__link[href^="mailto:"],
.dojo-landing .dojo-contact .wp-block-button__link[href^="https://wa.me/"],
.dojo-landing .dojo-footer__contact a[href^="mailto:"],
.dojo-landing .dojo-footer__contact a[href^="https://wa.me/"] {
  display: inline-flex;
  gap: var(--dojo-space-2xs);
  align-items: center;
  white-space: nowrap;
}

.dojo-landing .dojo-contact .wp-block-button__link[href^="mailto:"]::before,
.dojo-landing .dojo-contact .wp-block-button__link[href^="https://wa.me/"]::before,
.dojo-landing .dojo-footer__contact a[href^="mailto:"]::before,
.dojo-landing .dojo-footer__contact a[href^="https://wa.me/"]::before {
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  background: currentcolor;
  mask: var(--dojo-icon-mail) center / contain no-repeat;
  content: "" / "Correo: ";
}

.dojo-landing .dojo-contact .wp-block-button__link[href^="https://wa.me/"]::before,
.dojo-landing .dojo-footer__contact a[href^="https://wa.me/"]::before {
  mask-image: var(--dojo-icon-whatsapp);
  content: "" / "WhatsApp: ";
}

/* Exception: motion, only for visitors who did not ask for less. Opacity and transform only, so nothing shifts. */
@media (prefers-reduced-motion: no-preference) {
  @property --dojo-sweep {
    syntax: "<angle>";
    inherits: false;
    initial-value: 360deg;
  }

  @keyframes dojo-brush {
    from {
      --dojo-sweep: 0deg;
    }

    to {
      --dojo-sweep: 360deg;
    }
  }

  .dojo-landing .dojo-hero::after {
    mask:
      var(--dojo-motif-enso) center / contain no-repeat,
      conic-gradient(from 200deg, var(--dojo-ink) var(--dojo-sweep), transparent 0) center / 100% 100% no-repeat;
    mask-composite: intersect;
    animation: dojo-brush 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
  }

  .dojo-landing [data-reveal] {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .dojo-landing [data-reveal="pending"] {
    opacity: 0;
    transform: translateY(1.25rem);
  }
}

/* The drawer's links arrive one after the other (phones, motion allowed). */
@media (prefers-reduced-motion: no-preference) and (max-width: 63.99em) {
  .dojo-landing .dojo-header__nav li {
    opacity: 0;
    transform: translateX(1.5rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .dojo-landing .dojo-header[data-open] .dojo-header__nav li {
    opacity: 1;
    transform: none;
  }

  .dojo-landing .dojo-header[data-open] .dojo-header__nav li:nth-child(2) { transition-delay: 0.04s; }
  .dojo-landing .dojo-header[data-open] .dojo-header__nav li:nth-child(3) { transition-delay: 0.08s; }
  .dojo-landing .dojo-header[data-open] .dojo-header__nav li:nth-child(4) { transition-delay: 0.12s; }
  .dojo-landing .dojo-header[data-open] .dojo-header__nav li:nth-child(5) { transition-delay: 0.16s; }
}

/* Motion turned off: the drawer and the cross just appear. */
@media (prefers-reduced-motion: reduce) {
  .dojo-landing .dojo-header__nav,
  .dojo-landing .dojo-header[data-open] .dojo-header__nav,
  .dojo-landing .dojo-header__burger > span {
    transition: none;
  }
}

/* How the course is given, as quiet red tags under the carousel (a list, read as such): short uppercase labels at
   13px, the documented exception to the floor, regular weight and a faint edge; the text keeps the legible red. */
.dojo-landing .dojo-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dojo-space-2xs);
  margin-inline: 0;
  padding: 0;
  list-style: none;
}

.dojo-landing .dojo-checks li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.125rem var(--dojo-space-2xs);
  border: var(--dojo-hairline) solid color-mix(in srgb, currentcolor 45%, transparent);
  border-radius: 999px;
  color: var(--dojo-seal-on-ink);
  font-size: var(--dojo-step-label);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A tag can lead to its section (where the course is given): the whole tag is the link, underlined on hover. */
.dojo-landing .dojo-checks a {
  color: inherit;
  text-decoration: none;
}

.dojo-landing .dojo-checks a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}