/* The schools directory's server-rendered pages (src/worker/directory/), in the Dancers brand «Lima» (Lima 2 v3).
   Source of truth: SocialMente/DANCERS/MARCA_2026/BRAND_GUIDE.md in the KB, and its boards «escuela» and «home»
   (LIMA/fuentes/lavada3-*.dc.html). The tokens and base rules repeat src/app/styles.css: change both together.
   Decisions, not defects:
   - The lime band carries the school's cover (half over the band) and the home's search, as on the boards.
   - Section headings carry no highlighter; only the page name and, on a school's page, «Primera clase gratis» do.
     List cards say it in plain bold.
   - List cards carry no vouch line each: one line above the list says «Sin verificar» or «Sin reclamar» for all of them.
   - The A–Z rows are about 36 px, not 44: WCAG 2.2 AA asks 24, and 189 rows at 44 would double the page.
   - The footer is lime with the wordmark cropped by the edge (the board's «giant crop»). */
:root {
  --lima: #D6F96C;
  --pizarra: #3A3D42;
  --niebla: #EEF0EA;
  --blanco: #FFFFFF;
  --gris: #5B6070;
  --lima-suave: #F4F8E6;
  --lima-sombra: #B7D364; /* shapes on the Lima band only (the hero dancer); never text, never a ground */
  --line: #E3E6DE;
  --font-sans: "Montserrat", system-ui, sans-serif;
  --font-voice: "Fraunces", Georgia, serif;
  --radius-card: 20px;
  --radius-field: 14px;
  --radius-pill: 999px;
  --radius-photo: 28px;
  --radius-media: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--niebla); color: var(--pizarra); font: 500 16px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  /* Fraunces' «wonky» axis off for every use of the voice: on, its italic «l» has a hook («Da eſ paso»). The font loads
     the axis as a range (page() in src/worker/directory/html.ts); pinning it in the URL alone doesn't work. */
  font-variation-settings: 'WONK' 0; }
a { color: var(--pizarra); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--pizarra); outline-offset: 3px; }
h1, h2, h3 { font-weight: 700; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: 36px; line-height: 1.12; letter-spacing: -0.02em; text-decoration: underline; text-decoration-color: var(--lima);
  text-decoration-thickness: .56em; text-underline-offset: -.4em; text-decoration-skip-ink: none; }
h2 { font-size: 26px; line-height: 1.18; letter-spacing: -0.02em; margin-top: 44px; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
p { margin: 0 0 0.8em; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; }
@media (min-width: 700px) { h1 { font-size: 44px; } h2 { font-size: 28px; } }
.hl { text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: .56em; text-underline-offset: -.4em;
  text-decoration-skip-ink: none; }
/* Fraunces is the human voice only (the hero, the footer, a school's tagline); counts and notices are Montserrat. */
.voice { font-family: var(--font-voice); font-style: italic; font-weight: 400; font-optical-sizing: auto; }
.lead { font-size: 18px; line-height: 1.45; margin: 0 0 20px; color: var(--gris); }
.muted { color: var(--gris); }
.small { font-size: 14px; }
.pre { white-space: pre-wrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--pizarra); color: var(--lima); padding: 10px 16px;
  border-radius: var(--radius-pill); font-weight: 700; }
.skip:focus { left: 16px; }

/* The lime band, its header and the Menú: public/marco.css, shared with the app. */
.wordmark { display: block; height: auto; }

.page { width: 100%; max-width: 1072px; margin: 0 auto; padding: 24px 16px 56px; }
.page.narrow { max-width: 720px; }

/* «Estás en»: Escuelas › Montevideo › Pocitos */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--gris); }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
.crumbs a { color: var(--gris); display: inline-flex; min-height: 44px; align-items: center; }
.crumbs ol { margin-bottom: 6px; }

/* A school: the cover half over the band, the logo on its corner. */
.cover-wrap { position: relative; max-width: 720px; margin: 4px auto -88px; padding: 0 16px; }
.cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-photo); background: var(--pizarra); }
/* The page starts under the cover, which hangs over it. «~», not «+»: the header's Menú (nav.mn) and its script sit
   between the header and the page since the new frame (26-Oct), and «+» stopped matching, hiding the breadcrumb and the
   eyebrow under the photo. Before the phone's rule, so the phone's lower padding wins there. */
.top:has(.cover-wrap) ~ .page { padding-top: 136px; }
/* On a phone the contact button must show in the first screen (about 700 px in Safari): a lower cover with a smaller
   logo, a smaller name, and no breadcrumb (the place line under the name links to the barrio; the JSON-LD keeps the
   trail). */
@media (max-width: 699px) {
  .cover { aspect-ratio: 5 / 2; }
  .cover-wrap { margin-bottom: -72px; }
  .cover-logo { width: 76px; height: 76px; left: 28px; bottom: -22px; }
  .top:has(.cover-wrap) ~ .page { padding-top: 110px; }
  .school h1 { font-size: 32px; }
  .school .crumbs, .top:has(.cover-wrap) ~ .business-page .crumbs { display: none; }
}
.cover-logo { position: absolute; left: 32px; bottom: -28px; width: 92px; height: 92px; border-radius: var(--radius-card);
  background: var(--blanco); object-fit: contain; padding: 8px; }
.cover-logo.initials { display: grid; place-items: center; font-weight: 700; font-size: 28px; padding: 0; }
.school-id { display: flex; align-items: center; gap: 16px; }
.id-logo { flex: none; width: 72px; height: 72px; border-radius: var(--radius-media); background: var(--blanco); object-fit: contain; padding: 6px; }
.id-logo.initials { display: grid; place-items: center; font-weight: 700; font-size: 22px; padding: 0; background: var(--pizarra); color: var(--lima); }
.eyebrow { font-weight: 600; font-size: 15px; color: var(--gris); margin: 0 0 6px; }
.where { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; }
.where svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.where a { text-decoration: none; }
.under { text-align: center; color: var(--gris); font-size: 14px; margin: 10px 0 0; }
.first-title { margin: 0 0 6px; font-size: 22px; }
.first-lead { font-weight: 600; font-size: 17px; margin: 0 0 14px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 0; }
.one { display: grid; margin: 12px 0 0; }
.facts { font-weight: 600; font-size: 15px; margin: 14px 0 0; }
.facts.in { margin: 0; }
.note { margin-top: 12px; }
.fix { margin: 28px 0 0; font-weight: 600; }

/* Cards: white on Niebla, radius 20, no shadow, no border; the first line says who vouches. */
.card { background: var(--blanco); border-radius: var(--radius-card); padding: 20px; margin: 12px 0; }
.card > h2:first-child { margin-top: 0; font-size: 20px; }
.card.featured { background: var(--lima-suave); }
.card.claim { margin-top: 44px; }
.eb { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--gris); }
.eb svg { width: 16px; height: 16px; flex: none; display: block; }
.eb a { color: var(--pizarra); }

/* Buttons are pills: Pizarra with lime text is the one primary; white is secondary; lime is the in-card action. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 24px;
  border-radius: var(--radius-pill); border: 0; font: 700 16px/1.2 var(--font-sans); letter-spacing: -0.005em; cursor: pointer;
  text-align: center; text-decoration: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.wide { display: flex; width: 100%; }
.btn.wide + .btn.wide { margin-top: 10px; }
.btn-primary { background: var(--pizarra); color: var(--lima); }
.btn-secondary { background: var(--blanco); color: var(--pizarra); }
.card .btn-secondary { box-shadow: inset 0 0 0 1.5px var(--pizarra); }
.btn-lima { background: var(--lima); color: var(--pizarra); min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
@media (hover: hover) {
  .btn-primary:hover { background: #2C2F33; }
  .btn-secondary:hover, .btn-lima:hover { box-shadow: inset 0 0 0 2px var(--pizarra); }
  .chip:hover:not(.on) { box-shadow: inset 0 0 0 1.5px var(--pizarra); }
  .sc:hover { box-shadow: inset 0 0 0 1.5px var(--pizarra); }
}
.go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: 15px; }
.go svg { width: 16px; height: 16px; }

/* Chips: white pills, 44 px; what is active is lime. Inside a white card they sit on Niebla. */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill);
  background: var(--blanco); color: var(--pizarra); font-weight: 600; font-size: 15px; text-decoration: none; }
.chip.on { background: var(--lima); }
.chip .n { color: var(--gris); font-size: 13px; }
.search-card + .chips .chip { background: var(--niebla); }
details.more summary { list-style: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary, .chips:has(+ details.more[open]) { display: none; }
h3.sub { font-size: 15px; letter-spacing: 0; color: var(--gris); margin: 16px 0 0; }
.hero .chips .chip { background: var(--blanco); }

/* The timetable: one card a day. The day bar jumps; lime would say «selected», so today is only bolder (its card says «Hoy»). */
.days { display: flex; gap: 4px; background: var(--blanco); border-radius: var(--radius-pill); padding: 4px; margin: 0 0 12px;
  overflow-x: auto; scrollbar-width: none; }
.day { flex: 1; min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px; text-decoration: none; }
.day[aria-current] { font-weight: 700; }
.day-card { scroll-margin-top: 16px; }
.day-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.today { background: var(--lima); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 13px; }
.classes { list-style: none; }
.classes li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.classes li:first-child { border-top: 0; }
.classes .t { font-weight: 700; color: var(--gris); font-size: 15px; }
.classes .c strong { display: block; font-size: 17px; font-weight: 700; }
.classes .g { display: block; color: var(--gris); font-size: 14px; }

.names { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 600; }
.gallery { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-media); background: var(--niebla); }
.gallery li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.gallery a { display: block; }
.video { display: flex; align-items: center; gap: 12px; min-height: 56px; font-weight: 700; }
.play { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lima); flex: none; }
.play svg { width: 20px; height: 20px; }

/* Contact: Click to Unveil. */
details.reveal { margin: 0 0 8px; }
details.reveal summary { list-style: none; }
details.reveal summary::-webkit-details-marker { display: none; }
details.reveal[open] summary { display: none; }
dl.direct, dl.socials { margin: 0; display: grid; gap: 12px; }
dl.socials { margin-top: 12px; }
dl div { min-width: 0; }
dt { font-size: 13px; font-weight: 600; color: var(--gris); }
dd { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
dd a { display: inline-flex; min-height: 44px; align-items: center; }

/* Lists of schools: the whole card is the link. */
.lead + .search, .chips + .search { margin-top: 16px; }
.group { margin-top: 36px; }
.group h2 { margin: 0 0 4px; }
.group h2 a { text-decoration: none; }
@media (hover: hover) { .group h2 a:hover { text-decoration: underline; } }
.count { color: var(--gris); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.cards { list-style: none; display: grid; gap: 12px; margin: 12px 0; }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
.sc { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 16px; border-radius: var(--radius-card);
  background: var(--blanco); color: var(--pizarra); text-decoration: none; }
.sc-logo { flex: none; width: 64px; height: 64px; border-radius: var(--radius-media); object-fit: contain; background: var(--niebla); }
.sc-logo.initials { display: grid; place-items: center; background: var(--pizarra); color: var(--lima); font-weight: 700; font-size: 20px; }
.sc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-name { font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sc-place { color: var(--gris); font-weight: 600; font-size: 14px; }
.sc-styles { font-size: 15px; margin-top: 4px; }
.sc-key { font-weight: 700; font-size: 15px; }
.sc-facts { color: var(--gris); font-size: 13px; font-weight: 600; margin-top: 2px; }
.sc-vouch { display: flex; align-items: center; gap: 6px; color: var(--gris); font-size: 13px; font-weight: 600; margin-top: 4px; }
.sc-vouch svg { width: 14px; height: 14px; flex: none; }
.az { columns: 1; column-gap: 32px; margin-top: 8px; }
@media (min-width: 760px) { .az { columns: 2; } }
.az section { break-inside: avoid; margin: 0 0 18px; }
.az h3 { margin: 0 0 4px; }
.az ul { list-style: none; }
.az li { font-size: 15px; }
.az a { display: inline-block; padding: 7px 0; font-weight: 600; }

/* Search: labelled fields like the home board, in a white card on Niebla. */
.search { display: grid; gap: 10px; background: var(--blanco); border-radius: var(--radius-card); padding: 12px; margin: 16px 0; }
@media (min-width: 760px) { .search { grid-template-columns: 1fr 1fr auto; align-items: stretch; } }
.sf { display: flex; flex-direction: column; justify-content: center; background: var(--niebla); border: 1.5px solid var(--gris);
  border-radius: var(--radius-field); padding: 6px 16px; min-height: 58px; }
.sf:focus-within { border-color: var(--pizarra); box-shadow: 0 0 0 1.5px var(--pizarra); }
.sf span { font-size: 13px; font-weight: 600; color: var(--gris); }
.sf input { border: 0; background: transparent; font: 500 17px var(--font-sans); color: var(--pizarra); padding: 0; min-height: 28px; width: 100%; }
.sf input:focus { outline: none; }
.sf input::placeholder { color: var(--gris); }

/* The home: the hero lives in the band. */
.hero { max-width: 1072px; margin: 0 auto; padding: 12px 16px 32px; }
.hero-voice { font-family: var(--font-voice); font-style: italic; font-weight: 400; font-size: 48px; line-height: 1.02;
  letter-spacing: -0.01em; margin: 8px 0 14px; }
.hero h1 { text-decoration: none; font-size: 28px; margin: 0 0 6px; }
.hero-lead { font-size: 18px; line-height: 1.45; max-width: 34em; }
.search-card .search { margin: 16px 0 4px; }
@media (min-width: 700px) { .hero-voice { font-size: 72px; } .hero h1 { font-size: 34px; } }

/* The home (src/worker/directory/home.ts; KB HEADER_FOOTER_HOME_2026-10 §6 and §8, boards Main and Home-escritorio).
   Decisions, not defects:
   - The dancer is the whole isotype in Lima sombra behind the text (Pizarra over it keeps 6.5:1): 140 px at the top right
     on the phone beside a 236 px text column; on desktop about 372 px with her feet on the band's bottom edge.
   - Competitions and schools are rows with their logos in one white card; auditions and workshops are square posters
     with the title under them, never on them.
   - «Lo que hay en Dancers» closes the page as rows ruled like a theatre programme, not dashboard tiles. */
.home-hero { position: relative; overflow: hidden; padding: 16px 16px 32px; }
.hero-dancer { position: absolute; right: 2px; top: 10px; width: 140px; height: auto; color: var(--lima-sombra); pointer-events: none; }
.hero-text { position: relative; }
.home-hero .hero-voice { font-size: 50px; line-height: 1.02; letter-spacing: -0.01em; margin: 0; }
.home-hero h1 { margin: 14px 0 0; font-size: 27px; line-height: 1.18; letter-spacing: -0.02em; max-width: 236px; }
.home-hero .hero-lead { margin: 8px 0 0; font-size: 17px; line-height: 1.45; max-width: 236px; }
.hero-hint { margin: 10px 0 0; font-size: 15px; font-weight: 600; }
.hero-hint button { border: 0; background: none; padding: 0; font: inherit; color: var(--pizarra); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: pointer; }
.hero-hint a, .hero-hint button { display: inline-flex; align-items: center; min-height: 44px; }
.home-hero .search-card .search { margin: 20px 0 0; padding: 6px 12px 12px; }
.search-where { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--pizarra); font-weight: 600;
  font-size: 15px; line-height: 1.2; text-decoration: none; }
.search-where strong { font-weight: 700; }
.search-where .change { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.home-hero .chips { margin: 14px 0 0; }
/* A phone narrower than the board's 390: a smaller dancer, so the text keeps its column. */
@media (max-width: 380px) {
  .hero-dancer { width: 112px; }
  .home-hero h1, .home-hero .hero-lead { max-width: 214px; }
}
@media (min-width: 700px) {
  /* Tablets: the dancer stays whole at the top right, beside a text column that never reaches her. */
  .home-hero { padding: 44px 16px 64px; }
  .hero-dancer { top: 44px; right: 16px; width: 180px; }
  .hero-text { max-width: calc(100% - 204px); }
}
@media (min-width: 1000px) {
  /* Three programme rows side by side only where each has room for its number and its words. */
  .prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .home-hero { min-height: calc(372px * 1.347 + 20px); }
  .hero-dancer { top: auto; bottom: 0; right: 12px; width: 372px; }
  .hero-text { max-width: 620px; }
}
@media (min-width: 700px) {
  .home-hero .hero-voice { font-size: 84px; line-height: 1; letter-spacing: -0.015em; }
  .home-hero h1 { margin-top: 18px; font-size: 40px; line-height: 1.12; max-width: 440px; }
  .home-hero .hero-lead { margin-top: 10px; font-size: 18px; line-height: 1.5; max-width: 540px; }
  .home-hero .search-card .search { margin-top: 26px; padding: 12px; }
  .search-where, .phone-only { display: none; }
}
.home .hs { margin-top: 48px; }
.home > .home-pair:first-child > .hs:first-child, .home > .hs:first-child { margin-top: 12px; }
.home .hs h2 { margin: 0; }
.hs-sub { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--gris); }
.hs-sub + .chips { margin-top: 10px; }
.gos { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 6px 0 0; }
.home .two > div + div { margin-top: 14px; }
.none { margin: 14px 0 0; font-weight: 600; }
.inv-line { margin: 14px 0 0; }
.inv-line p { margin: 0 0 4px; }
/* Rows with a logo: the next competitions, the schools that give the first class free. */
.lr { list-style: none; background: var(--blanco); border-radius: var(--radius-card); padding: 4px 16px; margin: 14px 0 0; }
.lr a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 18px; align-items: center; gap: 14px; min-height: 84px; padding: 12px 0;
  border-top: 1px solid var(--niebla); color: var(--pizarra); text-decoration: none; }
.lr li:first-child a { border-top: 0; }
.lr img, .lr-ph { display: block; width: 56px; height: 56px; border-radius: var(--radius-media); object-fit: cover; outline: 1px solid var(--niebla);
  outline-offset: -1px; background: var(--niebla); }
.lr-ph { display: grid; place-items: center; background: var(--pizarra); color: var(--lima); font-weight: 700; font-size: 18px; outline: 0; }
.lr .k { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.lr strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.lr small { display: block; margin-top: 1px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--gris); }
.lr a > svg { width: 18px; height: 18px; }
/* Posters: auditions and workshops. */
.pcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.pc { display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--radius-card); overflow: hidden; color: var(--pizarra);
  text-decoration: none; }
.pc img, .pc-ph { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--niebla); }
.pc-ph { display: grid; place-items: center; background: var(--lima-suave); color: var(--gris); font-weight: 700; font-size: 15px; }
.pc .b { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.pc strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.pc small { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--gris); }
.inv { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 18px 16px 8px; border-radius: var(--radius-card);
  background: var(--lima-suave); color: var(--pizarra); text-decoration: none; }
.inv strong { font-size: 17px; line-height: 1.3; }
.inv p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--gris); }
.inv .go { white-space: normal; line-height: 1.3; text-decoration: underline; }
.inv.alone { grid-column: 1 / -1; }
/* «También en Dancers»: one line and one action each. */
.doors4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.door { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 6px; border-radius: var(--radius-card); background: var(--blanco);
  color: var(--pizarra); text-decoration: none; }
.door h3 { margin: 0; font-size: 18px; letter-spacing: -0.015em; line-height: 1.25; }
.door p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--gris); }
.door .go { margin-top: auto; text-decoration: underline; }
/* «Lo que hay en Dancers»: a theatre programme. */
.home .hs-inv { margin-top: 56px; }
.prog { margin-top: 16px; border-top: 2px solid var(--pizarra); }
.prog a { display: grid; grid-template-columns: minmax(104px, auto) minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 84px;
  padding: 10px 0; border-bottom: 2px solid var(--pizarra); color: var(--pizarra); text-decoration: none; }
.prog .n { font-size: 46px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.prog .inv-row .n { color: var(--gris); }
.prog strong { display: block; font-size: 19px; letter-spacing: -0.015em; line-height: 1.2; }
.prog small { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--gris); }
.prog svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .lr a:hover strong, .pc:hover strong, .door:hover h3, .prog a:hover strong, .inv:hover strong { text-decoration: underline; text-underline-offset: 3px; }
}
@media (min-width: 700px) {
  .home .hs { margin-top: 52px; }
  .home-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .home-pair .hs { margin-top: 52px; }
  .home > .home-pair:first-child > .hs, .home > .home-pair:first-child > .hs:first-child, .home > .hs:first-child { margin-top: 24px; }
  .home .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .home .two > div + div { margin-top: 0; }
  .home .two .hs-sub { margin-top: 12px; }
  .pcs { gap: 12px; margin-top: 16px; }
  .doors4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
  .home .hs-inv { margin-top: 64px; }
  .hs-inv .hs-head { display: flex; align-items: baseline; gap: 16px; }
  .hs-inv .hs-head .hs-sub { margin: 0; }
  .prog .n { font-size: 50px; }
}

/* «¿Dónde bailas?» (src/worker/directory/country.ts; board Pais-celular): a step on its own under a lime band with only
   «Volver»; each country a whole row in a white card. */
.hd.hd-back { max-width: 592px; min-height: 64px; padding: 0 8px; }
.page.where-page { max-width: 592px; }
.hd-back .tb { font-size: 15px; padding: 0 8px; }
.hd-back .tb svg { width: 20px; height: 20px; }
.where-page h1 { text-decoration: none; margin: 8px 0 0; font-size: 28px; line-height: 1.18; letter-spacing: -0.02em; }
.where-page .lead { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--pizarra); }
.where-page .lbl { margin: 22px 0 8px; font-size: 13px; font-weight: 700; color: var(--gris); letter-spacing: .01em; }
.where-page .lbl-sub { margin: -2px 0 10px; font-size: 15px; line-height: 1.45; }
.opts { list-style: none; margin: 0; padding: 4px 16px; background: var(--blanco); border-radius: var(--radius-card); }
.opts li + li .opt { border-top: 1px solid var(--niebla); }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0; border: 0; background: none;
  color: var(--pizarra); font: 600 17px/1.3 var(--font-sans); text-align: left; text-decoration: none; cursor: pointer; }
.opt .flag { width: 24px; height: 16px; }
.opt .meta { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--gris); white-space: nowrap; }
.opt .meta.ask { color: var(--pizarra); text-decoration: underline; text-underline-offset: 3px; }
.opt .ok { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--radius-pill); background: var(--lima); color: var(--pizarra); }
.opt .ok svg { width: 20px; height: 20px; }
.opt[aria-pressed="true"] .meta { margin-left: auto; }
@media (hover: hover) { .opt:hover > span:nth-of-type(1) { text-decoration: underline; text-underline-offset: 3px; } }

.event-card { display: block; margin: 12px 0; padding: 20px; border-radius: var(--radius-card); background: var(--blanco);
  color: var(--pizarra); text-decoration: none; }
.event-card .eyebrow { display: block; margin: 0 0 4px; font-weight: 700; font-size: 17px; color: var(--pizarra); }
.event-card strong { display: block; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; }
.event-card .desc { display: block; color: var(--gris); }
.event-card .go { margin-top: 10px; text-decoration: underline; }

/* «Suma tu escuela». */
.steps { padding-left: 20px; display: grid; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; min-width: 0; }
.field-label { font-weight: 600; font-size: 15px; }
.help input, .help textarea { font: 500 17px var(--font-sans); color: var(--pizarra); background: var(--niebla); border: 1.5px solid var(--gris);
  border-radius: var(--radius-field); padding: 0 18px; min-height: 54px; width: 100%; }
.help textarea { padding: 14px 18px; resize: vertical; line-height: 1.5; }
.help input:focus, .help textarea:focus { border-color: var(--pizarra); }
.help .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
/* /podium's form: «Tus datos» and «Tu competencia» over their fields, and a select as wide as the inputs. */
.help .help-group { font-weight: 700; font-size: 18px; margin: 8px 0 14px; }
.help .help-group:first-child { margin-top: 0; }
.form-error { color: #A12C22; font-weight: 600; }

/* The footer (src/worker/directory/chrome.ts, footer; KB HEADER_FOOTER_HOME_2026-10 §5): lime, «Da el paso.», the page's
   call to action, four link groups and «Dancers está en», the wordmark cut by the edge. On the phone each group is one
   line of links separated by «|» (Rafael, 26-Oct: two columns looked messy); the bar belongs to the link before it, so
   a wrapped line never starts with one. On desktop, five columns. */
.foot { background: var(--lima); padding: 40px 16px 0; overflow: hidden; }
.ft { max-width: 1040px; margin: 0 auto; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft h2 { font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; margin: 0; }
.ft-top .voice { font-size: 30px; line-height: 1.1; margin: 0; }
.ft-top .btn { margin-top: 18px; }
.ft-links { margin-top: 30px; }
.fg + .fg { margin-top: 16px; }
.fg ul { display: flex; flex-wrap: wrap; align-items: center; }
.fg li { display: flex; align-items: center; white-space: nowrap; }
.fg li:not(:last-child)::after { content: "|"; margin: 0 7px; opacity: .45; font-weight: 500; }
.fg a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 14px; }
.fg.ft-where { margin-top: 26px; padding-top: 18px; border-top: 2px solid var(--pizarra); }
.ft-countries { gap: 0 16px; }
.fg .ft-countries li::after { content: none; }
.ft-countries a { font-size: 15px; }
.ft-wait { font-size: 15px; line-height: 1.45; margin: 2px 0 0; }
/* The waitlist's link on its own line, a full 44 px target like every other footer link. */
.fg .ft-wait a { display: flex; width: fit-content; min-height: 44px; font-weight: 600; font-size: inherit; }
.ft-small { margin-top: 18px; }
.ft-social { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; }
.ft-social a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ft-copy { font-size: 14px; margin: 6px 0 24px; }
@media (min-width: 700px) {
  .ft-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .ft-top .voice { font-size: 44px; }
  .ft-top .btn { margin-top: 0; flex: none; }
  .ft-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: 36px; padding-top: 24px;
    border-top: 2px solid var(--pizarra); }
  .fg + .fg, .fg.ft-where { margin-top: 0; padding-top: 0; border-top: 0; }
  .fg h2 { margin-bottom: 2px; }
  .fg ul { display: block; }
  .fg li { white-space: normal; }
  .fg li::after { content: none !important; }
  .fg a { font-size: 15px; }
  .ft-wait { font-size: 14px; margin-top: 4px; }
  .ft-small { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; }
  .ft-copy { margin: 0; }
}
.crop { height: 64px; overflow: hidden; color: var(--pizarra); }
.crop .wordmark { width: 118%; max-width: none; margin-left: -4%; }
@media (min-width: 700px) { .crop { max-width: 1040px; margin: 0 auto; height: 96px; } .crop .wordmark { width: 100%; margin-left: 0; } }
/* Wide screens: the footer opens with the header (public/marco.css), to a 1376 px column with 32 px margins. */
@media (min-width: 1100px) {
  .foot { padding-left: 32px; padding-right: 32px; }
  .ft, .crop { max-width: 1376px; }
  .crop { height: 127px; }
}

/* Competitions (/@<handle>, /@<handle>/<edición>, /eventos). Decisions, not defects:
   - The next edition opens the page in the featured card, and «Avísame» lives inside it, where the missing date is.
   - Videos are thumbnails until tapped (the player loads then): a page of 20 YouTube players would cost a phone's data.
   - A Short is framed 9:16 from the same thumbnail (YouTube centres it), at half width on the phone.
   - The agenda reads like the Instagram post: date first in a fixed column, tabular; the city quieter than the name.
   - No counter of who asked for notices anywhere (TIPOS_Y_MODULOS_DE_PERFIL, rule 3). */
.tournament .by { font-weight: 600; font-size: 15px; color: var(--gris); margin: 0 0 12px; }
.tournament .by a { color: var(--pizarra); }
.next { margin-top: 20px; }
/* The latest results near the top of a competition's page, and the pill in each edition (Rafael, 27-Oct-2026). */
.res-card { margin-top: 20px; }
.res-card h2 { margin: 0 0 4px; font-size: 22px; }
.res-sub { color: var(--gris); font-size: 15px; margin: 0 0 14px; }
.res-sub strong { color: var(--pizarra); }
.res-find { margin: 0 0 10px; }
.res-go { min-height: 54px; font-size: 16px; }
.ed-res { margin: 2px 0 10px; }
.next h2 { margin: 0 0 4px; font-size: 22px; }
.next h2 a { text-decoration: none; }
.next-when { font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 6px; }
.next-lead { font-weight: 600; font-size: 17px; margin: 0 0 12px; }
.next-where { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; margin: 0 0 12px; }
.next-where svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.next-follow { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.soon { display: inline-block; background: var(--lima); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 13px;
  font-weight: 700; letter-spacing: 0; vertical-align: middle; color: var(--pizarra); }
.reg { font-weight: 600; margin: 12px 0; }
.reg.open { font-weight: 700; }
.years { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.year { scroll-margin-top: 12px; }
.year-h { font-size: 15px; letter-spacing: 0; color: var(--gris); margin: 24px 0 0; }
.ed h4 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; margin: 0 0 10px; text-wrap: balance; }
.ed h4 a { text-decoration: none; }
@media (hover: hover) { .ed h4 a:hover, .next h2 a:hover { text-decoration: underline; } }
.ed-when { font-size: 15px; color: var(--gris); margin: 0 0 4px; }
.ed-when strong { color: var(--pizarra); }
.ed .go { margin-top: 4px; }

/* The edition's poster beside its date and name (the next one, an edition's card, its page); a tap opens it whole. */
.head { display: flex; gap: 14px; align-items: flex-start; }
.head > div { flex: 1; min-width: 0; }
.poster { flex: none; display: block; width: 96px; }
/* Its own shape (square, 4:5, landscape): a poster cut down loses its date. */
.poster img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--pizarra); }
.ed-head .poster { width: 112px; }
@media (min-width: 600px) { .poster { width: 120px; } .ed-head .poster { width: 150px; } }
/* The next edition's card and an edition's own page show it big, under the date, name and place: the card's whole
 * width on a phone, 400 px from 600 px up (Rafael, 26-Oct-2026). An earlier edition's card keeps the thumbnail. */
.head.big { flex-direction: column; }
.head.big > div { flex: none; width: 100%; }
.head.big .poster { width: 100%; }
@media (min-width: 600px) { .head.big .poster { width: 400px; } }
.ed-head.big { margin-bottom: 14px; }

/* Links elsewhere: the organizer's official results, a recap someone else made. The arrow says it leaves Dancers. */
svg.out { width: 14px; height: 14px; flex: none; }
.ed-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin: -4px 0 6px; }
.ed-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: 15px; }
.ed-links svg { width: 15px; height: 15px; }
.xl { display: flex; gap: 16px; align-items: flex-start; }
.xl > div { flex: 1; min-width: 0; }
.xl-thumb { flex: none; width: 88px; }
.xl-thumb img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.xl-list { list-style: none; margin: 0; padding: 0; }
/* The arrow follows the last word when a label wraps on a phone. */
.xl-list a { display: inline-block; padding: 10px 0; font-weight: 700; font-size: 16px; line-height: 1.3; }
.nw { white-space: nowrap; }
.xl-list a svg { vertical-align: -1px; margin-left: 4px; }
.xl .muted { font-size: 14px; margin: 4px 0 0; }
.xlink { display: flex; align-items: center; gap: 14px; color: var(--pizarra); text-decoration: none; margin: 12px 0; }
.xl-play { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lima); }
.xl-play svg { width: 20px; height: 20px; }
.xl-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xl-text strong { font-size: 17px; }
.xl-text span { color: var(--gris); font-size: 14px; font-weight: 600; }
@media (hover: hover) { .xlink:hover strong { text-decoration: underline; } }

/* Official results on the page: one closed row per category with its winner, so most people never open one; the field
   finds a name, opens its categories and marks the row in lima. Names are as the organizer printed them. */
.xr-src { font-size: 15px; margin-top: -4px; }
.xr-fix { font-size: 14px; margin: -4px 0 0; }
.xr-fix a { color: var(--gris); display: inline-block; padding: 8px 0; }
.xr-src a { font-weight: 700; color: var(--pizarra); }
.xr-src svg.out { vertical-align: -1px; margin-left: 3px; }
.xr-find { margin: 14px 0 6px; }
.xr-find .sf { background: var(--blanco); }
/* The field's own clear button, in slate instead of the system's blue. */
.xr-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; cursor: pointer;
  background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%233A3D42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.xr-count { font-size: 14px; min-height: 1.5em; margin: 6px 0 0; }
.xr { display: grid; gap: 8px; margin: 8px 0 12px; }
/* Every category open, nothing to tap (Rafael, 27-Oct-2026). */
.xr-cat { background: var(--blanco); border-radius: var(--radius-card); }
.xr-head { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; }
.xr-name { font-weight: 700; font-size: 16px; line-height: 1.3; margin: 0; letter-spacing: 0; }
.xr-t { width: calc(100% - 20px); margin: 0 10px 8px; border-collapse: collapse; font-size: 15px; }
.xr-t th { font-size: 12px; font-weight: 600; color: var(--gris); text-align: left; padding: 4px 8px 6px; }
.xr-t td { padding: 10px 8px; border-top: 1px solid var(--line); line-height: 1.3; }
.xr-t th:first-child, .xr-t td:first-child { width: 4.2em; text-align: center; }
.xr-t th:last-child, .xr-t td:last-child { width: 4.6em; text-align: right; }
.xr-t .podio td:first-child { font-weight: 700; }
/* The winner's row, name and score too: no line over the table says who won (Rafael, 27-Oct-2026). */
.xr-t tr.first td { font-weight: 700; }
.xr-t tr.hit td { background: var(--lima); }
/* Not by colour alone: the matched name is bold too. */
.xr-t tr.hit td:nth-child(2) { font-weight: 700; }
.xr-t tr.hit td:first-child { border-radius: 10px 0 0 10px; }
.xr-t tr.hit td:last-child { border-radius: 0 10px 10px 0; }

/* A video: the thumbnail is the link; the script swaps in the player. */
.yt { margin: 12px 0; }
.yt-play, .yt-frame { position: relative; display: block; width: 100%; aspect-ratio: var(--ar, 16 / 9); border-radius: var(--radius-media);
  overflow: hidden; background: var(--pizarra); border: 0; }
.yt-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A bigger triangle (Rafael, 27-Oct-2026: «make the play icon a little bit bigger»). */
.yt-play .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; }
.yt-play .play svg { width: 34px; height: 34px; }
.yt .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(58, 61, 66, .88); color: var(--blanco); font-size: 13px;
  font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.yt figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.yt .vk { font-size: 13px; color: var(--gris); }
/* A Short, or a Mux video in its own shape (its figure sets --ar). */
.yt.short { --ar: 9 / 16; }
.vids { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 8px 0; }
.vids .yt { margin: 8px 0; min-width: 0; }
.vids .yt figcaption { font-size: 14px; }
/* Small thumbnails: the play button sits in the corner, clear of the duration. */
.vids .yt-play .play { left: 8px; top: auto; bottom: 8px; transform: none; width: 36px; height: 36px; }
.vids .yt-play .play svg { width: 22px; height: 22px; }
.vids .yt .dur { font-size: 12px; padding: 1px 7px; }
@media (min-width: 700px) { .vids { grid-template-columns: 1fr 1fr 1fr; } }
@media (hover: hover) { .yt-play:hover .play { box-shadow: 0 0 0 4px var(--blanco); } }

/* The agenda: one row per edition, the date in a fixed column. */
.agenda { list-style: none; background: var(--blanco); border-radius: var(--radius-card); padding: 4px 16px; margin: 12px 0; }
.agenda li + li { border-top: 1px solid var(--line); }
.ag { display: grid; grid-template-columns: 7.6em 1fr; gap: 12px; align-items: baseline; padding: 14px 0; min-height: 44px;
  color: var(--pizarra); text-decoration: none; }
.ag-when { font-weight: 700; font-size: 15px; }
.ag-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-what strong { font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.ag-sub { color: var(--gris); font-size: 14px; font-weight: 600; }
.ag-kind { color: var(--gris); font-size: 14px; }
.ag-open { align-self: flex-start; background: var(--lima); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 13px; font-weight: 700; margin-top: 4px; }
@media (hover: hover) { .ag:hover strong { text-decoration: underline; } }
/* A row with its competition's logo (the agenda, a year, the results), in Rafael's order (27-Oct-2026): the date, the
   logo (the 56 px tile of the home's «Próximas competencias»), then the competition. From 560 px they are three columns;
   on a phone the date heads the row and the logo sits beside the competition, the tiles in a straight column. Without a
   logo, its initials in a quiet tile (`ev-ini`): most have none, and a reading page keeps Pizarra near 5%
   (BRAND_GUIDE §3); the competition cards of «Todas las competencias» take the same. */
.ag.ag-m { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "when when" "mark what"; gap: 8px 14px; align-items: start; }
.ag-m .ag-when { grid-area: when; }
.ag-m .ag-what { grid-area: what; }
.ag-mark { grid-area: mark; width: 56px; height: 56px; border-radius: var(--radius-media); object-fit: contain; background: var(--niebla);
  outline: 1px solid var(--niebla); outline-offset: -1px; }
.ag-mark.initials { display: grid; place-items: center; font-weight: 700; font-size: 18px; outline: 0; }
.ag-mark.ev-ini, .sc-logo.initials.ev-ini { background: var(--niebla); color: var(--gris); }
@media (min-width: 560px) {
  .ag.ag-m { grid-template-columns: 7.6em 56px minmax(0, 1fr); grid-template-areas: "when mark what"; align-items: center; }
}
.yt.short:not(.small) { max-width: 300px; }

/* The schools' map (src/worker/directory/map.ts): a card-shaped box right above the list; the list stays the way in.
   Pins are slate with a white ring; the open one turns lime (lime marks what's chosen); groups show their count in lime. */
.map-wrap { margin: 20px 0; }
.map-wrap[hidden] { display: none; }
.map { position: relative; isolation: isolate; height: 240px; border-radius: 20px; overflow: hidden; background: #E4E7E0; }
@media (min-width: 600px) { .map { height: 320px; } }
@media (min-width: 900px) { .map { height: 380px; } }
/* «.map .map-canvas», not «.map-canvas»: MapLibre's own CSS sets the box to position: relative, which would collapse it. */
.map .map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 24px;
  text-align: center; color: var(--gris); font-weight: 600; font-size: 15px; }
.map-msg[hidden] { display: none; }
/* When it can't load, the box folds to one line. */
.map.map-off { height: auto; }
.map-off .map-canvas { display: none; }
.map-off .map-msg { position: static; padding: 14px 18px; justify-content: flex-start; }
.map-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 8px 4px 0; color: var(--gris); font-size: 13px; }
.map-foot .map-credit a { color: var(--gris); }
/* What a tap picked: a white card right under the map, one row per school, with «Cerrar». */
.map-picked { margin-top: 10px; background: var(--blanco); border-radius: 16px; padding: 4px 16px 12px; }
.map-picked[hidden] { display: none; }
.map-pick { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.map-pick a { font-weight: 700; font-size: 17px; color: var(--pizarra); text-decoration: underline; text-underline-offset: 3px; }
.map-pick span { color: var(--gris); font-size: 14px; }
.map-pick-close { margin-top: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--niebla);
  font: 600 15px var(--font-sans); color: var(--pizarra); cursor: pointer; }
.map .maplibregl-ctrl-group button { width: 40px; height: 40px; }
.map .maplibregl-cooperative-gesture-screen { font: 600 15px var(--font-sans); }
/* Read by screen readers, not shown. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Results from Dancers Podium (src/worker/directory/podium.ts): the same closed category rows as the organizer's tables;
   inside, one row per competitor that opens to the breakdown, judge by judge. Decisions, not defects:
   - The judges' columns say J1, J2, J3; their names go in the line above (and the column's title): three full names
     side by side don't fit a phone.
   - The breakdown scrolls sideways inside its own Niebla box, never the page.
   - A dropped total is grey and labelled «máx.»/«mín.», never struck through (Podium's own rule).
   - Only 1st place gets the lime disc: it is the podium, and the page's one highlight inside the list. */
.pr-links { margin: 0; }
.pr-live svg { width: 14px; height: 14px; }
.pr-go { margin-top: 4px; }
.pr-wait p { margin: 0 0 6px; }
.pr-body { padding: 0 10px 10px; }
.pr-when { font-size: 13px; font-weight: 600; color: var(--gris); margin: 0 8px 6px; }
.pr-judges { font-size: 14px; font-weight: 600; margin: 4px 8px 8px; line-height: 1.4; }
.pr-note { font-size: 14px; color: var(--gris); margin: 6px 8px 8px; }
.pr-list { list-style: none; margin: 0; padding: 0; }
.pr-r { border-top: 1px solid var(--line); }
.pr-s { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 8px;
  min-height: 52px; border-radius: 12px; }
.pr > summary { list-style: none; cursor: pointer; position: relative; padding-right: 32px; }
.pr > summary::-webkit-details-marker { display: none; }
.pr > summary::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--pizarra); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.pr[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.pr-place { display: grid; place-items: center; width: 30px; height: 30px; font-weight: 600; font-size: 15px; justify-self: center; }
.podio .pr-place { font-weight: 700; }
.pr-r[data-first] .pr-place { background: var(--lima); border-radius: 50%; }
.pr-who { display: flex; flex-direction: column; min-width: 0; }
.pr-who b { font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.pr-who small { font-size: 13px; color: var(--gris); font-weight: 600; line-height: 1.3; }
.pr-final { font-weight: 700; font-size: 16px; text-align: right; }
.pr-tag { font-size: 13px; font-weight: 600; color: var(--gris); }
.pr-out .pr-who b { font-weight: 600; }
/* The name finder marks a row in lima and bold, like the organizer's tables. */
.pr-r.hit > .pr > summary, .pr-r.hit > .pr-s { background: var(--lima); }
.pr-r.hit .pr-who b { font-weight: 800; }
@media (hover: hover) { .pr > summary:hover .pr-who b { text-decoration: underline; text-underline-offset: 3px; } }
.pr-sheet { padding: 2px 4px 12px; }
.pr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--niebla); border-radius: var(--radius-media);
  padding: 4px 10px; }
.pr-grid { border-collapse: collapse; width: 100%; font-size: 14px; }
.pr-grid th, .pr-grid td { padding: 7px 5px; text-align: right; white-space: nowrap; vertical-align: top; }
.pr-grid thead th { font-size: 12px; font-weight: 700; color: var(--gris); vertical-align: bottom; }
.pr-grid abbr { text-decoration: none; }
.pr-grid .pr-item { text-align: left; white-space: normal; font-weight: 600; min-width: 7.5em; padding-left: 0; }
.pr-grid tbody tr + tr > * { border-top: 1px solid var(--line); }
.pr-grid tfoot tr:first-child > * { border-top: 2px solid var(--pizarra); font-weight: 700; }
.pr-grid .pr-avg { font-weight: 700; }
.pr-grid small { font-weight: 500; color: var(--gris); font-size: 12px; white-space: nowrap; }
.pr-grid [data-dropped] { color: var(--gris); }
.pr-dropped > * { font-size: 12px; color: var(--gris); font-weight: 600; padding-top: 0; }
.pr-sum { margin: 10px 4px 0; display: grid; gap: 4px; font-size: 14px; }
.pr-sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pr-sum dt small { display: block; color: var(--gris); font-size: 13px; font-weight: 500; }
.pr-sum dd { margin: 0; font-weight: 600; white-space: nowrap; }
.pr-sum .pr-total { border-top: 2px solid var(--pizarra); padding-top: 6px; font-weight: 700; }
.pr-sum .pr-total dd { font-weight: 700; }
.pr-system { font-size: 14px; }
/* The floor test's view: impossible to mistake for the real results. */
.pr-test { background: var(--pizarra); color: var(--blanco); border-radius: var(--radius-media); padding: 12px 16px; margin: 16px 0 0;
  font-size: 15px; font-weight: 600; }
.pr-test strong { color: var(--lima); }
.pr-test a { color: var(--lima); }

/* ---------------------------------------------------------------------------------------------------------------
   Independent teachers (src/worker/directory/classes.ts). Hollow means independent: a ringed portrait on the card, an
   outlined tag, a hollow ring on the map; a school keeps its logo and its filled dot.
   --------------------------------------------------------------------------------------------------------------- */
.tc-face { display: grid; place-items: center; border-radius: 50%; background: var(--blanco); color: var(--pizarra);
  box-shadow: inset 0 0 0 3px var(--pizarra); font-weight: 700; font-size: 20px; }
.tc-tag { align-self: flex-start; margin-bottom: 4px; padding: 2px 9px; border: 1.5px solid var(--pizarra); border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .01em; }
.tc-switch-row { margin: 16px 0 8px; }
.tc-switch-row p { margin: 4px 0 0; }
.tc-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--pizarra); font-weight: 700;
  text-decoration: none; }
.tc-switch .n { color: var(--gris); font-weight: 600; font-size: 14px; }
.tc-knob { position: relative; flex: none; width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--line);
  box-shadow: inset 0 0 0 2px var(--pizarra); transition: background .15s; }
.tc-knob::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--blanco); box-shadow: inset 0 0 0 2px var(--pizarra); transition: transform .15s; }
.tc-switch.on .tc-knob { background: var(--lima); }
.tc-switch.on .tc-knob::after { transform: translateX(18px); background: var(--pizarra); }
.tc-switch:focus-visible { outline: 3px solid var(--pizarra); outline-offset: 4px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .tc-knob, .tc-knob::after { transition: none; } }

/* Her classes, on her profile. */
.cl-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.cl-card h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; }
.cl-card p { margin: 4px 0; }
.cl-when strong { font-size: 16px; }
.cl-next { display: inline-block; margin-left: 4px; color: var(--gris); font-size: 14px; font-weight: 600; }
.cl-where { display: flex; gap: 6px; align-items: flex-start; }
.cl-where svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.cl-where a { color: var(--pizarra); }
.cl-styles { color: var(--gris); font-size: 15px; }
.cl-price { font-weight: 700; }
.cl-act { margin-top: 12px; }
.cl-rule { font-weight: 700; }
.cl-usual { font-size: 15px; }
@media (max-width: 520px) { .cl-next { display: block; margin-left: 0; } }
.tc-switch > span:last-child { white-space: nowrap; }
@media (max-width: 380px) { .tc-switch > span:last-child { white-space: normal; } }
.cl-confirm { margin: 0 0 16px; padding: 0; list-style: none; }
.cl-confirm li { border-bottom: 1px solid var(--line); }
.cl-keep { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 12px 0; cursor: pointer; }
.cl-keep input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--pizarra); }
.cl-keep span span { display: block; margin-top: 2px; }

/* The LATAM census pages (src/worker/directory/latam.ts and the census variant of the school page, Rafael 25-Oct-2026).
   Decisions, not defects:
   - The pager is two secondary pills and the range between them; no page numbers (a region has at most a dozen pages,
     and «101–200 de 1.200» says where you are). */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 20px 0 0; }
.pager > :first-child { justify-self: start; }
.pager > :last-child { justify-self: end; }
.pager .muted { font-size: 15px; text-align: center; }
.card.how { margin-top: 44px; }
.card.how h2 { margin-top: 0; font-size: 20px; }

/* Team calls (/equipo, src/worker/directory/calls.ts): the facts in a featured card, Rafael's words in the voice, and
   the application form, which reuses the help box's fields («.help»). */
.call .call-facts dl { margin: 0; display: grid; gap: 12px; }
.call .call-facts dt { font-weight: 700; font-size: 15px; }
.call .call-facts dd { margin: 2px 0 0; }
.call-quote { margin: 44px 0; }
.call-quote blockquote { margin: 0; font-size: 22px; line-height: 1.4; }
.call-quote blockquote p { margin: 0; }
.call-quote figcaption { margin-top: 12px; font-weight: 600; font-size: 15px; color: var(--gris); }
.call-list { list-style: disc; padding-left: 20px; display: grid; gap: 6px; }
.call .card p:last-child { margin-bottom: 0; }
.call-apply { scroll-margin-top: 16px; }
.field-help { font-size: 14px; color: var(--gris); }
.opt-tag { font-weight: 500; color: var(--gris); }
.help select { font: 500 17px var(--font-sans); color: var(--pizarra); background: var(--niebla); border: 1.5px solid var(--gris);
  border-radius: var(--radius-field); padding: 0 12px; min-height: 54px; max-width: 46%; }
.phone-row { display: flex; gap: 8px; position: relative; }
.phone-row input { flex: 1; min-width: 0; }
/* The WhatsApp country: flag and code in a button like the app's (src/app/signup/CountryPicker.tsx), opening a grid. */
.dial-btn { flex: none; display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 12px; cursor: pointer;
  font: 500 17px var(--font-sans); color: var(--pizarra); background: var(--niebla); border: 1.5px solid var(--gris);
  border-radius: var(--radius-field); font-variant-numeric: tabular-nums; }
.dial-btn svg { width: 16px; height: 16px; }
.dial-btn .flag, .dial-list .flag { width: 27px; height: 18px; }
.dial-list { position: absolute; z-index: 5; left: 0; top: calc(100% + 6px); width: min(100%, 340px); padding: 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--blanco); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(58, 61, 66, .2); }
.dial-list[hidden] { display: none; }
.dial-list button { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; font: 600 16px var(--font-sans); color: var(--pizarra); font-variant-numeric: tabular-nums; }
.dial-list button:hover { background: var(--niebla); }
.dial-list button.on { background: var(--lima); }
.help select.full { max-width: none; width: 100%; padding: 0 18px; }
.help .check { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; font-size: 15px; line-height: 1.45; cursor: pointer; }
.help .check input { flex: none; width: 24px; height: 24px; min-height: 24px; margin: 1px 0 0; padding: 0; accent-color: var(--pizarra); }
/* A field to fix: a thicker red border and, under it, the message in words (color alone isn't enough). */
.help [aria-invalid="true"], .help [aria-invalid="true"]:focus { border-color: #A12C22; border-width: 2.5px; }
.help .field-error { color: #A12C22; font-weight: 600; font-size: 15px; }
.help .check-row { margin: 0 0 16px; }
.help .check-row .check { margin: 0; }
.help .check-row .field-error { display: block; margin: 6px 0 0 36px; }
.apply .btn { width: 100%; }
@media (min-width: 700px) { .call-quote blockquote { font-size: 25px; } .apply .btn { width: auto; } }

/* ---- /buscar: the site's search page (src/worker/directory/search.ts) ------------------------------------------ */
.sx-page h1 { overflow-wrap: anywhere; }
.sx-page .sx-form { margin: 16px 0 8px; }
.sx-count { margin: 18px 0 0; color: var(--gris); font-weight: 600; }
.sx-group h2 { font-size: 22px; margin-top: 32px; }
.sx-list { list-style: none; background: var(--blanco); border-radius: var(--radius-card); padding: 4px 16px; margin: 10px 0 0; }
.sx-list li + li .sx-hit { border-top: 1px solid var(--niebla); }
.sx-page .sx-hit { display: flex; gap: 14px; align-items: center; padding: 12px 0; color: var(--pizarra); text-decoration: none; }
.sx-thumb { flex: none; width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: var(--niebla); }
span.sx-thumb { display: grid; place-items: center; background: var(--pizarra); color: var(--lima); font-weight: 700; font-size: 15px; }
span.sx-thumb.sx-help, span.sx-thumb.sx-place, span.sx-thumb.sx-section { background: var(--lima-suave); color: var(--pizarra); font-size: 20px; }
span.sx-thumb svg { width: 20px; height: 20px; }
.sx-more { margin: 8px 0 0; }
.sx-more summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; list-style: none; }
.sx-more summary::-webkit-details-marker { display: none; }
.sx-more[open] summary { display: none; }
.sx-more .sx-list { margin-top: 0; }
.sx-also { margin: 6px 0 0; }
.sx-none .sx-next { padding-left: 20px; display: grid; gap: 6px; }
.sx-try h2 { font-size: 15px; color: var(--gris); margin: 24px 0 0; }
.sx-help { margin-top: 24px; }
@media (hover: hover) { .sx-page .sx-hit:hover .sx-title { text-decoration: underline; text-underline-offset: 3px; } }

/* ---- /ayuda: tutorials and frequent questions (src/worker/directory/help.ts) -----------------------------------
   Decisions, not defects: every answer starts with one line in Fraunces (the human voice, BRAND_GUIDE §4), then the detail;
   a tutorial's steps are big lime numbers, the page's only lime besides the band and the title's highlighter. */
.hp-page .sx-form { margin: 8px 0 0; }
/* A section's line to its tutorials, under the lead: Lima suave (the featured colour), quieter than a card. */
.hp-hint { margin: -6px 0 20px; padding: 10px 14px; border-radius: 14px; background: var(--lima-suave); font-size: 15px; line-height: 1.45; }
.hp-hint-t { font-weight: 700; margin-right: 2px; }
.hp-hint a { font-weight: 600; }
.hp-aud h3 { margin: 28px 0 10px; }
.hp-aud > h2 + .muted { margin: -4px 0 12px; }
.hp-cards, .hp-qs { list-style: none; display: grid; gap: 10px; margin: 10px 0 0; }
.hp-card, .hp-q { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--blanco);
  color: var(--pizarra); text-decoration: none; }
.hp-min { font-size: 13px; font-weight: 600; color: var(--gris); }
.hp-title, .hp-q strong { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.hp-sum { font-size: 15px; color: var(--gris); line-height: 1.4; }
.hp-q .voice { font-size: 19px; line-height: 1.3; }
.hp-all { margin: 4px 0 0; }
.hp-nav .chips { margin: 4px 0 0; }
.hp-needs ul { padding-left: 20px; display: grid; gap: 6px; }
.hp-needs li { line-height: 1.45; }
.hp-steps { list-style: none; display: grid; gap: 18px; margin: 28px 0; padding: 0; }
.hp-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.hp-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lima); color: var(--pizarra);
  font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.hp-steps p { margin: 7px 0 0; font-size: 17px; line-height: 1.5; }
.hp-after .btn { margin-top: 6px; }
.hp-faqs { display: grid; gap: 8px; margin: 10px 0 0; }
/* A question: always its short answer (Fraunces, the human voice); the detail behind «Ver el detalle». */
.hp-faq { background: var(--blanco); border-radius: var(--radius-card); padding: 16px 18px; scroll-margin-top: 16px; }
.hp-faq h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.hp-faq h3:focus { outline: none; }
.hp-short { margin: 0; font-size: 20px; line-height: 1.3; }
.hp-more { margin-top: 6px; }
.hp-more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600;
  font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.hp-more > summary::-webkit-details-marker { display: none; }
.hp-more > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid var(--pizarra); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .15s; }
.hp-more[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.hp-ans p { margin: 0 0 10px; line-height: 1.5; }
.hp-ans p:last-child { margin-bottom: 0; }
@media (hover: hover) {
  .hp-card:hover .hp-title, .hp-q:hover strong { text-decoration: underline; text-underline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .hp-more > summary::after { transition: none; } }