/* La marca de WAAYLABS: lo único que hay que tocar si cambia. Colores, fuentes y logotipo vienen del repo
   waaylabs (web/sitio, la web oficial); los valores son los mismos que allí.
   Puntos de corte (mobile first, los mismos de la web): 650 px tableta, 950 px escritorio, 1200 px ancho.
   Las variables no sirven dentro de @media: por eso se anotan aquí y se escriben a mano en cada módulo. */
@font-face { font-family: "Libre Caslon Display"; font-weight: 400; font-display: swap; src: url("../fuentes/libre-caslon-display-400.3b6d3d56e4eb.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400 500; font-display: swap; src: url("../fuentes/dmsans.7c87a648293f.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fuentes/inter-500.51205681a1ba.woff2") format("woff2"); }

:root {
  /* Paleta oficial. */
  --obsidiana: #080B0B; --marfil: #E8E4DA; --jade: #006B5B; --piedra: #686F6A; --electrico: #22F7A6;
  /* Derivados para la interfaz. Contraste ≥ 4,5:1 en todo el texto: el secundario es #5A605C, no el Piedra
     (sobre el fondo da 4,06); el eléctrico solo va sobre obsidiana (sobre claro no llega a 2:1). */
  --fondo: #F5F3EE; --superficie: #FFFFFF; --superficie-2: #FAF9F6; --linea: #E4E0D6; --borde-campo: #C9C4B8;
  --texto-2: #5A605C; --jade-claro: #E7F1ED; --jade-oscuro: #0F2A24; --jade-hover: #00594C; --jade-medio: #4E9A82;
  --error: #A4262C; --error-claro: #FBEDEE; --lateral-texto: #C9C6BD; --lateral-gris: #8F948F;
  /* Tipografía de la web: Libre Caslon Display en títulos, DM Sans en el texto, Inter en antetítulos y etiquetas. */
  --titulos: "Libre Caslon Display", Georgia, serif;
  --texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --etiquetas: Inter, "DM Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Formas y espacios. */
  --radio: 16px; --radio-chico: 10px; --sombra: 0 1px 2px rgba(8, 11, 11, .04);
  --margen: 16px; --ancho-lateral: 252px; --toque: 44px;
}
@media (min-width: 650px) { :root { --margen: 24px; } }
@media (min-width: 950px) { :root { --margen: 32px; } }
