/* ===========================================================
   Game Time Continuum — shared stylesheet
   Brand system: warm-light base, carbón dark contrast bands,
   coral primary / azul secondary accents. Oswald + Quicksand.
   =========================================================== */

/* ---- Self-hosted variable fonts ----
   Subsets of the upstream OFL variable TTFs (latin + latin-ext, kept variable),
   built with the command documented in static/fonts/README.md. Replaces the
   Google Fonts stylesheet: one origin instead of three, no third-party request
   on every page, and fonts.googleapis/gstatic dropped from the CSP.

   Declaring Bitter here costs the pages that do not use it nothing — a family is
   only fetched when a rule actually asks for it — which is why the per-page
   {% block fonts %} could go away entirely.

   The weight ranges are the real axis bounds of each font, not the weights we
   happen to use today. */
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-var.489bc14e3291.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand-var.9b15eccf0e35.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bitter";
  src: url("../fonts/bitter-var.c027fb834476.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Official palette */
  --carbon:  #292B31;
  --coral:   #EF6175;
  --azul:    #44469B;
  --marfil:  #EFE8E3;
  --white:   #FFFFFF;
  /* El gris de marca (#B9B9B9) no tiene token a propósito: estuvo declarado y con cero
     usos, y sobre marfil mide 1,8:1, así que no sirve para texto. Si hace falta un gris,
     es --ink-60. */
  --coral-text: #B53048;

  /* Derived warm tints (kept inside brand hues) */
  --marfil-deep: #E7DED7;
  --carbon-soft: #34373F;
  --carbon-700:  #1F2126;
  --coral-soft:  #F8E3E7;
  --azul-soft:   #E5E5F1;
  --ink-60: rgba(41, 43, 49, 0.70);
  /* Borders only — never text. Composited on marfil it measures 2.51:1, so the
     13 small-text uses it used to have all moved to --ink-60 (4.87:1). */
  --ink-45: rgba(41, 43, 49, 0.45);
  --line:   rgba(41, 43, 49, 0.12);
  --line-on-dark: rgba(239, 232, 227, 0.16);
  /* Los tres valores rgba() que se repetían con dos grafías distintas y un solo papel.
     El resto de los rgba() crudos se quedan: mezclan papel (fondo, texto, sombra) y un
     token único los haría mentir. */
  --ink-on-dark: rgba(239, 232, 227, 0.72);
  /* .55 medía 4,18:1 en las etiquetas de la ficha técnica; .64 supera AA. */
  --ink-on-dark-muted: rgba(239, 232, 227, 0.64);
  --focus-ring: rgba(68, 70, 155, 0.24);

  /* Type */
  --head: "Oswald", "Arial Narrow", sans-serif;
  --body: "Quicksand", "Trebuchet MS", sans-serif;

  /* Radii — soft, to echo the rounded logo */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Shadow — subtle, warm */
  --sh-1: 0 1px 2px rgba(41,43,49,.05), 0 4px 14px rgba(41,43,49,.06);
  --sh-2: 0 2px 6px rgba(41,43,49,.06), 0 18px 40px rgba(41,43,49,.10);
  --sh-coral: 0 10px 28px rgba(239,97,117,.34);
  --sh-azul: 0 10px 28px rgba(68,70,155,.30);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  color: var(--carbon);
  background: var(--marfil);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Aquí había un `overflow-x: hidden` global. Medido antes de quitarlo en 18
     combinaciones de página × ancho (390 y 1280) con la regla neutralizada: ninguna
     desbordaba, así que no tapaba nada — solo escondía el síntoma para el futuro y
     rompía `position: sticky` de cualquier descendiente. Si algún día vuelve a hacer
     falta, es señal de que algo se sale y hay que arreglar eso, no volver a taparlo. */
}

::selection { background: rgba(239,97,117,.26); }

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: .005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Layout helpers ---------- */
.wrap,
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
/* Collapse the seam between two sections that share the same background */
.section--flush-bottom { padding-bottom: clamp(24px, 3vw, 40px); }

.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px; border-radius: 2px;
  background: var(--coral);
  opacity: 1;
  /* El filete se dibuja con scaleX, no animando `width`: ver el bloque de movimiento
     al final de la hoja. El origen vive aquí para que la regla animada sea una línea. */
  transform-origin: left center;
}

.kicker { /* small label, neutral */
  font-family: var(--body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-60);
  font-weight: 500;
  max-width: 56ch;
}

.h-2 { font-size: clamp(30px, 3.6vw, 46px); }
.h-3 { font-size: clamp(22px, 2.2vw, 30px); }

.text-muted { color: var(--ink-60); }
.text-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 18px;
  color: var(--azul);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.text-link:hover { color: var(--coral-text); }
.on-dark .text-link { color: var(--marfil); }
.on-dark .text-link:hover { color: var(--coral); }

/* ---- Enlaces dentro de texto corrido ----
   `a { text-decoration: none }` (línea 82) dejaba cualquier enlace metido en un
   párrafo **sin ninguna** marca visual: ni subrayado ni color propio. No es solo
   «color como único indicador» (WCAG 2.1 §1.4.1): es cero indicadores. Afectaba a los
   enlaces de los términos y de la privacidad, a los del pie y a los del bloque de
   prueba nuevo. Se arregla por contenedor de prosa y no tocando el `a` global, porque
   eso subrayaría la barra, los botones y las tarjetas enteras.
   `.text-link` sigue siendo la variante destacada de bloque, con su propio margen.
   En `.section__head` los CTA también van dentro de un <p>: `:not(.btn)` los deja fuera. */
.legal a,
.footer__bottom a,
.ficha-copy a,
.section__head p a:not(.btn),
.proof__copy p a,
.proof__facts a,
.teacher-card__bio a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(41, 43, 49, .38);
  transition: text-decoration-color .18s ease, color .18s ease;
}
.legal a:hover,
.ficha-copy a:hover,
.section__head p a:not(.btn):hover,
.proof__copy p a:hover,
.proof__facts a:hover {
  color: var(--coral-text);
  text-decoration-color: currentColor;
}
/* En banda oscura, coral (5,08:1 sobre carbón) en vez del coral de texto. */
.on-dark .section__head p a:not(.btn),
.on-dark .ficha-copy a { text-decoration-color: rgba(239, 232, 227, .45); }
.on-dark .section__head p a:not(.btn):hover,
.on-dark .ficha-copy a:hover { color: var(--coral); }
.footer__bottom a { text-decoration-color: rgba(239, 232, 227, .45); }
.footer__bottom a:hover { color: var(--coral); text-decoration-color: currentColor; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--head);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
  max-width: 100%;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn .arr { width: 1.15em; height: 1.15em; flex: 0 0 auto; transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* Dark label, not white: white on brand coral measures 3.16:1 and this is the
   primary CTA on every page. Carbón-700 on the *unchanged* coral is 5.09:1, so
   AA is met without repainting the brand colour — the same move the Clases
   Maestras sub-theme already makes with carbón on naranja. */
.btn--coral { background: var(--coral); color: var(--carbon-700); box-shadow: var(--sh-coral); }
.btn--coral:hover { background: #ed4f66; box-shadow: 0 14px 34px rgba(239,97,117,.42); transform: translateY(-2px); }
/* The coral band is now --coral-text, so a coral pill on it would vanish. */
.on-coral .btn--coral { background: var(--white); color: var(--coral-text); box-shadow: none; }

.btn--azul { background: var(--azul); color: var(--white); box-shadow: var(--sh-azul); }
.btn--azul:hover { background: #3c3e8e; transform: translateY(-2px); }

.btn--carbon { background: var(--carbon); color: var(--marfil); }
.btn--carbon:hover { background: var(--carbon-soft); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--carbon); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--carbon); background: rgba(41,43,49,.04); }

.btn--ghost-light { background: transparent; color: var(--marfil); border-color: var(--line-on-dark); }
.btn--ghost-light:hover { border-color: var(--marfil); background: rgba(239,232,227,.08); }

.btn--lg { padding: 17px 32px; font-size: 18px; }
.btn--block { width: 100%; }

/* ---------- Navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(239,232,227,.94);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; align-items: center; gap: 24px;
  height: 76px;
}
.nav.is-stuck {
  background: var(--marfil);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--line);
}
.nav__logo { display: flex; align-items: center; }
/* 32px en una barra de 76px deja ~22px de espacio libre arriba y abajo, que es el
   aire mínimo que pide el manual. La versión a color aguanta 2px más que la mono. */
.nav__logo img { height: 32px; width: auto; }
.nav__logo .fallback { font-family: var(--head); font-weight: 700; font-size: 26px; letter-spacing: .04em; }
.nav__spacer { flex: 1; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--carbon);
  padding: 9px 15px;
  border-radius: var(--r-pill);
  position: relative;
  transition: background .18s ease, color .18s ease;
}
.nav__link:hover { background: rgba(41,43,49,.05); }
/* Coral sobre marfil mide 2,61:1; --coral-text, 4,98:1. El subrayado sigue en coral. */
.nav__link.is-active { color: var(--coral-text); }
.nav__link.is-active::after {
  content:""; position:absolute; left:15px; right:15px; bottom:3px; height:2px;
  background: var(--coral); border-radius: 2px;
}
.nav__cta { margin-left: 8px; }
.nav__burger {
  display: none; width: 46px; height: 46px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--white);
  cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav__burger span { width: 20px; height: 2px; background: var(--carbon); border-radius: 2px; transition: .25s ease; }
.nav__burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity: 0; }
.nav__burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  position: fixed; inset: 76px 0 auto 0; z-index: 55;
  background: var(--marfil); border-bottom: 1px solid var(--line);
  padding: 14px var(--gutter) 26px;
  display: none; flex-direction: column; gap: 4px;
  box-shadow: var(--sh-2);
  transform: translateY(-8px); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.nav__mobile.is-open { display: flex; transform: translateY(0); opacity: 1; }
.nav__mobile a { font-family: var(--body); font-weight: 600; font-size: 18px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.nav__mobile a.is-active {
  color: var(--coral-text);
  background: var(--coral-soft);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.nav__mobile a:last-of-type { border-bottom: 0; }
.nav__mobile .btn { margin-top: 12px; }

/* ---------- Footer ---------- */
.footer { background: var(--carbon-700); color: var(--marfil); padding-block: clamp(56px, 7vw, 88px) 28px; border-top: 1px solid var(--line-on-dark); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px 40px; align-items: start; }
.footer__brand img { height: 88px; width: auto; margin-bottom: 18px; }
.footer__tag { color: rgba(239,232,227,.66); max-width: 34ch; font-size: 15px; }
/* h2, no h4: después de las secciones h2 de cada página, un h4 saltaba un nivel. */
.footer__news h2 { font-size: 19px; letter-spacing: .02em; margin-bottom: 6px; }
.footer__news p { color: rgba(239,232,227,.6); font-size: 14px; margin-bottom: 16px; }
.footer__social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.footer__social a {
  width: 42px; height: 42px; border-radius: var(--r-pill);
  border: 1px solid var(--line-on-dark);
  display: grid; place-items: center; color: var(--marfil);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer__social a:hover { background: var(--coral); border-color: var(--coral); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-on-dark);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(239,232,227,.6); /* .5 medía 4,37:1 a 13px */
}
.footer__bottom a:hover { color: var(--coral); }

/* ---------- Cards & surfaces ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--sh-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: rgba(41,43,49,.18); }

/* Catalog/bundle grids: cards stretch to equal height, so pin the price +
   action to the bottom. This lines every "Ver clase" button up on a common
   baseline regardless of how much copy each card carries. */
.card-grid .card { display: flex; flex-direction: column; }
.card-grid .card .price-line { margin-top: auto; }
.card-grid .card > .btn { align-self: flex-start; }

/* ---------- Pills / chips ---------- */
.chip {
  font-family: var(--body); font-weight: 600; font-size: 15px;
  padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--line); color: var(--carbon);
  display: inline-flex; align-items: center; gap: 9px;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.chip::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--azul); opacity: .8; }
.chip:hover { transform: translateY(-2px); border-color: var(--azul); }

/* ---------- Section heading block ---------- */
.section__head { max-width: 66ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head h2 { margin-top: 16px; font-size: clamp(30px, 3.6vw, 46px); }
.section__head p:not(.eyebrow) { margin-top: 18px; color: var(--ink-60); }
.on-dark .section__head p:not(.eyebrow) { color: var(--ink-on-dark); }

/* ---------- Dark section base ---------- */
.on-dark { background: var(--carbon); color: var(--marfil); }
.on-dark .lead { color: var(--ink-on-dark); }
.on-dark .kicker { color: rgba(239,232,227,.65); } /* .5 medía 3,73:1 sobre --carbon-soft */
.on-dark .card { background: var(--carbon-soft); border-color: var(--line-on-dark); color: var(--marfil); box-shadow: none; }

/* Coral / azul accent bands */
/* Deeper coral, not brand coral: white on --coral #EF6175 measures 3.16:1, so the
   whole band failed AA. --coral-text #B53048 takes it to 6.03:1 and stays in hue. */
.on-coral { background: var(--coral-text); color: var(--white); }
.on-azul  { background: var(--azul); color: var(--white); }
.on-coral .lead, .on-azul .lead { color: rgba(255,255,255,.86); }

/* ---------- Decorative watermark infinity ---------- */
.wm {
  position: absolute; pointer-events: none; user-select: none;
  opacity: .06; z-index: 0;
}

/* ---------- Scroll reveal ----------
   Solo se oculta con `.js` (base.html la pone antes del CSS): sin JavaScript todo el
   contenido se ve. Los héroes no esperan a site.js: se animan con CSS en cuanto carga
   la hoja; así el texto principal (el LCP de las páginas interiores) no depende del JS
   diferido, que en 4G lenta lo retrasaba 8–12 s. El resto sigue revelándose al hacer
   scroll desde site.js. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-d="1"]{ transition-delay: .07s; }
.js .reveal[data-d="2"]{ transition-delay: .14s; }
.js .reveal[data-d="3"]{ transition-delay: .21s; }
.js .reveal[data-d="4"]{ transition-delay: .28s; }
.js :is(.hero, .phero, .toolbox-hero, .toolbox-detail-hero) .reveal {
  animation: reveal-in .7s cubic-bezier(.2,.7,.2,1) both;
}
.js :is(.hero, .phero, .toolbox-hero, .toolbox-detail-hero) .reveal[data-d="1"] { animation-delay: .07s; }
.js :is(.hero, .phero, .toolbox-hero, .toolbox-detail-hero) .reveal[data-d="2"] { animation-delay: .14s; }
.js :is(.hero, .phero, .toolbox-hero, .toolbox-detail-hero) .reveal[data-d="3"] { animation-delay: .21s; }
.js :is(.hero, .phero, .toolbox-hero, .toolbox-detail-hero) .reveal[data-d="4"] { animation-delay: .28s; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; animation: none !important; }
}

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); border: 0; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.mt-8{margin-top:8px}.mt-24{margin-top:24px}
/* Solo para lectores de pantalla. */
/* Destinos de enlaces internos (<main> de «Saltar al contenido», secciones #ancla)
   reciben foco con tabindex="-1" para que el teclado siga desde ahí; sin anillo
   alrededor de toda la sección. */
:where(main, section, header, div)[tabindex="-1"]:focus { outline: none; }
.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;
}
.center { text-align: center; }

:focus-visible { outline: 3px solid var(--ring, var(--azul)); outline-offset: 3px; border-radius: 6px; }
/* El azul da 6,7:1 sobre marfil pero 1,3–2:1 sobre carbón, coral y azul. En esas
   superficies el anillo pasa a marfil; los campos de formulario usan la misma variable. */
.hero, .phero, .toolbox-hero, .toolbox-detail-hero, .on-dark, .on-coral, .on-azul,
.footer, .buybar, .cookie-banner { --ring: var(--marfil); }

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--carbon);
  color: var(--marfil);
  font-family: var(--head);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: top .18s ease;
}
.skip:focus { top: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__links, .nav__cta, .nav__account, .nav__login { display: none; }
  .nav__burger { display: flex; }
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Toolbox --------------------------------------------------------------- */
.toolbox-hero,
.toolbox-detail-hero {
  overflow: clip;
  background: var(--carbon);
  color: var(--marfil);
}
.toolbox-hero__grid,
.toolbox-detail-hero__grid {
  min-height: min(760px, calc(100vh - 76px));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: center;
  padding-block: clamp(72px, 9vw, 124px);
}
.toolbox-hero__copy,
.toolbox-detail-hero__copy { position: relative; z-index: 2; }
.toolbox-hero h1,
.toolbox-detail-hero h1 {
  max-width: 12ch;
  margin-top: 22px;
  font-size: clamp(52px, 7.1vw, 92px);
  letter-spacing: -.025em;
}
.toolbox-hero .lead,
.toolbox-detail-hero .lead {
  margin-top: 28px;
  color: var(--ink-on-dark);
  max-width: 58ch;
}
/* Coral sobre carbón mide 4,47:1 a 13px: el texto va en marfil como en los demás héroes. */
.toolbox-hero .eyebrow { color: var(--marfil); }
.toolbox-promise,
.toolbox-inline-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 28px 0 30px;
  padding: 0;
  list-style: none;
}
.toolbox-promise li,
.toolbox-inline-facts li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 700;
}
.toolbox-promise li::before,
.toolbox-inline-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.toolbox-doc-stack {
  position: relative;
  min-height: 540px;
  isolation: isolate;
}
.toolbox-doc-stack img {
  position: absolute;
  width: min(72%, 350px);
  height: auto;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 18px 24px 50px rgba(0,0,0,.28);
}
.toolbox-doc-stack__back {
  top: 12px;
  right: 0;
  transform: rotate(7deg);
  opacity: .88;
}
.toolbox-doc-stack__front {
  left: 4%;
  bottom: 0;
  transform: rotate(-5deg);
}
.toolbox-doc-stack__tab {
  position: absolute;
  z-index: 2;
  right: 3%;
  top: 18%;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--carbon-700);
  font-family: var(--head);
  font-size: 27px;
  font-weight: 600;
  box-shadow: 10px 14px 30px rgba(0,0,0,.22);
}
.toolbox-intro {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 460px);
  gap: 40px 80px;
  align-items: end;
  margin-bottom: 52px;
}
.toolbox-intro h2,
.toolbox-close h2 { margin-top: 12px; font-size: clamp(34px, 4.2vw, 56px); }
.toolbox-intro > p,
.toolbox-close > p:last-child { color: var(--ink-60); max-width: 60ch; }
.toolbox-list {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
}
.toolbox-feature {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.toolbox-feature__preview {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 520px;
  padding: 54px 42px 0;
  overflow: hidden;
  background: var(--azul-soft);
}
.toolbox-feature__preview img {
  width: min(100%, 350px);
  height: auto;
  border-radius: 9px 9px 0 0;
  box-shadow: 12px 18px 34px rgba(41,43,49,.22);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.toolbox-feature:hover .toolbox-feature__preview img { transform: translateY(-10px); }
.toolbox-feature__preview span {
  position: absolute;
  top: 24px;
  left: 24px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--carbon);
  color: var(--marfil);
  font-size: 13px;
  font-weight: 700;
}
.toolbox-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(38px, 6vw, 76px);
}
.toolbox-feature h3 { margin-top: 14px; font-size: clamp(38px, 5vw, 62px); }
.toolbox-feature__summary { margin-top: 24px; font-size: clamp(19px, 2vw, 24px); font-weight: 700; max-width: 38ch; }
.toolbox-feature__summary + p { margin-top: 16px; color: var(--ink-60); max-width: 60ch; }
.toolbox-inline-facts { margin-block: 26px 30px; }
.toolbox-close { max-width: 920px; }
.toolbox-close .kicker { color: rgba(255,255,255,.72); }
.toolbox-close > p:last-child { margin-top: 20px; color: rgba(255,255,255,.86); }

.toolbox-detail-hero__grid { min-height: 720px; }
.toolbox-back {
  display: inline-flex;
  margin-bottom: 42px;
  color: var(--ink-on-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.toolbox-back:hover { color: var(--coral); }
.toolbox-detail-hero .kicker { color: var(--marfil); } /* coral: 4,47:1 sobre carbón */
.toolbox-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.toolbox-no-gate { margin-top: 17px; color: var(--ink-on-dark-muted); font-size: 13px; font-weight: 700; }
.toolbox-doc-stack--detail { min-height: 570px; }
.toolbox-overview__grid,
.toolbox-areas-grid,
.toolbox-license {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
.toolbox-overview__copy h2,
.toolbox-areas-grid h2,
.toolbox-license h2 { margin-top: 16px; font-size: clamp(36px, 4.6vw, 60px); }
.toolbox-overview__copy > p:not(.eyebrow),
.toolbox-areas-grid > div > p:last-child { margin-top: 22px; max-width: 68ch; color: var(--ink-60); }
.toolbox-facts { margin: 0; border-top: 1px solid var(--carbon); }
.toolbox-facts div { display: flex; justify-content: space-between; gap: 24px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.toolbox-facts dt { color: var(--ink-60); font-weight: 700; }
.toolbox-facts dd { margin: 0; font-family: var(--head); font-size: 23px; font-weight: 600; text-align: right; }
.toolbox-start { background: var(--white); }
.toolbox-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.toolbox-steps li { padding-top: 28px; border-top: 1px solid var(--carbon); }
.toolbox-steps li > span { color: var(--coral-text); font-family: var(--head); font-size: 20px; font-weight: 600; }
.toolbox-steps h3 { margin-top: 18px; font-size: 27px; }
.toolbox-steps p { margin-top: 12px; color: var(--ink-60); }
.toolbox-areas-section { background: var(--marfil-deep); }
.toolbox-areas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--carbon); }
.toolbox-areas li { position: relative; padding: 13px 0 13px 22px; border-bottom: 1px solid rgba(41,43,49,.14); font-weight: 700; }
.toolbox-areas li::before { content: ""; position: absolute; left: 0; top: 1.42em; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.toolbox-license .kicker { color: var(--marfil); } /* coral: 4,47:1 sobre carbón */
.toolbox-license > div:last-child { color: var(--ink-on-dark); }
.toolbox-license > div:last-child p + p { margin-top: 16px; }
.toolbox-license__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.home-toolbox { overflow: clip; background: var(--azul); color: var(--white); }
.home-toolbox__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); align-items: center; gap: clamp(44px, 8vw, 116px); }
.home-toolbox__copy .kicker { color: rgba(255,255,255,.72); }
.home-toolbox__copy h2 { margin-top: 14px; font-size: clamp(38px, 5vw, 62px); max-width: 15ch; }
.home-toolbox__copy > p { margin-top: 22px; color: rgba(255,255,255,.86); max-width: 58ch; }
.home-toolbox__copy .btn { margin-top: 30px; }
.home-toolbox__preview { position: relative; justify-self: center; width: min(100%, 340px); transform: rotate(4deg); }
.home-toolbox__preview img { width: 100%; height: auto; border-radius: 10px; box-shadow: 18px 24px 48px rgba(20,21,55,.34); }
.home-toolbox__preview span { position: absolute; right: -20px; top: 24px; padding: 9px 15px; border-radius: var(--r-pill); background: var(--coral); color: var(--carbon-700); font-size: 13px; font-weight: 700; transform: rotate(-4deg); }

@media (prefers-reduced-motion: reduce) {
  .toolbox-feature__preview img { transition: none; }
  .toolbox-feature:hover .toolbox-feature__preview img { transform: none; }
}

@media (max-width: 900px) {
  .toolbox-hero__grid,
  .toolbox-detail-hero__grid,
  .toolbox-feature,
  .toolbox-overview__grid,
  .toolbox-areas-grid,
  .toolbox-license,
  .home-toolbox__grid { grid-template-columns: 1fr; }
  .toolbox-hero__grid,
  .toolbox-detail-hero__grid { padding-top: 72px; gap: 20px; }
  .toolbox-hero h1,
  .toolbox-detail-hero h1 { max-width: 14ch; }
  .toolbox-doc-stack,
  .toolbox-doc-stack--detail { min-height: 470px; width: min(100%, 520px); justify-self: center; }
  .toolbox-intro { grid-template-columns: 1fr; align-items: start; }
  .toolbox-feature__preview { min-height: 430px; }
  .toolbox-steps { grid-template-columns: 1fr; gap: 36px; }
  .home-toolbox__preview { margin-top: 12px; width: min(78vw, 330px); }
}

@media (max-width: 520px) {
  .toolbox-hero__grid,
  .toolbox-detail-hero__grid { min-height: 0; padding-block: 62px 54px; }
  .toolbox-hero h1,
  .toolbox-detail-hero h1 { font-size: clamp(45px, 14.5vw, 60px); }
  .toolbox-promise { gap: 8px 16px; }
  .toolbox-doc-stack,
  .toolbox-doc-stack--detail { min-height: 390px; margin-top: 20px; }
  .toolbox-doc-stack img { width: min(72%, 285px); }
  .toolbox-doc-stack__tab { width: 68px; height: 68px; font-size: 22px; }
  .toolbox-feature__preview { min-height: 360px; padding-inline: 26px; }
  .toolbox-feature__copy { padding: 34px 26px 40px; }
  .toolbox-detail-actions .btn,
  .toolbox-license__actions .btn { width: 100%; }
  .toolbox-back { margin-bottom: 32px; }
}

/* Django public pages ---------------------------------------------------- */
.hero,
.phero {
  background: var(--carbon);
  color: var(--marfil);
  overflow: hidden;
  position: relative;
}

.heroA {
  min-height: min(760px, 92vh);
  padding-block: 148px 80px;
  position: relative;
}

.heroA__grid,
.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}

.heroA__wm {
  position: absolute;
  right: -8vw;
  top: 120px;
  width: min(620px, 62vw);
  height: auto; /* sin esto el alto del atributo (567) estiraba el logo en vertical */
  opacity: .045;
  pointer-events: none;
}

.heroA__copy,
.phero .reveal:first-child {
  position: relative;
  z-index: 1;
}

.heroA h1 {
  max-width: 14ch;
  /* Sin tamaño propio caía al 2em del navegador (32px): una columna de ~190px con una
     palabra por línea. A 60px y 14ch el titular ocupa 4 líneas sin alargar el héroe. */
  font-size: clamp(40px, 4.2vw, 60px);
  color: var(--marfil);
}
/* El eyebrow usa --coral-text, pensado para fondo claro: sobre carbón mide 2,35:1.
   En los héroes oscuros el texto va en marfil (11,7:1) y el filete conserva el coral. */
.hero .eyebrow,
.phero .eyebrow {
  color: var(--marfil);
}
.phero h1 {
  max-width: 15ch;
  color: var(--marfil);
  /* Sin tamaño propio caía al h1 del navegador (32px): Consultoría, Docentes, Equipo,
     Verificar y cuenta se veían más chicos que el home. Misma escala que .heroA. */
  font-size: clamp(38px, 4.2vw, 60px);
}

.heroA .lead,
.phero .lead {
  max-width: 58ch;
  color: rgba(239,232,227,.78);
  margin-top: 22px;
}

.heroA__actions,
.phero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.heroA__form {
  max-width: 460px;
  margin-top: 30px;
}

.heroA__form + .heroA__actions {
  margin-top: 20px;
}

/* Masterclasses hero: one prominent primary CTA, then secondary links as a
   tidy equal-width group so the stack reads as intentional. Scoped to the
   sub-brand: elsewhere (Consultoría) two CTAs sit side by side. */
.theme-masterclasses .phero__actions {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.phero__actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-self: stretch;
  max-width: 660px;
}

.phero__actions-row .btn {
  flex: 1 1 0;
  min-width: 150px;
}

.heroA__mobile-proof {
  display: none;
  margin-top: 16px;
  color: rgba(239,232,227,.86);
  font-weight: 700;
  font-size: 14px;
}

.heroA__media,
.phero__panel {
  position: relative;
}

.heroA__film-card {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-xl);
  background:
    linear-gradient(145deg, rgba(239,97,117,.18), rgba(239,97,117,0) 34%),
    linear-gradient(315deg, rgba(68,70,155,.28), rgba(68,70,155,0) 40%),
    radial-gradient(circle at 50% 42%, rgba(239,232,227,.12), rgba(239,232,227,0) 48%),
    var(--carbon-soft);
  box-shadow: 0 26px 80px rgba(0,0,0,.24);
  overflow: hidden;
}

.heroA__film-card::before,
.heroA__film-card::after {
  content: "";
  position: absolute;
  inset: 22px;
  pointer-events: none;
}

.heroA__film-card::before {
  border: 1px solid rgba(239,232,227,.11);
  border-radius: calc(var(--r-xl) - 10px);
}

.heroA__film-card::after {
  background:
    linear-gradient(90deg, rgba(239,232,227,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(239,232,227,.08) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 72%, transparent);
  opacity: .42;
}

/* Photo variant: a real image fills the framed film-card edge-to-edge.
   Drop the centred padding and grid overlay so the photo reads cleanly;
   the ::before inner hairline stays as a subtle frame. */
.heroA__film-card--photo {
  padding: 0;
}

.heroA__film-card--photo::after {
  display: none;
}

.heroA__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  border-radius: inherit;
}

/* Event-photo rotator: stacked slides crossfading inside the film card.
   site.js cycles .is-active; reduced-motion users keep the first slide. */
.heroA__slide {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.heroA__slide.is-active {
  opacity: 1;
}

.heroA__slide-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(41,43,49,.78);
  color: var(--marfil);
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
}

@media (max-width: 900px) {
  .heroA__film-card {
    min-height: clamp(320px, 82vw, 430px);
    padding: clamp(24px, 8vw, 42px);
  }
}

.heroA__badge {
  position: absolute;
  width: 74px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.2));
}

.heroA__badge--1 { left: -22px; top: -20px; }
.heroA__badge--2 { right: -14px; bottom: 22px; }

.heroA__note {
  display: grid;
  gap: 2px;
  position: absolute;
  left: 28px;
  bottom: 26px;
  max-width: 260px;
  padding: 16px 18px;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-md);
  background: rgba(41,43,49,.78);
  backdrop-filter: blur(12px);
  color: var(--marfil);
}

.heroA__note span { color: var(--ink-on-dark); font-size: 14px; }

.phero {
  padding-block: 148px 88px;
}

.phero__panel {
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-lg);
  background: var(--carbon-soft);
}
/* Panel sits on a dark hero, so its label needs a light tone (the default
   .kicker ink is dark and disappears against the panel). */
.phero .kicker { color: rgba(239, 232, 227, 0.62); }

/* Closing campaign: one live decision, followed by a quieter proof archive. */
.campaign-status {
  width: fit-content;
  margin-top: 18px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: var(--carbon-700);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.campaign-date,
.home-event-date {
  display: grid;
  gap: 4px;
  margin-top: 24px;
  color: var(--marfil);
}
.campaign-date strong,
.home-event-date strong {
  font-family: var(--head);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 600;
}
.campaign-date span,
.home-event-date span { color: var(--ink-on-dark); font-size: 14px; }
.text-link--light { color: var(--marfil); }
.text-link--light:hover { color: var(--coral); }

.campaign-profile {
  padding: 0;
  overflow: hidden;
}
.campaign-profile__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 28%;
}
.campaign-profile > div { padding: 22px 26px 26px; }
.campaign-profile > div p:last-child { margin-top: 6px; color: var(--ink-on-dark); }
.phero--campaign h1 { max-width: 13ch; }
.campaign-status + h1 { margin-top: 16px; }

.phero--archive { padding-block: clamp(96px, 10vw, 128px) clamp(72px, 7vw, 92px); }
.phero--archive h1 { max-width: 18ch; font-size: clamp(42px, 4.5vw, 62px); line-height: 1.08; }
.phero--archive .lead { max-width: 48ch; }
.phero--archive .campaign-status { background: var(--cm-orange); }
.campaign-profile--archive {
  display: grid;
  gap: 26px;
  padding: clamp(28px, 4vw, 42px);
  background: radial-gradient(circle at 50% 35%, rgba(243,170,82,.09), transparent 58%), var(--carbon-soft);
}
.campaign-profile--archive .cm-brandmark { width: clamp(170px, 19vw, 220px); margin: 0 auto; }
.campaign-profile--archive > div { padding: 22px 0 0; }
.campaign-profile__archive { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line-on-dark); }
.campaign-profile__archive > strong { color: var(--cm-orange); font: 600 64px/1 var(--cm-head); }
.campaign-profile__archive .kicker { color: var(--cm-orange); }
.campaign-profile__archive p:last-child { font-size: 15px; line-height: 1.45; }

.campaign-focus__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(34px, 7vw, 92px);
  align-items: start;
}
.campaign-focus__grid > div:first-child > p:last-child {
  max-width: 68ch;
  margin-top: 18px;
  color: var(--ink-60);
}
.campaign-focus__facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.campaign-focus__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.campaign-focus__facts span { color: var(--ink-60); font-size: 14px; }
.campaign-focus__facts strong { text-align: right; }
.campaign-focus__facts .btn { margin-top: 22px; justify-self: center; }

.archive-section { background: var(--marfil-deep); }
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  border-top: 1px solid var(--line);
}
.archive-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 0 28px;
  border-bottom: 1px solid var(--line);
}
.archive-card h3 { margin-top: 10px; font-size: clamp(21px, 2.1vw, 27px); }
.archive-card > p:not(.kicker) { margin-top: 12px; color: var(--ink-60); }
.archive-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 18px;
  color: var(--ink-60);
  font-size: 13px;
}
.archive-card__meta span + span::before { content: "·"; margin-right: 14px; }
.archive-card .text-link { margin-top: auto; padding-top: 20px; }

.archive-more { margin-top: 30px; border-bottom: 1px solid var(--line); }
.archive-more summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  cursor: pointer;
  color: var(--carbon);
  font-family: var(--head);
  font-size: 20px;
  font-weight: 600;
}
.archive-more summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 4px; }
.archive-more summary span { color: var(--ink-60); font-family: var(--body); font-size: 13px; }
.archive-list { border-top: 1px solid var(--line); }
.archive-list a {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--carbon);
}
.archive-list a:last-child { border-bottom: 0; }
.archive-list a:hover strong { color: var(--coral-text); }
.archive-list a > span { display: grid; gap: 2px; }
.archive-list small,
.archive-list time { color: var(--ink-60); font-size: 13px; }
.archive-list time { white-space: nowrap; }
.archive-empty { color: var(--ink-60); }
.campaign-next { display: flex; flex-wrap: wrap; gap: 12px; }

.heroA__media--campaign .heroA__photo { object-position: center 26%; }

@media (max-width: 900px) {
  .campaign-focus__grid { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .archive-grid { grid-template-columns: 1fr; }
  .archive-card__meta span + span::before { content: none; margin: 0; }
  .archive-list a { display: grid; gap: 8px; }
  .archive-more summary { align-items: end; }
  .campaign-next .btn { width: 100%; }
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: start;
}

.steps {
  display: grid;
  gap: 14px;
}

.steps article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.58);
}

.on-dark .steps article {
  border-color: var(--line-on-dark);
  background: rgba(255,255,255,.06);
}

.steps b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--carbon-700); /* blanco sobre coral: 3,16:1; carbón 700: 5,09:1 */
  font-family: var(--head);
}

.check-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  color: rgba(239,232,227,.76);
  list-style: none;
}

/* La lista nació para héroes oscuros; sobre tarjeta clara (Eliminar cuenta) el marfil
   daba 1,15:1. */
.check-list--light { color: var(--carbon); }

.check-list li {
  padding-left: 26px;
  position: relative;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
}

.team-card,
.consultant-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

.benefit-grid .card {
  padding: 28px;
}

.mini-list {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-60);
  font-size: 14px;
  line-height: 1.45;
}

.mini-list li {
  position: relative;
  padding-left: 18px;
}

.mini-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.on-dark .mini-list {
  color: var(--ink-on-dark);
}

.price-line {
  margin-top: 20px;
  color: var(--azul);
  font-family: var(--head);
  font-size: 22px;
  font-weight: 600;
}

.calendar-agenda {
  display: grid;
  gap: clamp(26px, 4vw, 42px);
}

.calendar-month h2,
.calendar-month h3 {
  margin-bottom: 16px;
  color: var(--carbon);
}

.calendar-list {
  display: grid;
  gap: 14px;
}

.calendar-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.calendar-date {
  display: grid;
  place-items: center;
  min-height: 82px;
  border-radius: var(--r-sm);
  background: var(--coral-soft);
  color: var(--carbon);
  text-align: center;
}

.calendar-date span {
  font-family: var(--head);
  font-size: 36px;
  line-height: 1;
}

.calendar-date b {
  color: var(--coral);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.calendar-main h3,
.calendar-main h4 {
  margin-top: 6px;
  color: var(--carbon);
}

.calendar-main p:not(.kicker) {
  margin-top: 8px;
  color: var(--ink-60);
}

.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: flex-end;
  align-items: center;
}

.calendar-empty {
  max-width: 680px;
  padding: 28px;
}

.calendar-empty p { margin: 10px 0 20px; }

/* ---------- Barra de filtros compartida + agenda ----------
   Dos familias, y la diferencia importa:

   `.filters*`  — la barra de filtros que comparten la agenda y el catálogo. Nació
                  con prefijo `agenda-` porque solo existía en la agenda; la Fase 1.1
                  la portó al catálogo tal cual y el prefijo empezó a mentir. La Fase
                  3.10 la renombró.
   `.agenda-*`  — lo que SÍ es de la agenda: tarjeta, fecha, mes, hora, píldora,
                  resultados, stats, docente. Aquí el prefijo dice la verdad y se queda.

   `.agenda-tag*` es el caso raro: se usa en la agenda y en la ficha, pero no es un
   filtro, así que renombrarlo a `.filters-*` habría sido peor. Si algún día molesta,
   el nombre honesto es `.tag`, no `.filters-tag`.

   El motor (site.js) no depende de ninguno de estos nombres: engancha por
   `[data-filter-root]`, `[data-filter]`, `[data-card]` y `[data-card-group]`. La única
   clase que toca es `.filters-chip`, para marcar el chip activo. */
.phero--compact { padding-block: 132px 64px; }
.phero--compact h1 { max-width: 18ch; }

.agenda-stats {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 38px;
}
.agenda-stats li { display: flex; flex-direction: column; }
.agenda-stats b {
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  color: var(--coral);
}
.agenda-stats span {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-on-dark);
}

.agenda { display: grid; gap: clamp(22px, 3vw, 34px); }

.filters {
  position: sticky;
  top: 78px;
  z-index: 20;
  display: grid;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 44px);
  padding: clamp(16px, 2.4vw, 22px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.filters-search { position: relative; }
.filters-search__icon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-60);
  pointer-events: none;
}
.filters-search input {
  width: 100%;
  padding: 14px 44px 14px 46px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--carbon);
  background: var(--marfil);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, background .15s ease;
}
.filters-search input::placeholder { color: var(--ink-60); }
.filters-search input:hover { border-color: var(--ink-45); }
.filters-search input:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  background: var(--white);
}
/* Hide the browser's native search clear; we render our own consistent one. */
.filters-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.filters-search__clear {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  color: var(--ink-60);
  background: var(--marfil-deep);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.filters-search__clear:hover { color: var(--white); background: var(--coral); }
.filters-search__clear:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Labelled chip groups (Mes, Tema) — mirror the select fields below them. */
.filters-group { display: grid; gap: 8px; }
.filters-group__label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.filters-segment { display: flex; flex-wrap: wrap; gap: 8px; }
.filters-chip {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 8px 16px;
  color: var(--carbon);
  background: var(--marfil);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filters-chip:hover { border-color: var(--coral); }
.filters-chip.is-active {
  /* Same fix as .btn--coral: dark label on the unchanged coral (5.09:1), since
     13px bold is not "large text" and white would be 3.16:1. */
  color: var(--carbon-700);
  background: var(--coral);
  border-color: var(--coral);
  box-shadow: var(--sh-coral);
}
.filters-chip:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

.filters-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.filters-field { display: grid; gap: 6px; }
.filters-field > span {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.filters-field select {
  width: 100%;
  padding: 11px 40px 11px 14px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: var(--carbon);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2344469B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.filters-field select:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

.filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.filters-count {
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  color: var(--carbon);
}
.filters-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  padding: 8px 14px;
  color: var(--coral);
  background: var(--coral-soft, var(--marfil));
  border: 1px solid var(--coral);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.filters-reset:hover { color: var(--white); background: var(--coral); }
.filters-reset:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.filters-reset svg { flex: none; }
/* Every element in here carries an explicit display (grid/flex/inline-flex), which
   beats the UA's [hidden] rule — so filtered-out cards stayed visible. Keyed on
   the filter contract, not on the agenda page's class, so the catalog gets it too. */
[data-filter-root] [hidden] { display: none !important; }

.agenda-results { display: grid; gap: clamp(26px, 4vw, 40px); }
.agenda-month { display: grid; gap: 14px; }
.agenda-month__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--carbon);
  font-size: clamp(22px, 3vw, 30px);
}
.agenda-month__head span { color: var(--ink-60); font-size: .62em; font-weight: 600; }

.agenda-list { display: grid; gap: 12px; }

.agenda-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 24px);
  align-items: center;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.agenda-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: rgba(239, 97, 117, 0.4);
}

.agenda-date {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  min-height: 84px;
  padding: 8px 4px;
  border-radius: var(--r-sm);
  background: var(--coral-soft);
  text-align: center;
}
.agenda-date b {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral-text);
}
.agenda-date span {
  font-family: var(--head);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: var(--carbon);
}
.agenda-date em {
  font-style: normal;
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.agenda-card__body { min-width: 0; }
.agenda-card__body h3 {
  margin: 6px 0 2px;
  font-size: clamp(18px, 2vw, 21px);
  color: var(--carbon);
}
.agenda-teacher { color: var(--ink-60); font-size: 14px; }

.agenda-times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.agenda-time {
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--ink-60);
}
.agenda-time b {
  font-family: var(--head);
  font-weight: 600;
  font-size: 15px;
  color: var(--carbon);
}

.agenda-pill {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.agenda-pill--session { color: var(--azul); background: var(--azul-soft); }

.agenda-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.agenda-tag {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  color: var(--carbon);
  background: var(--marfil-deep);
}
.agenda-tag--area { color: var(--azul); background: var(--azul-soft); }
.agenda-tag--muted { color: var(--ink-60); background: transparent; border: 1px solid var(--line); }

.agenda-card__cta { display: flex; justify-content: flex-end; }

.filters-noresults {
  text-align: center;
  max-width: 520px;
  margin-inline: auto;
  padding: clamp(30px, 5vw, 52px) 20px;
}
.filters-noresults h2 { color: var(--carbon); }
.filters-noresults p { margin: 12px 0 22px; color: var(--ink-60); }

@media (max-width: 720px) {
  .filters { top: 70px; }
  .agenda-card {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
  }
  .agenda-date { min-height: 64px; }
  .agenda-date span { font-size: 28px; }
  .agenda-card__cta {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .agenda-card__cta .btn { width: 100%; text-align: center; }
}

/* ---- Retratos · tratamiento compartido (Fase 2.5) ----
   Las 8 fotos de /equipo/ vienen de 8 sesiones distintas —estudio negro, gris
   corporativo, pared crema, exterior con flores, gel morado, gel rojo, pared blanca,
   foto de carnet— y las 18 de /docentes/ igual. En una rejilla esa disparidad se lee
   como poca legitimidad, justo en las dos páginas cuyo único trabajo es la
   legitimidad.

   Hasta que haya sesión de fotos: monocromo con viraje azul (`mix-blend-mode: color`
   sobre la foto en escala de grises) + marco, radio y recorte idénticos. El color real
   vuelve al pasar el cursor, así que el tratamiento no esconde a nadie. No arregla la
   luminancia del fondo —eso no lo puede hacer la CSS—, pero convierte la variación en
   una decisión visible en vez de un accidente. */
.portrait {
  position: relative;
  isolation: isolate;          /* que la mezcla no se derrame a la página */
  overflow: hidden;
  /* Sin `margin: 0 auto` aquí: en una rejilla convertiría la caja en shrink-to-fit y,
     como la foto mide `width: 100%`, el ancho colapsaba a 0. El centrado se pide
     donde hace falta (.team-card), que además fija un ancho explícito. */
  aspect-ratio: 1;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--marfil-deep);
}
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.05);
  transition: filter .45s cubic-bezier(.16, 1, .3, 1);
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azul);
  mix-blend-mode: color;       /* tono de la marca, luminancia de la foto */
  opacity: .42;
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.portrait:hover img,
.card:hover .portrait img,
.card:focus-within .portrait img { filter: none; }
.portrait:hover::after,
.card:hover .portrait::after,
.card:focus-within .portrait::after { opacity: 0; }
.on-dark .portrait { border-color: var(--line-on-dark); background: var(--carbon-soft); }
@media (prefers-reduced-motion: reduce) {
  .portrait img,
  .portrait::after { transition: none; }
}

/* Real team photos on /equipo/ (replace the avatar-placeholder) */
.team-card { text-align: center; }
.team-photo {
  display: block;
  margin: 0 auto;
  width: 168px;
  height: 168px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.team-card .portrait { width: 168px; margin-inline: auto; }
.team-card .portrait--lg { width: 188px; }
.on-dark .team-photo { border-color: var(--line-on-dark); }
/* `.team-photo` sigue vivo para los avatares de egresados y estudios, que son fotos
   que cada persona sube de sí misma: ahí el monocromo de `.portrait` sería quitarles
   la decisión sobre su propia imagen. El tratamiento uniforme es para los retratos
   editoriales de GTC (/equipo/ y /docentes/), no para los de la comunidad.
   Se borró `.team-photo--ph` (placeholder de iniciales): cero usos en plantillas. */
/* /equipo/ secondary team: 3 per row, with the final row centered so a
   leftover card never dangles alone at the bottom. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.team-grid > * {
  flex: 0 1 calc((100% - 44px) / 3);
  min-width: 220px;
}
.team-grid--2col > * { flex-basis: calc((100% - 22px) / 2); max-width: 420px; }
@media (max-width: 900px) {
  .team-grid > * { flex-basis: 100%; }
}
/* El cargo iba azul en la rejilla de dirección y coral en la de equipo: dos sistemas
   en dos rejillas contiguas. Unificado a la familia azul —el acento secundario que le
   asigna el manual— expresado por banda, porque el azul base sobre carbón sería
   ilegible: azul profundo sobre claro (8,4:1), azul pálido sobre oscuro (13,3:1).
   Un único literal no serviría: rompería una de las dos bandas. */
.team-card__role,
.teacher-card__credit {
  color: var(--azul);
  font-family: var(--head);
  font-weight: 600;
  font-size: 14px;
}
.on-dark .team-card__role,
.on-dark .teacher-card__credit { color: var(--azul-soft); }
.team-card__note { color: var(--ink-60); font-size: 13.5px; }
.on-dark .team-card__note { color: rgba(239, 232, 227, 0.66); }

/* ---- /docentes/ (Fase 2.4) ----
   Retrato a la izquierda y texto a la derecha: la bio de un docente son 2-3 líneas
   largas, y en tarjeta centrada como /equipo/ quedarían en una columna de 24ch. */
.teacher-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.teacher-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  scroll-margin-top: 100px;      /* para los enlaces /docentes/#slug */
}
/* Columna flexible con la lista de clases empujada abajo: las tarjetas de una fila se
   estiran a la misma altura, y sin esto un docente con una clase dejaba el hueco
   después de la lista en vez de entre la bio y la lista. */
.teacher-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100%;
}
.teacher-card__bio {
  color: var(--ink-60);
  font-size: 15px;
}
.teacher-card__classes {
  margin-top: auto;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  /* `padding: 12px 0 0` y no solo `padding-top`: el `<ul>` trae 40px de
     `padding-left` del user agent y los títulos quedaban sangrados. */
  padding: 12px 0 0;
  list-style: none;
}
.teacher-card__classes a {
  font-family: var(--head);
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.teacher-card__classes a:hover {
  color: var(--coral-text);
  text-decoration-color: currentColor;
}
.teacher-card__meta {
  display: block;
  color: var(--ink-60);
  font-size: 13px;
}
@media (max-width: 900px) {
  .teacher-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* El retrato pasa arriba: a 390px, 132px de foto dejan la bio en 20ch. */
  .teacher-card { grid-template-columns: 1fr; gap: 16px; }
  .teacher-card .portrait { width: 132px; margin: 0; }
}

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.cta-band h2, .split > div > h2 { font-size: clamp(30px, 3.6vw, 46px); }
.cta-band h2 + p { margin-top: 12px; }
.team-next { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* Tarjetas que abren con el título (Consultoría): h3 y párrafo iban pegados. */
.card > h3:first-child + p { margin-top: 10px; }

/* .route-card / .route-strip vivían aquí: eran las seis tarjetas de área que la
   Fase 2.3 retiró del catálogo. No quedan usos en ninguna plantilla. */
.path-grid .card,
.faq-item,
.offer-card {
  height: 100%;
}

.path-card h3,
.faq-item h3,
.offer-card h3 {
  margin-top: 10px;
}

.path-card p:not(.kicker),
.faq-item p,
.offer-card p:not(.kicker) {
  margin-top: 12px;
  color: var(--ink-60);
}

.faq-grid,
.consulting-offers {
  display: grid;
  gap: 18px;
}

.faq-item {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.58);
}

.faq-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.faq-item {
  background: var(--white);
  box-shadow: var(--sh-1);
}

/* Servicios: 3 per row, with the trailing row centered so the last two
   cards sit balanced instead of leaving one stranded (matches .team-grid). */
.consulting-offers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.consulting-offers > * {
  flex: 0 1 calc((100% - 36px) / 3);
  min-width: 220px;
}
@media (max-width: 900px) {
  .consulting-offers > * { flex-basis: 100%; }
}

.offer-card .mini-list {
  margin-top: 16px;
}

.offer-note {
  max-width: 74ch;
  margin-top: 24px;
  color: var(--ink-on-dark);
}

.on-dark .offer-card p:not(.kicker),
.on-dark .offer-card .mini-list {
  color: rgba(239,232,227,.74);
}

.on-coral .eyebrow,
.on-azul .eyebrow,
.on-dark .eyebrow {
  color: var(--marfil);
}

.on-coral .eyebrow::before,
.on-azul .eyebrow::before,
.on-dark .eyebrow::before {
  background: rgba(239,232,227,.74);
}

.waitlist-box {
  max-width: 460px;
  width: 100%;
}

.field-row {
  display: flex;
  gap: 8px;
}

.field-row input[type="email"],
.field-row input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--carbon);
  font-family: var(--body);
  font-size: 15px;
}

.field-row input[type="email"]:focus,
.field-row input[type="text"]:focus {
  outline: 3px solid var(--ring, var(--azul));
  outline-offset: 2px;
  border-color: var(--azul);
}

.field-row button {
  flex: 0 0 auto;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--carbon);
  color: var(--marfil);
  cursor: pointer;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.on-dark .field-row input[type="email"],
.heroA .field-row input[type="email"],
.footer .field-row input[type="email"] {
  border-color: var(--line-on-dark);
  background: var(--carbon-700);
  color: var(--marfil);
}

.on-coral .field-row button,
.on-azul .field-row button {
  background: var(--white);
  color: var(--carbon);
}

.on-dark .field-row button,
.heroA .field-row button,
.footer .field-row button {
  background: var(--coral);
  /* Mismo par que .btn--coral: blanco sobre coral mide 3,16:1 y --carbon 4,47:1;
     --carbon-700 llega a 5,09:1. */
  color: var(--carbon-700);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(41,43,49,.78);
}

.on-dark .consent,
.on-azul .consent,
.heroA .consent,
.footer .consent {
  color: var(--ink-on-dark);
}
/* --ink-on-dark (marfil al 72 %) sobre --coral-text mide 3,26:1; marfil pleno, 4,98:1. */
.on-coral .consent {
  color: var(--marfil);
}

.consent input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--coral);
}
.consent input:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

/* Opaque chip, not a coral tint: these forms sit on five different backgrounds
   (marfil, carbón, coral, azul and the CM teal). Coral text measured 1.00:1 on
   the coral band, 1.23:1 on teal and 2.61:1 on marfil. Marfil on carbón-700 is
   ~13:1 everywhere, so one rule covers every band and survives new ones. */
.err {
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: var(--carbon-700);
  color: var(--marfil);
  font-size: 13px;
  font-weight: 600;
}

.waitlist-success {
  padding: 20px;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.1);
}

.success-eyebrow {
  margin-bottom: 6px;
  color: var(--marfil);
  font-family: var(--head);
  font-size: 22px;
  font-weight: 600;
}

.waitlist-form input[name="website"] {
  display: none !important;
}

@media (max-width: 900px) {
  .heroA,
  .phero {
    padding-block: 118px 64px;
  }

  .heroA__grid,
  .phero__grid,
  .grid-3,
  .grid-4,
  .split,
  .faq-grid,
  .cta-band {
    grid-template-columns: 1fr;
  }

  .heroA h1,
  .phero h1 {
    max-width: 12ch;
  }

  .field-row {
    flex-direction: column;
  }

  .field-row button {
    width: 100%;
  }

  .heroA__mobile-proof {
    display: block;
  }

}

@media (max-width: 520px) {
  .btn {
    white-space: normal;
  }
}

/* ===========================================================
   Auth pages (django-allauth) — styles allauth's plain {% element %}
   markup inside a centered brand card. Scoped under .auth so it
   never leaks into the rest of the site.
   =========================================================== */
.auth {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-block: clamp(96px, 14vh, 160px) clamp(48px, 8vh, 96px);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(68,70,155,.07), transparent 70%),
    var(--marfil);
}

.auth__inner {
  display: flex;
  justify-content: center;
}

.auth__card {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: clamp(28px, 4vw, 44px);
}

.auth__card h1 {
  font-size: clamp(28px, 4vw, 38px);
  margin-bottom: 8px;
}

.auth__card > p,
.auth__card form + p {
  color: var(--ink-60);
  font-size: 15px;
  margin-bottom: 20px;
}

.auth__card a { color: var(--azul); font-weight: 600; }
.auth__card a:hover { color: var(--coral); }

/* allauth form fields */
.auth__card form { display: block; }

.auth__card label {
  display: block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: var(--carbon);
  margin: 14px 0 6px;
}

.auth__card input[type="email"],
.auth__card input[type="password"],
.auth__card input[type="text"],
.auth__card select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--carbon);
  font-family: var(--body);
  font-size: 15px;
}

.auth__card input:focus,
.auth__card select:focus {
  outline: 3px solid var(--ring, var(--azul));
  outline-offset: 2px;
  border-color: var(--azul);
}

.auth__card input[type="checkbox"] { margin-right: 8px; }

/* allauth button elements render as plain <button>/<a> — make primary coral */
.auth__card button[type="submit"],
.auth__card .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 22px;
  padding: 15px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  background: var(--coral);
  /* Carbón-700 sobre coral = 5,09:1; el blanco daba 3,16:1 (igual que .btn--coral). */
  color: var(--carbon-700);
  box-shadow: var(--sh-coral);
  cursor: pointer;
  font-family: var(--head);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
}

.auth__card button[type="submit"]:hover,
.auth__card .button:hover {
  background: #ed4f66;
  transform: translateY(-2px);
}

/* secondary / social buttons (outline) */
.auth__card .socialaccount_providers .button,
.auth__card a.button[data-provider] {
  background: transparent;
  color: var(--carbon);
  border-color: var(--line);
  box-shadow: none;
}
.auth__card .socialaccount_providers .button:hover {
  border-color: var(--carbon);
  background: rgba(41,43,49,.04);
  transform: none;
}

.auth__card hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 24px 0;
}

.auth__card ul { list-style: none; padding: 0; margin: 12px 0 0; }
.auth__card .socialaccount_providers { display: flex; flex-direction: column; gap: 10px; }

/* error + help text */
/* The auth card's background is always --white, so a plain darkened coral is
   enough here (6.03:1) — no chip needed, unlike the lead forms on accent bands. */
.auth__card .errorlist {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  color: var(--coral-text);
  font-size: 13px;
  font-weight: 600;
}
.auth__card .helptext,
.auth__card [class*="help"] {
  display: block;
  color: var(--ink-60);
  font-size: 12px;
  margin-top: 6px;
}

.auth__messages { list-style: none; padding: 0; margin: 0 0 18px; }
.auth__message {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  margin-bottom: 8px;
  background: var(--azul-soft);
  color: var(--azul);
}
.auth__message--error { background: var(--coral-soft); color: #b3293f; }
.auth__message--success { background: rgba(68,70,155,.10); color: var(--azul); }

.nav__login { margin-left: auto; }

.auth__field { margin-bottom: 4px; }

.auth__consent,
.auth__card .auth__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-60);
}
.auth__card .errorlist p { margin: 0; }

/* Campo suelto fuera de los formularios con estilo propio (Eliminar cuenta). */
.field-label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--carbon); }
.field-input {
  width: 100%;
  max-width: 360px;
  padding: 13px 16px;
  border: 1px solid rgba(41, 43, 49, .28);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--carbon);
  font-family: var(--body);
  font-size: 15px;
}
.field-input:focus { outline: 3px solid var(--ring, var(--azul)); outline-offset: 2px; border-color: var(--azul); }
.auth__card .errorlist:focus-visible { outline-offset: 4px; }
.auth__consent input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }

/* Social login (Google) button on the auth card */
.auth__social { margin-top: 24px; }
.auth__social-divider {
  display: flex;
  align-items: center;
  margin: 4px 0 16px;
  color: var(--ink-60);
  font-size: 13px;
}
.auth__social-divider::before,
.auth__social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth__social-divider span { padding: 0 12px; }

/* Override the card's coral primary-button style for the white Google button.
   Scoped to .auth__social to outrank `.auth__card button[type="submit"]`. */
.auth__card .auth__social .btn-social {
  width: 100%;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--carbon);
  box-shadow: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.auth__card .auth__social .btn-social:hover {
  background: #f7f7f8;
  transform: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.auth__card .auth__social .btn-social:focus-visible {
  outline: 3px solid var(--focus-ring);
  border-color: var(--azul);
}
.btn-social__icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* Inline notice / banner (e.g. verify-your-email on My Classes) */
.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  margin-bottom: 32px;
  background: var(--azul-soft);
  border: 1px solid var(--line);
  /* Fondo siempre claro: dentro de .on-dark heredaba marfil (1,03:1). */
  color: var(--carbon);
}
.notice--warn { background: var(--coral-soft); border-color: rgba(239,97,117,.3); }
.notice p { font-size: 15px; }

/* LinkedIn no longer reliably carries a certificate URL through its add form.
   Keep the canonical proof link visible and easy to paste before saving. */
.linkedin-helper {
  margin-top: 24px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.section__head .linkedin-helper p { margin-top: 0; }
.linkedin-helper__url {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.linkedin-helper__url code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--carbon);
}
.linkedin-helper__copy { flex: 0 0 auto; }
.section__head .linkedin-helper__status {
  min-height: 1.25em;
  margin-top: 8px;
  color: var(--azul);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 620px) {
  .linkedin-helper__url { align-items: stretch; flex-direction: column; }
  .linkedin-helper__copy { align-self: flex-start; }
}

.certificate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.certificate-guide {
  width: min(1120px, calc(100vw - 48px));
  margin: 24px 0 0;
  padding: clamp(14px, 2vw, 22px);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.certificate-guide figcaption {
  margin-bottom: 14px;
  color: var(--ink-60);
}
.certificate-guide video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 620px) {
  .certificate-actions .btn { width: 100%; }
  .certificate-guide { width: 100%; }
}

/* Legal pages (terms / privacy) — readable long-form text */
.legal { max-width: 760px; }
.legal h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  margin: 32px 0 10px;
}
.legal p, .legal ul { margin-bottom: 14px; color: var(--ink-60); }
.legal a { color: var(--azul); font-weight: 600; }
.legal a:hover { color: var(--coral); }

/* Gated recording page (Phase 4) */
.recording__player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--carbon, #292B31);
  border-radius: var(--r-md);
  overflow: hidden;
}
.recording__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.recording__description {
  max-width: 760px;
  margin-top: 32px;
  color: var(--ink-60);
}

/* Bundle card on My Classes: included classes, each linked to its recording */
.bundle__classes { list-style: none; padding: 0; margin: 10px 0 0; }
.bundle__classes li { padding: 6px 0; font-size: 15px; border-top: 1px solid var(--line); }
.bundle__classes li:first-child { border-top: 0; }
.bundle__classes a { color: var(--azul); font-weight: 600; }
.bundle__classes a:hover { color: var(--coral); }
.bundle__status { color: var(--ink-60); font-size: 13px; }

/* ---------- Fichas (class & bundle detail pages, launch Jun 2026) ---------- */
.phero--ficha { padding-block: 132px 72px; }
.phero--ficha h1 { max-width: 18ch; font-size: clamp(34px, 4.6vw, 58px); }

.ficha-facts {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.ficha-facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-on-dark);
  font-size: 14.5px;
}
.ficha-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha-facts span {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-on-dark-muted);
  white-space: nowrap;
}
.ficha-facts strong { color: var(--marfil); font-weight: 600; text-align: right; }

.ficha-tags { margin-top: 16px; }

.ficha-copy p { color: var(--ink-60); margin-top: 16px; max-width: 58ch; }
.ficha-copy--dark p { color: rgba(239,232,227,.78); }

/* Docente card — large portrait so the professor is showcased, not a footnote. */
.ficha-teacher__photo {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.ficha-teacher h3 { margin-top: 16px; }
.ficha-teacher__credit { color: var(--azul); font-weight: 600; margin-top: 6px; }
.ficha-teacher p { margin-top: 10px; }
.ficha-reqs { margin-top: 18px; border-left: 4px solid var(--coral); }

/* ---- Bloque de prueba de la ficha (Fase 2.6) ----
   Una foto ancha arriba y dos abajo: el trabajo, el jurado y el cierre. Es la única
   prueba visual del sitio y sale de material propio de GTC — el playbook §1 prohíbe
   usar arte o portafolio de los docentes. */
.proof__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1.02fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.proof__copy > p { margin-top: 14px; color: var(--ink-60); max-width: 52ch; }
.proof__facts { font-size: 15px; }
.proof__shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}
.proof__shot {
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--marfil-deep);
}
.proof__shot--lead { grid-column: 1 / -1; }
.proof__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.proof__shots figcaption {
  grid-column: 1 / -1;
  color: var(--ink-60);
  font-size: 13.5px;
  max-width: 46ch;
}
.proof__quotes {
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  list-style: none;
}
.proof__quote { border-top: 1px solid var(--line); padding-top: 16px; }
.proof__quote blockquote {
  margin: 0;
  font-family: var(--head);
  font-weight: 500;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.35;
  color: var(--carbon);
  text-wrap: balance;
}
.proof__quote blockquote::before { content: "«"; }
.proof__quote blockquote::after { content: "»"; }
.proof__cite { margin-top: 8px; color: var(--ink-60); font-size: 14px; font-weight: 600; }
@media (max-width: 900px) {
  .proof__grid { grid-template-columns: 1fr; }
}

.ficha-buy {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.ficha-buy h2 { color: var(--marfil); }
.ficha-buy__note { margin-top: 14px; font-size: 13.5px; color: var(--ink-60); max-width: 40ch; }
.on-dark .ficha-buy__note { color: var(--ink-on-dark-muted); }

.ficha-price {
  margin-top: 18px;
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 42px);
  color: var(--coral);
}
.ficha-price span { font-size: .45em; letter-spacing: .08em; color: var(--ink-60); }
.on-dark .ficha-price span { color: var(--ink-on-dark-muted); }
.price-strike {
  position: relative;
  margin-right: 10px;
  font-size: .62em;
  font-weight: 500;
  color: var(--ink-60);
  text-decoration: none;
}
/* Own strike line (instead of text-decoration) so it can draw in on reveal. */
.price-strike::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 2px;
  border-radius: 2px;
  background: var(--coral);
}
.on-dark .price-strike { color: rgba(239,232,227,.5); }

.seats {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--azul);
}
.seats::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--azul);
}
.on-dark .seats { color: var(--marfil); }
.seats--out, .seats--out::before { color: var(--coral); background: var(--coral); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.tier-card .btn { margin-top: 22px; }
.tier-card--guided { border-color: var(--azul); box-shadow: 0 18px 40px rgba(68,70,155,.16); }

@media (max-width: 900px) {
  .ficha-buy, .tier-grid { grid-template-columns: 1fr; }
  .ficha-facts strong { text-align: left; }
  .ficha-facts li { flex-direction: column; gap: 4px; }
  .calendar-row { grid-template-columns: 70px minmax(0, 1fr); }
  .calendar-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .calendar-date { min-height: 70px; }
  .calendar-date span { font-size: 30px; }
}

.catalog-area { margin-top: clamp(34px, 5vw, 56px); scroll-margin-top: 90px; }
.catalog-area:first-of-type { margin-top: 0; }
/* El filete cierra la cabecera completa (título + descripción), no solo el título:
   la descripción bajó aquí desde las tarjetas de área que retiró la Fase 2.3. */
.catalog-area__head {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.catalog-area__title { color: var(--carbon); }
/* «Empieza aquí» sobre el área de entrada (ver STARTER_AREA en apps/core/views.py).
   Mismo lenguaje que `.tier-badge` —azul base, turquesa en el sub-tema CM— porque un
   distintivo no es un botón: el manual de CM deja el turquesa como acento y reserva el
   naranja para comprar. Va dentro del <h3>, así que el lector de pantalla lo lee junto
   al nombre del área, que es justo lo que significa. */
.catalog-area__badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--azul);
  color: var(--white);
  font-family: var(--head);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.catalog-area__lead {
  margin-top: 6px;
  max-width: 68ch;
  color: var(--ink-60);
  font-size: 15.5px;
}

/* Ancla heredada: un id sin caja, para que un enlace publicado no se rompa. */
.anchor-alias { display: block; height: 0; scroll-margin-top: 90px; }

/* ---- Promo claim (Phase 8) ---- */
.promo-code {
  display: inline-block;
  margin: 14px 0 6px;
  padding: 14px 26px;
  font-family: "Consolas", "Menlo", monospace;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--azul);
  background: rgba(68, 70, 155, .07);
  border: 2px dashed var(--azul);
  border-radius: 12px;
  user-select: all;
}

/* ---- Cookie consent banner (Phase 10, GA4) ---- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
  padding: 16px 22px;
  background: var(--carbon);
  color: var(--marfil);
  border: 1px solid var(--carbon-soft);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
.cookie-banner__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
/* Coral sobre el carbón del banner mide 4,47:1 y se queda a 0,03 de AA. El sitio ya
   resuelve los enlaces sobre oscuro en marfil (`.on-dark .text-link`): 11,6:1, y sigue
   subrayado, así que no pierde nada de identificable. */
.cookie-banner__text a {
  color: var(--marfil);
  text-decoration: underline;
}
.cookie-banner__text a:hover { color: var(--coral); }
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner__actions { justify-content: center; }
}

/* ---- Consulting form (Phase 10) ---- */
.consulting-box {
  max-width: 520px;
  width: 100%;
}
.consulting-form__row {
  display: flex;
  gap: 10px;
}
.consulting-form__row > div { flex: 1 1 0; min-width: 0; }
.consulting-form input[type="text"],
.consulting-form input[type="email"],
.consulting-form textarea {
  width: 100%;
  margin-top: 10px;
  padding: 13px 16px;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-sm);
  background: var(--carbon-700);
  color: var(--marfil);
  font-family: var(--body);
  font-size: 15px;
}
.consulting-form input:focus,
.consulting-form textarea:focus {
  outline: 3px solid var(--ring, var(--azul));
  outline-offset: 2px;
  border-color: var(--azul);
}
.consulting-form textarea { resize: vertical; min-height: 120px; }
.consulting-form__field label {
  display: block;
  margin: 0 0 6px;
  color: var(--marfil);
  font-size: 14px;
  font-weight: 600;
}
.consulting-form__field label span { font-weight: 400; color: var(--ink-on-dark-muted); }
.consulting-form .consulting-form__field input,
.consulting-form .consulting-form__field textarea { margin-top: 0; }
.consulting-form__row + .consulting-form__row,
.consulting-form__row + .consulting-form__field { margin-top: 14px; }
.consulting-form .btn { margin-top: 16px; }
.consulting-form__notice {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-on-dark);
}
.consulting-form__notice a { color: var(--marfil); text-decoration: underline; }
.consulting-form input[name="website"] { display: none !important; }
.consulting-success {
  padding: 20px;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.1);
}
@media (max-width: 720px) {
  .consulting-form__row { flex-direction: column; gap: 14px; }
}
/* display:flex above beats the UA's [hidden] rule - restate it stronger. */
.cookie-banner[hidden] { display: none; }

/* ---------- Account area (logged-in) ---------- */
.account-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.account-nav {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-1);
}
.account-nav__title {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-60);
  padding: 6px 13px 10px;
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 22px;
}
.library-card { display: flex; flex-direction: column; min-width: 0; }
.library-card__content { flex: 1; min-width: 0; }
.library-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.library-card__logo {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  object-fit: contain;
}
.library-card h3 { margin-top: 10px; font-size: clamp(23px, 2vw, 28px); line-height: 1.16; }
.library-card__meta { margin-top: 14px; color: var(--ink-60); font-size: 14px; }
.library-card__actions {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.library-card__actions .btn { width: 100%; white-space: normal; }
.library-card__status { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-60); }
.account-nav__links { display: grid; gap: 2px; }
.account-nav__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  font-family: var(--body);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--carbon);
  transition: background .18s ease, color .18s ease;
}
.account-nav__link svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .75; }
.account-nav__link:hover { background: rgba(41,43,49,.05); }
.account-nav__link.is-active { background: var(--coral-soft); color: var(--coral-text); }
.account-nav__link.is-active svg { opacity: 1; }
.account-nav__link--logout {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-60);
}
.account-nav__link--logout:hover { color: var(--coral); background: transparent; }

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-nav {
    position: static;
    grid-auto-flow: column;
    justify-content: start;
    gap: 6px;
    overflow-x: auto;
  }
  .account-nav__title { display: none; }
  .account-nav__links { grid-auto-flow: column; gap: 6px; }
  .account-nav__link { white-space: nowrap; }
  .account-nav__link--logout {
    margin-top: 0;
    padding-top: 11px;
    border-top: 0;
  }
}

/* ===========================================================
   Ficha conversion polish (Jun 2026) — stronger buy panels,
   ordered route classes, aligned tiers, social proof, sticky CTA.
   =========================================================== */

/* ---- "La más pedida" social-proof flag in the ficha hero ---- */
.ficha-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: rgba(239, 97, 117, .16);
  border: 1px solid rgba(239, 97, 117, .42);
  color: var(--marfil);
  font-family: var(--body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .03em;
}
.ficha-flag::before { content: "★"; color: var(--coral); font-size: 14px; }

/* ---- Buy panel: value recap (left) + checkout card (right) ---- */
.ficha-buy__incl { margin-top: 18px; }
.ficha-buy__cta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-lg);
  background: var(--carbon-soft);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}
.ficha-buy__cta .btn { width: 100%; }
.ficha-buy__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.ficha-buy__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(239, 232, 227, .66);
}
.ficha-buy__trust li::before { content: "✓"; color: var(--coral); font-weight: 800; }
/* Few-seats urgency — coral, slight pulse so it reads as "act now". */
.seats--low { color: var(--coral); }
.seats--low::before { background: var(--coral); animation: seat-pulse 1.8s ease-in-out infinite; }
@keyframes seat-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .seats--low::before { animation: none; } }

/* ---- Tier cards: equal height, pinned CTA, "Recomendado" badge ---- */
.tier-card { position: relative; display: flex; flex-direction: column; }
.tier-card .mini-list { margin-bottom: 28px; }
.tier-card .btn { margin-top: auto; }
.tier-badge {
  position: absolute;
  top: -13px;
  right: 22px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--azul);
  color: var(--white);
  font-family: var(--head);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: var(--sh-azul);
}

/* ---- Included-class cards: ordered, value-first, no repeated bio ---- */
.route-classes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.route-classes > li {
  flex: 0 1 calc((100% - 44px) / 3);
  min-width: 260px;
}
.route-class {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 26px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.route-class:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: rgba(41, 43, 49, .18); }
.route-class__num {
  position: absolute;
  top: -16px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  font-family: var(--head);
  font-weight: 600;
  font-size: 17px;
  box-shadow: var(--sh-coral);
}
.route-class .kicker { margin-top: 4px; }
.route-class h3 { margin-top: 9px; font-size: 20px; }
.route-class__sub { margin-top: 10px; color: var(--ink-60); font-size: 14.5px; line-height: 1.5; }
.route-class__teacher {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-60);
  line-height: 1.45;
}
.route-class__teacher strong { color: var(--carbon); font-weight: 600; }
.route-class__link {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--azul);
  font-family: var(--head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.route-class__link .arr { width: 1.1em; height: 1.1em; transition: transform .2s ease; }
.route-class__link:hover { color: var(--coral-text); }
.route-class__link:hover .arr { transform: translateX(3px); }

/* ---- Suggested routes (on a class ficha): equal height, pinned CTA ---- */
.route-suggested {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.route-suggested > * {
  flex: 0 1 calc((100% - 44px) / 3);
  min-width: 260px;
  display: flex;
  flex-direction: column;
}
.route-suggested .price-line { margin-top: auto; }
.route-suggested .btn { margin-top: 18px; align-self: flex-start; }

/* ---- Mobile sticky buy bar ---- */
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(31, 33, 38, .97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-on-dark);
  transform: translateY(110%);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.buybar.is-in { transform: none; }
/* Fase 2.8 — el banner de cookies y la barra de compra se apilaban en el primer
   viewport móvil de la ficha: juntos, un tercio de la pantalla en la primera
   impresión, en el dispositivo principal de la audiencia. La barra espera a que el
   visitante conteste el banner; entonces el CTA llega a una pantalla limpia.
   `:has()` reevalúa solo cuando el script del banner conmuta su atributo `hidden`,
   así que no hace falta JS nuevo. Donde `:has()` no exista, se comporta como hoy. */
body:has(#cookie-banner:not([hidden])) .buybar { transform: translateY(110%); }
.buybar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.buybar__price { color: var(--marfil); font-family: var(--head); line-height: 1; }
.buybar__price strong { color: var(--coral); font-size: 24px; font-weight: 600; }
.buybar__price s { color: rgba(239, 232, 227, .45); font-size: 14px; font-weight: 500; margin-right: 6px; }
.buybar__price span { display: block; margin-top: 3px; font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-on-dark-muted); }
.buybar .btn { padding: 13px 26px; flex: 0 0 auto; }
@media (min-width: 901px) { .buybar { display: none; } }

@media (max-width: 900px) {
  .route-classes > li,
  .route-suggested > * { flex-basis: 100%; }
}

/* ===========================================================
   Clases Maestras endorsed sub-brand
   Scoped to the public catalog funnel; GTC remains the shell.
   =========================================================== */
body.theme-masterclasses {
  --cm-orange: #F3AA52;
  --cm-orange-dark: #CE632E;
  /* Naranja de TEXTO sobre fondo claro (Fase 2.9). `--cm-orange-dark` mide 3,18:1
     sobre marfil y 3,85:1 sobre blanco: falla AA en el eyebrow, en la pestaña activa
     de la barra y en el precio de las tarjetas. Mismo tono (19,9°) y misma saturación,
     solo más oscuro → 5,34:1 sobre marfil, 6,47:1 sobre blanco. Es a `--cm-orange-dark`
     lo que `--coral-text` es a `--coral`. **Solo sobre fondo claro:** sobre carbón mide
     1,7:1, así que en banda oscura sigue mandando `--cm-orange-dark` (que ahí sí pasa). */
  --cm-orange-text: #964822;
  --cm-teal: #5AAEB7;
  --cm-gray: #747474;
  --cm-head: "Bitter", Georgia, serif;
  --cm-shadow-orange: 0 10px 28px rgba(206, 99, 46, .28);
  --cm-shadow-teal: 0 10px 28px rgba(90, 174, 183, .26);
}

.theme-masterclasses .phero h1,
.theme-masterclasses .section h2,
.theme-masterclasses .section h3,
.theme-masterclasses .section h4 {
  font-family: var(--cm-head);
  letter-spacing: -.02em;
}

.theme-masterclasses .phero {
  isolation: isolate;
}
.theme-masterclasses .phero::before,
.theme-masterclasses .phero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transform: rotate(-12deg);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 78%);
}
.theme-masterclasses .phero::before {
  top: -70px;
  right: -80px;
  width: 270px;
  height: 170px;
  background: var(--cm-orange);
}
.theme-masterclasses .phero::after {
  right: 8%;
  bottom: -54px;
  width: 180px;
  height: 92px;
  background: var(--cm-teal);
}
.theme-masterclasses .phero > .container {
  position: relative;
  z-index: 1;
}
.theme-masterclasses .phero__panel {
  border-color: rgba(243, 170, 82, .34);
}
.theme-masterclasses .cm-brandmark {
  width: clamp(180px, 20vw, 220px);
  height: auto;
  margin: 0 auto 22px;
}

.theme-masterclasses .nav__link.is-active {
  color: var(--cm-orange-text);
}
.theme-masterclasses .nav__link.is-active::after {
  background: var(--cm-orange-dark);
}

.theme-masterclasses .eyebrow {
  color: var(--cm-orange-text);
}
.theme-masterclasses .eyebrow::before,
.theme-masterclasses .check-list li::before,
.theme-masterclasses .mini-list li::before,
.theme-masterclasses .steps b {
  background: var(--cm-orange);
}
.theme-masterclasses .phero .eyebrow,
.theme-masterclasses .on-dark .eyebrow {
  color: var(--cm-orange);
}
.theme-masterclasses .phero .eyebrow::before,
.theme-masterclasses .on-dark .eyebrow::before {
  background: var(--cm-orange);
}

.theme-masterclasses .btn--coral {
  background: var(--cm-orange);
  color: var(--carbon);
  box-shadow: var(--cm-shadow-orange);
}
.theme-masterclasses .btn--coral:hover {
  background: var(--cm-orange);
  color: var(--carbon);
  border-color: var(--cm-orange-dark);
  box-shadow: 0 14px 34px rgba(206, 99, 46, .38);
}
/* The waitlist submit is a bare <button> styled by .field-row, not .btn--coral,
   so the override above never reached it and every CM page ended on a coral
   button under an orange page. Carbon on cm-orange = 7.20:1. */
.theme-masterclasses .footer .field-row button,
.theme-masterclasses .on-dark .field-row button,
.theme-masterclasses .heroA .field-row button {
  background: var(--cm-orange);
  color: var(--carbon);
}

.theme-masterclasses .btn--azul {
  background: var(--cm-teal);
  color: var(--carbon);
  box-shadow: var(--cm-shadow-teal);
}
.theme-masterclasses .btn--azul:hover {
  background: var(--cm-teal);
  color: var(--carbon);
  border-color: var(--carbon);
}

/* Teal bands use dark copy: white on this teal does not meet text contrast. */
.theme-masterclasses .on-azul {
  background: var(--cm-teal);
  color: var(--carbon);
}
.theme-masterclasses .on-azul .eyebrow,
.theme-masterclasses .on-azul .consent {
  color: rgba(41, 43, 49, .8);
}
.theme-masterclasses .on-azul .eyebrow::before {
  background: var(--carbon);
}
.theme-masterclasses .on-azul .field-row input[type="email"]:focus,
.theme-masterclasses .on-azul :focus-visible {
  outline-color: var(--carbon);
  border-color: var(--carbon);
}

.theme-masterclasses .card,
.theme-masterclasses .route-class,
.theme-masterclasses .agenda-card,
.theme-masterclasses .calendar-row {
  border-color: rgba(206, 99, 46, .22);
}
.theme-masterclasses .card--hover:hover,
.theme-masterclasses .route-class:hover,
.theme-masterclasses .agenda-card:hover {
  border-color: var(--cm-orange-dark);
}
.theme-masterclasses .notice {
  background: rgba(90, 174, 183, .16);
  border-color: rgba(90, 174, 183, .54);
}
.theme-masterclasses .text-link,
.theme-masterclasses .route-class__link {
  color: var(--carbon);
  text-decoration-color: var(--cm-teal);
}
.theme-masterclasses .text-link:hover,
.theme-masterclasses .route-class__link:hover {
  color: var(--cm-orange-text);
}
/* Los enlaces de prosa hacen hover en coral en la marca base; dentro del sub-tema eso
   sería una filtración de coral en una página naranja (el mismo bug de la Fase 0.6). */
.theme-masterclasses .ficha-copy a:hover,
.theme-masterclasses .section__head p a:not(.btn):hover,
.theme-masterclasses .proof__copy p a:hover,
.theme-masterclasses .proof__facts a:hover {
  color: var(--cm-orange-text);
}
.theme-masterclasses .on-dark .section__head p a:not(.btn):hover,
.theme-masterclasses .on-dark .ficha-copy a:hover {
  color: var(--cm-orange);
}

/* Precios sobre fondo claro: el de tarjeta va a 22px/600, que NO cuenta como texto
   grande (hace falta ≥24px, o ≥18,66px con peso ≥700), así que 3,85:1 no alcanza.
   `.buybar__price strong` salía de esta lista y lo pisaba la regla de abajo: la barra
   siempre está sobre carbón. */
.theme-masterclasses .price-line,
.theme-masterclasses .ficha-price {
  color: var(--cm-orange-text);
}
/* Sobre carbón manda el naranja claro; el de texto ahí mediría 1,7:1. */
.theme-masterclasses .on-dark .ficha-price,
.theme-masterclasses .buybar__price strong {
  color: var(--cm-orange);
}
.theme-masterclasses .price-strike::after {
  background: var(--cm-orange-dark);
}
.theme-masterclasses .ficha-reqs {
  border-left-color: var(--cm-orange-dark);
}
.theme-masterclasses .ficha-teacher__credit {
  color: var(--carbon);
  border-left: 3px solid var(--cm-teal);
  padding-left: 10px;
}
.theme-masterclasses .ficha-flag {
  background: rgba(243, 170, 82, .14);
  border-color: rgba(243, 170, 82, .48);
}
.theme-masterclasses .ficha-flag::before,
.theme-masterclasses .ficha-buy__trust li::before {
  color: var(--cm-orange);
}

.theme-masterclasses .filters-chip:hover,
.theme-masterclasses .filters-reset {
  border-color: var(--cm-orange-dark);
}
.theme-masterclasses .filters-chip.is-active,
.theme-masterclasses .filters-reset:hover {
  color: var(--carbon);
  background: var(--cm-orange);
  border-color: var(--cm-orange-dark);
  box-shadow: var(--cm-shadow-orange);
}
.theme-masterclasses .filters-reset {
  color: var(--carbon);
  background: rgba(243, 170, 82, .18);
}
.theme-masterclasses .agenda-date,
.theme-masterclasses .calendar-date {
  background: rgba(243, 170, 82, .2);
}
.theme-masterclasses .agenda-date b,
.theme-masterclasses .calendar-date b {
  color: var(--cm-orange-dark);
}
.theme-masterclasses .agenda-pill--session,
.theme-masterclasses .agenda-tag--area {
  color: var(--carbon);
  background: rgba(90, 174, 183, .24);
}
.theme-masterclasses .filters-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23292B31' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.theme-masterclasses .filters-search input:focus-visible,
.theme-masterclasses .filters-chip:focus-visible,
.theme-masterclasses .filters-field select:focus-visible,
.theme-masterclasses .filters-reset:focus-visible {
  outline-color: var(--cm-orange-dark);
  border-color: var(--cm-orange-dark);
}

.theme-masterclasses .seats {
  color: var(--carbon);
}
.theme-masterclasses .seats::before {
  background: var(--cm-teal);
}
.theme-masterclasses .on-dark .seats,
.theme-masterclasses .on-dark .seats--low,
.theme-masterclasses .on-dark .seats--out {
  color: var(--cm-orange);
}
.theme-masterclasses .seats--low::before,
.theme-masterclasses .seats--out::before {
  background: var(--cm-orange);
}
.theme-masterclasses .tier-card--guided {
  border-color: var(--cm-teal);
  box-shadow: 0 18px 40px rgba(90, 174, 183, .2);
}
.theme-masterclasses .tier-badge {
  background: var(--cm-teal);
  color: var(--carbon);
  box-shadow: var(--cm-shadow-teal);
}
.theme-masterclasses .catalog-area__badge {
  background: var(--cm-teal);
  color: var(--carbon);
}
.theme-masterclasses .route-class__num {
  background: var(--cm-orange);
  color: var(--carbon);
  box-shadow: var(--cm-shadow-orange);
}

/* Focus rings adapt to each surface instead of relying on low-contrast teal. */
.theme-masterclasses :focus-visible {
  outline: 3px solid var(--cm-orange-dark);
  outline-offset: 2px;
}
.theme-masterclasses .phero :focus-visible,
.theme-masterclasses .on-dark :focus-visible,
.theme-masterclasses .buybar :focus-visible {
  outline-color: var(--cm-orange);
}

/* Cookie consent belongs to the parent GTC shell.
   La etiqueta va en carbón-700, no en blanco: este override se escribió antes de la
   Fase 1.6 y reintroducía el blanco sobre coral (3,16:1) que esa fase había quitado de
   todo el sitio. Carbón-700 sobre el coral intacto = 5,09:1. */
.theme-masterclasses .cookie-banner .btn--coral {
  background: var(--coral);
  color: var(--carbon-700);
  box-shadow: var(--sh-coral);
}
.theme-masterclasses .cookie-banner .btn--coral:hover {
  background: #ed4f66;
  border-color: transparent;
}

@media (max-width: 900px) {
  .theme-masterclasses .phero--archive h1 { max-width: 18ch; }
}

@media (max-width: 720px) {
  .theme-masterclasses .phero--archive { padding-block: 96px 64px; }
  .theme-masterclasses .phero--archive h1 { max-width: 18ch; font-size: clamp(38px, 9vw, 50px); }
  .theme-masterclasses .phero::before {
    width: 180px;
    height: 120px;
  }
  .theme-masterclasses .phero::after {
    right: -28px;
    width: 130px;
  }
  .theme-masterclasses .cm-brandmark {
    width: 180px;
  }
}

/* ===========================================================
   Motion layer (Jul 2026) — subtle life on scroll and load.
   Everything below is gated on prefers-reduced-motion.
   =========================================================== */

/* Soft cross-fade between page navigations (progressive enhancement:
   Chromium-only today, silently ignored elsewhere). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Eyebrow rule draws in when its section reveals. Con `width` esto provocaba layout
     en cada fotograma —y el filete aparece en casi todas las secciones—; `transform` se
     resuelve en composición y da el mismo dibujo. */
  .eyebrow::before { transition: transform .55s cubic-bezier(.2, .7, .2, 1) .12s; }
  .js .reveal:not(.is-in) .eyebrow::before { transform: scaleX(0); }

  /* Ken Burns: el slide activo respira mientras está en pantalla.
     site.js le da el empujón al primero para que el primer pintado también haga zoom.

     El slide que sale **no** se anima de vuelta. Antes compartía la transición de 6,5s
     de la regla base, así que al desactivarse volvía de 1.06 a 1 animándose — y como el
     crossfade dura 1,1s, durante ese segundo se veían la foto saliente encogiéndose y
     la entrante creciendo a la vez. Eso es lo que se percibe como un salto: medido, el
     hero va a 59,9 fps con la CPU ×4 y cero fotogramas largos, así que nunca fue
     rendimiento. Ahora la saliente mantiene su escala y vuelve al inicio de golpe a los
     1,25s, cuando ya es invisible. */
  .heroA__photo { transition: transform 0s linear 1.25s; }
  .heroA__slide.is-active .heroA__photo {
    transform: scale(1.06);
    transition: transform 6.5s ease-out;
  }

  /* Hero watermark drifts, echoing the infinity mark. */
  .heroA__wm { animation: wm-drift 46s ease-in-out infinite alternate; }

  /* Old price gets struck through as the buy panel reveals. */
  .js .reveal .price-strike::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s ease .5s;
  }
  .js .reveal.is-in .price-strike::after { transform: scaleX(1); }
}

@keyframes wm-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-30px, 22px, 0) rotate(-1.5deg); }
}

/* Public cookie controls reuse the account setting and the footer link treatment. */
.footer__cookie-settings {
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.footer__cookie-settings:hover { color: var(--coral); }

/* Keep existing labels in place while a lead request or verification is pending. */
.waitlist-form[aria-busy="true"] button[type="submit"],
.consulting-form[aria-busy="true"] button[type="submit"] { cursor: progress; }
.waitlist-form[aria-busy="true"] button[type="submit"]::after,
.consulting-form[aria-busy="true"] button[type="submit"]::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  vertical-align: middle;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: lead-pending 1s linear infinite;
}
@keyframes lead-pending { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .waitlist-form[aria-busy="true"] button[type="submit"]::after,
  .consulting-form[aria-busy="true"] button[type="submit"]::after { animation: none; }
}