/* ── Sistema de diseño de la página pública de academias ──────────────────────
   Fuente única de escala, color y forma. Sale del handoff de diseño
   (design_handoff_academia/), portado a los nombres en español del proyecto.

   Aquí van SOLO tokens y primitivas compartidas (tipografía, botones, insignias,
   foco). Cada componente —card, slide-over, checkout— vive en su propio archivo.

   Las cuatro variables de marca no se declaran aquí: las inyecta el servidor en
   el <style> del encabezado, derivadas del color de cada academia
   (utilidades/generales/branding/color_marca.py).
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Grises fijos: no los toca la academia, solo su color de marca */
  --tinta:          #0F1115;  /* títulos */
  --tinta-2:        #1C2026;  /* datos */
  --texto:          #4A515C;  /* texto secundario */
  --meta:           #767E8A;  /* meta y etiquetas */
  --linea-fuerte:   #C9CDD4;  /* radios, bordes punteados */
  --linea-campo:    #D8DBE0;  /* borde de botón e input */
  --linea:          #E4E6EA;  /* borde de card y hairlines */
  --fondo-suave:    #F5F6F8;
  --fondo-resumen:  #F7F8FA;
  --error:          #B4231A;

  /* Espaciado, base 4 */
  --esp-1:  4px;  --esp-2:  8px;  --esp-3:  12px; --esp-4:  16px;
  --esp-5:  20px; --esp-6:  26px; --esp-7:  28px; --esp-8:  40px;
  --esp-9:  48px; --esp-10: 72px; --esp-11: 88px; --esp-12: 104px;

  --radio-insignia: 6px;
  --radio-boton:    10px;
  --radio-bloque:   12px;
  --radio-card:     14px;
  --radio-modal:    16px;

  --sombra-sm: 0 1px 2px rgba(15, 17, 21, .05);
  --sombra-md: 0 14px 34px -10px rgba(15, 17, 21, .20);
  --sombra-lg: 0 32px 80px -20px rgba(15, 17, 21, .45);

  --ancho-maximo:   1344px;
  --margen-lateral: 48px;
}

.contenedor-ac {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
}

/* ── Tipografía ──
   La familia la elige la academia, así que la jerarquía no puede depender del
   carácter de ninguna: la cargan el tamaño, el peso y el tracking negativo. */
.tx-display     { font-size: 64px; line-height: 1.04; font-weight: 700; letter-spacing: -.035em; text-wrap: pretty; }
.tx-display-sm  { font-size: 56px; line-height: 1.06; font-weight: 700; letter-spacing: -.030em; text-wrap: pretty; }
.tx-h2          { font-size: 40px; line-height: 1.10; font-weight: 700; letter-spacing: -.030em; }
.tx-h3          { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.028em; }
.tx-titulo-card { font-size: 24px; line-height: 1.20; font-weight: 650; letter-spacing: -.020em; }
.tx-precio      { font-size: 26px; line-height: 1.10; font-weight: 700; letter-spacing: -.020em; }
.tx-bajada      { font-size: 20px; line-height: 1.50; color: var(--texto); max-width: 44ch; }
.tx-cuerpo      { font-size: 16px; line-height: 1.65; color: var(--texto); }
.tx-cuerpo-sm   { font-size: 15px; line-height: 1.55; color: var(--texto); }
.tx-dato        { font-size: 14px; line-height: 1.40; }
.tx-meta        { font-size: 13px; line-height: 1.45; color: var(--meta); }

/* Único texto que no usa la fuente de la academia: las etiquetas de sección
   (HORARIO, PAGOS, MODALIDAD) van en la monoespaciada del sistema. */
.tx-etiqueta {
  font-family: var(--fuente-mono);
  font-size: 11px; line-height: 1; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--meta);
}

/* ── Botones ── */
.btn-marca {
  /* Relleno con el degradado de la academia; si solo cargó un color, el propio
     valor viene plano y esto se comporta igual que antes. */
  background: var(--marca-degradado); color: var(--sobre-marca);
  font-size: 17px; font-weight: 600; padding: 15px 26px;
  border: 0; border-radius: var(--radio-boton);
  text-decoration: none; display: inline-block; cursor: pointer;
}
.btn-contorno {
  background: #fff; color: var(--tinta); border: 1px solid var(--linea-campo);
  font-size: 17px; font-weight: 600; padding: 14px 24px;
  border-radius: var(--radio-boton);
  text-decoration: none; display: inline-block; cursor: pointer;
}
.btn-card { display: block; text-align: center; font-size: 15px; padding: 13px; }

/* ── Insignias ── */
.insignia         { font-size: 12px; line-height: 1; font-weight: 600; padding: 5px 9px; border-radius: var(--radio-insignia); }
.insignia--marca  { background: var(--marca-suave); color: var(--marca-fuerte); }
.insignia--neutra { background: var(--fondo-suave); color: var(--texto); }

/* ── Foco visible ──
   Con :where() la especificidad queda en 0, así que cualquier componente puede
   sobrescribirlo sin pelear. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-suave);
}

@media (max-width: 720px) {
  :root { --margen-lateral: 20px; }
  .tx-display { font-size: 40px; letter-spacing: -.032em; }
  .tx-h2      { font-size: 28px; letter-spacing: -.028em; }
}