/* Clases de la Home nativa: promueven estilos inline del prototipo a clases
   (para que párrafos/headings sean bloques nativos válidos, sin style ad-hoc). */

/* .section.is-band vive ahora en variant-comunidad (global). */

/* Academia: intro bajo el h2 */
.academia__intro { margin: var(--space-2) 0 var(--space-4); max-width: 56ch; }

/* Club: titular acotado (el color blanco lo hereda de .club) */
.club__lead-h2 { max-width: 20ch; }

/* El tag "Gratis · abierto" era un <span> en el prototipo; como bloque nativo es un <p>, así que le
   pega .ccard__body p { color: on-dark-soft } (gris, 0,1,1) y ganaba al blanco de .ccard__free (0,1,0).
   Reponemos el blanco con más especificidad. */
.ccard__body .ccard__free { color: #fff; }

/* Cursos: rejilla del wrap + intro */
.cursos__wrap { display: grid; gap: var(--space-4); }
.cursos__intro { margin-top: var(--space-2); max-width: 74ch; font-size: var(--fs-lg); }

/* News: copy y centrado */
.news__copy { color: var(--green-tint); margin-top: var(--space-2); }
.news .eyebrow { justify-content: center; color: #fff; }
.tac { text-align: center; }

/* ============ Decoración movida a CSS (fuera del contenido y del editor) ============ */
/* Icono de pieza de cada puerta: antes un <span>, ahora ::before (reusa --pza de .pza--*) */
.doors .door::before {
  content: ""; display: block; width: 50px; height: 58px; margin-bottom: var(--space-2);
  background-color: var(--accent);
  -webkit-mask: var(--pza) center / contain no-repeat; mask: var(--pza) center / contain no-repeat;
}
.doors .door--kids::before { width: 60px; height: 74px; }
/* Pin del mapa: antes SVG inline, ahora ::before con máscara. Se reproduce el SVG inline del
   prototipo (inline-block + vertical-align:-0.18em) EN LUGAR de inline-flex: la caja flex era atómica
   e ignoraba el line-height del padre, creciendo ~2.6px en el rango 640-939. */
.hero__map a { color: inherit; }
.hero__map a::before {
  content: ""; display: inline-block; vertical-align: -0.18em; width: 1.1em; height: 1.1em; margin-right: 0.35em; background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============ Widgets reconstruidos con bloques nativos: clases de elementos internos ============ */
/* Fecha de evento (número grande + mes) */
/* El día era un <b> dentro de .event__date, que hereda var(--font-mono) (JetBrains Mono) weight 900,
   NO la display. Con font-display el "12" salía ~5.5px más estrecho y desplazaba el texto del evento. */
.event__num { font-family: var(--font-mono); font-weight: 900; font-size: 1.8rem; color: var(--accent); line-height: 1; }
/* El mes era un <span> inline en el prototipo: su caja de línea la fija el line-height de
   .event__date (font-mono 17px, line-height:1 => 17px). Como bloque nativo <p> tomaría su propio
   line-height (11.5px) y perdía ~5.5px por fecha (17px totales en la agenda). Fijamos esos 17px. */
.event__mo { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 17px; }
.event__text { max-width: none; }
/* Eyebrow en verde claro (sobre fondo oscuro, ej. agenda del club) */
.eyebrow--green { color: var(--green-light); }
.eyebrow--green::before { background: var(--green-light); }

/* Stat (número + etiqueta) */
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 8vw, 4.5rem); line-height: 0.9; color: var(--accent); }
/* Mismo caso que .event__mo: en el prototipo el label era un <span> inline y su caja de línea la
   fijaba el line-height del padre .stat (--lh-normal 1.55 x 17px = 26.35px). Como <p> bloque tomaba
   su propio line-height (19.3px) y perdía ~7px por stat. Fijamos la caja del padre. */
.stat__label { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-700); line-height: 26.35px; }

/* Utilidades de margen superior (envoltorios de CTA) */
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }